/*
  ANVI AURA — "Modern Botanical Apothecary"
  Full design system redesign.

  Direction: calm, editorial, genuinely premium. Deep botanical green as the
  voice, antique gold as a restrained accent (not a texture), warm paper cream
  as the ground. Generous whitespace, confident type scale, quiet motion.

  Structure:
    0. Design tokens          7. Reviews
    1. Base & rhythm          8. Quiz
    2. Header & nav           9. FAQ
    3. Hero                  10. Footer
    4. Section headers       11. Checkout modal
    5. Product cards         12. Sliders, gallery & lightbox
    6. How it works          13. Motion & accessibility
*/

/* ========================================= */
/* 0. Design Tokens                          */
/* ========================================= */
/*
  These override the bundle's shadcn tokens (index-*.css :root). custom.css
  loads after it, so every bg-card / text-muted-foreground / border-border in
  the compiled app re-colours from here. This is the single global lever.
*/
:root {
  /* Ground: warm pressed-paper cream */
  --background: 38 42% 97%;
  --foreground: 152 16% 13%;

  /* Surfaces */
  --card: 40 50% 99%;
  --card-foreground: 152 16% 13%;
  --popover: 40 50% 99%;
  --popover-foreground: 152 16% 13%;

  /* Deep botanical green — richer and less grey than the old 145 35% 28% */
  --primary: 154 44% 18%;
  --primary-foreground: 40 45% 97%;

  --secondary: 38 30% 92%;
  --secondary-foreground: 152 16% 13%;

  --muted: 38 30% 94%;
  --muted-foreground: 152 9% 40%;

  /* Antique gold — deeper and less garish than the old 38 65% 55% */
  --accent: 36 52% 46%;
  --accent-foreground: 40 45% 97%;

  --destructive: 0 72% 48%;
  --destructive-foreground: 40 45% 97%;

  --border: 38 24% 88%;
  --input: 38 24% 88%;
  --ring: 154 44% 18%;

  /* Softer corners across every shadcn component */
  --radius: 0.875rem;

  /* Brand gradients */
  --gold-gradient: linear-gradient(135deg, hsl(36 54% 44%), hsl(40 62% 60%));
  --green-gradient: linear-gradient(135deg, hsl(154 44% 18%), hsl(150 32% 28%));
  --cream-gradient: linear-gradient(180deg, hsl(38 42% 97%), hsl(38 34% 93%));

  /* Typography */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-body: 'Lato', 'Jost', sans-serif;

  /* Ink values for direct use */
  --ink: hsl(152 16% 13%);
  --ink-soft: hsl(152 9% 40%);
  --green: hsl(154 44% 18%);
  --green-mid: hsl(150 32% 28%);
  --gold: hsl(36 52% 46%);
  --gold-light: hsl(40 62% 60%);
  --paper: hsl(38 42% 97%);
  --surface: hsl(40 50% 99%);
  --line: hsl(38 24% 88%);

  /* Layered, low-opacity shadows — depth without heaviness */
  --shadow-sm: 0 1px 2px rgba(20, 40, 28, 0.04),
               0 2px 6px rgba(20, 40, 28, 0.03);
  --shadow-md: 0 2px 4px rgba(20, 40, 28, 0.03),
               0 8px 20px -6px rgba(20, 40, 28, 0.07);
  --shadow-lg: 0 4px 8px rgba(20, 40, 28, 0.03),
               0 20px 44px -12px rgba(20, 40, 28, 0.11);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================= */
/* 1. Base & Vertical Rhythm                 */
/* ========================================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body) !important;
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.015em;
}

/* Reduced vertical padding between sections for a tighter, cohesive layout */
main > section {
  padding-top: clamp(24px, 3.5vw, 44px) !important;
  padding-bottom: clamp(24px, 3.5vw, 44px) !important;
}

/* Only the home hero manages its own vertical space (it sets 110px in
   section 3 below). Every other page's first section — Products, Ritual,
   About — must clear the fixed nav, or its title/eyebrow renders hidden
   behind the bar.
   IMPORTANT: <main> itself already ships "pt-14 md:pt-16" (61.6px / 70.4px
   computed) from the bundle — these values are ADDITIONAL on top of that,
   not the full clearance. Stacking a full nav-height value here (as an
   earlier fix did) double-counts main's own padding and leaves a much
   bigger gap than intended. Total clearance = main's padding + this value:
   mobile 61.6+44 ≈ 106px vs. 71px nav; desktop 70.4+64 ≈ 134px vs. 89px nav. */
main > section:first-child:not(:has(img[src*="hero-bg"])) {
  padding-top: 20px !important;
}
@media (min-width: 768px) {
  main > section:first-child:not(:has(img[src*="hero-bg"])) {
    padding-top: 32px !important;
  }
}

/* Alternating section grounds for gentle editorial banding */
section.bg-muted {
  background-color: hsl(38 34% 94%) !important;
}
section.bg-background {
  background-color: var(--paper) !important;
}

::selection {
  background: hsl(36 52% 46% / 0.22);
  color: var(--ink);
}

/* Refined scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(38 34% 94%);
}
::-webkit-scrollbar-thumb {
  background: hsl(152 14% 62%);
  border-radius: 10px;
  border: 3px solid hsl(38 34% 94%);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--green-mid);
}

/* Keyboard focus — visible, on-brand */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ========================================= */
/* 2. Header & Navigation                    */
/* ========================================= */
nav.fixed {
  background-color: hsl(38 42% 97% / 0.82) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid hsl(38 24% 88% / 0.9) !important;
  box-shadow: 0 1px 24px rgba(20, 40, 28, 0.035) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Over the dark hero the bar dissolves; it solidifies on scroll.
   Toggled by header-cta.js. */
nav.fixed.nav-over-hero {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
nav.fixed.nav-over-hero .hidden.md\:flex a[href] {
  color: hsl(40 40% 95% / 0.82) !important;
}
nav.fixed.nav-over-hero .hidden.md\:flex a[href]:hover,
nav.fixed.nav-over-hero .hidden.md\:flex a[href].text-primary {
  color: hsl(40 45% 98%) !important;
}
nav.fixed.nav-over-hero .hidden.md\:flex a[href]::after {
  background: hsl(40 62% 68%) !important;
}
nav.fixed.nav-over-hero button[aria-label="Toggle menu"] svg {
  color: hsl(40 45% 97%) !important;
  stroke: hsl(40 45% 97%) !important;
}
/* Logo lockup is dark-on-white artwork — give it a light chip so it reads
   on the photograph without looking pasted on. */
nav.fixed.nav-over-hero img[alt="Anvi Aura"] {
  background: hsl(40 45% 97% / 0.9) !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
}
@media (min-width: 768px) {
  nav.fixed.nav-over-hero .hidden.md\:flex a[href].header-shop-cta {
    background: hsl(40 45% 97% / 0.14) !important;
    color: hsl(40 45% 98%) !important;
    border: 1px solid hsl(40 45% 97% / 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  nav.fixed.nav-over-hero .hidden.md\:flex a[href].header-shop-cta:hover {
    background: hsl(40 62% 62%) !important;
    color: hsl(154 46% 11%) !important;
    border-color: transparent !important;
  }
}

/* Logo — sized down from the old oversized 65/75px for a balanced bar */
nav.fixed img[alt="Anvi Aura"] {
  height: 52px !important;
  width: auto !important;
  transition: opacity 0.3s var(--ease) !important;
}
nav.fixed img[alt="Anvi Aura"]:hover {
  opacity: 0.78;
}
@media (min-width: 768px) {
  nav.fixed img[alt="Anvi Aura"] {
    height: 60px !important;
  }
}

/* Nav links */
nav.fixed .hidden.md\:flex a[href] {
  position: relative !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  padding-bottom: 6px !important;
  transition: color 0.28s var(--ease) !important;
}
nav.fixed .hidden.md\:flex a[href]:hover {
  color: var(--green) !important;
}
nav.fixed .hidden.md\:flex a[href].text-primary {
  color: var(--green) !important;
  font-weight: 600 !important;
}

/* Underline: a fine gold rule, drawn left-to-right */
nav.fixed .hidden.md\:flex a[href]::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.32s var(--ease) !important;
}
nav.fixed .hidden.md\:flex a[href]:hover::after,
nav.fixed .hidden.md\:flex a[href].text-primary::after {
  transform: scaleX(1) !important;
}

/* Mobile hamburger — the bundle's .text-foreground wins on specificity,
   so target the icon itself rather than the button. */
nav.fixed button[aria-label="Toggle menu"] svg {
  color: var(--green) !important;
  stroke: var(--green) !important;
  transition: opacity 0.25s var(--ease) !important;
}
nav.fixed button[aria-label="Toggle menu"]:hover svg {
  opacity: 0.6;
}

/* Header "Shop Now" CTA (injected by header-cta.js).
   Selectors are qualified with "nav.fixed .hidden.md\:flex" — the same
   prefix the generic nav-link color rule uses — so this wins on specificity
   instead of losing to it (both are !important; without the matching
   prefix the link rule's dark-green text was winning, making the CTA text
   nearly invisible on its own dark-green pill). */
.header-shop-cta {
  display: none !important;
}
@media (min-width: 768px) {
  nav.fixed .hidden.md\:flex a[href].header-shop-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--green) !important;
    color: hsl(40 45% 97%) !important;
    font-family: var(--font-body) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 11px 26px !important;
    border-radius: 100px !important;
    margin-left: 12px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color 0.3s var(--ease),
                transform 0.3s var(--ease),
                box-shadow 0.3s var(--ease) !important;
    white-space: nowrap !important;
  }
  .header-shop-cta::after {
    display: none !important; /* no nav underline on the button */
  }
  nav.fixed .hidden.md\:flex a[href].header-shop-cta:hover {
    background: var(--gold) !important;
    color: hsl(152 30% 12%) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
  }
}

/* ========================================= */
/* 3. Hero                                   */
/* ========================================= */
section:has(img[src*="hero-bg"]),
section:has(img[alt="Anvi Aura skincare"]),
section.relative.min-h-\[85vh\],
section.relative.min-h-screen {
  background-color: var(--paper) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 74vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 80px !important;
  padding-bottom: 32px !important;
}

/* Background photograph — natural, not blown out like the old 1.35 brightness */
section:has(img[src*="hero-bg"]) img.w-full.h-full.object-cover,
section:has(img[alt="Anvi Aura skincare"]) img.w-full.h-full.object-cover,
section.relative.min-h-\[85vh\] img.w-full.h-full.object-cover,
section.relative.min-h-screen img.w-full.h-full.object-cover {
  filter: saturate(0.78) brightness(0.82) contrast(1.02) !important;
  animation: hero-drift 34s ease-in-out infinite !important;
  transform-origin: center !important;
  will-change: transform !important;
}

@keyframes hero-drift {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1.09); }
}

