/** Shopify CDN: Minification failed

Line 3200:0 Unexpected "}"

**/
/* ============================================
   CYGNUS ATRATUS — Custom Theme Styles
   ============================================ */

/* --- Typography Overrides --- */
body,
.font-body {
  font-family: 'Albert Sans', var(--font-body-family);
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5,
.hx {
  font-family: 'Marcellus', var(--font-heading-family);
}

.font-utility,
.announcement-bar__message,
.utility-bar,
.card__badge,
.product-card__tagline {
  font-family: 'Outfit', sans-serif;
}

/* --- Header Layout: Logo left, Nav center, Icons right --- */
@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: 1fr auto 1fr !important;
  }
  .header--middle-left .header__inline-menu {
    justify-content: center !important;
  }
  .header--middle-left .header__icons {
    justify-content: flex-end !important;
  }
}

/* Logo: SVG dual-version (dark default, light on transparent header) */
.header__heading-logo {
  max-width: 20rem !important;
  width: 20rem !important;
  height: auto !important;
}
.header__logo--light {
  display: none;
}
.header__logo--dark {
  display: block;
}
/* Transparent header: show white logo, hide dark */
.header-wrapper--transparent .header__logo--dark {
  display: none;
}
.header-wrapper--transparent .header__logo--light {
  display: block;
}
/* Logo swap on scroll handled in the consolidated block at end of file
   (.section-header.scrolled-past-header rules). */

/* --- Transparent Header (Homepage only) --- */
/* The header-wrapper sits inside .section-header which is always sticky.
   On the homepage, we make the wrapper + header bg transparent so the
   hero image shows through. Dawn's JS adds .shopify-section-header-sticky
   when scrolled, at which point we switch to white bg + dark text. */
.header-wrapper--transparent {
  background: transparent !important;
}
.header-wrapper--transparent .header {
  background: transparent !important;
}

.header-wrapper--transparent .header__heading-link,
.header-wrapper--transparent .header__menu-item,
.header-wrapper--transparent .list-menu__item--link,
.header-wrapper--transparent .header__icon,
.header-wrapper--transparent .header a,
.header-wrapper--transparent .header span,
.header-wrapper--transparent .localization-form__select {
  color: #FFFFFF !important;
}
/* Menu drawer: always dark text — override the broad white rule above.
   The drawer has its own white background, so links must be dark. */
.header-wrapper--transparent .menu-drawer a,
.header-wrapper--transparent .menu-drawer span,
.header-wrapper--transparent .menu-drawer summary,
.header-wrapper--transparent .menu-drawer .menu-drawer__menu-item {
  color: rgb(var(--color-foreground)) !important;
}
.header-wrapper--transparent .menu-drawer svg {
  fill: rgb(var(--color-foreground)) !important;
  color: rgb(var(--color-foreground)) !important;
}

.header-wrapper--transparent .header__icon svg,
.header-wrapper--transparent .icon-caret {
  fill: #FFFFFF;
  color: #FFFFFF;
}

/* Submenu dropdown: always dark text — overrides the broad white rules above.
   The submenu has its own color scheme (scheme-1 = white bg) so text must be dark. */
.header-wrapper--transparent .header__submenu,
.header-wrapper--transparent .header__submenu a,
.header-wrapper--transparent .header__submenu span,
.header-wrapper--transparent .header__submenu .header__menu-item,
.header-wrapper--transparent .header__submenu .list-menu__item--link {
  color: #1a1a1a !important;
}

/* Cart count bubble: small dark badge, pinned to bottom-right of the cart icon.
   Stays dark in both states (transparent hero and white sticky), so the count
   is always legible. */
