/** Shopify CDN: Minification failed

Line 52:0 All "@import" rules must come first

**/
/**
 * DUALIS Custom CSS
 * Brand tokens + editorial overrides for native Shopify sections
 *
 * Architecture:
 *   1. :root brand tokens
 *   2. @import Cormorant Garamond + DM Sans
 *   3. .template--product heading var override (kills need for !important)
 *   4. .template--product native section overrides (ATF, testimonials, banners, founder, key benefits)
 *   5. .template--index heading var override + homepage section overrides
 *
 * Custom sections (dualis-problem, dualis-journeys, dualis-method, etc.)
 * have their own CSS files — nothing for them lives here.
 *
 * See docs/THEME-ARCHITECTURE.md for full reference.
 */

/* ============================================
   1. BRAND TOKENS
   ============================================ */
:root {
  --color-forest: #2A3B34;
  --color-sage: #9EB2A8;
  --color-sage-text: #5A7A6C;
  --color-sage-light: #E8F0EC;
  --color-gold: #D4A853;
  --color-sand: #F5EBDF;
  --color-cream: #FBF9F7;
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'DM Sans', sans-serif;

  /* Override Shopify's inline font vars — our CSS loads after settings.liquid
     so same-specificity :root declarations here win by source order.
     Belt-and-suspenders with settings_data.json font picker change. */
  --font-heading-family: 'Cormorant Garamond', Georgia, serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-family: 'DM Sans', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-button-family: 'DM Sans', sans-serif;
}

/* ============================================
   2. GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

/* ============================================
   3. PRODUCT / SALES PAGE — TEMPLATE-LEVEL OVERRIDE
   Font families now set globally via settings_data.json
   (cormorant_garamond_n4 / dm_sans_n4).
   Only PDP-specific weight + type scale vars live here.
   ============================================ */
.template--product {
  --font-heading-weight: 400;

  /* CI target type scale */
  --pdp-title-section: clamp(34px, 5vw, 52px);
  --pdp-title-weight: 400;
  --pdp-title-family: var(--font-serif);

  --pdp-atf-title: clamp(38px, 5.5vw, 60px);
  --pdp-atf-title-weight: 400;
  --pdp-atf-title-family: var(--font-serif);

  --pdp-card-title: clamp(28px, 3.5vw, 38px);
  --pdp-card-title-weight: 500;
  --pdp-card-title-family: var(--font-serif);
  --pdp-card-title-color: #2A3B34;

  --pdp-subtitle: clamp(16px, 1.8vw, 20px);
  --pdp-subtitle-weight: 400;
  --pdp-subtitle-family: var(--font-sans);
  --pdp-subtitle-style: normal;
  --pdp-subtitle-color: #4b5563;

  --pdp-body: clamp(15px, 1.5vw, 18px);
  --pdp-body-weight: 400;
  --pdp-body-family: var(--font-sans);
  --pdp-body-color: #4b5563;

  --pdp-overline: 12px;
  --pdp-overline-weight: 600;
  --pdp-overline-tracking: 0.18em;
  --pdp-overline-family: var(--font-sans);
  --pdp-overline-color: #5A7A6C;

  --pdp-small: 11px;
  --pdp-small-family: var(--font-sans);

  --pdp-step-number: clamp(48px, 4.5vw, 60px);
  --pdp-step-number-weight: 400;
  --pdp-stat-value: clamp(52px, 7vw, 72px);

  --pdp-bg-light: #f5f3f0;
  --pdp-bg-cream: #FBF9F7;
  --pdp-bg-dark: #2A3B34;
  --pdp-bg-warm: #8a7e74;
}

