/** Shopify CDN: Minification failed

Line 1027:19 Expected identifier but found whitespace
Line 1027:21 Unexpected "{"
Line 1027:34 Expected ":"

**/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

/* Prevent horizontal page drag on mobile caused by elements wider than viewport */
html, body {
  overflow-x: hidden;
}

:root {
    --container-radius: 0.6rem;
    --box-radius: 0.4rem;
    --side-spacing: 0.7rem;
    --top-spacing: 0.7rem;
    --text-size-base: 15px;
    --font-size-multiplier: 1;
    --site-top-margin: 0rem;
    --responsive-max-width: 100%;
    --window-bottom-safe-space: 100vh-100svh;
    @media (min-width: 768px) {
      --font-size-multiplier: 1.3;
    }
    @media (min-width: 992px) {
      --text-size-base: 16px;
      --font-size-multiplier: 1.4;
      --side-spacing: 1.1rem;
      --top-spacing: 0.7rem;
      --responsive-max-width: 1100px;
    }
    @media (min-width: 1200px) {
      --font-size-multiplier: 1.5;
      --responsive-max-width: 1100px;
      --max-container-height: 900px;
      --site-top-margin: 1.5rem;

    }
    @media (min-width: 1400px) {
        --responsive-max-width: 1200px;
        --site-top-margin: 2rem;
      }
    @media (min-width: 1600px) {
        --responsive-max-width: 1250px;
        --text-size-base: 17px;
        --site-top-margin: 2.5rem;
      }
    @media (min-width: 1800px) {
        --responsive-max-width: 1300px;
        --site-top-margin: 3rem;
      }

    --site-max-width: calc(var(--responsive-max-width) - 2 * var(--side-spacing));
    /* Secondary / meta text — one notch below the base body size. Used for the
       free-shipping hint, Kaufargumente, set-item color labels, alt-nav, sheet
       subtitles, toasts, etc. Tracks --text-size-base across breakpoints. */
    --text-size-small: calc(var(--text-size-base) - 2px);
    --headline-size-xs: calc(1rem * var(--font-size-multiplier));
    --headline-size-s: calc(1.3rem * var(--font-size-multiplier));
    --headline-size-m: calc(1.6rem * var(--font-size-multiplier));
    --headline-size-l: calc(2.4rem * var(--font-size-multiplier));
    --headline-size-xl: calc(2.8rem * var(--font-size-multiplier));
    --color-lavender: #dad4ff; 
    --color-lavender2: #bfa1ff;
    --color-green: #e6ffa2;
    --color-green2: #b4ed4d;
    --color-sand: #fdfdf4;
    --color-sand2: #ebe6d6;
    --color-orange: #fdffaa;
    --color-orange2: #fff275;

    --shopify-accelerated-checkout-inline-alignment: right;
}

/*************    |     LAYOUT     |   *************/

.header-section-overlap:not(.nav-opaque) .product-area .product-area__media {
  margin-top: 0 !important;
}

.section-spacing > *, .product-area__details {
  padding-left: var(--side-spacing) !important;
  padding-right: var(--side-spacing) !important;
}

 .section-footer .wide-container {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }

/*** collection padding optimization / Disabled because works for 2 columns only
div[data-section-type="collection-template"] {
  .wide-container {
    padding: 0 !important; 
  }
  .product-block {
    padding: 0 !important; 
    padding-left: var(--side-spacing) !important;
    width: calc(50% - var(--side-spacing) / 2) !important;   
  }
   .product-block a:not(.image-inner) {
    padding-left: calc(var(--side-spacing)) !important;
    padding-right: calc(var(--side-spacing)) !important;
    display: block;
  }
}

***/

.section-spacing {
  padding-left: 0;
  padding-right: 0;
}


.template-collection {
  .wide-container, .product-list {
    padding: 0 !important;
  }
  .product-block a.caption, div.central {
    padding-left: var(--side-spacing) !important;
    padding-right: var(--side-spacing) !important;
  }
  div.central {
    margin: 0 !important;
  }
  h1.feature-header {
    margin-bottom: 0;
  }
}

#site-control {
  top: var(--site-top-margin);
}

#site-control.has-announcement {
  margin-top: 45px;
  transition: margin 0.6s;
}
.scrolled-down #site-control.has-announcement {
  margin-top: 0px;
}

.cc-announcement {
  height: 45px;
  transition: height 0.6s !important;
}
.cc-announcement span {
    text-decoration: underline;
}
.scrolled-down .cc-announcement {
  height: 0px;
}

.cc-announcement .cc-announcement__inner {
  font-weight: 500;
}

/* announcement at the top becaus no section overlay of header */
body:not(.header-section-overlap) #shopify-section-header {
  overflow: visible;
}
body:not(.header-section-overlap) .cc-announcement {
  top: calc(-1 * var(--nav-height));
}

#page-content {
  top: var(--site-top-margin);
}

.section-spacing.container {
  width: auto;
}

.container, .content, .reading-width {
  max-width: none;
}

.text-column__text p:first-child {
    margin-top: 0.2em !important;
}

.shopify-section:not(#shopify-section-header, #shopify-section-popup), .cc-popup-modal {
  margin-left: var(--side-spacing);
  margin-right: var(--side-spacing);
  margin-top: var(--top-spacing);
  margin-bottom: 0px;
  border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0); 
  /* overflow:hidden !important; breaks sticky product info */ 
  max-width: var(--site-max-width);
  @media (min-width: 1100px) {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
.image-with-text .padded-block {
  padding: calc(var(--side-spacing) * 2) var(--side-spacing);
  /* margin-bottom: calc(var(--side-spacing) * 2); */
}
}

.image-with-text__image__inner {
  border-radius: var(--container-radius);
  overflow: hidden;
  display: block;
}

.cc-popup .cc-popup-modal {
  padding: calc(var(--side-spacing) * 2) !important;
  margin: calc(var(--side-spacing) * 2) !important;
  color: #000 !important;
  max-width: calc(100vw - 4 * var(--side-spacing));
}

.cc-popup .cc-popup-modal .rte {
  text-align: left;
}

.cc-popup .cc-popup-modal h2 {
  line-height: 1 !important;
}

.cc-popup {
  z-index: 9999999999 !important;
}

.theme-modal > .inner .growth-area {
  align-items: flex-end;
  padding-top: 30px;
}

.main-nav ul li {
  text-align: right;
}

@media (min-width: 1441px) {
    .site-control .cart {
        right: 0;
    }
}

@media (max-width: 1100px) {
.links.site-control__inner {
    justify-content: left !important;
  }
  #shopify-section-header a.menu {
        right: var(--side-spacing) !important;
        left: auto;
    }
    #shopify-section-header a.cart {
        right: calc(48px + var(--side-spacing)) !important;
    }
}

#page-menu > .inner {
  justify-content: center;
}

.logo img {
  margin-left: 0;
}


/*************    |     STYLES     |   *************/

/* optimize jumping of first section if it overlaps with header */
body {
  transition: padding 0.5s;
}
/* list pages where first section overlaps to not have content jump up later */
.page-studio-sonntag-xo-hocker-und-sidetable, .page-xo-farbmuster-set, .page-studio-sonntag-about, .page-studio-sonntag-liebenswerte-objekte, .page-studio-sonntag-xo-ein-mobel-mit-personlichkeit,
.template-suffix-set-configurator {
  padding-top: 0;
}
/* Konfigurator-Seite: Header überlappt die 3D-Szene (wie mobil) — repliziert
   .header-section-overlap statisch, damit es ohne JS-Flip sofort greift. */
.template-suffix-set-configurator #page-content {
  padding-top: 0;
}

:root, body, #page-content h1, h2, #page-content h2, h3, h4, h5, h6, div, p, a, label {
  font-family: "Inter Tight", sans-serif !important;
  font-weight: 300;
  line-height: 1.2;
}

/* Funnel Display for all headlines */
#page-content h1, #page-content h2, h3, h4, h5, h6 {
  /*font-family: "Funnel Display", sans-serif !important;*/
  font-family: "Syne", sans-serif !important;
  letter-spacing: -3%;
}

div.price {
  font-weight: 500;
}

:root, body, div, p, a, label {
  letter-spacing: 0 !important;
}

/* Soften bold: render 700-weight (incl. <strong>/<b>) as 600 site-wide. */
strong, b { font-weight: 600; }


.color-bg {
  overflow: hidden;
}