.header .cart-count-bubble {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
  font-size: 0.95rem !important;
  border: 1.5px solid #FFFFFF !important;
  bottom: 0.6rem !important;
  right: 0.6rem !important;
  left: auto !important;
  top: auto !important;
}
/* Cart bubble count number: always white (dark bubble bg in every state) */
.section-header .header .cart-count-bubble span {
  color: #FFFFFF !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

/* Cart bubble border: soft white on the transparent hero (so it doesn't
   look like a hard ring), reverts to solid white once the header turns
   white via the .scrolled-past-header rules at the end of the file
   (white-on-white = effectively no border, which is fine — the dark
   bubble itself stays visible). */
.template-index .section-header:not(.scrolled-past-header) .header .cart-count-bubble {
  border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Logo visibility handled by .header__logo--dark / .header__logo--light classes */

/* Parent nav link (inside <summary>) — no underline, inherits color from header rules above */
.header__menu-parent-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline;
}
.header__menu-parent-link:hover,
.header__menu-parent-link:focus {
  text-decoration: none !important;
  color: inherit !important;
}

/* Dropdown submenu — always dark text + solid background,
   regardless of the transparent header overrides above */
.header__submenu {
  min-width: 20rem !important;
  border-radius: 0.4rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  padding: 0.8rem 0 !important;
}

.header-wrapper--transparent .header__submenu {
  background-color: rgb(var(--color-background)) !important;
}

.header__submenu .list-menu__item--link,
.header__submenu a {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.9rem 2rem !important;
  color: rgb(var(--color-foreground)) !important;
  white-space: nowrap !important;
}

.header__submenu .list-menu__item--link:hover,
.header__submenu a:hover {
  opacity: 0.6 !important;
}

/* Mobile hamburger menu icon: white on transparent header */
.header-wrapper--transparent .header__icon--menu svg {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* All headers: menu links #000 by default */
.header__menu-item,
.list-menu__item--link {
  color: #000000 !important;
}

/* The "after-scroll" white background + dark text rules live in the
   consolidated .scrolled-past-header block at the end of this file.
   They cannot use .shopify-section-header-sticky, because with
   sticky_header_type:"always" that class is applied on page load and
   would defeat the transparent state on the hero. */


/* ============================================
   COLOR SCHEME OVERRIDES
   Live Shopify theme has scheme-3 and scheme-4
   mapped to wrong colors via Theme Editor.
   Force correct brand colors here via CSS.
   ============================================ */

/* scheme-3 = DARKEST (#171717) — testimonials, two-col-2, unsere welt, instagram */
.color-scheme-3,
.color-scheme-3.gradient {
  --color-background: 23,23,23;
  --gradient-background: #171717;
  --color-foreground: 255,255,255;
  background-color: #171717 !important;
}

/* scheme-4 = DARK (#171717) — footer */
.color-scheme-4,
.color-scheme-4.gradient {
  --color-background: 23,23,23;
  --gradient-background: #171717;
  --color-foreground: 255,255,255;
  background-color: #171717 !important;
}

/* Exception: announcement bar (utility-bar) uses scheme-4 but needs #676767 gray */
.utility-bar.color-scheme-4,
.utility-bar.color-scheme-4.gradient {
  background-color: #676767 !important;
}

/* --- Announcement Bar / Topbar --- */

.utility-bar {
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
}

/* Kept for legacy / fallback */
.announcement-bar-section .color-scheme-4,
.announcement-bar-section .color-scheme-5 {
  background-color: #676767 !important;
}

/* Hide prev/next slider buttons — both mobile and desktop */
.announcement-bar-slider .slider-button,
.announcement-bar .slider-button {
  display: none !important;
}

/* Topbar typography */
.announcement-bar {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  overflow: hidden;
  width: 100%;
}

.announcement-bar__link,
.announcement-bar__message {
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

/* ── Desktop: show all 3 items side by side with checkmarks (matches Figma) ── */
@media screen and (min-width: 750px) {
  /* Constrain the utility-bar content to the same page-width as the rest */
  .utility-bar .page-width {
    max-width: var(--page-width, 1200px);
    margin: 0 auto;
    padding: 0 5rem;
  }

  /* Show all slides at once — disable scroll/overflow clipping */
  .announcement-bar,
  .announcement-bar-slider {
    overflow: visible !important;
  }

  /* The inner slider grid: flex-start = left-aligned (Figma)
     width: 100% is critical — auto makes it content-width and centered by parent */
  .announcement-bar .slider.grid--1-col {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    transform: none !important;
    width: 100% !important;
  }

  /* Each slide: auto width, no scroll-snap, always visible.
     Force visibility even when Dawn's slideshow JS sets aria-hidden="true"
     and toggles slide visibility. On desktop all 3 slides must stay visible. */
  .announcement-bar .slideshow__slide {
    width: auto !important;
    flex: none !important;
    scroll-snap-align: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    position: relative !important;
  }
  .announcement-bar .slideshow__slide[aria-hidden="true"] {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }

  /* Kill slideshow navigation arrows on desktop — not needed when all items show */
  .announcement-bar-slider .slider-button {
    display: none !important;
  }

  /* Kill ALL slide animations on desktop — the JS SlideshowComponent keeps
     adding fade-in/fade-out classes + scrollTo() on a timer. CSS animations
     override static opacity because the animation layer wins in the cascade.
     animation:none + opacity:1 on the message itself ensures no flicker. */
  .announcement-bar-slider--fade-in-next .announcement-bar__message,
  .announcement-bar-slider--fade-in-previous .announcement-bar__message,
  .announcement-bar-slider--fade-out-next .announcement-bar__message,
  .announcement-bar-slider--fade-out-previous .announcement-bar__message {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Prevent the slider from actually scrolling on desktop */
  .announcement-bar .slider {
    overflow: visible !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }

  /* Checkmark icon before each message (Figma circle-checkmark, white on dark) */
  .announcement-bar .announcement-bar__message::before,
  .announcement-bar .announcement-bar__link::before {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.3333 11.3333' fill='none'%3E%3Cpath d='M7.79105 4.62837C7.94545 4.47399 7.94545 4.22367 7.79105 4.06928C7.63665 3.91488 7.38637 3.91488 7.23198 4.06928L4.87586 6.42536L4.10115 5.65068C3.94676 5.49629 3.69644 5.49629 3.54204 5.65068C3.38765 5.80508 3.38765 6.05536 3.54204 6.20976L4.59631 7.26402C4.75072 7.41842 5.001 7.41842 5.1554 7.26402L7.79105 4.62837Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.66666 0C2.53705 0 0 2.53705 0 5.66666C0 8.79629 2.53705 11.3333 5.66666 11.3333C8.79629 11.3333 11.3333 8.79629 11.3333 5.66666C11.3333 2.53705 8.79629 0 5.66666 0ZM0.790696 5.66666C0.790696 2.97374 2.97374 0.790696 5.66666 0.790696C8.35956 0.790696 10.5426 2.97374 10.5426 5.66666C10.5426 8.35956 8.35956 10.5426 5.66666 10.5426C2.97374 10.5426 0.790696 8.35956 0.790696 5.66666Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 0.5rem;
  }
}

/* Mobile: single rotating item (existing behavior) */
@media screen and (max-width: 749px) {
  .announcement-bar__announcements,
  .announcement-bar-slider {
    overflow: hidden;
  }
}

/* --- Hero Banner --- */
.banner--large:not(.banner--adapt) {
  min-height: 80rem !important;
  max-height: 80rem !important;
}
.banner--adapt {
  min-height: 80rem;
  max-height: 80rem;
}

/* Fix Dawn's bottom-left positioning.
   Dawn's .banner__content is display:flex (row) — so:
   align-items: flex-end   → content at BOTTOM (cross-axis end in row-flex)
   justify-content: flex-start → content at LEFT (main-axis start in row-flex)
   Our previous override was WRONG (had them swapped). */
.banner__content.banner__content--bottom-left {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-bottom: 6rem !important;
}

.banner__heading {
  font-size: 5.4rem;
  line-height: 1.16;
  max-width: 75rem;
}

/* Banner box: remove Dawn's max-width constraint so heading can use full width */
.banner__box {
  max-width: none !important;
  width: 100% !important;
}

.banner__text p {
  font-size: 2rem;
  line-height: 1.55;
  max-width: 65rem;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 749px) {
  .banner__heading {
    font-size: 3.2rem;
  }
  .banner__text p {
    font-size: 1.6rem;
  }
  .banner--adapt,
  .banner--large:not(.banner--adapt) {
    min-height: 65vh !important;
  }
}

/* --- Featured Collection Section --- */
/* Figma: "Batch 01" heading left, "Limited to 999 candles" description right, same row.
   Dawn renders the featured-collection wrapper as .collection (not .featured-collection). */
.collection__title.title-wrapper,
.collection .title-wrapper {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
}

.collection .title-wrapper-with-link {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}

.collection .collection__description {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #676767 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  flex-shrink: 0 !important;
}

/* Featured Collection on dark background (scheme-3): force white text.
   scheme-3 = #171717 — the description #676767 and default dark headings
   are invisible on a near-black background. */
.color-scheme-3 .collection .title-wrapper h2,
.color-scheme-3 .collection__title,
.color-scheme-3 .collection h2.title {
  color: #FFFFFF !important;
}

.color-scheme-3 .collection .collection__description {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Product-card titles and prices stay readable (cards have light bg from scheme-2) */
.color-scheme-3 .card__heading a,
.color-scheme-3 .card__heading {
  color: #171717 !important; /* dark text on the light card background */
}

.color-scheme-3 .price__regular .price-item,
.color-scheme-3 .price__sale .price-item {
  color: #171717 !important;
}

/* --- Product Cards --- */
.card--standard .card__inner {
  background-color: #F5F5F5;
}

/* Force uniform card image height.
   Dawn uses .card__inner.ratio with a --ratio-percent CSS var set per card
   based on the image's natural aspect ratio — which causes different-sized images
   to produce cards of unequal heights.
   Fix: override --ratio-percent to a constant 125% (= 4:5, matches Figma).
   The image then fits using object-fit:contain so the full candle is always visible. */
.card--standard .card__inner.ratio {
  --ratio-percent: 125% !important; /* 5÷4 × 100 = 125 → always 4:5 portrait */
}

.card--standard .card__media {
  position: absolute !important;
  inset: 0 !important;
  aspect-ratio: unset !important;
  overflow: hidden;
}

/* .media wrapper: kill Dawn's padding-bottom ratio trick — the ratio is already
   handled by --ratio-percent on .card__inner.ratio. Without this reset, the
   padding inflates the containing block height for the absolute img child,
   pushing the image below the overflow:hidden clip boundary. */
.card--standard .card__media .media {
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  aspect-ratio: unset !important;
}

.card--standard .card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  aspect-ratio: unset !important;
}

/* Hover image: fill the full card frame (cover) so it doesn't appear narrower */
.card--standard .card__media .media--hover-effect > img + img {
  object-fit: cover !important;
  object-position: center !important;
}

/* Product badges (Sale, Sold Out) — uses !important to override Dawn's color-scheme CSS vars */
.card__badge .badge {
  background-color: #171717 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.5rem 1.2rem;
  box-shadow: none !important;
}

.card__badge .badge--bottom-left {
  bottom: 1.2rem;
  left: 1.2rem;
}

.product-card__tagline {
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
  z-index: 2;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1a1a;
  background: transparent;
  padding: 0.4rem 1rem;
  margin: 0;
  line-height: 1.4;
  pointer-events: none;
  transition: background-color 0.3s ease;
}

/* On card hover: tagline gets white bg */
.card__inner:hover .product-card__tagline,
.grid__item:hover .product-card__tagline {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card__inner {
  position: relative;
}

.card__content .card__information {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}

.card__heading {
  font-family: 'Marcellus', serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card__information .price {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  margin-top: 0.6rem;
}

/* Rating im Produktkarten */
.card-information .rating {
  margin-top: 0.4rem;
}
.card-information .rating-text,
.card-information .rating-count {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  color: #676767;
}

.product-card__description {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #676767;
  line-height: 1.5;
  margin-top: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Section: Founder Quote --- */
.founder-quote {
  padding: 9rem 0;
  text-align: left;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}


/* Strip ALL browser blockquote defaults (left border, indent, italic) */
blockquote.founder-quote__text,
.founder-quote__text {
  font-family: 'Marcellus', serif !important;
  font-size: 4rem !important;
  line-height: 1.24 !important;
  color: #171717 !important;
  max-width: 90rem !important;
  margin: 0 !important;
  font-style: normal !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  quotes: none !important;
  text-align: left !important;
  background: none !important;
}

.founder-quote__attribution {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #676767;
  margin-top: 3.2rem;
  text-align: right;
  max-width: 90rem;
}

@media screen and (max-width: 749px) {
  .founder-quote__text {
    font-size: 2.2rem !important;
  }
  .founder-quote {
    padding: 5rem 0;
  }
}

/* --- Section: Two Column Images --- */

/* Base: structural rules apply on every template (no overlap math here).
   The homepage-only padding-top + negative margin-top live in the
   .template-index block below — that's what creates the overlap with
   the founder-quote section above. */
.two-col-images-section {
  position: relative;
  overflow: visible !important;
}


/* Ensure the Shopify section wrapper also allows overflow */
[id*="two_col_images"] {
  overflow: visible !important;
}

.two-col-images-section__heading {
  font-family: 'Marcellus', serif;
  font-size: 3.2rem;
  font-weight: 400;
  margin: 0;
  padding: 5rem 0 3rem;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.two-col-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

/* Homepage: background controlled by scroll JS.
   Kill ALL background sources: gradient class, color-scheme, CSS vars */
.two-col-images-section[data-scroll-bg],
.two-col-images-section[data-scroll-bg].gradient,
.two-col-images-section[data-scroll-bg].color-scheme-3,
.two-col-images-section[data-scroll-bg].color-scheme-3.gradient {
  background: #FFFFFF !important;
  background-image: none !important;
  --gradient-background: #FFFFFF !important;
  --color-background: 255, 255, 255;
  background-attachment: initial !important;
}
.template-index .two-col-images-section {
  padding-top: 20rem;
}
.template-index .two-col-images {
  margin-top: -14rem;
}

/* Each item is a flex column: image on top, text block below */
.two-col-images__item {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  height: auto !important;
  border-radius: 2px;
}

/* Image: fills column width, portrait ratio */
.two-col-images__item img,
.two-col-images__item svg,
.two-col-images__item .placeholder-svg {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 707 / 780 !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* Text block: repositioned below the image.
   Default: dark text (used when section has a light bg).
   Overridden to white when the section uses a dark color scheme (scheme-3 / scheme-4). */
.two-col-images__overlay {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  /* No horizontal padding — heading + paragraph start at the image's left edge. */
  padding: 2.8rem 0 5rem 0 !important;
  color: #1a1a1a !important;
  background: none !important;
}

.two-col-images__heading {
  font-family: 'Marcellus', serif;
  font-size: 3rem;
  line-height: 1.13;
  color: #171717;
  margin: 0 0 1.4rem;
}

.two-col-images__description {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a1a1a;
  opacity: 1;
  margin: 0;
  max-width: 60rem;
}

/* scheme-3 and scheme-4 both use #171717 bg → need white text */
.color-scheme-3 .two-col-images__overlay,
.color-scheme-4 .two-col-images__overlay {
  color: #f5f5f5 !important;
}

.color-scheme-3 .two-col-images__heading,
.color-scheme-4 .two-col-images__heading {
  color: #ffffff;
}

.color-scheme-3 .two-col-images__description,
.color-scheme-4 .two-col-images__description {
  color: #d4d4d4;
}

@media screen and (max-width: 749px) {
  .two-col-images {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Homepage-only overlap on mobile (matches the desktop scope below) */
  .template-index .two-col-images-section {
    padding-top: 12rem;
  }
  .template-index .two-col-images {
    margin-top: -8rem;
    gap: 0.8rem;
  }
  .two-col-images__item img,
  .two-col-images__item .placeholder-svg {
    aspect-ratio: 4 / 3 !important;
  }
  .two-col-images__heading {
    font-size: 2.2rem;
  }
  .two-col-images__description {
    font-size: 1.4rem;
  }
  .two-col-images__overlay {
    padding: 2rem 0 3rem !important;
  }
}

/* --- Section: Testimonials --- */
.testimonials {
  padding: 7rem 0;
  overflow: hidden;
}

.testimonials .page-width {
  overflow: visible;
}

.testimonials__layout {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}

/* Left col: heading at top, nav arrows pushed to bottom
   (matches Figma: heading top-left, arrows bottom-left) */
.testimonials__left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 28rem;
  max-width: 32rem;
  flex-shrink: 0;
}

.testimonials__heading {
  font-family: 'Marcellus', serif;
  font-size: 4rem;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
  text-align: left;
}

.testimonials__wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.testimonials__grid {
  display: flex;
  gap: 0;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonials__grid::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  flex: 0 0 42rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3.2rem 3.2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  scroll-snap-align: start;
}

.testimonial-card__stars {
  display: flex;
  gap: 0.3rem;
}

.testimonial-card__star {
  width: 1.2rem;
  height: 1.2rem;
  fill: #FFFFFF;
}

.testimonial-card__text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  flex: 1;
  text-align: left;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  text-align: left;
}

.testimonial-card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: #FFFFFF;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Nav arrows now positioned absolutely inside .testimonials__wrapper */
.testimonials__nav {
  display: flex;
  gap: 0.8rem;
  margin-top: 0;
  justify-content: flex-start;
}

.testimonials__nav-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  transition: border-color 0.2s ease;
}

.testimonials__nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.testimonials__nav-btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Figma: arrows float OUTSIDE the card container, overlapping the edges.
   overflow must be visible on wrapper+layout so arrows aren't clipped.
   The parent .testimonials { overflow: hidden } prevents page-level scrollbar. */
.testimonials__wrapper {
  position: relative;
  overflow: visible;
}
.testimonials__layout {
  overflow: visible;
}
.testimonials__nav-btn--prev {
  position: absolute;
  left: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.testimonials__nav-btn--next {
  position: absolute;
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

@media screen and (max-width: 990px) {
  .testimonials__layout {
    flex-direction: column;
    gap: 3rem;
  }
  .testimonials__left-col {
    min-width: unset;
    max-width: unset;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
  .testimonials__heading {
    font-size: 3.2rem;
  }
  .testimonials__nav {
    align-self: flex-end;
  }
  .testimonials {
    padding: 5rem 0;
  }
}

@media screen and (max-width: 749px) {
  .testimonials__heading {
    font-size: 2.8rem;
  }
  .testimonial-card {
    flex: 0 0 calc(100vw - 6rem);
  }
  /* Mobile arrows: pull them inside the viewport so they're fully visible.
     Default left/right: -2.2rem clips them off the screen edge because
     .page-width only has ~1.5rem horizontal padding on small viewports. */
  .testimonials__nav-btn--prev {
    left: 0.4rem;
  }
  .testimonials__nav-btn--next {
    right: 0.4rem;
  }
  .testimonials__nav-btn {
    width: 4rem;
    height: 4rem;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.65);
  }
}

/* --- Section: Instagram Feed --- */
.instagram-feed {
  padding-bottom: 6rem;
  /* Section background must reach the right edge — Dawn's section wrapper has
     no horizontal padding, but be explicit to avoid surprise white slivers. */
  width: 100%;
  margin: 0;
}

.instagram-feed__header {
  padding-top: 6rem;
  padding-bottom: 3rem;
}

.instagram-feed__heading {
  font-family: 'Marcellus', serif;
  font-size: 5.2rem;
  color: #FFFFFF;
  margin: 0;
}

/* Grid wrapper sits inside .page-width on desktop — same horizontal margin
   as other sections. On mobile we'll bleed past the page-width padding via
   negative margins so the row extends past the viewport edge. */

/* Desktop: 6 square images in a single row, contained in page-width. */
.instagram-feed__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  background: transparent;
}

.instagram-feed__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.instagram-feed__item img,
.instagram-feed__item .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.instagram-feed__item:hover img {
  transform: scale(1.05);
}

/* Optional text overlay on a card (e.g. "Discover lasting atmosphere") */
.instagram-feed__item--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.instagram-feed__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: #FFFFFF;
  pointer-events: none;
}

.instagram-feed__overlay-text {
  font-family: 'Marcellus', serif;
  font-size: 2rem;
  line-height: 1.18;
  display: block;
  margin: 0;
}

.instagram-feed__overlay-subtext {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1.2rem;
  display: block;
}

.instagram-feed__handle {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  display: inline-block;
}
a.instagram-feed__handle:hover {
  color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 749px) {
  .instagram-feed__header {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  .instagram-feed__heading {
    font-size: 3.2rem;
  }
  /* Mobile: square items in a horizontal scroll row. The grid bleeds past
     the page-width's 1.6rem padding so it visually overflows the viewport. */
  .instagram-feed__grid-wrapper.page-width {
    padding-left: 0;
    padding-right: 0;
  }
  .instagram-feed__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.3rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 1.6rem;
  }
  .instagram-feed__grid::-webkit-scrollbar {
    display: none;
  }
  .instagram-feed__item {
    flex: 0 0 32vw;
    width: 32vw;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
  }
  .instagram-feed__overlay {
    padding: 1.5rem;
  }
  .instagram-feed__overlay-text {
    font-size: 1.5rem;
  }
  .instagram-feed__overlay-subtext {
    font-size: 1rem;
    margin-top: 0.6rem;
  }
  .instagram-feed {
    padding-bottom: 4rem;
  }
}

/* --- Section: Unsere Welt (Image with Text) --- */
.image-with-text .button--secondary {
  border-radius: 9999px;
  padding: 1.2rem 3.2rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  background-color: #FFFFFF;
  color: #2a211b;
  border: none;
}

.image-with-text .button--secondary:hover {
  background-color: #F0F0F0;
  color: #2a211b;
  box-shadow: none;
}

/* Image-with-text on dark background (scheme-3): ensure heading/text are white */
.color-scheme-3 .image-with-text__text-item h2,
.color-scheme-3 .image-with-text__text-item .image-with-text__heading,
.color-scheme-3 .image-with-text__text-item p {
  color: #FFFFFF;
}

/* Button in dark "Unsere Welt" section — white pill, no border/outline.
   Targets both scheme-3 and scheme-4 since Shopify may use either on the live site. */
.color-scheme-3 .image-with-text .button--secondary,
.color-scheme-3 .image-with-text a.button--secondary,
.color-scheme-3 .image-with-text .button,
.color-scheme-4 .image-with-text .button--secondary,
.color-scheme-4 .image-with-text a.button--secondary,
.color-scheme-4 .image-with-text .button {
  background-color: #FFFFFF !important;
  color: #171717 !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
}
.color-scheme-3 .image-with-text .button--secondary:hover,
.color-scheme-3 .image-with-text a.button--secondary:hover,
.color-scheme-4 .image-with-text .button--secondary:hover,
.color-scheme-4 .image-with-text a.button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.88) !important;
  color: #171717 !important;
}
/* Remove Dawn's ::after box-shadow rectangle on buttons in dark sections */
.color-scheme-3 .image-with-text .button--secondary::after,
.color-scheme-3 .image-with-text a.button--secondary::after,
.color-scheme-3 .image-with-text .button::after,
.color-scheme-4 .image-with-text .button--secondary::after,
.color-scheme-4 .image-with-text a.button--secondary::after,
.color-scheme-4 .image-with-text .button::after {
  box-shadow: none !important;
  display: none !important;
}

.image-with-text__text-item {
  text-align: left !important;
}

.image-with-text__text-item h2,
.image-with-text__text-item .image-with-text__heading {
  font-family: 'Marcellus', serif;
  text-align: left !important;
}

.image-with-text__text-item p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.7rem;
  line-height: 1.6;
  text-align: left !important;
}

/* --- Collection Page Banner --- */
.collection-hero {
  position: relative;
  min-height: 37.8rem;
}

.collection-hero__title,
.main-collection-banner h1 {
  font-family: 'Marcellus', serif;
  font-size: 5.4rem;
  line-height: 1.16;
  color: #FFFFFF;
}

/* Collection banner description ("Limited to 999 candles") */
.main-collection-banner .collection-hero__description p,
.collection-hero__description p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.55;
  margin-top: 0.8rem;
}

/* Filter button — Figma: black border, transparent bg, 47px height, 126px wide */
/* Targets both horizontal/vertical mode (.facets__summary) and drawer mode (.mobile-facets__open-wrapper) */
.facets__summary,
.mobile-facets__open-wrapper,
.facets-container button[aria-controls="FacetFiltersFormMobile"],
[data-toggle-filter] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #1a1a1a !important;
  background: transparent !important;
  border-radius: 0 !important;
  height: 4.7rem !important;
  min-width: 12.6rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.6rem !important;
  color: #1a1a1a !important;
  padding: 0 2rem !important;
  cursor: pointer;
  list-style: none; /* <summary> resets */
}

/* Remove default summary marker in webkit */
.mobile-facets__open-wrapper::-webkit-details-marker { display: none; }

/* Filter label text inside the button */
.mobile-facets__open {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
}

/* Hide the filter icon svg if needed — keep just the label */
.mobile-facets__open svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

/* Filter drawer: slide in from LEFT instead of Dawn's default RIGHT */
.mobile-facets {
  z-index: 1100 !important;
}
.mobile-facets__inner {
  margin-left: 0 !important;
  margin-right: auto !important;
  border-width: 0 var(--drawer-border-width) 0 0 !important;
}
.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(-105vw) !important;
}
.menu-opening .mobile-facets__inner {
  transform: translateX(0) !important;
}

/* Product count text (e.g. "3 Produkte") */
.product-count__text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.6rem;
  color: #676767;
}

