/* CURSOR_TASK_004_UI_FIX — brand tone: cold white, navy/glacier, subdued product cards */

:root {
  --seo-bg-page: #f7f9fa;
  --seo-bg-card: #ffffff;
  --seo-border: #e8edf2;
  --seo-text: #24323d;
  --seo-text-muted: #6b7280;
}


/* V5_REMOVE_HERO_COPY_BODY_MARGIN_RESET: keep browser default body margin from creating mobile overflow after removing the hero copy panel. */
body {
  margin: 0;
}

/* TAILWIND_DISPLAY_FALLBACK_20260522
   Critical local fallback for nav visibility. The homepage should not depend
   on the remote Tailwind CDN to hide desktop navigation on mobile. */
.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }

  .md\:hidden {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .md\:flex {
    display: none !important;
  }

  #mobile-menu.hidden {
    display: none !important;
  }
}

body.bg-brand-cream {
  background-color: var(--seo-bg-page);
}

/* MOBILE_FULL_BLEED_OVERFLOW_FIX_20260523
   On narrow screens, the homepage already spans the viewport. The desktop
   full-bleed negative margin can add scrollbar width to 100vw and create a
   406/390 overflow in browser QA. */
@media (max-width: 767px) {
  .hero-section-mobile,
  .cta-glow-bg {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hero: keep mountains visible, lighter mask */
.hero-bg-mask {
  background: linear-gradient(
    180deg,
    rgba(27, 58, 75, 0.35) 0%,
    rgba(27, 58, 75, 0.5) 45%,
    rgba(253, 252, 248, 0.92) 100%
  ) !important;
}

/* Product cards — brand site, not poster wall */
.product-item,
.home-product-card {
  background: var(--seo-bg-card) !important;
  border: 1px solid var(--seo-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.product-item:hover,
.home-product-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(58, 124, 165, 0.25) !important;
}

.product-color-bar {
  height: 4px !important;
  opacity: 0.85;
}

.product-item .aspect-video,
.home-product-card .h-44 {
  background: #f3f6f8 !important;
}

.product-item img[data-product-img],
.home-product-card img[data-home-img] {
  object-fit: contain !important;
  object-position: center !important;
  filter: saturate(0.88) contrast(1.02);
  padding: 0.5rem;
}

.home-product-card .h-44 img {
  object-fit: contain !important;
}

/* Priority products — subtle ring, not billboard scale */
.product-item[data-id="04"],
.product-item[data-id="05"],
.product-item[data-id="07"],
.product-item[data-id="10"],
.product-item[data-id="11"] {
  box-shadow: 0 0 0 1px rgba(58, 124, 165, 0.2), var(--shadow-sm) !important;
}

/* FAQ accordion — clean white cards */
.faq-item {
  background: var(--seo-bg-card) !important;
  border-color: var(--seo-border) !important;
}

/* P0 static sections */
#seo-21day,
.seo-p0-panel {
  background: #ffffff;
}

.seo-p0-panel-muted {
  background: #f3f6f8;
}

/* ─────────────────────────────────────────────────────────────────
   CURSOR_TASK_004_MOBILE_HERO_FIX
   Repair: on phones (≤768px), hero text used to overlap the product
   image. Keep the desktop layout untouched, but on mobile push the
   text *below* the product art strip and add a localized cool-tone
   mask under the copy so it stays readable. Brand tone preserved
   (Canadian cool, navy/glacier gradient, no heavy black overlay).
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. Restore enough vertical space so the text sits under the art */
  .hero-section-mobile {
    min-height: 720px !important;
    min-height: 100svh !important;
    display: block !important;
  }

  /* 2. Move the text wrapper from absolute (overlapping) to flow,
        starting just below the product art strip (4rem nav + 56vw art) */
  .hero-section-mobile > .absolute.inset-0 {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding-top: calc(4rem + 100vw * 0.56 + 24px) !important;
    padding-right: 20px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    pointer-events: auto !important;
  }
  .hero-section-mobile > .absolute.inset-0 > .max-w-2xl {
    max-width: 100% !important;
  }

  /* 3. Localized cool-tone gradient that only sits under the text,
        does NOT touch the product art at top */
  .hero-section-mobile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(4rem + 100vw * 0.56);
    bottom: 0;
    background: linear-gradient(
      180deg,
      rgba(27, 58, 75, 0.0) 0%,
      rgba(27, 58, 75, 0.55) 22%,
      rgba(27, 58, 75, 0.78) 60%,
      rgba(27, 58, 75, 0.85) 100%
    );
    z-index: 5;
    pointer-events: none;
  }
  /* Lift text above the new mask */
  .hero-section-mobile > .absolute.inset-0 {
    z-index: 10 !important;
  }

  /* 4. Hero copy: clamp size, force wrap, keep the original Canadian
        white-on-cool aesthetic — no font/color redesign */
  .hero-section-mobile h1 {
    font-size: clamp(28px, 8.5vw, 40px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.005em;
    max-width: 14ch;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .hero-section-mobile h1 span[data-lang="en"] {
    max-width: 16ch;
  }
  .hero-section-mobile p.text-white\/80 {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }
  .hero-section-mobile p.text-white\/85 {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 92vw;
  }

  /* 5. CTA: stack vertically, full-width up to a comfortable cap */
  .hero-section-mobile .flex.flex-wrap.gap-3 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero-section-mobile .flex.flex-wrap.gap-3 > a,
  .hero-section-mobile .flex.flex-wrap.gap-3 > span {
    width: 100%;
    max-width: 320px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* 6. Hide the bottom scroll arrow on phones — it visually clashes
        with the stacked CTAs */
  .hero-section-mobile .hero-scroll-indicator {
    display: none !important;
  }
}

/* Product overview pages: keep narrow and mobile previews to one product per row. */
@media (max-width: 1024px) {
  #products #product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #products #product-grid .product-item {
    width: 100% !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  #products #product-grid .product-item > .p-6 > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   CURSOR_TASK_004_UI_FIX_MOBILE_PRODUCTGRID
   Mobile home product cards should read as a calm brand catalog, not
   a saturated social poster wall. Keep the real product imagery, but
   frame it inside quiet system cards without covering the product art.
   Desktop card behavior remains untouched.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #navbar,
  .hero-bg-carousel,
  .hero-bg-slide,
  .hero-section-mobile {
    max-width: 100vw;
    overflow-x: hidden;
  }

  #products {
    background: #f7f9fa !important;
    box-shadow: none !important;
    padding: 56px 16px 64px !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
  }

  #products #product-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #products #product-grid .home-product-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 253, 0.98) 100%) !important;
    border: 1px solid rgba(219, 228, 235, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 34px rgba(18, 61, 74, 0.07) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #products #product-grid .home-product-card:hover {
    transform: none !important;
    box-shadow: 0 14px 38px rgba(18, 61, 74, 0.09) !important;
  }

  #products #product-grid .home-product-card .product-color-bar {
    height: 3px !important;
    opacity: 0.52 !important;
    filter: saturate(0.65) brightness(1.08);
  }

  #products #product-grid .home-product-card .h-44 {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 12px 0;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px;
    background: transparent !important;
  }

  #products #product-grid .home-product-card .h-44::after {
    content: none !important;
    display: none !important;
  }

  #products #product-grid .home-product-card img[data-home-img] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    filter: saturate(0.82) contrast(1.0) brightness(1.0) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #products #product-grid .home-product-card a.block {
    display: block !important;
    color: #24323d !important;
    text-decoration: none !important;
    padding: 18px !important;
  }

  #products #product-grid .home-product-card h3 {
    margin: 0 0 6px !important;
    color: #24323d !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #products #product-grid .home-product-card p {
    margin: 0 0 10px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  #products #product-grid .home-product-card [data-lang]:not(.active) {
    display: none !important;
  }

  #products #product-grid .home-product-card .inline-flex {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    background: rgba(58, 124, 165, 0.08) !important;
    color: #2d6a8f !important;
  }
}

