/** Shopify CDN: Minification failed

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

**/
/* ============================================================
   Luminé × Grüns visual treatment
   Steal list: Work Sans font · tight heading tracking ·
   pill buttons · offset-shadow hover · 20px card radius
   ============================================================ */

/* ── CLS fix: metrics-matched fallback for Work Sans ──────────
   Work Sans .woff2 takes ~3s to download on slow mobile (verified via
   PSI). With font-display: swap, the page paints in a system fallback
   first, then re-layouts when Work Sans arrives — that's the dominant
   cause of our 0.995 CLS score.
   This @font-face declares a fallback face that uses Arial's outlines
   but with size-adjust + ascent/descent overrides so it measures
   pixel-identical to Work Sans. When Work Sans swaps in: no reflow. */
@font-face {
  font-family: "Work Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("sans-serif");
  size-adjust: 100.06%;
  ascent-override: 92.11%;
  descent-override: 24.16%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Override Shopify's auto-generated --font-body/heading-family chain to
   inject the metrics-matched fallback. Loaded after base.css, so wins. */
:root {
  --font-body-family: "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading-family: "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
.shopify-section {
  font-family: "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Heading tracking — Grüns hallmark tight letter-spacing ─ */
h1, .h1 { letter-spacing: -0.04em; font-weight: 800; }
h2, .h2 { letter-spacing: -0.035em; font-weight: 700; }
h3, .h3 { letter-spacing: -0.025em; font-weight: 700; }
h4, .h4 { letter-spacing: -0.02em; font-weight: 700; }

/* ── Buttons — brand styling for site-wide buttons (hero CTAs, etc.).
   Buy button (.product-form__submit, button[name="add"]) intentionally
   excluded — that uses default Dawn styling. */
.button,
.btn,
a.button,
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #005840 !important;
  color: #d1f843 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 20px 40px !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  min-height: 0 !important;
  transition: all 0.3s ease !important;
}

.button::before,
.button::after,
a.button::before,
a.button::after,
.shopify-challenge__button::before,
.shopify-challenge__button::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

.button:hover,
.btn:hover,
a.button:hover,
input[type="submit"]:hover {
  background-color: #005840 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Connect ATC button to the delivery-estimate block.
   Dawn defaults to .product-form { margin: 2.5rem 0 } (40px bottom) and
   .product__info-container > * + * { margin: 1.5rem 0 } (24px between blocks).
   We collapse both so the cream "Order today" box sits ~8px below BUY NOW. */
.product__info-container .product-form {
  margin-bottom: 0 !important;
}

.product__info-container > .lumine-delivery-estimate {
  margin-top: 0 !important;
}

/* ============================================================
   MARSMAN PDP STYLING — applies to product.constipation-marsman template
   ============================================================ */

/* 1. Sticky announcement bar — top discount strip stays visible while scrolling */
.shopify-section-announcement-bar,
.shopify-section[id*="announcement-bar"] {
  position: sticky;
  top: 0;
  z-index: 90;
}

/* 2. Default product title visibility is controlled per-template via JSON
   (title block enabled/disabled). The marsman template hides main-product
   at section level via `body:has(.mpdp) .shopify-section-main-product`,
   so no global title-hide CSS needed. Title renders normally everywhere else. */

/* 3. Trust ticks (Section Store benefits-list) — restyle as punchy teal circle checks */
.product__info-container [class*="block-benefits-list"] svg,
.product__info-container [class*="block-benefits-list"] [class*="icon"] {
  color: #005840 !important;
}

/* 4. Section Store benefits-list inside main-product: tighten spacing, bigger text */
.product__info-container [class*="block-benefits-list"] {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* 5. Hide the Section Store star ratings if they appear as their own block
   (we have a dedicated marsman-review-quote in the flow instead) */
.product__info-container > .ss-product-block-review-summary {
  display: none !important;
}

/* 6. Heavier headings on Marsman PDP for high-end conversion feel */
.product__info-container .mhi__headline,
.mtab__heading,
.ming__heading,
.mba__heading,
.mcv__heading,
.mfin__heading {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* 7. Pull price block + buy machinery into ONE visual frame.
   Targets the sequence: marsman-price → variant_picker/kaching → urgency → buy_trust → ATC.
   Adds a tinted card behind them so they read as one component. */
.product__info-container .mpd {
  padding-top: 0.85rem !important;
  padding-bottom: 0.75rem !important;
}
/* (Legacy rule removed — the lime-at-10% bg on .lumine-urgency-text +
   product-form was painting a yellowish halo around the buy area on
   constipation-clean. Was intended for the marsman-pdp template but
   leaked because of the broad .product__info-container selector.) */

/* 8. Collapse Dawn default gap between blocks inside main-product on this template */
.product__info-container > * + * { margin-top: 0.5rem !important; margin-bottom: 0 !important; }
.product__info-container .product-form { margin-bottom: 0 !important; }

/* 9. On the constipation-marsman template, hide main-product entirely.
   It's kept in the template JSON for product-link plumbing (so admin's
   Theme template dropdown still recognises this as a product template),
   but visually the marsman-pdp section above replaces it. */
.template-product .shopify-section-marsman-pdp ~ .shopify-section-main-product,
.section-marsman-pdp ~ .shopify-section[id*="section-main"],
[data-marsman-pdp-active] ~ .shopify-section-main-product { display: none !important; }

/* Hard fallback: hide main-product on pages where marsman-pdp section is present */
body:has(.mpdp) .shopify-section[id*="MainProduct"],
body:has(.mpdp) .shopify-section-main-product,
body:has(.mpdp) #shopify-section-main,
body:has(.mpdp) .shopify-section--main-product { display: none !important; }


/* ── Cards — 20px radius, subtle Grüns feel ─────────────── */
.card,
.card-wrapper {
  border-radius: 20px !important;
}

/* ── Image radius ─────────────────────────────────────────── */
.media img,
.product__media img {
  border-radius: 12px;
}

/* ── Low-stock badge — Lumine warm copper instead of bright orange ───── */
.product__inventory:has(.product__inventory--low) {
  color: #b25f1a;
  font-weight: 600;
}

/* ── Selection ───────────────────────────────────────────── */
::selection { background: #d1f843; color: #005840; }

/* ── Focus ───────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #005840;
  outline-offset: 3px;
  border-radius: 4px;
}

/* (Announcement bar styling reverted — colors and pill now controlled
   entirely via Theme Editor settings + color schemes. No theme CSS
   overrides applied.) */

/* ============================================================
   CONSTIPATION-CLEAN — tight vertical rhythm scoped via :has(.pdpti)
   Activates ONLY on pages where the Mars-style ticks snippet renders
   (i.e. only on the constipation-clean template).
   ============================================================ */
.product__info-container:has(.pdpti) > * + * {
  margin-top: 0.6rem !important;
  margin-bottom: 0 !important;
}
.product__info-container:has(.pdpti) .product-form {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.product__info-container:has(.pdpti) .product-form__buttons {
  margin: 0 !important;
}
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"] {
  margin-top: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}
.product__info-container:has(.pdpti) [class*="kaching"] {
  margin-bottom: 0.5rem !important;
}

/* ── Mobile: main product image full-bleed edge-to-edge ───────
   Older eyes need a bigger hero. On mobile, push the gallery
   past the page padding so the image fills the viewport width. */
@media screen and (max-width: 749px) {
  .template-product:has(.pdpti) .product__media-list,
  .template-product:has(.pdpti) .product__media-wrapper,
  .template-product:has(.pdpti) .product-media-container,
  .template-product:has(.pdpti) .slider--mobile {
    margin-left: calc(var(--page-width-margin, 0px) * -1 - 1.5rem) !important;
    margin-right: calc(var(--page-width-margin, 0px) * -1 - 1.5rem) !important;
    max-width: calc(100vw) !important;
  }
  .template-product:has(.pdpti) .product__media,
  .template-product:has(.pdpti) .product__media img {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .template-product:has(.pdpti) .product__media {
    padding: 0 !important;
  }
}

/* ============================================================
   ELARE-DERIVED DESIGN SYSTEM — constipation-clean PDP
   Directly extracted from elare.store/products/aged-garlic-extract
   (their /assets/base.css + inline :root tokens).

   Same structural language: warm grey text (not pure black),
   cream secondary bg, 6–12px radii, 2px borders, generous spacing.
   Lumine palette substituted for Elare's wine red.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

/* Design tokens scoped to constipation-clean only.
   Per brand brief (May 2026): forest green + cream + near-black + gold accent.
   Other product templates keep their existing teal/lime palette. */
.template-product:has(.pdpti) {
  --c-text: #0D1F17;                /* near-black, brief */
  --c-text-muted: rgba(13, 31, 23, 0.62);
  --c-bg: #ffffff;
  --c-bg-soft: #F2EDE3;             /* cream, brief */
  --c-accent: #1B4D3E;              /* forest green, brief */
  --c-accent-soft: rgba(27, 77, 62, 0.08);
  --c-accent-gold: #C8A96E;         /* gold accent for highlights, brief */
  --c-border: rgba(13, 31, 23, 0.1);
  --r-card: 12px;
  --r-button: 8px;
  --r-input: 6px;
  --r-text-box: 24px;
  --r-pill: 40px;
  --gap-y: 20px;                    /* mobile vertical rhythm */
  --gap-x: 20px;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
}
@media (min-width: 750px) {
  .template-product:has(.pdpti) {
    --gap-y: 40px;
    --gap-x: 40px;
  }
}

/* ── Apply tokens globally on the constipation-clean PDP ── */
.template-product:has(.pdpti) {
  color: var(--c-text);
  font-family: var(--font-body);
}
.template-product:has(.pdpti) h1,
.template-product:has(.pdpti) h2,
.template-product:has(.pdpti) h3,
.template-product:has(.pdpti) .pdpmt__heading,
.template-product:has(.pdpti) .pdphi__h1,
.template-product:has(.pdpti) [class*="ai-faq-headline"] {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
}
.template-product:has(.pdpti) p,
.template-product:has(.pdpti) li,
.template-product:has(.pdpti) button,
.template-product:has(.pdpti) span,
.template-product:has(.pdpti) [class*="ai-faq-question-text"],
.template-product:has(.pdpti) [class*="ai-faq-answer-text"] {
  font-family: var(--font-body) !important;
  color: var(--c-text);
}

/* ── 1. SECTION RHYTHM ──────────────────────────────────────
   Sibling-to-sibling gap inside the product info container.
   Default 20/40px, but a few transition points need a bigger breathing
   gap (Mars Men-style) so the 3 sections under the buy button feel
   clearly separated. */
.product__info-container:has(.pdpti) > * {
  margin-top: 0;
  margin-bottom: 0;
}
.product__info-container:has(.pdpti) > * + * {
  margin-top: var(--gap-y) !important;
}
.product__info-container:has(.pdpti) > .product-form {
  margin-top: calc(var(--gap-y) * 0.75) !important;
  margin-bottom: calc(var(--gap-y) * 0.75) !important;
}

/* Mars Men-style clear separation between:
     buy-button → 3 benefits → clinical note → 3 tabs
   Each transition gets ~28px (mobile) / 40px (desktop) of air. */
.product__info-container:has(.pdpti) > [class*="block-benefits-boxes"] {
  margin-top: 28px !important;
}
.product__info-container:has(.pdpti) > .pdpcn,
.product__info-container:has(.pdpti) > [class*="custom_liquid"]:has(.pdpcn) {
  margin-top: 24px !important;
  margin-bottom: 4px !important;
}
.product__info-container:has(.pdpti) > [class*="custom_liquid"]:has(.pdpmt) {
  margin-top: 28px !important;
}
@media (min-width: 750px) {
  .product__info-container:has(.pdpti) > [class*="block-benefits-boxes"],
  .product__info-container:has(.pdpti) > [class*="custom_liquid"]:has(.pdpmt) {
    margin-top: 40px !important;
  }
}

/* ── 2. UNIFIED CARD TREATMENT ──────────────────────────────
   Every "card" surface gets the same radius (12px), the same soft
   shadow, no competing borders. This is the single biggest "clean" lever. */
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"],
.product__info-container:has(.pdpti) .pdpmt,
.template-product:has(.pdpti) [class*="ai-faq-section"] [class*="ai-faq-container"] {
  border-radius: 12px;
}

/* Badge row — plain row, no card box. Reads as inline trust signals,
   not as another container. Single line of icons + short labels. */
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  box-shadow: none !important;
}
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"] [class*="title"] {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"] svg,
.product__info-container:has(.pdpti) [class*="block-benefits-boxes"] [class*="icon"] {
  max-width: 22px !important;
  max-height: 22px !important;
}

/* Tabs container — already has its own styling in the snippet, just ensure no double shadow */
.product__info-container:has(.pdpti) .pdpmt {
  box-shadow: none !important;
}

/* ── 3. SECTION BACKGROUND ALTERNATION ──────────────────────
   Elare alternates white ↔ cream (#fbf9f7) for section breaks.
   FAQ section uses cream. Grid rhythm: 40px desktop padding. */
.template-product:has(.pdpti) [class*="ai-faq-section"] {
  background: var(--c-bg-soft) !important;
  padding-top: calc(var(--gap-y) * 2) !important;
  padding-bottom: calc(var(--gap-y) * 2) !important;
}
.template-product:has(.pdpti) [class*="ai-faq-section"]::before {
  /* Remove the gradient divider — Goli relies on bg alternation, not lines */
  display: none !important;
}

/* ── 4. FAQ ITEM REFINEMENT ─────────────────────────────────
   Cleaner border, tighter heading tracking. Body answers gain breathing. */
.template-product:has(.pdpti) [class*="ai-faq-item"] {
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
.template-product:has(.pdpti) [class*="ai-faq-question-text"] {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}
.template-product:has(.pdpti) [class*="ai-faq-answer-text"] {
  line-height: 1.6 !important;
}
.template-product:has(.pdpti) [class*="ai-faq-headline"] {
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

/* ── 5. CIRCLES SECTION — KEEP SIMPLE ───────────────────────
   Slight shadow for depth (Goli style — shadow not border) */
.template-product:has(.pdpti) .lumine-benefits-circles__circle,
.template-product:has(.pdpti) [class*="lumine-benefits-circles"] [class*="circle"] {
  box-shadow: 0 4px 12px rgba(0,88,64,0.08);
  transition: transform 0.2s ease;
}

/* ── 6. TYPOGRAPHY HIERARCHY LOCKDOWN ───────────────────────
   Goli enforces a strict type scale. We do the same on this PDP.
   Same letter-spacing on all big headings, same line-height system. */
.template-product:has(.pdpti) h1,
.template-product:has(.pdpti) h2,
.template-product:has(.pdpti) h3,
.template-product:has(.pdpti) .pdpmt__heading {
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

/* ── 7. STICKY CTA — ELARE BUTTON SHAPE ─────────────────────
   Drop the pill. Elare uses 8px radius confident square buttons.
   2px border (transparent default), 1px letter-spacing, weight 700. */
.template-product:has(.pdpti) .msticky__btn {
  background: var(--c-accent) !important;
  color: #ffffff !important;
  border-radius: var(--r-button) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 2px solid var(--c-accent) !important;
  box-shadow: 0 4px 14px rgba(27,77,62,0.18) !important;
  min-height: 50px !important;
  padding: 12px 32px !important;
}

/* ── Force teal #005840 → forest var(--c-accent) on this template ──
   Catches inline SVG fills + colors in our pdp-* snippets that hard-code teal. */
.template-product:has(.pdpti) [fill="#005840"],
.template-product:has(.pdpti) svg circle[fill="#005840"] {
  fill: var(--c-accent) !important;
}
.template-product:has(.pdpti) [stroke="#005840"] {
  stroke: var(--c-accent) !important;
}
.template-product:has(.pdpti) .msticky {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 38%) !important;
}

/* ── 8. ANNOUNCEMENT BAR PILL — SLIGHTLY MORE SQUARED ───────
   Goli pills are softer-square (5px). Our discount-bubble is already
   close (5px). Keep as-is. (Documented for future reference.) */

/* ── 9. KILL ANY REMAINING HARSH WHITES INSIDE THE BUY ZONE ──
   The 1px solid teal border on Kaching cards looks dated next to
   the new soft-shadow card system. Soften only the OUTER wrapper. */
.product__info-container:has(.pdpti) [class*="kaching-bundles-product"],
.product__info-container:has(.pdpti) [class*="kaching-bundles-deal-block-settings"] {
  /* These are <script> tags actually — selector inert. Kept here so
     a future Kaching DOM inspection knows we tried.  No-op. */
}