/* Scrim: a warm cream gradient that lifts the left/centre for dark type,
   replacing the old flat white radial wash. */
section:has(img[src*="hero-bg"]) .absolute.inset-0 [class*="bg-foreground"],
section.relative.min-h-\[85vh\] .absolute.inset-0 [class*="bg-foreground"],
section.relative.min-h-screen .absolute.inset-0 [class*="bg-foreground"] {
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 45%,
      hsl(154 40% 10% / 0.14) 0%,
      hsl(154 44% 7% / 0.5) 100%
    ),
    linear-gradient(
      180deg,
      hsl(154 44% 8% / 0.46) 0%,
      hsl(154 40% 9% / 0.34) 45%,
      hsl(154 44% 7% / 0.6) 100%
    ) !important;
  z-index: 2 !important;
}

/* Content column — the old build wrapped this in a heavy floating glass box.
   Now it sits directly on the scrim: calmer, more editorial, more premium. */
section:has(img[src*="hero-bg"]) .relative.z-10,
section.relative.min-h-\[85vh\] .relative.z-10,
section.relative.min-h-screen .relative.z-10 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 24px !important;
  max-width: 46rem !important;
  z-index: 10 !important;
  animation: none !important;
}

/* Eyebrow: "Rooted in Ritual. Crafted from Botanicals." — compact rounded border badge */
section:has(img[src*="hero-bg"]) .relative.z-10 > p:first-of-type,
section.relative.min-h-\[85vh\] .relative.z-10 > p:first-of-type,
section.relative.min-h-screen .relative.z-10 > p:first-of-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: hsl(40 62% 88%) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  text-shadow: none !important;
}

/* Headline — the anchor of the page */
section:has(img[src*="hero-bg"]) h1,
section.relative.min-h-\[85vh\] h1,
section.relative.min-h-screen h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.3rem, 6vw, 3.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  color: hsl(40 45% 97%) !important;
  text-shadow: 0 2px 30px hsl(154 44% 6% / 0.4) !important;
  margin-bottom: 16px !important;
}

