/* ============================================================
   PAWZA — Modern refresh (loaded after style.css)
   Restrained modernity: aurora accents on cards, cursor spotlight,
   subtle grain, refined chips, staggered reveals, mobile CTA.
   ============================================================ */

:root {
  /* Per-product accent hues — matched to the bottle label colors. */
  --accent-multi:   /* teal/blue label   */    0, 151, 178;   /* #0097B2 */
  --accent-probio:  /* green label       */   63, 168,  92;   /* #3FA85C */
  --accent-hip:     /* purple label      */  130,  88, 168;   /* #8258A8 */
  --accent-skin:    /* orange label      */  234, 128,  46;   /* #EA802E */
  --accent-senior:  /* gold label        */  201, 155,  47;   /* #C99B2F */

  /* Motion */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Ambient grain (very subtle, whole page) ----------
   Uses an SVG feTurbulence data-URI so no extra HTTP request.
   Applied above the background but below content, at 5% opacity.
--------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference) {
  /* keep grain still — animating it is distracting */
}
/* Ensure content and interactive layers sit above the grain */
.announcement-bar,
main,
footer { position: relative; z-index: 2; }
/* NOTE: .nav MUST keep its style.css position:fixed — do not include here */

/* ---------- Section reveal — smoother stagger ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-spring),
              transform 0.9s var(--ease-spring);
  will-change: opacity, transform;
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* Children of a revealed grid stagger in */
.fade-in.is-visible .product-card,
.fade-in.is-visible .tb-card,
.fade-in.is-visible .shop-card-link {
  animation: pawza-rise 0.7s var(--ease-spring) both;
}
.fade-in.is-visible .product-card:nth-child(1),
.fade-in.is-visible .shop-card-link:nth-child(1) { animation-delay: 0.02s; }
.fade-in.is-visible .product-card:nth-child(2),
.fade-in.is-visible .shop-card-link:nth-child(2) { animation-delay: 0.10s; }
.fade-in.is-visible .product-card:nth-child(3),
.fade-in.is-visible .shop-card-link:nth-child(3) { animation-delay: 0.18s; }
.fade-in.is-visible .product-card:nth-child(4),
.fade-in.is-visible .shop-card-link:nth-child(4) { animation-delay: 0.26s; }
.fade-in.is-visible .product-card:nth-child(5),
.fade-in.is-visible .shop-card-link:nth-child(5) { animation-delay: 0.34s; }
@keyframes pawza-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in .product-card { transition: none !important; animation: none !important; }
}

/* ============================================================
   PRODUCT CARDS — the star of the modernization
   ============================================================ */

/* Give each card a category color via data attribute.
   HTML: <article class="product-card" data-accent="multi"> etc.
   We fall back to teal if no data-accent is set. */
.product-card {
  --card-accent: var(--accent-multi);
  position: relative;
  isolation: isolate;                       /* so blend modes stay local */
  border-radius: 20px;                       /* softer, more modern */
  transition:
    transform 0.5s var(--ease-spring),
    box-shadow 0.5s var(--ease-spring),
    border-color 0.4s var(--ease-spring);
  border-color: rgba(26, 26, 26, 0.08);
  background:
    /* pointer-follow spotlight (very soft) */
    radial-gradient(280px 280px at var(--mx, 50%) var(--my, 30%),
      rgba(var(--card-accent), 0.10),
      transparent 60%),
    var(--color-cream-light);
}

/* Signature halo blob sitting behind the bottle, extending outside the img box */
.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 10%);
  background: radial-gradient(closest-side,
    rgba(var(--card-accent), 0.78),
    rgba(var(--card-accent), 0.28) 45%,
    rgba(var(--card-accent), 0.08) 70%,
    transparent 82%);
  filter: blur(28px);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.7s var(--ease-spring), opacity 0.5s var(--ease-spring);
}
.product-card > * { position: relative; z-index: 1; }
.product-card:hover::before {
  transform: translate(-50%, 8%) scale(1.06);
}
.product-card[data-accent="multi"]   { --card-accent: var(--accent-multi); }
.product-card[data-accent="probio"]  { --card-accent: var(--accent-probio); }
.product-card[data-accent="hip"]     { --card-accent: var(--accent-hip); }
.product-card[data-accent="skin"]    { --card-accent: var(--accent-skin); }
.product-card[data-accent="senior"]  { --card-accent: var(--accent-senior); }

/* Soft tinted container background — lets the halo be seen at edges */
.product-card .product-card-img {
  position: relative;
  background: rgba(var(--card-accent), 0.10);
  overflow: hidden;
}
.product-card .product-card-img img {
  position: relative;
  z-index: 1;
}

/* Small colored dot on tags to match the card accent (visual link) */
.product-card .product-tags { margin-top: auto; align-items: center; }
.product-card .product-tag {
  background: rgba(var(--card-accent), 0.10);
  color: rgba(var(--card-accent), 1);
  border: 1px solid rgba(var(--card-accent), 0.20);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}
.product-card .product-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--card-accent), 1);
  box-shadow: 0 0 0 3px rgba(var(--card-accent), 0.18);
  flex-shrink: 0;
}

/* CTA link picks up card accent too */
.product-card .product-link {
  color: rgba(var(--card-accent), 1);
}

/* Elevated hover — deeper, warmer shadow tinted by card accent */
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--card-accent), 0.35);
  box-shadow:
    0 22px 40px -18px rgba(var(--card-accent), 0.35),
    0 12px 28px rgba(26, 26, 26, 0.10);
}

/* Coming-soon card: keep the accent but calmer */
.product-card--coming-soon {
  --card-accent: var(--accent-senior);
}
.product-card--coming-soon:hover { box-shadow: none; transform: none; }

/* ============================================================
   SHOP PAGE CARDS — same treatment applied via .shop-card
   ============================================================ */
.shop-card,
.shop-card-link .shop-card {
  --card-accent: var(--accent-multi);
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  transition:
    transform 0.5s var(--ease-spring),
    box-shadow 0.5s var(--ease-spring),
    border-color 0.4s var(--ease-spring);
  background:
    radial-gradient(300px 280px at var(--mx, 50%) var(--my, 25%),
      rgba(var(--card-accent), 0.10), transparent 60%),
    var(--color-cream-light);
}

.shop-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 84%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 12%);
  background: radial-gradient(closest-side,
    rgba(var(--card-accent), 0.78),
    rgba(var(--card-accent), 0.28) 45%,
    rgba(var(--card-accent), 0.08) 70%,
    transparent 82%);
  filter: blur(34px);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.7s var(--ease-spring);
}
.shop-card > * { position: relative; z-index: 1; }
.shop-card-link:hover .shop-card::before { transform: translate(-50%, 10%) scale(1.06); }
.shop-card[data-accent="multi"],   .shop-card-link[data-accent="multi"]   .shop-card { --card-accent: var(--accent-multi); }
.shop-card[data-accent="probio"],  .shop-card-link[data-accent="probio"]  .shop-card { --card-accent: var(--accent-probio); }
.shop-card[data-accent="hip"],     .shop-card-link[data-accent="hip"]     .shop-card { --card-accent: var(--accent-hip); }
.shop-card[data-accent="skin"],    .shop-card-link[data-accent="skin"]    .shop-card { --card-accent: var(--accent-skin); }
.shop-card[data-accent="senior"],  .shop-card-link[data-accent="senior"]  .shop-card { --card-accent: var(--accent-senior); }

.shop-card .product-card-img {
  position: relative;
  background: rgba(var(--card-accent), 0.10);
}

.shop-card .product-tag {
  background: rgba(var(--card-accent), 0.10);
  color: rgba(var(--card-accent), 1);
  border: 1px solid rgba(var(--card-accent), 0.20);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}
.shop-card .product-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--card-accent), 1);
  box-shadow: 0 0 0 3px rgba(var(--card-accent), 0.18);
  flex-shrink: 0;
}
.shop-card-link:hover .shop-card {
  transform: translateY(-6px);
  box-shadow:
    0 22px 42px -18px rgba(var(--card-accent), 0.35),
    0 12px 28px rgba(26, 26, 26, 0.10);
  border-color: rgba(var(--card-accent), 0.35);
}

/* ============================================================
   HERO — a subtle aurora behind the teal "Years" word
   ============================================================ */
.hero-split-headline .teal,
.hero-full-headline .teal,
.ep-hero h1 em {
  position: relative;
  isolation: isolate;
  display: inline-block;
}
.hero-split-headline .teal::before,
.hero-full-headline .teal::before,
.ep-hero h1 em::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -14% -34% -14%;
  background: radial-gradient(60% 65% at 50% 50%,
    rgba(0, 151, 178, 0.32),
    rgba(0, 151, 178, 0.10) 55%,
    transparent 78%);
  filter: blur(28px);
  pointer-events: none;
}

/* Small refinement: hero badge picks up a soft glow */
.hero-split-badge,
.hero-full .hero-split-badge {
  box-shadow: 0 6px 24px -8px rgba(0, 151, 178, 0.35);
}

/* ============================================================
   MOBILE STICKY CTA PILL — appears after user scrolls past hero
   Modern DTC pattern; visible only on narrow screens.
   ============================================================ */
.mobile-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 24px);
    padding: 10px 14px 10px 10px;
    gap: 10px;
    background: rgba(26, 26, 26, 0.94);
    color: #fdfdfb;
    align-items: center;
    border-radius: 999px;
    z-index: 130;
    box-shadow: 0 20px 40px rgba(26, 26, 26, 0.25);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-spring), transform 0.4s var(--ease-spring);
    max-width: calc(100vw - 32px);
    font-family: var(--font-body);
  }
  .mobile-sticky-cta.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
  .mobile-sticky-cta .msc-pill {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
  .mobile-sticky-cta .msc-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .mobile-sticky-cta .msc-arrow {
    padding-right: 6px;
    font-size: 18px;
    opacity: 0.9;
  }
}