.color-bg.green {
  background: linear-gradient(150deg, var(--color-green) 0%, var(--color-green2) 100%);
}
.color-bg.yellow {
  background: linear-gradient(150deg, #ffffca 0%, #faffa8 100%);
}
.color-bg.sand {
  background: linear-gradient(150deg, var(--color-sand) 0%, var(--color-sand2) 100%);
}
.color-bg.orange {
  background: linear-gradient(150deg, var(--color-orange) 0%, var(--color-orange2) 100%);
}
.color-bg.lavender {
background: linear-gradient(150deg, var(--color-lavender) 0%, var(--color-lavender2) 100%);
}

#shop-hcaptcha-badge-container {
  display: none !important;
}

table th {
  text-align: left;
  font-weight: 500;
}

/* price transparency */
.price-transparency-table1 th {
  background: var(--color-orange);
}
.price-transparency-table2 th{
  background: var(--color-green);
}
th:first-child {
  border-top-left-radius: var(--container-radius);
  border-bottom-left-radius: var(--container-radius);
}
th:last-child {
  border-top-right-radius: var(--container-radius);
  border-bottom-right-radius: var(--container-radius);
}

/* FOOTER */

.section-footer .section-footer__newsletter-block .signup-form form button {
  right: 1em;
}
.social-links {
  padding-top: 0;
}
.section-footer .section-footer__text-block {
  margin-bottom: 0;
}
.section-footer__row-container {
  margin-bottom: 0;
}
.section-footer .section-footer__row-lower {
  padding-top: 2em !important;
  padding-bottom: 0 !important;
  border-top: 1px solid #eee;
}
.section-footer .section-footer__payment-icons {
  margin-bottom: 2em;
}
.copyright {
  display: none;
}

/* swap order of image and text for german design award badge */
.section-footer__row__col.section-footer__text-block:first-child {
  display: flex;
  flex-direction: column;
}

.section-footer__row__col.section-footer__text-block:first-child .section-footer__text-block__image {
  order: 2;
}

.section-footer__row__col.section-footer__text-block:first-child .section-footer__title {
  order: 1;
}



/* NAV */
.site-control.nav-inline-desktop .site-control__inner .nav-row a {
  font-weight: 400; /* desktop nav */
}
#page-menu a {
  font-weight: 500; /* mobile menu unchanged */
}
body:not(.customer-logged-in) .nav-right-side .nav-account, .nav-footer-links { /* hide link to shopify account */
  display: none !important;
}
body .site-control {
  transition: background .3s !important;
  z-index: 99 !important;
}
@media (hover: hover) {
  body:not(.use-alt-logo):not(.modal-active) .site-control:hover .site-control__inner a, body:not(.use-alt-logo):not(.modal-active) .site-control:hover .site-control__inner svg, body:not(.use-alt-logo):not(.modal-active) .site-control:hover .site-control__inner .cart {
    color: #000 !important;
    fill: #000 !important;
  }
  body:not(.use-alt-logo):not(.modal-active) .site-control:hover .site-control__inner .menu .icon-menu span.icon-menu__bar {
    background: #000 !important;
  }
  body:not(.use-alt-logo):not(.modal-active) .site-control:hover {
    background-color: #ffffffe3 !important;
  }
  body:not(.use-alt-logo):not(.modal-active) .site-control.nav-inline-desktop:hover.alt-logo-when-active .logo.logo--has-alt-logo>img {
    opacity: 1;
  }
  body:not(.use-alt-logo):not(.modal-active) .site-control.nav-inline-desktop:hover.alt-logo-when-active .logo.logo--has-alt-logo .alt-logo img {
    opacity: 0;
  }
}

#shopify-section-header .links.site-control__inner {
  margin: var(--side-spacing);
  margin-top: var(--top-spacing);
  margin-bottom: 0;
  padding: var(--side-spacing);
  position: relative;
  min-height: 0 !important;
  transition: margin .5s;
  max-width: var(--site-max-width);
  @media (min-width: 1100px) {
    margin-left: auto;
    margin-right: auto;
  }
}

body.scrolled-down #shopify-section-header .links.site-control__inner {
  margin-top: 0;
}

#site-control {
transition: top .5s !important;
}
body.scrolled-down #site-control {
  top: 0;
}

/* Added to cart */
#added-to-cart>.inner {
    background: #000;
    border-radius: var(--box-radius);
}
#added-to-cart .links a.button.alt {
    box-shadow: 0 0 0 1px #fff;
    color: #fff !important;
  background: transparent;
}
#added-to-cart .links a.button--checkout, #added-to-cart .links a.button--checkout:hover  {
    background: #fff !important;
    color: #000 !important;
}
#added-to-cart .links a.button:hover {
    transform: scale(1.05);
}
@media (max-width: 767px) {
.modal-active[data-modal-id=added-to-cart] .site-control {
    background-color: #000 !important;
}
  #added-to-cart>.inner {
    border-radius: 0;
  }
}

cart-form .under-cart, cart-form form {
  text-align: center;
}

@media (max-width: 767px) {
  .inline-mini-form.inline-mini-form--arrow {
    width: 100%;
  }
}
@media (min-width: 768px) {
    .inline-mini-form.inline-mini-form--arrow:not(.mt-0) {
        margin-top: 1em;
    }
}


/* override theme spacing to make logo left-aligned */
@media (min-width: 1100px) {
  .site-control.nav-inline-desktop .site-control__inner .logo {
      left: 0 !important;
  }
}

a.cart.nav-search {
  display: none !important;
}

body div {
  h1.thin, h2.thin, h3.thin, h4.thin, h1 em, h2 em {
    font-weight: 100 !important;
    font-style: normal;
  }
  p, div {
    line-height: 1.4 !important;
  }
  p {
    margin-top: 0;
  }
}

h1:not(.logo-h1), h2, h3, h4, .under-cart .subtotal, blockquote, h5, h6 {
  text-align: left;
  line-height: 1.1;
}

body b, body strong {
  font-weight: 500;
  margin-top: 0;
}

body div {
  h1, h2, h3, h4, .section-footer__title {
    font-weight: 400 !important;
    letter-spacing: 0;
  }
  h1.line-1, h2.line-1, .line-2 h1, .line-2 h2, .line-2 p {
      font-weight: 500 !important;
      letter-spacing: 0;
    }
} 