/* "Natural Aura" — a still gold gradient, no perpetual shimmer */
section:has(img[src*="hero-bg"]) h1 span,
section.relative.min-h-\[85vh\] h1 span,
section.relative.min-h-screen h1 span {
  background: linear-gradient(100deg, hsl(38 68% 62%), hsl(44 82% 78%)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: italic !important;
  font-weight: 500 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Product line */
section:has(img[src*="hero-bg"]) .relative.z-10 > p:nth-of-type(2),
section.relative.min-h-\[85vh\] .relative.z-10 > p:nth-of-type(2),
section.relative.min-h-screen .relative.z-10 > p:nth-of-type(2) {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: hsl(40 30% 88% / 0.9) !important;
  margin-bottom: 12px !important;
  text-shadow: none !important;
}

/* Supporting paragraph */
section:has(img[src*="hero-bg"]) .relative.z-10 > p:nth-of-type(3),
section.relative.min-h-\[85vh\] .relative.z-10 > p:nth-of-type(3),
section.relative.min-h-screen .relative.z-10 > p:nth-of-type(3) {
  font-family: var(--font-body) !important;
  font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: hsl(40 25% 90% / 0.82) !important;
  max-width: 34rem !important;
  margin: 0 auto 26px auto !important;
  text-shadow: none !important;
}

/* --- Hero buttons --- */
/* Primary: solid botanical green. Confident, no pulse, no shimmer loop. */
section:has(img[src*="hero-bg"]) .bg-gradient-gold,
section:has(img[src*="hero-bg"]) [class*="bg-gradient-gold"],
section.relative.min-h-\[85vh\] .bg-gradient-gold,
section.relative.min-h-screen .bg-gradient-gold {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, hsl(38 62% 56%), hsl(42 72% 68%)) !important;
  color: hsl(154 46% 11%) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 14px 34px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: var(--shadow-md) !important;
  transition: background-color 0.32s var(--ease),
              transform 0.32s var(--ease),
              box-shadow 0.32s var(--ease) !important;
  animation: none !important;
}
section:has(img[src*="hero-bg"]) .bg-gradient-gold::after,
section.relative.min-h-\[85vh\] .bg-gradient-gold::after,
section.relative.min-h-screen .bg-gradient-gold::after {
  display: none !important; /* retire the old shimmer sweep */
}
section:has(img[src*="hero-bg"]) .bg-gradient-gold:hover,
section.relative.min-h-\[85vh\] .bg-gradient-gold:hover,
section.relative.min-h-screen .bg-gradient-gold:hover {
  background: linear-gradient(135deg, hsl(40 70% 64%), hsl(44 80% 76%)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px hsl(154 44% 5% / 0.4) !important;
}
section:has(img[src*="hero-bg"]) .bg-gradient-gold:active,
section.relative.min-h-\[85vh\] .bg-gradient-gold:active,
section.relative.min-h-screen .bg-gradient-gold:active {
  transform: translateY(0) !important;
}

/* Secondary: quiet outline */
section:has(img[src*="hero-bg"]) [class*="border-primary-foreground"],
section.relative.min-h-\[85vh\] [class*="border-primary-foreground"],
section.relative.min-h-screen [class*="border-primary-foreground"] {
  background: hsl(40 45% 97% / 0.06) !important;
  border: 1px solid hsl(40 45% 97% / 0.42) !important;
  border-radius: 100px !important;
  padding: 14px 34px !important;
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: hsl(40 45% 97%) !important;
  backdrop-filter: blur(6px) !important;
  transition: background-color 0.32s var(--ease),
              border-color 0.32s var(--ease),
              transform 0.32s var(--ease) !important;
}
section:has(img[src*="hero-bg"]) [class*="border-primary-foreground"]:hover,
section.relative.min-h-\[85vh\] [class*="border-primary-foreground"]:hover,
section.relative.min-h-screen [class*="border-primary-foreground"]:hover {
  background: hsl(40 45% 97% / 0.16) !important;
  border-color: hsl(40 45% 97% / 0.75) !important;
  color: hsl(40 45% 97%) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* Hero trust strip (injected by trust-strip.js) */
.hero-trust-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px 12px !important;
  margin-top: 26px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.hero-trust-badge {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: hsl(40 35% 94%) !important;
  background: hsl(40 45% 97% / 0.1) !important;
  border: 1px solid hsl(40 45% 97% / 0.28) !important;
  border-radius: 100px !important;
  padding: 7px 15px !important;
  white-space: nowrap !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* --- Mobile: compact hero ---
   The stock layout stacks six blocks (three separate tagline-ish texts, then
   full-width stacked CTAs, then a wrapping trust strip) for a 511px content
   column — nearly a full phone screen before anything else is visible.
   This tightens every band and puts the two CTAs side by side.
   Capped at 640px — that cleanly separates phones (≤430px on current
   devices) from tablets. These font sizes (8.5px eyebrow, 9px buttons) are
   tuned for a phone and would read as undersized on a ~700px tablet, which
   keeps the base treatment instead. */
@media (max-width: 640px) {
  section:has(img[src*="hero-bg"]),
  section.relative.min-h-\[85vh\],
  section.relative.min-h-screen {
    min-height: 0 !important;      /* let the content define the height */
    padding-top: 72px !important;
    padding-bottom: 24px !important;
  }

  section:has(img[src*="hero-bg"]) .relative.z-10,
  section.relative.min-h-\[85vh\] .relative.z-10,
  section.relative.min-h-screen .relative.z-10 {
    padding: 0 20px !important;
  }

  /* Eyebrow — 0.28em tracking pushed this onto two lines; pull it back */
  section:has(img[src*="hero-bg"]) .relative.z-10 > p:first-of-type,
  section.relative.min-h-\[85vh\] .relative.z-10 > p:first-of-type,
  section.relative.min-h-screen .relative.z-10 > p:first-of-type {
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }

  section:has(img[src*="hero-bg"]) h1,
  section.relative.min-h-\[85vh\] h1,
  section.relative.min-h-screen h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.45rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 12px !important;
  }

  section:has(img[src*="hero-bg"]) .relative.z-10 > p:nth-of-type(2),
  section.relative.min-h-\[85vh\] .relative.z-10 > p:nth-of-type(2),
  section.relative.min-h-screen .relative.z-10 > p:nth-of-type(2) {
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
  }

  section:has(img[src*="hero-bg"]) .relative.z-10 > p:nth-of-type(3),
  section.relative.min-h-\[85vh\] .relative.z-10 > p:nth-of-type(3),
  section.relative.min-h-screen .relative.z-10 > p:nth-of-type(3) {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    max-width: 21rem !important;
    margin: 0 auto 20px auto !important;
  }

  /* CTAs side by side — stacked full-width buttons cost ~110px */
  section:has(img[src*="hero-bg"]) .relative.z-10 > div.flex,
  section.relative.min-h-\[85vh\] .relative.z-10 > div.flex,
  section.relative.min-h-screen .relative.z-10 > div.flex {
    flex-direction: row !important;
    gap: 8px !important;
  }
  section:has(img[src*="hero-bg"]) .relative.z-10 > div.flex > a,
  section.relative.min-h-\[85vh\] .relative.z-10 > div.flex > a,
  section.relative.min-h-screen .relative.z-10 > div.flex > a {
    flex: 1 1 0 !important;
    padding: 12px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  .hero-trust-strip {
    gap: 6px !important;
    margin-top: 18px !important;
    padding-top: 0 !important;
  }
  .hero-trust-badge {
    font-size: 8.5px !important;
    letter-spacing: 0.1em !important;
    padding: 5px 10px !important;
  }
}


/* ========================================= */
/* 4. Section Headers                        */
/* ========================================= */
/* Eyebrow badge above section titles — compact, beautiful rounded pill badge */
p[class*="tracking-[0.3em]"].uppercase,
span[class*="tracking-[0.3em]"].uppercase,
p[class*="tracking-[0.3em]"].text-muted-foreground,
span[class*="tracking-[0.3em]"].text-muted-foreground {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  background-color: hsl(36 52% 46% / 0.08) !important;
  border: 1px solid hsl(36 52% 46% / 0.35) !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(20, 40, 28, 0.04) !important;
  transition: all 0.25s ease !important;
}

p[class*="tracking-[0.3em]"]:hover,
span[class*="tracking-[0.3em]"]:hover {
  background-color: hsl(36 52% 46% / 0.15) !important;
  border-color: hsl(36 52% 46% / 0.5) !important;
}

p[class*="tracking-[0.3em]"]::before,
p[class*="tracking-[0.3em]"]::after,
span[class*="tracking-[0.3em]"]::before,
span[class*="tracking-[0.3em]"]::after {
  content: none !important;
  display: none !important;
}

/* Section headings */
main section h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.54rem, 3.5vw, 2.59rem) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  color: var(--green) !important;
  margin-bottom: 14px !important;
}
main section h2 span {
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
}

/* ========================================= */
/* 5. Product & Bundle Cards                 */
/* ========================================= */
.bg-card {
  background-color: var(--surface) !important;
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease) !important;
}
.bg-card:hover {
  transform: translateY(-5px) !important;
  border-color: hsl(36 52% 46% / 0.4) !important;
  box-shadow: var(--shadow-lg) !important;
}

a.bg-card,
.bg-card.border-2,
.grid .bg-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
}