/* ============================================================
   HERO — floating soft color blobs + subtle scroll cue
   Note: the hero already uses its own ::before for a cream
   text-contrast wash. We use inline <span class="ep-blob"> nodes
   for the atmospheric color blobs so we don’t collide with it.
   ============================================================ */
.ep-hero .ep-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;                 /* above the photo, below the cream wash + content */
  opacity: 0.55;
}
.ep-hero .ep-blob--teal {
  width: 520px; height: 520px;
  top: -140px; right: -80px;
  background: radial-gradient(closest-side, rgba(0, 151, 178, 0.55), transparent 75%);
}
.ep-hero .ep-blob--gold {
  width: 460px; height: 460px;
  bottom: -160px; left: -60px;
  background: radial-gradient(closest-side, rgba(201, 155, 47, 0.35), transparent 75%);
}

@media (prefers-reduced-motion: no-preference) {
  .ep-hero .ep-blob--teal { animation: pawza-drift-a 14s ease-in-out infinite alternate; }
  .ep-hero .ep-blob--gold { animation: pawza-drift-b 18s ease-in-out infinite alternate; }
}
@keyframes pawza-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 20px) scale(1.05); }
}
@keyframes pawza-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -18px) scale(1.08); }
}

/* Scroll cue — a small vertical line + label at the very bottom of the hero */
.ep-hero .ep-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-ink, #28251d);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}
.ep-hero .ep-scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background: currentColor;
  transform-origin: top;
  animation: pawza-scroll-line 2.4s ease-in-out infinite;
}
@keyframes pawza-scroll-line {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 0.7; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (max-width: 768px) {
  .ep-hero .ep-scroll-cue { display: none; }
  .ep-hero .ep-blob--teal { width: 340px; height: 340px; top: -80px; right: -60px; }
  .ep-hero .ep-blob--gold { width: 300px; height: 300px; bottom: -100px; left: -40px; }
}

/* ============================================================
   BETWEEN-SECTION FLOURISHES — quiet shape work + chapter marks
   Adds visual rhythm without loud dividers.
   ============================================================ */

/* Chapter markers — small editorial labels between sections */
.section-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px auto 4px;
  color: var(--color-ink, #28251d);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  position: relative;
  z-index: 2;
}
.section-mark::before,
.section-mark::after {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.section-mark .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
}

/* Background blob shapes for major sections — soft colored orbs
   drifting behind the content. Each section gets a distinct tint. */
.products-section,
.testimonials-bento,
.ingredients-carousel-section,
.tagline-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.products-section::before,
.testimonials-bento::before,
.ingredients-carousel-section::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.products-section::after,
.testimonials-bento::after,
.ingredients-carousel-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.30;
}
/* Decorative section blobs disabled — sections below the hero share one flat
   off-white background so there are no color washes between them. */
.products-section::before,
.products-section::after,
.testimonials-bento::before,
.testimonials-bento::after,
.ingredients-carousel-section::before,
.ingredients-carousel-section::after { display: none !important; }

/* Keep the section content above the decorative blobs */
.products-section > *,
.testimonials-bento > *,
.ingredients-carousel-section > *,
.tagline-band > * { position: relative; z-index: 1; }

/* Subtle drift on section blobs */
@media (prefers-reduced-motion: no-preference) {
  .products-section::before,
  .testimonials-bento::after,
  .ingredients-carousel-section::before { animation: pawza-drift-a 16s ease-in-out infinite alternate; }
  .products-section::after,
  .testimonials-bento::before,
  .ingredients-carousel-section::after { animation: pawza-drift-b 20s ease-in-out infinite alternate; }
}

/* Reduce blob size on mobile so they don't dominate */
@media (max-width: 768px) {
  .products-section::before,
  .testimonials-bento::before,
  .ingredients-carousel-section::before {
    width: 300px; height: 300px; filter: blur(50px);
  }
  .products-section::after,
  .testimonials-bento::after,
  .ingredients-carousel-section::after {
    width: 280px; height: 280px; filter: blur(50px);
  }
  .section-mark::before,
  .section-mark::after { width: 22px; }
  .section-mark { letter-spacing: 0.16em; font-size: 10px; }
}

/* ---------- Curved section shape divider (SVG-in-CSS) ----------
   Add class="has-arc-top" to a section to give it a soft cream arc
   rising up from the previous section. Uses a mask + solid color.
--------------------------------------------------------------- */
.has-arc-top {
  position: relative;
}
.has-arc-top::before {
  content: "";
  position: absolute;
  top: -1px;                            /* cover any hairline seam */
  left: 0;
  right: 0;
  height: 44px;
  background: inherit;
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, #000 98%, transparent 100%);
          mask: radial-gradient(60% 100% at 50% 100%, #000 98%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .has-arc-top::before { height: 24px; }
}

/* ============================================================
   FIX PASS 2 (Aug 2026): hero photo, tagline pill, transparent
   product images.
   ============================================================ */

/* ---- HERO: shrink the full-bleed photo and fade its edges ----
   The photo was previously stretched to full bleed which looked
   soft/blurry at wide viewports. We inset it, round the corners,
   and mask the outer edges to blend into the cream background. */
.ep-hero {
  /* Move the photo off the section background onto a dedicated
     inner layer so we can size, round, and fade it independently. */
  background-image: none !important;
  background-color: var(--color-cream);
}
.ep-hero::after {
  content: "";
  position: absolute;
  top: clamp(120px, 12vw, 170px);
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(32px, 5vw, 72px);
  left: clamp(24px, 5vw, 80px);
  /* No cream fade on top/right/bottom — photo bleeds clean to its edges.
     Kept a hint on the far left so the headline stays readable.
     Zoomed out (contain) so the full artwork is visible instead of cropped. */
  background-image: url('./assets/hero-fullbleed.jpg');
  background-size: contain;
  background-position: 70% center; /* shifted ~20% to the right */
  background-repeat: no-repeat;
  background-color: var(--color-cream);
  border-radius: 28px;
  z-index: 0;
  pointer-events: none;
}
/* Keep the cream text-contrast wash above the photo but below content */
.ep-hero::before { z-index: 1; }
.ep-hero-content { z-index: 3; }
.ep-hero-badge { z-index: 4; }
/* Ambient blobs stay above the photo but below the wash */
.ep-hero .ep-blob { z-index: 2; }

@media (max-width: 768px) {
  .ep-hero::after {
    top: clamp(100px, 22vw, 160px);
    right: 16px; left: 16px;
    bottom: auto;
    height: clamp(320px, 55vw, 460px);
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center center;
    border-radius: 22px;
  }
}

/* ---- TAGLINE BAND: from full-width bar to inset rounded pill ---- */
.tagline-band {
  background: transparent !important;         /* section itself no longer black */
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 80px);
}
.tagline-band > * { position: relative; z-index: 2; }
.tagline-band::before {
  /* The actual black rounded rectangle sits inside the section,
     inset from page edges so it reads as a shape, not a bar. */
  content: "";
  position: absolute;
  inset: clamp(14px, 2.5vw, 28px) clamp(24px, 6vw, 96px);
  background: var(--color-black);
  border-radius: clamp(20px, 2.4vw, 32px);
  z-index: 1;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.35);
}
/* Bring the copy back over the rounded shape */
.tagline-band p,
.tagline-band .tagline-buttons {
  position: relative;
  z-index: 2;
}

/* ---- PRODUCT CARD IMAGE: kill white bg, keep the glow ----
   The colored halo already sits behind the bottle via the card's
   ::before. The image container just needs to disappear so we
   see the halo, not a white square. */
.product-card .product-card-img,
.shop-card .product-card-img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Also ensure any nested image wrapper is see-through */
.product-card .product-card-img::before,
.product-card .product-card-img::after { display: none; }

/* ---- BOTTLE IMAGES: drop the baked-in white using blend mode ----
   The bottle JPGs were shot on a white background. mix-blend-mode:
   multiply makes pure-white pixels transparent to whatever is
   underneath (the colored halo + card cream), so the halo reads
   as a soft glow around the bottle instead of a hard rectangle. */
.product-card .product-card-img img,
.shop-card .product-card-img img {
  mix-blend-mode: multiply;
  background: transparent;
}

/* ============================================================
   FIX PASS 3 (Aug 6): hero alignment, sticky nav, seamless
   sections, tighter spacing, trust bar polish, mobile UX,
   proper bottle glow now that bottles are transparent PNGs.
   ============================================================ */

/* ---- HERO alignment: photo hugs the top ---- */
.ep-hero::after {
  /* Below the announcement bar (40px) + nav (~64px) with just a
     tiny breathing edge so the photo effectively hugs the top. */
  top: 80px !important;
  right: clamp(12px, 3vw, 40px) !important;
  bottom: clamp(20px, 3vw, 40px) !important;
  left: clamp(12px, 3vw, 40px) !important;
  border-radius: 22px !important;
}
@media (max-width: 768px) {
  .ep-hero::after {
    top: 72px !important;
    right: 10px !important; left: 10px !important;
    bottom: auto !important;
    height: clamp(280px, 55vw, 420px);
    border-radius: 18px !important;
  }
}

/* ---- STICKY NAV: always visible with contrast ----
   Prior state: nav-link color started as white (for dark hero
   backgrounds) and only became dark on scroll — which made it
   invisible on our new inset cream hero. Give the nav a subtle
   cream blur background from the start with dark text. */