/* Responsive font sizing */
html, body, .feature-subheader, label, .overlay-type .line-2 {
  font-size: var(--text-size-base) !important;
}
button, input, textarea, #page-content a {
  font-size: var(--text-size-base);
}
.shopify-section .line-2 h1, .shopify-section .line-2 h2, .shopify-section .line-2 p {
  font-size: var(--headline-size-xs) !important;
}
.shopify-section h1, .shopify-section h2, h1 .typed-cursor, .product-area h2 {
  line-height: 1.1 !important;
  font-size: var(--headline-size-m) !important;
  font-weight: 500 !important;
}
.overlay__content h2 {
  font-size: var(--headline-size-l) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
h1.line-1, h1.large, h2.line-1 {
  font-size: var(--headline-size-xl) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
.shopify-section h1.large, .shopify-section h2.large, .large + .typed-cursor {
  font-size: var(--headline-size-xl) !important;
  line-height: 1 !important;
}
.section-footer .section-footer__title {
  font-size: var(--text-size-base);
}

.section-footer p {
    margin-bottom: 0.5em;
}

.rte h2 {
    margin-top: 0.7em;
    margin-bottom: 0.4em;
}
.cart-form h1 {
  margin-bottom: 1em;
}

.button-row.left-right a.button {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  margin-bottom: 3em;
  display: block;
}
.button-row.left-right a span {
  display: block;
  float: right;
  font-weight: 300;
}

.outlined, .text-column__title {
  padding: 0.2em 0.4em;
    border: 1px solid;
    border-radius: var(--box-radius);
    display: inline-block;
    position: relative;
    top: -0.5em;
    margin-left: 0.2em;
}

span.outlined {
    font-size: 0.4em;
    font-weight: 300;
}

.overlay__content {
  h1, h2, h3, h4 {
    color: #fff;
  }
}

.text-column__title {
  font-size: 1rem;
  font-weight: 300 !important;
  margin-left: 0 !important;
}

input, input[type=submit], .button, .shopify-payment-button__button, #CybotCookiebotDialogBodyButtonsWrapper button, .cc-btn, .pd-cp-btn {
    border: none;
    padding: 0.8em;
    line-height: 1em !important;
    min-height: 1em !important;
    border-radius: var(--box-radius) !important;
}

/* given only one fallback image is possible, we use a mobile one for the following pages and hide on desktop */
@media (min-width: 768px) {
  [id^="shopify-section-template--"][id$="__background_video_RQXfBx"] .video-container__fallback {
    display: none;  
  }
}

/* newsletter sign up forms */

input.signup-form__email, .cc-popup-form__input-wrapper input, .signup-form input {
  border: 1px solid !important;
  padding-left: 0.7em !important;
}

.wide-container .section-newsletter .contact-form {
  padding: 0 !important;
}
.overlay-type {
  height: auto !important;
  padding: calc(2 * var(--side-spacing)) !important;
}
div.inline-mini-form::after {
  display: none !important;
}
.inline-mini-form.inline-mini-form--arrow button {
  right: -26px;
}
.overlay-type .line-1 {
  margin-bottom: 0.3em;
}

.cc-popup-form__input-wrapper input {
  padding: 0.7em !important;
}

.button,
.shopify-payment-button__button, .cc-btn, .pd-cp-btn {
    font-weight: 500 !important;
    transition: transform .15s ease;
}

/* Glass shine on the primary (filled black) button — a subtle inset top
   highlight + soft drop shadow, matching the PLAYTS showcase cart button.
   Scoped to the filled primary: excludes the outline (--secondary), text, and
   disabled variants. The theme's :hover rule swaps in the outline box-shadow,
   so the shine only shows in the default (filled) state. */
.button:not(.button--secondary):not(.textbutton):not(.no-hover):not([disabled=disabled]) {
    box-shadow:
        0 2px 0 0 rgba(255, 255, 255, 0.3) inset,
        0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Quick add-to-cart icon button on product tiles (collection/featured grids).
   Same black glass style + icon as the PLAYTS showcase cart button. */
.product-block .image { position: relative; }
.sonntag-quick-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 37px;
    height: 37px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 2px 0 0 rgba(255, 255, 255, 0.3) inset,
        0 4px 14px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.sonntag-quick-add:hover { background: #000; color: #fff; }
.sonntag-quick-add:active { transform: scale(0.96); }
.sonntag-quick-add svg { display: block; fill: none; stroke: currentColor; }
.sonntag-quick-add.is-loading { opacity: 0.7; pointer-events: none; }

.button-row {
    margin-top: 1em;
}
.image-with-text .button-row {
    margin-top: 2em;
}

/* Primary (filled black) buttons on hover: keep the black fill + glass shine
   and just scale up — instead of the theme's white/outline swap.
   The theme's global `button:hover` white fill is both !important AND very
   specific (it opts out only on `.hover-grow`). We mirror its full exclusion
   chain and add `body` + `:not(.button--secondary)`, so this rule out-weighs it
   on specificity and wins. Secondary/outline buttons keep their own hover. */
body .button:not(.button--secondary):not(.hover-grow):not(.no-hover):not(input[type="submit"].textbutton):not(button.textbutton):not([disabled="disabled"]):not(.custom-dot):hover {
    background: #000 !important;
    color: #fff !important;
    box-shadow:
        0 2px 0 0 rgba(255, 255, 255, 0.3) inset,
        0 4px 14px rgba(0, 0, 0, 0.18) !important;
    transform: scale(1.03);
}

/* Secondary button: black outline style */
.button--secondary {
    background: transparent !important;
    color: #000 !important;
    box-shadow: 0 0 0 1.5px #000 inset !important;
}
.button--secondary:hover {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 0 0 1.5px #000 inset !important;
}


.feature-subheader {
  text-transform: uppercase !important;
  letter-spacing: inherit;
}

.feature-header::after {
  display: none !important;
}


/* media with text element */

.image-with-text__image__inner {
  border-radius: var(--container-radius);
  overflow: hidden;
  display: block;
}
.image-with-text__text {
    border-radius: var(--container-radius);
  }
.image-with-text__text__wrap {
  padding-top: 1.4em;
}
@media (min-width: 768px) {
  .image-with-text .image-with-text__text {
    overflow: hidden;
    /*margin-left: var(--side-spacing);*/
  }
}
@media (max-width: 767px) {
  .image-with-text .image-with-text__text {
    margin-top: 0;
  }
  .image-with-text__text {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  .image-with-text .image-with-text__image__inner, .image-with-text .rimage-wrapper {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}
.image-with-text__image.lazyload--placeholder {
  line-height: 0 !important;
}


/* About Preview Section.
   Suffix-Match statt hartcodierter Template-Instanz-ID: der template--<hash>
   rotiert bei jedem Theme-Duplikat (so ging der Look verloren) — der
   Section-Key (custom_liquid_…) bleibt dagegen stabil. */
[id$="__custom_liquid_PDRxBX"], [id$="__custom_liquid_A6UwdH"] {
h2 {
  padding: 0 !important;
}

.section-spacing {
  background: linear-gradient(150deg, var(--color-lavender) 0%, var(--color-lavender2) 100%);
  padding: var(--side-spacing);
  border-radius: var(--box-radius);
  border-radius: 1em;
  margin-bottom: 2em;
  position: relative;
}
.section-spacing::after {
  content: "";
  background-image: url("/cdn/shop/files/herzeln.svg?v=1727468674");
  width: 100px;
  height: 100px;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 1em;
  right: 1em;
} 

a.button {
  margin-top: 4em;
  margin-bottom: 0.2em;
}
}

/*************    |     PAGE: HOME      |   *************/

.height--full.video-container {
  height: var(--viewport-height);
  min-height: 400px !important;
  @media (min-width: 992px) {
    min-height: 800px !important;
  }
  /* include padding and announcement bar in max-height) */
  max-height: calc(var(--max-container-height) + var(--site-top-margin) + 2* var(--side-spacing) - 45px);
}

[id^="shopify-section-template--"][id$="__background_video_fnpPDh"] .height--full.video-container {
  padding-bottom: calc(var(--site-top-margin) + 2 * var(--side-spacing)) !important;
  margin-bottom: calc(-1 * var(--site-top-margin) - 2 * var(--side-spacing)) !important;
}

/* XO preview */

/* image hover */
[id^="shopify-section-template--"][id$="__slideshow_rBN6Rr"] {
  .button {
    opacity: 0;
    background-color: #000;
    color: #fff;
  }
  .button:hover {
    cursor: pointer;
    color: #000;
    background: transparent;
  }
  .line-3 {
    margin-top: 0;
  }
  @media (min-width: 768px) {
    .slide a:hover, .overlay-type:hover {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Cg%3E%3Cpath d='M41 21C41 17.0444 39.827 13.1776 37.6294 9.8886C35.4318 6.59962 32.3082 4.03617 28.6537 2.52242C24.9992 1.00867 20.9778 0.612599 17.0982 1.3843C13.2186 2.15601 9.65492 4.06082 6.85787 6.85787C4.06082 9.65492 2.15601 13.2186 1.3843 17.0982C0.612599 20.9778 1.00867 24.9992 2.52242 28.6537C4.03617 32.3082 6.59962 35.4318 9.8886 37.6294C13.1776 39.827 17.0444 41 21 41C23.6264 41 26.2272 40.4827 28.6537 39.4776C31.0802 38.4725 33.285 36.9993 35.1421 35.1421C36.9993 33.285 38.4725 31.0802 39.4776 28.6537C40.4827 26.2272 41 23.6264 41 21Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M23.334 14L30.334 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M23.334 28L30.334 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.667 21L30.3337 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E%0A") 21 21, auto;
    }
    .slide:hover .button {
      opacity: 1;
    }
    .slide:hover .rimage-outer-wrapper {
      opacity: 0.9;
    }
  }
}

/*************    |     PAGE: PRODUCT OVERVIEW     |   *************/

#page-content .shopify-section.section-featured-collection {

  width: calc(100% - var(--side-spacing)) !important;


.wide-container, .product-block, .product-block .image {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div.product-list {
  padding-left: calc(var(--side-spacing)/2) !important;
  padding-right: calc(var(--side-spacing)/2) !important;
  margin-bottom: calc(2 * var(--side-spacing));
}
  
.product-block {
  padding-left: calc(var(--side-spacing)/2) !important;
  padding-right: calc(var(--side-spacing)/2) !important;
  display: block !important;
  transform: none !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  padding-top: 1rem;
}

.product-block a.caption, ul.cc-swatches {
  padding-left: var(--side-spacing);
  padding-right: var(--side-spacing);
}

.product-block a.caption {
  display: block;
}

ul.cc-swatches li {
  margin-right: calc(var(--side-spacing)/2) !important;
  margin-bottom: calc(var(--side-spacing)/2) !important;
}

}

.product-block__inner .image {
  border-radius: var(--box-radius);
  overflow: hidden;
}


/*************    |     PAGE: PRODUCT      |   *************/

/* for related products */
.product-detail__gap-lg h2 {
  margin-top: 1em !important;
  margin-bottom: 0em !important;
}

/* show headline below slideshow */
[id^="section-id-template--"][id$="__slideshow_dpXVKi"] {
  height: 100svh !important;
  min-height: 400px !important;
  @media (min-width: 992px) {
   min-height: 800px !important;
  }
  margin-bottom: calc(-1 * (var(--side-spacing) + var(--site-top-margin) + 10em)) !important;
  padding-bottom: calc((var(--side-spacing) + var(--site-top-margin) + 10em)) !important;
  transition: height 0.5s;
}
[id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slideshow {
      height: 100% !important;
      transform: scale(1.0);
      max-height: var(--max-container-height);
}

[id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slick-list, [id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slick-track, [id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .rimage-outer-wrapper {
  height: 100% !important;
  min-height: 1px !important;
}

/* Custom styles for mobile slider */
@media(max-width:767px){
  .product-area__media .product-slider{
    width: calc(100% + 1.4em) !important;
    margin-left: -0.7em;
  }
  
  .product-area__media .product-slider .theme-img {
      padding-left: var(--side-spacing);
    padding-right: var(--side-spacing)
  }
  
  .product-area .product-area__media .product-slider .rimage-wrapper, .product-area .product-area__media .product-slider .plyr--video  {
    padding-top: 0 !important;
    height: 100% !important;
  }
  
  .product-area .product-area__media .product-slider .plyr .plyr__poster {
    background-size: cover;
  }
  
  .product-slider .product-media img, .product-slider .product-media video { 
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
  }
}

.product-media img, .product-media video, .product-media .plyr__poster {
  border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0); 
}

[data-layout="one-column"] .theme-img {
    margin-bottom: var(--side-spacing);
}

@media (min-width: 768px) {
.product-area .product-area__details .product-area__details__header {
  padding-top: 0;
}
}

.product-area .option-selectors li {
  display: block;
  float: left;
  width: fit-content;
}

.product-area .selector-wrapper {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.clickyboxes:not(.options-motif) li button::after {
  content: " ";
  position: absolute;
  top: 0;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 8px);
  transition: opacity 0.4s;
  background-color: {{ col_page_bg }};
  opacity: 0;
}

.product-area .option-selectors {
  display: flex;
  flex-direction: row; /* can be switched to row if selection areas should be next to each other */
  flex-wrap: wrap;
  column-gap: 2rem;
  max-width: 100%;
  margin-top: 1rem;
  .selector-wrapper {
    overflow: hidden;
    flex: 0 1 auto;
  }
  
  .has-clickyboxes label {
    font-weight: 500 !important;
    margin-bottom: 0.5em !important;
    clear: both;
  }
}

.product-area .option-selectors::before { /* hiding theme elements that add gap */
  display: none;
}

.product-area h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-motion-print .product-area .option-selectors::after, .page-motion-print .product-area .option-selectors::before {
  display: none;
}
.page-motion-print {
  [class^="style_header"] {
    display: none;
  }
}

#rbr-container-element-addOn {
  margin-top: -1rem;
}

.product-area .clickyboxes li {
    padding: 0 0.5em .1em 0;
  list-style: none;

  }

.product-area .option-selectors .cc-swatches .clickyboxes li button {
  border-radius: var(--box-radius);
  border: none;
  box-shadow: none !important;
  background: transparent;
  margin-left: 2px;
  margin-top: 2px;
}

.product-area .option-selectors .cc-swatches .clickyboxes li button.active, .product-area .product-area .option-selectors .cc-swatches .clickyboxes li button:hover {
  box-shadow: 0 0 0 2px #000 !important;
}

.product-area .option-selectors .cc-swatches .clickyboxes li button::before {
  border-radius: var(--box-radius);
}

/* don't cross out unavailable colors */
.product-area .option-selectors .cc-swatches .clickyboxes li button::after {
  display: none !important;
} 

.selector-wrapper label {
  /* display: none !important; */
  span.cc-swatches__label {
    font-weight: 300 !important;
  }
}

#clickyboxes-option-shape-9981584441691 .cc-hover-line, #clickyboxes-option-motif-10148422648155 .cc-hover-line {
  display: none;  
}

label[for="option-shape-9981584441691"], label[for="option-color-10148422648155"], label[for="option-motif-10148422648155"] {
  display: block !important;
  
}
label[for="option-shape-9981584441691"]::after, label[for="option-motif-10148422648155"]::after {
  content: ":";
  position: relative;
  left: -.15em;
}

ul.clickyboxes.options-shape button, ul.clickyboxes.options-motif button{
  background: none;
    color: black;
    display: inline-block;
    padding: 0;
    border: none;
    font-weight: 500;
    padding: 0.2em 0.5em;
    border-radius: var(--box-radius);
    border: 2px solid #fff;
}
ul.clickyboxes.options-shape button.active,  ul.clickyboxes.options-motif button.active {
    border: 2px solid #000;
}

ul.clickyboxes.options-motif li button {
  display: inline-block;
  width: 43px;
  height: 43px;
  background-size: cover;
  color: transparent;
} 
ul.clickyboxes.options-motif li button:hover {
  color: transparent !important;
}
ul.clickyboxes.options-motif li button.active::before {
    content: attr(data-value);
    display: block; /* or inline-block */
    color: #000;
    position: absolute;
    font-weight: 300;
    top: -1.71rem;
    left: 3em;
}

ul.clickyboxes.options-motif li button.opt--diamond {
  background-image: url("/cdn/shop/files/icon-diamond.svg?v=1761049776");
}
ul.clickyboxes.options-motif li button.opt--grid {
  background-image: url("/cdn/shop/files/icon-grid.svg?v=1761049776");
}

ul.clickyboxes.options-motif button {
    display: none;
}

/*** Page PLAYTS ***/
/* floating images */
[id^="section-id-template--"][id$="__rich_text_8Y3cmC"] {
  p:nth-child(1)::before,
  p:nth-child(2)::before {
    content: "";
    display: inline-block;
    width: 18rem;
    height: 18rem;
    background-size: cover;
    vertical-align: middle;
    position: relative;
  }
  p:nth-child(1)::before {
    background-image: url("/cdn/shop/files/fl-brot.png?v=1762340150");
    float: right;
    right: -4rem;
  }
  p:nth-child(2)::before {
    background-image: url("/cdn/shop/files/fl-pflaume.png?v=1762340163");
    left: -4rem;
    top: -3rem;
  }
}

/*** Bundle Selection Styling ***/

/* hide non-available options (for square playt) */
#rbr-container-element-true span[aria-disabled="true"] {
  display: none;
}

/* add-on (motion print page) */
.rbr-page-container {
  padding: 0 !important;
  span {
    font-size: var(--text-size-base) !important;
  }
}

.rbr-page-container, .product-area {
   .rbr-thumbnail-container {
    border: none !important;
  }
  .rbr-sbap_item, [class^="style_items"] > div {
    padding: var(--side-spacing);
    border: 1px solid #ddd;
    border-radius: var(--box-radius);
    margin-top: 1rem;
  }
  .rbr-sbap_item {
    margin-top: 1em;
  }
  .rbr-sbap_variants > div > div > div, .selectBoxCustom_variants_d9387324.selectBoxCustom_box_d9387324 {
    padding: 0;
    border: none;
  }
  .rbr-divider__container:not(.rbr-page-container div) {
    display: none;
  }
  .rbr-divider__container {
    background-color: #000 !important;
  }
  .rbr-productNamePrice__title__container a {
    font-weight: 500;
  }
  .colorSwatch_title_c65258f9 { /* don't show labels like "farbe" or "shape" */
      display: none;
  }
  /* hide shape selector because shape is pre-selected for our bundles */
  .colorSwatch_variant_c65258f9:nth-child(2) [aria-disabled="true"] {
    display: none;  
  }
  .rbr-poweredBy__container {
    display: none;
  }
  .rbr-color {
    border-radius: var(--box-radius) !important;
    display: block;
    border: 2px solid #fff !important;
    span {
      width: 100% !important;
      height: 100% !important;
      border-radius: var(--box-radius) !important;
      display: block;
    }
  }
  .rbr-color[aria-selected="true"] {
      border-color: #000 !important;
    }
  .rbr-shape {
    background: none !important;
    border: 2px solid #ddd;
    color: #000 !important;
    border-radius: var(--box-radius) !important;
  }
  [class^="style_price"] {
    width: 100%;
    text-align: right;
    color: #000;
    font-weight: 600;
  }
}

.option-selectors li:has(.opt--sand-lavender) {
  clear: both;
}

.price-area, .product-policies, .xo-discount {
  text-align: right;
  span {
    font-size: 1em !important;
  }
  padding: 0 !important;
}
.product-policies {
  padding-bottom: 0.7em !important;
}

.price-area {
  padding-top: 1rem !important;
}

.price-area, .xo-discount {
  font-weight: 600 !important;
}

.xo-discount {
  color: #008424;
}

.product-policies p {
  font-style: normal;
}

.product-area .product-detail__gap-lg {
    padding-top: 0;
    padding-bottom: 0;
}

.product-area .price-area .was-price {
    opacity: 1;
    color: #aaa;
  margin-right: .2em;
}

.product-detail__form__action.product-detail__form__options--with-quantity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    margin-bottom: 0.7em;
    align-items: stretch;
}

/* Quantity + ATC button on one row, payment buttons below */
.product-detail__form__action.product-detail__form__options--with-quantity .quantity-wrapper {
    flex: 0 0 auto;
}
.product-detail__form__action.product-detail__form__options--with-quantity > button[type="submit"] {
    flex: 1 1 0;
    min-width: 0;
}
/* Payment button wrapper: full width on its own row */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0;
}
/* Fast checkout buttons: height via theme variable */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
    --gravity-button-padding: 19px;
}

/* Additional payment methods link: centered */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button .shopify-payment-button__more-options {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.4em 0;
}
/* Mobile: ensure quantity+ATC stay on one row */
@media (max-width: 767px) {
  .product-detail__form__action.product-detail__form__options--with-quantity {
    display: flex !important;
    flex-wrap: wrap !important;
    float: none !important;
    width: 100% !important;
  }
  .product-detail__form__action.product-detail__form__options--with-quantity .quantity-wrapper {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
  .product-detail__form__action.product-detail__form__options--with-quantity > button[type="submit"] {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.product-detail__form__options .option-selectors .selector-wrapper:last-child {
  margin-bottom: 1em;
}

.quantity-wrapper input {
    padding: 0;
    line-height: 2.5em !important;
}

.quantity-wrapper {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.quantity-wrapper button {
    padding: 0;
   flex: 1;
}

.product-area .error-message {
    border: 1px solid #d32d2d;
    border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0); 
    padding: var(--side-spacing);
}

.product-area .cc-accordion-item, .product-area .cc-accordion {
    border: none;
}
.product-area .product-detail-accordion {
    margin-top: 0.7em;
    margin-bottom: 0.7em;
}

/* top spacing with sticky product info */
@media(min-width:768px){
  [id^="shopify-section-template--"][id$="__main"] .product-area__details .product-area__details__inner .product-area__details__header {
      padding-top: 0 !important;
  }
  [id^="shopify-section-template--"][id$="__main"] .product-area__details__inner {
    top: var(--nav-height);
    margin-top: calc(var(--nav-height) - 0.7em) !important;
  }
}

 [id^="shopify-section-template--"][id$="__main"] .theme-images {
   padding-top: 0 !important;
 }

@media (min-width: 768px) {
    .product-area .product-area__media .theme-gallery[data-column-count="2"] .theme-images .media-column .theme-img {
        margin-bottom: 20px;
    }
}

/* media columns */

.text-column__image {
  border-radius: var(--container-radius);
  overflow: hidden;
}

/* horizontal scroll section (e.g. instagram) */
[id^="shopify-section-template--"][id$="__text_columns_with_images_hzDPVh"], /* Product Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_HCXD98"], /* Studio Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_miYqLr"], /* Studio Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_dByXy9"],
[id^="shopify-section-template--"][id$="__text_columns_with_images_WafAqV"] { /* Motion Print Page */
  overflow: visible;
  max-width: calc(100% - 2* var(--side-spacing)) !important;
  .flexible-layout {
      flex-direction: row;
      flex-wrap: initial;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start;
      width: calc(100% + 4* var(--side-spacing)) !important;
      padding-right: calc(2* var(--side-spacing)) !important;
      margin-left: calc(-2* var(--side-spacing)) !important;
      @media (min-width: 1200px) {
        padding-left: calc((100% - var(--site-max-width)) / 2 + var(--side-spacing));
      }
  }
  .column {
    flex: 0 0 auto;
    margin-bottom: 0.7em;
    padding-left: var(--side-spacing);
    padding-right: 0 !important;
    width: min(33%, calc(var(--site-max-width)/3));
  }
  /*
  .column:first-of-type {
    margin-left: 1.4em !important;
  }
  */
  .text-column__title {
    margin-left: 0.7em !important;
  }
}
.section-text-columns-with-images .text-column .text-column__image {
  margin-bottom: 1.2em;
}

/* with border-radius and spacing on non-instagram */
[id^="shopify-section-template--"][id$="__text_columns_with_images_HCXD98"], [id^="shopify-section-template--"][id$="__text_columns_with_images_miYqLr"], [id^="shopify-section-template--"][id$="__text_columns_with_images_dByXy9"] {
  .text-column__title {
    border: 0;
    padding: 0;
  }
  .rimage-outer-wrapper, .section-background-video {
    border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0); 
    overflow: hidden;
  }
  
  @media (max-width: 1200px) {
    .flexible-layout--variable-columns .column {
        width: 33.333%;
        padding-right: var(--side-spacing);
    }
  }
}

/*************    |     PAGE: STUDIO      |   *************/
[id^="section-id-template--"][id$="__rich_text_GrWb4c"] {
    .section-rich-text__image {
        position: absolute !important;
        top: 0 !important;
        width: 550px;
        right: max(calc((100vw - 550px)/2), -10vw);
    }
    h2 {
        margin-bottom: 130px !important;
    }
}

/** Cookie Banner **/

pandectes-cmp .actions, pandectes-cmp .header, pandectes-cmp .body {
  padding: calc(2 * var(--side-spacing)) !important;
  font-size: var(--text-size-base) !important;
}
pandectes-cmp .header {
  padding-bottom: 1rem;
}
pandectes-cmp button {
  font-size: var(--text-size-base) !important;
}
pandectes-cmp .footer {
  display: none !important;
}

/** Cookie Banner Archive **/

#pd-cp-preferences .pd-cp-bold-messaging, #pd-cp-preferences .pd-cp-ui-title, #pd-cp-preferences .pd-cp-ui-close, #pd-cp-preferences .pd-cp-purpose-actions {
font-weight: 500;
}

#pd-cp-preferences button:hover {
  background: #fff;
  color: #000 !important;
}
#pd-cp-preferences .pd-cp-ui-close:hover, #pd-cp-preferences .pd-cp-toggle:hover {
  background: initial;  
  color: #fff !important;
}