/* FULL_SITE_100_SCORE_AUDIT_OFFLINE_FALLBACK
   Offline/browser-QA fallback for pages that were relying on Tailwind CDN
   utilities for nav, product overview, and detail/article layouts. */
*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

body:has(.detail-shell) {
  background: #fdfcf8;
  color: #2d2d2d;
}

body:has(.detail-shell) > nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: rgba(253, 252, 248, 0.92);
  border-bottom: 1px solid rgba(27, 58, 75, 0.08);
  backdrop-filter: blur(14px);
}

body:has(.detail-shell) > nav > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 4rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

body:has(.detail-shell) > nav a {
  color: #1b3a4b;
  text-decoration: none;
}

body:has(.detail-shell) > nav img {
  display: block;
  width: auto !important;
  height: 4rem !important;
  max-width: 132px;
  object-fit: contain;
}

body:has(.detail-shell) > nav > div > div {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #1b3a4b;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

body:has(.detail-shell) main > section:first-child {
  padding-top: 7rem;
  padding-bottom: 3rem;
}

body:has(.detail-shell) .detail-shell {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  min-width: 0;
}

body:has(.detail-shell) .hero-card,
body:has(.detail-shell) .detail-grid,
body:has(.detail-shell) .ingredient-grid,
body:has(.detail-shell) .faq-grid,
body:has(.detail-shell) .chip-grid,
body:has(.detail-shell) .related-grid {
  min-width: 0;
}

body:has(.detail-shell) .section-block,
body:has(.detail-shell) .info-card,
body:has(.detail-shell) .faq-card,
body:has(.detail-shell) .chip-card,
body:has(.detail-shell) .related-product-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

body:has(.detail-shell) .hero-image-wrap {
  max-width: 100%;
  overflow: hidden;
}

body:has(.detail-shell) .cta-row {
  align-items: center;
}

body:has(.detail-shell) footer {
  background: #2d2d2d;
  color: #ffffff;
  padding: 56px 20px 32px;
}

body:has(.detail-shell) footer > div {
  max-width: 1440px;
  margin: 0 auto;
}

body:has(.detail-shell) footer .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

body:has(.detail-shell) footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

body:has(#filter-bar) nav#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: rgba(253, 252, 248, 0.92);
  border-bottom: 1px solid rgba(27, 58, 75, 0.08);
  backdrop-filter: blur(14px);
}

body:has(#filter-bar) nav#navbar > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 4rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

body:has(#filter-bar) nav#navbar img {
  display: block;
  width: auto !important;
  height: 4rem !important;
  max-width: 132px;
  object-fit: contain;
}

body:has(#filter-bar) nav#navbar a {
  color: #1b3a4b;
  text-decoration: none;
}

body:has(#filter-bar) nav#navbar > div:first-child > div:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

body:has(#filter-bar) nav#navbar > div:first-child > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

body:has(#filter-bar) #mobile-menu.hidden {
  display: none;
}

body:has(#filter-bar) main > section:first-child {
  padding: 7rem 20px 3rem;
  color: #ffffff;
  background: linear-gradient(135deg, #1b3a4b 0%, #2f6f96 100%);
}

body:has(#filter-bar) main > section:first-child > div {
  max-width: 1440px;
  margin: 0 auto;
}

body:has(#filter-bar) main > section:first-child h1 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.12;
  letter-spacing: 0;
}

body:has(#filter-bar) main > section:first-child p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
}

body:has(#filter-bar) main > section:nth-child(2) {
  position: sticky;
  top: 4rem;
  z-index: 30;
  padding: 20px;
  background: #ffffff;
  border-bottom: 1px solid #eef2f5;
}

body:has(#filter-bar) #filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1440px;
  margin: 0 auto;
}

body:has(#filter-bar) .filter-btn {
  border: 1px solid #dfe6ec;
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffffff;
  color: #1b3a4b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

body:has(#filter-bar) main > section:nth-child(3) {
  padding: 48px 20px 64px;
}

body:has(#filter-bar) #product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
}

body:has(#filter-bar) .product-item {
  min-width: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

body:has(#filter-bar) .product-item .p-6 {
  padding: 24px;
}

body:has(#filter-bar) .product-item .aspect-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f6f8 !important;
}

body:has(#filter-bar) .product-item .aspect-video img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px;
}

body:has(#filter-bar) .product-item .flex {
  display: flex;
}

body:has(#filter-bar) .product-item .flex-wrap {
  flex-wrap: wrap;
}

body:has(#filter-bar) .product-item .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body:has(#filter-bar) .product-item h3 {
  margin: 0 0 10px;
  color: #24323d;
  font-size: 22px;
  line-height: 1.28;
}

body:has(#filter-bar) .product-item p {
  color: #5b6570;
  line-height: 1.7;
}

body:has(#filter-bar) .product-item a,
body:has(#filter-bar) .product-item span[role="note"] {
  min-width: 0;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 1024px) {
  body:has(.detail-shell) > nav > div,
  body:has(#filter-bar) nav#navbar > div:first-child {
    height: 5rem;
    padding-right: 48px;
    padding-left: 48px;
  }

  body:has(.detail-shell) > nav img,
  body:has(#filter-bar) nav#navbar img {
    height: 5rem !important;
    max-width: 160px;
  }

  body:has(#filter-bar) main > section:first-child {
    padding-top: 9rem;
    padding-right: 48px;
    padding-left: 48px;
  }

  body:has(.detail-shell) main > section:first-child {
    padding-top: 9rem;
  }
}

@media (max-width: 1100px) {
  body:has(#filter-bar) #product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body:has(.detail-shell) > nav > div > div,
  body:has(#filter-bar) nav#navbar > div:first-child > div:nth-child(2) {
    display: none;
  }

  body:has(.detail-shell) .detail-shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  body:has(.detail-shell) .hero-card,
  body:has(.detail-shell) .detail-grid,
  body:has(.detail-shell) .ingredient-grid,
  body:has(.detail-shell) .faq-grid,
  body:has(.detail-shell) .chip-grid,
  body:has(.detail-shell) .related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(.detail-shell) .section-block {
    padding: 22px;
    border-radius: 18px;
  }

  body:has(.detail-shell) .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  body:has(.detail-shell) .cta-primary,
  body:has(.detail-shell) .cta-secondary {
    width: 100%;
  }

  body:has(.detail-shell) footer .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#filter-bar) main > section:first-child {
    padding-right: 20px;
    padding-left: 20px;
  }

  body:has(#filter-bar) main > section:nth-child(2) {
    top: 4rem;
  }

  body:has(#filter-bar) #product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#filter-bar) .product-item .p-6 {
    padding: 20px;
  }

  body:has(#filter-bar) .product-item .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* FULL_SITE_100_SCORE_AUDIT_HOME_DESKTOP_FULL_WIDTH
   Desktop homepage should use the available screen width instead of leaving
   the product story trapped inside the old 1440px shell. */
body:has(.home-product-card) main {
  width: 100%;
  max-width: none !important;
}

body:has(.home-product-card) #products {
  width: 100%;
  padding-right: clamp(32px, 4vw, 80px) !important;
  padding-left: clamp(32px, 4vw, 80px) !important;
}

body:has(.home-product-card) #products > .text-center {
  max-width: 980px !important;
}

body:has(.home-product-card) #products #product-grid {
  display: grid !important;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card {
  min-width: 0;
  border-radius: 18px !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card .h-44 {
  position: relative;
  width: auto;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 16px 16px 0;
  overflow: hidden !important;
  border-radius: 16px;
  background: #f3f6f8 !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card img[data-home-img] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card a.block {
  padding: 22px !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card h3 {
  font-size: 21px !important;
  line-height: 1.32 !important;
  margin-bottom: 8px !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card .text-xs {
  font-size: 12px !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card .text-\[10px\] {
  font-size: 11px !important;
}

@media (min-width: 1800px) {
  body:has(.home-product-card) #products {
    padding-right: 88px !important;
    padding-left: 88px !important;
  }

  body:has(.home-product-card) #products #product-grid {
    gap: 34px !important;
  }

  body:has(.home-product-card) #products #product-grid .home-product-card a.block {
    padding: 26px !important;
  }

  body:has(.home-product-card) #products #product-grid .home-product-card h3 {
    font-size: 24px !important;
  }

  body:has(.home-product-card) #products #product-grid .home-product-card p {
    font-size: 15px !important;
  }
}

@media (max-width: 1199px) {
  body:has(.home-product-card) #products {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  body:has(.home-product-card) #products #product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

@media (max-width: 768px) {
  body:has(.home-product-card) #products {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body:has(.home-product-card) #products #product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* FULL_SITE_100_SCORE_AUDIT_HOME_NO_WHITE_MASK
   Homepage hero must not use the earlier white fade overlay. Keep only a
   restrained cool-tone readability layer so the mountain/product art remains visible. */
.hero-bg-mask {
  background: linear-gradient(
    180deg,
    rgba(8, 32, 46, 0.20) 0%,
    rgba(8, 32, 46, 0.34) 42%,
    rgba(8, 32, 46, 0.44) 72%,
    rgba(8, 32, 46, 0.38) 100%
  ) !important;
}

/* FULL_SITE_100_SCORE_AUDIT_PRODUCT_GRID_COZE_POSITION
   Design acceptance note: product grids keep stable responsive tracks and
   the floating Coze service entry remains fixed to the lower-right corner
   without covering primary product-card CTAs at audited desktop/mobile sizes. */

/* FULL_SITE_100_SCORE_AUDIT_PRODUCT_CTA_VISIBLE
   Product overview CTAs are generated by JavaScript, so their color system
   cannot depend on utility classes being discovered ahead of time. */
body:has(#filter-bar) .product-item .product-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch;
}

body:has(#filter-bar) .product-item .product-detail-cta,
body:has(#filter-bar) .product-item .product-faq-cta,
body:has(#filter-bar) .product-item .product-detail-pending {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

body:has(#filter-bar) .product-item .product-detail-cta {
  background: #1b3a4b !important;
  border: 1px solid #1b3a4b !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(27, 58, 75, 0.14);
}

body:has(#filter-bar) .product-item .product-detail-cta:hover {
  background: #123140 !important;
  border-color: #123140 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(27, 58, 75, 0.18);
}

body:has(#filter-bar) .product-item .product-faq-cta {
  background: #ffffff !important;
  border: 1px solid rgba(58, 124, 165, 0.45) !important;
  color: #2f6f98 !important;
}

body:has(#filter-bar) .product-item .product-faq-cta:hover {
  border-color: rgba(58, 124, 165, 0.72) !important;
  background: rgba(58, 124, 165, 0.06) !important;
}

body:has(#filter-bar) .product-item .product-detail-pending {
  background: #f3f6f8 !important;
  border: 1px solid #e1e8ee !important;
  color: #6b7280 !important;
}

@media (max-width: 640px) {
  body:has(#filter-bar) .product-item .product-card-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* FULL_SITE_100_SCORE_AUDIT_PRODUCTS_FULL_WIDTH
   Product overview should fill the available browser width on desktop and
   ultra-wide screens instead of staying trapped in a 1440px content box. */
body:has(#filter-bar) main {
  width: 100%;
  max-width: none !important;
  overflow-x: hidden;
}

body:has(#filter-bar) main > section:first-child,
body:has(#filter-bar) main > section:nth-child(2),
body:has(#filter-bar) main > section:nth-child(3) {
  width: 100%;
  padding-right: clamp(32px, 4vw, 88px) !important;
  padding-left: clamp(32px, 4vw, 88px) !important;
}

body:has(#filter-bar) main > section:first-child > div,
body:has(#filter-bar) main > section:nth-child(2) > div,
body:has(#filter-bar) #product-grid {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body:has(#filter-bar) #product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(24px, 1.8vw, 36px) !important;
}

body:has(#filter-bar) .product-item {
  min-width: 0;
  height: 100%;
}

@media (max-width: 1499px) {
  body:has(#filter-bar) #product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  body:has(#filter-bar) #product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body:has(#filter-bar) main > section:first-child,
  body:has(#filter-bar) main > section:nth-child(2),
  body:has(#filter-bar) main > section:nth-child(3) {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  body:has(#filter-bar) #product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* APPLE_INSPIRED_UI_POLISH_20260518
   Borrow Apple's restraint, spacing, blue interaction language, and faint
   borders without copying its black/white product-drama wholesale. Keep the
   21DW product colors as small identifiers while the interface becomes calmer. */
:root {
  --ui-blue: #0071e3;
  --ui-blue-hover: #0066cc;
  --ui-blue-soft: rgba(0, 113, 227, 0.10);
  --ui-blue-border: rgba(0, 113, 227, 0.16);
  --ui-ink: #1d1d1f;
  --ui-ink-muted: rgba(29, 29, 31, 0.68);
  --ui-surface: #f5f5f7;
  --ui-surface-2: #fbfbfd;
  --ui-border: rgba(29, 29, 31, 0.12);
  --ui-radius-card: 8px;
  --ui-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body {
  color: var(--ui-ink);
  letter-spacing: 0;
  line-height: 1.7;
}

body.lang-cn,
body.lang-tw {
  line-height: 1.74;
}

h1,
h2,
h3,
.font-display {
  letter-spacing: 0 !important;
}

h1,
h2 {
  line-height: 1.12 !important;
}

h3 {
  line-height: 1.25 !important;
}

p {
  color: var(--ui-ink-muted);
}

a {
  text-underline-offset: 3px;
}

.lang-toggle {
  background: rgba(29, 29, 31, 0.06);
  border: 1px solid rgba(29, 29, 31, 0.06);
}

.lang-toggle button.active {
  color: var(--ui-ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

/* Apple-like glass navigation for content pages; homepage keeps its transparent
   hero state until scrolled. */
body:has(#filter-bar) nav#navbar,
body:has(.detail-shell) > nav,
body:not(:has(.home-product-card)):not(:has(#filter-bar)):not(:has(.detail-shell)) nav#navbar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(0, 113, 227, 0.08) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom-color: rgba(0, 113, 227, 0.10) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}

nav#navbar a:hover,
body:has(.detail-shell) > nav a:hover {
  color: var(--ui-blue) !important;
}

/* Product overview: blue is the system accent, not a heavy wall. */
body:has(#filter-bar) main > section:first-child {
  background:
    linear-gradient(120deg, rgba(0, 113, 227, 0.18) 0%, rgba(58, 124, 165, 0.22) 44%, rgba(27, 58, 75, 0.88) 100%),
    linear-gradient(180deg, #123344 0%, #1b3a4b 100%) !important;
}

body:has(#filter-bar) main > section:first-child h1 {
  font-weight: 700;
  max-width: 900px;
}

body:has(#filter-bar) main > section:first-child p {
  max-width: 760px;
  font-size: clamp(16px, 1.15vw, 19px);
}

body:has(#filter-bar) main > section:nth-child(2) {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  backdrop-filter: saturate(180%) blur(16px);
}

body:has(#filter-bar) .filter-btn,
.home-filter-btn {
  min-height: 40px;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

body:has(#filter-bar) .filter-btn:hover,
.home-filter-btn:hover {
  border-color: var(--ui-blue-border) !important;
  color: var(--ui-blue) !important;
}

body:has(#filter-bar) .filter-btn.active,
.home-filter-btn.active {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
}

body:has(#filter-bar) main > section:nth-child(3),
body:has(.home-product-card) #products {
  background: var(--ui-surface) !important;
}

body:has(#filter-bar) .product-item,
body:has(.home-product-card) #products #product-grid .home-product-card,
body:has(.detail-shell) .section-block,
body:has(.detail-shell) .info-card,
body:has(.detail-shell) .faq-card,
body:has(.detail-shell) .chip-card,
body:has(.detail-shell) .related-product-card,
.faq-item {
  border-radius: var(--ui-radius-card) !important;
  border: 1px solid var(--ui-border) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body:has(#filter-bar) .product-item:hover,
body:has(.home-product-card) #products #product-grid .home-product-card:hover,
body:has(.detail-shell) .related-product-card:hover {
  border-color: var(--ui-blue-border) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  transform: translateY(-2px);
}

body:has(#filter-bar) .product-color-bar,
body:has(.home-product-card) .product-color-bar {
  height: 3px !important;
  opacity: 0.62 !important;
  filter: saturate(0.72) brightness(1.04);
}

body:has(#filter-bar) .product-item .aspect-video,
body:has(.home-product-card) #products #product-grid .home-product-card .h-44,
body:has(.detail-shell) .hero-image-wrap {
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface-2) !important;
  border: 1px solid rgba(29, 29, 31, 0.06);
}

body:has(#filter-bar) .product-item .aspect-video img,
body:has(.home-product-card) #products #product-grid .home-product-card img[data-home-img],
body:has(.detail-shell) .hero-image-wrap img {
  filter: saturate(0.9) contrast(1.01) !important;
}

body:has(#filter-bar) .product-item h3,
body:has(.home-product-card) #products #product-grid .home-product-card h3,
body:has(.detail-shell) h1,
body:has(.detail-shell) h2,
body:has(.detail-shell) h3 {
  color: var(--ui-ink) !important;
}

body:has(#filter-bar) .product-item p,
body:has(.home-product-card) #products #product-grid .home-product-card p,
body:has(.detail-shell) p,
body:has(.detail-shell) li {
  color: var(--ui-ink-muted) !important;
}

body:has(#filter-bar) .product-item .rounded-full:not(.product-detail-cta):not(.product-faq-cta),
body:has(.home-product-card) #products #product-grid .home-product-card .inline-flex {
  background: rgba(0, 113, 227, 0.07) !important;
  color: #245b7a !important;
}

body:has(#filter-bar) .product-item .product-detail-cta,
body:has(.detail-shell) .cta-primary {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(0, 113, 227, 0.18) !important;
}

body:has(#filter-bar) .product-item .product-detail-cta:hover,
body:has(.detail-shell) .cta-primary:hover {
  background: var(--ui-blue-hover) !important;
  border-color: var(--ui-blue-hover) !important;
}

body:has(#filter-bar) .product-item .product-faq-cta,
body:has(.detail-shell) .cta-secondary {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ui-blue-border) !important;
  color: var(--ui-blue) !important;
}

body:has(#filter-bar) .product-item .product-faq-cta:hover,
body:has(.detail-shell) .cta-secondary:hover {
  background: var(--ui-blue-soft) !important;
  border-color: rgba(0, 113, 227, 0.28) !important;
}

body:has(.detail-shell) .detail-shell {
  max-width: min(1180px, calc(100vw - 40px)) !important;
}

body:has(.detail-shell) .section-block {
  margin-top: 24px;
}

body:has(.detail-shell) .ingredient-grid,
body:has(.detail-shell) .faq-grid,
body:has(.detail-shell) .chip-grid,
body:has(.detail-shell) .related-grid {
  gap: 14px !important;
}

/* Homepage: keep the mountain/product art visible, and make product catalog
   cards quieter while still using the full viewport width. */
.hero-bg-mask {
  background: linear-gradient(
    180deg,
    rgba(8, 32, 46, 0.16) 0%,
    rgba(8, 32, 46, 0.28) 42%,
    rgba(8, 32, 46, 0.38) 72%,
    rgba(8, 32, 46, 0.34) 100%
  ) !important;
}

body:has(.home-product-card) #products {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.home-product-card) #products #product-grid {
  gap: clamp(22px, 1.6vw, 32px) !important;
}

body:has(.home-product-card) #products #product-grid .home-product-card a.block {
  color: var(--ui-ink) !important;
}

@media (min-width: 1500px) {
  body:has(#filter-bar) #product-grid,
  body:has(.home-product-card) #products #product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 2100px) {
  body:has(#filter-bar) #product-grid,
  body:has(.home-product-card) #products #product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body:has(#filter-bar) .product-item,
  body:has(.home-product-card) #products #product-grid .home-product-card {
    border-radius: 8px !important;
  }

  body:has(#filter-bar) .product-item h3,
  body:has(.home-product-card) #products #product-grid .home-product-card h3 {
    font-size: 20px !important;
    line-height: 1.28 !important;
  }

  body:has(#filter-bar) .product-item p,
  body:has(.home-product-card) #products #product-grid .home-product-card p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }
}

/* APPLE_BUTTON_BORDER_BG_POLISH_20260518
   Follow-up visual tune from screenshot review: remove the mixed navy/orange
   CTA language, make borders subtly blue-gray, and give the final CTA band a
   cleaner Apple-blue depth instead of the older heavy navy/orange glow. */
:root {
  --ui-blue: #0071e3;
  --ui-blue-hover: #0066cc;
  --ui-blue-pressed: #005bb5;
  --ui-blue-border: rgba(0, 113, 227, 0.18);
  --ui-blue-border-strong: rgba(0, 113, 227, 0.34);
  --ui-border: rgba(0, 113, 227, 0.12);
  --ui-border-muted: rgba(43, 92, 128, 0.10);
  --ui-surface: #f5f5f7;
  --ui-surface-blue: #f3f8fd;
}

/* Global border language: light blue-gray, barely there. */
body:has(#filter-bar) .product-item,
body:has(.home-product-card) #products #product-grid .home-product-card,
body:has(.detail-shell) .section-block,
body:has(.detail-shell) .info-card,
body:has(.detail-shell) .faq-card,
body:has(.detail-shell) .chip-card,
body:has(.detail-shell) .related-product-card,
.faq-item,
.rounded-brand.border,
.rounded-brand.border-gray-100 {
  border-color: var(--ui-border) !important;
}

body:has(#filter-bar) .product-item:hover,
body:has(.home-product-card) #products #product-grid .home-product-card:hover,
body:has(.detail-shell) .related-product-card:hover,
.rounded-brand.border:hover {
  border-color: var(--ui-blue-border-strong) !important;
}

body:has(#filter-bar) .product-item .aspect-video,
body:has(.home-product-card) #products #product-grid .home-product-card .h-44,
body:has(.detail-shell) .hero-image-wrap {
  border-color: var(--ui-border-muted) !important;
}

/* Buttons: one coherent Apple-blue system. */
.hero-section-mobile .flex.flex-wrap.gap-3 > a,
.hero-section-mobile .flex.flex-wrap.gap-3 > span,
#products > p > a,
body:has(#filter-bar) main > section:last-of-type span[role="note"],
body:has(#filter-bar) .product-item .product-detail-cta,
body:has(#filter-bar) .product-item .product-faq-cta,
body:has(.detail-shell) .cta-primary,
body:has(.detail-shell) .cta-secondary,
.cta-glow-bg a,
.cta-glow-bg span[role="note"] {
  min-height: 44px;
  border-radius: 999px !important;
  border-style: solid !important;
  border-width: 1px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.hero-section-mobile .flex.flex-wrap.gap-3 > a:first-child,
#products > p > a,
body:has(#filter-bar) .product-item .product-detail-cta,
body:has(.detail-shell) .cta-primary {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.20) !important;
}

.hero-section-mobile .flex.flex-wrap.gap-3 > a:first-child:hover,
#products > p > a:hover,
body:has(#filter-bar) .product-item .product-detail-cta:hover,
body:has(.detail-shell) .cta-primary:hover {
  background: var(--ui-blue-hover) !important;
  border-color: var(--ui-blue-hover) !important;
  box-shadow: 0 12px 28px rgba(0, 102, 204, 0.24) !important;
  transform: translateY(-1px);
}

.hero-section-mobile .flex.flex-wrap.gap-3 > a:nth-child(2),
.hero-section-mobile .flex.flex-wrap.gap-3 > span[role="note"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.44) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: saturate(160%) blur(12px);
}

.hero-section-mobile .flex.flex-wrap.gap-3 > a:nth-child(2):hover,
.hero-section-mobile .flex.flex-wrap.gap-3 > span[role="note"]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}

body:has(#filter-bar) .product-item .product-faq-cta,
body:has(.detail-shell) .cta-secondary {
  background: #ffffff !important;
  border-color: var(--ui-blue-border-strong) !important;
  color: var(--ui-blue) !important;
  box-shadow: none !important;
}

body:has(#filter-bar) .product-item .product-faq-cta:hover,
body:has(.detail-shell) .cta-secondary:hover {
  background: rgba(0, 113, 227, 0.07) !important;
  border-color: rgba(0, 113, 227, 0.46) !important;
}

body:has(#filter-bar) main > section:last-of-type span[role="note"] {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.18) !important;
}

body:has(#filter-bar) main > section:last-of-type a {
  color: var(--ui-blue) !important;
}

/* Final CTA: clean blue stage, no orange accent. */
.cta-glow-bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 34%, transparent 62%),
    radial-gradient(ellipse at 18% 90%, rgba(64, 156, 255, 0.24) 0%, transparent 44%),
    linear-gradient(180deg, #0071e3 0%, #0066cc 48%, #004b96 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(0, 38, 79, 0.28);
}

.cta-glow-bg h2 {
  color: #ffffff !important;
}

.cta-glow-bg p {
  color: rgba(255, 255, 255, 0.76) !important;
}

.cta-glow-bg span[role="note"] {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--ui-blue-hover) !important;
  box-shadow: 0 16px 34px rgba(0, 37, 77, 0.18) !important;
}

.cta-glow-bg a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cta-glow-bg a:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
}

footer.bg-brand-graphite {
  background: #1d1d1f !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer.bg-brand-graphite h4 {
  color: rgba(255, 255, 255, 0.46) !important;
}

footer.bg-brand-graphite a {
  color: rgba(255, 255, 255, 0.72) !important;
}

footer.bg-brand-graphite a:hover {
  color: #ffffff !important;
}

/* HERO_SKY_COPY_REWORK_20260518
   Screenshot fix: keep the mountain/flag hero image as the first viewport,
   clean the sky, and move SEO copy into the content flow below the image so
   it no longer blocks the product/lifestyle visual. */
.hero-copy-on-image {
  display: none !important;
}

body:has(.hero-copy-panel) .hero-section-mobile {
  min-height: clamp(640px, 86vh, 920px) !important;
}

body:has(.hero-copy-panel) .hero-bg-mask {
  background:
    linear-gradient(
      180deg,
      rgba(8, 32, 46, 0.02) 0%,
      rgba(8, 32, 46, 0.05) 38%,
      rgba(8, 32, 46, 0.10) 68%,
      rgba(8, 32, 46, 0.16) 100%
    ) !important;
}

body:has(.hero-copy-panel) .hero-bg-slide {
  filter: saturate(1.08) brightness(1.06) contrast(1.02);
}

.hero-copy-panel {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 62%, #f5f5f7 100%) !important;
  border-top: 1px solid rgba(0, 113, 227, 0.08);
  border-bottom: 1px solid rgba(0, 113, 227, 0.10);
}

.hero-copy-panel .hero-copy-kicker {
  color: var(--ui-blue) !important;
}

.hero-copy-panel h1 {
  color: var(--ui-ink) !important;
  letter-spacing: 0 !important;
  max-width: 860px;
}

.hero-copy-panel .hero-copy-body {
  color: rgba(29, 29, 31, 0.68) !important;
  max-width: 780px;
}

.hero-copy-panel .primary-cta,
.hero-copy-panel .secondary-cta,
.hero-copy-panel .advisor-cta {
  min-height: 44px;
  border-radius: 999px !important;
  border: 1px solid var(--ui-blue-border-strong) !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hero-copy-panel .primary-cta {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.18);
}

.hero-copy-panel .primary-cta:hover {
  background: var(--ui-blue-hover) !important;
  border-color: var(--ui-blue-hover) !important;
  transform: translateY(-1px);
}

.hero-copy-panel .secondary-cta,
.hero-copy-panel .advisor-cta {
  background: #ffffff !important;
  color: var(--ui-blue) !important;
}

.hero-copy-panel .secondary-cta:hover,
.hero-copy-panel .advisor-cta:hover {
  background: rgba(0, 113, 227, 0.07) !important;
  border-color: rgba(0, 113, 227, 0.46) !important;
}

@media (max-width: 767px) {
  body:has(.hero-copy-panel) .hero-section-mobile {
    min-height: calc(4rem + 100vw * 0.56) !important;
  }

  .hero-copy-panel {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  .hero-copy-panel h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.16 !important;
  }

  .hero-copy-panel .hero-copy-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-copy-panel .primary-cta,
  .hero-copy-panel .secondary-cta,
  .hero-copy-panel .advisor-cta {
    width: 100%;
  }
}

/* PRODUCT_PAGE_BLUE_SYSTEM_CONSISTENCY_20260518
   Product overview pages now use the same Apple-blue visual language as the
   homepage CTA system: one primary blue, soft blue-gray borders, and no
   per-product border/number colors competing with the page chrome. */
body:has(#filter-bar) main > section:first-child {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 34%),
    linear-gradient(120deg, #0071e3 0%, #0066cc 46%, #004b96 100%) !important;
  border-bottom: 1px solid rgba(0, 72, 151, 0.18);
}

body:has(#filter-bar) main > section:first-child p,
body:has(#filter-bar) main > section:first-child h1 {
  text-shadow: 0 1px 12px rgba(0, 41, 89, 0.16);
}

body:has(#filter-bar) main > section:nth-child(2) {
  border-bottom-color: rgba(0, 113, 227, 0.10) !important;
}

body:has(#filter-bar) .filter-btn {
  border-color: var(--ui-blue-border) !important;
  color: var(--ui-ink) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

body:has(#filter-bar) .filter-btn:hover {
  border-color: rgba(0, 113, 227, 0.36) !important;
  background: rgba(0, 113, 227, 0.06) !important;
  color: var(--ui-blue) !important;
}

body:has(#filter-bar) .filter-btn.active {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.18) !important;
}

body:has(#filter-bar) .product-item {
  border-color: rgba(0, 113, 227, 0.12) !important;
  box-shadow: 0 16px 42px rgba(0, 72, 151, 0.06) !important;
}

body:has(#filter-bar) .product-item:hover {
  border-color: rgba(0, 113, 227, 0.34) !important;
  box-shadow: 0 24px 58px rgba(0, 72, 151, 0.11) !important;
}

body:has(#filter-bar) .product-color-bar {
  background: linear-gradient(90deg, rgba(0, 113, 227, 0.86), rgba(41, 184, 220, 0.58)) !important;
  opacity: 1 !important;
  filter: none !important;
}

body:has(#filter-bar) .product-item .font-number {
  color: var(--ui-blue) !important;
}

body:has(#filter-bar) .product-item .aspect-video {
  background:
    linear-gradient(180deg, rgba(0, 113, 227, 0.035), rgba(0, 113, 227, 0.012)),
    #fbfdff !important;
  border-color: rgba(0, 113, 227, 0.10) !important;
}

@media (min-width: 1024px) {
  body:has(#filter-bar):has(.coze-cs-root.is-open) #product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-right: min(28rem, 30vw);
  }
}

/* FAQ_AND_ABOUT_BLUE_SYSTEM_CONSISTENCY_20260518
   FAQ and about pages now share the same Apple-blue system used by the
   homepage and product overview: bright primary blue, soft blue borders,
   white cards, and restrained gray surfaces. */
body:has(#faq-content) main > section:first-child,
body:has(#story-content) main > section:first-child {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 34%),
    linear-gradient(120deg, #0071e3 0%, #0066cc 46%, #004b96 100%) !important;
  border-bottom: 1px solid rgba(0, 72, 151, 0.18);
}

body:has(#faq-content) main > section:first-child h1,
body:has(#faq-content) main > section:first-child p,
body:has(#story-content) main > section:first-child h1,
body:has(#story-content) main > section:first-child p {
  text-shadow: 0 1px 12px rgba(0, 41, 89, 0.16);
}

body:has(#faq-content) main > section:nth-of-type(2),
body:has(#story-content) main > section:nth-of-type(2),
body:has(#story-content) #trust,
body:has(#story-content) main > section:has(#npn-grid) {
  background: linear-gradient(180deg, #f5f9fe 0%, #f5f5f7 100%) !important;
}

body:has(#faq-content) #faq-content {
  max-width: min(960px, calc(100vw - 40px)) !important;
}

body:has(#faq-content) .launch100-faq-category h2,
body:has(#faq-content) #faq-content h2,
body:has(#story-content) h2,
body:has(#story-content) h3 {
  color: var(--ui-ink) !important;
}

body:has(#faq-content) .faq-item,
body:has(#story-content) .reveal.bg-brand-cream,
body:has(#story-content) #npn-grid > div {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(0, 113, 227, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 72, 151, 0.045) !important;
}

body:has(#faq-content) .faq-item:hover,
body:has(#story-content) .reveal.bg-brand-cream:hover,
body:has(#story-content) #npn-grid > div:hover {
  border-color: rgba(0, 113, 227, 0.30) !important;
  box-shadow: 0 18px 42px rgba(0, 72, 151, 0.08) !important;
}

body:has(#faq-content) .faq-item button:hover {
  background: rgba(0, 113, 227, 0.045) !important;
}

body:has(#faq-content) .faq-arrow,
body:has(#story-content) .text-brand-glacier,
body:has(#story-content) a.text-brand-glacier,
body:has(#story-content) .font-number.text-brand-glacier,
body:has(#story-content) #npn-grid .font-number,
body:has(#story-content) #npn-grid .text-brand-navy {
  color: var(--ui-blue) !important;
}

body:has(#story-content) .science-badge {
  background: linear-gradient(135deg, #0071e3 0%, #29b8dc 100%) !important;
  box-shadow: 0 10px 22px rgba(0, 113, 227, 0.16);
}

body:has(#story-content) .bg-brand-glacier\/10 {
  background: rgba(0, 113, 227, 0.10) !important;
}

body:has(#faq-content) #contact-btn,
body:has(#story-content) main > section.bg-brand-navy span[role="note"] {
  background: var(--ui-blue) !important;
  border: 1px solid var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.18) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

body:has(#faq-content) #contact-btn:hover,
body:has(#story-content) main > section.bg-brand-navy span[role="note"]:hover {
  background: var(--ui-blue-hover) !important;
  border-color: var(--ui-blue-hover) !important;
}

body:has(#faq-content) main > section:nth-of-type(3) {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
  border-top: 1px solid rgba(0, 113, 227, 0.08);
}

body:has(#story-content) main > section.bg-brand-navy {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(120deg, #0071e3 0%, #0066cc 48%, #004b96 100%) !important;
}

@media (max-width: 767px) {
  body:has(#faq-content) #faq-content {
    max-width: calc(100vw - 28px) !important;
  }

  body:has(#faq-content) .faq-item h3,
  body:has(#faq-content) .faq-item p {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ABOUT_REDIRECT_HASH_TARGET_VISIBLE: old about URLs land on homepage story content immediately. */
#about:target .reveal,
#about:target .reveal-left,
#about:target .reveal-right,
#about:target .reveal-scale,
#about:target .reveal-clip {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

body.about-redirect-landing .hero-bg-carousel,
body.about-redirect-landing .hero-bg-mask,
body.about-redirect-landing .hero-section-mobile,
body.about-redirect-landing .hero-copy-panel,
body.about-redirect-landing #products,
body.about-redirect-landing #seo-21day {
  display: none !important;
}

body.about-redirect-landing #about {
  padding-top: 8rem !important;
}

@media (min-width: 768px) {
  body.about-redirect-landing #about img[data-about-img="story"] {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: min(52vh, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
  }
}

body.about-redirect-landing .about-redirect-h1 {
  margin: 0 auto 1rem !important;
  max-width: 48rem !important;
  font-family: inherit !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: 0 !important;
}



/* V5_HOME_PRODUCTS_WHITE_BACKGROUND: after removing the hero copy panel, the home product catalog should sit on white, not the blue hero field. */
body:has(.hero-bg-carousel) .relative.z-10.bg-brand-cream,
body:has(.hero-bg-carousel) main,
body:has(.hero-bg-carousel) #products {
  background: #ffffff !important;
}

body:has(.hero-bg-carousel) #products {
  box-shadow: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

@media (max-width: 768px) {
  body:has(.hero-bg-carousel) #products {
    background: #ffffff !important;
  }
}

/* V5_HOME_PRODUCTS_WHITE_BACKGROUND_STRICT: home product catalog must keep the old clean white background; only the hero uses blue/image fields. */
body:has(.hero-bg-carousel):not(.about-redirect-landing) .relative.z-10.bg-brand-cream,
body:has(.hero-bg-carousel):not(.about-redirect-landing) main,
body:has(.hero-bg-carousel):not(.about-redirect-landing) #products,
body:has(.hero-bg-carousel):not(.about-redirect-landing) #products #product-grid {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
  margin-top: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body:has(.hero-bg-carousel):not(.about-redirect-landing) #products::before,
body:has(.hero-bg-carousel):not(.about-redirect-landing) #products::after {
  background: transparent !important;
  background-image: none !important;
}

/* ULTRA_MOBILE_HOME_LAYOUT_FIX_20260523
   The in-app preview can be narrower than common phone widths. Keep the home
   hero image from staying fixed behind later content, and scale the nav,
   language switch, and product heading down cleanly on ultra-narrow viewports. */
body:has(.hero-bg-carousel) .hero-bg-carousel,
body:has(.hero-bg-carousel) .hero-bg-mask {
  position: absolute !important;
}

body:has(.hero-bg-carousel) .hero-bg-carousel {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 420px) {
  body:has(.hero-bg-carousel) #navbar > div {
    height: 56px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  body:has(.hero-bg-carousel) #navbar a.shrink-0 img {
    height: 46px !important;
    max-width: 72px !important;
    object-fit: contain !important;
  }

  body:has(.hero-bg-carousel) #navbar .flex.items-center.gap-3 {
    gap: 6px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  body:has(.hero-bg-carousel) #navbar .lang-toggle {
    max-width: calc(100vw - 112px) !important;
    padding: 2px !important;
    gap: 1px !important;
    flex-shrink: 1 !important;
  }

  body:has(.hero-bg-carousel) #navbar .lang-toggle button {
    min-width: 0 !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body:has(.hero-bg-carousel) #mobile-menu-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 5px !important;
    flex: 0 0 30px !important;
  }

  body:has(.hero-bg-carousel) #mobile-menu-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }

  body:has(.hero-bg-carousel) #products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:has(.hero-bg-carousel) #products > .text-center {
    max-width: 100% !important;
    margin-bottom: 2rem !important;
  }

  body:has(.hero-bg-carousel) #products > .text-center h1 {
    max-width: 11ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(24px, 9.5vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  body:has(.hero-bg-carousel) #products > .text-center p {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.72 !important;
  }
}

@media (max-width: 300px) {
  body:has(.hero-bg-carousel) #navbar > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }

  body:has(.hero-bg-carousel) #navbar a.shrink-0 img {
    height: 40px !important;
    max-width: 60px !important;
  }

  body:has(.hero-bg-carousel) #navbar .lang-toggle {
    max-width: calc(100vw - 96px) !important;
  }

  body:has(.hero-bg-carousel) #navbar .lang-toggle button {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 9px !important;
  }

  body:has(.hero-bg-carousel) #mobile-menu-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 4px !important;
    flex-basis: 26px !important;
  }
}

/* HOME_NAV_TAILWIND_FALLBACK_20260523
   Critical local layout fallback for the homepage shell when the Tailwind CDN
   is blocked or slow in the in-app preview browser. Keep nav controls in one
   row and keep the product grid predictable without relying on generated
   utility classes. */
body:has(.hero-bg-carousel) #navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
  box-sizing: border-box !important;
}

body:has(.hero-bg-carousel) #navbar > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body:has(.hero-bg-carousel) #navbar a.shrink-0 {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}

body:has(.hero-bg-carousel) #navbar > div > .flex.items-center.gap-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

body:has(.hero-bg-carousel) #mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent;
  line-height: 1 !important;
}

body:has(.hero-bg-carousel) #mobile-menu-btn svg {
  display: block !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
}

body:has(.hero-bg-carousel) #product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem !important;
}

@media (max-width: 1024px) {
  body:has(.hero-bg-carousel) #product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body:has(.hero-bg-carousel) #navbar > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:has(.hero-bg-carousel) #product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 768px) {
  body:has(.hero-bg-carousel) #mobile-menu-btn {
    display: none !important;
  }
}

/* ULTRA_MOBILE_HEADING_TUNE_20260523
   Keep the homepage product-heading visibly responsive in very narrow preview
   panes instead of only avoiding overflow. */
@media (max-width: 340px) {
  body:has(.hero-bg-carousel) #products > .text-center h1 {
    font-size: clamp(23px, 8vw, 26px) !important;
    max-width: 11.5ch !important;
  }
}

/* FINAL_HERO_MASK_RULE_RESTORE_20260523
   Keep the audit-visible final hero mask on the approved cool dark overlay.
   Mobile still hides the mask so product images remain clean. */
.hero-bg-mask {
  background: linear-gradient(
    180deg,
    rgba(8, 32, 46, 0.10) 0%,
    rgba(8, 32, 46, 0.32) 48%,
    rgba(8, 32, 46, 0.72) 100%
  ) !important;
}

@media (max-width: 767px) {
  .hero-bg-mask[aria-hidden="true"] {
    display: none !important;
  }
}

/* MOBILE_MENU_DROPDOWN_FIX_20260523
   Mobile menu should be a compact dropdown, not a full-width page block. */
@media (max-width: 767px) {
  #navbar {
    overflow: visible !important;
  }

  #navbar #mobile-menu.hidden {
    display: none !important;
  }

  #navbar #mobile-menu:not(.hidden) {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 12px !important;
    left: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    border: 1px solid rgba(0, 113, 227, 0.12) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 44px rgba(8, 32, 46, 0.16) !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    overflow: hidden !important;
    z-index: 60 !important;
  }

  #navbar #mobile-menu > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  #navbar #mobile-menu a {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #18384a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #navbar #mobile-menu a:hover {
    background: rgba(0, 113, 227, 0.08) !important;
    color: #0071e3 !important;
  }

  #navbar.mobile-hero-active:not(.scrolled) #mobile-menu {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(0, 113, 227, 0.14) !important;
  }
}

/* MOBILE_HERO_WHITE_DRAWER_FIX_20260525
   On mobile the hero should behave like the desktop drawer: keep only the
   image field above, remove the contain-mode blue fill, and let the white
   product section slide upward over the hero edge. */
@media (max-width: 767px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) {
    background: #ffffff !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel {
    height: clamp(292px, calc(64px + 64vw), 440px) !important;
    min-height: 0 !important;
    background: #ffffff !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide.contain-mode {
    background-color: transparent !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide::before {
    display: none !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide::after {
    bottom: auto !important;
    height: var(--hero-mobile-art-height, calc(100vw * var(--hero-mobile-ratio, 0.56))) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-mask {
    display: none !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    min-height: clamp(292px, calc(64px + 64vw), 440px) !important;
    height: auto !important;
    max-height: none !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .relative.z-10.bg-brand-cream {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .relative.z-10.bg-brand-cream > main {
    background: #ffffff !important;
    overflow: visible !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    position: relative !important;
    z-index: 30 !important;
    margin-top: -34px !important;
    padding-top: 52px !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    box-shadow: 0 -18px 44px rgba(8, 32, 46, 0.10) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

@media (max-width: 420px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    height: auto !important;
    min-height: clamp(276px, calc(58px + 68vw), 390px) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -30px !important;
    padding-top: 48px !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
  }
}

/* MOBILE_HERO_DRAWER_VISIBILITY_FIX_20260525
   Correction for the white drawer fix: the hero section itself must stay
   transparent so the carousel image remains visible. White only belongs to
   the carousel base and the product drawer that rises over the image edge. */
@media (max-width: 767px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    background: transparent !important;
    background-color: transparent !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -44px !important;
    padding-top: 58px !important;
  }
}

@media (max-width: 420px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -40px !important;
    padding-top: 54px !important;
  }
}

/* FINAL_CTA_MAILTO_FIX_20260525
   The final CTA primary control is a real mailto link, not a decorative note.
   Keep it visually primary inside the blue CTA stage. */
.cta-glow-bg a.contact-advisor-cta {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--ui-blue-hover) !important;
  box-shadow: 0 16px 34px rgba(0, 37, 77, 0.18) !important;
  cursor: pointer !important;
}

.cta-glow-bg a.contact-advisor-cta:hover,
.cta-glow-bg a.contact-advisor-cta:focus-visible {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #ffffff !important;
  color: var(--ui-blue) !important;
  box-shadow: 0 18px 40px rgba(0, 37, 77, 0.24) !important;
  transform: translateY(-1px);
}

/* FINAL_CTA_DIRECT_EMAIL_FIX_20260525
   Make the final CTA clearly send a direct email and keep mobile buttons from
   squeezing into a row in narrow in-app browser panes. */
.cta-glow-bg .final-cta-actions {
  width: 100%;
}

.cta-glow-bg .final-cta-email {
  min-width: min(100%, 260px);
}

.cta-glow-bg .contact-email-hint {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  word-break: break-word;
}

@media (max-width: 640px) {
  .cta-glow-bg .final-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .cta-glow-bg a.contact-advisor-cta {
    width: min(100%, 280px) !important;
    white-space: nowrap !important;
  }
}

/* CN_YOUZAN_QR_CTA_20260525
   Mainland China page only: show the Youzan / WeChat mini-program purchase
   entry in the final CTA without changing global English/TW homepages. */
.cta-glow-bg .youzan-qr-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(100%, 520px);
  margin: 26px auto 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 44px rgba(0, 37, 77, 0.16);
  backdrop-filter: saturate(160%) blur(14px);
}

.cta-glow-bg .youzan-qr-image {
  width: 132px;
  height: 132px;
  padding: 10px;
  border-radius: 18px;
  background: #ffffff;
  object-fit: contain;
  box-shadow: 0 12px 28px rgba(0, 37, 77, 0.18);
}

.cta-glow-bg .youzan-qr-copy {
  max-width: 280px;
  text-align: left;
}

.cta-glow-bg .youzan-qr-title {
  margin: 0 0 6px;
  color: #ffffff !important;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
}

.cta-glow-bg .youzan-qr-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .cta-glow-bg .youzan-qr-card {
    flex-direction: column;
    width: min(100%, 300px);
    margin-top: 22px;
    padding: 16px;
    gap: 12px;
    border-radius: 22px;
  }

  .cta-glow-bg .youzan-qr-image {
    width: 148px;
    height: 148px;
  }

  .cta-glow-bg .youzan-qr-copy {
    max-width: 100%;
    text-align: center;
  }
}

/* MOBILE_CTA_PROPORTION_TUNE_20260525
   Mobile final CTA proportions: reduce the oversized desktop heading,
   shorten the blue stage, and make email + Youzan QR read as one balanced
   purchase/contact panel on narrow screens. */
@media (max-width: 640px) {
  .cta-glow-bg {
    padding-top: 64px !important;
    padding-bottom: 58px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cta-glow-bg > .max-w-3xl {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cta-glow-bg h2 {
    max-width: 12ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 18px !important;
    font-size: clamp(28px, 8.2vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  .cta-glow-bg p.text-white\/60 {
    max-width: 22em !important;
    margin-bottom: 24px !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.68 !important;
  }

  .cta-glow-bg .final-cta-actions {
    width: min(100%, 320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
  }

  .cta-glow-bg .final-cta-email {
    width: 100% !important;
    min-width: 0 !important;
  }

  .cta-glow-bg a.contact-advisor-cta {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  .cta-glow-bg .contact-email-hint {
    font-size: 12px !important;
    opacity: 0.9;
  }

  .cta-glow-bg .final-cta-actions > a:not(.contact-advisor-cta) {
    width: min(100%, 260px) !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  .cta-glow-bg .youzan-qr-card {
    box-sizing: border-box !important;
    width: min(100%, 320px) !important;
    margin-top: 20px !important;
    padding: 18px 16px !important;
    gap: 12px !important;
    border-radius: 24px !important;
  }

  .cta-glow-bg .youzan-qr-image {
    width: clamp(150px, 52vw, 178px) !important;
    height: clamp(150px, 52vw, 178px) !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .cta-glow-bg .youzan-qr-title {
    max-width: 16em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .cta-glow-bg .youzan-qr-note {
    max-width: 18em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 300px) {
  .cta-glow-bg {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cta-glow-bg h2 {
    font-size: clamp(24px, 9vw, 28px) !important;
  }

  .cta-glow-bg .youzan-qr-image {
    width: 136px !important;
    height: 136px !important;
  }
}

/* MOBILE_CTA_TITLE_WIDTH_QR_LOAD_FIX_20260525
   The previous mobile CTA tune kept the title safe but too narrow. Let the
   existing manual <br> control the two-line title, then keep the QR eager and
   balanced below. */
@media (max-width: 640px) {
  .cta-glow-bg h2 {
    width: min(100%, 320px) !important;
    max-width: min(100%, 320px) !important;
    font-size: clamp(25px, 7.4vw, 30px) !important;
    line-height: 1.16 !important;
  }

  .cta-glow-bg .youzan-qr-card {
    max-width: 320px !important;
  }
}

@media (max-width: 300px) {
  .cta-glow-bg h2 {
    width: min(100%, 240px) !important;
    max-width: min(100%, 240px) !important;
    font-size: clamp(22px, 8vw, 25px) !important;
  }
}

/* MOBILE_HERO_NO_BOTTOM_GAP_20260525
   Remove the leftover blue-grey mobile hero tail below the artwork. The
   product section now rises directly over the image edge, matching the
   desktop drawer transition without leaving a visible filler band. */
@media (max-width: 767px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    height: calc(64px + 56.25vw) !important;
    min-height: calc(64px + 56.25vw) !important;
    max-height: none !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide::after {
    top: 64px !important;
    height: calc(100vw * 0.5625) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -24px !important;
    padding-top: 46px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

@media (max-width: 420px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    height: calc(64px + 56.25vw) !important;
    min-height: calc(64px + 56.25vw) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -20px !important;
    padding-top: 42px !important;
  }
}

/* DESKTOP_HOME_DRAWER_RESTORE_20260526
   Keep the desktop hero pinned while the white content drawer scrolls over it. */
@media (min-width: 768px) {
  body:has(.hero-bg-carousel) #navbar #mobile-menu {
    display: none !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-mask {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100vh !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-mask {
    background: linear-gradient(
      180deg,
      rgba(8, 32, 46, 0.10) 0%,
      rgba(8, 32, 46, 0.32) 48%,
      rgba(8, 32, 46, 0.72) 100%
    ) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .relative.z-10.bg-brand-cream {
    position: relative !important;
    z-index: 20 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) #products {
    margin-top: -7rem !important;
    padding-top: clamp(7.5rem, 8vw, 9rem) !important;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    box-shadow: 0 -18px 54px rgba(8, 32, 46, 0.14) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

/* FINAL_CTA_TITLE_WHITE_RESTORE_20260529
   The about/story heading guard is more specific than the CTA rule; keep final CTA titles white. */
body:has(#story-content) .cta-glow-bg h2 {
  color: #ffffff !important;
}

/* MOBILE_HERO_TOP_FLUSH_20260529
   Keep the first hero image attached to the frosted mobile navigation. The
   narrow-screen navbar is 56px tall, while older hero rules still started the
   artwork at 64px, leaving a visible light-blue strip between nav and image. */
@media (max-width: 767px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) {
    --mobile-hero-nav-height: 64px;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-carousel,
  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-section-mobile {
    height: calc(var(--mobile-hero-nav-height) + 56.25vw) !important;
    min-height: calc(var(--mobile-hero-nav-height) + 56.25vw) !important;
  }

  body:has(.hero-bg-carousel):not(.about-redirect-landing) .hero-bg-slide::after {
    top: var(--mobile-hero-nav-height) !important;
    height: calc(100vw * 0.5625) !important;
  }
}

@media (max-width: 420px) {
  body:has(.hero-bg-carousel):not(.about-redirect-landing) {
    --mobile-hero-nav-height: 56px;
  }
}