/* --- Product Page (base rules — overridden by Figma-matched PDP block below) --- */

/* --- Footer (base rules — overridden by Figma-matched block below) --- */
.footer__content-top {
  font-family: 'Outfit', sans-serif;
}

/* --- Collapsible Content / FAQ --- */
.collapsible-content__heading,
.collapsible-content .collapsible-content__heading {
  font-family: 'Marcellus', serif;
  font-size: 4rem;
}

.collapsible-content .accordion__title,
.collapsible-content summary span {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 1.8rem;
}

.collapsible-content details summary {
  border-bottom: 1px solid rgba(23, 23, 23, 0);
  padding: 2rem 0;
}

/* --- Multicolumn --- */
/* Multicolumn card headings — Figma: Marcellus 27px */
.multicolumn-card__info .card__heading {
  font-family: 'Marcellus', serif;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.multicolumn-card__info p,
.multicolumn-card .rte p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.35rem;
  color: #4a4a4a;
  line-height: 1.55;
}

/* Multicolumn card images */
.multicolumn-card__image-wrapper {
  margin-bottom: 1.2rem;
}
.multicolumn-card__image-wrapper .media--portrait {
  padding-bottom: 100% !important;
}

/* --- Multicolumn slider with arrows at outer edges --- */
.multicolumn slider-component {
  position: relative !important;
  overflow: visible !important;
}
.multicolumn .page-width {
  overflow: visible !important;
}

/* Show slider buttons on ALL breakpoints */
.multicolumn .slider-buttons.large-up-hide {
  display: flex !important;
}

/* Hide the default bottom button row — we reposition individual buttons */
.multicolumn .slider-buttons {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: space-between !important;
  pointer-events: none;
}