#pd-cp-preferences .pd-cp-ui-rejectAll, #pd-cp-preferences .pd-cp-ui-acceptAll {
  color: #fff !important;
  background-color: transparent;
  border: 1px solid #fff;
}

#pd-cp-preferences .pd-cp-ui-rejectAll {
  margin-right: 0.5em;
}

#pd-cp-preferences .pd-cp-ui-horizontal-buttons {
    gap: 0.5em;
}

#pd-cp-preferences .pd-cp-ui-horizontal-buttons .pd-cp-btn {
    max-width: 100%;
}
@media (max-width: 699px) {
    .pd-cp-ui-horizontal-buttons .pd-cp-btn {
        display: inline-block;
        padding: 0.8em !important;
    }
  .pd-cp-ui-horizontal-buttons .pd-cp-btn:first-child {
        margin-right: 0 !important;
    }
}

/* accounts/subscribe */

div.shopify-email-marketing-confirmation__container h1 {
    display: none;
}

div.shopify-email-marketing-confirmation__container > p:first-of-type {
    font-size: 200% !important;
    font-weight: 500;
}

/* page: newsletter sign up ipad */
.page-20-rabatt-fur-deine-anmeldung, .page-gewinnspiel-anmeldung  {
  [data-section-type=newsletter-popup] {
    display: none !important;
  }
  #shopify-section-footer, #site-control {
    display: none !important;
  }
  .content h1, .content p{
    text-align: center !important;
  }
  .overlay-type, #page-content .content {
    padding-top: 0 !important;
  }
  #page-content .content, .overlay-type {
    padding-bottom: 1em !important;
  }
  .button-row {
    margin-top: 0 !important;
  }
}
[id^="section-id-template--"][id$="__rich_text_knmPBT"] {
  display: none;
}
.page-10-rabatt-fur-deine-anmeldung:has(.signup-form__response) [id^="section-id-template--"][id$="__rich_text_knmPBT"] {
  display:block;
}
/* ─── Horizontal Scroll Gallery Edge-to-Edge Fix ───
   These galleries use horizontal scroll and need their content to bleed
   past the container edges to reach the screen edges.
   The sections use .wide-container for normal centering/max-width.
   We only override overflow so the scroll strip can extend beyond the
   container boundary. The theme's .cc-animate-enabled sets overflow:hidden
   which would clip the scrolling content — this overrides that. */