/* Image well — generous and square, the way skincare product shots read best.
   The old build squashed these to a 1.15:1 / 220px letterbox. */
a.bg-card .aspect-square,
.bg-card.border-2 .aspect-square,
.grid .bg-card .aspect-square {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  background-color: hsl(38 34% 95%) !important;
  position: relative !important;
}

a.bg-card img,
.bg-card.border-2 img,
.grid .bg-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s var(--ease) !important;
}
a.bg-card:hover img,
.bg-card.border-2:hover img,
.grid .bg-card:hover img {
  transform: scale(1.05) !important;
}

/* Details block — real padding, room to read */
a.bg-card .p-4,
a.bg-card .md\:p-5,
a.bg-card .md\:p-6,
.bg-card.border-2 .p-4,
.bg-card.border-2 .md\:p-5,
.bg-card.border-2 .md\:p-6,
.grid .bg-card .p-4,
.grid .bg-card .md\:p-5,
.grid .bg-card .md\:p-6 {
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  gap: 5px !important;
  text-align: center !important;
  align-items: center !important;
}

/* Category line — was an unreadable 9px.
   Must be scoped to the subtitle's own tracking-[0.2em] class: review cards
   are ALSO .bg-card inside a .grid, so a bare "p.font-body" here turned every
   review quote into uppercase 9.5px gold. */
a.bg-card p.font-body[class*="tracking-[0.2em]"],
.bg-card.border-2 p.font-body[class*="tracking-[0.2em]"],
.grid .bg-card p.font-body[class*="tracking-[0.2em]"] {
  font-family: var(--font-body) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 0 auto 2px auto !important;
  text-align: center !important;
}

/* Product name */
a.bg-card h3,
.bg-card.border-2 h3,
.grid .bg-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--green) !important;
  margin: 0 auto !important;
  line-height: 1.25 !important;
  text-align: center !important;
  /* let long names wrap instead of the old ellipsis clip */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Price */