/* Global em = sage accent on product pages */
.template--product em {
  color: var(--color-sage);
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── Section background alternation ──
   Subtle grey bg on Method to break white monotony. */
.template--product .dualis-problem,
.template--product .dualis-journeys,
.template--product .dualis-video,
.template--product .dualis-compare,
.template--product .section-accordions {
  background-color: var(--pdp-bg-light, #f5f3f0);
}

.template--product .dualis-method {
  background-color: #fff;
}

.template--product .section-testimonials {
  background-color: var(--pdp-bg-cream, #FBF9F7);
}

.template--product .dualis-results,
.template--product .dualis-final-cta {
  background-color: var(--pdp-bg-dark, #2A3B34);
}

.template--product .section-dual-tiles {
  background-color: var(--pdp-bg-warm, #8a7e74);
}

/* ── PDP Type Scale — centralized overrides ──
   Higher specificity (.template--product .class) beats
   individual section CSS (.class alone).
   ALL sizes reference vars above — never hardcode px here. */

/* T1 — Section titles */
.template--product .dualis-problem__title,
.template--product .dualis-journeys__title,
.template--product .dualis-method__title,
.template--product .dualis-results__title,
.template--product .dualis-compare__title,
.template--product .dualis-video__title,
.template--product .dualis-howitworks__title,
.template--product .dualis-system__title,
.template--product .dualis-final-cta__title {
  font-family: var(--pdp-title-family, var(--font-serif));
  font-size: var(--pdp-title-section, clamp(34px, 5vw, 52px));
  font-weight: var(--pdp-title-weight, 500);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* T2 — Card / product headings */
.template--product .dualis-problem__card-title,
.template--product .dualis-journeys__transformation,
.template--product .dualis-method__product-name,
.template--product .dualis-howitworks__name {
  font-family: var(--pdp-card-title-family, var(--font-serif));
  font-size: var(--pdp-card-title, clamp(28px, 3.5vw, 38px));
  font-weight: var(--pdp-card-title-weight, 600);
  color: var(--pdp-card-title-color, #2A3B34);
}

/* T3 — Section subtitles */
.template--product .dualis-problem__subtitle,
.template--product .dualis-journeys__subtitle,
.template--product .dualis-video__subtitle,
.template--product .dualis-method__subtitle,
.template--product .dualis-results__subtitle,
.template--product .dualis-compare__subtitle,
.template--product .dualis-system__subtitle {
  font-family: var(--pdp-subtitle-family, var(--font-sans));
  font-size: var(--pdp-subtitle, clamp(16px, 1.8vw, 20px));
  font-style: var(--pdp-subtitle-style, normal);
  font-weight: var(--pdp-subtitle-weight, 400);
}

/* T4 — Body text (card descriptions, quotes, prose) */
.template--product .dualis-problem__card-text,
.template--product .dualis-journeys__quote,
.template--product .dualis-method__card-desc,
.template--product .dualis-howitworks__desc,
.template--product .dualis-results__label {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  font-weight: var(--pdp-body-weight, 400);
  color: var(--pdp-body-color, #4b5563);
}

/* T5 — Overlines (section labels, badges, frequencies, step labels) */
.template--product .dualis-problem__overline,
.template--product .dualis-journeys__overline,
.template--product .dualis-video__overline,
.template--product .dualis-method__overline,
.template--product .dualis-results__overline,
.template--product .dualis-compare__badge,
.template--product .dualis-howitworks__overline,
.template--product .dualis-system__overline,
.template--product .dualis-howitworks__frequency,
.template--product .dualis-problem__trap-label,
.template--product .dualis-problem__number,
.template--product .dualis-journeys__name,
.template--product .dualis-journeys__duration {
  font-family: var(--pdp-overline-family, var(--font-sans));
  font-size: var(--pdp-overline, 12px);
  font-weight: var(--pdp-overline-weight, 600);
  letter-spacing: var(--pdp-overline-tracking, 0.18em);
}

/* T6 — Small text (footnotes, meta) */
.template--product .dualis-results__footnote-text,
.template--product .dualis-compare__table thead th {
  font-family: var(--pdp-small-family, var(--font-sans));
  font-size: var(--pdp-small, 11px);
}

/* T7 — Decorative numbers */
.template--product .dualis-howitworks__number {
  font-size: var(--pdp-step-number, clamp(48px, 4.5vw, 60px));
  font-weight: var(--pdp-step-number-weight, 400);
  opacity: 0.85;
}

.template--product .dualis-results__value {
  font-size: var(--pdp-stat-value, clamp(52px, 7vw, 72px));
}

/* Trap steps — uses body tier, medium weight */
.template--product .dualis-problem__trap-step {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  font-weight: 500;
  color: var(--pdp-card-title-color, #2A3B34);
}

.template--product .dualis-problem__trap-step--danger {
  color: #c45c5c;
}

/* Dark card / dark section overrides (0,3,0 specificity beats T2/T4) */
.template--product .dualis-method__card--dark .dualis-method__product-name {
  color: #fff;
}
.template--product .dualis-method__card--dark .dualis-method__card-desc {
  color: rgba(255, 255, 255, 0.85);
}
.template--product .dualis-results--dark .dualis-results__label {
  color: var(--dr-text);
}

/* Section headers — centered, capped width, consistent alignment */
.template--product .dualis-problem__header,
.template--product .dualis-journeys__header,
.template--product .dualis-video__header,
.template--product .dualis-method__header,
.template--product .dualis-results__header,
.template--product .dualis-compare__header,
.template--product .dualis-howitworks__header,
.template--product .dualis-system__header {
  text-align: center;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   3a. MOBILE HORIZONTAL GUARDRAIL
   Keep body min-width from ever becoming the limiting factor on small
   screens, and apply root overflow clipping with a hidden fallback for
   browsers that do not support overflow: clip. */
@media screen and (max-width: 749px) {
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }
  body {
    min-width: 0 !important;
  }

  /* Structural guardrail on main — prevents mobile touch-pan bypass.
     overflow-x:clip (not hidden) avoids creating a scroll container,
     so position:fixed sticky-ATC remains safe. */
  main#MainContent {
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box;
  }

  /* Break the flexbox min-width:auto cascade on the compare section.
     Without this, the 500px table min-width propagates upward through
     every flex/grid parent, overriding max-width:100%. */
  .section-dualis-compare,
  .section-dualis-compare .dualis-compare,
  .section-dualis-compare .container,
  .dualis-compare__table-wrap {
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Force wrapper to viewport width so the internal overflow-x:auto
     finally triggers a scrollbar inside the table wrapper. */
  .dualis-compare__table-wrap {
    width: 100% !important;
  }

  /* Fix swiper thumbs: margin:0.8rem on all sides means
     100% + 16px horizontal = 494px overflow. Use padding instead. */
  .product__media-slider .swiper-thumbs.swiper-horizontal {
    margin: 0.8rem 0;
    padding-inline: 0.8rem;
    box-sizing: border-box;
  }
}

/* ============================================
   3b. MARQUEE / TRUST BAR FIX
   Theme's .marquee uses overflow:hidden, but that still creates a
   scrollable overflow area — the browser counts the intrinsic flex
   width (~7400px) toward document.scrollWidth on mobile.
   overflow:clip genuinely prevents scroll contribution. */
.marquee {
  max-width: 100%;
  overflow: clip;
}

/* ============================================
   3c. CARD-SLIDER MOBILE OVERFLOW FIX
   Theme sets overflow:visible globally (component-card-slider.css line 5-6)
   and only restores overflow:hidden at 750px+. On mobile, Swiper slides
   can leak beyond the viewport. Contain it. */
@media screen and (max-width: 749px) {
  .card-slider {
    overflow: hidden;
  }
}

/* ============================================
   4a. ATF (main-product) OVERRIDES
   ============================================ */

/* Product image arrows: always visible on desktop and mobile.
   Sits inside .product__media over the slides. */
.template--product .product__media .swiper-buttons {
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  padding: 0 0.8rem;
}
.template--product .product__media .swiper-buttons .swiper-button {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-forest, #2A3B34);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.template--product .product__media .swiper-buttons .swiper-button svg {
  width: 1.2rem;
  height: 1.2rem;
}
/* Mobile: arrows already always visible via base rule above */

/* Product media slider: the theme sets overflow:visible on .swiper to
   expose thumbnails/pagination outside the slide area. On mobile (single-
   column) this causes the slide content to leak horizontally beyond the
   viewport. Clip it on the immediate slider container instead. */
@media screen and (max-width: 749px) {
  .template--product .product__media-slider {
    overflow: hidden;
  }
}

/* Product media: neutralise viewport-height lock.
   The Liquid inline style sets padding-block-end: 125% (4:5 ratio) on
   each slide, which sizes the image. We just reset the theme's
   --product-media-area-height var so the container doesn't also
   try to force 100vh. */
@media screen and (min-width: 750px) {
  .template--product .product__media {
    --product-media-area-height: auto;
  }
  .template--product .product__media-layout--full.product__media .media:not(.media--thumb) {
    --product-media-area-height: auto;
  }
}

/* ATF grid: narrow the image column so the full 4:5 image fits in
   the viewport without cropping. 60%→50% shrinks the image
   proportionally (height = 125% of width) and gives more room
   to the product info column. */
@media screen and (min-width: 990px) {
  .template--product .product .container .product__grid--has-media {
    grid-template-columns: 50% 50%;
  }
}

/* Product thumbnails: below image, auto-distribute across full width.
   Swiper stays initialized (click-to-select works), but we override the
   wrapper to use flexbox so all thumbs are always visible. Scales to ~12
   images before needing a different solution. */
@media screen and (min-width: 750px) {
  .template--product .product__media .swiper-thumbs.swiper-horizontal,
  .template--product .product .swiper-thumbs.swiper-horizontal {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: 1rem;
  }
  .template--product .swiper-thumbs.swiper-horizontal .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .template--product .swiper-thumbs.swiper-horizontal .swiper-slide {
    width: 0 !important;
    min-width: 3.5rem;
    max-width: 6rem;
    flex: 1 1 0;
    max-height: none;
  }
}

/* Product title: hero sizing via type scale, tight margins */
.template--product .product__title {
  font-family: var(--pdp-atf-title-family, var(--font-serif));
  font-size: var(--pdp-atf-title, clamp(38px, 5.5vw, 60px));
  font-weight: var(--pdp-atf-title-weight, 600);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-forest);
  margin-block: 0.75rem 0.5rem;
}
/* Override theme mobile shrink (section-product.css sets 2.4rem at ≤990px) */
@media screen and (max-width: 990px) {
  .template--product .product .product__title {
    font-size: var(--pdp-atf-title);
  }
}

/* Text blocks: clean editorial */
.template--product .product__text {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Badge + Rating row: flex layout when both spans present */
.template--product .product__text:has(.dualis-atf-badge) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

/* "Growth + Retention" pill badge */
.dualis-atf-badge {
  background: var(--color-sage-light);
  color: var(--color-forest);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Star rating + review count */
.dualis-atf-rating {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-forest);
  letter-spacing: 0.02em;
}

/* Generic text--link blocks (subtitle etc): T6 small, overline style */
.template--product .product__text--link {
  font-size: var(--pdp-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--pdp-body-color);
}

/* ATF subtitle (value prop after title): DM Sans, light weight */
.template--product .product__title + .product__text--link {
  font-size: var(--pdp-subtitle, clamp(16px, 1.8vw, 20px));
  font-weight: var(--pdp-subtitle-weight, 400);
  font-family: var(--pdp-subtitle-family, var(--font-sans));
  font-style: var(--pdp-subtitle-style, normal);
  letter-spacing: 0.01em;
  color: var(--pdp-subtitle-color, #4b5563);
  margin-bottom: 1.5rem;
}

/* Hide default price block — the subscription/one-time purchase widget
   already shows all pricing. Prevents duplicate "$59.00 USD" above it. */
.template--product .product__price {
  display: none;
}

/* Hide breadcrumb bar ("Home / Dualis: The Commitment") — sales page
   is a standalone experience, no navigation breadcrumbs needed. */
.template--product .product__bar {
  display: none;
}

/* ATC button: "ADD TO CART · €price" layout */
.dualis-atc-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.dualis-atc-dot {
  width: 4px;
  height: 4px;
  background-color: var(--color-sage, #9EB2A8);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Hide subscription disclosure text below Shop Pay button.
   Clip the wrapper so only the button (~50px) is visible;
   the disclosure paragraph below it is hidden by overflow. */
.template--product .dualis-dynamic-checkout,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout {
  grid-column: span 2 !important;
  max-height: 60px;
  overflow: hidden;
}

/* Match Shop Pay button size to the ATC button above.
   The branded button uses .shopify-cleanslate + div[role=button],
   not an iframe, so external CSS reaches it. */
.template--product .dualis-dynamic-checkout,
.template--product .dualis-dynamic-checkout .shopify-payment-button,
.template--product .dualis-dynamic-checkout .shopify-payment-button__button,
.template--product .dualis-dynamic-checkout .shopify-payment-button__button--branded,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-payment-button,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-payment-button__button,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-payment-button__button--branded {
  width: 100% !important;
  display: block !important;
}
.template--product .dualis-dynamic-checkout .shopify-cleanslate,
.template--product .dualis-dynamic-checkout .shopify-cleanslate > div,
.template--product .dualis-dynamic-checkout .shopify-cleanslate > div > div,
.template--product .dualis-dynamic-checkout [role="button"],
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-cleanslate,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-cleanslate > div,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout .shopify-cleanslate > div > div,
.template--concentrate-tube-unlisted .dualis-dynamic-checkout [role="button"] {
  width: 100% !important;
  min-height: 50px !important;
}

/* Hide subscription per-delivery price line — cards show pricing */
.template--product .product__subscription-price {
  display: none;
}

/* Trust badges: T6 small, body color */
.template--product .product__text--body {
  font-size: var(--pdp-small);
  font-weight: var(--pdp-body-weight);
  letter-spacing: 0.04em;
  color: var(--pdp-body-color);
}

.template--product .product__text--body svg {
  color: var(--color-sage);
}

/* Fix: default-active accordion body needs opacity + transform too */
html.js .accordion__section.default-active .accordion__body {
  opacity: 1;
  transform: none;
}

/* Accordion trigger: uppercase body font, matches old theme */
.template--product .product__accordion .accordion__button {
  font-family: var(--font-body-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
}

/* Accordion chevron: sage */
.template--product .product__accordion .accordion__icon svg {
  color: var(--color-sage);
}

/* Accordion body: clean readable base */
.template--product .product__accordion .accordion__body-inner {
  font-family: var(--font-body-family);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  font-size: 14px;
  color: #4b5563;
}

.template--product .product__accordion .accordion__body-inner p {
  margin: 0 0 0.75rem;
}

/* Accordion body bold: forest, visible weight contrast */
.template--product .product__accordion .accordion__body-inner strong {
  color: var(--color-forest);
  font-weight: 600;
}

/* Product name with FA icon */
.template--product .product__accordion .acc-product-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-forest);
  margin-bottom: 0.35rem;
}

.template--product .product__accordion .acc-product-name i {
  color: var(--color-sage);
  margin-right: 0.25rem;
}

/* Second product name: add top breathing room */
.template--product .product__accordion .acc-product-name--spacer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Product subtitle (e.g., "For regular wash days") */
.template--product .product__accordion .acc-subtitle {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 0.75rem;
}

.template--product .product__accordion .acc-subtitle--sage {
  color: var(--color-sage);
}

.template--product .product__accordion .acc-subtitle--gold {
  color: #C4A265;
}

/* Bold callout line */
.template--product .product__accordion .acc-callout {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-forest);
  margin-top: 0.75rem;
}

/* Meta info (size, supply) */
.template--product .product__accordion .acc-meta {
  font-size: 13px;
  color: #6b7280;
  margin-top: 0.75rem;
}

/* Key Benefits accordion: 2-column grid with Font Awesome icons */
.dualis-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}

.dualis-benefits-grid span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--pdp-small);
  font-weight: 400;
  color: var(--color-forest);
}

.dualis-benefits-grid i {
  color: var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--color-sage-light);
  border-radius: 50%;
  font-size: 12px;
}

@media (max-width: 749px) {
  .dualis-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   4b. TESTIMONIALS OVERRIDES
   ============================================ */

/* Section title: wired to PDP type scale */
.template--product .section-testimonials .section-testimonials__title {
  font-family: var(--font-serif);
  font-size: var(--pdp-title-section);
  font-weight: var(--pdp-title-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-forest);
  text-align: center;
}

/* Overline pseudo-element — removed (cleaner without) */

/* Quote: T4 body (DM Sans) */
.template--product .section-testimonials .testimonial__quote {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  font-weight: var(--pdp-body-weight, 400);
  font-style: normal;
  line-height: 1.65;
  color: var(--pdp-body-color, #4b5563);
}

/* Stars inside quote richtext */
.template--product .section-testimonials .testimonial__quote p:first-child {
  font-style: normal;
  color: var(--color-sage);
  letter-spacing: 0.1em;
  font-family: var(--pdp-small-family, var(--font-sans));
  font-size: var(--pdp-small, 11px);
  margin-bottom: 0.75rem;
}

/* Bold headings in quotes */
.template--product .section-testimonials .testimonial__quote strong {
  font-weight: 500;
  color: var(--color-forest);
  display: block;
  font-style: normal;
  margin-bottom: 0.5rem;
}

/* Quote paragraphs */
.template--product .section-testimonials .testimonial__quote p {
  font-weight: var(--pdp-body-weight, 400);
  line-height: 1.65;
}

/* Author: uses T5 overline */
.template--product .section-testimonials .testimonial__author {
  font-family: inherit;
  font-size: var(--pdp-overline);
  font-weight: var(--pdp-overline-weight);
  letter-spacing: var(--pdp-overline-tracking);
  text-transform: uppercase;
  color: var(--pdp-overline-color);
  font-style: normal;
}

/* Slider arrows: sage, subtle */
.template--product .section-testimonials .swiper-button {
  color: var(--color-sage);
  transition: opacity 0.3s ease;
}

.template--product .section-testimonials .swiper-button:hover {
  opacity: 0.6;
}

/* ============================================
   4c. FULL-WIDTH BANNERS (mood-banner + final-cta)
   ============================================ */

/* Title: tighter tracking, inherits serif from var override */
.template--product .section-full-width-banner__title {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Mood banner: white, italic title — uses T1 */
.template--product [id*="mood-banner"] .section-full-width-banner__title {
  color: #fff;
  font-style: italic;
  font-size: var(--pdp-title-section, clamp(34px, 5vw, 52px));
  font-weight: var(--pdp-title-weight, 500);
}

/* Mood banner: white readable subtitle */
.template--product [id*="mood-banner"] .section-full-width-banner__subtitle {
  color: #fff;
  font-size: var(--pdp-subtitle, clamp(16px, 1.8vw, 20px));
  opacity: 1;
}

/* Subtitle: clean body */
.template--product .section-full-width-banner__subtitle {
  font-family: var(--pdp-subtitle-family, var(--font-sans));
  font-size: var(--pdp-subtitle, clamp(16px, 1.8vw, 20px));
  font-weight: var(--pdp-subtitle-weight, 400);
  font-style: var(--pdp-subtitle-style, normal);
  letter-spacing: 0.01em;
  line-height: 1.5;
  opacity: 0.85;
}

/* ============================================
   4d. FOUNDER SECTION (dual-tiles)
   ============================================ */

/* Story tile title: type scale + forest/sage — matches all section titles */
.template--product .section-dual-tiles__title {
  font-family: var(--font-serif);
  font-size: var(--pdp-title-section, clamp(34px, 5vw, 52px));
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: var(--pdp-title-weight, 500);
  color: var(--color-forest);
  margin-bottom: 1.5rem;
}

.template--product .section-dual-tiles__title em {
  font-style: italic;
  color: var(--color-sage);
}

/* Image tile quote (first tile): white serif overlaid on image */
.template--product .section-dual-tiles__tile:first-of-type .section-dual-tiles__title {
  font-size: var(--pdp-subtitle);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.template--product .section-dual-tiles__tile:first-of-type .section-dual-tiles__title em {
  color: #fff;
}

/* Body text: T4 body — clean readable prose */
.template--product .section-dual-tiles__entry {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  font-weight: var(--pdp-body-weight, 400);
  line-height: 1.75;
  color: var(--pdp-body-color, #4b5563);
}

.template--product .section-dual-tiles__entry p {
  margin-bottom: 1.25rem;
}

/* Bold text: just bold, same size */
.template--product .section-dual-tiles__entry strong {
  font-weight: 600;
}

/* Signature "– Sarah, Founder": prominent serif, larger, with separator */
.template--product .section-dual-tiles__entry p:last-child {
  font-family: var(--font-serif);
  font-size: var(--pdp-subtitle);
  font-style: italic;
  font-weight: 400;
  color: var(--color-forest);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================
   4e. FAQ ACCORDIONS OVERRIDES
   ============================================ */

/* Section title: wired to PDP type scale */
.template--product .section-accordions .accordions__title {
  font-family: var(--font-serif);
  font-size: var(--pdp-title-section);
  font-weight: var(--pdp-title-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-forest);
  text-align: center;
}

/* Overline pseudo-element — removed (cleaner without) */

/* Accordion trigger: T4 body, clean editorial */
.template--product .section-accordions .accordion__button {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Accordion body: uses T4 body */
.template--product .section-accordions .accordion__body-inner {
  font-family: var(--pdp-body-family, var(--font-sans));
  font-weight: var(--pdp-body-weight, 400);
  font-size: var(--pdp-body, clamp(15px, 1.5vw, 18px));
  line-height: 1.65;
  color: var(--pdp-body-color, #4b5563);
}

/* Bold text in body: forest, medium weight */
.template--product .section-accordions .accordion__body-inner strong {
  color: var(--color-forest);
  font-weight: 500;
}

/* Chevron icon: sage */
.template--product .section-accordions .accordion__icon svg {
  color: var(--color-sage);
}

/* Hairline dividers: editorial */
.template--product .section-accordions .accordion__section {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ============================================
   4f. PAGE TEMPLATES (about, contact, faq, lookbook)
   Same heading var override pattern as PDP + homepage.
   ============================================ */

/* Font families now global via settings_data.json — only text-transform overrides needed */

.template--page .heading-static,
.template--page h1,
.template--page h2,
.template--page h3 {
  text-transform: none !important;
  letter-spacing: -0.02em;
}

.template--page h4,
.template--page h5 {
  font-weight: 400;
  text-transform: none !important;
}

.template--page em {
  color: var(--color-sage);
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── Full-width banners: white text with shadow (matches homepage) ── */
.template--page .section-full-width-banner .section-full-width-banner__title {
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.template--page .section-full-width-banner .section-full-width-banner__title em {
  color: #fff !important;
}

.template--page .section-full-width-banner .section-full-width-banner__subtitle {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   5. HOMEPAGE EDITORIAL OVERRIDES
   Template-level var override (same pattern as PDP).
   text-transform still uses !important — no CSS var for it.
   ============================================ */

/* Font families now global via settings_data.json.
   Only homepage-specific weight override + type scale here. */
.template--index {
  --font-heading-weight: 300;

  /* ── HP Hero Type Scale ── */
  --hp-hero-title: clamp(4.5rem, 7vw, 8rem);
  --hp-banner-title: clamp(3.2rem, 5.5vw, 6rem);
  --hp-banner-subtitle: clamp(15px, 1.6vw, 18px);
}

/* Headings: no uppercase, tighter tracking */
.template--index .heading-static,
.template--index h1,
.template--index h2,
.template--index h3 {
  text-transform: none !important;
  letter-spacing: -0.02em;
}

/* h4/h5: slightly heavier for smaller headings */
.template--index h4,
.template--index h5 {
  font-weight: 400;
  text-transform: none !important;
}

/* em = sage accent */
.template--index em {
  color: var(--color-sage) !important;
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── Dual tiles (Founder Story) ── */
.template--index .section-dual-tiles__title {
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Image tile quote: white text with shadow (matches PDP) */
.template--index .section-dual-tiles__tile:first-of-type .section-dual-tiles__title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.4;
}

.template--index .section-dual-tiles__tile:first-of-type .section-dual-tiles__title em {
  color: #fff !important;
}

.template--index .section-dual-tiles .entry,
.template--index .section-dual-tiles .entry p {
  font-family: var(--font-body-family);
  font-weight: 400;
  line-height: 1.65;
  font-size: clamp(15px, 1.6vw, 18px);
}

.template--index .section-dual-tiles .entry p {
  margin-bottom: 1.5rem;
}

.template--index .section-dual-tiles .entry p:last-child {
  margin-bottom: 0;
}

/* Strong text = editorial overline (sage, uppercase, small) */
.template--index .section-dual-tiles .entry strong {
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-text);
}

/* Italic text in dual-tiles = signature / accent */
.template--index .section-dual-tiles .entry em {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Last paragraph = signature with hairline separator */
.template--index .section-dual-tiles .entry p:last-child em {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Full-width banners (Mood Banner + Final CTA) ── */
.template--index .section-full-width-banner .section-full-width-banner__title {
  font-size: var(--hp-banner-title);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.template--index .section-full-width-banner .section-full-width-banner__title em {
  color: #fff !important;
}

.template--index .section-full-width-banner .section-full-width-banner__subtitle {
  font-family: var(--font-serif);
  font-size: var(--hp-banner-subtitle);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.template--index .section-full-width-banner .section-full-width-banner__entry {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Testimonials: editorial magazine style ── */
.template--index .section-testimonials .section-testimonials__title {
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-text);
}

.template--index .section-testimonials .testimonial__quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4;
  color: var(--color-forest);
}

.template--index .section-testimonials .testimonial__quote p {
  font-weight: 300;
  line-height: 1.5;
}

/* Bold heading inside quote */
.template--index .section-testimonials .testimonial__quote strong {
  font-weight: 500;
  display: block;
  font-style: normal;
  margin-bottom: 0.5rem;
}

.template--index .section-testimonials .testimonial__author {
  font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-text);
  font-style: normal;
}

/* Arrows: sage, subtle hover */
.template--index .section-testimonials .swiper-button {
  color: var(--color-sage);
  transition: opacity 0.3s ease;
}

.template--index .section-testimonials .swiper-button:hover {
  opacity: 0.6;
}

/* ── Trust indicators ── */
.template--index .section-trust-indicators .heading-static {
  font-weight: 400;
  letter-spacing: 0;
}

.template--index .section-trust-indicators .entry {
  font-weight: 300;
}

/* ── Hero banner ── */
.template--index .section-hero-banner .hero__title {
  font-size: var(--hp-hero-title);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.template--index .section-hero-banner .hero__title em {
  color: #fff !important;
}

.template--index .section-hero-banner .hero__subtitle {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.template--index .section-hero-banner .hero__content {
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
}

.template--index .section-hero-banner .hero__entry,
.template--index .section-hero-banner .hero__entry p {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Marquee trust bar: dark forest bg, white text ──
   NOTE: JSON color_scheme: scheme-4 doesn't sync via GitHub integration
   (Shopify ignores template JSON color scheme changes once customized).
   CSS override on inner color div is the only reliable path. */
.template--index .section-marquees > div[class*="color-"],
.template--product .section-marquees > div[class*="color-"] {
  --color-foreground: 255, 255, 255;
  --color-background: 42, 59, 52;
  --color-border: 255, 255, 255;
  --alpha-border: 0;
}

/* ── Rich text (Brand Promise pull-quote) ── */
.template--index .section-rich-text .heading-static {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-forest);
}

.template--index .section-rich-text .entry {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.7;
  font-style: italic;
  color: #6b7280;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Final CTA banner: dark forest ──
   Same pattern as marquee — JSON color scheme doesn't sync,
   so we override the inner color div vars. */
.template--index .section-full-width-banner:last-of-type > div[class*="color-"] {
  --color-foreground: 255, 255, 255;
  --color-background: 42, 59, 52;
  --color-heading-text: 255, 255, 255;
}

/* ============================================
   6. HEADER & FOOTER OVERRIDES
   Global (not template-scoped) — applies on all pages.
   ============================================ */

/* ── Announcement bar: forest bg ──
   CSS override for reliability (JSON color_scheme may not sync). */
.section-announcement-bar > div[class*="color-"] {
  --color-foreground: 255, 255, 255;
  --color-background: 42, 59, 52;
  --color-border: 255, 255, 255;
  --alpha-border: 0;
}

/* ── Header: explicit white bg ──
   Belt-and-suspenders: JSON sets scheme-1, CSS ensures it.
   NOTE: No hard `background` — the theme uses
   rgba(var(--color-background), var(--header-background-opacity, 1))
   so transparent header over hero banners works correctly. */
#header {
  --color-foreground: 42, 59, 52;
  --color-background: 255, 255, 255;
  --color-heading-text: 42, 59, 52;
}

/* ── Header nav: editorial typography ── */
.header__nav .header__link,
.header__utils .header__link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Sales page header ──
   Mobile: logo left + cart right (no hamburger, nav, search, account).
   Desktop: logo left + anchor nav center + cart right. */
.template--sales-page .header__drawer,
.template--sales-page .header__utils-item:not(.header__utils-item--cart),
.template--showcase .header__drawer,
.template--showcase .header__utils-item:not(.header__utils-item--cart),
.template--concentrate_pump .header__drawer,
.template--concentrate_pump .header__utils-item:not(.header__utils-item--cart),
.template--concentrate_tube .header__drawer,
.template--concentrate_tube .header__utils-item:not(.header__utils-item--cart),
.template--concentrate_tube_v2 .header__drawer,
.template--concentrate_tube_v2 .header__utils-item:not(.header__utils-item--cart) {
  display: none;
}

.template--sales-page .header__inner,
.template--showcase .header__inner,
.template--concentrate_pump .header__inner,
.template--concentrate_tube .header__inner,
.template--concentrate_tube_v2 .header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-vertical-padding) 0;
}

/* Logo first (DOM order is nav → logo → utils; reorder to logo → nav → utils) */
.template--sales-page .header__logo,
.template--showcase .header__logo,
.template--concentrate_pump .header__logo,
.template--concentrate_tube .header__logo,
.template--concentrate_tube_v2 .header__logo {
  order: -1;
}

/* Text logo: Cormorant Garamond bold, forest green, tight tracking.
   Matches old LP look. Applies everywhere the text fallback renders. */
.header__logo-text .h4 {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-forest, #2A3B34);
  line-height: 1;
}

/* Anchor nav link strip */
.template--sales-page .header__sales-nav-items,
.template--showcase .header__sales-nav-items,
.template--concentrate_pump .header__sales-nav-items,
.template--concentrate_tube .header__sales-nav-items,
.template--concentrate_tube_v2 .header__sales-nav-items {
  display: flex;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
}

.template--sales-page .header__sales-nav-link,
.template--showcase .header__sales-nav-link,
.template--concentrate_pump .header__sales-nav-link,
.template--concentrate_tube .header__sales-nav-link,
.template--concentrate_tube_v2 .header__sales-nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.template--sales-page .header__sales-nav-link:hover,
.template--showcase .header__sales-nav-link:hover,
.template--concentrate_pump .header__sales-nav-link:hover,
.template--concentrate_tube .header__sales-nav-link:hover,
.template--concentrate_tube_v2 .header__sales-nav-link:hover {
  opacity: 0.6;
}

/* Cart icon: dark forest green, bolder stroke, prominent badge */
.template--sales-page .header__utils-item--cart svg,
.template--showcase .header__utils-item--cart svg,
.template--concentrate_pump .header__utils-item--cart svg,
.template--concentrate_tube .header__utils-item--cart svg,
.template--concentrate_tube_v2 .header__utils-item--cart svg {
  width: 2.4rem;
  height: 2.4rem;
}
.template--sales-page .header__utils-item--cart svg path,
.template--showcase .header__utils-item--cart svg path,
.template--concentrate_pump .header__utils-item--cart svg path,
.template--concentrate_tube .header__utils-item--cart svg path,
.template--concentrate_tube_v2 .header__utils-item--cart svg path {
  stroke: var(--color-forest, #2A3B34);
  stroke-width: 1.4;
}
.template--sales-page .cart-count-badge,
.template--showcase .cart-count-badge,
.template--concentrate_pump .cart-count-badge,
.template--concentrate_tube .cart-count-badge,
.template--concentrate_tube_v2 .cart-count-badge {
  background: var(--color-forest, #2A3B34);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.2rem;
  right: -0.4rem;
  line-height: 1;
}

/* Smooth scroll + offset for sticky header.
   scroll-margin-top on sections lets scrollIntoView clear the
   sticky header regardless of its current collapsed/expanded state. */
.template--sales-page,
.template--showcase,
.template--concentrate_pump,
.template--concentrate_tube,
.template--concentrate_tube_v2 {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 80px);
}
.template--sales-page [id^="shopify-section"],
.template--showcase [id^="shopify-section"],
.template--concentrate_pump [id^="shopify-section"],
.template--concentrate_tube [id^="shopify-section"],
.template--concentrate_tube_v2 [id^="shopify-section"] {
  scroll-margin-top: 90px;
}

/* ── Footer: white bg, editorial typography ── */
#footer {
  --color-foreground: 42, 59, 52;
  --color-background: 255, 255, 255;
  --color-heading-text: 42, 59, 52;
  --color-border: 42, 59, 52;
  --alpha-border: 0.1;
  background: #fff;
}

/* Footer headings: serif */
#footer .heading-static,
#footer h5 {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-forest, #2A3B34);
}

/* Footer links: muted forest, full on hover */
#footer a {
  color: rgba(42, 59, 52, 0.55);
  transition: color 0.2s ease;
}

#footer a:hover {
  color: var(--color-forest, #2A3B34);
}

/* Footer social icons: sage accent */
#footer .footer-socials a {
  color: var(--color-sage, #9EB2A8);
}

#footer .footer-socials a:hover {
  color: var(--color-forest, #2A3B34);
}

/* Footer copyright / small text */
#footer .entry,
#footer .entry p {
  color: rgba(42, 59, 52, 0.4);
  font-size: 12px;
}

/* Newsletter input */
#footer .input__field {
  background: #fff;
  border-color: rgba(42, 59, 52, 0.15);
  color: var(--color-forest, #2A3B34);
}

#footer .input__field::placeholder {
  color: rgba(42, 59, 52, 0.35);
}

/* Country selector link */
#footer .country-drawer-trigger {
  color: rgba(42, 59, 52, 0.55);
}

/* Newsletter subtitle text */
#footer .newsletter__subtitle {
  color: rgba(255, 255, 255, 0.5);
}