.shopify-section:has(.use-case-gallery),
.section-community-gallery,
[id^="shopify-section-template--"][id$="__community_gallery"] {
  overflow: visible !important;
}


/* ─── Community Gallery: Mobile Edge-Scroll ─── */
@media (max-width: 767px) {
  .section-community-gallery {
    overflow: visible !important;
  }
  .community-gallery {
    overflow: visible !important;
  }
  .community-gallery__mobile {
    width: 100vw !important;
    margin-left: calc(-1 * var(--side-spacing)) !important;
    padding-left: var(--side-spacing) !important;
    padding-right: var(--side-spacing) !important;
    scroll-padding-left: var(--side-spacing) !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  .community-gallery__mobile::-webkit-scrollbar { display: none; }
}

/* ─── Community Gallery: Desktop Sticky ─── */
@media (min-width: 768px) {
  /* Fix: body overflow:hidden breaks position:sticky.
     Use overflow-x:clip instead — prevents horizontal scroll
     without creating a new scroll container that breaks sticky.
     Selectors match the body classes Shopify adds for this page. */
  body.page-community {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Neutralize cc-animate transforms on layout and children */
  .community-layout,
  .community-layout .shopify-section,
  .community-layout [data-cc-animate] {
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Newsletter form button: rounded right corners to match the row border-radius */
  .nl-inline__btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

}

/*************    |     BLOG / ARTICLE     |   *************/

/* Full-width content area for article pages */
#page-content .central {
  width: 100%;
  max-width: 100%;
}

/* Inline images in article body – respect editor size, only add styling */
.rte img,
.rte--allow-full-width-images img {
  border-radius: var(--box-radius);
  display: block;
  height: auto;
  max-aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Featured image (wide mode) – height controlled via --article-hero-height CSS variable (px) */
.article-header.image-overlay {
  height: var(--article-hero-height, 600px);
}

/* Hero overlay: headline bottom-aligned on all screen sizes */
.article-hero-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
.article-hero-overlay .overlay__content {
  width: 100%;
}

/* ─────────────────────────────────────────────
   SONNTAG BLOG ARTICLE LAYOUT
   ───────────────────────────────────────────── */

/* ── Hero ── */
.sonntag-article__hero {
  position: relative;
  width: 100%;
  height: var(--hero-height-desktop, 600px);
  overflow: hidden;
  border-radius: var(--container-radius);
}

.sonntag-article__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.sonntag-article__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sonntag-article__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%);
}

.sonntag-article__hero-content {
  /* Align to text column: max-width 680px centred, same as .sonntag-block__text-inner */
  width: 100%;
  max-width: calc(680px + 4rem); /* 680px text + 2rem padding each side */
  margin: 0 auto;
  padding: 2rem;
  color: #fff;
}

.sonntag-article__date {
  font-size: 0.85em;
  opacity: 0.8;
  margin-bottom: 0.4rem;
}

.sonntag-article__hero .sonntag-article__title {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff !important;
  margin: 0;
}
.sonntag-article__date {
  color: #fff;
}

/* ── Body ── */
.sonntag-article__body {
  padding-top: 1rem;
}

/* ── Text block ── */
.sonntag-block--text {
  display: flex;
  justify-content: center;
  padding: var(--side-spacing);
}

.sonntag-block__text-inner {
  width: 100%;
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.65;
}

/* No top margin on first element inside RTE
   Override: .template-article .rte { margin-top: 2em } from styles.css */
.template-article .sonntag-block__text-inner.rte,
.sonntag-block__text-inner.rte {
  margin-top: 0 !important;
}
.sonntag-block__text-inner.rte > *:first-child {
  margin-top: 0;
}

.sonntag-block__text-inner h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* ── Images block ── */
.sonntag-block--images {
  display: grid;
  gap: 4rem;
  margin: 3rem 0 2rem;
  padding: 0 4rem;
  align-items: start;
}

/* 1 image: centered, max 70% width on desktop */
.sonntag-block--images-1 {
  grid-template-columns: 1fr;
  justify-items: center;
}
.sonntag-block--images-1 .sonntag-block__image {
  width: 100%;
  max-width: 680px;
}

/* 2 images: 3 alternating layouts via Liquid cycle classes
   A → big left  (5:4), right drops down
   B → big right (4:5), left drops down
   C → big left  (5:4), right nearly top-aligned (small offset)
*/
.sonntag-block--images-2 {
  grid-template-columns: 5fr 4fr;
  align-items: end;
}

/* Variant A: big left, right drops down */
.sonntag-block--images-2.images-2--a {
  grid-template-columns: 5fr 4fr;
  align-items: end;
}
.sonntag-block--images-2.images-2--a .sonntag-block__image--1 {
  margin-top: 0;
}
.sonntag-block--images-2.images-2--a .sonntag-block__image--2 {
  margin-top: 3rem;
}

/* Variant B: big right, left drops down */
.sonntag-block--images-2.images-2--b {
  grid-template-columns: 4fr 5fr;
  align-items: start;
}
.sonntag-block--images-2.images-2--b .sonntag-block__image--1 {
  margin-top: 3rem;
}
.sonntag-block--images-2.images-2--b .sonntag-block__image--2 {
  margin-top: 0;
}

/* Variant C: big left, right top-aligned */
.sonntag-block--images-2.images-2--c {
  grid-template-columns: 5fr 4fr;
  align-items: start;
}
.sonntag-block--images-2.images-2--c .sonntag-block__image--1 {
  margin-top: 0;
}
.sonntag-block--images-2.images-2--c .sonntag-block__image--2 {
  margin-top: 0;
}

/* 3 images: 2-column desktop layout — img 1+2 side by side (img 2 offset down), img 3 below centred */
.sonntag-block--images-3 {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.sonntag-block--images-3 .sonntag-block__image--1 {
  margin-top: 0;
}
.sonntag-block--images-3 .sonntag-block__image--2 {
  margin-top: 4rem;
}
.sonntag-block--images-3 .sonntag-block__image--3 {
  grid-column: 1 / -1;
  max-width: 55%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

/* Images — container clips to max 4:5 portrait ratio */
.sonntag-block__image {
  overflow: hidden;
  border-radius: var(--box-radius);
  /* Natural aspect ratio — no cropping */
}
.sonntag-block__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Mobile: stack all images with whitespace + alternating offset ── */
@media (max-width: 767px) {
  .sonntag-block--images-2,
  .sonntag-block--images-2.images-2--a,
  .sonntag-block--images-2.images-2--b,
  .sonntag-block--images-2.images-2--c,
  .sonntag-block--images-3 {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }
  /* All images: not full-width, with some breathing room */
  .sonntag-block--images-2 .sonntag-block__image,
  .sonntag-block--images-3 .sonntag-block__image {
    max-width: 82%;
    margin-top: 0 !important;
  }
  /* Odd images: pushed right */
  .sonntag-block--images-2 .sonntag-block__image--1,
  .sonntag-block--images-3 .sonntag-block__image--1,
  .sonntag-block--images-3 .sonntag-block__image--3 {
    margin-left: auto;
    margin-right: 0;
  }
  /* Even images: pushed left */
  .sonntag-block--images-2 .sonntag-block__image--2,
  .sonntag-block--images-3 .sonntag-block__image--2 {
    margin-left: 0;
    margin-right: auto;
  }
  /* Reset 3rd image desktop centering */
  .sonntag-block--images-3 .sonntag-block__image--3 {
    grid-column: auto;
    max-width: 82%;
  }
  .sonntag-article__hero {
    height: var(--hero-height-mobile, 400px);
  }
  .sonntag-article__hero-content {
    padding: 1.2rem;
    max-width: 100%;
  }
}

/* ==========================================================================
   INSPIRATION BLOG TEMPLATE
   ========================================================================== */

.sonntag-blog-inspiration {
  padding: 0 var(--side-spacing);
  max-width: 1400px;
  margin: 0 auto;
}

.sonntag-latest-articles-section {
  padding-left: var(--side-spacing);
  padding-right: var(--side-spacing);
}
.sonntag-inspo-grid-section {
  padding-left: 0;
  padding-right: 0;
}

/* ── 1. Intro ── */
.sonntag-blog-intro {
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
  text-align: center;
}
.sonntag-blog-intro__inner {
  max-width: 680px;
}
.sonntag-blog-intro__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

/* ── 2. Product Inspo Grid (Varied Layout) ── */
.sonntag-inspo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  row-gap: 4rem;
  margin-bottom: 6rem;
  align-items: start;
}
.sonntag-inspo-item {
  display: flex;
  flex-direction: column;
}
.sonntag-inspo-item__image-wrapper {
  border-radius: var(--box-radius);
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
  /* Intrinsic aspect ratio: set via inline style from Liquid */
}

/* ==========================================================================
   LAYOUT OPTIONS (up to 8 images each)
   ========================================================================== */

/* ── Option 1: Portrait Focus 1 (Asymmetric) ── */
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 6; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-2 { grid-column: 7 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-3 { grid-column: 2 / 8; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-4 { grid-column: 9 / 13; margin-top: 0; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-5 { grid-column: 1 / 5; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-6 { grid-column: 6 / 12; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-7 { grid-column: 3 / 9; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-8 { grid-column: 10 / 13; margin-top: 5rem; }

/* ── Option 2: Portrait Focus 2 (Staggered) ── */
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-1 { grid-column: 2 / 7; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-2 { grid-column: 8 / 12; margin-top: 6rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 6; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-4 { grid-column: 7 / 13; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-5 { grid-column: 3 / 8; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-6 { grid-column: 9 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 11; margin-top: 5rem; }

/* ── Option 3: Portrait Focus 3 (Alternating) ── */
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 7; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-2 { grid-column: 8 / 13; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-3 { grid-column: 7 / 13; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-4 { grid-column: 1 / 6; margin-top: 0; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-5 { grid-column: 2 / 8; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-6 { grid-column: 9 / 13; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 12; margin-top: 3rem; }

/* ── Option 4: Mixed 1 (Wide & Narrow) ── */
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 10; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-2 { grid-column: 10 / 13; margin-top: 8rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 5; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-4 { grid-column: 6 / 13; margin-top: 0; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-5 { grid-column: 3 / 11; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-6 { grid-column: 1 / 6; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-7 { grid-column: 7 / 13; margin-top: 1rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-8 { grid-column: 4 / 10; margin-top: 4rem; }

/* ── Option 5: Mixed 2 (Editorial) ── */
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-1 { grid-column: 3 / 11; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-2 { grid-column: 1 / 6; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-3 { grid-column: 7 / 13; margin-top: 6rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-4 { grid-column: 2 / 10; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-5 { grid-column: 10 / 13; margin-top: 0; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-6 { grid-column: 1 / 7; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-7 { grid-column: 8 / 12; margin-top: 1rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-8 { grid-column: 3 / 11; margin-top: 3rem; }

/* ── Option 6: Mixed 3 (Dynamic) ── */
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 6; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-2 { grid-column: 7 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 11; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-4 { grid-column: 8 / 13; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-5 { grid-column: 1 / 7; margin-top: 0; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-6 { grid-column: 4 / 10; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 13; margin-top: 5rem; }
.sonntag-inspo-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sonntag-inspo-item__link {
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
  padding-left: var(--side-spacing);
}

/* ── 3. Recent Articles ── */
.sonntag-recent-articles {
  margin-top: 0;
}
.sonntag-recent-articles__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2rem;
  text-align: center;
}
.sonntag-recent-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 1.25rem;
  justify-content: center;
}
.sonntag-recent-article__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sonntag-recent-article__image-wrapper {
  border-radius: var(--box-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.75rem;
  position: relative;
}
.sonntag-recent-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}
.sonntag-inspo-item__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--box-radius);
  transition: transform 0.3s ease;
}
.sonntag-recent-article__link:hover .sonntag-recent-article__image {
  transform: scale(1.03);
}
.sonntag-recent-article__heading {
  font-size: 1em !important;
  font-weight: 500 !important;
  line-height: 1.4;
  text-align: center;
}

/* ── Mobile Adjustments ── */
@media (max-width: 767px) {
  .sonntag-blog-inspiration {
    padding-top: 2rem;
  }
  
  /* Inspo Grid: single column on mobile */
  .sonntag-inspo-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .sonntag-inspo-item {
    margin-top: 0 !important;
  }

  /* Mobile: varied widths and offsets for editorial feel */
  /* All items are at least 60% wide */
  .sonntag-inspo-item:nth-child(8n+1) {
    width: 85%;
    align-self: flex-start;
    margin-left: 0;
  }
  .sonntag-inspo-item:nth-child(8n+2) {
    width: 70%;
    align-self: flex-end;
    margin-right: 0;
  }
  .sonntag-inspo-item:nth-child(8n+3) {
    width: 95%;
    align-self: center;
  }
  .sonntag-inspo-item:nth-child(8n+4) {
    width: 65%;
    align-self: flex-start;
    margin-left: 5%;
  }
  .sonntag-inspo-item:nth-child(8n+5) {
    width: 80%;
    align-self: flex-end;
    margin-right: 2%;
  }
  .sonntag-inspo-item:nth-child(8n+6) {
    width: 60%;
    align-self: flex-start;
    margin-left: 10%;
  }
  .sonntag-inspo-item:nth-child(8n+7) {
    width: 90%;
    align-self: flex-end;
  }
  .sonntag-inspo-item:nth-child(8n+8) {
    width: 75%;
    align-self: center;
  }
  
  /* Recent Articles: 2 columns on mobile */
  .sonntag-recent-articles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Recent Articles: horizontal scroll on mobile */
  .sonntag-recent-articles__grid--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-right: calc(var(--side-spacing) * -1);
    padding-right: var(--side-spacing);
  }
  .sonntag-recent-articles__grid--scroll::-webkit-scrollbar {
    display: none;
  }
  .sonntag-recent-articles__grid--scroll .sonntag-recent-article {
    flex: 0 0 45%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   INSPIRATION CTA SECTION

   Horizontal scroll gallery — single row on mobile and desktop.
   Uses the same wide-container > flexible-layout HTML structure as the
   About-page horizontal-scroll sections.

   The .wide-container class handles centering/max-width.
   The .flexible-layout strip breaks out of the container using the same
   trick as line 1287:
     width: calc(100% + 4*side-spacing)
     margin-left: calc(-2*side-spacing)
   => strip reaches both window edges.

   Images capped at 4:5 aspect ratio. No scroll-snap.
   ========================================================================== */

/* ======================================================
   REUSABLE: Edge-to-edge horizontal scroll
   ──────────────────────────────────────────────────────
   Pattern from line 1287 (.flexible-layout breakout trick).

   Utility classes (for future sections):
     .section-edge-scroll  → on .shopify-section
     .edge-scroll-strip    → on the inner scrollable <div>

   For the Inspiration CTA section the same rules also
   target the existing selectors directly so they work
   regardless of Liquid cache state.

   HTML skeleton:
     .shopify-section.section-edge-scroll          ← or .section-inspiration-cta
       .wide-container
         .edge-scroll-strip                        ← or .sonntag-inspo-cta__strip
           .item  .item  .item …
   ====================================================== */

/* ── Section wrapper ──
   overflow:visible lets the strip bleed past the container.
   max-width widens the .shopify-section so the strip math works. */
.section-edge-scroll,
.section-inspiration-cta {
  overflow: visible !important;
  max-width: calc(100% - 2 * var(--side-spacing)) !important;
}

/* Override .wide-container's default 70 px padding
   to match the side-spacing used in the breakout math. */
.section-edge-scroll .wide-container,
.section-inspiration-cta .wide-container {
  padding-left: var(--side-spacing) !important;
  padding-right: var(--side-spacing) !important;
}

/* ── Scrollable strip ── */
.edge-scroll-strip,
.sonntag-inspo-cta__strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;

  /* Break out: 2 × side-spacing on each side */
  width: calc(100% + 4 * var(--side-spacing)) !important;
  margin-left: calc(-2 * var(--side-spacing)) !important;
  padding-right: calc(2 * var(--side-spacing)) !important;

  /* Mobile default: first item aligns with content margin */
  padding-left: var(--side-spacing);
  scroll-padding-left: var(--side-spacing);

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.edge-scroll-strip::-webkit-scrollbar,
.sonntag-inspo-cta__strip::-webkit-scrollbar {
  display: none;
}

/* Desktop ≥ 1200 px: align with centred site-max-width */
@media (min-width: 1200px) {
  .edge-scroll-strip,
  .sonntag-inspo-cta__strip {
    padding-left: calc((100vw - var(--site-max-width)) / 2);
    scroll-padding-left: calc((100vw - var(--site-max-width)) / 2);
  }
}

/* ── PLAYTS use-case-gallery: mobile-only edge-to-edge scroll ──
   On desktop (>=768px) the track switches to a CSS grid layout,
   so the edge-scroll breakout only applies on mobile. */
@media (max-width: 767px) {
  [id^="shopify-section-template--"][id$="__use_case_gallery_V7izHG"] {
    overflow: visible !important;
    max-width: calc(100% - 2 * var(--side-spacing)) !important;
  }
  [id^="shopify-section-template--"][id$="__use_case_gallery_V7izHG"] .wide-container {
    padding-left: var(--side-spacing) !important;
    padding-right: var(--side-spacing) !important;
  }
  [id^="shopify-section-template--"][id$="__use_case_gallery_V7izHG"] .use-case-gallery__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    width: calc(100% + 4 * var(--side-spacing)) !important;
    margin-left: calc(-2 * var(--side-spacing)) !important;
    padding-left: var(--side-spacing);
    padding-right: calc(2 * var(--side-spacing)) !important;
    scroll-padding-left: var(--side-spacing);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [id^="shopify-section-template--"][id$="__use_case_gallery_V7izHG"] .use-case-gallery__track::-webkit-scrollbar {
    display: none;
  }
}



/* ======================================================
   Inspo CTA — section-specific additions
   ====================================================== */

/* Vertical stagger + gap */
.sonntag-inspo-cta__strip {
  align-items: flex-start;
  gap: var(--side-spacing, 20px);
  padding-bottom: 20px;
  padding-top: 0;
  box-sizing: content-box;
}

/* Image items */
.sonntag-inspo-cta__m-col {
  flex: 0 0 auto;
}
.sonntag-inspo-cta__m-img {
  overflow: hidden;
  border-radius: var(--box-radius, 8px);
  container-type: inline-size;
}

/* ─── Inspiration CTA: clickable image links ─── */
.sonntag-inspo-cta__m-img--link {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.sonntag-inspo-cta__m-img--link img {
  transition: transform 0.35s ease;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sonntag-inspo-cta__m-img--link:hover img,
.sonntag-inspo-cta__m-img--link:focus-visible img {
  transform: scale(1.04);
}

.sonntag-inspo-cta__m-img img,
.sonntag-inspo-cta__m-img .placeholder-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100cqi * 5 / 4);
  object-fit: cover;
}
@supports not (max-height: 1cqi) {
  .sonntag-inspo-cta__m-img {
    aspect-ratio: 4 / 5;
  }
  .sonntag-inspo-cta__m-img img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* Arrow button */
.sonntag-inspo-cta__m-arrow-wrap {
  flex: 0 0 auto;
  align-self: center;
  padding-right: calc(2 * var(--side-spacing));
  padding-left: 16px;
}
.sonntag-inspo-cta__arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #000;
  color: #000;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}
.sonntag-inspo-cta__arrow-btn:hover {
  background-color: #000;
  color: #fff;
}


/* ======================================================
   Featured Collection: 4-column grid from 1100px
   Override the base theme's 992px breakpoint so that
   .column.quarter (grid=4) shows 3 columns below 1100px
   and 4 columns at 1100px and above.
   ====================================================== */
.section-featured-collection .column.quarter,
.section-featured-collection .grid li.quarter {
  width: 33.3%;
}
@media (min-width: 1100px) {
  .section-featured-collection .column.quarter,
  .section-featured-collection .grid li.quarter {
    width: 25%;
  }
  .grid--uniform .section-featured-collection .column.quarter:nth-child(3n+1),
  .section-featured-collection .grid--uniform .column.quarter:nth-child(3n+1),
  .section-featured-collection .grid--uniform .grid li.quarter:nth-child(3n+1) {
    clear: none;
  }
  .grid--uniform .section-featured-collection .column.quarter:nth-child(4n+1),
  .section-featured-collection .grid--uniform .column.quarter:nth-child(4n+1),
  .section-featured-collection .grid--uniform .grid li.quarter:nth-child(4n+1) {
    clear: left;
  }
}

/* (Der frühere #page-content-Grid-Hack für Galerie+Accordions wurde durch die
   DOM-Adoption innerhalb der Konfigurator-Section ersetzt — siehe
   playts-set-configurator.liquid + playts-configurator.css.) */


/* ── Reviews carousel side-fade ───────────────────────────────────────────
   The Judge.me cards carousel (.jdgm-cards-carousel) scrolls horizontally and
   is hard-clipped by the section's `overflow-x: hidden`. Fade both edges to
   the (white) page background so the cards dissolve out instead of looking
   cut off. Pseudo-elements sit on the position:relative .jdgm-content and are
   pushed out by 1× --side-spacing to land on the actual clip edge; they're
   clipped by the same section overflow so they never stick out. Applies
   wherever the carousel appears (configurator page + main PLAYTS page). */
.jdgm-cards-carousel .jdgm-content { position: relative; }
.jdgm-cards-carousel .jdgm-content::before,
.jdgm-cards-carousel .jdgm-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 3;
  pointer-events: none;
}
.jdgm-cards-carousel .jdgm-content::before {
  left: calc(var(--side-spacing, 1.1rem) * -1);
  background: linear-gradient(to right, #fff 18%, rgba(255, 255, 255, 0));
}
.jdgm-cards-carousel .jdgm-content::after {
  right: calc(var(--side-spacing, 1.1rem) * -1);
  background: linear-gradient(to left, #fff 18%, rgba(255, 255, 255, 0));
}


/* Slider-Dots auf Mobile — Apple-Style: aktive Pille füllt sich über die Autoslide-Dauer, inaktiv kleine solide Punkte. */
@keyframes ss-pill-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 767px) {
  .theme-gallery .slick-dots,
  .slideshow .slick-dots { padding-left: 8px; padding-right: 8px; font-size: 0; line-height: 0; white-space: nowrap; }
  .slick-dots li { margin: 0 1px; vertical-align: middle; }

  /* inaktiv: kleiner solider Punkt — rund geclippt, kein Morph (verhindert Quadrat-Blitzer) */
  .slick-dots li button.custom-dot { width: 20px; height: 20px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: none; border-radius: 50%; overflow: hidden; transition: none; }
  .slick-dots li button.custom-dot svg { width: 10px; height: 10px; filter: none; overflow: visible; background: transparent; }
  .slick-dots li button.custom-dot circle { fill: rgba(255, 255, 255, 0.7); stroke: none; animation: none; }

  /* aktiv: Pille — Spur via inset-Schatten, weisse Fuellung via ::after (scaleX ueber --slide-ms) */
  .slick-dots li.slick-active button.custom-dot { width: 39px; height: 10px; padding: 0; border-radius: 6px; overflow: hidden; position: relative; transition: none; box-shadow: inset 0 0 0 99px rgba(255, 255, 255, 0.4); }
  .slick-dots li.slick-active button.custom-dot svg { display: none; }
  .slick-dots li.slick-active button.custom-dot::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #ffffff; transform-origin: left; transform: scaleX(1); }
  .slideshow[data-autoplay="true"] .slick-dots li.slick-active button.custom-dot::after { transform: scaleX(0); animation: ss-pill-fill var(--slide-ms, 3000ms) linear forwards; }

  /* Viele Bilder (≥8, Klasse via Liquid): Dots enger zusammenrücken, damit die
     Reihe nicht zu breit wird / umbricht. Der sichtbare Punkt bleibt 10px, nur
     der Abstand (Button-Breite + margin) schrumpft. */
  .slideshow--dense-dots .slick-dots li { margin: 0; }
  .slideshow--dense-dots .slick-dots li button.custom-dot { width: 15px; }
  .slideshow--dense-dots .slick-dots li.slick-active button.custom-dot { width: 30px; }
  /* aktive Pille etwas Luft geben (2px links/rechts) */
  .slideshow--dense-dots .slick-dots li.slick-active { margin: 0 2px; }
}

/* ── PLAYTS FAQ: reguläres Section-Spacing auf Mobil ─────────────────────────
   Die Theme-Accordion-Wrapper legen inneres Seiten-Padding oben drauf
   (.accordion-container.reading-width ≈ 10,5px + innere .container--large 20px),
   sodass die FAQ-Inhalte bei ~41px statt bei 1× --side-spacing (11px) sitzen.
   Fix nur für die FAQ (hat einen Titel → :not(.no-title); die titel-lose
   Produktdetail-Akkordeon bleibt unberührt), nur auf PLAYTS-Seiten
   (Body-Klasse enthält „playts": greift für alle /pages/playts-* + Set-Produkte
   + Konfigurator-Seite), nur auf Mobil. */
@media (max-width: 767px) {
  /* Die FAQ hatte ÜBER den Theme-Standard hinaus (Section-Margin + reading-width
     = 2× --side-spacing) noch die feste .container--large-Polsterung (20px), sodass
     der Inhalt zu weit innen saß. Nur diese Extra-Polsterung entfernen — der
     reading-width-Abstand (= 1× --side-spacing) bleibt, damit die FAQ beim
     Standard landet: 2× --side-spacing gesamt. */
  body[class*="playts"] .accordion-container.reading-width:not(.no-title) .container--large {
    padding-inline: 0 !important;
  }
}