a.bg-card .font-heading.text-lg,
.bg-card.border-2 .font-heading.text-lg,
.grid .bg-card .font-heading.text-lg,
.product-price-row .font-heading {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Native price row — fallback bottom-alignment for the moment before
   additional-images.js re-classes it as .product-price-row (or if it fails). */
a.bg-card .p-4 > div:last-child,
a.bg-card .md\:p-5 > div:last-child,
a.bg-card .md\:p-6 > div:last-child,
.bg-card.border-2 .p-4 > div:last-child,
.grid .bg-card .p-4 > div:last-child,
.grid .bg-card .md\:p-5 > div:last-child,
.grid .bg-card .md\:p-6 > div:last-child {
  margin-top: auto !important;
}

/* Any row holding a Buy Now button. The bundle ships TWO variants: the
   injected .product-price-row (w-full) and a bare "flex items-center
   justify-between mt-3" that is only ~155px wide, which collided the price
   into the button at 0px gap. This normalises both. */
.bg-card div:has(> .buy-now-btn) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: none !important;
}
.bg-card div:has(> .buy-now-btn) > *:first-child {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.bg-card .buy-now-btn {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* Price row (injected) */
.product-price-row {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 10px !important;
}

/* Struck-through original price */
.line-through {
  color: hsl(152 8% 58%) !important;
  font-size: 0.8rem !important;
}

/* Badges (Best Seller / Most Popular / Trending) */
a.bg-card span.bg-gradient-gold,
.bg-card .absolute.top-3.left-3 span,
.bg-card [class*="absolute"][class*="top-"] span {
  background: hsl(38 42% 97% / 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--green) !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 100px !important;
  border: 1px solid hsl(36 52% 46% / 0.28) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- Buy Now button --- */
/* :not(section) is essential — the FAQ wrapper is <section class="bg-card">,
   so a bare ".bg-card button" turned every accordion trigger into a solid
   green Buy Now pill. */
.bg-card:not(section) button:not([aria-expanded]):not(.text-primary),
.bg-card:not(section) .bg-gradient-gold,
.buy-now-btn {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: hsl(40 45% 97%) !important;
  background: var(--green) !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  width: max-content !important;
  align-self: center !important;
  transition: background-color 0.3s var(--ease),
              transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease) !important;
}
/* retire the shimmer pseudo-element */
.bg-card button::after,
.bg-card .bg-gradient-gold::after,
.bg-card button.bg-gradient-gold::after,
.buy-now-btn::after {
  display: none !important;
}
.bg-card:not(section) button:not([aria-expanded]):not(.text-primary):hover,
.bg-card:not(section) .bg-gradient-gold:hover,
.buy-now-btn:hover {
  background: var(--gold) !important;
  color: hsl(152 30% 12%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}
.bg-card:not(section) button:not([aria-expanded]):not(.text-primary):active,
.buy-now-btn:active {
  transform: translateY(0) !important;
}

/* "Ingredients" disclosure link (injected) */
.bg-card button.text-primary,
.dummy-ingredients-trigger {
  background: none !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  align-self: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  transition: color 0.25s var(--ease) !important;
}
.bg-card button.text-primary:hover,
.dummy-ingredients-trigger:hover {
  background: none !important;
  color: var(--gold) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Ultimate bundle card — user asked to make this match the other three
   bundle cards exactly (was a standalone dark-green treatment; now uniform
   white/cream like every other card, only a "Best Value" badge sets it
   apart). Every other .bg-card rule above already applies generically. */
.bg-card.bg-gradient-green {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  --muted-foreground: 152 9% 40%;
}
.bg-card.bg-gradient-green h3,
.bg-card.bg-gradient-green .font-heading {
  color: var(--green) !important;
}
.bg-card.bg-gradient-green .aspect-square {
  background-color: hsl(38 34% 95%) !important;
}
.bg-card.bg-gradient-green .text-primary-foreground,
.bg-card.bg-gradient-green .product-price-row .font-heading {
  color: var(--ink) !important;
}
.bg-card.bg-gradient-green .text-primary-foreground\/50,
.bg-card.bg-gradient-green .line-through {
  color: hsl(152 8% 58%) !important;
}
.bg-card.bg-gradient-green .text-primary-foreground\/80,
.bg-card.bg-gradient-green .text-muted-foreground\/90 {
  color: var(--ink-soft) !important;
}
.bg-card.bg-gradient-green .product-price-row {
  border-top-color: hsl(38 24% 88% / 0.8) !important;
}
.bg-card.bg-gradient-green .dummy-ingredients-trigger {
  color: var(--ink-soft) !important;
}
.bg-card.bg-gradient-green .dummy-ingredients-trigger:hover {
  color: var(--gold) !important;
}

/* Equal-height bundle grid */
.bg-muted .grid .bg-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.bg-muted .grid .bg-card > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 22px 22px 24px !important;
}

/* Grid gutters */
main section .grid {
  gap: 26px !important;
}

/* ========================================= */
/* 6. How It Works                           */
/* ========================================= */
section .grid.grid-cols-2.md\:grid-cols-4 > div {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  padding: 26px 14px 0 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: border-color 0.35s var(--ease) !important;
}
section .grid.grid-cols-2.md\:grid-cols-4 > div:hover {
  transform: none !important;
  background: transparent !important;
  border-top-color: var(--gold) !important;
  box-shadow: none !important;
}

/* Step number — a large outlined serif numeral, not a gold coin */
section .grid.grid-cols-2.md\:grid-cols-4 span.font-heading {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  line-height: 1 !important;
  background: none !important;
  color: hsl(36 52% 46% / 0.42) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 0 14px 0 !important;
  box-shadow: none !important;
}

/* Step icon medallion — bg-primary/10 read as flat grey on cream */
section .grid.grid-cols-2.md\:grid-cols-4 .rounded-full {
  background: hsl(154 44% 18% / 0.06) !important;
  border: 1px solid hsl(36 52% 46% / 0.32) !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 18px 0 !important;
  transition: background-color 0.35s var(--ease),
              border-color 0.35s var(--ease) !important;
}
section .grid.grid-cols-2.md\:grid-cols-4 > div:hover .rounded-full {
  background: hsl(154 44% 18% / 0.1) !important;
  border-color: var(--gold) !important;
}
section .grid.grid-cols-2.md\:grid-cols-4 .rounded-full svg {
  color: var(--green) !important;
  stroke: var(--green) !important;
  width: 22px !important;
  height: 22px !important;
}

/* "Step N" label */
section .grid.grid-cols-2.md\:grid-cols-4 span {
  font-family: var(--font-body) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

section .grid.grid-cols-2.md\:grid-cols-4 h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--green) !important;
  margin-bottom: 8px !important;
}
section .grid.grid-cols-2.md\:grid-cols-4 p {
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
}

/* ========================================= */
/* 7. Reviews                                */
/* ========================================= */
/* Google Reviews header lockup: keep Google icon and label perfectly centered together */
section .flex:has(> svg):has(> span[class*="tracking-"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
}

section .flex:has(> svg):has(> span[class*="tracking-"]) > span {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

section .flex:has(> svg):has(> span[class*="tracking-"]) > svg {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

section.bg-background .grid > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease) !important;
}
section.bg-background .grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: hsl(36 52% 46% / 0.35) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Stars */
section.bg-background svg.text-accent,
section.bg-background svg[fill="currentColor"] {
  color: var(--gold) !important;
  filter: none !important;
}

/* Quote text — readable, editorial, never small-caps */
section.bg-background .grid > div p.flex-1,
section.bg-background .grid > div p[class*="text-foreground"] {
  font-family: var(--font-body) !important;
  font-size: 0.925rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}

section.bg-background .grid > div p {
  line-height: 1.7 !important;
}

/* Reviewer avatar initials */
section.bg-background .rounded-full {
  background: var(--green) !important;
  color: hsl(40 45% 97%) !important;
  font-family: var(--font-heading) !important;
}

/* Reviewer avatar & author layout - CENTER ALIGNED */
section.bg-background .grid > div > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  width: 100% !important;
}

section.bg-background .grid > div > div:last-child span {
  text-align: center !important;
}

/* ========================================= */
/* 8. Quiz                                   */
/* ========================================= */
#quiz {
  background-color: hsl(38 34% 94%) !important;
}

#quiz .bg-card {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-md) !important;
  padding: clamp(24px, 4vw, 44px) !important;
}
#quiz .bg-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--line) !important;
}

/* Answer options - Compact & Sleek */
#quiz .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 640px) {
  #quiz .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