.nav {
  background: rgba(247, 244, 236, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav .nav-link,
.nav .nav-cart {
  color: var(--color-ink, #28251d) !important;
  font-weight: 500;
}
.nav .pawza-logo--white { display: none !important; }
.nav .pawza-logo--teal { display: inline-block !important; }
.nav--scrolled {
  background: rgba(247, 244, 236, 0.92) !important;
}

/* ---- SEAMLESS TAGLINE → PRODUCTS ----
   Kill any hairline between sections. All these bands should
   share the same cream base so only the black rounded shape
   reads as separation. */
.trust-bar,
.tagline-band,
.products-section,
.testimonials-bento,
.ingredients-carousel-section {
  background-color: var(--color-cream, #fdfdfb) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Refine tagline pill size + margins so it doesn't feel bar-like.
   Symmetric top/bottom padding so the message + buttons sit
   perfectly centered inside the pill (fixes the missing-
   bottom-border feel). */
.tagline-band {
  padding-top: clamp(64px, 7vw, 108px) !important;
  padding-bottom: clamp(64px, 7vw, 108px) !important;
}
.tagline-band::before {
  inset: clamp(28px, 3.5vw, 44px) clamp(24px, 8vw, 140px) !important;
  border-radius: clamp(22px, 2.6vw, 34px) !important;
}
.tagline-band p {
  margin-bottom: clamp(20px, 2.2vw, 32px) !important;
}

/* ---- SPACING: tighten the chapter marker + heading rhythm ---- */
.section-mark {
  margin-top: clamp(18px, 3vw, 32px) !important;
  margin-bottom: clamp(2px, 1vw, 6px) !important;
  opacity: 0.5 !important;
}
.products-section .section-header,
.testimonials-bento .section-header,
.ingredients-carousel-section .ingredients-carousel-header {
  padding-top: clamp(8px, 1.5vw, 20px) !important;
  padding-bottom: clamp(12px, 2vw, 24px) !important;
}
.products-section .section-title,
.testimonials-bento .section-title {
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 1.2vw, 16px) !important;
  letter-spacing: -0.01em;
}

/* Fade the products blob so its top edge blends with the
   tagline section instead of drawing a hard color break. */
.products-section {
  padding-top: clamp(4px, 1vw, 12px) !important;
}
.products-section::before {
  opacity: 0.32 !important;
}

/* ---- TRUST BAR polish ---- */
.trust-bar {
  padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 48px) !important;
}
.trust-bar .trust-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 3vw, 40px);
  max-width: 1240px;
  margin: 0 auto;
}
.trust-bar .trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 1 auto !important;
}
.trust-bar .trust-badge-icon {
  width: 22px !important; height: 22px !important;
  color: var(--color-teal, #0097b2) !important;
  opacity: 0.85;
  flex-shrink: 0;
}
.trust-bar .trust-badge-text {
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.01em;
  color: var(--color-ink, #28251d);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .trust-bar .trust-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 20px !important;
  }
  .trust-bar .trust-badge {
    justify-self: start !important;
  }
  .trust-bar .trust-badge-text {
    white-space: normal !important;
    line-height: 1.25;
    font-size: 12.5px !important;
  }
}
@media (max-width: 460px) {
  .trust-bar .trust-badge-text { font-size: 11.5px !important; }
  .trust-bar .trust-badge-icon { width: 20px !important; height: 20px !important; }
}

/* ============================================================
   BOTTLE GLOW — the real fix
   Bottles are now transparent PNGs, so the colored halo shows
   through cleanly. Add a soft white glow directly behind each
   bottle that transitions into the outer colored halo.
   Structure: card::before = colored halo (existing)
              card-img::before = white glow (added below)
              img element = the transparent bottle (untouched)
   ============================================================ */
.product-card .product-card-img,
.shop-card .product-card-img {
  position: relative;
  background: transparent !important;
  overflow: visible !important;
}
.product-card .product-card-img::before,
.shop-card .product-card-img::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -6% !important;
  background: radial-gradient(closest-side,
              rgba(255,255,255,0.95) 0%,
              rgba(255,255,255,0.85) 35%,
              rgba(255,255,255,0.55) 55%,
              rgba(255,255,255,0.0) 80%) !important;
  border-radius: 999px;
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.product-card .product-card-img img,
.shop-card .product-card-img img {
  position: relative;
  z-index: 1;
  mix-blend-mode: normal !important;   /* undo prior multiply */
  background: transparent !important;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.10))
          drop-shadow(0 4px 8px rgba(0,0,0,0.06));
  width: 118% !important;
  height: 118% !important;
  max-width: none !important;
}
@media (max-width: 768px) {
  .product-card .product-card-img img,
  .shop-card .product-card-img img { width: 112% !important; height: 112% !important; }
}

/* Slightly brighter card halo so the two glows layer nicely */
.product-card::before,
.shop-card::before {
  opacity: 0.85 !important;
}

/* ---- MOBILE UX ---- */
@media (max-width: 768px) {
  /* Bring hero text and CTAs into safer positions */
  .ep-hero-content {
    padding-top: 12vh !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }
  .ep-hero-content h1 {
    font-size: clamp(38px, 10vw, 60px) !important;
    line-height: 1.02;
  }
  .ep-hero-content .ep-section-sub {
    font-size: 16px;
  }
  .ep-hero-badge {
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: 84px !important;
    height: 84px !important;
    font-size: 10px !important;
  }
  .ep-hero-badge .big { font-size: 15px !important; }
  .ep-hero-badge .sm  { font-size: 9px !important; letter-spacing: 0.04em; }

  /* Big obvious CTAs */
  .ep-hero-content .ep-buttons a,
  .ep-hero-content .btn,
  .tagline-band a.btn,
  .tagline-band .tagline-buttons a {
    min-height: 52px !important;
    padding: 14px 22px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }

  /* Product card stack, generous tap targets */
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-inline: 16px !important;
  }
  .product-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }
  .product-card-img { aspect-ratio: 1 / 1 !important; }
  .product-card .product-link,
  .product-card a[href*="product-"] {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    font-weight: 600 !important;
  }

  /* Tagline pill: give it real breathing room, less inset */
  .tagline-band {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .tagline-band::before {
    inset: 24px 16px !important;
    border-radius: 20px !important;
  }
  .tagline-band p {
    font-size: 17px !important;
    line-height: 1.4;
    padding: 0 8px;
  }

  /* Trust bar: full-width readable */
  .trust-bar {
    padding: 20px 16px !important;
  }

  /* Testimonial bento to single column stack */
  .tb-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }
  .tb-card,
  .tb-span-3,
  .tb-span-4,
  .tb-span-5 {
    grid-column: span 1 !important;
  }

  /* Chapter markers a bit smaller on mobile */
  .section-mark { font-size: 10px !important; letter-spacing: 0.14em !important; }
}

/* Sticky mobile CTA (already injected by modern.js) — brand it */
.mobile-sticky-cta {
  background: var(--color-teal, #0097b2) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 12px 30px -8px rgba(0,151,178,0.5) !important;
}

/* ============================================================
   LIQUID GLASS NAV — floating rounded pill with translucent
   backdrop, tightens on scroll.
   ============================================================ */
.nav {
  /* float as a rounded rectangle */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(1440px, calc(100vw - 32px));
  border-radius: 22px !important;
  padding: 12px 22px !important;

  /* liquid glass surface */
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 251, 244, 0.32) 100%
    ) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;

  /* glass edge highlight + soft ambient shadow */
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 12px 30px -12px rgba(20, 20, 20, 0.18),
    0 4px 10px -4px rgba(20, 20, 20, 0.10) !important;

  transition:
    top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Scrolled: tighter, higher, brighter glass, sharper shadow */
.nav--scrolled {
  top: 14px !important;
  width: min(1060px, calc(100vw - 32px)) !important;
  padding: 9px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 251, 244, 0.5) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 10px 24px -10px rgba(20, 20, 20, 0.22),
    0 3px 8px -3px rgba(20, 20, 20, 0.12) !important;
}