/* Each arrow: absolute, at outer page edges, vertically centered on images */
.multicolumn .slider-button {
  position: absolute !important;
  top: 35% !important;
  transform: translateY(-50%) !important;
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(26, 26, 26, 0.2) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: auto;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.multicolumn .slider-button:hover {
  border-color: rgba(26, 26, 26, 0.5) !important;
}
.multicolumn .slider-button--prev {
  left: -5rem !important;
}
.multicolumn .slider-button--next {
  right: -5rem !important;
}
@media screen and (max-width: 989px) {
  .multicolumn .slider-button--prev {
    left: 0.8rem !important;
  }
  .multicolumn .slider-button--next {
    right: 0.8rem !important;
  }
}
.multicolumn .slider-button .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Hide the "1/2" page counter */
.multicolumn .slider-counter {
  display: none !important;
}

.multicolumn .title-wrapper {
  max-width: 550px;
}
.multicolumn .title-wrapper h2 {
  font-family: 'Marcellus', serif;
  font-size: 3.2rem !important;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2rem;
}
/* Tighter section padding */
.multicolumn {
  padding-top: 4rem !important;
  padding-bottom: 3rem !important;
}

/* --- General Spacing --- */
/* Reduce default section gap */
.shopify-section + .shopify-section {
  margin-top: 0;
}

/* ============================================
   FOOTER — Figma-matched (dark theme, scheme-4)
   ============================================ */

/* Remove top border */
.footer.color-scheme-4,
.section-footer .footer {
  border-top: none !important;
}

/* ---- Column Headings: Sora Bold 16px (Figma nodes 23:175, 23:181, etc.) ---- */
.footer .footer-block__heading {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin-bottom: 1.6rem !important;
}

/* ---- Column Links: Outfit Regular 16px, 70% opacity (Figma node 23:177 etc.) ---- */
.footer .footer-block__details-content a,
.footer .list-menu__item {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 2.2 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
}
.footer .footer-block__details-content a:hover,
.footer .list-menu__item:hover {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* ---- 4-Column Grid: 3 menu + 1 payment ---- */
/* Dawn uses flexbox on .footer__blocks-wrapper — override to CSS Grid
   so grid-template-columns actually takes effect */
@media screen and (min-width: 750px) {
  .footer__blocks-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1.8fr 1fr 1.8fr !important;
    gap: 2rem !important;
    flex-wrap: unset !important;
  }
  /* Ensure all children (including injected payment col) behave as grid items */
  .footer__blocks-wrapper > * {
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* Footer block spacing */
.footer-block--menu {
  padding-right: 1rem;
}

/* ---- Payment Column (4th col, Figma node 23:208) ---- */
.footer-block--payment-column .footer-block__payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.6rem;
}
.footer-block--payment-column .footer-block__payment-list .icon--full-color {
  height: 2.6rem;
  width: auto;
  border-radius: 3px;
  opacity: 0.9;
}

/* Hide duplicate payment icons from bottom bar (they appear in 4th column now) */
.footer__content-bottom .list-payment {
  display: none !important;
}

/* ---- Social Icons ---- */
.footer .footer__list-social .list-social__link {
  color: #FFFFFF !important;
}
.footer .footer__list-social {
  gap: 2.4rem !important;
  margin-top: 2rem !important;
}
.footer .list-social__icon {
  width: 2.7rem !important;
  height: 2.7rem !important;
}

/* ---- Bottom Bar (copyright + country selector) ---- */
.footer__content-bottom {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0;
  padding: 2rem 0 0 !important;
}

.footer__copyright {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.footer__copyright .copyright__content {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.4rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Hide "Powered by Shopify" ---- */
/* Multiple selectors for browser compatibility (`:has()` not in all browsers) */
.footer .powered-links,
.footer small.copyright__content:has(a[href*="shopify.com"]) {
  display: none !important;
}
/* Fallback: hide the second small.copyright__content (which is always the Shopify credit) */
.footer__copyright small.copyright__content + small.copyright__content {
  display: none !important;
}

/* ---- Country Selector in Footer ---- */
.footer .localization-form__select {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
}

/* ---- Footer: payment icons in bottom bar (hidden by default, kept as fallback) ---- */
.footer .list-payment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.footer .list-payment .icon--full-color {
  height: 2.4rem;
  width: auto;
  border-radius: 3px;
  opacity: 0.9;
}

/* ---- Footer Mobile ---- */
@media screen and (max-width: 749px) {
  .footer__blocks-wrapper {
    gap: 2.4rem !important;
  }
  .footer .footer-block__heading {
    font-size: 1.4rem !important;
  }
  .footer .footer-block__details-content a,
  .footer .list-menu__item {
    font-size: 1.4rem !important;
  }
  .footer-block--payment-column .footer-block__payment-list .icon--full-color {
    height: 2.2rem;
  }
}

/* --- Mobile Responsive Enhancements --- */

/* Prevent horizontal overflow on mobile.
   IMPORTANT: overflow-x:clip (not hidden!) — hidden creates a scroll container
   which breaks position:sticky on descendant elements (the header).
   clip prevents overflow without creating a new scroll context. */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* === TABLET (max 989px) === */
@media screen and (max-width: 989px) {
  /* Featured collection header — stacks on tablet */
  .collection__title.title-wrapper,
  .collection .title-wrapper {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  /* Testimonials: layout stacks, left-col goes row */
  .testimonials__layout {
    flex-direction: column;
    gap: 3rem;
  }
  .testimonials__left-col {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: unset;
    max-width: unset;
    width: 100%;
    gap: 2rem;
  }
  .testimonials__heading {
    font-size: 3.2rem;
  }
  .testimonials__nav {
    align-self: center;
  }
}

/* === MOBILE (max 749px) === */
@media screen and (max-width: 749px) {
  /* --- Global --- */
  .page-width {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }

  /* --- Hero Banner --- */
  .banner--adapt,
  .banner--large:not(.banner--adapt) {
    min-height: 65vh !important;
  }
  .banner__content.banner__content--bottom-left {
    padding-bottom: 3.2rem !important; /* override desktop 10rem */
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
  .banner__heading {
    font-size: 2.8rem;
    line-height: 1.12;
    max-width: 100%;
  }
  .banner__text p {
    font-size: 1.5rem;
    max-width: 100%;
  }

  /* --- Product Cards --- */
  .card__heading {
    font-size: 2rem;
  }
  .card__information .price {
    font-size: 1.6rem;
  }
  .product-card__tagline {
    font-size: 1.2rem;
    top: 1.6rem;
    left: 2rem;
  }
  .card__badge .badge {
    font-size: 1rem !important;
    padding: 0.3rem 0.9rem !important;
  }

  /* --- Featured Collection --- */
  .collection__title.title-wrapper,
  .collection .title-wrapper {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .collection .title-wrapper h2 {
    font-size: 2.6rem;
  }
  .collection .collection__description {
    font-size: 1.3rem;
  }

  /* --- Founder Quote --- */
  .founder-quote {
    padding: 4.5rem 0;
  }
  .founder-quote__text {
    font-size: 2.2rem !important;
    line-height: 1.3;
  }
  .founder-quote__attribution {
    font-size: 1.15rem;
    margin-top: 2.4rem;
  }

  /* --- Two Column Images --- */
  .two-col-images {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  /* Do NOT set aspect-ratio on the item — the item is a flex column containing
     image + text overlay. aspect-ratio would fix the grid row height and cause
     the text block to overflow without pushing the next section down → overlap. */
  .two-col-images__item {
    height: auto !important;
  }
  .two-col-images__heading {
    font-size: 2rem;
  }
  .two-col-images__description {
    font-size: 1.35rem;
  }

  /* --- Testimonials --- */
  .testimonials {
    padding: 4rem 0;
  }
  .testimonials__left-col {
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
  }
  .testimonials__heading {
    font-size: 3rem;
    max-width: 22rem;
  }
  .testimonials__nav {
    align-self: flex-start;
  }
  .testimonial-card {
    flex: 0 0 calc(100vw - 3.2rem);
    padding: 2.8rem 2.4rem;
  }
  .testimonials__layout {
    flex-direction: column;
    gap: 2.4rem;
  }

  /* --- Instagram Feed --- (mobile horizontal scroll defined in section block + final mobile block) */
  .instagram-feed__header {
    padding-top: 3.5rem;
    padding-bottom: 1.8rem;
  }
  .instagram-feed__heading {
    font-size: 2.6rem;
  }
  .instagram-feed {
    padding-bottom: 3.5rem;
  }

  /* --- Image with Text (Unsere Welt) --- */
  .image-with-text__text-item h2,
  .image-with-text__text-item .image-with-text__heading {
    font-size: 2.6rem;
  }
  .image-with-text__text-item p {
    font-size: 1.45rem;
  }

  /* --- Product Page (Mobile) --- */
  .product__title h1,
  .product__title .h1 {
    font-size: 2.6rem;
  }
  .product-subtitle {
    font-size: 1.5rem !important;
    margin-top: 1rem !important;
  }
  .product__description p,
  .product__text p {
    font-size: 1.45rem;
  }
  .product__info-container .price .money {
    font-size: 1.9rem;
  }
  .product-grasse-badge {
    padding: 0.8rem 1.4rem !important;
  }
  .product-grasse-badge span {
    font-size: 1.25rem !important;
    white-space: normal !important;
  }
  .product-benefits-list {
    gap: 1rem !important;
  }
  .product-benefits-list__item {
    font-size: 1.4rem !important;
  }
  .product-form__submit {
    font-size: 1.6rem !important;
    min-height: 6rem !important;
  }
  .product .accordion__title h3 {
    font-size: 1.6rem;
  }
  .product-trust-bar {
    font-size: 1.1rem !important;
    gap: 0.3rem 0.6rem !important;
  }
  .product-payment-icons {
    gap: 1.4rem !important;
  }
  .product-payment-icons .icon--full-color {
    height: 2.4rem !important;
  }
  .multicolumn-card__info .card__heading {
    font-size: 2rem;
  }

  /* --- Collapsible / FAQ --- */
  .collapsible-content__heading,
  .collapsible-content .collapsible-content__heading {
    font-size: 2.8rem;
  }
  .collapsible-content .accordion__title h3 {
    font-size: 1.5rem;
  }

  /* --- Multicolumn --- */
  .multicolumn .title-wrapper h2 {
    font-size: 2.6rem;
  }

  /* --- Footer (mobile handled in Figma-matched footer block above) --- */

  /* --- Collection page --- */
  .collection-hero__title,
  .main-collection-banner h1 {
    font-size: 3.2rem;
  }
  .main-collection-banner .collection-hero__description p,
  .collection-hero__description p {
    font-size: 1.5rem;
  }
}

/* (Duplicate PDP base rules removed — handled by Figma-matched PDP block below) */

/* Product media gallery */
.product__media-list .product__media-item {
  border-radius: 0;
}

/* Product accordion / collapsible */
.product .accordion__title h3,
.collapsible-content .accordion__title h3 {
  font-family: 'Marcellus', serif;
  font-size: 1.8rem;
  font-weight: 400;
}

.product .accordion .rte p,
.collapsible-content .accordion .rte p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.5rem;
  color: #676767;
  line-height: 1.7;
}

/* More breathing room inside the open accordion panel */
.accordion .accordion__content {
  padding-top: 1.2rem !important;
  padding-bottom: 3.2rem !important;
}

/* --- Collection Page --- */
.collection-hero__title {
  font-family: 'Marcellus', serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collection-hero__description p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.6rem;
  color: inherit;
}

/* Filter/sort bar */
.facets__heading,
.facet-filters__label {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Utility --- */
.text-white { color: #FFFFFF; }
.bg-black { background-color: #000000; }
.bg-dark { background-color: #171717; }

/* ============================================
   MOBILE MENU — ensure drawer renders above everything
   ============================================ */

/* Make the menu drawer a proper overlay — z-index and position fixes */
#menu-drawer {
  z-index: 100 !important;
}

/* Overlay behind the menu */
.menu-drawer__overlay {
  z-index: 99 !important;
}

/* Ensure the menu details container doesn't clip the drawer */
#Details-menu-drawer-container {
  overflow: visible !important;
}

/* On non-transparent pages, make sure hamburger icon is always dark */
.header__icon--menu svg {
  fill: currentColor;
  color: currentColor;
}

/* No overflow: hidden on header__icons — the hamburger is in header-drawer, not here,
   and overflow: hidden would clip the menu drawer */

/* ---- Menu drawer styling — consistent across all pages ---- */
/* Drawer background and base */
.menu-drawer {
  background-color: #FFFFFF !important;
}

/* Menu items: Marcellus serif, clean luxury styling */
.menu-drawer__menu-item {
  font-family: 'Marcellus', serif !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: #171717 !important;
  padding: 1.4rem 2.4rem !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus {
  background-color: #F5F5F5 !important;
  color: #171717 !important;
}

/* Submenu back button */
.menu-drawer__close-button {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  color: #676767 !important;
  padding: 1.4rem 2.4rem !important;
}

/* Utility links at bottom (account, localization) */
.menu-drawer__utility-links {
  background-color: #F5F5F5 !important;
  padding: 2rem 2.4rem !important;
}

/* "Einloggen" link: icon + label spacing.
   The default theme only spaces the icon when wrapped in <account-icon>
   (enable_customer_avatar = true). With the avatar disabled, the icon
   renders as a bare <span class="svg-wrapper"> with no size or gap, so
   it sits glued to the text. Force a consistent size and gap here. */
.menu-drawer__account {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  color: #1a1a1a !important;
}
.menu-drawer__account > .svg-wrapper,
.menu-drawer__account > .svg-wrapper svg {
  width: 1.8rem !important;
  height: 1.8rem !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* On homepage transparent header: ensure drawer still opens below header correctly.
   The header is position:absolute on homepage — drawer needs stable positioning. */
.header-wrapper--transparent .menu-drawer {
  background-color: #FFFFFF !important;
}

/* Mobile (full-width drawer) */
@media screen and (max-width: 749px) {
  .menu-drawer {
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    transform: translateX(-100%);
    padding-top: 6rem !important;
    overflow-y: auto !important;
  }
  .js details[open].menu-opening > .menu-drawer {
    transform: translateX(0) !important;
  }
  /* Lock body scroll when drawer is open — Dawn adds overflow-hidden-mobile */
  .overflow-hidden-mobile {
    overflow: hidden !important;
  }
  /* Show close (X) icon inside summary when drawer is open */
  #Details-menu-drawer-container[open] > summary .icon-close {
    display: block !important;
  }
  #Details-menu-drawer-container[open] > summary .icon-hamburger {
    display: none !important;
  }
  /* Hide Dawn's backdrop overlay — drawer is fullscreen, no overlay needed */
  #Details-menu-drawer-container > summary::before {
    display: none !important;
  }
  /* Hide announcement bar when menu drawer is open so it doesn't cover the X button */
  .menu-opening ~ .shopify-section-group-header-group .announcement-bar-section,
  .js details[open].menu-opening ~ .announcement-bar-section {
    display: none !important;
  }
  /* Also target via body class that Dawn adds */
  .overflow-hidden-mobile .announcement-bar-section {
    z-index: 0 !important;
  }
  /* Make the summary/X button fixed top-right when drawer is open */
  #Details-menu-drawer-container[open] > summary {
    position: fixed !important;
    top: 1.6rem !important;
    right: 1.6rem !important;
    left: auto !important;
    z-index: 999999 !important;
  }
  .menu-drawer__menu-item {
    font-size: 1.8rem !important;
    padding: 1.6rem 2rem !important;
  }
}

/* ============================================
   PRODUCT PAGE — Figma-matched buybox
   ============================================ */

/* Info container */
.product__info-container {
  padding-top: 0.8rem;
}

/* Hide Dawn's "Quantity" label — not in Figma design */
.product-form__quantity .form__label,
.product-form__quantity label.form__label {
  display: none !important;
}

/* ---- Grasse Badge (full-width gradient pill, above title) ---- */
.product-grasse-badge {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(to right, #f0f0f0, #ffffff) !important;
  border-radius: 45px !important;
  padding: 1rem 2rem !important;
  margin-bottom: 0 !important;
}
.product-grasse-badge span {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* ---- Product Title ---- */
.product__info-container .product__title {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}
.product__info-container .product__title h1,
.product__info-container .product__title a {
  font-family: 'Marcellus', serif !important;
  font-size: 4rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: #1a1a1a !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

/* ---- Subtitle (tagline below title, above benefits) ---- */
.product-subtitle {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  line-height: 1.6 !important;
  margin: 1.6rem 0 0 !important;
}

/* ---- Perfumer name (from metafield custom.perfumer) ---- */
/* Specs from Figma: Albert Sans 400, 16px, line-height 25.6px (1.6), no tracking */
.product-perfumer {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: #4a4a4a !important;
  margin: 0.4rem 0 2.4rem !important;
}

/* ---- Description (short tagline below the perfumer line) ---- */
/* Specs from Figma: Albert Sans 400 Regular, 18px, line-height 25.6px (1.422), no tracking */
.product__info-container .product__description {
  margin-top: 0 !important;
  margin-bottom: 1.6rem !important;
}
.product__info-container .product__description p,
.product__description.rte p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #1a1a1a !important;
  line-height: 1.422 !important;
  letter-spacing: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.product__info-container .product__description p + p,
.product__description.rte p + p {
  margin-top: 1.2rem !important;
}

/* ---- Benefits Checklist ---- */
.product-benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.4rem 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
}
.product-benefits-list__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  line-height: 1.6 !important;
}
.product-benefits-list__icon {
  flex-shrink: 0 !important;
  width: 1.3rem !important;
  height: 1.3rem !important;
  margin-top: 0.3rem !important;
}

/* ---- Judge.me Rating Badge ---- */
.product__info-container .shopify-block.shopify-app-block {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}

/* ---- Price ---- */
.product__info-container .price {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}
.product__info-container .price--large .price__regular .money,
.product__info-container .price--large .price__sale .money,
.product__info-container .price .money {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.01em !important;
}
/* Tax line — small, muted */
.product__tax,
.product__info-container .product__tax {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  color: rgba(26, 26, 26, 0.6) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

/* ---- Quantity Selector ---- */
/* inline-flex so the stock indicator (next sibling in DOM) sits beside it */
.product-form__input.product-form__quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 1.6rem !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  width: 16rem !important;
  max-width: 16rem !important;
}
/* ---- Stock Indicator — beside quantity selector ---- */
/* custom_liquid has no wrapper → renders as direct child of product__info-container.
   inline-flex + same top margin makes it sit on the same visual row as quantity. */
.product-stock-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  margin: 1.6rem 0 0 2rem !important; /* same top margin as quantity, 2rem gap left */
  vertical-align: middle !important;
}
/* Mobile: stack back to column */
@media screen and (max-width: 749px) {
  .product-form__input.product-form__quantity {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .product-stock-indicator {
    display: flex !important;
    margin: 1.2rem 0 0 !important; /* reset left margin */
  }
}
.quantity {
  border-radius: 60px !important;
  border: 1px solid #1a1a1a !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  height: 5rem !important;
  min-width: 15rem !important;
  --inputs-border-width: 0px;
}
.quantity__button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.quantity__input {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.6rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.quantity__button:focus,
.quantity__input:focus,
.quantity__button:focus-visible,
.quantity__input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}
.product-stock-indicator__dot {
  display: inline-block !important;
  width: 0.7rem !important;
  height: 0.7rem !important;
  border-radius: 50% !important;
  background-color: #6f746b !important; /* Figma: olive/green availability dot */
  flex-shrink: 0 !important;
}

/* ---- Buy Button ---- */
.product-form__buttons {
  margin-top: 2rem !important;
}
/* Buy button — Figma: full-width pill, ~60px tall, restrained typography */
.product-form__submit {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  min-height: 6rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}
/* Kill Dawn's ::after box-shadow rectangle outline */
.product-form__submit::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}
.product-form__submit:hover {
  background-color: #2a2a2a !important;
}

/* ---- Trust Bar + Payment Icons (Figma: tight stack under buy button) ---- */
.product-trust-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 1.2rem !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #1a1a1a !important;
  text-align: center !important;
  padding: 0 !important;
  border-top: 0 !important;
  margin-top: 2.4rem !important;
}
.product-trust-dot {
  color: rgba(26, 26, 26, 0.4) !important;
  font-size: 1.4rem !important;
}
.product-payment-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  margin-top: 1.8rem !important;
  padding: 0 !important;
}
.product-payment-icons .payment-icon-flat {
  height: 2.2rem;
  width: auto;
  display: block;
}
.product-payment-icons .payment-icon-flat--master {
  height: 2.6rem;
}

cart-drawer .cart__ctas {
  flex-direction: column;
  gap: 0;
}

.cart-drawer__payment-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.8rem;
  padding-top: 1.4rem;
  width: 100%;
}
.cart-drawer__payment-icons .payment-icon-flat {
  height: 2rem;
  width: auto;
  display: block;
}
.cart-drawer__payment-icons .payment-icon-flat--master {
  height: 2.4rem;
}

.payment-badge-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.2rem !important;
  padding: 0 0.8rem !important;
  border: 0.5px solid #d4d4d4 !important;
  border-radius: 4px !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  background: #fff !important;
}

/* ---- Product Media — gray background + square aspect ratio ---- */
/*
 * CSS aspect-ratio fails here: absolutely-positioned img creates a circular
 * height reference — img height:100% → container height:auto → img uses
 * intrinsic height 771px → container grows to 771px.
 *
 * Fix: padding-bottom:100% on .product__media-item (% always = containing
 * block WIDTH) → guaranteed square. Intermediate elements fill it absolutely.
 */
.product__media-wrapper .product__media-item {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important;
  overflow: hidden !important;
}
.product__media-wrapper .product-media-container,
.product__media-wrapper .product__modal-opener {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.product__media-wrapper .media {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;           /* kill Dawn's padding-top ratio trick */
  background-color: #f0f0f0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  aspect-ratio: unset !important;
}
.product__media-wrapper .media > img,
.product__media-wrapper .media > deferred-media img,
.product__media-wrapper .media .image-magnify-lightbox {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* ---- Thumbnail strip — square, small, directly below main image ---- */
/* gallery_layout: "thumbnail_slider" puts the strip below the main image.
   We enforce square 72px thumbnails with object-fit:cover. */
.thumbnail-slider {
  margin-top: 0.8rem !important; /* small gap between main image and strip */
}

.thumbnail-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.8rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.thumbnail-list__item {
  width: 72px !important;
  flex: 0 0 72px !important;
  max-width: 72px !important;
}

/* Thumbnail button: aggressive reset to kill any browser/Dawn borders.
   background matches the product image bg so side gaps are invisible. */
.thumbnail-list__item .thumbnail {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #f0f0f0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

/* Kill any Dawn .media padding-bottom ratio trick inside thumbnails */
.thumbnail-list__item .thumbnail .media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

/* The image inside each thumbnail — use absolute + inset:-1px so the
   image bleeds 1px past the overflow:hidden container on every side,
   hiding any sub-pixel dark-edge artefacts from the source image. */
.thumbnail-list__item .thumbnail img {
  position: absolute !important;
  inset: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
}

/* Active/selected thumbnail — no visible border (Figma: no outline) */
.thumbnail-list__item .thumbnail[aria-current="true"],
.thumbnail-list__item .thumbnail.global-media-settings--active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- 50 / 50 media–info split ---- */
@media screen and (min-width: 750px) {
  .product--desktop-columns .product__media-wrapper,
  .product .product__media-wrapper {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .product--desktop-columns .product__info-wrapper,
  .product .product__info-wrapper {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ---- Key Notes (fragrance pyramid — Figma-matched) ---- */
/* PDP: position the standalone key notes section to align with the right
   info column (50% offset), matching the Figma layout where key notes
   sit below the buybox in the right column. */
.product-key-notes-section {
  padding: 0 0 3rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Desktop: use CSS grid to place key notes in the right column (2nd of 2),
   matching the product section's 50/50 media|info split */
@media screen and (min-width: 750px) {
  .product-key-notes-section .page-width {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .product-key-notes-section .product-key-notes {
    grid-column: 2 !important;
    max-width: none !important;
    padding-left: 1.5rem !important;
  }
}
/* Key notes container — compact, no stretch */
.product-key-notes {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
/* When inside the product info wrapper (PDP inline block), add top margin */
.product__info-container .product-key-notes {
  margin-top: 2.4rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(26, 26, 26, 0.1) !important;
}
/* "Key Notes" section title — Marcellus 16px */
/* Section title centered */
.product-key-notes__title {
  font-family: 'Marcellus', serif !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1a1a1a !important;
  line-height: 5rem !important;
  margin: 0 0 1.6rem !important;
  padding: 0 !important;
  text-align: center !important;
}
/* 3-column grid with equal cards */
.product-key-notes__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 1.2rem !important;
}
/* Each card: centered content, border, rounded corners, padding */
.product-key-notes__col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.8rem !important;
  flex: 1 !important;
  width: auto !important;
  border: 1px solid rgba(26, 26, 26, 0.1) !important;
  border-radius: 0 !important;
  padding: 2rem 1.6rem !important;
  background: #ffffff !important;
}
/* Image — portrait ratio, centered */
.product-key-notes__img-wrap {
  width: 14rem !important;
  height: 18rem !important;
  overflow: hidden !important;
  background-color: transparent !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}
.product-key-notes__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}
/* Label: above the image (order: -1) */
.product-key-notes__label {
  font-family: 'Marcellus', serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  order: -1 !important;
}
/* Scent text */
.product-key-notes__notes {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}

/* Key Notes mobile */
@media screen and (max-width: 749px) {
  .product-key-notes-section {
    padding: 2rem 0 3rem !important;
  }
  .product-key-notes {
    max-width: 100%;
  }
  .product-key-notes__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.8rem !important;
  }
  .product-key-notes__col {
    width: auto !important;
    flex: auto !important;
    padding: 1.4rem 1rem !important;
  }
  .product-key-notes__img-wrap {
    width: 10rem !important;
    height: 13rem !important;
  }
  .product-key-notes__label {
    font-size: 1.4rem !important;
  }
  .product-key-notes__notes {
    font-size: 1.1rem !important;
  }
}

/* ---- Mobile (≤ 749px) ---- */
@media screen and (max-width: 749px) {
  .product-grasse-badge span {
    font-size: 1.25rem !important;
    white-space: normal !important;
  }
  .product__info-container .product__title h1 {
    font-size: 3.2rem !important;
  }

  .product-form__submit {
    font-size: 1.6rem !important;
    min-height: 6rem !important;
  }
  .product-trust-bar {
    font-size: 1.2rem !important;
  }

  /* Section headings below main-product: reduce large desktop padding on mobile */
  .two-col-images-section {
    margin-top: 3.2rem;
  }
  .two-col-images-section__heading {
    font-size: 2.6rem;
    padding: 2.4rem 0 2rem;
  }
  .multicolumn .title-wrapper--self-padded-tablet,
  .multicolumn .title-wrapper {
    padding-top: 2.4rem !important;
  }
}

.shopify-section.section > div {
  transition: all 0.4s ease-in-out;
}

/* Section headings below product info */
.two-col-images-section {
  margin-top: 0rem;
}

.founder-quote .page-width {
  padding-bottom: 6rem;
}

/* Handschrift heading */
.two-col-images-section__heading {
  font-family: 'Marcellus', serif;
  font-size: 3.4rem;
  letter-spacing: 0.02em;
  padding: 6rem 0 3.2rem;
}

/* Multicolumn section on product page */
.multicolumn-list {
  margin-top: 2rem;
}

.multicolumn-card__image-wrapper {
  margin-bottom: 1.6rem;
}

/* ============================================
   LARGE SCREEN SAFEGUARDS (> 1440px)
   ============================================ */

@media screen and (min-width: 1440px) {
  /* Prevent announcement bar messages from extending too wide */
  .announcement-bar__message {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .banner__heading {
    max-width: 75rem;
  }
}

/* ============================================
   COLLECTION PAGE — product grid improvements
   ============================================ */

/* Collection grid — ensure consistent card heights */
.collection .card-wrapper {
  height: 100%;
}

/* Product grid on collection page */
.product-grid.grid {
  row-gap: 4.8rem;
}

@media screen and (max-width: 749px) {
  .product-grid.grid {
    row-gap: 3.2rem;
  }
}

/* ============================================
   GLOBAL HEADER — ensure z-index hierarchy
   ============================================ */

/* Header group: position:relative creates the stacking context for
   the absolutely-positioned transparent header-wrapper.
   .section-header must NOT get position:relative — Dawn's base.css
   applies .shopify-section-header-sticky { position:sticky; top:0 }
   to it, and overriding with position:relative breaks that sticky
   behavior, causing the white-space flash on scroll. */
.shopify-section-group-header-group {
  z-index: 1000;
}

/* Section header: always sticky on ALL pages.
   z-index needs !important — Dawn's base.css has a more specific rule
   (.section-header.shopify-section-group-header-group { z-index: 3 })
   that would otherwise win and put the header below other z:3 elements
   (e.g. the mobile mega menu drawer would sit at the same level as
   page content with z-index, causing overlap bugs on PDPs). */
.section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgb(var(--color-background));
}

/* Homepage transparent state and after-scroll white state live in the
   consolidated .scrolled-past-header block at the end of this file.
   We deliberately do NOT key off .shopify-section-header-sticky here,
   because sticky_header_type:"always" applies that class on page load. */

/* Defensive: header must always span the full viewport width on every breakpoint
   (no max-width/margin/border-radius leak from third-party rules or browser
   defaults on the <sticky-header> custom element). */
.section-header,
.section-header > sticky-header,
.section-header > .header-wrapper,
.header-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
}

/* Announcement bar section: always above the header content */
.announcement-bar-section,
.shopify-section-group-header-group:first-child {
  position: relative;
  z-index: 1001;
}

/* (Duplicate footer CSS removed — now handled by the "FOOTER — Figma-matched" block above) */

/* ============================================
   PDP — STIMMUNGSBILD (Lifestyle image strip)
   Figma: atmospheric image within page-width container, no text overlay
   ============================================ */
[id*="stimmungsbild"] .banner {
  margin: 0 auto !important;
  max-width: var(--page-width, 1200px) !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  min-height: 24rem !important;
  height: 24rem !important;
  overflow: hidden;
}
[id*="stimmungsbild"] .banner__content {
  display: none !important;
}

/* ============================================
   PDP — PARFÜMEURIN (metafield-driven section)
   Layout: small image (28rem) left + flexible text right, vertically centered
   ============================================ */
.product-perfumeurin {
  padding: 6rem 0;
}
.product-perfumeurin .page-width {
  max-width: 100rem;
}
.product-perfumeurin__inner {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.product-perfumeurin__media {
  flex: 0 0 28rem;
  max-width: 28rem;
  overflow: hidden;
}
.product-perfumeurin__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.product-perfumeurin__content {
  flex: 1;
  min-width: 0;
}
.product-perfumeurin__heading {
  font-family: 'Marcellus', serif;
  font-size: 3.2rem;
  font-style: italic;
  line-height: 1.25;
  margin: 0 0 2rem;
}
.product-perfumeurin__text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.55rem;
  line-height: 1.7;
  color: #4a4a4a;
}
.product-perfumeurin__text > * + * {
  margin-top: 1.4rem;
}
@media screen and (max-width: 749px) {
  .product-perfumeurin__inner {
    flex-direction: column;
    gap: 2rem;
  }
  .product-perfumeurin__media {
    flex: 0 0 auto;
    max-width: 22rem;
    margin: 0 auto;
  }
  .product-perfumeurin__heading {
    font-size: 2.4rem;
  }
}

/* ============================================
   PDP — HANDSCHRIFT GRID (1 large left + 2 stacked right)
   Figma: asymmetric image grid with text overlays on images
   ============================================ */
.handschrift-section {
  padding: 6rem 0;
}
.handschrift-section__heading {
  font-family: 'Marcellus', serif;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 3.2rem;
  color: #171717;
}
/* Handschrift grid — three-cell layout: left big + middle + right big.
   Each cell spans the full grid height with one image + heading + desc overlay. */
/* 2-column grid: left image spans 2 rows, right has 2 stacked cells */
.handschrift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  height: 60rem;
}
.handschrift-grid__cell,
.handschrift-grid > div {
  position: relative !important;
  overflow: hidden !important;
}
.handschrift-grid__cell--left {
  grid-column: 1;
  grid-row: 1 / -1;
}
.handschrift-grid__cell--middle {
  grid-column: 2;
  grid-row: 1;
}
.handschrift-grid__cell--right {
  grid-column: 2;
  grid-row: 2;
}
/* Cell 3 (right/bottom): light image → dark text, constrained width */
.handschrift-grid__cell--right .handschrift-grid__title {
  color: #171717;
  right: 50%;
}
.handschrift-grid__cell--right .handschrift-grid__overlay {
  background: none;
  right: 50%;
}
.handschrift-grid__cell--right .handschrift-grid__desc {
  color: #2a2a2a;
}
.handschrift-grid__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  transition: transform 0.6s cubic-bezier(0.25, 0, 0.15, 1) !important;
}
.handschrift-grid__cell:hover .handschrift-grid__img {
  transform: scale(1.03) !important;
}

/* Same hover zoom on multicolumn card images */
.multicolumn-card__image-wrapper .media img {
  transition: transform 0.6s cubic-bezier(0.25, 0, 0.15, 1) !important;
}
.multicolumn-card:hover .media img {
  transform: scale(1.03) !important;
}
/* Title — positioned at top-left of each cell (Figma layout) */
.handschrift-grid__title {
  position: absolute;
  top: 2.4rem;
  left: 2.8rem;
  right: 2.8rem;
  z-index: 2;
  font-family: 'Marcellus', serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: #FFFFFF;
}
/* Description — bottom overlay with strong gradient for readability */
.handschrift-grid__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.4rem 2.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index: 2;
}
.handschrift-grid__desc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
/* Tablet (750–989): keep 3-column layout, just shorter and with tighter type. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .handschrift-section {
    padding: 5rem 0;
  }
  .handschrift-section__heading {
    font-size: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .handschrift-grid {
    height: 48rem;
    gap: 0.5rem;
  }
  .handschrift-grid__title {
    font-size: 2rem;
    top: 2rem;
    left: 2rem;
    right: 2rem;
  }
  .handschrift-grid__overlay {
    padding: 2rem;
  }
  .handschrift-grid__desc {
    font-size: 1.3rem;
    max-width: 28rem;
  }
}

/* Mobile (<750): alle drei Zellen untereinander.
   Obere Zelle groß/portrait, die zwei unteren als 16:9 Karten. */
@media screen and (max-width: 749px) {
  .handschrift-section {
    padding: 3rem 0;
  }

  .handschrift-section__heading {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
  }

  .handschrift-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 0.8rem;
  }

  .handschrift-grid__cell--left,
  .handschrift-grid__cell--middle,
  .handschrift-grid__cell--right {
    grid-column: 1;
    grid-row: auto;
  }

  .handschrift-grid__cell--left {
    aspect-ratio: 4 / 5;
  }

  .handschrift-grid__cell--middle,
  .handschrift-grid__cell--right {
    aspect-ratio: 16 / 9;
  }

  .handschrift-grid__title {
    font-size: 1.8rem;
    top: 1.6rem;
    left: 1.6rem;
    right: 1.6rem;
  }

  .handschrift-grid__overlay {
    left: 0;
    right: 0;
    padding: 1.4rem 1.6rem;
  }

  .handschrift-grid__desc {
    font-size: 1.25rem;
    line-height: 1.45;
    max-width: none;
  }

  .handschrift-grid__desc p {
    margin: 0;
  }

  .handschrift-grid__cell--right .handschrift-grid__title {
    right: 1.6rem;
  }

  .handschrift-grid__cell--right .handschrift-grid__overlay {
    right: 0;
  }

  .handschrift-grid__cell--right .handschrift-grid__title,
.handschrift-grid__cell--right .handschrift-grid__overlay {
  right: 35%;
}
}
}

/* ============================================
   PDP — FAQ TWO-COLUMN LAYOUT
   Figma: "FAQ" heading left, accordion items right
   ============================================ */
/* The wrapper inside collapsible-content — Figma: heading left-aligned with page gutter,
   accordion flush to the right container edge. */
.collapsible-content-wrapper-narrow {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: start !important;
  max-width: var(--page-width, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 5rem !important;
}
/* Heading stays in left column */
.collapsible-content__header {
  grid-column: 1 !important;
}
.collapsible-content .collapsible-content__heading {
  font-family: 'Marcellus', serif !important;
  font-size: 4rem !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Accordion in right column — let Dawn's flex/grid handle internal layout */
.collapsible-content-wrapper-narrow > .grid.collapsible-content__grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Mobile: stack heading above accordion — repeat wrapper selector for specificity */
@media screen and (max-width: 749px) {
  .collapsible-content-wrapper-narrow,
  .collapsible-content-wrapper-narrow.collapsible-content-wrapper-narrow {
    display: block !important;
    padding: 0 1.6rem !important;
  }
  .collapsible-content__header {
    margin-bottom: 2rem !important;
  }
  .collapsible-content-wrapper-narrow > .grid.collapsible-content__grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  .collapsible-content .collapsible-content__heading {
    font-size: 2.8rem !important;
  }
}

/* PDP — related products heading (Figma: Marcellus 40px) */
.related-products .title-wrapper h2 {
  font-family: 'Marcellus', serif;
  font-size: 4rem;
  font-weight: 400;
}

/* Hide empty related-products section (no recommendations yet) to avoid dead whitespace */
.related-products:not(:has(.product-grid li)) {
  display: none !important;
}
/* Fallback for browsers without :has() */
.related-products .product-grid:empty {
  display: none;
}

/* PDP — collapsible FAQ accordion border */
.product .accordion {
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.product .accordion:last-child {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

/* ============================================
   COLLECTION HERO — FULL-BLEED BACKGROUND IMAGE
   Figma: node 18:37 — 378px tall, image fills
   entire container, text overlaid bottom-left
   ============================================ */

/* Outer wrapper: fixed height, clip overflow */
.collection-hero--with-image {
  position: relative !important;
  height: 37.8rem !important;
  min-height: 37.8rem !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Image container: absolute full-bleed background */
.collection-hero--with-image .collection-hero__image-container {
  position: absolute !important;
  inset: 0 !important;
  flex: none !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 0 !important;
  min-height: 0 !important;
}

.collection-hero--with-image .collection-hero__image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Subtle dark scrim for text legibility */
.collection-hero--with-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Inner wrapper: text sits at bottom-left.
   IMPORTANT: position MUST be static so the absolutely-positioned image container
   has the hero (not the inner) as its containing block → edge-to-edge image.
   Without z-index the inner doesn't create a stacking context, so the
   ::after gradient, image container and text wrapper all resolve z-indexes
   in the same parent context:
     image container  z-index: 0
     ::after gradient z-index: 1
     text wrapper     z-index: 3   */
.collection-hero--with-image .collection-hero__inner {
  position: static !important;
  z-index: auto !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding-top: 0 !important;
  padding-bottom: 3.6rem !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
  /* Let page-width class handle horizontal padding so text aligns with content below */
}

.collection-hero--with-image .collection-hero__text-wrapper {
  position: relative !important;
  z-index: 3 !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* Title: Marcellus 54px white — Figma node 18:122 */
.collection-hero--with-image .collection-hero__title {
  font-family: 'Marcellus', serif !important;
  font-size: 5.4rem !important;
  line-height: 1.16 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Description: Albert Sans 20px white — Figma node 80:147 */
.collection-hero--with-image .collection-hero__description {
  color: #ffffff !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
  margin: 0.6rem 0 0 !important;
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .collection-hero--with-image {
    height: 28rem !important;
    min-height: 28rem !important;
  }
  .collection-hero--with-image .collection-hero__title {
    font-size: 3.8rem !important;
  }
  .collection-hero--with-image .collection-hero__description {
    font-size: 1.6rem !important;
  }
}

/* ============================================
   HERO VIDEO BACKGROUND
   ============================================ */

/* Fix: ambient-mode hero image is position: fixed (covers full viewport).
   This intercepts ALL pointer events including the mobile hamburger menu.
   pointer-events: none restores click-through while clip-path keeps the visual crop. */
.banner__media.animate--zoom-in > img,
.banner__media.animate--zoom-in > video,
.banner__media.animate--zoom-in > svg {
  pointer-events: none !important;
}

/* Video container: same layout as image banner */
.banner__media--video {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden;
}

/* The <video> element fills the banner like a background image */
.banner__video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  display: block;
}

/* Ensure poster image also covers before video loads */
.banner__video[poster] {
  background-size: cover;
  background-position: center;
}

/* ============================================
   SCROLL-TRIGGER ANIMATION — GLOBAL OVERRIDE
   ============================================ */

/* Dawn's scroll-trigger system sets opacity: 0.01 + translateY(2rem) on elements
   with .animate--fade-in / .animate--slide-in, then relies on an IntersectionObserver
   to add the "in-viewport" state. If the observer fires too late, is blocked, or the
   element is already above the fold at load time, the element remains invisible.
   Reported: 7/16 scroll-trigger elements stuck at opacity 0.01 (footer, "Unsere Welt",
   newsletter, etc.).
   Fix: override animation and opacity so elements are always visible.
   Note: setting animation: none !important removes the keyframe that would otherwise
   re-apply opacity 0.01 (animation layer normally overrides author !important). */
.scroll-trigger.animate--fade-in,
.scroll-trigger.animate--slide-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================
   CA-REVEAL — Custom scroll-reveal animation
   Fade-in + subtle zoom for a premium feel.
   Independent of Dawn's scroll-trigger system.
   ============================================ */
.ca-reveal {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.8s cubic-bezier(0, 0, 0.3, 1) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0, 0, 0.3, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.ca-reveal--visible {
  opacity: 1;
  transform: scale(1);
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ca-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   PDP — BREADCRUMB (Figma node 23:1661)
   Figma: Outfit Regular 11.6px, #1a1a1a, arrows →
   ============================================ */
.product-breadcrumb {
  padding: 0 0 1.6rem;
}
.product-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.product-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.16rem;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0;
  line-height: 1.6;
}
.product-breadcrumb__link {
  color: #1a1a1a;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.product-breadcrumb__link:hover {
  opacity: 0.6;
}
.product-breadcrumb__sep {
  margin: 0 0.6rem;
  color: #1a1a1a;
  font-size: 1.16rem;
}
.product-breadcrumb__current {
  color: #1a1a1a;
}
@media screen and (max-width: 749px) {
  .product-breadcrumb {
    padding: 0 0 1.2rem;
  }
  .product-breadcrumb__item {
    font-size: 1.1rem;
  }
}

/* ============================================
   PDP — TAGLINE (top-left of main image, like collection card)
   ============================================ */
.product__media-wrapper {
  position: relative;
}
.pdp-tagline {
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
  /* z-index: 3 to sit above the gallery slider-buttons overlay (z:2).
     The mobile menu drawer (inside .section-header, which is now
     z-index: 1000 !important via the rule near line 2750) is in a
     much higher stacking context and still wins — so the tagline no
     longer bleeds through the open drawer. */
  z-index: 3;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1a1a;
  background: transparent;
  padding: 0.4rem 1rem;
  margin: 0;
  line-height: 1.4;
  pointer-events: none;
}
@media screen and (max-width: 749px) {
  .pdp-tagline {
    top: 1.4rem;
    left: 1.4rem;
    font-size: 1.2rem;
    padding: 0.3rem 0.8rem;
  }
}

/* ============================================
   PDP — MAIN IMAGE OVERLAY ARROWS (prev/next)
   ============================================ */
@media screen and (min-width: 750px) {
  /* Override hide rule from component-slider.css and section-main-product.css */
  .product__media-wrapper .slider-buttons {
    display: flex !important;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    pointer-events: none;
    z-index: 2;
  }
  .product__media-wrapper .slider-counter {
    display: none;
  }
  .product__media-wrapper .slider-buttons .slider-button {
    pointer-events: auto;
    width: 4.4rem;
    height: 4.4rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .product__media-wrapper .slider-buttons .slider-button:not([disabled]):hover {
    background: #fff;
    transform: scale(1.05);
  }
  .product__media-wrapper .slider-buttons .slider-button[disabled] {
    opacity: 0.5;
  }
  .product__media-wrapper .slider-buttons .slider-button .icon {
    height: 1rem;
    width: auto;
  }
  /* Make the gallery viewer container the positioning context */
  .product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) {
    position: relative;
    display: block;
  }
}

/* ============================================
   PDP — RELATED PRODUCTS (Figma: heading left, cards right)
   ============================================ */
/* Desktop: 2-column layout — heading left, product grid right */
@media screen and (min-width: 750px) {
  .related-products {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 3rem !important;
    align-items: start !important;
  }
  .related-products__heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }
  .related-products .product-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  /* Force 2-col grid for the cards within the right column.
     Override Dawn's grid--3-col-desktop max-width: calc(33.33% - …)
     which constrains cards to 1/3 width inside the sub-grid. */
  .related-products .product-grid.grid--3-col-desktop {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .related-products .product-grid .grid__item {
    max-width: 700px !important;
    width: 100% !important;
  }
}

/* Force 2-col on all breakpoints — override Dawn's grid--2-col / grid--3-col classes */
.related-products .product-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
}
.related-products .product-grid .grid__item {
  width: 100% !important;
  max-width: none !important;
}

/* Spacing below the related products section */
.related-products {
  padding-bottom: 6rem !important;
}

.related-products__heading {
  font-family: 'Marcellus', serif !important;
  font-size: 3.4rem !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  line-height: 1.2 !important;
  margin-bottom: 2rem !important;
}
@media screen and (max-width: 749px) {
  .related-products__heading {
    font-size: 2.6rem !important;
    margin-bottom: 2rem !important;
  }
}

/* ============================================
   SEO RICHTEXT SECTION
   Structured content for collection page SEO
   ============================================ */

.seo-richtext {
  padding: 6rem 0 4rem;
  border-top: none;
}

.seo-richtext__inner {
  max-width: var(--page-width, 1400px);
}

/* Body text: full width, no column truncation */
.seo-richtext__body {
  columns: unset !important;
  column-count: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

.seo-richtext__heading {
  font-family: 'Marcellus', serif !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  margin: 0 0 2.4rem !important;
}

.seo-richtext__intro {
  margin-bottom: 1.6rem;
}

.seo-richtext__intro p,
.seo-richtext__body p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #4a4a4a !important;
  margin: 0 0 1.4rem !important;
}

.seo-richtext__intro p:last-child,
.seo-richtext__body p:last-child {
  margin-bottom: 0 !important;
}

/* Sub-headings inside body (h2/h3 rendered by richtext) */
.seo-richtext__body h2,
.seo-richtext__body h3 {
  font-family: 'Marcellus', serif !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  margin: 2.4rem 0 1rem !important;
}

.seo-richtext__body h2 {
  font-size: 2.2rem !important;
  line-height: 1.3 !important;
}

.seo-richtext__body h3 {
  font-size: 1.8rem !important;
  line-height: 1.35 !important;
}

/* Bullet lists */
.seo-richtext__body ul,
.seo-richtext__intro ul {
  padding-left: 2rem !important;
  margin: 1rem 0 1.4rem !important;
}

.seo-richtext__body li,
.seo-richtext__intro li {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
  color: #4a4a4a !important;
  margin-bottom: 0.6rem !important;
}

.seo-richtext__body li strong,
.seo-richtext__intro li strong {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

/* "Mehr lesen" toggle */
.seo-richtext__details {
  border: none;
}

.seo-richtext__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1a1a1a;
  padding: 0.6rem 0;
  border: none;
  background: none;
  transition: color 0.2s ease;
}

.seo-richtext__toggle::-webkit-details-marker {
  display: none;
}

.seo-richtext__toggle:hover {
  color: #676767;
}

.seo-richtext__toggle-icon {
  transition: transform 0.2s ease;
}

.seo-richtext__details[open] .seo-richtext__toggle-icon {
  transform: rotate(180deg);
}

.seo-richtext__details[open] .seo-richtext__toggle-text {
  display: none;
}

.seo-richtext__details[open]::before {
  content: none;
}

.seo-richtext__body {
  padding-top: 1.6rem;
}

/* Two-column layout for wider screens */
@media screen and (min-width: 990px) {
  .seo-richtext__body {
    column-count: 2;
    column-gap: 4rem;
  }
  .seo-richtext__body h2,
  .seo-richtext__body h3 {
    column-span: all;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  .seo-richtext {
    padding: 4rem 0 3rem;
  }
  .seo-richtext__heading {
    font-size: 2.2rem !important;
  }
  .seo-richtext__intro p,
  .seo-richtext__body p {
    font-size: 1.4rem !important;
  }
  .seo-richtext__body li,
  .seo-richtext__intro li {
    font-size: 1.4rem !important;
  }
}

/* ============================================
   CART DRAWER
   ============================================ */
.drawer {
  z-index: 1100 !important;
}
.drawer__inner {
  border: none !important;
}
/* Price no-wrap */
.cart-item__totals .price,
.cart-item__totals .cart-item__price-wrapper,
.cart-item__totals .price--end {
  white-space: nowrap !important;
}

/* ============================================
   HOMEPAGE POLISH (Hero/Header/Spacing/Mobile)
   ============================================ */

/* Homepage header behavior — single source of truth:
   - At page top: transparent + white text/logo on hero
   - After scrolling past header: white sticky bar + dark text/logo

   Uses .template-index (body class) to scope to homepage, avoiding the
   :has() selector for broader browser support. The .scrolled-past-header
   class is added by sections/header.liquid's StickyHeader JS when the
   user scrolls past the header bottom. We deliberately do NOT key off
   .shopify-section-header-sticky here because sticky_header_type:"always"
   applies that class on page load and would defeat the transparent state. */

/* Initial: section-header background transparent so the hero shows through */
.template-index .section-header:not(.scrolled-past-header) {
  background: transparent !important;
}

/* Pull the hero up behind the sticky header so the transparent header
   actually overlays the hero. Without this, .section-header takes up
   space in normal flow (position: sticky), the hero starts BELOW it,
   and the transparent header just shows the body's white background
   through. --header-height is set by the StickyHeader JS in
   sections/header.liquid; the 7rem fallback prevents a layout flash
   before the JS runs. Scoped to the homepage only. */
.template-index #MainContent > .shopify-section:first-child {
  margin-top: calc(-1 * var(--header-height, 7rem));
}

/* Hero cap: never taller than 90% of the viewport, never taller than
   850px. min() resolves to whichever is smaller, so on tall desktops
   we cap at 850px and on short laptops/tablets we cap at 90vh.
   The .banner--large min-height of 72rem (720px) still applies — the
   hero will be in the 720px..850px range on most screens. */
.template-index #MainContent > .shopify-section:first-child .banner {
  max-height: min(90vh, 850px);
}

/* After scroll: white background on the wrapper + inner header */
.template-index .section-header.scrolled-past-header,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header {
  background: #ffffff !important;
}

/* After scroll: dark text on links / icons / localization */
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__heading-link,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__menu-item,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .list-menu__item--link,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__icon,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header a,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header span,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .localization-form__select {
  color: #171717 !important;
}

/* After scroll: cart bubble stays white text on dark bg */
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header .cart-count-bubble {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
}
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header .cart-count-bubble span {
  color: #FFFFFF !important;
}

/* After scroll: dark icon SVGs (general, caret, hamburger) */
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__icon svg,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .icon-caret,
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__icon--menu svg {
  fill: #171717 !important;
  color: #171717 !important;
}

/* After scroll: swap to dark logo */
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__logo--dark {
  display: block !important;
}
.template-index .section-header.scrolled-past-header .header-wrapper--transparent .header__logo--light {
  display: none !important;
}

/* Homepage spacing closer to design rhythm */
.shopify-section:has(.banner) + .shopify-section:has(.collection) .collection {
  margin-top: 1.2rem;
}

.featured-collection .page-width,
.shopify-section:has(.collection) .page-width {
  padding-top: 2.4rem;
}

/* Founder-quote → two-col-images overlap (HOMEPAGE ONLY).
   Founder-quote gets extra padding-bottom (white area extends down).
   Two-col-images-section pads at top (so its dark bg starts later).
   Images get a strong negative margin-top to reach above the dark section
   into the white area, creating a "floating tile" transition.
   Scoped to .template-index because collection/product/etc. pages reuse the
   two-col-images section without a founder-quote above it — the negative
   margin would otherwise pull the images on top of preceding sections. */
.template-index .founder-quote {
  padding-bottom: 20rem;
}

.template-index .two-col-images-section {
  padding-top: 20rem;
}

.template-index .two-col-images {
  margin-top: -40rem;
}

/* Instagram strip should feel denser and cleaner */
.instagram-feed__header {
  padding-top: 5rem;
  padding-bottom: 2.2rem;
}

.instagram-feed__grid {
  gap: 0.2rem;
}

/* Mobile refinements */
@media screen and (max-width: 749px) {
  /* Mobile transparent/white state — covered by the desktop rules above
     (template-index .section-header[:not(.scrolled-past-header)]).
     Kept these blocks intentionally empty as a place to add mobile-only
     overrides if needed in the future. */

  .banner__content.banner__content--bottom-left {
    padding-bottom: 2.2rem !important;
  }

  .banner__heading {
    font-size: 3.4rem !important;
    line-height: 1.1;
    max-width: 30rem;
  }

  .banner__text p {
    font-size: 1.4rem;
    line-height: 1.45;
    max-width: 32rem;
  }

  .collection .title-wrapper h2 {
    font-size: 4rem;
    line-height: 1.04;
  }

  .collection .collection__description {
    letter-spacing: 0.01em !important;
  }

  /* Mobile: scaled-down founder-quote / two-col overlap (HOMEPAGE ONLY) */
  .template-index .founder-quote {
    padding-bottom: 8rem;
  }

  .template-index .two-col-images-section {
    padding-top: 10rem;
  }

  .template-index .two-col-images {
    margin-top: -16rem;
    gap: 1.2rem;
  }

  .two-col-images__overlay {
    padding: 1.6rem 0 2.6rem !important;
  }

  .instagram-feed {
    padding-bottom: 2.8rem;
  }

  .instagram-feed__header {
    padding-top: 2.8rem;
    padding-bottom: 1.4rem;
  }

  .instagram-feed__heading {
    font-size: 3.2rem;
    line-height: 1.05;
  }

  /* Mobile: horizontal scroll with square items, bleeds past page-width padding. */
  .instagram-feed__grid-wrapper.page-width {
    padding-left: 0;
    padding-right: 0;
  }
  .instagram-feed__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.3rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 1.6rem;
  }
  .instagram-feed__grid::-webkit-scrollbar {
    display: none;
  }

  .instagram-feed__item {
    flex: 0 0 32vw;
    width: 32vw;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
  }

  .instagram-feed__handle {
    margin-top: 1.6rem;
    font-size: 1.1rem;
  }
}

/* ============================================
   MOBILE PDP — consolidated responsive fixes
   Matching Figma mobile design (375px)
   ============================================ */
@media screen and (max-width: 749px) {

  /* --- Parfümeurin section: compact image + text below --- */
  [id*="parfumeurin"] .image-with-text__grid {
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  [id*="parfumeurin"] .image-with-text__media-item {
    max-width: 18rem !important;
    width: 18rem !important;
    margin: 0 auto !important;
  }
  [id*="parfumeurin"] .image-with-text__text-item {
    text-align: center !important;
  }
  [id*="parfumeurin"] .image-with-text__text-item h2,
  [id*="parfumeurin"] .image-with-text__heading {
    font-size: 2.2rem !important;
    text-align: center !important;
  }
  [id*="parfumeurin"] .image-with-text__text-item p {
    font-size: 1.4rem !important;
    text-align: center !important;
  }
  [id*="parfumeurin"] .page-width {
    max-width: 100% !important;
  }

  /* --- Handschrift Grid: tighter on mobile --- */
  .handschrift-section {
    padding: 3rem 0 !important;
  }
  .handschrift-section__heading {
    font-size: 2.2rem !important;
    margin-bottom: 1.6rem !important;
  }
  .handschrift-grid {
    height: auto !important;
    gap: 0.4rem !important;
  }

  /* --- Multicolumn slider: reduce spacing --- */
  .multicolumn {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  .multicolumn .title-wrapper h2 {
    font-size: 2.2rem !important;
  }

  /* --- Key Notes: compact cards --- */
  .product-key-notes-section {
    padding: 1.5rem 0 2.5rem !important;
  }
  .product-key-notes__title {
    font-size: 1.8rem !important;
    line-height: 3rem !important;
    margin-bottom: 1.2rem !important;
  }
  .product-key-notes__col {
    padding: 1.2rem 0.8rem !important;
  }
  .product-key-notes__img-wrap {
    width: 8rem !important;
    height: 10rem !important;
  }
  .product-key-notes__label {
    font-size: 1.3rem !important;
  }
  .product-key-notes__notes {
    font-size: 1rem !important;
  }

  /* --- FAQ: single column, tighter --- */
  .collapsible-content-wrapper-narrow {
    padding: 0 1.6rem !important;
  }

  /* --- Image with text (bottom section): compact --- */
  .image-with-text {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* --- Related products: tighter --- */
  .related-products {
    padding-bottom: 3rem !important;
  }

  /* --- General section spacing on mobile PDP --- */
  .template-product .shopify-section + .shopify-section {
    margin-top: 0 !important;
  }
}

/* ============================================
   BLOG OVERVIEW — luxury editorial grid
   ============================================ */
.main-blog .title--primary {
  font-family: 'Marcellus', serif !important;
  font-size: 4.8rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin-bottom: 4rem !important;
  color: #171717 !important;
}
.blog-articles {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem 2.4rem !important;
}
.blog-articles__article { border: none !important; }
.blog-articles__article .article-card__image-wrapper {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.blog-articles__article .article-card__image-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.blog-articles__article:hover .article-card__image-wrapper img {
  transform: scale(1.04) !important;
}
.blog-articles__article .article-card__title,
.blog-articles__article .article-card__title a {
  font-family: 'Marcellus', serif !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #171717 !important;
  text-decoration: none !important;
  margin-top: 1.6rem !important;
}
.blog-articles__article .article-card__title a:hover { color: #4a4a4a !important; }
.blog-articles__article .article-card__excerpt,
.blog-articles__article .article-card__excerpt p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
  color: #4a4a4a !important;
  margin-top: 0.8rem !important;
}
.blog-articles__article .article-card__info,
.blog-articles__article .caption-with-letter-spacing {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  margin-top: 1.2rem !important;
}
.blog-articles__article .article-card__footer a {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  color: #171717 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.main-blog .pagination { margin-top: 4rem !important; }

@media screen and (max-width: 749px) {
  .main-blog .title--primary { font-size: 3.2rem !important; }
  .blog-articles {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .blog-articles__article .article-card__title,
  .blog-articles__article .article-card__title a { font-size: 2rem !important; }
}

/* ============================================
   ARTICLE PAGE — clean editorial layout
   ============================================ */
.article-template__hero-container { margin-bottom: 3rem !important; }
.article-template__hero-medium,
.article-template__hero-large { border-radius: 0 !important; }
.article-template__title {
  font-family: 'Marcellus', serif !important;
  font-size: 4.4rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #171717 !important;
  margin-bottom: 1.6rem !important;
}
.article-template .caption-with-letter-spacing {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #999999 !important;
}
.article-template__content { margin-top: 3rem !important; }
.article-template__content p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.7rem !important;
  line-height: 1.75 !important;
  color: #2a2a2a !important;
  margin-bottom: 2rem !important;
}
.article-template__content h2 {
  font-family: 'Marcellus', serif !important;
  font-size: 3rem !important;
  font-weight: 400 !important;
  color: #171717 !important;
  margin: 3.6rem 0 1.6rem !important;
}
.article-template__content h3 {
  font-family: 'Marcellus', serif !important;
  font-size: 2.2rem !important;
  font-weight: 400 !important;
  color: #171717 !important;
  margin: 2.8rem 0 1.2rem !important;
}
.article-template__content blockquote {
  font-family: 'Marcellus', serif !important;
  font-size: 2.4rem !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  color: #171717 !important;
  border-left: 2px solid #171717 !important;
  padding-left: 2.4rem !important;
  margin: 3rem 0 !important;
}
.article-template__content img {
  border-radius: 0 !important;
  margin: 2.4rem 0 !important;
}
.article-template__content ul,
.article-template__content ol {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.7rem !important;
  line-height: 1.75 !important;
  color: #2a2a2a !important;
  padding-left: 2rem !important;
  margin-bottom: 2rem !important;
}
.article-template__social-sharing {
  margin-top: 4rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(26, 26, 26, 0.08) !important;
}
.article-template__back a {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.4rem !important;
  color: #171717 !important;
}

@media screen and (max-width: 749px) {
  .article-template__title { font-size: 2.8rem !important; }
  .article-template__content p { font-size: 1.5rem !important; }
  .article-template__content h2 { font-size: 2.4rem !important; }
  .article-template__content blockquote { font-size: 2rem !important; }
}

/* ============================================
   PRODUCT FAQ — custom section with {product} placeholder
   ============================================ */

.product-faq {
  padding-top: 40px;
  padding-bottom: 80px;
}
   .product-faq__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
}
.product-faq__heading {
  font-family: 'Marcellus', serif !important;
  font-size: 4rem !important;
  font-weight: 400;
  margin: 0;
}
.product-faq__item {
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.product-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #1a1a1a;
}
.product-faq__question::-webkit-details-marker { display: none; }
.product-faq__icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
details[open] .product-faq__icon {
  transform: rotate(180deg);
}
.product-faq__answer {
  padding: 0 0 2.4rem;
}
.product-faq__answer p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
  color: #676767 !important;
  margin: 0;
}
@media screen and (max-width: 749px) {
  .product-faq__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.6rem;
  }
  .product-faq__heading {
    font-size: 2.8rem !important;
  }
}

/* ============================================
   ABOUT PAGE — custom editorial section
   ============================================ */

/* Hero */
.about-hero {
  position: relative;
  height: 55rem;
  overflow: hidden;
}
.about-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5rem 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.about-hero__heading {
  font-family: 'Marcellus', serif;
  font-size: 5rem;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
}

/* Text blocks. Use longhand padding so the horizontal padding from
   .page-width (which lives on the same element) survives. */
.about-text {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.about-text__inner {
  max-width: 76rem;
  margin: 0 auto;
}
.about-text__heading {
  font-family: 'Marcellus', serif;
  font-size: 3.4rem;
  font-weight: 400;
  color: #171717;
  line-height: 1.2;
  margin: 0 0 2rem;
}
.about-text__body p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.7rem;
  line-height: 1.8;
  color: #3a3a3a;
  margin: 0 0 1.4rem;
}

/* Image + Text split. Same trick — keep .page-width's horizontal padding. */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.about-split--reverse {
  direction: rtl;
}
.about-split--reverse > * {
  direction: ltr;
}
.about-split__img {
  width: 100%;
  height: auto;
  display: block;
}
.about-split__heading {
  font-family: 'Marcellus', serif;
  font-size: 3rem;
  font-weight: 400;
  color: #171717;
  line-height: 1.25;
  margin: 0 0 2rem;
}
.about-split__body p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  color: #3a3a3a;
  margin: 0 0 1.4rem;
}

/* Quote */
.about-quote {
  padding: 8rem 0;
  border-top: 1px solid rgba(26,26,26,0.06);
}
.about-quote__text {
  font-family: 'Marcellus', serif;
  font-size: 3rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: #171717;
  max-width: 76rem;
  margin: 0;
  border: none;
  padding: 0;
}
.about-quote__author {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #676767;
  margin-top: 2.4rem;
  text-align: right;
  max-width: 76rem;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .about-hero { height: 36rem; }
  .about-hero__heading { font-size: 3.2rem; }
  .about-text { padding-top: 4rem; padding-bottom: 4rem; }
  .about-text__heading { font-size: 2.4rem; }
  .about-text__body p { font-size: 1.5rem; }
  .about-split {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .about-split--reverse { direction: ltr; }
  .about-split__heading { font-size: 2.4rem; }
  .about-split__body p { font-size: 1.5rem; }
  .about-quote { padding: 5rem 0; }
  .about-quote__text { font-size: 2.2rem; }
}