#quiz button.border-border {
  border: 1px solid var(--line) !important;
  background-color: var(--paper) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  transition: border-color 0.25s var(--ease),
              background-color 0.25s var(--ease),
              transform 0.25s var(--ease) !important;
}
#quiz button.border-border:hover {
  border-color: var(--green) !important;
  background-color: hsl(154 44% 18% / 0.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
#quiz button.border-border:active {
  transform: translateY(0) !important;
}

/* Result image */
#quiz .text-center img {
  max-width: 210px !important;
  border-radius: 16px !important;
  margin: 18px auto !important;
  box-shadow: var(--shadow-md) !important;
}

/* ========================================= */
/* 9. FAQ                                    */
/* ========================================= */
/* The FAQ wrapper is <section class="bg-card">, so it inherits the card
   treatment above. Reset it — a full-bleed section must not be a card. */
section.bg-card,
section.bg-card:hover {
  background-color: var(--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

/* Card-style accordion — each question is its own soft surface card with a
   gap between items, matching the product-card language elsewhere on the
   site (rather than plain hairline rows). */
section.bg-card .space-y-2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

section.bg-card .space-y-2 > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.32s var(--ease),
              box-shadow 0.32s var(--ease),
              background-color 0.32s var(--ease) !important;
}
section.bg-card .space-y-2 > div:hover {
  border-color: hsl(36 52% 46% / 0.45) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Open card: lifted, gold-edged, and tinted just enough to read as active */
section.bg-card .space-y-2 div[data-state="open"] {
  background-color: hsl(36 52% 46% / 0.045) !important;
  border-color: hsl(36 52% 46% / 0.55) !important;
  box-shadow: var(--shadow-md) !important;
}

section.bg-card .space-y-2 button {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--green) !important;
  padding: 18px 12px !important;
  text-align: left !important;
  gap: 16px !important;
}
section.bg-card .space-y-2 button[data-state="open"] {
  color: var(--green) !important;
  padding-bottom: 12px !important;
}

/* Chevron sits in a soft round well so it reads as a control */
section.bg-card .space-y-2 button svg {
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
  padding: 6px !important;
  border-radius: 50% !important;
  background: hsl(154 44% 18% / 0.06) !important;
  color: var(--green) !important;
  transition: background-color 0.3s var(--ease),
              color 0.3s var(--ease),
              transform 0.3s var(--ease) !important;
}
section.bg-card .space-y-2 button[data-state="open"] svg {
  background: var(--gold) !important;
  color: hsl(40 45% 97%) !important;
  filter: none !important;
}

/* Answer copy */
section.bg-card .space-y-2 [data-state="open"] p,
section.bg-card .space-y-2 [role="region"] {
  font-size: 0.925rem !important;
  line-height: 1.75 !important;
  color: var(--ink-soft) !important;
  padding: 0 12px 20px 12px !important;
}

@media (max-width: 767px) {
  section.bg-card .space-y-2 {
    gap: 10px !important;
  }
  section.bg-card .space-y-2 > div {
    border-radius: 14px !important;
  }
  section.bg-card .space-y-2 button {
    font-size: 12.5px !important;
    padding: 15px 8px !important;
    gap: 12px !important;
  }
  section.bg-card .space-y-2 button svg {
    width: 23px !important;
    height: 23px !important;
  }
  section.bg-card .space-y-2 [data-state="open"] p,
  section.bg-card .space-y-2 [role="region"] {
    font-size: 0.875rem !important;
    padding: 0 8px 16px 8px !important;
  }
}

/* ========================================= */
/* 10. Footer                                */
/* ========================================= */
/* Light cream footer — sits on the same paper ground as the page, separated
   only by a hairline gold rule. Airy and minimal rather than a heavy dark
   slab. (The bundle ships this as <footer class="bg-primary
   text-primary-foreground">, so both the green background and the ivory text
   colour have to be overridden here, plus every ivory-on-dark colour below.) */
/* Compact, centred footer — logo mark + contact, one column on every screen.
   Dark botanical green ground with crisp white typography. */
footer.bg-primary {
  background-color: var(--green) !important; /* Dark botanical green */
  border-top: 1px solid hsl(36 52% 46% / 0.4) !important;
  color: #ffffff !important;
  padding-top: 36px !important;
  padding-bottom: 24px !important;
  position: relative !important;
  text-align: center !important;
}
footer.bg-primary::before {
  display: none !important;
}

/* Collapse the grid into a centred column */
footer.bg-primary .grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
footer.bg-primary .grid > div {
  width: 100% !important;
  text-align: center !important;
}

/* Logo mark */
.footer-logo {
  display: block !important;
  height: 78px !important;
  width: auto !important;
  margin: 0 auto 12px auto !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)) !important;
}
footer h3,
footer h4 {
  display: none !important;
}

/* Quick links: horizontal centred row */
footer .flex.flex-col {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 22px !important;
  opacity: 1 !important;
}