/* Keep dark text on the glass */
.nav .nav-link,
.nav .nav-cart {
  color: var(--color-ink, #28251d) !important;
  font-weight: 500 !important;
}

/* Slightly tighter logo when scrolled */
.nav--scrolled .pawza-logo,
.nav--scrolled svg[class*="logo"] {
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile: keep floating look, shrink padding, don't cap width */
@media (max-width: 720px) {
  .nav {
    width: calc(100vw - 20px);
    padding: 10px 16px !important;
    border-radius: 18px !important;
  }
  .nav--scrolled {
    width: calc(100vw - 20px) !important;
    padding: 8px 14px !important;
    border-radius: 16px !important;
    top: 10px !important;
  }
}

/* Firefox lacks backdrop-filter by default — deepen the fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav {
    background: rgba(250, 246, 238, 0.92) !important;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR moved to BOTTOM of viewport
   ============================================================ */
.announcement-bar {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120 !important;
  border-bottom: none !important;
  border-top: 1px solid rgba(0, 151, 178, 0.15) !important;
  box-shadow: 0 -6px 18px -10px rgba(20, 20, 20, 0.10);
}

/* Flip hide direction so it slides down and off the bottom edge */
.announcement-bar.bar-hidden {
  transform: translateY(100%) !important;
}

/* Nav no longer needs to clear a top bar — sit closer to the top edge */
.nav { top: 20px !important; }
.nav--scrolled { top: 14px !important; }

/* Old fixed bottom bar is gone; keep body flush with footer.
   Mobile safe-area padding is added inside its own media query later. */
body { padding-bottom: 0; }

/* ============================================================
   FIX PASS 4 (Aug 6 late): mobile spacing, section-mark fade,
   ingredient carousel edge fades, hemp bottle sizing.
   ============================================================ */

/* ---- MOBILE: tighten space between hero photo and trust bar ----
   The absolute-positioned .ep-hero::after sets a fixed image height,
   but .ep-hero itself was reserving too much vertical space below
   the badge, leaving a big cream gap before the trust bar. */
@media (max-width: 768px) {
  /* On mobile the hero photo already sits BEHIND the content via
     ::after (absolutely positioned). The stock padding-bottom reserved
     a huge blank block for it, leaving cream dead space before the
     trust bar. Kill that padding and let the hero size to content. */
  .ep-hero {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: clamp(28px, 8vw, 56px) !important;
    margin-bottom: 0 !important;
  }
  /* Mobile hero photo: shrink and center the photo behind the
     headline. Symmetric left/right insets naturally center it.
     The photo itself is drawn at reduced opacity via the fade layer
     so headline text stays readable. */
  .ep-hero::after {
    top: 76px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    width: auto !important;
    height: clamp(320px, 78vw, 440px) !important;
    background-image: url('./assets/hero-fullbleed.jpg') !important;
    background-size: cover !important;
    background-position: center 32% !important;
    background-repeat: no-repeat !important;
    border-radius: 20px !important;
    z-index: 0 !important;
    opacity: 0.55 !important;
    filter: saturate(0.9);
  }
  /* Cream wash on top of the photo: near-opaque at the top where
     headline sits, gradually fading to lightly translucent at the
     bottom so the bottle/dog remains visible. */
  .ep-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 76px !important;
    left: 16px !important;
    right: 16px !important;
    height: clamp(320px, 78vw, 440px) !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background:
      linear-gradient(
        180deg,
        rgba(245, 240, 232, 0.94) 0%,
        rgba(245, 240, 232, 0.86) 30%,
        rgba(245, 240, 232, 0.62) 55%,
        rgba(245, 240, 232, 0.32) 78%,
        rgba(245, 240, 232, 0.14) 100%
      ) !important;
  }
  .trust-bar {
    padding-top: clamp(14px, 3vw, 20px) !important;
    padding-bottom: clamp(18px, 3vw, 24px) !important;
    margin-top: 0 !important;
  }
  /* Tighten seam between the black tagline pill and Explore The Range */
  .tagline-band {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    margin-bottom: 0 !important;
  }
  .tagline-band::before {
    inset: 18px 14px !important;
  }
  .products-section {
    padding-top: 0 !important;
    margin-top: -6px !important;
  }
  .products-section .section-header {
    padding-top: 4px !important;
    padding-bottom: 8px !important;
  }
  .section-mark {
    margin-top: 12px !important;
  }
}

/* ---- SECTION MARK: fade divider lines outward instead of hard-cut ----
   The "— 03  THE SCIENCE —" style label used two fixed 44px dashes,
   which read as awkward cut-off lines. Replace with longer gradient
   lines that fade to transparent toward the screen edges. */
.section-mark::before,
.section-mark::after {
  width: clamp(60px, 22vw, 220px) !important;
  height: 1px !important;
  background: transparent !important;
  opacity: 1 !important;
}
.section-mark::before {
  background: linear-gradient(to right,
    rgba(40, 37, 29, 0) 0%,
    rgba(40, 37, 29, 0.35) 100%) !important;
}
.section-mark::after {
  background: linear-gradient(to left,
    rgba(40, 37, 29, 0) 0%,
    rgba(40, 37, 29, 0.35) 100%) !important;
}
@media (max-width: 768px) {
  .section-mark::before,
  .section-mark::after {
    width: clamp(48px, 26vw, 140px) !important;
  }
}

/* ---- INGREDIENT CAROUSEL: fade image edges to blend with cream ----
   Chamomile: transparent-edge blend on all sides (removes visible
   rectangular "border" where image cream doesn't match page cream).
   MSM: bottom fade (bowl had a hard shadow line at the base).
   Applied via mask so it works over any background. */
.carousel-slide-img img[src*="chamomile"] {
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%,
    #000 55%,
    rgba(0,0,0,0.6) 78%,
    rgba(0,0,0,0) 100%) !important;
          mask-image: radial-gradient(ellipse 78% 78% at 50% 50%,
    #000 55%,
    rgba(0,0,0,0.6) 78%,
    rgba(0,0,0,0) 100%) !important;
}
.carousel-slide-img img[src*="msm"] {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 78%,
    rgba(0,0,0,0.4) 92%,
    rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 78%,
    rgba(0,0,0,0.4) 92%,
    rgba(0,0,0,0) 100%) !important;
}

/* ---- HEMP SEED OIL: constrain size so full bottle stays visible ----
   The tall portrait bottle was rendering larger than sibling images,
   pushing the corked top and the base right to the edge of the mask.
   Slightly tighter max-height + a modest scale keeps proportions in
   line with the round bowls and cluster shots in the same carousel. */
.carousel-slide-img img[src*="hemp-seed-oil"] {
  max-height: 88% !important;
  height: auto !important;
  transform: scale(0.92);
  transform-origin: center center;
}
@media (max-width: 768px) {
  .carousel-slide-img img[src*="hemp-seed-oil"] {
    max-height: 82% !important;
    transform: scale(0.88);
  }
}


/* ============================================================
   FIX PASS 5 (Aug 12): shop.html — streamline product cards to
   match the homepage "Explore The Range" grid. 4 columns of
   compact cards on desktop, Senior Longevity as a full-width
   horizontal card beneath the row.
   ============================================================ */

/* Grid: 4 columns on desktop, 2 on tablet, 1 on mobile.
   Tighter gap and page padding so the whole row fits comfortably. */
.shop-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  max-width: 1280px !important;
  align-items: stretch;
}

/* Homepage Explore The Range: cards ~15% wider than /shop version.
   Bumping max-width from 1280 → 1472 makes each column ~15% wider. */
#products .shop-grid {
  max-width: 1472px !important;
}
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* Card: smaller padding, tighter internal spacing. */
.shop-card {
  padding: clamp(14px, 1.4vw, 20px) !important;
  gap: 10px !important;
  border-radius: 18px !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(24, 30, 30, 0.08);
}

/* Bottle image well: square aspect like the homepage, smaller cap.
   Transparent background so the cutout bottles float on the card. */
.shop-card .product-card-img {
  aspect-ratio: 1 / 1 !important;
  max-height: 240px !important;
  background: transparent !important;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.shop-card .product-card-img img {
  width: 81% !important;
  height: 81% !important;
  object-fit: contain !important;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card:hover .product-card-img img { transform: scale(1.05); }

/* Homepage Explore The Range: bottle image ~25% larger.
   Raise the image well cap (240 → 300) and scale the bottle inside
   (92% → 100% of the well, with reduced inner padding) so the visual
   bottle appears ~25% larger overall. */
#products .shop-card .product-card-img {
  max-height: 300px !important;
  padding: 2px !important;
}
#products .shop-card .product-card-img img {
  width: 88% !important;
  height: 88% !important;
}

/* Title: fit to card width via JS (see fitCardTitles in modern.js). Font size is set inline by JS; these are safe defaults + shape. */
.shop-card { container-type: inline-size; }
.shop-card h2 {
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.4rem) !important;
  line-height: 1.15 !important;
  margin: 4px 0 0 !important;
  min-height: calc(1.15em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* Tagline: shrink and clamp to 2 lines. Reserve 2-line height even when copy fits on 1 line so prices align across cards. */
.shop-card .product-tagline {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(0.82rem * 1.4 * 2); /* fixed 2-line height so all card prices align */
  min-height: calc(0.82rem * 1.4 * 2);
}

/* Tags: keep small, cap visible to 3 in flex order. Reserve 2-row height so tag containers + price line up across cards. */
.shop-card .product-tags {
  gap: 6px !important;
  margin: 2px 0 0 !important;
  align-content: flex-start;
  min-height: 52px; /* two rows of chips at 22px + 6px gap + slack */
  max-height: 52px;
  overflow: hidden;
}
.shop-card .product-tag {
  font-size: 0.62rem !important;
  padding: 2px 8px !important;
}
/* Hide 4th+ tag so tag rows don't blow out card height */
.shop-card .product-tags .product-tag:nth-child(n+4) { display: none; }

/* Price: smaller, aligned left, less prominent. */
.shop-card .product-price {
  font-size: 1.15rem !important;
  margin: 4px 0 0 !important;
  font-weight: 700;
}

/* Shopify Add-to-Cart: compact button, no quantity stepper spam. */
.shop-card-actions {
  margin-top: 4px !important;
  gap: 8px !important;
}
.shop-card-actions .shopify-buy-button .shopify-buy__btn,
.shop-card-actions .shopify-buy__btn {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
  min-height: 36px !important;
}
/* Hide the qty stepper inside compact cards; users can adjust on PDP */
.shop-card-actions .shopify-buy__quantity-container,
.shop-card-actions .shopify-buy__option--select,
.shop-card-actions .shopify-buy__product__variant-selectors {
  display: none !important;
}

/* ---- Senior Longevity: full-width horizontal card underneath ---- */
.shop-card--coming-soon {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 300px) 1fr !important;
  gap: clamp(20px, 3vw, 40px) !important;
  padding: clamp(20px, 2vw, 32px) !important;
  align-items: center;
}
.shop-card--coming-soon .product-card-img {
  aspect-ratio: 1 / 1 !important;
  max-height: 260px !important;
  width: 100%;
  margin: 0;
}
/* Blur the Senior Longevity bottle image to reinforce Coming Soon status */
.shop-card--coming-soon .product-card-img img {
  filter: blur(5px) saturate(0.85) !important;
  opacity: 0.9 !important;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.shop-card--coming-soon .coming-soon-behind {
  display: none !important; /* redundant with the horizontal layout */
}
.shop-card--coming-soon .coming-soon-overlay {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 10px !important;
  padding: 0 !important;
}
.shop-card--coming-soon .coming-soon-spacer { display: none !important; }
.shop-card--coming-soon .coming-soon-body {
  flex: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  gap: 10px !important;
}
.shop-card--coming-soon .coming-soon-title {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem) !important;
  margin: 0 !important;
}
.shop-card--coming-soon .coming-soon-desc {
  font-size: 0.92rem !important;
  max-width: 620px !important;
  margin: 0 !important;
}

/* Mobile: stack the Senior Longevity card. */
@media (max-width: 640px) {
  .shop-card--coming-soon {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .shop-card--coming-soon .product-card-img {
    max-height: 220px !important;
    margin: 0 auto !important;
  }
  .shop-card--coming-soon .coming-soon-overlay,
  .shop-card--coming-soon .coming-soon-body {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   FIX PASS 6 (Aug 12): shop.html — shrink the Shopify quantity
   stepper by ~25%, add "Buy on Amazon" secondary CTA + subscribe
   copy under each card's Add to Cart.
   ============================================================ */

/* Undo prior "hide stepper" rule — the stepper is wanted, just smaller. */
.shop-card-actions .shopify-buy__quantity-container,
.shop-card-actions .shopify-buy__option--select,
.shop-card-actions .shopify-buy__product__variant-selectors {
  display: revert !important;
}

/* Compact shop-card-actions column so the CTAs stack cleanly. */
.shop-card-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

/* Shopify Buy Button widget: iframe + inner elements at 75%. */
.shop-card-actions .shopify-buy-frame,
.shop-card-actions .shopify-buy-frame--product {
  width: 100% !important;
  min-width: 0 !important;
}
.shop-card-actions .shopify-buy__product,
.shop-card-actions .shopify-buy__product__actual-price,
.shop-card-actions .shopify-buy__product__variant-title {
  font-size: 0.78rem !important;
}

/* Quantity stepper (- 1 +): ~48% smaller total (was 0.75, now 0.525) —
   centered horizontally so it aligns with the full-width Add to Cart
   and Buy on Amazon buttons below. */
.shop-card-actions .shopify-buy__quantity-container {
  transform: scale(0.525);
  transform-origin: center center;
  margin: -6px auto !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.shop-card-actions .shopify-buy__quantity,
.shop-card-actions .shopify-buy__quantity-input,
.shop-card-actions input.shopify-buy__quantity {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.82rem !important;
  padding: 0 !important;
  line-height: 28px !important;
}
.shop-card-actions .shopify-buy__btn--seamless,
.shop-card-actions .shopify-buy__quantity-decrement,
.shop-card-actions .shopify-buy__quantity-increment {
  width: 22px !important;
  height: 28px !important;
  min-width: 22px !important;
  font-size: 0.9rem !important;
  line-height: 28px !important;
  padding: 0 !important;
}

/* Add to Cart button remains full-width and matches brand primary. */
.shop-card-actions .shopify-buy-button .shopify-buy__btn,
.shop-card-actions .shopify-buy__btn {
  width: 100% !important;
  padding: 9px 14px !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  min-height: 40px !important;
}

/* ---- Available at Amazon secondary CTA (two-line, white bg) ---- */
.btn-amazon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 7px 14px;
  font-family: var(--font-body, 'Satoshi', sans-serif);
  color: #232F3F; /* Amazon navy, matches badge text */
  background: #ffffff;
  border: 1px solid #D4D1CA;
  border-radius: 18px;
  min-height: 44px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  margin-top: 2px;
  line-height: 1.15;
}
.btn-amazon-main {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* "Available at Amazon" badge image */
.btn-amazon-badge {
  display: block;
  height: 24px;
  width: auto;
  max-width: 150px;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply; /* drop the JPG's white bg into the white button */
}
.amazon-mark {
  display: inline-block;
  height: 1.35em;
  width: auto;
  vertical-align: -0.25em; /* baseline align with 'Buy on' */
  margin-left: 1px;
}
.btn-amazon-sub {
  font-size: 0.7rem;
  font-weight: 500;
  font-style: italic;
  color: #232F3F;
  letter-spacing: 0.01em;
}
.btn-amazon:hover {
  background: #F7F6F2;
  border-color: #B9B6AD;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.btn-amazon:active { transform: translateY(0); }

/* Legacy external subscribe helper (no longer used) — hide if present */
.amazon-subscribe { display: none !important; }

/* ============================================================
   FIX PASS 7 (Aug 12): tighten space between hero and black
   tagline pill, shrink the trust bar, and raise the 30-Day
   Happiness badge into the top-right corner of the hero photo.
   ============================================================ */

/* 1) Extend the hero image downward and reduce the hero section's
      bottom padding so the trust bar hugs the photo. */
.ep-hero {
  padding-bottom: clamp(18px, 2.5vw, 36px) !important;
  min-height: clamp(600px, 88vh, 900px) !important;
}
.ep-hero::after {
  bottom: clamp(6px, 1.4vw, 18px) !important; /* photo extends nearly to section edge */
}

/* 2) Tighten the trust bar so the four badges sit on a compact row. */
.trust-bar {
  padding: clamp(10px, 1.4vw, 16px) clamp(16px, 4vw, 48px) !important;
  margin-top: 0 !important;
}

/* 3) Raise the 30-Day Happiness badge into the top-right corner of
      the hero photo — high enough that it clears the Skin & Coat
      bottle top and reads as a corner badge, not an overlay. */
.ep-hero-badge {
  top: clamp(88px, 9.5vw, 132px) !important;
  right: clamp(150px, 14vw, 230px) !important; /* nudged left so it clears all treats + bottles */
}
@media (max-width: 768px) {
  .ep-hero-badge {
    top: auto !important; /* mobile keeps its static position from earlier CSS */
  }
}

/* FIX PASS 8 (Aug 12): eliminate 1px cream seam between adjacent
   dark sections (about-mission + type-banner). Subpixel positions
   were letting the cream body color bleed through as a hairline. */
.about-mission + .type-banner,
.type-banner {
  margin-top: -1px !important;
}
.about-mission {
  margin-bottom: -1px !important;
}

/* FIX PASS 9 (Aug 12): FurHumans banner uses the light cream product
   hero image, so darken far less and switch title to ink color. */
/* About banner: show composite image fully, no overlay/H1 */
.page-hero.page-hero--plain {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #171614;
}
.page-hero.page-hero--plain .page-hero-bg {
  object-fit: cover;
  object-position: center;
}
@media (max-width: 768px) {
  .page-hero.page-hero--plain { aspect-ratio: 16 / 9; }
  .page-hero.page-hero--plain .page-hero-bg { object-fit: contain; }
}

.page-hero--light .page-hero-overlay {
  background: linear-gradient(180deg, rgba(252,249,242,0.05) 0%, rgba(252,249,242,0.35) 60%, rgba(252,249,242,0.55) 100%) !important;
}
.page-hero--light h1 {
  color: var(--color-ink, #28251d) !important;
  text-shadow: 0 2px 24px rgba(252,249,242,0.55);
}

/* FIX PASS 10 (Aug 12): About page \"Our Mission\" as an inset rounded
   black pill mirroring the homepage tagline-band shape. Only applies
   when the modifier class is present, so the FurHumans page keeps
   its full-width dark mission block. */
.about-mission.about-mission--pill {
  background: transparent !important;
  position: relative;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 80px) !important;
}
.about-mission.about-mission--pill::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2.5vw, 32px) clamp(24px, 6vw, 96px);
  background: var(--color-black);
  border-radius: clamp(20px, 2.4vw, 32px);
  z-index: 1;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.35);
}
.about-mission.about-mission--pill .about-mission-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.about-mission.about-mission--pill h2 {
  color: #fff !important;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.about-mission.about-mission--pill p {
  color: rgba(255,255,255,0.85) !important;
}

/* FIX PASS 11 (Aug 12): match the hero section background to the exact
   cream color inside the full-bleed image (#fdfdfb) so the letterbox
   from background-size:contain is invisible \u2014 you can't tell where
   the image ends and the section background begins. */
.ep-hero {
  background: #fdfdfb !important;
}
.ep-hero::after {
  background-color: #fdfdfb !important;
}

/* FIX PASS 12 (Aug 12): make the hero, trust bar, and tagline-band
   share the exact same #fdfdfb background so they read as one
   continuous cream field. The Explore The Range (.products-section)
   below still uses the standard --color-cream to create a natural
   color break at that transition. */
.trust-bar {
  background: #fdfdfb !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.tagline-band {
  background: #fdfdfb !important;
}

/* FIX PASS 13 (Aug 12): the .fade-in transform (translateY 24px) on
   the trust bar was revealing 24px of body cream between the hero
   and trust bar. Match the body to the hero cream so any transform
   gap in that top region is invisible. Sections below (products,
   footer, etc.) have their own solid backgrounds so this doesn't
   affect them. */
body {
  background: #fdfdfb !important;
}

/* FIX PASS 14 (Aug 12): Full-viewport hero so the trust bar sits below
   the first fold, and the hero photo runs edge-to-edge (inset 0, no
   corner radius) to eliminate any left/right/bottom seam between the
   image area and the section cream. Scroll cue is pinned near the
   bottom of the viewport so it clears the product bottles. Mobile
   keeps its existing compact hero — a 100vh section is too much dead
   space on small screens. */
@media (min-width: 769px) {
  .ep-hero {
    min-height: 100vh !important;
    padding-bottom: 0 !important;
  }
  .ep-hero::after {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }
  .ep-hero .ep-scroll-cue {
    bottom: 6px !important;
    font-size: 10px !important;
  }
  .ep-hero .ep-scroll-cue::after {
    height: 16px !important;
  }
}

/* FIX PASS 15 (Aug 12): At mid-desktop widths (roughly 13"-15" MBP)
   the contained image scales up until the multivitamin bottle drifts
   left and starts kissing the copy column. Shift the image toward the
   right edge on those widths so the headline, subhead, and CTAs sit
   in clear cream. Above 1440 we keep the 70% position which already
   balances well. */
@media (min-width: 769px) and (max-width: 1520px) {
  /* Anchor the image container to just past the right edge of the
     copy column so the leftmost bottle always sits near the copy at
     every viewport size. The copy is padding-left clamp(20px,4vw,80px)
     wide plus max-width min(460px,38vw); we add a small 24px gutter
     after that. As the viewport shrinks the copy shrinks too, so the
     image container widens smoothly and the contained image scales
     up to fill it — no more sudden jump at 900px. Switch to cover so
     the image fills the container edge to edge and the bottles stay
     visually large as the viewport narrows (no more shrinking-with-
     whitespace behavior from contain). background-position: left
     center pulls the bottle cluster toward the copy edge. */
  .ep-hero::after {
    left: calc(clamp(20px, 4vw, 80px) + min(460px, 38vw) + 24px) !important;
    background-size: contain !important;
    background-position: left center !important;
  }
}


/* ==========================================================================
   MOBILE OPTIMIZATION PASS
   Only affects viewports <= 768px. Desktop and tablet+ styles are untouched.
   Focus: readability, tap targets, product-card density, sticky CTA,
   footer overflow, trust ticker, section rhythm, safe-area (iOS).
   Added 2026-08-13.
   ========================================================================== */

/* ---- 1. Kill any residual horizontal scroll site-wide -------------------- */
html, body { overflow-x: clip; }
@media (max-width: 768px) {
  html, body { max-width: 100vw; overflow-x: clip; }
  main, section, footer, header { max-width: 100vw; }
}

/* ---- 2. Footer: fix 32px overflow bleed on mobile ------------------------ */
@media (max-width: 640px) {
  .site-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important; /* room for sticky CTA */
  }
  .footer-newsletter,
  .footer-bottom {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    min-height: 48px;
    font-size: 16px !important;    /* prevents iOS zoom on focus */
  }
  .footer-col a {
    padding: 12px 0 !important;
    font-size: 15px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.3;
  }
  .footer-col h4 {
    font-size: 0.95rem !important;
    letter-spacing: 0.14em;
    padding: 6px 0;
  }
  .footer-copyright {
    font-size: 12.5px !important;
    padding: 0 6px;
    line-height: 1.6;
  }
  .footer-bottom .pawza-logo {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- 3. Announcement ticker: readable, no clipping ----------------------- */
@media (max-width: 640px) {
  .announcement-bar {
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }
  .announcement-bar .ticker-item {
    padding: 0 22px !important;
    font-size: 13px !important;
  }
}

/* ---- 4. Nav: larger tap targets on mobile -------------------------------- */
@media (max-width: 768px) {
  .nav .nav-center a,
  .nav .hamburger {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav .hamburger { padding: 8px !important; }
  .mobile-nav a {
    min-height: 56px !important;
    font-size: 20px !important;
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
  }
}

/* ---- 5. Trust badges bar: readable ---------------------------------------- */
@media (max-width: 640px) {
  .trust-bar { padding: 20px 16px !important; }
  .trust-bar .trust-badges {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 10px !important;
  }
  .trust-bar .trust-badge-text {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .trust-bar .trust-badge-icon svg,
  .trust-bar .trust-badge-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ---- 6. Section headings + rhythm on mobile ------------------------------ */
@media (max-width: 640px) {
  h1 { line-height: 1.05 !important; }
  h2 { line-height: 1.15 !important; }
  section > .container,
  section {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .ep-section-sub, .section-sub { font-size: 15.5px !important; line-height: 1.55 !important; }
}

/* ---- 7. Hero mobile polish ------------------------------------------------ */
@media (max-width: 640px) {
  .ep-hero { padding-top: 88px !important; padding-bottom: 24px !important; }
  .ep-hero-content { padding: 0 8px !important; }
  .ep-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    line-height: 1.02 !important;
  }
  .ep-eyebrow {
    font-size: 11.5px !important;
    padding: 6px 14px !important;
  }
  .ep-hero-claims {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-items: center;
  }
  .ep-hero-claims span {
    font-size: 14px !important;
    justify-self: center;
  }
  .ep-hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .ep-hero-ctas .ep-btn {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    font-size: 16px !important;
  }
  .ep-hero-badge {
    right: 12px !important;
    bottom: 14px !important;
    width: 84px !important;
    height: 84px !important;
    font-size: 11px !important;
  }
  .ep-hero-badge .big { font-size: 15px !important; }
  .ep-hero-badge .sm { font-size: 9.5px !important; }
  .ep-scroll-cue { display: none !important; }
}

/* ---- 8. Product cards on mobile: compact + conversion-focused ------------ */
@media (max-width: 640px) {
  #products .products-grid,
  #products {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 16px !important;
  }
  .shop-card {
    padding: 18px 16px 20px !important;
    border-radius: 22px !important;
    gap: 8px !important;
  }
  .shop-card .product-card-img {
    max-width: 220px !important;
    margin: 0 auto !important;
    padding: 4px 0 !important;
  }
  .shop-card .product-card-img img {
    width: 82% !important;
    height: 82% !important;
  }
  #products .shop-card .product-card-img img {
    width: 88% !important;
    height: 88% !important;
  }
  .shop-card h2 {
    font-size: 1.2rem !important;
    min-height: calc(1.15em * 2);
    text-align: left;
  }
  .shop-card .product-tagline {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    height: calc(0.9rem * 1.35 * 2) !important;
    min-height: calc(0.9rem * 1.35 * 2) !important;
  }
  .shop-card .product-tags {
    min-height: 30px !important;
    max-height: 30px !important;
    gap: 6px !important;
  }
  /* Hide 3rd+ chip on mobile so tags fit in a single tidy row */
  .shop-card .product-tags .product-tag:nth-child(n+3) { display: none !important; }
  .shop-card .product-tag {
    font-size: 0.66rem !important;
    padding: 3px 9px !important;
  }
  .shop-card .product-price {
    font-size: 1.35rem !important;
    margin-top: 6px !important;
  }
  .shop-card-actions {
    gap: 10px !important;
    margin-top: 8px !important;
  }
  .btn-amazon { min-height: 48px !important; padding: 8px 12px !important; }
  .btn-amazon-badge { height: 22px !important; }
  .btn-amazon-sub { font-size: 12px !important; }

  /* Coming-soon Senior card: compact */
  .shop-card--coming-soon { padding: 16px !important; }
  .shop-card--coming-soon .product-card-img { max-width: 160px !important; }
}

/* ---- 9. Sticky mobile CTA: iOS safe-area + no footer overlap ------------ */
@media (max-width: 768px) {
  .mobile-sticky-cta {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    padding: 12px 18px 12px 12px !important;
    min-height: 52px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  .mobile-sticky-cta.is-visible {
    transform: translate(-50%, 0) !important;
  }
  .mobile-sticky-cta.is-hidden-footer {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 20px) !important;
  }
  .mobile-sticky-cta .msc-pill { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .mobile-sticky-cta .msc-text { font-size: 15px !important; }
}

/* ---- 10. PDP mobile polish ------------------------------------------------ */
@media (max-width: 640px) {
  .pdp-hero { padding: 16px !important; }
  .pdp-trust-grid,
  .pdp-badges,
  .product-badge-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .pdp-title, .product-title {
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    line-height: 1.15 !important;
  }
  .pdp-tagline { font-size: 15.5px !important; }
  .pdp-tags .product-tag,
  .pdp-tags .tag { font-size: 0.7rem !important; padding: 4px 10px !important; }
  .pdp-price { font-size: 1.7rem !important; }
  .pdp-add-to-cart, .pdp-buy button {
    min-height: 54px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  .pdp-buy .shopify-buy-button iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
  .pdp-content h2, .pdp-content h3 {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }
  .pdp-content p, .pdp-content li {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
}

/* ---- 11. FAQ mobile ------------------------------------------------------- */
@media (max-width: 640px) {
  .faq-item summary,
  .faq-item > button {
    padding: 18px 44px 18px 4px !important;
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    min-height: 60px !important;
  }
  .faq-item .faq-body,
  .faq-item p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding-right: 4px;
  }
}

/* ---- 12. Contact + About hero mobile ------------------------------------- */
@media (max-width: 640px) {
  .page-hero, .about-hero, .contact-hero {
    min-height: 320px !important;
    height: 40vh !important;
  }
  .page-hero h1, .about-hero h1, .contact-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  .contact-form textarea { min-height: 120px !important; }
  .contact-form button[type="submit"] {
    min-height: 54px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
}

/* ---- 13. Science/ingredient carousel arrows: larger tap targets --------- */
@media (max-width: 640px) {
  .science-arrow,
  .carousel-arrow,
  [aria-label*="ingredient"],
  [aria-label*="Previous"],
  [aria-label*="Next"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ---- 14. Testimonials / bento sections: readable + tighter --------------- */
@media (max-width: 640px) {
  .tb-quote, .testimonial p, blockquote {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  .bento-grid, .tb-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ---- 15. Body base + form inputs: prevent iOS zoom ----------------------- */
@media (max-width: 640px) {
  body { font-size: 16px !important; }
  input, textarea, select {
    font-size: 16px !important;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0,151,178, 0.15);
  }
  button, a { -webkit-tap-highlight-color: rgba(0,151,178, 0.15); }
}

/* ---- 16. Iframe (Shopify) safety on mobile ------------------------------- */
@media (max-width: 640px) {
  .shopify-buy-button,
  .shopify-buy-frame,
  .shopify-buy-frame iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---- 17. Coming-soon banner mobile --------------------------------------- */
@media (max-width: 640px) {
  .shop-card--coming-soon .product-tagline,
  .shop-card--coming-soon p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
}

/* ---- 18. "Learn More →" link: larger tap ---------------------------------- */
@media (max-width: 640px) {
  a[href*="senior-longevity"],
  .learn-more-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 15px !important;
  }
}

/* ---- 19. Reserve space under mobile sticky CTA so content is never covered - */
@media (max-width: 768px) {
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  /* Only add extra bottom pad on pages that use the sticky CTA (added by JS) */
  body.has-sticky-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }
}

/* ---- 20. Contact page: bigger email link tap targets + tiny-text patches -- */
@media (max-width: 640px) {
  a[href^="mailto:"], a[href^="tel:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 2px;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  /* PDP trust-chip labels: bump from 11.2 to 12.5 for readability */
  .pdp-hero-trust .trust-item span,
  .pdp-hero-trust .pdp-trust-label,
  .pdp-trust-chip,
  .pdp-badge span { font-size: 12.75px !important; letter-spacing: 0.02em !important; }
  /* Product tag chips: bump minimum to 12px */
  .product-tag, .pdp-tag { font-size: 12px !important; letter-spacing: 0.03em !important; }
  /* Small "BESTSELLER" and card tag ribbons */
  .badge-ribbon, .card-badge, .shop-card-badge { font-size: 11.5px !important; }
}


/* ==========================================================================
   TUNING PASS (2026-08-13)
   1) Shrink Senior Longevity card ~25% (padding, image, title, desc)
   2) Calm hover animation on active product cards (subtle lift only)
   3) Remove hover animation entirely on Senior Longevity (coming-soon)
   ========================================================================== */

/* ---- Senior Longevity: ~25% smaller (desktop + tablet) ------------------- */
.shop-card--coming-soon {
  grid-template-columns: minmax(140px, 220px) 1fr !important;
  gap: clamp(16px, 2vw, 28px) !important;
  padding: clamp(14px, 1.5vw, 22px) !important;
}
.shop-card--coming-soon .product-card-img {
  max-height: 190px !important;
}
.shop-card--coming-soon .coming-soon-title {
  font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem) !important;
}
.shop-card--coming-soon .coming-soon-desc {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  max-width: 520px !important;
}
.shop-card--coming-soon .coming-soon-link {
  font-size: 0.85rem !important;
  padding-top: 2px !important;
}

/* Mobile: stack again (grid-template-columns overridden by new rule above) + shrink image */
@media (max-width: 640px) {
  .shop-card--coming-soon {
    grid-template-columns: 1fr !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    text-align: center !important;
  }
  .shop-card--coming-soon .product-card-img {
    max-height: 155px !important;
    max-width: 155px !important;
    margin: 0 auto !important;
  }
  .shop-card--coming-soon .coming-soon-title {
    font-size: 1.15rem !important;
  }
  .shop-card--coming-soon .coming-soon-desc {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
  .shop-card--coming-soon .coming-soon-overlay,
  .shop-card--coming-soon .coming-soon-body {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ---- Calm hover on ACTIVE product cards (about 80% less movement) ------ */
/* Product cards (homepage grid) */
.product-card { transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring), border-color 0.28s ease !important; }
.product-card:hover {
  transform: translateY(-1px) !important;   /* was -6px, now half of -2px */
  box-shadow:
    0 6px 14px -10px rgba(var(--card-accent), 0.22),
    0 3px 8px rgba(26, 26, 26, 0.04) !important;
}

/* Shop-card grid cards */
.shop-card,
.shop-card-link .shop-card {
  transition: transform 0.28s var(--ease-spring),
              box-shadow 0.28s var(--ease-spring),
              border-color 0.28s ease !important;
}
.shop-card-link:hover .shop-card {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px -10px rgba(var(--card-accent), 0.22),
    0 3px 8px rgba(26, 26, 26, 0.04) !important;
}
/* Override the second definition (shop.html) that used translateY(-3px) */
.shop-card:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 14px -10px rgba(var(--card-accent), 0.22),
    0 3px 8px rgba(24, 30, 30, 0.04) !important;
}

/* Tame the blurred accent blob movement on hover */
.shop-card-link:hover .shop-card::before {
  transform: translate(-50%, 12%) scale(1.008) !important;
}

/* Tame the bottle-image zoom on hover */
.shop-card:hover .product-card-img img {
  transform: scale(1.008) !important;
}

/* ---- Extra spacing above the Senior Longevity card ---------------------- */
/* The four active cards use grid gap ~16-24px above the full-width Senior
   card. Add extra top margin so the horizontal card visually breathes
   under the row when nothing is hovered. */
.shop-card--coming-soon {
  margin-top: clamp(24px, 3vw, 44px) !important;
}
@media (max-width: 640px) {
  .shop-card--coming-soon {
    margin-top: 20px !important;
  }
}

/* ---- Unified banding fix (top block + between darker sections) --------
   Two rendering problems collided:

   1. Top block: hero, trust-bar, tagline-band all paint #fdfdfb (lighter
      cream). The .fade-in transform on trust-bar reserves ~24px of body
      color between the hero and the trust-bar. If body is #fdfdfb, that
      24-px slice reads as a darker horizontal bar right above the trust
      badges. Also, section-mark 01 sits on body between tagline-band and
      products-section.

   2. Between darker sections (products / ingredients / testimonials, all
      #fdfdfb): the section-marks 02 and 03 also sat on body. If body is
      #fdfdfb, those marks read as a lighter horizontal bar.

   Solution:
   - Keep body at the hero cream (#fdfdfb). The full top block is
     continuous — hero, trust-bar, tagline-band, and section-mark 01 all
     paint #fdfdfb. The color transition happens exactly at the
     products-section ("Explore The Range").
   - Paint section-marks that sit between darker sections (marks 02 and 03)
     explicitly to #fdfdfb so they blend with the sections around them.
*/

body {
  background-color: #fdfdfb !important;
}

.section-mark {
  background: transparent !important;
  padding: 28px 24px 8px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  color: rgba(40, 37, 29, 0.55) !important;
}
.section-mark .num {
  opacity: 0.9 !important;
}
@media (max-width: 640px) {
  .section-mark {
    padding: 22px 16px 8px !important;
  }
}

/* Marks 02 and 03: sit between darker-cream sections. */
.products-section + .section-mark,
.ingredients-carousel-section + .section-mark {
  background: #fdfdfb !important;
}

/* ---- Stop .fade-in from creating cream stripes between sections --------
   Real root cause of the recurring “random bar” issue:

   .fade-in { opacity: 0; transform: translateY(24px); } is applied at the
   *section* level. Until the IntersectionObserver fires and adds
   .is-visible, the section is transparent AND shifted 24 px down from its
   layout position. That leaves a 24-px slice of body color exposed
   between adjoining sections. Body can only be one color, so between two
   darker sections you get a lighter stripe, and between the lighter hero
   block and a darker section below it you get a darker stripe. No color
   choice for body wins in every seam.

   Fix: keep the reveal animation on inner content (product cards,
   testimonial tiles, etc. already use their own keyframes), but pin the
   top-level layout sections to opacity 1 and transform none so their
   backgrounds paint in place from the start with zero gap.
*/
.ep-hero.fade-in,
.trust-bar.fade-in,
.tagline-band.fade-in,
.section-mark.fade-in,
.products-section.fade-in,
.ingredients-carousel-section.fade-in,
.testimonials-bento.fade-in,
.about-mission.fade-in,
.type-banner.fade-in,
.faqs-section.fade-in,
.social-strip.fade-in,
.press-strip.fade-in,
.site-footer.fade-in,
footer.fade-in,
header.fade-in,
main > section.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Footer copyright: teal on black instead of black-on-black ---------- */
.footer-copyright,
.site-footer .footer-copyright {
  color: var(--color-accent, #0097B2) !important;
  opacity: 1 !important;
}

/* ---- Senior Longevity: FULLY FIXED, no hover motion, no color outline ---- */

/* Lock the pointer-follow spotlight so the accent halo doesn't brighten on hover */
.shop-card--coming-soon {
  --mx: 50% !important;
  --my: 30% !important;
}

/* Card itself: no motion, no transition, keep neutral border on all states */
.shop-card--coming-soon,
.shop-card--coming-soon:hover,
.shop-card--coming-soon:focus,
.shop-card--coming-soon:focus-within,
.shop-card--coming-soon:active,
.shop-card-link .shop-card--coming-soon,
.shop-card-link:hover .shop-card--coming-soon,
.shop-card-link:focus .shop-card--coming-soon,
.shop-card-link:focus-within .shop-card--coming-soon,
a[href*="senior-longevity"] .shop-card--coming-soon,
a[href*="senior-longevity"]:hover .shop-card--coming-soon,
a[href*="senior-longevity"]:focus .shop-card--coming-soon {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(26, 26, 26, 0.08) !important;   /* explicit base neutral, matches non-hover */
  outline: none !important;
  transition: none !important;
}

/* Kill the accent blob transform + transition on every state */
.shop-card--coming-soon::before,
.shop-card--coming-soon:hover::before,
.shop-card--coming-soon:focus::before,
.shop-card--coming-soon:focus-within::before,
.shop-card-link:hover .shop-card--coming-soon::before,
a[href*="senior-longevity"]:hover .shop-card--coming-soon::before {
  transform: translate(-50%, 12%) scale(1) !important;
  transition: none !important;
}

/* Kill any image zoom */
.shop-card--coming-soon .product-card-img,
.shop-card--coming-soon .product-card-img img,
.shop-card--coming-soon:hover .product-card-img img,
.shop-card-link:hover .shop-card--coming-soon .product-card-img img,
a[href*="senior-longevity"]:hover .shop-card--coming-soon .product-card-img img {
  transform: none !important;
  transition: none !important;
}

/* Older .product-card--coming-soon variant: same treatment */
.product-card--coming-soon,
.product-card--coming-soon:hover,
.product-card--coming-soon:focus,
.product-card--coming-soon:focus-within {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(26, 26, 26, 0.08) !important;
  outline: none !important;
  transition: none !important;
}

/* ---------------------------------------------------------------------
   Product card carousel — used on multivitamin card (index + shop).
   Replaces the single .product-card-img <img> with a horizontal
   scroll-snap track + dot indicators + hover arrows. The whole card
   still routes to the PDP via the individual slide links and the title
   link below the gallery.
   --------------------------------------------------------------------- */
.card-carousel {
  position: relative;
  overflow: hidden;
}
.card-carousel .card-carousel-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.card-carousel .card-carousel-track::-webkit-scrollbar { display: none; }
.card-carousel .card-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  text-decoration: none;
}
.card-carousel .card-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
/* Bottle (first slide) is a rendered SVG or transparent-background bottle photo
   — display it contained, matching the original card treatment. */
.card-carousel .card-carousel-slide:first-child img[src$=".svg"],
.card-carousel .card-carousel-slide:first-child img[src*="bottle-"] {
  object-fit: contain;
  padding: 8%;
}
.card-carousel:hover .card-carousel-slide img { transform: scale(1.02); }

/* Arrow navigation — desktop hover only */
.card-carousel .card-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.08);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
  z-index: 3;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.card-carousel .card-carousel-nav svg { width: 16px; height: 16px; }
.card-carousel .card-carousel-prev { left: 10px; }
.card-carousel .card-carousel-next { right: 10px; }
.card-carousel:hover .card-carousel-nav { opacity: 1; }
.card-carousel .card-carousel-nav:hover { background: #ffffff; }
.card-carousel .card-carousel-nav:disabled { opacity: 0 !important; pointer-events: none; }

/* Dot indicators */
.card-carousel .card-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.card-carousel .card-carousel-dot {
  pointer-events: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(26, 26, 26, 0.28);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}
.card-carousel .card-carousel-dot.is-active {
  width: 18px;
  border-radius: 3px;
  background: var(--color-accent, #0097B2);
}

/* Hide arrows on touch devices — dots + swipe are enough there */
@media (hover: none) {
  .card-carousel .card-carousel-nav { display: none; }
}

/* Title link below the card gallery keeps same styling as .shop-card-link */
.shop-card-link--title {
  display: block;
  text-decoration: none;
  color: inherit;
}
.shop-card-link--title h2 { margin: 0; }

/* Respect fade-in override — the carousel article sits at opacity:1 already
   via the earlier fix-block. Also ensure the carousel arrows aren't affected
   by the block's !important reset. */
.card-carousel .card-carousel-nav,
.card-carousel .card-carousel-dot { transform: none; }

/* ---------------------------------------------------------------------
   Hover-only variant — used on index.html and shop.html product cards.
   Shows bottle by default and swaps to slide 2 on hover. All other slides,
   arrows, and dots are hidden. Full gallery still lives on the PDP.
   --------------------------------------------------------------------- */
.card-carousel--hover .card-carousel-nav,
.card-carousel--hover .card-carousel-dots { display: none !important; }

.card-carousel--hover .card-carousel-track {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  position: relative;
  height: 100%;
}

.card-carousel--hover .card-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  scroll-snap-align: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

/* Bottle stays visible by default */
.card-carousel--hover .card-carousel-slide:nth-child(1) {
  opacity: 1;
  pointer-events: auto;
}

/* On hover, fade to the second slide */
.card-carousel--hover:hover .card-carousel-slide:nth-child(1) { opacity: 0; }
.card-carousel--hover:hover .card-carousel-slide:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
}

/* Slides 3+ never render on the home/shop cards */
.card-carousel--hover .card-carousel-slide:nth-child(n+3) { display: none; }

/* Reset the whole-image zoom that regular carousel uses on hover */
.card-carousel--hover:hover .card-carousel-slide img { transform: none; }

/* Touch devices: no hover — briefly fade in slide 2 on tap-and-hold using :focus-within/active as a nicety.
   Simpler: on touch, always show bottle only. This matches the ask. */
@media (hover: none) {
  .card-carousel--hover:hover .card-carousel-slide:nth-child(1) { opacity: 1; }
  .card-carousel--hover:hover .card-carousel-slide:nth-child(2) { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------------------
   PDP gallery (product-multivitamin.html) — main image + thumbnail row
   --------------------------------------------------------------------- */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}
.pdp-gallery-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-white);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-height: 620px;
}
.pdp-gallery-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 220ms ease;
}
.pdp-gallery-image.is-swapping { opacity: 0; }

.pdp-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.pdp-gallery-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.pdp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-gallery-thumb:first-child img {
  object-fit: contain;
  padding: 8%;
}
.pdp-gallery-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 151, 178, 0.4);
}
.pdp-gallery-thumb.is-active {
  border-color: var(--color-accent, #0097B2);
  box-shadow: 0 0 0 1px var(--color-accent, #0097B2);
}
.pdp-gallery-thumb.is-active { transform: none; }

@media (max-width: 768px) {
  .pdp-gallery-main { max-height: 460px; padding: var(--space-1); }
  .pdp-gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}

/* ============================================================
   FIX PASS 21 (Aug 28): MOBILE HERO REBUILD
   Old mobile hero drew the product photo as a small inset card at
   55% opacity under a heavy cream wash, with the subhead + claim
   row layered on top of the bottles. Result: washed-out image,
   unreadable overlap, tiny bottles.

   New approach — stack, don't overlay:
     1. Full-bleed photo band at the top, opacity 1, no fade,
        edge-to-edge, sized so the bottles fill the screen width.
     2. Solid #fdfdfb text block beneath it: eyebrow, headline,
        CTAs, rating, guarantee badge.
     3. Subhead paragraph + "No Fillers" claim row hidden on
        mobile (they were the small print sitting over the photo).
   ============================================================ */
@media (max-width: 768px) {
  .ep-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 0 clamp(20px, 6vw, 36px) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  /* 1) Full-bleed photo band — no fade, no inset, no opacity */
  .ep-hero::after {
    content: '' !important;
    position: relative !important;
    display: block !important;
    order: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: clamp(360px, 56svh, 560px) !important;
    margin: 0 !important;
    background-image: url('./assets/hero-fullbleed.jpg') !important;
    background-size: cover !important;
    background-position: 50% 57% !important;
    background-repeat: no-repeat !important;
    background-color: #fdfdfb !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 0 !important;
  }

  /* 2) Kill the cream wash entirely on mobile */
  .ep-hero::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* Decorative blobs would become stray flex items — remove them */
  .ep-hero .ep-blob { display: none !important; }

  /* 3) Text block sits BELOW the photo on solid cream */
  .ep-hero-content {
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(18px, 5vw, 28px) 20px 0 !important;
    background: #fdfdfb !important;
  }
  .ep-hero-content .ep-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  .ep-hero-content h1 {
    font-size: clamp(34px, 9.5vw, 48px) !important;
    line-height: 1.03 !important;
    margin: 12px 0 18px !important;
  }
  /* Small print removed on mobile */
  .ep-hero-content .ep-section-sub,
  .ep-hero-claims {
    display: none !important;
  }
  .ep-hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .ep-hero-ctas .ep-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 22px !important;
    font-size: 15px !important;
  }
  .ep-rating {
    justify-content: center !important;
    margin-top: 14px !important;
    font-size: 13px !important;
  }

  /* 4) Guarantee badge sits last, compact */
  .ep-hero-badge {
    order: 3 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 84px !important;
    height: 84px !important;
    margin: 18px auto 0 !important;
    background: #fdfdfb !important;
    color: var(--color-accent) !important;
    border: 1.5px solid rgba(0,151,178,0.35) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 3 !important;
  }
  .ep-hero-badge .big { font-size: 15px !important; }
  .ep-hero-badge .sm  { font-size: 7.5px !important; letter-spacing: 0.06em !important; }

  .ep-hero .ep-scroll-cue { display: none !important; }
}

/* ============================================================
   FIX PASS 22 (Aug 28): continuous hero colorway — ALL VIEWPORTS
   The hero photo's own studio backdrop is #FAF7F2. Carry that exact
   tone through the hero, the trust bar, and the tagline band so
   everything above the product range reads as one uninterrupted
   surface. The range keeps #fdfdfb so it still separates.

   This also repairs desktop. The desktop photo uses background-size
   contain, so it letterboxes inside its container. Once the surface
   behind it became #fdfdfb, that letterbox turned into a visible
   hard-edged box with dead cream below it. Matching the surface to
   the photo's own backdrop makes those edges disappear again.
   ============================================================ */
.ep-hero,
.trust-bar,
.tagline-band {
  background-color: #FAF7F2 !important;
}

/* the letterbox behind the contained desktop photo */
.ep-hero::after {
  background-color: #FAF7F2 !important;
}

.tagline-band {
  background-image: none !important;
}

@media (max-width: 768px) {
  /* on mobile the copy block is a real stacked panel, so it needs the
     tone painted on directly; on desktop it stays transparent so the
     ::before cream gradient still reads through */
  .ep-hero-content {
    background: #FAF7F2 !important;
  }
  .ep-hero-badge {
    background: #FAF7F2 !important;
  }
  .trust-bar::before,
  .trust-bar::after {
    display: none !important;
  }
}