footer p {
  font-family: var(--font-body) !important;
  font-size: 15.5px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.7 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Brand tagline */
footer .grid > div:first-child > p {
  max-width: 32rem !important;
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Contact block */
footer .grid > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 18px !important;
}
footer .grid > div:last-child p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

footer a[href] {
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 15.5px !important;
  letter-spacing: 0.02em !important;
  transition: color 0.28s var(--ease) !important;
  display: inline-block;
}
footer a[href]:hover {
  color: var(--gold-light) !important;
  transform: none !important;
  text-shadow: none !important;
}

footer .border-t {
  border-color: rgba(255, 255, 255, 0.18) !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px 14px !important;
}
footer .border-t p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.footer-credit {
  position: relative !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
@media (min-width: 480px) {
  .footer-credit::before {
    content: "" !important;
    position: absolute !important;
    left: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 11px !important;
    background: rgba(255, 255, 255, 0.25) !important;
  }
}

.footer-credit a[href] {
  color: var(--gold-light) !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  text-decoration: none !important;
  transition: color 0.28s var(--ease) !important;
}
.footer-credit a[href]:hover {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

@media (max-width: 767px) {
  /* Phone: same centred single-column footer, just tighter. The layout is
     already collapsed above, so this only trims scale and spacing. */
  footer.bg-primary {
    padding-top: 30px !important;
    padding-bottom: 18px !important;
  }
  footer.bg-primary .grid {
    gap: 13px !important;
  }
  .footer-logo {
    height: 64px !important;
    margin-bottom: 10px !important;
  }
  footer .grid > div:first-child > p {
    max-width: 21rem !important;
    font-size: 14.5px !important;
  }
  footer .flex.flex-col {
    gap: 7px 16px !important;
  }
  footer p,
  footer a[href] {
    font-size: 14.5px !important;
  }
  footer .border-t p {
    font-size: 13px !important;
  }

  footer .border-t {
    width: 100% !important;
    text-align: center !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
  }
}

/* ========================================= */
/* 11. Checkout Modal                        */
/* ========================================= */
.checkout-modal {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background-color: hsl(152 30% 8% / 0.55) !important;
  transition: opacity 0.35s var(--ease) !important;
}

.checkout-modal-content {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 90px rgba(15, 30, 20, 0.3) !important;
  padding: 28px !important;
  transform: scale(0.97) translateY(14px) !important;
  transition: transform 0.4s var(--ease) !important;
  max-width: 430px !important;
}
.checkout-modal.show .checkout-modal-content {
  transform: scale(1) translateY(0) !important;
}

.close-modal {
  color: var(--ink-soft) !important;
  top: 20px !important;
  right: 24px !important;
  font-size: 26px !important;
  transition: color 0.2s var(--ease) !important;
}
.close-modal:hover {
  color: var(--green) !important;
  transform: none !important;
}

.checkout-modal h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--green) !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

.qr-container {
  background: hsl(38 34% 95%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.qr-container img {
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  max-width: 130px !important;
  margin-bottom: 10px !important;
}
.qr-container img:hover {
  transform: none;
}
.qr-container p {
  color: var(--ink) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  line-height: 1.5 !important;
}
.qr-container p strong {
  word-break: break-all !important;
  color: var(--green) !important;
}
.qr-hint {
  color: var(--ink-soft) !important;
  font-size: 10px !important;
  margin-top: 6px !important;
}

.checkout-form .form-group {
  margin-bottom: 12px !important;
}
.checkout-form .form-group label {
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form input[type="number"],
.checkout-form textarea {
  border: 1px solid var(--line) !important;
  background-color: var(--paper) !important;
  border-radius: 10px !important;
  padding: 11px 13px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  height: auto !important;
  transition: border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease) !important;
}
.checkout-form input:focus,
.checkout-form textarea:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px hsl(154 44% 18% / 0.1) !important;
}
.checkout-form textarea {
  min-height: 58px !important;
  resize: none !important;
}

.checkout-modal .submit-btn {
  background: var(--green) !important;
  color: hsl(40 45% 97%) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 14px 20px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--ease),
              transform 0.3s var(--ease) !important;
}
.checkout-modal .submit-btn:hover {
  background: var(--gold) !important;
  color: hsl(152 30% 12%) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}
.checkout-modal .submit-btn:active {
  transform: translateY(0) !important;
}

.checkout-modal .upi-intent-btn {
  background: transparent !important;
  color: var(--green) !important;
  border: 1px solid hsl(154 30% 30% / 0.34) !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 11px 18px !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 6px !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--ease),
              border-color 0.3s var(--ease) !important;
}
.checkout-modal .upi-intent-btn:hover {
  background: hsl(154 44% 18% / 0.05) !important;
  border-color: var(--green) !important;
  transform: none !important;
  box-shadow: none !important;
}

.form-grid-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 480px) {
  .form-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

@media (min-width: 768px) {
  .checkout-modal-content {
    max-width: 760px !important;
    width: 92% !important;
    padding: 34px !important;
  }
  .checkout-modal-body-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 26px !important;
    align-items: start !important;
  }
}

/* ========================================= */
/* 12. Sliders, Gallery & Lightbox           */
/* ========================================= */
.card-image-slider-wrapper {
  position: relative !important;
  overflow: hidden !important;
}
.card-image-slider-wrapper img {
  cursor: pointer !important;
}

.card-slider-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: hsl(38 42% 97% / 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--line) !important;
  color: var(--green) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: opacity 0.3s var(--ease),
              background-color 0.3s var(--ease),
              color 0.3s var(--ease) !important;
  opacity: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.card-image-slider-wrapper:hover .card-slider-arrow {
  opacity: 1 !important;
}
.card-slider-arrow.prev-arrow { left: 12px !important; }
.card-slider-arrow.next-arrow { right: 12px !important; }

.card-slider-arrow:hover {
  background: var(--green) !important;
  color: hsl(40 45% 97%) !important;
  border-color: var(--green) !important;
  transform: translateY(-50%) !important;
}
.card-slider-arrow:active {
  transform: translateY(-50%) scale(0.94) !important;
}

.card-slider-dots-container {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 20 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.card-slider-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: hsl(38 42% 97% / 0.65) !important;
  box-shadow: 0 1px 3px rgba(20, 40, 28, 0.25) !important;
  cursor: pointer !important;
  transition: background-color 0.3s var(--ease),
              width 0.3s var(--ease) !important;
}
.card-slider-dot.active {
  background: hsl(38 42% 97%) !important;
  width: 18px !important;
  border-radius: 100px !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(20, 40, 28, 0.3) !important;
}
.card-slider-dot:hover {
  background: hsl(38 42% 97% / 0.9) !important;
  transform: none !important;
}

@media (max-width: 640px) {
  .card-slider-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    opacity: 0.9 !important;
  }
  .card-slider-arrow.prev-arrow { left: 8px !important; }
  .card-slider-arrow.next-arrow { right: 8px !important; }
}

/* Additional gallery (legacy hooks kept — additional-images.css still ships them) */
.dynamic-additional-title {
  color: var(--green) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 1.2rem !important;
  border-left: 2px solid var(--gold) !important;
  padding-left: 12px !important;
  margin-top: 1.5rem !important;
}
.dynamic-additional-image {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  transition: transform 0.4s var(--ease),
              border-color 0.4s var(--ease) !important;
}
.dynamic-additional-image:hover {
  transform: translateY(-3px) !important;
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-md) !important;
}
.dynamic-additional-images-wrapper::-webkit-scrollbar { height: 6px !important; }
.dynamic-additional-images-wrapper::-webkit-scrollbar-track { background: hsl(38 34% 94%) !important; }
.dynamic-additional-images-wrapper::-webkit-scrollbar-thumb {
  background: hsl(152 14% 62%) !important;
  border-radius: 100px !important;
}

.gallery-slide-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: hsl(38 42% 97% / 0.95) !important;
  border: 1px solid var(--line) !important;
  color: var(--green) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s var(--ease) !important;
  opacity: 0;
}
.dynamic-additional-gallery:hover .gallery-slide-btn { opacity: 1 !important; }
.gallery-slide-btn:hover {
  background: var(--green) !important;
  color: hsl(40 45% 97%) !important;
  border-color: var(--green) !important;
}
.gallery-slide-btn.prev-btn { left: -12px !important; }
.gallery-slide-btn.next-btn { right: -12px !important; }

/* Lightbox */
.dynamic-lightbox {
  background-color: hsl(152 30% 7% / 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.dynamic-lightbox-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55) !important;
}
.dynamic-lightbox-prev,
.dynamic-lightbox-next {
  background: hsl(40 45% 97% / 0.08) !important;
  border: 1px solid hsl(40 45% 97% / 0.16) !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: hsl(40 45% 97%) !important;
  transition: background-color 0.3s var(--ease) !important;
}
.dynamic-lightbox-prev:hover,
.dynamic-lightbox-next:hover {
  background: hsl(40 45% 97% / 0.2) !important;
  color: hsl(40 45% 97%) !important;
  border-color: hsl(40 45% 97% / 0.3) !important;
}
.dynamic-lightbox-close {
  color: hsl(40 45% 97% / 0.65) !important;
  transition: color 0.2s var(--ease) !important;
}
.dynamic-lightbox-close:hover {
  color: hsl(40 45% 97%) !important;
}

/* ========================================= */
/* 13. Motion & Accessibility                */
/* ========================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  section:has(img[src*="hero-bg"]) img.w-full.h-full.object-cover,
  section.relative.min-h-\[85vh\] img.w-full.h-full.object-cover,
  section.relative.min-h-screen img.w-full.h-full.object-cover {
    animation: none !important;
    transform: scale(1.04) !important;
  }
}

/* ========================================= */
/* 14. Mobile: centered layout                */
/* ========================================= */
/* The desktop system is deliberately left-aligned (product cards, how-it-
   works, footer columns) for an editorial feel with room to breathe. On a
   narrow phone screen that same left edge just reads as clutter — centered
   reads calmer and is the expected pattern for a mobile storefront. */
@media (max-width: 767px) {
  /* Center align all main sections and container blocks */
  main,
  main > section,
  main section .container,
  main section [class*="max-w-"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Headings, paragraphs, spans, labels, lists */
  main section h1,
  main section h2,
  main section h3,
  main section h4,
  main section h5,
  main section h6,
  main section p,
  main section span,
  main section label,
  main section li {
    text-align: center !important;
  }

  /* Flex & Grid layouts */
  main section .flex,
  main section .flex-col,
  main section .grid {
    align-items: center !important;
    justify-content: center !important;
  }

  /* Eyebrows, pills, badges, trust strips */
  p[class*="tracking-"]:not(.flex > *),
  span[class*="tracking-"]:not(.flex > *),
  .hero-trust-strip,
  .hero-trust-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .flex > p[class*="tracking-"],
  .flex > span[class*="tracking-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Product & bundle cards */
  a.bg-card,
  .bg-card,
  a.bg-card .p-4,
  a.bg-card .md\:p-5,
  a.bg-card .md\:p-6,
  .bg-card.border-2 .p-4,
  .grid .bg-card .p-4,
  .grid .bg-card .md\:p-5,
  .grid .bg-card .md\:p-6 {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  a.bg-card h3,
  .bg-card.border-2 h3,
  .grid .bg-card h3,
  a.bg-card p,
  .bg-card p,
  a.bg-card span,
  .bg-card span {
    text-align: center !important;
  }

  .bg-card button,
  .dummy-ingredients-trigger,
  .buy-now-btn,
  .add-to-cart-btn,
  .product-price-row .buy-now-btn,
  .bg-card div:has(> .buy-now-btn) .buy-now-btn {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
  }

  /* Price + Buy Now row: stack and center */
  .bg-card div:has(> .buy-now-btn),
  .product-price-row {
    border-top: none !important;
    padding-top: 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .product-price-row > * {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-self: center !important;
  }

  /* Mix with section centering */
  .bg-card ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .bg-card ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* How It Works steps */
  section .grid.grid-cols-2.md\:grid-cols-4 > div {
    text-align: center !important;
    padding-left: 14px !important;
    border-top: none !important;
    border-left: none !important;
    align-items: center !important;
    justify-content: center !important;
  }

  section .grid.grid-cols-2.md\:grid-cols-4 .rounded-full {
    margin: 0 auto 16px auto !important;
  }

  section .grid.grid-cols-2.md\:grid-cols-4 span {
    display: block !important;
    text-align: center !important;
  }

  /* Review cards */
  section.bg-background .grid > div {
    text-align: center !important;
    align-items: center !important;
  }

  section.bg-background .grid > div .flex {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Quiz section */
  #quiz,
  #quiz .bg-card,
  #quiz form,
  #quiz div {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #quiz button {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* FAQ section */
  section.bg-card,
  section.bg-card .space-y-2,
  section.bg-card .space-y-2 button,
  section.bg-card .space-y-2 [data-state="open"] p,
  section.bg-card .space-y-2 [role="region"] {
    text-align: center !important;
    justify-content: center !important;
  }

  section.bg-card .space-y-2 button {
    justify-content: center !important;
  }

  /* Footer */
  footer,
  footer.bg-primary,
  footer .grid,
  footer div,
  footer p,
  footer a {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ========================================= */
/* Desktop & Responsive Grids for Products   */
/* ========================================= */
/* Force all grid items to be fully visible (prevents scroll-animation fade-out glitches) */
.grid > div,
.grid > div > *,
.bg-card {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 768px) {
  /* 3-column grid for Our Collection — The Trio Ritual on tablet & desktop */
  .trio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 72rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1024px) {
  /* 4 cards per row ONLY for 4-item Curated Bundles section */
  .bg-muted .grid:not(.trio-grid):not(.blend-grid):not(.popular-grid):not(.values-grid):not(.storage-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 84rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3 cards per row (3-column grid) for 3-item sections (Our Collection, Choose Your Blend, Customer Favourites, Our Values) */
  .trio-grid,
  .blend-grid,
  .popular-grid,
  .values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 72rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main section:has(.bg-card) .grid > div,
  .bg-muted .grid > div,
  .trio-grid > div,
  .blend-grid > div,
  .popular-grid > div,
  .values-grid > div {
    grid-column: span 1 / span 1 !important;
  }
}

/* Our Values section center alignment */
.values-grid {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Storage & Care and Safety Notice section center alignment */
.storage-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  max-width: 46rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (min-width: 640px) {
  .storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================= */
/* Center Align Storage & Care & Safety Notice */
/* ========================================= */
.bg-muted:has(h3) .container,
section:has(h3) .container {
  text-align: center !important;
}

.bg-muted:has(h3) h3,
.bg-muted:has(h3) p,
.bg-muted:has(h3) ul,
.bg-muted:has(h3) li {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

.bg-muted:has(h3) .flex {
  justify-content: center !important;
  align-items: center !important;
}