/** Shopify CDN: Minification failed

Line 2845:0 Unexpected "}"

**/
/* ════════════════════════════════════════════════════
   GINPACT — Full Design System
   Brand: Premium wellness TCM / Hong Kong
   ════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --brand-red: #8B1C1C;
  --dp:       #2F2B6E;
  --dp-dark:  #1C194A;
  --navy:     #120F2A;
  --gold:     #C8A24A;
  --gold-b:   #B8923C;
  --ivory:    #FAF7F0;
  --cream:    #F5EFE2;
  --warm:     #EDE3CC;
  --white:    #FFFFFF;
  --dark:     #111118;
  --graphite: #5C5E66;
  --mist:     #E8E4DC;
  --zh: 'Noto Serif TC', Georgia, serif;
  --sans: 'DM Sans', 'Noto Sans TC', system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--dark);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1em; }
h1,h2,h3,h4,h5,h6 { font-family: var(--zh); font-weight: 700; line-height: 1.2; margin: 0; }

/* ── LAYOUT ── */
.gp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 64px; }
.skip-to-content {
  position: absolute; z-index: 9999; top: -100%; left: 1rem;
  padding: .5rem 1rem; background: var(--dp); color: #fff;
  border-radius: 8px; font-size: .875rem; transition: top .2s;
}
.skip-to-content:focus { top: 1rem; }

/* ── PILL BUTTONS ── */
.gp-pill {
  display: inline-flex; align-items: center;
  background: var(--dp); border-radius: 100px;
  padding: 9px 9px 9px 22px;
  color: #fff; font-size: 14px; font-weight: 600; font-family: var(--zh);
  text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .2s;
  text-decoration: none;
}
.gp-pill:hover { background: var(--dp-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47,43,110,.28); }
.gp-pill--gold { background: var(--gold); color: #1a0900; }
.gp-pill--gold:hover { background: var(--gold-b); }
.gp-pill--ghost { background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.gp-pill--ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: none; }
.gp-pill--white { background: #fff; color: var(--dp); border: 1px solid #e8e7ea; box-shadow: 0 16px 24px rgba(9,1,13,.03); }
.gp-pill--white:hover { background: #fff; box-shadow: 0 16px 24px rgba(9,1,13,.08); }
.gp-pill--white .gp-pill__icon { background: var(--gold); color: #fff; }
.gp-pill__icon {
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-left: 12px; flex-shrink: 0;
  color: var(--gold);
}
.gp-pill--ghost .gp-pill__icon { background: rgba(255,255,255,.2); color: #fff; }
.gp-pill--gold .gp-pill__icon { background: rgba(255,255,255,.25); color: var(--dp); }

.gp-pill-out {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(47,43,110,.22); border-radius: 100px;
  padding: 9px 20px; color: var(--dp); background: transparent;
  font-size: 13.5px; font-weight: 500; font-family: var(--sans); white-space: nowrap;
  transition: border-color .2s, background .2s, transform .2s;
  cursor: pointer; text-decoration: none;
}
.gp-pill-out:hover { border-color: var(--dp); background: rgba(47,43,110,.05); transform: translateY(-2px); }

.gp-pill-sm {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--mist); border-radius: 100px;
  padding: 8px 18px; color: var(--graphite); background: rgba(255,255,255,.6);
  font-size: 12.5px; font-weight: 500; font-family: var(--sans); cursor: pointer;
  transition: border-color .2s, color .2s; text-decoration: none;
}
.gp-pill-sm:hover { border-color: rgba(200,162,74,.4); color: var(--gold); }
.gp-pill-sm .tog { width: 22px; height: 14px; border-radius: 7px; background: var(--gold); position: relative; flex-shrink: 0; }
.gp-pill-sm .tog::after { content: ''; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

/* ── SECTION LABELS ── */
.gp-label {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  text-transform: uppercase; color: var(--gold); font-family: var(--zh);
}

/* ── REVEAL ANIMATIONS ── */
.gp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.gp-reveal.gp-vis { opacity: 1; transform: none; }
.gp-fade { opacity: 0; transition: opacity .7s ease; }
.gp-fade.gp-vis { opacity: 1; }
.gp-d1 { transition-delay: .08s; }
.gp-d2 { transition-delay: .16s; }
.gp-d3 { transition-delay: .24s; }
.gp-d4 { transition-delay: .32s; }
.gp-d5 { transition-delay: .40s; }
.gp-d6 { transition-delay: .50s; }

/* ── NAV ── */
/* ── HEADER / NAV ── */
.gp-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 600;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.gp-nav--scrolled {
  background: rgba(250,247,240,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 20px rgba(47,43,110,.08);
}
.gp-nav__inner {
  display: flex; align-items: center;
  padding: 0 80px; height: 90px;
  max-width: 1440px; margin: 0 auto;
  position: relative;
}

/* Logo — left */
.gp-nav__logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; }
.gp-nav__logo img { height: 28px; width: auto; display: block; }
.gp-nav__logo-img { height: 40px !important; width: auto !important; display: block; }
.gp-nav__wordmark { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.gp-nav__wordmark-zh { font-family: var(--zh); font-size: 19px; font-weight: 700; color: #1e2244; line-height: 1.25; letter-spacing: .05em; }
.gp-nav__wordmark-zh sup { font-size: 10px; vertical-align: super; }
.gp-nav__wordmark-en { font-family: var(--zh); font-size: 13px; font-weight: 700; color: var(--brand-red); letter-spacing: .18em; text-transform: uppercase; }

/* Nav links — centered pill */
.gp-nav__links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0;
  background: #FBF8F4;
  border-radius: 100px; border: 1px solid rgba(210,205,195,.7);
  padding: 6px 10px;
}
.gp-nav__link {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--graphite);
  text-transform: uppercase; letter-spacing: -.01em;
  transition: color .2s; text-decoration: none; font-family: var(--sans);
  padding: 9px 14px; border-radius: 100px; white-space: nowrap;
}
.gp-nav__link:hover { color: var(--dp); }
.gp-nav__link--active { color: var(--dp); font-weight: 700; }
.gp-nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
/* Auto dot: JS toggles `is-on` on exactly one nav entry at a time — the hovered entry, or (once
   nothing is hovered) whichever entry was last clicked, defaulting to Home. See gpNav script. */
.gp-nav__dot--auto { display: none; }
.gp-nav__dot--auto.is-on { display: block; }

/* CTA — right */
.gp-nav__cta { margin-left: auto; flex-shrink: 0; }

/* Dropdown */
.gp-nav__drop-wrap { position: relative; }
.gp-nav__drop-toggle { background: none; border: none; cursor: pointer; }
.gp-nav__drop-chevron { transition: transform .2s; flex-shrink: 0; }
.gp-nav__drop-wrap.open .gp-nav__drop-chevron { transform: rotate(180deg); }
.gp-nav__dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid rgba(210,205,195,.7); border-radius: 16px;
  padding: 8px; min-width: 220px; box-shadow: 0 16px 40px rgba(47,43,110,.12);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 700;
}
.gp-nav__drop-wrap.open .gp-nav__dropdown {
  opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0);
}
.gp-nav__drop-item {
  display: block; padding: 10px 16px; border-radius: 10px; font-size: 13px;
  font-family: var(--sans); font-weight: 500; color: var(--graphite);
  text-decoration: none; transition: background .15s, color .15s; white-space: nowrap;
}
.gp-nav__drop-item:hover { background: rgba(200,162,74,.08); color: var(--dp); }

/* Mega dropdowns — Brand / Shop hover panels (see reference/hover/) */
.gp-nav__drop-wrap--mega { position: relative; }
.gp-mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding-top: 12px; /* solid hover bridge flush under the pill — no gap, so it stays open while you move to it */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 700;
}
.gp-nav__drop-wrap--mega:hover .gp-mega,
.gp-nav__drop-wrap--mega:focus-within .gp-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Click-to-dismiss: after an option is clicked, hide the panel until the pointer leaves */
.gp-nav__drop-wrap--mega.is-dismissed .gp-mega {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.gp-mega__card {
  background: #fff; border: 1px solid rgba(23,21,60,.11); border-radius: 18px;
  box-shadow: 0 1px 48px rgba(8,29,58,.10); overflow: hidden;
}

/* Brand — 2-column icon + text grid */
.gp-mega__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 320px));
  width: 720px; max-width: calc(100vw - 40px);
}
.gp-mega__item {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  text-decoration: none; transition: background .15s;
}
.gp-mega__item:hover { background: rgba(200,162,74,.07); }
.gp-mega__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: #F7F2E6; color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.gp-mega__icon svg { width: 24px; height: 24px; }
.gp-mega__item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gp-mega__item-title { font-family: var(--zh); font-weight: 700; font-size: 16px; color: #2c2143; letter-spacing: -.02em; }
.gp-mega__item-desc { font-family: var(--sans); font-size: 14px; color: #706880; line-height: 1.35; }

/* Shop — two product rows + feature column */
.gp-mega--shop .gp-mega__card { display: flex; width: 850px; max-width: calc(100vw - 40px); }
.gp-mega__shop-list { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.gp-mega__shop-group {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  text-decoration: none; transition: background .15s;
}
.gp-mega__shop-group:hover { background: rgba(200,162,74,.07); }
.gp-mega__label { font-family: var(--zh); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: -.02em; color: #2c2143; }
.gp-mega__product { display: flex; gap: 16px; align-items: flex-start; }
.gp-mega__product-thumb { width: 88px; height: 88px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.gp-mega__product-thumb--ph { background: linear-gradient(135deg, #efe9dc, #d9cfb8); }
.gp-mega__product-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 4px 0; min-width: 0; }
.gp-mega__badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px;
  border-radius: 98px; color: #f4f7f8; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: -.02em;
}
.gp-mega__badge-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.gp-mega__product-title { font-family: var(--zh); font-weight: 700; font-size: 16px; color: #2c2143; letter-spacing: -.02em; }
.gp-mega__product-desc { font-family: var(--sans); font-size: 14px; color: #706880; line-height: 1.35; }
.gp-mega__shop-feature {
  flex-shrink: 0; width: 395px; display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-left: 1px solid rgba(23,21,60,.08);
}
.gp-mega__feature-img { width: 100%; height: 212px; border-radius: 10px; object-fit: cover; }
.gp-mega__feature-img--ph { background: linear-gradient(135deg, #3a2f1a, #1a1508); }
.gp-mega__shop-cta { align-self: stretch; justify-content: center; }

/* Burger — mobile only */
.gp-nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: 12px; cursor: pointer; background: none; border: none; }
.gp-nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--dp); border-radius: 1px; transition: transform .3s, opacity .3s; }

/* Right-side sliding drawer (see Figma "↪︎ Mobile Responsive UI" > Brand/Shop {Hover} mobile) */
/* z-index sits above .gp-nav (600) so the drawer's own logo/close row fully
   covers the fixed nav bar underneath it instead of the nav's burger button
   (opaque white circle) and centered logo painting on top of the drawer. */
.gp-mob { position: fixed; inset: 0; z-index: 601; visibility: hidden; }
.gp-mob.open { visibility: visible; }

/* Belt-and-suspenders: while the drawer is open, explicitly hide the nav's
   own logo + burger (JS toggles this class on #gpNav) so nothing from the
   header row can peek through during the slide-in transition. */
.gp-nav--menu-open .gp-nav__logo,
.gp-nav--menu-open .gp-nav__burger,
.gp-nav--menu-open .gp-nav__icons { opacity: 0; visibility: hidden; pointer-events: none; }

/* Language switcher — desktop */
.gp-lang { position: relative; }
.gp-lang__btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: var(--zh); font-size: 13px; font-weight: 600; color: var(--graphite);
  padding: 6px 10px; border-radius: 100px;
  transition: color .2s, background .2s; white-space: nowrap;
}
.gp-lang__btn:hover { color: var(--dp); background: rgba(200,162,74,.08); }
.gp-lang__drop {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid rgba(210,205,195,.7); border-radius: 14px;
  padding: 6px; min-width: 130px; box-shadow: 0 12px 32px rgba(47,43,110,.12);
  z-index: 700;
}
.gp-lang__opt {
  display: flex; flex-direction: column; width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--zh); font-size: 14px; color: var(--graphite);
  padding: 9px 14px; border-radius: 8px; text-align: left;
  transition: background .15s, color .15s; text-decoration: none;
}
.gp-lang__sub { font-size: 11px; opacity: .55; font-weight: 400; margin-top: 2px; }
.gp-lang__opt:hover { background: rgba(200,162,74,.08); color: var(--dp); }
.gp-lang__opt.is-active { color: var(--gold); font-weight: 700; }

/* Language switcher — mobile */
.gp-mob__lang { padding: 16px 20px 4px; }
.gp-mob__lang-form { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-mob__lang-btn {
  flex: 1; background: rgba(200,162,74,.08); border: 1px solid rgba(200,162,74,.2);
  border-radius: 8px; cursor: pointer; padding: 10px 12px; text-align: center;
  font-family: var(--zh); font-size: 14px; color: var(--graphite);
  transition: background .15s, color .15s, border-color .15s; text-decoration: none;
}
.gp-mob__lang-btn:hover,
.gp-mob__lang-btn.is-active { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 700; }
.gp-mob__backdrop {
  position: absolute; inset: 0; background: rgba(44,33,67,.5);
  opacity: 0; transition: opacity .35s var(--ease);
}
.gp-mob.open .gp-mob__backdrop { opacity: 1; }
.gp-mob__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(374px, 88vw);
  background: rgba(255,255,255,.94); backdrop-filter: blur(74px); -webkit-backdrop-filter: blur(74px);
  border-left: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.gp-mob.open .gp-mob__panel { transform: translateX(0); }
.gp-mob__panel-top {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(100,112,130,.16);
}
.gp-mob__logo { display: flex; align-items: center; text-decoration: none; }
.gp-mob__logo img { height: 40px; width: auto; display: block; }
.gp-mob__close { font-size: 18px; color: var(--dp); padding: 8px; cursor: pointer; background: none; border: none; line-height: 1; }
.gp-mob__top-icons { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; }
.gp-mob__top-icon,
.gp-mob__top-icons .gp-nav__icon-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(200,162,74,.08); color: var(--dp); text-decoration: none; position: relative; }
.gp-mob__scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 16px 0; }
.gp-mob__link {
  display: flex; align-items: center; height: 42px; padding: 8px 16px;
  font-family: var(--zh); font-size: 14px; font-weight: 700; text-transform: uppercase;
  color: var(--dp); text-decoration: none;
}
.gp-mob__cta { flex-shrink: 0; padding: 20px; border-top: 1px dashed rgba(100,112,130,.25); }
.gp-mob__cta .gp-pill { width: 100%; justify-content: center; }

/* Mobile accordion — expandable Brand/Shop/dropdown sub-sections inside the drawer */
.gp-mob__acc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 42px; padding: 8px 16px; margin: 0;
  font-family: var(--zh); font-size: 14px; font-weight: 700; text-transform: uppercase;
  color: var(--dp); background: none; border: none; text-align: left; cursor: pointer;
}
.gp-mob__acc-chevron { flex-shrink: 0; color: var(--dp); transition: transform .25s var(--ease); }
.gp-mob__acc.open .gp-mob__acc-chevron { transform: rotate(180deg); }
.gp-mob__acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.gp-mob__acc.open .gp-mob__acc-panel { padding: 8px 16px 12px; }
.gp-mob__sub-link {
  display: block; padding: 12px 0;
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  color: var(--graphite); text-decoration: none; transition: color .2s;
}
.gp-mob__sub-link:hover, .gp-mob__sub-link:active { color: var(--dp); }

/* Desktop mega-menus (nav-mega-brand / nav-mega-shop) reused inside the mobile accordion —
   neutralize their hover-positioned desktop layout and stack to a single mobile column. */
.gp-mob__acc-panel .gp-mega {
  position: static; opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; padding-top: 0; z-index: auto;
}
.gp-mob__acc-panel .gp-mega__card { width: 100%; max-width: none; box-shadow: none; }
.gp-mob__acc-panel .gp-mega__grid { width: 100%; grid-template-columns: 1fr; }
.gp-mob__acc-panel .gp-mega--shop .gp-mega__card { width: 100%; max-width: none; flex-direction: column; }
.gp-mob__acc-panel .gp-mega__shop-feature { width: 100%; border-left: none; border-top: 1px solid rgba(23,21,60,.08); }

/* ── HERO ── */
/* z-index:0 makes this section its own contained stacking context, so the
   very-low z-index below on .gp-hero__media can't escape and affect
   anything outside this section. */
.gp-hero { position: relative; z-index: 0; }
/* Pinned as far back as CSS allows (there's no literal -infinity, so this is
   the practical equivalent) — the photo, and any replacement a merchant
   uploads via the "Full-bleed background photo" setting, always renders
   behind the text at z-index:2. */
.gp-hero__media { position: relative; z-index: -999; width: 100%; aspect-ratio: 1440 / 800; overflow: hidden; }
.gp-hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
/* Mobile-only pre-composed photo (see .gp-hero__bg--mobile below) — hidden
   above the 768px breakpoint where the full-bleed desktop photo is used. */
.gp-hero__bg--mobile { display: none; }
/* Legibility scrim: the default photo happens to have an empty light sky
   behind the text, but a merchant-uploaded replacement might not. This
   guarantees contrast for the text column regardless of the photo. */
.gp-hero__media::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(250,247,240,.5) 0%, rgba(250,247,240,.2) 40%, rgba(250,247,240,0) 62%);
  pointer-events: none;
}
.gp-hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 881px; padding: 0 80px;
}
.gp-hero__h1 { font-family: var(--zh); font-size: clamp(30px,3.5vw,54px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--dp); margin-bottom: 40px; }
.gp-hero__h1-gold { display: block; color: var(--gold); margin-bottom: 4px; }
.gp-hero__sub { font-size: 18px; line-height: 1.33; color: var(--dp); max-width: 460px; margin-bottom: 28px; }
.gp-hero__sub span { color: var(--gold); }
.gp-hero__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Hidden on desktop — mobile-only overlay that centers bottle.png over the hero */
.gp-hero__product-overlay { display: none; }

.gp-hero__strip {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 20px;
  max-width: 1280px; margin: -56px auto 0; background: #fff; border-radius: 12px;
  padding: 20px 32px; box-shadow: 0 8px 32px rgba(23,21,60,.12);
}
.gp-hero__strip-item { display: flex; align-items: center; gap: 10px; }
.gp-hero__strip-icon {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  border: 1px solid rgba(200,162,74,.18);
  background: linear-gradient(180deg, rgba(220,182,111,.1) 0%, rgba(182,133,52,.1) 100%);
}
.gp-hero__strip-icon svg { width: 18px; height: 18px; }
.gp-hero__strip-text { display: flex; flex-direction: column; gap: 2px; }
.gp-hero__strip-label { font-size: 14px; color: var(--dp); white-space: nowrap; font-family: var(--sans); line-height: 1.2; }
.gp-hero__strip-num { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: .06em; font-family: var(--sans); line-height: 1; }
.gp-hero__strip-div { width: 1px; height: 26px; background: rgba(23,21,60,.15); flex-shrink: 0; }
.gp-hero__strip-rule { display: none; }

/* ── Hero editorial overlays ── */
.gp-hero__eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); margin-bottom: 18px; font-family: var(--sans); }
.gp-hero__rule { width: 44px; height: 2px; background: #b8292e; margin: -20px 0 28px; flex-shrink: 0; }

.gp-hero__side { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.gp-hero__side-text { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dp); text-align: center; line-height: 2; font-family: var(--sans); margin: 0; }
.gp-hero__side-sep { width: 1px; height: 32px; background: var(--gold); opacity: .55; }

.gp-hero__scroll { position: absolute; bottom: 100px; right: 52px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.gp-hero__scroll-label { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dp); font-family: var(--sans); writing-mode: vertical-rl; text-orientation: mixed; }
.gp-hero__scroll-line { width: 1px; height: 28px; background: var(--gold); opacity: .55; }
.gp-hero__scroll-arrow { font-size: 14px; color: var(--gold); line-height: 1; }

.gp-hero__corner { position: absolute; bottom: 32px; left: 80px; z-index: 3; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
@media (min-width: 769px) {
  .gp-hero__corner { bottom: 90px; }
}
.gp-hero__corner-brand { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--dp); font-family: var(--sans); }
.gp-hero__corner-tagline { font-size: 10px; letter-spacing: .1em; color: var(--graphite); font-family: var(--sans); text-transform: uppercase; }

@media (max-width: 768px) {
  .gp-hero__side, .gp-hero__scroll, .gp-hero__corner { display: none; }
  .gp-hero__eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 12px; }
  .gp-hero__rule { margin: -12px 0 20px; width: 36px; }
  .gp-hero__strip-num { display: none; }
}

/* ── Hero — Figma node 737:24 ("熱愛生命 相信未來") ──
   ID-scoped so it wins over the generic/tablet/large-screen .gp-hero__*
   rules further down. --u scales the 1280px Figma frame (1u = 1 design px)
   and is capped at 1px so the layout stays pinned left on wide screens. */
/* Feature strip (香港製造 / 科研發酵 / …) is not in the Figma hero and overlapped the CTAs — hidden. */
#gpHero .gp-hero__strip { display: none !important; }
#gpHero .gp-hero__h1 { color: #c40f22; }
#gpHero .gp-hero__h1-gold { color: #c40f22; margin-bottom: 0; }
#gpHero .gp-hero__eyebrow { font-family: var(--zh); font-weight: 300; letter-spacing: 0; text-transform: none; }
#gpHero .gp-hero__rule { background: #ffda84; }
#gpHero .gp-hero__subhead { font-family: var(--sans); font-size: 20px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: #000; margin: 0 0 14px; }
#gpHero .gp-hero__sub { color: #000; }
#gpHero .gp-pill { border: 1.2px solid #fff; font-family: 'Noto Serif HK', var(--zh); font-weight: 600; letter-spacing: -.02em; }
#gpHero .gp-pill--white { color: #000; box-shadow: none; }
#gpHero .gp-pill--white .gp-pill__icon { background: #fff; color: var(--gold); }
#gpHero .gp-pill--red { background: #c40f22; color: #f4f7f8; text-transform: none; padding-right: 28px; gap: 8px; }
#gpHero .gp-pill--red:hover { background: #a60c1c; box-shadow: 0 8px 24px rgba(196,15,34,.28); }
#gpHero .gp-pill__arrow { font-weight: 700; }

@media (min-width: 769px) {
  #gpHero { --u: min(.078125vw, 1px); }
  #gpHero .gp-hero__media { aspect-ratio: 1280 / 745; }
  #gpHero .gp-hero__bg { object-position: center; }
  #gpHero .gp-hero__media::before { content: none; }
  #gpHero .gp-hero__content { justify-content: flex-start; max-width: none; padding: calc(160 * var(--u)) 0 0 calc(67 * var(--u)); }
  #gpHero .gp-hero__eyebrow { color: #fff; font-size: calc(20 * var(--u)); line-height: 1.45; margin-bottom: calc(33 * var(--u)); }
  #gpHero .gp-hero__h1 { font-size: calc(90 * var(--u)); line-height: 1.1111; letter-spacing: -.01em; margin-bottom: 0; }
  #gpHero .gp-hero__rule { width: calc(182 * var(--u)); height: 1px; margin: calc(-5 * var(--u)) 0 calc(20 * var(--u)); }
  #gpHero .gp-hero__subhead { font-size: calc(28 * var(--u)); line-height: calc(24 * var(--u)); margin-bottom: calc(21 * var(--u)); }
  #gpHero .gp-hero__sub { font-size: calc(20 * var(--u)); line-height: 1.4; max-width: calc(445 * var(--u)); margin-bottom: calc(34 * var(--u)); }
  #gpHero .gp-hero__ctas { gap: calc(20 * var(--u)); flex-wrap: nowrap; }
  #gpHero .gp-pill { height: calc(57.6 * var(--u)); font-size: calc(16.8 * var(--u)); }
  #gpHero .gp-pill--white { padding: calc(8.4 * var(--u)) calc(8.4 * var(--u)) calc(8.4 * var(--u)) calc(33 * var(--u)); }
  #gpHero .gp-pill--white .gp-pill__icon { width: calc(40.8 * var(--u)); height: calc(40.8 * var(--u)); margin-left: calc(14 * var(--u)); }
  #gpHero .gp-pill--red { padding: 0 calc(28 * var(--u)); }
}

/* ── SOURCE / BRAND PROMISE ── */
.gp-source { background: var(--white); padding: 120px 0; position: relative; overflow: hidden; }
.gp-source__inkwash {
  position: absolute; left: -60px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; pointer-events: none; z-index: 0;
}
.gp-source__inkwash img { width: 100%; height: 100%; object-fit: contain; opacity: .07; }
.gp-source .gp-wrap { position: relative; z-index: 1; }
.gp-source__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 70px; }
.gp-src-title { font-family: var(--zh); font-size: clamp(26px,3vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 16px 0 24px; }
.gp-source__sub { font-size: 16px; color: var(--graphite); line-height: 1.5; margin: 0; }
.gp-source__intro-media { border-radius: 24px; overflow: hidden; }
.gp-source__intro-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 625/416; }

/* Centered section-intro block (label + heading), used by several "gp-source"
   style sections in place of a two-column .gp-source__intro. */
.gp-center-intro { text-align: center; }
.gp-center-intro__label { display: flex; justify-content: center; }
.gp-center-text { text-align: center; }
.gp-cta-row { display: flex; justify-content: center; }
/* Founder Origin: narrower, taller portrait than the generic 1fr/1fr photo+text intro row */
#founderOrigin .gp-source__intro { grid-template-columns: 2fr 3fr; }
#founderOrigin .gp-source__intro-media img { aspect-ratio: 4/5; }

.gp-source__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 48px; }
.gp-src-card { background: var(--white); border: 1px solid rgba(23,21,60,.11); border-radius: 20px; padding: 28px; }
.gp-src-card__icon { display: block; width: 48px; height: 48px; margin-bottom: 24px; color: var(--gold); }
.gp-src-card__icon svg { width: 100%; height: 100%; }
.gp-src-card__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 12px; line-height: 1.3; }
.gp-src-card__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }

.gp-source__cta { display: flex; justify-content: center; }

/* ── PRODUCTS ── */
/* ── PRODUCT SHOWCASE ── */
.gp-products { padding: 60px 0; }

/* Shared cream rounded panel (Product Showcase, Core Benefits) */
.gp-cream-panel { background: #FCFAF4; border-radius: 30px; margin: 0 20px; padding: 96px 60px; }
.gp-cream-panel__inner { max-width: 1280px; margin: 0 auto; }
.gp-products__head { text-align: center; margin-bottom: 52px; }
.gp-products__sub { font-size: 16px; color: var(--graphite); max-width: 500px; margin: 12px auto 0; line-height: 1.5; font-family: var(--sans); }

/* Two equal product cards */
.gp-ps-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 28px; align-items: stretch; }
.gp-ps-card { background: var(--white); border: 1px solid var(--mist); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.gp-ps-badge {
  align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--dp);
  border: 1px solid rgba(200,162,74,.5); border-radius: 100px; padding: 8px 16px;
  background: linear-gradient(90deg, rgba(200,162,74,.16) 0%, rgba(200,162,74,0) 100%);
  font-family: var(--zh);
}
.gp-ps-name { font-family: var(--zh); font-size: clamp(18px,1.6vw,22px); font-weight: 700; color: var(--dp); line-height: 1.3; }
.gp-ps-desc { font-size: 16px; line-height: 1.5; color: var(--graphite); font-family: var(--sans); margin: -8px 0 0; }
.gp-ps-card__body { display: flex; gap: 20px; flex: 1; }
/* align-self: flex-start opts the image out of the row's default stretch —
   otherwise it's forced to match .gp-ps-card__side's height (which differs
   between the two cards since they list different numbers of features),
   so the same aspect-ratio image renders at two different sizes. */
.gp-ps-card__img { width: 44%; border-radius: 16px; object-fit: cover; aspect-ratio: 276/307; flex-shrink: 0; align-self: flex-start; }
#pdpCompleteRoutine .gp-ps-card__img { aspect-ratio: auto; object-fit: contain; overflow: visible; }
.gp-ps-card__side { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gp-ps-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.gp-ps-feat { display: flex; align-items: flex-start; gap: 9px; font-size: 16px; line-height: 1.4; color: var(--dp); font-family: var(--sans); }
.gp-ps-feat__check { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--gold); }
.gp-ps-feat__check svg { width: 15px; height: 15px; }
/* margin-top: auto docks the CTA to the bottom of the card regardless of how
   much shorter this card's feature list is than its sibling's (same pattern
   as .gp-pcard below) — Grid stretches both cards to equal height, and this
   pushes the button down to fill the leftover space instead of leaving it
   as dead space below the button. */
.gp-ps-card .gp-pill, .gp-ps-card .gp-pill--white { align-self: flex-start; margin-top: auto; }

/* Bottom disclaimer */
.gp-products__note { text-align: center; font-size: 12px; font-style: italic; color: var(--graphite); font-family: var(--sans); max-width: 620px; line-height: 1.65; margin: 0 auto; }

/* ── SCIENCE ── */
.gp-science { background: var(--white); padding: 120px 0; }
.gp-sci__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 70px; }
.gp-sci__h2 { font-family: var(--zh); font-size: clamp(26px,3vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 16px 0 24px; }
.gp-sci__sub { font-size: 16px; color: var(--graphite); line-height: 1.5; margin: 0 0 24px; }
.gp-sci__checks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gp-sci__check { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--dp); font-family: var(--sans); }
.gp-sci__check-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold); }
.gp-sci__check-icon svg { width: 100%; height: 100%; }
.gp-sci__intro-media { border-radius: 24px; overflow: hidden; }
.gp-sci__intro-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 625/416; }

.gp-sci__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.gp-sci__card { background: var(--white); border: 1px solid var(--mist); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.gp-sci__card-step { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; font-family: var(--zh); }
.gp-sci__card-title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); line-height: 1.3; }
.gp-sci__card-desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }
.gp-sci__card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; margin-top: auto; }

/* ── BENEFITS ── */
.gp-benefits { padding: 60px 0; }
.gp-benefits__head { text-align: center; margin-bottom: 52px; }
.gp-ben__label { display: flex; justify-content: center; }
.gp-ben__card-body { min-width: 0; }
.gp-ben__h2 { font-family: var(--zh); font-size: clamp(26px,3vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 12px auto 0; max-width: 736px; }
.gp-ben__body { font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 500px; margin: 16px auto 0; }
.gp-ben__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-bottom: 32px; }
.gp-ben__card { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.gp-ben__item-icon { width: 48px; height: 48px; background: var(--gold); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; flex-shrink: 0; }
.gp-ben__item-icon svg { width: 24px; height: 24px; color: #fff; }
.gp-ben__item-title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); margin-bottom: 16px; }
.gp-ben__item-desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }
.gp-ben__note { text-align: center; font-size: 12px; font-style: italic; color: var(--graphite); max-width: 620px; margin: 0 auto 28px; line-height: 1.6; }

/* ── CLINICAL ── */
.gp-clinical { background: var(--white); padding: 112px 0; text-align: center; }
.gp-clin__label { display: flex; justify-content: center; }
.gp-clin__h2 { font-family: var(--zh); font-size: clamp(22px,2.8vw,38px); font-weight: 700; line-height: 1.3; color: var(--dp); margin: 12px auto 16px; max-width: 620px; }
.gp-clin__sub { font-size: 16px; color: var(--graphite); max-width: 480px; margin: 0 auto 52px; line-height: 1.5; }

/* Trust strip: 5 cells */
.gp-clin__strip { display: flex; align-items: stretch; justify-content: center; margin-bottom: 40px; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
.gp-clin__cell {
  flex: 1; text-align: left; padding: 28px; border-left: 1px dashed rgba(200,162,74,.38); border-right: 1px dashed rgba(200,162,74,.38);
  margin-right: -1px;
}
.gp-clin__cell:nth-child(odd) { background: rgba(200,162,74,.02); }
.gp-clin__cell-icon { display: block; width: 40px; height: 40px; margin-bottom: 24px; color: var(--gold); }
.gp-clin__cell-icon svg { width: 100%; height: 100%; }
.gp-clin__cell-title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); line-height: 1.3; margin-bottom: 10px; }
.gp-clin__cell-desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }

/* Research panel */
.gp-research-panel { border: 1px solid rgba(44,33,67,.12); border-radius: 16px; overflow: hidden; margin-bottom: 24px; text-align: left; }
.gp-research-panel__head { text-align: center; font-family: var(--zh); font-size: clamp(20px,2vw,30px); font-weight: 600; color: var(--dp); padding: 32px 24px; border-bottom: 1px solid rgba(44,33,67,.1); }
.gp-research-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.gp-rc {
  padding: 44px 40px; border-right: 1px solid var(--gold); display: flex; flex-direction: column; gap: 24px;
  background: linear-gradient(180deg, rgba(200,162,74,.05) 0%, rgba(200,162,74,0) 70%);
}
.gp-rc:last-child { border-right: none; }
.gp-rc__body { text-align: center; }
.gp-rc__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 12px; line-height: 1.3; }
.gp-rc__desc { font-size: 16px; line-height: 1.5; color: var(--dp); margin: 0; }
.gp-rc__img { width: 100%; aspect-ratio: 370/172; object-fit: cover; border-radius: 12px; }
.gp-clin__note { font-size: 12px; font-style: italic; color: var(--graphite); max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }

/* ── AUDIENCE ── */
.gp-audience { padding: 60px 0; }
.gp-aud__head { text-align: center; margin-bottom: 52px; }
.gp-aud__label { display: flex; justify-content: center; }
.gp-aud__h2 { font-family: var(--zh); font-size: clamp(26px,3vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 12px auto 0; max-width: 740px; }
.gp-aud__sub { font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 500px; margin: 16px auto 0; }
.gp-aud__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.gp-ac { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 24px; display: flex; align-items: center; gap: 22px; }
.gp-ac__img { width: 86px; height: 86px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.gp-ac__body { flex: 1; min-width: 0; }
.gp-ac__type { font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); margin-bottom: 8px; line-height: 1.3; }
.gp-ac__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }
.gp-aud__cta { display: flex; justify-content: center; }

/* ── FOUNDER ── */
.gp-founder { background: var(--white); padding: 120px 0; }
.gp-found__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 70px; }
.gp-found__portrait { position: relative; z-index: 0; border-radius: 24px; overflow: hidden; }
.gp-found__portrait img { position: relative; z-index: -999; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 625/416; display: block; }
.gp-found__quote {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 24px 24px;
  font-family: var(--zh); font-size: 24px; font-weight: 700; font-style: normal; color: #fff;
  background: linear-gradient(to top, rgba(23,21,60,.74) 0%, rgba(23,21,60,0) 100%);
}
.gp-found__h2 { font-family: var(--zh); font-size: clamp(26px,3vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 16px 0 24px; }
.gp-found__body { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }

.gp-found__media { text-align: center; margin-bottom: 48px; }
.gp-found__media-h3 { font-family: var(--zh); font-size: clamp(20px,2vw,30px); font-weight: 600; color: var(--dp); margin: 0 0 32px; }
.gp-found__plats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.gp-fp { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; }
.gp-fp--wide { grid-column: 1 / -1; }
.gp-fp__icon { width: 44px; height: 44px; background: var(--gold); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; }
.gp-fp__icon svg { width: 24px; height: 24px; }
.gp-fp__name { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); display: block; }
.gp-fp__sub { font-size: 18px; color: var(--graphite); display: block; margin-top: 6px; }
.gp-found__ctas { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

/* ── FOOTER ── */
.gp-footer { background: var(--navy); color: rgba(255,255,255,.6); overflow: hidden; }

/* Shell: one continuous rounded shape containing both the photo and the dark card */
.gp-foot__shell { margin: 0 20px; border-radius: 30px; overflow: hidden; }

/* Top lifestyle image */
.gp-foot__top { position: relative; z-index: 0; width: 100%; aspect-ratio: 1440 / 786; max-height: 786px; overflow: hidden; }
.gp-foot__top img { position: relative; z-index: -999; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.gp-foot__top::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(14,9,5,.82) 0%, rgba(14,9,5,0) 60%); pointer-events: none; }
.gp-foot__hero-overlay { position: absolute; left: 60px; top: 120px; max-width: 420px; z-index: 2; }
.gp-foot__hero-heading { font-family: var(--zh); font-size: clamp(26px,3vw,42px); font-weight: 600; color: #fff; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 16px; }
.gp-foot__hero-sub { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); font-family: var(--sans); margin-bottom: 24px; }

/* Dark card, flush against the photo above it (no overlap, no gap) */
.gp-foot__card { background: #0e0c22; position: relative; z-index: 2; }
.gp-foot__card-inner { display: grid; grid-template-columns: 200px repeat(3,1fr) 300px; gap: 32px; padding: 48px 48px 40px; align-items: start; }

/* Col 1: Brand */
.gp-foot__logo { height: 80px; width: 80px; object-fit: contain; display: block; margin-bottom: 28px; border-radius: 8px; }
.gp-foot__logo-text { font-family: var(--zh); font-size: 15px; font-weight: 700; color: rgba(255,255,255,.6); display: block; margin-bottom: 28px; letter-spacing: .02em; }
.gp-foot__contact-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; font-family: var(--sans); }
.gp-foot__contact-icons { display: flex; gap: 10px; }
.gp-foot__contact-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.48); transition: border-color .2s, color .2s; text-decoration: none; }
.gp-foot__contact-icon:hover { border-color: var(--gold); color: var(--gold); }

/* Nav columns */
.gp-foot__col-head { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 18px; font-family: var(--sans); }
.gp-foot__links { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.gp-foot__links a { font-size: 13px; color: rgba(255,255,255,.38); transition: color .2s; text-decoration: none; font-family: var(--sans); }
.gp-foot__links a:hover { color: rgba(255,255,255,.72); }

/* Newsletter col */
.gp-foot__nl-heading { font-family: var(--zh); font-size: clamp(18px,1.6vw,22px); font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: 24px; }
.gp-foot__nl-dim { color: rgba(255,255,255,.16); }
.gp-foot__nl-bright { color: rgba(255,255,255,.38); }
.gp-foot__nl-row { display: flex; gap: 8px; align-items: center; }
.gp-foot__nl-input { flex: 1; height: 48px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 0 20px; font-size: 13px; color: rgba(255,255,255,.75); font-family: var(--sans); outline: none; transition: border-color .2s; min-width: 0; }
.gp-foot__nl-input::placeholder { color: rgba(255,255,255,.28); }
.gp-foot__nl-input:focus { border-color: rgba(200,162,74,.45); }
.gp-foot__nl-btn { flex-shrink: 0; height: 48px; background: var(--gold); color: #fff; border: none; border-radius: 100px; padding: 0 18px; font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .2s; }
.gp-foot__nl-btn:hover { background: var(--gold-b); }
.gp-foot__nl-btn .gp-pill__icon { width: 26px; height: 26px; background: rgba(255,255,255,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gp-foot__nl-btn .gp-pill__icon svg { width: 12px; height: 12px; }
.gp-foot__nl-success { color: var(--gold); font-size: 14px; font-family: var(--sans); }

/* Bottom bar inside card */
.gp-foot__bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 48px 22px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.26); font-family: var(--sans); }
.gp-foot__legal { display: flex; gap: 20px; }
.gp-foot__legal a { color: rgba(255,255,255,.26); transition: color .2s; text-decoration: none; font-family: var(--sans); }
.gp-foot__legal a:hover { color: rgba(255,255,255,.55); }

/* GINPACT watermark with landscape bg */
.gp-foot__wm-wrap { position: relative; height: 220px; overflow: hidden; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
.gp-foot__wm-text {
  font-family: var(--sans); font-size: clamp(80px,15vw,230px); font-weight: 900;
  letter-spacing: .01em; line-height: 1; white-space: nowrap;
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: rgba(255,255,255,.14); -webkit-text-fill-color: transparent;
  opacity: .65; pointer-events: none; user-select: none;
}

/* ── RESPONSIVE ── */
/* Global overflow guard: nothing should ever force horizontal scroll on phones */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 1100px) {
  .gp-wrap { padding: 0 44px; }
  .gp-hero__content { padding: 0 52px; max-width: 620px; }
  .gp-sci__card { padding: 24px; }
}
@media (max-width: 900px) {
  .gp-hero__media { aspect-ratio: 375 / 580; }
  .gp-hero__content { max-width: none; }

  /* Below ~900px the hero/footer photos crop by width, not height — their
     subjects (product bottle / founder+products) sit right-of-center in the
     source photos, so a plain "center" position pushes them out of frame. */
  .gp-hero__bg { object-position: center 40%; }
  .gp-foot__top img { object-position: 60% 22%; }

  /* Text+photo intro rows: keep all three in sync (was previously only
     Brand Promise / Founder, leaving Why It Works cramped as 2 columns
     all the way down to 768px). */
  .gp-source__intro, .gp-sci__intro, .gp-found__intro { grid-template-columns: 1fr; }

  /* 3-card grids stack directly (a 2-col layout would leave an orphan
     3rd card); 4-card grid keeps a balanced 2x2. */
  .gp-source__cards, .gp-sci__cards, .gp-research-grid, .gp-ps-cards { grid-template-columns: 1fr; }
  .gp-ben__grid { grid-template-columns: 1fr 1fr; }

  .gp-clin__strip { flex-wrap: wrap; }
  .gp-clin__cell { flex: 1 1 50%; }
  .gp-cream-panel { padding: 64px 40px; }
  .gp-foot__card-inner { grid-template-columns: 1fr 1fr; }
  .gp-foot__nl-col { grid-column: 1 / -1; }
  .gp-foot__top { aspect-ratio: 900 / 620; max-height: none; }
  .gp-foot__hero-overlay { left: 36px; top: 64px; max-width: 340px; }
}
@media (max-width: 768px) {
  .gp-nav__inner { padding: 0 16px; height: 60px; position: relative; }
  .gp-nav__links, .gp-nav__cta { display: none !important; }
  /* Cart + account icons now show on mobile too, grouped with the burger on
     the right (margin-left: auto pushes this pair to the end) — layout is
     [logo abs, centered] ... [account] [cart] [burger]. Matching white
     circle background keeps them visible/tappable over a transparent
     (pre-scroll) hero photo, same reasoning as the burger's own button. */
  .gp-nav__icons { display: none !important; }
  .gp-lang { margin-left: auto; }
  /* Burger no longer needs its own margin-left: auto — it just follows the
     icons pair, which now carries that push-to-the-end job. */
  .gp-nav__burger { display: flex !important; padding: 0; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(23,21,60,.12); justify-content: center; align-items: center; gap: 4px; flex-direction: column; }
  .gp-nav__burger span { width: 16px; height: 1.5px; }
  .gp-lang { flex-shrink: 0; }
  .gp-lang__btn { background: #fff; box-shadow: 0 1px 6px rgba(23,21,60,.12); padding: 6px 10px; border-radius: 100px; }
  /* Logo left-aligned — taken out of flex flow so it doesn't compete with right-side buttons */
  .gp-nav__logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
  /* Horizontal wordmark: 山參有約 GINPACT inline */
  .gp-nav__wordmark { flex-direction: row; align-items: baseline; gap: 5px; }
  /* <br> in wordmark-zh suppressed via zero-size flex hack (display:none unreliable on <br>) */
  .gp-nav__wordmark-zh { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0; font-size: 15px; }
  .gp-nav__wordmark-en { font-size: 13px; letter-spacing: .12em; }
  /* Full-width drawer — eliminates logo peek-through */
  .gp-mob__panel { width: 100%; border-left: none; }
  .gp-mob__close { padding: 12px; }
  /* Mobile uses a single pre-composed photo (gradient fade into the product
     shot already baked into the asset) instead of stretching the desktop
     landscape photo into a tall container with a CSS-gradient fake fade.
     Ratio cropped to 390/780 (from the asset's native 390/1010) to reduce
     the dead gap between the CTAs and the product shot; object-position:bottom
     anchors the bottle at the bottom of the cropped container. */
  .gp-hero__media { aspect-ratio: 390 / 780; }
  .gp-hero__bg--desktop { display: none; }
  .gp-hero__bg--mobile { display: block; object-position: center bottom; }
  .gp-hero__media::before,
  .gp-hero__media::after { content: none; }
  .gp-hero__product-overlay { display: none; }
  .gp-hero__content { padding: 0 24px; justify-content: flex-start; padding-top: 84px; }
  /* h1 was rendering noticeably smaller than the reference design — cross-
     checked against the CTA pill (an unrelated, unchanged element) as a
     fixed ruler in both screenshots, the reference's h1 is roughly 1.3-1.4x
     the current fixed 30px. Bumped up across all 3 small-screen steps. */
  .gp-hero__h1 { font-size: clamp(20px, 7vw, 38px); margin-bottom: 28px; }
  .gp-hero__sub { margin-bottom: 28px; }
  .gp-hero__strip { margin-top: -100px; padding: 14px 18px; gap: 8px 14px; justify-content: flex-start; }
  .gp-hero__strip-label { white-space: normal; font-size: 13px; }
  .gp-wrap { padding: 0 24px; }
  .gp-source__cards, .gp-sci__cards, .gp-research-grid, .gp-found__plats { grid-template-columns: 1fr; }
  .gp-clin__cell { flex: 1 1 100%; border-right: none; }
  .gp-rc { border-right: none; border-bottom: 1px solid var(--gold); padding: 28px 24px; }
  .gp-rc:last-child { border-bottom: none; }
  .gp-ps-card__body { flex-direction: column; }
  /* Desktop's 44%-wide 276/307 crop forces any fixed mobile aspect-ratio to
     still crop the top/bottom by some amount, since the two product photos
     don't share one exact ratio. Dropping the fixed ratio and letting height
     size to the image's own intrinsic proportions (object-fit becomes a
     no-op once there's no size mismatch to "fit") guarantees the complete,
     uncropped photo renders at every width. */
  .gp-ps-card__img { width: 100%; aspect-ratio: auto; height: auto; object-fit: contain; }
  .gp-source, .gp-audience, .gp-products, .gp-clinical, .gp-founder, .gp-science { padding: 72px 0; }
  .gp-ben__grid { grid-template-columns: 1fr; }
  .gp-cream-panel { padding: 44px 24px; margin: 0 12px; }
  .gp-foot__top { aspect-ratio: 1400 / 2950; max-height: none; }
  .gp-foot__top img { object-position: center center; }
  .gp-foot__hero-overlay { left: 24px; right: 24px; top: 40px; max-width: none; }
  .gp-foot__hero-sub { display: none; }
  .gp-foot__shell { margin: 0 12px; border-radius: 16px; }
  .gp-foot__card-inner { grid-template-columns: 1fr; padding: 32px 24px 24px; gap: 28px; }
  .gp-foot__nl-col { grid-column: auto; }
  .gp-foot__nl-row { flex-direction: column; }
  .gp-foot__nl-input, .gp-foot__nl-btn { width: 100%; justify-content: center; height: 44px; box-sizing: border-box; }
  .gp-foot__bottom { flex-direction: column; gap: 10px; text-align: center; padding: 16px 24px 20px; }
  .gp-foot__wm-wrap { height: 110px; }
  .gp-foot__wm-text { font-size: clamp(48px,14vw,100px); }
}

/* Small phones (iPhone SE/mini, older Android, 320–480px) */
@media (max-width: 480px) {
  .gp-wrap { padding: 0 18px; }
  .gp-hero__content { padding-left: 18px; padding-right: 18px; padding-top: 72px; }
  .gp-hero__h1 { font-size: clamp(20px, 7vw, 32px); margin-bottom: 28px; }
  .gp-bhero__h1, .gp-cathero__h1 { font-size: 30px; }
  .gp-hero__sub { font-size: 15px; margin-bottom: 28px; }
  .gp-hero__ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gp-hero__ctas .gp-pill { justify-content: space-between; }
  /* Figma's mobile card is a 2-column grid (not a single stacked column) —
     the lone 5th item spans both columns on its own row. */
  .gp-hero__strip { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: -90px 12px 24px; padding: 0 14px 4px; gap: 0 8px; border-radius: 20px; box-shadow: 0 8px 32px rgba(23,21,60,.15); background: #fff; }
  .gp-hero__strip-item { padding: 14px 4px; gap: 10px; }
  .gp-hero__strip-item:last-child { grid-column: 1 / -1; }
  .gp-hero__strip-div { display: none; }
  .gp-hero__strip-rule { display: block; grid-column: 1 / -1; height: 1px; background: rgba(23,21,60,.1); }
  .gp-hero__strip-label { font-size: 14px; white-space: normal; }
  .gp-hero__strip-icon { width: 28px; height: 28px; border-radius: 8px; }
  .gp-hero__strip-icon svg { width: 14px; height: 14px; }

  /* Long CTA labels + icon can outgrow a 320–360px viewport at full size */
  .gp-pill { font-size: 12.5px; padding: 8px 8px 8px 16px; white-space: normal; }
  .gp-pill__icon { width: 28px; height: 28px; margin-left: 10px; }

  .gp-source, .gp-audience, .gp-products, .gp-clinical, .gp-founder, .gp-science { padding: 56px 0; }
  .gp-cream-panel { padding: 32px 16px; margin: 0 8px; border-radius: 20px; }
  .gp-src-card, .gp-sci__card, .gp-ben__card, .gp-ps-card { padding: 20px; }

  .gp-ac { padding: 18px; gap: 14px; }
  .gp-ac__img { width: 64px; height: 64px; }

  .gp-fp { padding: 18px; gap: 14px; }
  .gp-fp__icon { width: 38px; height: 38px; font-size: 13px; }
  .gp-fp__icon svg { width: 20px; height: 20px; }
  .gp-found__quote { font-size: 19px; padding: 26px 18px 16px; }

  .gp-rc { padding: 22px 16px; }
  .gp-research-panel__head { padding: 20px 16px; }
  .gp-clin__cell { padding: 22px 4px; }

  .gp-foot__shell { margin: 0 6px; border-radius: 14px; }
  .gp-foot__wm-wrap { height: 76px; }
  .gp-foot__wm-text { font-size: clamp(34px,13vw,64px); }
}

/* ── XS: 320–360px (very small phones) ── */
@media (max-width: 360px) {
  .gp-hero__h1 { font-size: clamp(20px, 7vw, 28px); }
  .gp-hero__sub { font-size: 13px; }
  .gp-pill { font-size: 12px; padding: 8px 8px 8px 14px; }
  .gp-pill__icon { width: 26px; height: 26px; }
  .gp-wrap { padding: 0 14px; }
  .gp-cream-panel { padding: 28px 14px; margin: 0 6px; }
  .gp-nav__inner { padding: 0 14px; }
  .gp-ac__img { width: 52px; height: 52px; }
  .gp-ac__type { font-size: 15px; }
  .gp-fp__sub { font-size: 13px; }
}

/* ── Mobile: inkwash cleanup ── */
@media (max-width: 768px) {
  .gp-source__inkwash { width: 200px; height: 200px; opacity: .04; }
  /* Founder CTAs stack nicely on narrow screens */
  .gp-found__ctas { flex-direction: column; align-items: center; gap: 16px; }
  /* Audience grid: keep 2-col until it's really narrow */
  .gp-aud__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .gp-aud__grid { grid-template-columns: 1fr; }
  .gp-source__inkwash { display: none; }
  .gp-hero__ctas { flex-direction: column; align-items: flex-start; }
}

/* ── Medium tablet: 900–1100px ── */
@media (min-width: 901px) and (max-width: 1100px) {
  .gp-hero__h1 { font-size: clamp(36px,4vw,56px); }
  .gp-hero__content { max-width: 580px; }
  .gp-ps-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
  .gp-aud__grid { grid-template-columns: 1fr 1fr; }
  .gp-ben__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gp-src-card, .gp-sci__card { padding: 22px; }
  .gp-found__ctas { gap: 20px; }
  .gp-foot__card-inner { grid-template-columns: 160px repeat(3,1fr) 240px; gap: 24px; }
}

/* ── Large desktop: 1440px+ ── */
@media (min-width: 1441px) {
  .gp-hero__content { max-width: 960px; }
  .gp-hero__h1 { font-size: 58px; }
  .gp-hero__sub { font-size: 20px; }
  .gp-wrap { max-width: 1340px; }
  .gp-cream-panel { margin: 0 40px; }
}

/* ── XL: 1920px+ ── */
@media (min-width: 1920px) {
  .gp-hero__content { max-width: 1060px; }
  .gp-hero__h1 { font-size: 62px; }
  .gp-hero__sub { font-size: 22px; }
  .gp-wrap { max-width: 1520px; }
  .gp-cream-panel { margin: 0 60px; }
}

/* ════════════════════════════════════════════════════
   BRAND PAGES — shared patterns
   Reused across the "2.1 Brand Story", "2.2 Science &
   Technology" and "2.3 Product Value" pages (reference/brand,
   reference/science-tech, reference/product-value).
   ════════════════════════════════════════════════════ */

/* Decorative faint vine — same source asset, corner-flipped via transform */
.gp-vine { position: absolute; width: 459px; height: 445px; pointer-events: none; z-index: 0; }
.gp-vine img { width: 100%; height: 100%; display: block; }
.gp-vine--tl { top: 0; left: 0; transform: scaleY(-1) rotate(180deg); }
.gp-vine--br { bottom: 0; right: 0; transform: scaleY(-1); }

/* Gold-tinted rounded panel used by several sections (Problem, Mission, etc.) */
.gp-tint-panel { background: rgba(200,162,74,.06); border-radius: 30px; margin: 0 20px; padding: 96px 60px; position: relative; overflow: hidden; }
.gp-tint-panel__inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

/* Hero-style rounded gradient panel (Brand/Science/Product hero sections) —
   always the first section on its page, so it needs its own top clearance:
   the site nav is `position: fixed` (see .gp-nav) and isn't in normal flow,
   so without this the panel's heading/photo render underneath the nav bar. */
.gp-bhero { position: relative; padding-top: 122px; }
.gp-bhero__panel { border-radius: 30px; margin: 0 20px; padding: 64px 60px; overflow: hidden; position: relative; }
.gp-bhero__panel--down { background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(200,162,74,.2) 100%); }
.gp-bhero__panel--up { background: linear-gradient(180deg, rgba(200,162,74,.2) 24%, rgba(255,255,255,0) 100%); }
.gp-bhero__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; max-width: 1280px; margin: 0 auto; }
.gp-bhero__label { margin-bottom: 20px; display: inline-flex; }
.gp-bhero__h1 { font-family: var(--zh); font-size: clamp(28px,3.4vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin-bottom: 30px; }
#pdpHero .gp-bhero__h1.gp-bhero__h1--size20 { font-size: clamp(20px,2.4vw,36px); }
.gp-bhero__sub { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0 0 32px; }
.gp-bhero__media { border-radius: 24px; overflow: hidden; }
.gp-bhero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 588/540; }
#mediaHero .gp-bhero__media img { object-fit: contain; padding: 8px 20px 24px 8px; }
.gp-bhero__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Inline trust-badge row (icon + label, divided) used in Science/Product heroes */
.gp-trust-row { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.gp-trust-row__line { display: flex; align-items: center; gap: 24px; }
.gp-trust-row__item { display: flex; align-items: center; gap: 10px; }
.gp-trust-row__item svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.gp-trust-row__item span { font-size: 15px; color: #17153c; white-space: nowrap; }
.gp-trust-row__div { width: 1px; height: 22px; background: var(--mist); flex-shrink: 0; }

/* Generic white bordered card grid — icon/photo + title + desc (reused by many sections) */
.gp-bcard-grid { display: grid; gap: 24px; }
.gp-bcard-grid--3 { grid-template-columns: repeat(3,1fr); }
.gp-bcard-grid--4 { grid-template-columns: repeat(4,1fr); }
.gp-bcard-grid--2 { grid-template-columns: repeat(2,1fr); }
.gp-bcard-grid--5 { grid-template-columns: repeat(5,1fr); }
.gp-bcard { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.gp-bcard--center { text-align: center; align-items: center; }
.gp-bcard__icon { width: 48px; height: 48px; color: var(--gold); flex-shrink: 0; }
.gp-bcard__icon svg { width: 100%; height: 100%; }
.gp-bcard__icon--fill { background: var(--gold); border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #fff; }
.gp-bcard__icon--fill svg { width: 24px; height: 24px; }
.gp-bcard__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); line-height: 1.3; }
.gp-bcard__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }

/* Active Compounds: icon sits inline beside the title, not stacked above it */
#activeCompounds .gp-bcard { gap: 12px; }
#activeCompounds .gp-bcard__head { display: flex; align-items: center; gap: 10px; }
#activeCompounds .gp-bcard__icon { width: 26px; height: 26px; }
.gp-bcard__img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 12px; margin-top: auto; }
.gp-bcard__step { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--gold); font-family: var(--zh); }
/* Horizontal row-style card (photo + text side by side), used by Modern Life Science */
.gp-bcard--row { flex-direction: row; align-items: center; gap: 22px; }
.gp-bcard--row .gp-bcard__img { width: 86px; height: 86px; aspect-ratio: 1/1; object-fit: cover; flex-shrink: 0; margin-top: 0; }

/* Gold-bordered pull-quote bar */
.gp-quote-bar { border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); border-radius: 16px; background: rgba(200,162,74,.04); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.gp-quote-bar__icon { width: 48px; height: 48px; color: rgba(200,162,74,.35); flex-shrink: 0; }
.gp-quote-bar__icon svg { width: 100%; height: 100%; }
.gp-quote-bar__icon--flip { transform: rotate(180deg); }
.gp-quote-bar p { font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); margin: 0; }

/* Numbered list rows (Our Belief) */
.gp-numlist { display: flex; flex-direction: column; }
.gp-numlist__row { display: flex; align-items: center; gap: 40px; padding: 32px 20px; border-top: 1px solid #e8e7ea; }
.gp-numlist__row:last-child { border-bottom: 1px solid #e8e7ea; }
.gp-numlist__img { width: 204px; height: 134px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.gp-numlist__num { font-family: var(--zh); font-size: 42px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.gp-numlist__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); margin-bottom: 10px; line-height: 1.3; }
.gp-numlist__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }

/* Mission-style accordion column + side photo */
.gp-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.gp-mission__col { border: 1px solid rgba(23,21,60,.11); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.gp-mission__item { padding: 28px; border-bottom: 1px solid rgba(23,21,60,.12); display: flex; flex-direction: column; gap: 24px; }
.gp-mission__item:last-child { border-bottom: none; }
.gp-mission__icon { width: 58px; height: 58px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.gp-mission__icon svg { width: 28px; height: 28px; }
.gp-mission__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); }
.gp-mission__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }
.gp-mission__media { display: flex; flex-direction: column; gap: 16px; }
.gp-mission__photo { border-radius: 24px; overflow: hidden; background: rgba(200,162,74,.1); }
.gp-mission__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 604/516; }
.gp-mission__quote { margin: 0; }

/* Why GINPACT grid — alternating card-stack / tall-photo columns */
.gp-why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; align-items: start; }
.gp-why-col { display: flex; flex-direction: column; gap: 24px; }
.gp-why-photo { border-radius: 16px; overflow: hidden; }
.gp-why-photo img { width: 100%; aspect-ratio: 3/5; object-fit: cover; display: block; }
/* Mobile-only photo variant (see brand-why-ginpact.liquid) — hidden above
   the mobile breakpoint, where the desktop photo shows instead. Needs the
   extra ".gp-why-photo" qualifier so its specificity (0,2,1) beats the
   ".gp-why-photo img { display: block }" rule above (0,1,1) — otherwise
   that rule wins and both photos render stacked on top of each other. */
.gp-why-photo img.gp-why-photo__mobile { display: none; }

/* 3-column comparison box (Science Gap) */
.gp-compare3 { display: flex; border-radius: 20px; overflow: hidden; background: var(--white); }
.gp-compare3__col { flex: 1; padding: 50px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; border-right: 1px solid var(--gold); }
.gp-compare3__col:last-child { border-right: none; }
.gp-compare3__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--gold); }
.gp-compare3__desc { font-size: 16px; line-height: 1.4; color: var(--dp); margin: 0; }
.gp-compare3__img { width: 100%; aspect-ratio: 370/172; object-fit: cover; border-radius: 16px; }

/* 4-column data comparison table (Why It Feels Different / Product Value) */
.gp-table { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1); }
.gp-table table { width: 100%; border-collapse: collapse; }
.gp-table th, .gp-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid #e8e7ea; font-size: 16px; color: var(--dp); }
.gp-table th { background: #f4f7f8; font-family: var(--sans); font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--graphite); border-bottom: 1px solid #e8e7ea; }
.gp-table td:first-child, .gp-table th:first-child { font-weight: 500; }
.gp-table tr:last-child td { border-bottom: none; }

/* Product-size CTA row with tag pill (Choose Your Product) */
.gp-ptag { display: inline-flex; align-items: center; border: 1px solid var(--gold); border-radius: 98px; padding: 10px 16px; background: linear-gradient(90deg, rgba(200,162,74,.16) 0%, rgba(200,162,74,0) 100%); font-family: var(--zh); font-weight: 700; font-size: 14px; color: var(--dp); margin-bottom: 22px; }
.gp-pcard { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.gp-pcard__head { width: 100%; }
.gp-pcard__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); }
.gp-pcard__body { display: flex; gap: 24px; width: 100%; }
.gp-pcard__img { width: 276px; height: 307px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.gp-pcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gp-pcard__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; color: var(--dp); line-height: 1.35; }
.gp-pcard__list svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
/* margin-top: auto pushes the CTA to the bottom of the card regardless of how much shorter
   this card's content is than its sibling's — otherwise CSS Grid stretches the shorter card
   to match the taller one's height, and plain flexbox leaves that extra space AFTER the button
   (dead space below it) instead of docking the button to the bottom, so the two cards' CTAs
   end up at different heights. */
.gp-pcard .gp-pill, .gp-pcard .gp-pill--white { align-self: center; margin-top: auto; }

@media (max-width: 1100px) {
  .gp-bhero__panel, .gp-tint-panel { padding: 56px 40px; }
}
@media (max-width: 900px) {
  .gp-bhero__row, .gp-mission { grid-template-columns: 1fr; }
  .gp-bcard-grid--3, .gp-bcard-grid--4, .gp-bcard-grid--5 { grid-template-columns: 1fr 1fr; }
  .gp-why-grid { grid-template-columns: 1fr 1fr; }
  .gp-why-photo { min-height: 240px; }
  .gp-compare3 { flex-direction: column; }
  .gp-compare3__col { border-right: none; border-bottom: 1px solid var(--gold); }
  .gp-compare3__col:last-child { border-bottom: none; }
  .gp-pcard__body { flex-direction: column; }
  .gp-pcard__img { width: 100%; height: auto; aspect-ratio: 276/307; }
  .gp-vine { width: 320px; height: 310px; opacity: .6; }
}
/* Icon-in-circle + text, horizontal (Suitable Partners, Market Bridge cards) */
.gp-bcard--icon-row { flex-direction: row; align-items: flex-start; gap: 24px; }
.gp-bcard__icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gp-bcard__icon-circle svg { width: 24px; height: 24px; }
#hkWellnessBridge .gp-bcard__icon-circle { background: none; color: var(--gold); }

/* Video feature card (Media PR "Featured Report") */
.gp-video-card { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 24px; display: flex; align-items: center; box-shadow: 0 8px 14px rgba(44,33,67,.08); }
.gp-video-card__media { position: relative; flex: 1 1 50%; border-radius: 10px; overflow: hidden; aspect-ratio: 625/456; }
.gp-video-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gp-video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 14px rgba(200,162,74,.22); display: flex; align-items: center; justify-content: center; color: #fff; }
.gp-video-card__play svg { width: 28px; height: 28px; }
.gp-video-card__body { flex: 1 1 50%; padding: 30px; display: flex; flex-direction: column; gap: 36px; }
.gp-video-card__eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.gp-video-card__outlet { font-size: 16px; color: var(--graphite); margin-top: 8px; }
.gp-video-card__title { font-family: var(--zh); font-size: 24px; font-weight: 700; color: var(--dp); line-height: 1.3; margin: 16px 0; }
.gp-video-card__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; }
/* Sits below the card (not inside it, per Figma) — the card no longer carries its own CTAs. */
.gp-video-card__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* Numbered category card with "see more" link (Media Categories) */
.gp-catcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gp-catcard { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 24px; box-shadow: 0 1px 4px rgba(12,12,13,.1), 0 1px 4px rgba(12,12,13,.05); display: flex; flex-direction: column; gap: 18px; }
.gp-catcard__img { width: 100%; aspect-ratio: 577/250; object-fit: cover; border-radius: 8px; }
.gp-catcard__title { display: flex; align-items: center; gap: 8px; font-family: var(--zh); font-size: 24px; font-weight: 700; }
.gp-catcard__num { color: var(--gold); }
.gp-catcard__name { color: var(--dp); }
.gp-catcard__desc { font-size: 16px; color: var(--graphite); margin: 0; }
.gp-catcard__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--gold); font-size: 16px; text-decoration: none; }
.gp-catcard__link svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Card with its own inline CTA (Media - Partnership CTA) */
.gp-bcard__cta { margin-top: auto; align-self: flex-start; }

/* Application form (Partnership enquiry) */
.gp-form-card { background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 36px; max-width: 620px; margin: 0 auto; box-shadow: 0 16px 32px -4px rgba(12,12,13,.1), 0 4px 4px -4px rgba(12,12,13,.05); display: flex; flex-direction: column; gap: 24px; }
.gp-form__field { display: flex; flex-direction: column; gap: 12px; }
.gp-form__label { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--dp); }
.gp-form__input, .gp-form__select, .gp-form__textarea { border: 1px solid #e8e7ea; border-radius: 14px; padding: 18px 20px; font-family: var(--sans); font-size: 14px; color: var(--dp); background: var(--white); width: 100%; }
.gp-form__textarea { min-height: 100px; resize: vertical; font-family: var(--sans); }
.gp-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706880' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; }
.gp-form__note { text-align: center; font-size: 12px; font-style: italic; color: var(--graphite); margin: 0; }
.gp-form__submit { align-self: center; }

@media (max-width: 900px) {
  .gp-video-card { flex-direction: column; }
  .gp-video-card__media { width: 100%; aspect-ratio: 16/10; }
}
@media (max-width: 768px) {
  .gp-catcard-grid { grid-template-columns: 1fr; }
  /* Nav shrinks to 60px at this breakpoint (see .gp-nav__inner) — clearance follows it down. */
  .gp-bhero { padding-top: 84px; }
  .gp-article-hero-sec { padding-top: 84px; }
  .gp-bhero__panel, .gp-tint-panel { margin: 0 12px; padding: 40px 20px; }
  .gp-bcard-grid--2, .gp-bcard-grid--3, .gp-bcard-grid--4, .gp-bcard-grid--5, .gp-why-grid, .gp-table { grid-template-columns: 1fr; }
  .gp-table { overflow-x: auto; }
  .gp-table table { min-width: 640px; }
  .gp-trust-row__line { flex-wrap: wrap; row-gap: 10px; }
  .gp-numlist__row { flex-direction: column; text-align: center; gap: 16px; padding: 24px 12px; }
  .gp-quote-bar { flex-direction: column; gap: 10px; }
  .gp-quote-bar__icon { display: none; }
  .gp-vine { display: none; }
}

/* Social Responsibility (2.5) + Partnership/Distributor (2.6) mobile fixes —
   per Figma mobile frames, trust-tag rows drop to one tag per line (no
   divider/pairing), hero CTAs stack instead of wrapping, and 3+ card grids
   become a horizontal snap-scroll (Figma shows the next card peeking at the
   edge) instead of the generic full-width single-column stack. Scoped by
   section id since .gp-trust-row / .gp-bhero__ctas / .gp-bcard-grid /
   .gp-bcard--center are shared with unrelated sections on other pages. */
@media (max-width: 640px) {
  /* Sitewide H1 fix — .gp-bhero__h1 (brand/pdp/sci/pv/media/social/partner
     hero sections) and .gp-cathero__h1 (catalog hero) both clamp(28px,
     3.4vw,48px), which clamps to a flat 28px on any mobile-width viewport
     (3.4vw only exceeds 28px past ~823px) — noticeably smaller than the
     reference design. Same fix as .gp-hero__h1 (home hero) below: a
     deliberate fixed size instead of relying on the clamp's floor. */
  .gp-bhero__h1, .gp-cathero__h1 { font-size: 36px; }

  /* Home page — Brand Promise / Why It Works / Core Benefits / Science & Trust
     Proof: the older sitewide default for these shared grid classes just
     stacks 3/4-card rows to a single column (see .gp-source__cards etc. at
     900/768px above) — Figma's phone frame wants a horizontal snap-scroll for
     the fixed-count value-prop rows instead (Brand Promise, Why It Works,
     Science & Trust Proof's 5-item strip), matching the pattern already used
     for other pages' card rows. Core Benefits stays a single column but
     switches from centered to left-aligned card content. */
  #source .gp-source__cards {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: 28px;
  }
  #source .gp-src-card { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }
  /* CTA sits left-aligned under the card row, with real breathing room above
     it — the -4px margin the shared rule used to leave (meant only to
     absorb the scroll track's own 4px padding) collapsed the gap almost to
     zero, so the button crowded straight up against the cards. */
  #source .gp-source__cta { justify-content: flex-start; }

  #science .gp-sci__cards {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #science .gp-sci__card { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }

  /* Why It Works: the CTA lives in markup right after the checklist (before
     the photo and the 3 process cards), but Figma's mobile frame wants it
     last — under the photo AND the card row. The photo sits in the same
     .gp-sci__intro row as the text block, and the cards are a separate
     sibling of that row, so reaching "after both" needs two nested
     display:contents (intro row, then its text sub-block) to flatten label/
     heading/subtext/checklist/CTA/photo/cards into one orderable list on
     .gp-wrap (scoped to #science only — .gp-wrap is shared sitewide). */
  #science .gp-wrap { display: flex; flex-direction: column; }
  #science .gp-sci__intro { display: contents; }
  #science .gp-sci__intro-text { display: contents; }
  #science .gp-sci__intro-text > .gp-label,
  #science .gp-sci__intro-text > .gp-sci__h2,
  #science .gp-sci__intro-text > .gp-sci__sub,
  #science .gp-sci__intro-text > .gp-sci__checks { order: 1; }
  /* .gp-sci__intro's own margin-bottom (70px, meant to gap the intro row
     from the card row) doesn't apply once it's display:contents — a
     contents element renders no box, so its margin is discarded. Re-added
     directly on the photo, which now sits immediately before the cards. */
  #science .gp-sci__intro-media { order: 2; margin-bottom: 28px; }
  #science .gp-sci__cards { order: 3; }
  /* align-self: flex-start keeps the pill at its natural width instead of
     being stretched full-width by the new flex column's default stretch. */
  #science .gp-sci__intro-text > .gp-pill { order: 4; align-self: flex-start; margin-top: 28px; }

  /* justify-content:center from the base rule fights the horizontal scroll
     once the 5 cells (70% each) overflow the container — the flex line gets
     centered around the container's midpoint instead of starting flush
     left, leaving dead empty space before the first cell's content at
     scrollLeft:0. flex-start makes the first cell start at the true edge. */
  #clinical .gp-clin__strip {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; border-left: none; border-right: none;
  }
  #clinical .gp-clin__cell { flex: 0 0 70%; scroll-snap-align: start; border-right: 1px solid var(--mist); }

  /* Science & Trust Proof: heading/subtext/disclaimer/CTA left-aligned —
     text-align:left on the section cascades to the CTA pill too (it's an
     inline-flex element, so the parent's text-align controls it), the
     auto side-margins that centered the max-width heading/subtext/note
     blocks still need their own override since text-align doesn't touch
     block-level margin centering. */
  #clinical { text-align: left; }
  #clinical .gp-clin__label { justify-content: flex-start; }
  #clinical .gp-clin__h2, #clinical .gp-clin__sub, #clinical .gp-clin__note { margin-left: 0; margin-right: 0; }

  /* Core Benefits: cards go icon-left/text-right (row) instead of the
     desktop icon-on-top/centered stack, and the section head + CTA switch
     to left-aligned like every other home-section mobile override. */
  #benefits .gp-ben__card { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 20px; }
  #benefits .gp-ben__item-icon { margin-bottom: 0; }
  #benefits .gp-ben__item-title { margin-bottom: 8px; }
  #benefits .gp-benefits__head { text-align: left; margin-bottom: 32px; }
  #benefits .gp-ben__label { justify-content: flex-start; }
  #benefits .gp-ben__h2, #benefits .gp-ben__body { margin-left: 0; margin-right: 0; }
  #benefits .gp-ben__note { text-align: left; margin-left: 0; margin-right: 0; }
  #benefits .gp-source__cta { justify-content: flex-start; }

  /* Product Highlight: intro stays centered like the other home sections,
     and the 2-card product row already collapses to a single column via
     the shared 900px/768px rules — nothing to change.

     Who Is It For: heading/subtext/CTA switch to left-aligned, matching
     Brand Promise / Science & Trust Proof above. The person-row cards
     (row-style icon+text, not the icon-on-top teaser cards) already
     collapse to a single column via the shared 600px rule. */
  #audience .gp-aud__head { text-align: left; }
  #audience .gp-aud__label { justify-content: flex-start; }
  #audience .gp-aud__h2, #audience .gp-aud__sub { margin-left: 0; margin-right: 0; }
  #audience .gp-aud__cta { justify-content: flex-start; }

  /* Founder + Media Proof: the portrait (with quote overlay) sits before
     the label/heading in markup, but .gp-found__intro only stacks to a
     single column below 900px with no reorder, so the photo renders above
     the heading — pulled out of flow with display:contents and re-sequenced
     with order (same technique as #brandHero/#founderOrigin above) so the
     heading + subtext both introduce the photo instead of the subtext
     trailing after it. The CTA pair already stacks vertically via
     the generic .gp-found__ctas rule but centers each pill; switched to
     left-aligned to match the stacked CTA-pair convention used elsewhere
     (#brandHero, #pvHero, #mediaHero). */
  #founder .gp-found__intro-text { display: contents; }
  #founder .gp-label, #founder .gp-found__h2, #founder .gp-found__body { order: 1; }
  #founder .gp-found__portrait { order: 2; }
  #founder .gp-found__ctas { align-items: flex-start; }

  /* Platform/media badges: horizontal snap-scroll instead of the shared
     single-column stack, matching the Brand Promise / Why It Works / Science
     & Trust Proof card-row treatment above. */
  #founder .gp-found__plats {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px;
  }
  #founder .gp-fp { flex: 0 0 85%; scroll-snap-align: start; }
  #founder .gp-fp--wide { grid-column: auto; }

  #socialHero .gp-trust-row__line,
  #partnerHero .gp-trust-row__line { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 12px; }
  #socialHero .gp-trust-row__div,
  #partnerHero .gp-trust-row__div { display: none; }

  /* CTA pair lives inside the same .gp-reveal text block as the label/heading/
     trust-row in markup, but the pair needs to sit after the hero photo (last
     element) on mobile — pulled out of flow with display:contents and
     re-sequenced with order (same technique as #brandHero/#pvHero/#sciHero/
     #mediaHero above). */
  #socialHero .gp-bhero__row > .gp-reveal,
  #partnerHero .gp-bhero__row > .gp-reveal { display: contents; }
  #socialHero .gp-bhero__media,
  #partnerHero .gp-bhero__media { order: 2; }
  #socialHero .gp-bhero__ctas,
  #partnerHero .gp-bhero__ctas { order: 3; flex-direction: column; align-items: flex-start; }
  /* Same compounding-gap fix as #brandHero/#sciHero/#pvHero/#mediaHero: the
     row's 30px gap applies between every promoted item on top of its own
     margin. Panel's bottom padding trimmed too — nothing follows the CTAs
     inside it. */
  #socialHero .gp-bhero__row,
  #partnerHero .gp-bhero__row { row-gap: 12px; }
  #socialHero .gp-bhero__label,
  #partnerHero .gp-bhero__label { margin-bottom: 8px; }
  #socialHero .gp-bhero__h1,
  #partnerHero .gp-bhero__h1 { margin-bottom: 12px; }
  #socialHero .gp-bhero__sub,
  #partnerHero .gp-bhero__sub { margin-bottom: 0; }
  #socialHero .gp-trust-row,
  #partnerHero .gp-trust-row { margin-bottom: 0; }
  #socialHero .gp-bhero__panel,
  #partnerHero .gp-bhero__panel { padding-bottom: 16px; }

  #responsibleInnovation .gp-src-title,
  #qualitySafety .gp-src-title,
  #tcmEducation .gp-src-title,
  #suitablePartners .gp-src-title,
  #whatWeProvide .gp-src-title,
  #productMarketFit .gp-src-title,
  #applicationForm .gp-src-title { font-size: 28px; }

  /* Figma centers these section intros on desktop but left-aligns them on
     mobile (Responsible Innovation / Suitable Partners / Product & Market
     Fit / Application Form all switch out of the desktop centered layout). */
  #responsibleInnovation .gp-center-intro,
  #suitablePartners .gp-center-intro,
  #productMarketFit .gp-center-intro,
  #applicationForm .gp-center-intro { text-align: left; }
  #responsibleInnovation .gp-center-intro__label,
  #suitablePartners .gp-center-intro__label,
  #productMarketFit .gp-center-intro__label,
  #applicationForm .gp-center-intro__label { justify-content: flex-start; }

  /* Bottom single-CTA row: centered on desktop, left-aligned on mobile in Figma. */
  #responsibleInnovation .gp-cta-row,
  #qualitySafety .gp-cta-row,
  #tcmEducation .gp-cta-row,
  #hkWellnessBridge .gp-cta-row,
  #productMarketFit .gp-cta-row { justify-content: flex-start; }
  #qualitySafety .gp-center-text { text-align: left; }

  #responsibleInnovation .gp-bcard-grid,
  #tcmEducation .gp-bcard-grid,
  #hkWellnessBridge .gp-bcard-grid,
  #suitablePartners .gp-bcard-grid,
  #productMarketFit .gp-bcard-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #responsibleInnovation .gp-bcard,
  #tcmEducation .gp-bcard,
  #hkWellnessBridge .gp-bcard,
  #suitablePartners .gp-bcard,
  #productMarketFit .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }

  #journalPathway .gp-step-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #journalPathway .gp-step-card { flex: 0 0 85%; scroll-snap-align: start; min-height: auto; padding: 20px; }

  #responsibleInnovation .gp-bcard__title,
  #tcmEducation .gp-bcard__title,
  #hkWellnessBridge .gp-bcard__title,
  #qualitySafety .gp-bcard__title,
  #suitablePartners .gp-bcard__title,
  #whatWeProvide .gp-bcard__title,
  #productMarketFit .gp-bcard__title { font-size: 18px; }

  /* Quality & Safety / What We Provide: Figma keeps these as a full-width
     icon-left row list on mobile, not the centered icon-on-top card used
     on desktop. */
  #qualitySafety .gp-bcard-grid,
  #whatWeProvide .gp-bcard-grid { gap: 14px; }
  #qualitySafety .gp-bcard--center,
  #whatWeProvide .gp-bcard--center {
    flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 20px;
  }
  #qualitySafety .gp-bcard--center .gp-bcard__icon,
  #whatWeProvide .gp-bcard--center .gp-bcard__icon { width: 36px; height: 36px; }

  /* Quality & Safety cards resized smaller — the 36px icon + 16px gap left
     too little room for the text column, so titles like "香港製造" were
     wrapping mid-word instead of fitting on one line. */
  #qualitySafety .gp-bcard--center { padding: 14px; gap: 12px; }
  #qualitySafety .gp-bcard--center .gp-bcard__icon { width: 28px; height: 28px; }
  #qualitySafety .gp-bcard__title { font-size: 15px; }
  #qualitySafety .gp-bcard__desc { font-size: 13px; }

  /* Figma's mobile crops use a 14px radius across the board (vs. 24px on desktop). */
  #qualitySafety .gp-source__intro-media,
  #tcmEducation .gp-source__intro-media,
  #whatWeProvide .gp-source__intro-media { border-radius: 14px; }

  /* Figma's mobile photo crop uses a 14px radius (vs. 24px on desktop) across
     all three .gp-bhero__media instances on these two pages. HK Bridge's
     Figma photo is also a wide landscape crop (350/232) rather than the
     near-square 588/540 default the other two heroes already match.
     Rounding applied directly to the <img> too (not just its container) —
     same fix as #mediaHero: relying on the container's overflow:hidden
     alone wasn't visibly rounding the photo. */
  #socialHero .gp-bhero__media,
  #partnerHero .gp-bhero__media,
  #hkWellnessBridge .gp-bhero__media { border-radius: 14px; }
  #socialHero .gp-bhero__media img,
  #partnerHero .gp-bhero__media img,
  #hkWellnessBridge .gp-bhero__media img { border-radius: 14px; }
  #hkWellnessBridge .gp-bhero__media img { aspect-ratio: 350/232; }

  /* Application form card stacks inside the already-padded .gp-bhero__panel
     on mobile — its own 36px padding on top of that crushes the field
     width well below what Figma shows, so it shrinks to match. */
  #applicationForm .gp-form-card { padding: 24px 18px; }
  /* Field labels shrunk slightly so longer merchant-configured label text
     has a better chance of fitting on one line instead of wrapping.
     Submit button and disclaimer switch from centered (desktop) to
     left-aligned, matching every other CTA/disclaimer pair on mobile. */
  #applicationForm .gp-form__label { font-size: 13px; }
  #applicationForm .gp-form__submit { align-self: flex-start; }
  #applicationForm .gp-form__note { text-align: left; }

  /* Brand Story (2.1) mobile fixes — per Figma's two phone frames:
     - Hero/Daily Wellness gradient panel + Problem/Mission tint panel go
       edge-to-edge (no rounded corners / side margin) instead of the
       desktop inset panel.
     - Section headings step to a flat 28px instead of the clamp's lower bound.
     - Hero/Daily Wellness/Why GINPACT CTA pills stack instead of sitting
       side by side or centered.
     - Hero/Daily Wellness photo crops to a landscape strip instead of the
       desktop near-square ratio.
     - Hero: the photo sits between the intro copy and the CTAs, but the
       CTAs live inside the same text block in markup — pulled out of flow
       with display:contents and re-sequenced with order to match.
     - Founder: photo moves after the intro line, before the body
       copy/quote/CTA (same technique, needs the .gp-source__intro-lede
       hook added in the template to tell the intro line apart from body1/2).
     - Mission: photo/quote block leads, the 3 mission items follow —
       source order is reversed from Figma.
     - Belief row photos + Why GINPACT photos crop landscape instead of the
       desktop ratio.
     - Problem cards + Daily Wellness badges become horizontal snap-scroll,
       the same treatment already used for other brand pages above.
     - Problem/Mission closing quote bar stays horizontal with visible
       icons — the generic .gp-quote-bar rule above stacks + hides icons,
       which doesn't match this page's phone frames.
     - Problem/Belief/Mission/Why GINPACT intros switch from centered to
       left-aligned like every other section-intro on the site (moved from
       inline centering to the shared .gp-center-intro class in the
       template so the standard override below can reach them).
     - Belief's single CTA also drops the desktop-centered .gp-source__cta
       default to match the page's other left-aligned mobile CTAs.
     - Belief rows: the shared 768px breakpoint stacks each row to a single
       column with the photo first in source order, which puts it above
       the row's own number/title — reordered so the photo trails instead.
     Scoped by section id since gp-bhero__panel / gp-tint-panel /
     gp-bhero__ctas / gp-source__cta / gp-src-title / gp-quote-bar /
     gp-bcard-grid / gp-center-intro / gp-numlist__row are shared with
     unrelated sections on other pages. */
  #brandHero .gp-bhero__panel,
  #brandDailyWellness .gp-bhero__panel,
  #brandProblem .gp-tint-panel,
  #brandMission .gp-tint-panel { margin: 0; border-radius: 0; padding: 60px 20px; }

  #founderOrigin .gp-src-title,
  #brandProblem .gp-src-title,
  #brandBelief .gp-src-title,
  #brandMission .gp-src-title,
  #brandWhyGinpact .gp-src-title { font-size: 28px; }

  #brandProblem .gp-center-intro,
  #brandBelief .gp-center-intro,
  #brandMission .gp-center-intro,
  #brandWhyGinpact .gp-center-intro { text-align: left; }
  #brandProblem .gp-center-intro__label,
  #brandBelief .gp-center-intro__label,
  #brandMission .gp-center-intro__label,
  #brandWhyGinpact .gp-center-intro__label { justify-content: flex-start; }

  #brandHero .gp-bhero__ctas,
  #brandDailyWellness .gp-bhero__ctas,
  #brandWhyGinpact .gp-source__cta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
  #brandBelief .gp-source__cta { justify-content: flex-start; }

  #brandHero .gp-bhero__media img,
  #brandDailyWellness .gp-bhero__media img { aspect-ratio: 350/232; border-radius: 14px; }

  #brandHero .gp-bhero__row > .gp-reveal { display: contents; }
  #brandHero .gp-bhero__media { order: 2; }
  #brandHero .gp-bhero__ctas { order: 3; }
  /* The text block's own display:contents promotes label/h1/sub/CTAs into
     the row's grid directly, so the row's 30px gap now applies between
     EVERY one of them too, on top of each element's own margin — the two
     stack instead of collapsing, compounding into a much bigger gap than
     any single value suggests. Tightening the grid gap plus trimming the
     redundant per-element margins brings it down to one consistent, modest
     rhythm instead of removing the spacing altogether. */
  #brandHero .gp-bhero__row { row-gap: 10px; }
  #brandHero .gp-bhero__label { margin-bottom: 8px; }
  #brandHero .gp-bhero__h1 { margin-bottom: 12px; }
  #brandHero .gp-bhero__sub { margin-bottom: 0; }

  /* The "distorted" layout was this: #founderOrigin .gp-source__intro sets
     an unconditional (no media query) grid-template-columns: 2fr 3fr for
     desktop's photo/text ratio. That's more specific (id + class) than the
     shared mobile rule that collapses .gp-source__intro to a single column,
     so the desktop 2-column ratio was winning even on mobile — every element
     below was rendering squeezed into one of two narrow columns instead of
     stacking full-width. Same specificity here, but later in the
     stylesheet + the media query condition holds, so this wins instead.
     display:flex (not grid) for the promoted reorder below sidesteps a
     separate reliability issue where `order` on display:contents-promoted
     children isn't consistently honored inside CSS Grid. */
  /* align-items: stretch overrides the base rule's align-items: center
     (meant for vertically centering the desktop 2-column grid) — inherited
     unchanged into this flex conversion, it was centering every promoted
     item HORIZONTALLY instead (align-items acts on the cross axis, which is
     horizontal once flex-direction is column), which is why the label and
     heading were rendering centered while the long, naturally wide
     paragraphs looked unaffected. Stretch makes every block-level item full
     width (normal behavior); the CTA pill opts back out via align-self so
     it doesn't get stretched into a full-width button.
     row-gap replaces the un-overridden 30px from the base rule — that was
     stacking on top of each element's own inline margin (margins don't
     collapse between flex items), compounding into oversized gaps; 16px
     alone now handles spacing around the photo (which has no margin of its
     own), and the liquid template's inline margins were trimmed to match. */
  #founderOrigin .gp-source__intro { grid-template-columns: 1fr; display: flex; flex-direction: column; align-items: stretch; row-gap: 16px; }
  #founderOrigin .gp-source__intro-text { display: contents; }
  #founderOrigin .gp-source__intro-media { order: 2; }
  #founderOrigin .gp-source__intro-text .gp-label,
  #founderOrigin .gp-source__intro-text .gp-src-title,
  #founderOrigin .gp-source__intro-lede { order: 1; }
  #founderOrigin .gp-source__sub:not(.gp-source__intro-lede),
  #founderOrigin .gp-source__intro-text .gp-quote-bar,
  #founderOrigin .gp-source__intro-text .gp-pill { order: 3; }
  #founderOrigin .gp-source__intro-text .gp-pill { align-self: flex-start; }
  /* Trims the paragraphs'/quote-bar's own inline margin-bottom (desktop
     values, kept as-is there) so they don't ALSO stack on top of the row's
     new 16px gap on mobile — !important is needed since inline style="
     beats a plain class selector regardless of source order. */
  #founderOrigin .gp-source__intro-text .gp-source__sub { margin-bottom: 4px !important; }
  #founderOrigin .gp-source__intro-text .gp-quote-bar { margin-bottom: 4px !important; }

  #brandMission .gp-mission__media { order: -1; }
  /* The 3 mission items were one continuous bordered list box (divider
     lines between rows) — breaks apart into individually-carded,
     horizontally scrollable items instead, matching the other home/PDP/
     catalog card-row scrollers on the site. */
  #brandMission .gp-mission__col {
    border: none; border-radius: 0; overflow-x: auto; overflow-y: visible;
    flex-direction: row; gap: 16px; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  #brandMission .gp-mission__item {
    border: 1px solid rgba(23,21,60,.11); border-radius: 20px;
    flex: 0 0 85%; scroll-snap-align: start; padding: 24px;
  }

  /* Photo leads (matches its natural DOM position — first child of the row)
     followed by the number/title/desc; a previous version of this rule
     explicitly reordered the photo to trail instead, which is the opposite
     of what's wanted, so that override is just removed rather than
     reversed. align-items: stretch overrides the base rule's align-items:
     center (meant for vertically centering the desktop horizontal row) —
     once the shared 768px rule flips this row to flex-direction: column,
     that same property centers items HORIZONTALLY instead, which is why
     the "01" number (a short, tightly-sized flex item) was rendering
     centered even with text-align: left set — text-align only controls
     inline content inside a box, not the flex item's own box position. */
  #brandBelief .gp-numlist__row { text-align: left; align-items: stretch; }
  #brandBelief .gp-numlist__img { width: 100%; height: auto; aspect-ratio: 350/200; }

  .gp-why-photo { min-height: 0; }
  .gp-why-photo img { aspect-ratio: 350/232; }
  /* Both Why GINPACT photos were still getting cropped by the fixed
     350/232 ratio above (a mismatch with the source photos' own
     proportions) — dropping the fixed ratio and sizing height to the
     image's natural proportions shows the complete photo, uncropped. */
  #brandWhyGinpact .gp-why-photo img { aspect-ratio: auto; height: auto; object-fit: contain; }
  /* Swap in the dedicated mobile photos (see brand-why-ginpact.liquid /
     .gp-why-photo__mobile) instead of the desktop crop. */
  #brandWhyGinpact .gp-why-photo__desktop { display: none; }
  #brandWhyGinpact .gp-why-photo__mobile { display: block; }
  /* Bigger CTA pills — higher specificity than the generic small-phone
     shrink rules (.gp-pill at 480px/360px) so this wins regardless of
     viewport width within this breakpoint. */
  #brandWhyGinpact .gp-source__cta .gp-pill { font-size: 16px; padding: 14px 14px 14px 26px; }
  #brandWhyGinpact .gp-source__cta .gp-pill__icon { width: 40px; height: 40px; }

  #brandProblem .gp-bcard-grid,
  #brandDailyWellness .gp-bcard-grid--5 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #brandProblem .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }
  #brandProblem .gp-bcard__title { font-size: 18px; }
  #brandDailyWellness .gp-bcard--center { flex: 0 0 70%; scroll-snap-align: start; padding: 20px; }

  #brandProblem .gp-quote-bar,
  #brandMission .gp-mission__quote {
    flex-direction: row; align-items: center; gap: 12px; padding: 16px 12px; text-align: center;
  }
  #brandProblem .gp-quote-bar__icon,
  #brandMission .gp-mission__quote .gp-quote-bar__icon { display: block; width: 27px; height: 27px; }
  #brandProblem .gp-quote-bar p,
  #brandMission .gp-mission__quote p { font-size: 12px; }

  /* Product Value (2.3) mobile fixes — per Figma's phone frame:
     - Hero: trust badges drop the desktop divider/pairing to one per line;
       CTAs stack instead of wrapping; the product photo sits between the
       trust badges and the CTAs, but the CTAs live inside the same text
       block in markup — pulled out of flow with display:contents and
       re-sequenced with order (same technique as #brandHero above).
     - Everyday Need / Why It Feels Different / How To Take card rows become
       a horizontal snap-scroll (Figma shows the next card peeking at the
       edge) instead of the generic full-width single-column stack.
     - Choose Your Product: card content is left-aligned on mobile instead
       of the desktop centered layout — only the CTA pill needs the
       override since the tag/title/checklist already stretch full-width.
     Scoped by section id since gp-trust-row / gp-bhero__ctas / gp-bcard-grid
     / gp-pcard are shared with unrelated sections on other pages. */
  #pvHero .gp-trust-row__line { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 12px; }
  #pvHero .gp-trust-row__div { display: none; }
  #pvHero .gp-bhero__row > .gp-reveal { display: contents; }
  #pvHero .gp-bhero__media { order: 2; }
  #pvHero .gp-bhero__media img { border-radius: 14px; }
  #pvHero .gp-bhero__ctas { order: 3; flex-direction: column; align-items: flex-start; }
  /* The text block's display:contents promotes label/h1/sub/trust-row into
     the row's grid directly, so the row's 30px gap applies between EVERY
     one of them too, stacking on top of each element's own margin (margins
     don't collapse between grid items) — compounding into an oversized
     gap. Tightened to one consistent, modest rhythm instead. Panel's
     bottom padding also trimmed — nothing follows the CTAs inside this
     panel, so the full 40px (plus the gold-tinted gradient going more
     solid near 100%) was reading as a big empty tinted block before the
     next section. */
  #pvHero .gp-bhero__row { row-gap: 12px; }
  #pvHero .gp-bhero__label { margin-bottom: 8px; }
  #pvHero .gp-bhero__h1 { margin-bottom: 12px; }
  #pvHero .gp-bhero__sub { margin-bottom: 0; }
  #pvHero .gp-trust-row { margin-bottom: 0; }
  #pvHero .gp-bhero__panel { padding-bottom: 16px; }

  /* How To Take: the photo was rendering flush against the panel's edges
     (no inset, straight corners butting up against the panel's own rounded
     ones) instead of sitting padded inside it like the heading/subtext
     above it — explicit width/margin reset plus re-asserting the panel's
     own rounding/padding here guarantees the photo respects the same inset
     as the text, regardless of what upstream rule was letting it bleed. */
  #howToTake .gp-bhero__panel { border-radius: 24px; margin: 0 12px; padding: 40px 20px; }
  #howToTake .gp-bhero__media { width: 100%; margin: 0; }

  #everydayNeed .gp-bcard-grid--4,
  #whyDifferent .gp-bcard-grid--3,
  #howToTake .gp-bcard-grid--4 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #everydayNeed .gp-bcard-grid--4 .gp-bcard,
  #whyDifferent .gp-bcard-grid--3 .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }
  #howToTake .gp-bcard-grid--4 .gp-bcard { flex: 0 0 71%; scroll-snap-align: start; padding: 20px; }

  #everydayNeed .gp-bcard__title,
  #whyDifferent .gp-bcard__title { font-size: 18px; }
  #everydayNeed .gp-bcard__desc,
  #whyDifferent .gp-bcard__desc { font-size: 14px; }
  #everydayNeed .gp-bcard__icon,
  #howToTake .gp-bcard__icon { width: 36px; height: 36px; }

  #chooseProduct .gp-pcard { align-items: flex-start; }
  #chooseProduct .gp-pcard .gp-pill,
  #chooseProduct .gp-pcard .gp-pill--white { align-self: flex-start; }

  /* Everyday Need / Why It Feels Different / Choose Your Product section
     intros are hard-coded inline text-align:center in these templates (not
     the shared .gp-center-intro class used elsewhere), so left-aligning them
     to match the mobile intro treatment used across the rest of the site
     needs !important to beat the inline style's specificity. */
  #everydayNeed [style*="text-align:center"],
  #whyDifferent [style*="text-align:center"],
  #chooseProduct [style*="text-align:center"] { text-align: left !important; }
  /* Intro block's inline margin-bottom:50px (desktop value) trimmed for a
     tighter mobile gap before the card row — !important needed to beat the
     inline style regardless of selector specificity. */
  #whyDifferent [style*="margin:0 auto 50px"] { margin-bottom: 28px !important; }
  #everydayNeed .gp-label[style*="justify-content:center"],
  #whyDifferent .gp-label[style*="justify-content:center"],
  #chooseProduct .gp-label[style*="justify-content:center"] { justify-content: flex-start !important; }

  /* Media PR (2.4) mobile fixes — per Figma's phone frame:
     - Hero: same trust-badge/CTA treatment as #pvHero above.
     - Featured Report: the video card shrinks to Figma's tighter mobile
       padding/photo ratio, and its headline/outlet/desc step down to
       Figma's smaller mobile sizes; the CTAs stack.
     - Media Categories cards become the same horizontal snap-scroll used
       for other fixed-count card rows, instead of the shared
       .gp-catcard-grid single-column stack (that shared 1-column rule is
       still correct for other pages that reuse the class).
     - Featured Report / Media Categories / Partnership CTA section intros
       get the same inline-style left-align override as above.
     - Partnership CTA cards become the same horizontal snap-scroll used
       elsewhere for 3-card grids.
     Scoped by section id since gp-trust-row / gp-bhero__ctas / gp-video-card
     / gp-bcard-grid / gp-catcard-grid are shared with unrelated sections on
     other pages. */
  #mediaHero .gp-trust-row__line { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 12px; }
  #mediaHero .gp-trust-row__div { display: none; }
  #mediaHero .gp-bhero__row > .gp-reveal { display: contents; }
  #mediaHero .gp-bhero__media { order: 2; }
  #mediaHero .gp-bhero__ctas { order: 3; flex-direction: column; align-items: flex-start; }
  /* Same compounding-gap fix as #brandHero/#sciHero/#pvHero: the row's 30px
     gap applies between every promoted item on top of its own margin.
     Panel's bottom padding trimmed too (nothing follows the CTAs inside
     it), and the photo gets its own explicit rounding — relying on the
     media div's container overflow:hidden wasn't visibly rounding it. */
  #mediaHero .gp-bhero__row { row-gap: 12px; }
  #mediaHero .gp-bhero__label { margin-bottom: 8px; }
  #mediaHero .gp-bhero__h1 { margin-bottom: 12px; }
  #mediaHero .gp-bhero__sub { margin-bottom: 0; }
  #mediaHero .gp-trust-row { margin-bottom: 0; }
  #mediaHero .gp-bhero__panel { padding-bottom: 16px; }
  #mediaHero .gp-bhero__media img { border-radius: 14px; }

  /* Media Categories cards were full desktop size (24px padding, 24px
     title, tall 577/250 image) stacked full-width on mobile — resized down
     to a more compact mobile card. */
  #mediaCategories .gp-catcard { padding: 16px; gap: 12px; }
  #mediaCategories .gp-catcard__img { aspect-ratio: 350/150; }
  #mediaCategories .gp-catcard__title { font-size: 18px; }
  #mediaCategories .gp-catcard__desc { font-size: 14px; }
  #mediaCategories .gp-catcard__link { font-size: 14px; }
  #mediaCategories .gp-catcard__link svg { width: 16px; height: 16px; }

  #featuredReport .gp-video-card { padding: 12px 12px 24px; gap: 18px; }
  #featuredReport .gp-video-card__media { aspect-ratio: 325/238; border-radius: 8px; }
  #featuredReport .gp-video-card__body { padding: 0 7px; gap: 16px; }
  #featuredReport .gp-video-card__outlet { font-size: 13px; }
  #featuredReport .gp-video-card__title { font-size: 18px; margin: 0 0 14px; }
  #featuredReport .gp-video-card__desc { font-size: 14px; }
  #featuredReport .gp-video-card__ctas { flex-direction: column; align-items: flex-start; }

  /* Media Categories' 4 cards stay a single vertical column on mobile —
     confirmed directly against the Figma mobile frame (node 1426:37070):
     each card spans the full 350px row width, stacked top-to-bottom, not a
     horizontal-scroll row like the fixed-count value-prop card rows elsewhere. */

  #mediaPartnershipCta .gp-bcard-grid--3 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #mediaPartnershipCta .gp-bcard-grid--3 .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }
  #mediaPartnershipCta .gp-bcard__title { font-size: 18px; }
  #mediaPartnershipCta .gp-bcard__icon { width: 36px; height: 36px; }

  #featuredReport [style*="text-align:center"],
  #mediaCategories [style*="text-align:center"],
  #mediaPartnershipCta [style*="text-align:center"] { text-align: left !important; }
  #featuredReport .gp-label[style*="justify-content:center"],
  #mediaCategories .gp-label[style*="justify-content:center"],
  #mediaPartnershipCta .gp-label[style*="justify-content:center"] { justify-content: flex-start !important; }

  /* PDP (Product Detail Page) + Catalog (2.7/2.8) re-audit mobile fixes — the
     earlier pass on this page pair only fixed the gallery thumbnail-strip
     sizing bug below and left the rest on the older sitewide single-column
     default:
     - PDP Hero: the gallery sits before the label/H1 in markup, but
       .gp-bhero__row only stacks to a single column below 900px with no
       reorder, so the photo renders above the heading — pulled out of flow
       with display:contents and re-sequenced with order (same technique as
       #brandHero/#pvHero above) so the heading leads, the gallery follows,
       and the add-to-cart/view-options CTA pair moves to the end.
     - PDP Fermentation & Science: both split rows already stack heading-first
       (the shared .gp-splitrow--reverse RTL trick is undone at 900px,
       restoring source order) — only the closing single CTA needed its
       inline centering left-aligned.
     - PDP Key Features / Product Specs: intros and single-CTA rows are
       hard-coded inline text-align:center / justify-content:center (not the
       shared .gp-center-intro class), needing !important to beat the inline
       style, same as #everydayNeed/#chooseProduct above. Key Features' 6
       cards (split across two 3-card rows in markup) become horizontal
       snap-scroll like the other fixed-count value-prop rows on the site.
     - PDP Designed For: intro/CTA center via .gp-aud__head/.gp-aud__cta
       (real classes, not inline styles) — left-aligned like everywhere else.
       Its 4 person cards are already the icon-left row style (like Quality &
       Safety/What We Provide above), so they correctly stay a stacked list,
       not horizontal scroll.
     - PDP Knowledge Center / Complete Routine: already left-aligned with the
       heading already ahead of any image in source order — nothing to fix.
     - Catalog Hero: the full-bleed photo sits before the label/H1 in markup
       and only drops out of absolute positioning below 900px with no
       reorder, so it renders above the heading — same display:contents +
       order technique; collapsing .gp-cathero__content loses its own padding
       box, so that spacing is replicated on the promoted text nodes instead.
       The CTA pair moves to the end, after the photo.
     - Catalog Product Feature (rendered twice as product1/product2) has no
       section id in the template, so one is added purely to scope this fix
       (same {{ section.id }}-suffixed pattern blog-newsletter.liquid already
       uses for the same reason) — not a reorder of existing content. Both
       rows already stack heading-first; only the CTA pair needed pulling out
       from the text block to sit after the photo.
     - Catalog Choose Product (#chooseProduct) is already fully covered by
       the #chooseProduct rules above — that id is shared with
       pv-choose-product.liquid, and the existing left-aligned intro/card-CTA
       overrides apply here unchanged. Its 2-card comparison intentionally
       stays stacked (not a fixed-count 3-5 row) — nothing left to do.
     - Catalog Quality Assurance / Core Benefits: same inline-style left-align
       treatment as Key Features above; their 5-badge and 4-benefit rows
       become horizontal snap-scroll like the equivalent rows elsewhere.
     - Catalog Final CTA: split row already stacks heading-first; its 5-item
       trust row becomes horizontal snap-scroll, and its primary/secondary
       CTA pair (already the last element) stacks vertically instead of
       staying centered.
     Scoped by section id since gp-bhero__row / gp-bhero__ctas / gp-splitrow /
     gp-bcard-grid / gp-bcard--center / gp-aud__head / gp-aud__cta /
     gp-cathero / gp-label are shared with unrelated sections on other pages. */
  #pdpHero .gp-bhero__row > .gp-reveal { display: contents; }
  /* Qty stepper escapes the add-to-cart form to sit beside the price, and
     the two CTA pills escape the ctas wrapper to sit beside each other —
     both via a 2-column (1fr / auto) grid template + explicit order, no DOM
     changes, so this is pure CSS: desktop's markup and layout are untouched. */
  #pdpHero .gp-bhero__ctas { display: contents; }
  #pdpHero .gp-pdp-add-form { display: contents; }
  #pdpHero .gp-bhero__row {
    grid-template-columns: 1fr auto;
    row-gap: 12px; column-gap: 12px;
  }
  /* Everything except the price/qty pair and the CTA pair spans both
     columns, i.e. gets its own full-width row. */
  #pdpHero .gp-label,
  #pdpHero .gp-bhero__h1,
  #pdpHero .gp-pdp-gallery__main,
  #pdpHero .gp-pdp-gallery__thumbs-row,
  #pdpHero .gp-bhero__sub,
  #pdpHero .gp-rating,
  #pdpHero .gp-source__sub,
  #pdpHero .gp-size-toggle,
  #pdpHero .gp-chip-row { grid-column: 1 / -1; }

  #pdpHero .gp-label { order: 1; }
  #pdpHero .gp-bhero__label { margin-bottom: 8px; }
  #pdpHero .gp-bhero__h1 { order: 2; margin-bottom: 0; }
  #pdpHero .gp-pdp-gallery__main,
  #pdpHero .gp-pdp-gallery__thumbs-row { order: 3; }
  #pdpHero .gp-bhero__sub { order: 4; margin-bottom: 0; }
  #pdpHero .gp-rating { order: 5; margin: 0; }
  #pdpHero .gp-source__sub { order: 6; }
  #pdpHero .gp-size-toggle { order: 7; margin: 0; }
  /* Price lands in column 1 (1fr, flexible) — fine for a text line. Qty
     lands in column 2 (auto) right beside it. justify-self:start keeps the
     stepper at its natural width instead of stretching to fill the column
     (the column's auto width is shared with row 2 below, so without this it
     could stretch to match whichever of qty/secondary-CTA is wider). */
  #pdpHero .gp-pdp-price { order: 8; margin: 0; }
  #pdpHero .gp-pdp-qty { order: 8; justify-self: start; }
  #pdpHero .gp-chip-row { order: 9; margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  /* Same pairing for the two CTA pills — justify-self:start on the button in
     column 1 stops it stretching to fill the flexible track. The :not()
     fallback covers the no-product-linked state, where the primary CTA is a
     plain <a> instead of the #pdpAddToCart submit button. */
  #pdpHero #pdpAddToCart,
  #pdpHero .gp-bhero__ctas > a:not(.gp-pill--white) { order: 10; justify-self: start; }
  #pdpHero #pdpBuyNow,
  #pdpHero .gp-bhero__ctas > a.gp-pill--white { order: 11; justify-self: start; }

  #pdpFermentation [style*="justify-content:center"] { justify-content: flex-start !important; }

  #pdpKeyFeatures [style*="text-align:center"],
  #pdpProductSpecs [style*="text-align:center"] { text-align: left !important; }
  #pdpKeyFeatures [style*="justify-content:center"],
  #pdpProductSpecs [style*="justify-content:center"] { justify-content: flex-start !important; }

  /* 2 rows of 3 compact cards, no scrolling — overrides the shared 900/768px
     rules that would otherwise stack this to 1 or 2 columns. */
  #pdpKeyFeatures .gp-bcard-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #pdpKeyFeatures .gp-bcard-grid--3 .gp-bcard { padding: 14px; gap: 12px; }
  #pdpKeyFeatures .gp-bcard-grid--3 .gp-bcard__icon { width: 36px; height: 36px; }
  #pdpKeyFeatures .gp-bcard-grid--3 .gp-bcard__title { font-size: 15px; }
  #pdpKeyFeatures .gp-bcard-grid--3 .gp-bcard__desc { font-size: 12.5px; line-height: 1.4; }

  #pdpDesignedFor .gp-aud__head { text-align: left; }
  #pdpDesignedFor .gp-aud__head .gp-label[style*="justify-content:center"] { justify-content: flex-start !important; }
  #pdpDesignedFor .gp-aud__cta { justify-content: flex-start; }

  #catalogHero { display: flex; flex-direction: column; }
  #catalogHero .gp-cathero__content { display: contents; }
  #catalogHero .gp-label { padding: 32px 24px 0; }
  #catalogHero .gp-cathero__h1,
  #catalogHero .gp-cathero__sub { padding: 0 24px; }
  #catalogHero .gp-cathero__img { order: 2; }
  /* CTAs overlap the bottom of the photo (negative margin pulls them up
     over it) instead of sitting separately below it — later in paint order
     than the image, so they render on top with no z-index juggling needed.
     Row instead of column brings the two pills together side by side
     (wrapping to a 2nd line only if they don't fit), which also keeps the
     whole CTA block shorter so both pills land within the overlapped area
     instead of the second one spilling out below the photo into the plain
     page background. Bottom padding trimmed slightly for a tighter (not
     drastic) gap before the next section. */
  #catalogHero .gp-cathero__ctas { order: 3; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 24px 20px; margin-top: -60px; position: relative; }

  /* CTAs after the photo, mobile only. The CSS reorder-only approach
     (display:contents + order) proved unreliable here regardless of grid
     vs. flex, so the template now renders the CTA links twice (see
     catalog-product-feature.liquid) — once in their normal desktop spot,
     once again right after the photo — and this just toggles which copy is
     visible per breakpoint. Icons/chip-row are untouched. */
  #catalogProduct-product1 .gp-splitrow__ctas--desktop,
  #catalogProduct-product2 .gp-splitrow__ctas--desktop { display: none; }
  #catalogProduct-product1 .gp-splitrow__ctas--mobile,
  #catalogProduct-product2 .gp-splitrow__ctas--mobile { display: flex; flex-direction: column; align-items: flex-start; margin-top: 16px; }

  #catalogQuality [style*="text-align:center"],
  #catalogBenefits [style*="text-align:center"] { text-align: left !important; }
  #catalogQuality [style*="justify-content:center"] { justify-content: flex-start !important; }

  #catalogQuality .gp-bcard-grid--5 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #catalogQuality .gp-bcard--center { flex: 0 0 70%; scroll-snap-align: start; padding: 20px; }

  #catalogBenefits .gp-bcard-grid--4 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #catalogBenefits .gp-bcard-grid--4 .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }

  #catalogFinalCta .gp-bcard-grid--5 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #catalogFinalCta .gp-bcard--center { flex: 0 0 70%; scroll-snap-align: start; padding: 20px; }
  #catalogFinalCta .gp-bhero__ctas[style*="justify-content:center"] {
    flex-direction: column; align-items: flex-start; justify-content: flex-start !important;
  }
}

/* ════════════════════════════════════════════════════
   PDP + CATALOG PAGES — shared patterns
   Reused across "pdp" (Product Detail Page) and "Catalog"
════════════════════════════════════════════════════ */
.gp-splitrow { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.gp-splitrow--reverse { direction: rtl; }
.gp-splitrow--reverse > * { direction: ltr; }
.gp-splitrow__media { border-radius: 24px; overflow: hidden; }
.gp-splitrow__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 625/416; display: block; }
/* Catalog product-feature rows: tall pedestal product shots, not landscape lifestyle
   photos — cover-cropping them into the generic 625/416 box chops the top/bottom off. */
.gp-catalog-feature .gp-splitrow__media img { object-fit: contain; aspect-ratio: 4/5; }
.gp-catalog-feature-section + .gp-catalog-feature-section .gp-sect-pad--sm { padding-top: 0; }
.gp-splitrow__eyebrow { margin-bottom: 20px; display: inline-flex; }
.gp-splitrow__h2 { font-family: var(--zh); font-size: clamp(28px,3.4vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 0 0 20px; }
.gp-splitrow__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0 0 14px; }
.gp-splitrow__stat { font-family: var(--zh); font-weight: 700; color: var(--gold); font-size: 16px; margin: 6px 0 0; }
/* Duplicate mobile-only CTA copy (see catalog-product-feature.liquid) —
   hidden by default; shown only below the mobile breakpoint where the
   desktop copy hides instead (see #catalogProduct-product1/2 above). */
.gp-splitrow__ctas--mobile { display: none; }

.gp-pdp-gallery__main { border-radius: 24px; overflow: hidden; margin-bottom: 16px; }
.gp-pdp-gallery__main img { width: 100%; max-height: 520px; aspect-ratio: auto; object-fit: contain; display: block; transition: opacity .15s; }
.gp-pdp-gallery__thumbs-row { display: flex; align-items: center; gap: 10px; }
.gp-pdp-gallery__thumbs { display: flex; gap: 12px; width: 368px; max-width: 100%; overflow: hidden; }
.gp-pdp-gallery__thumb {
  width: 83px; height: 70px; padding: 0; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  border: 1.5px solid rgba(200,162,74,.35); transition: border-color .2s, opacity .2s;
}
.gp-pdp-gallery__thumb:hover { border-color: var(--gold); }
.gp-pdp-gallery__thumb--active { border-color: var(--gold); border-width: 2px; }
.gp-pdp-gallery__thumb[hidden] { display: none; }
.gp-pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-pdp-gallery__nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e2ddd0; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--dp);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.gp-pdp-gallery__nav:hover { border-color: var(--gold); color: var(--gold); }
.gp-pdp-gallery__nav svg { width: 16px; height: 16px; }
.gp-pdp-gallery__nav[hidden] { display: none; }

.gp-rating { display: flex; align-items: center; gap: 8px; margin: 14px 0 24px; }
.gp-rating__stars { display: flex; gap: 2px; color: var(--gold); }
.gp-rating__stars svg { width: 15px; height: 15px; }
.gp-rating__score { font-weight: 700; color: var(--gold); font-size: 14px; }
.gp-rating__count { color: var(--graphite); font-size: 14px; }

.gp-size-toggle { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.gp-size-opt { display: flex; align-items: center; gap: 12px; border: 1px solid #e8e7ea; border-radius: 98px; padding: 6px 6px 6px 20px; background: #fff; font-family: var(--zh); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--graphite); transition: border-color .2s, color .2s; }
.gp-size-opt:hover { border-color: rgba(200,162,74,.35); }
.gp-size-opt--active { border-color: rgba(200,162,74,.5); color: var(--dp); }
.gp-size-opt__thumb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(200,162,74,.08); flex-shrink: 0; }
.gp-size-opt__thumb img { width: 100%; height: 100%; object-fit: cover; }

.gp-chip-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 20px 0; }
.gp-chip { display: flex; align-items: center; gap: 10px; }
.gp-chip__icon { width: 36px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, rgba(220,182,111,.1) 0%, rgba(182,133,52,.1) 100%); border: 1px solid rgba(200,162,74,.18); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; overflow: hidden; }
.gp-chip__icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.gp-chip span { font-size: 15px; color: var(--dp); white-space: nowrap; }
.gp-chip-row__div { width: 1px; height: 26px; background: var(--mist); flex-shrink: 0; }

/* Wellness Journal hero topic pills: a 2-column list (3 over 2), not a wrapping
   row — CSS multicol balances the split and draws the column divider natively. */
#journalHero .gp-jhero__topics {
  display: block; column-count: 2; column-gap: 40px; column-rule: 1px solid var(--mist);
  margin: 24px 0 32px;
}
#journalHero .gp-jhero__topics .gp-chip { break-inside: avoid; margin-bottom: 20px; text-decoration: none; }
#journalHero .gp-jhero__topics .gp-chip-row__div { display: none; }

.gp-res-card__thumb { width: 96px; height: 96px; border-radius: 10px; border: 1px solid #e8e7ea; flex-shrink: 0; background: rgba(200,162,74,.05); object-fit: cover; }
.gp-res-card__meta { font-size: 14px; color: var(--graphite); margin: 4px 0 16px; }
.gp-res-card__meta span { color: var(--gold); font-weight: 600; }

/* Also always the first section on its page — same fixed-nav clearance as .gp-bhero above. */
.gp-cathero { position: relative; margin: 122px 20px 0; border-radius: 30px; overflow: hidden; }
.gp-cathero__img { width: 100%; aspect-ratio: 1400/735; object-fit: cover; display: block; }
.gp-cathero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 40%, rgba(255,255,255,0) 64%); }
.gp-cathero__content { position: absolute; top: 0; left: 0; height: 100%; width: 56%; display: flex; flex-direction: column; justify-content: center; padding: 0 60px; }
.gp-cathero__h1 { font-family: var(--zh); font-size: clamp(28px,3.4vw,48px); font-weight: 700; line-height: 1.2; color: var(--dp); letter-spacing: -.02em; margin: 20px 0 24px; }
.gp-cathero__sub { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0 0 32px; max-width: 480px; }
.gp-cathero__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Vertical section-padding utility — for PDP/Catalog sections whose <section>
   root IS .gp-wrap (no separate outer wrapper to hang padding on), so it
   can't be set inline without blocking the responsive cascade below. */
.gp-sect-pad { padding-top: 120px; padding-bottom: 120px; }
.gp-sect-pad--sm { padding-top: 80px; padding-bottom: 80px; }

@media (max-width: 900px) {
  .gp-splitrow, .gp-splitrow--reverse { grid-template-columns: 1fr; direction: ltr; }
  /* Nav is still 90px tall here (it only shrinks at 768px) — keep the same top clearance. */
  .gp-cathero { position: static; margin: 122px 12px 0; border-radius: 24px; }
  .gp-cathero__scrim { display: none; }
  .gp-cathero__content { position: static; width: auto; height: auto; padding: 32px 24px; }
  /* Taller box (was 4/3) for a bigger photo, and object-position shifted
     right so the right-hand product isn't clipped by the frame — the source
     photo's product grouping sits right-of-center, so a plain center crop
     (the default) pushes the taller box past the visible edge. */
  .gp-cathero__img { aspect-ratio: 1/1; object-position: 80% center; }
}
@media (max-width: 768px) {
  .gp-cathero { margin-top: 84px; }
  .gp-sect-pad { padding-top: 72px; padding-bottom: 72px; }
  .gp-sect-pad--sm { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 640px) {
  .gp-chip-row { flex-direction: column; align-items: flex-start; }
  .gp-chip-row__div { display: none; }
  /* Thumbs are fixed 83px + flex-shrink:0 for the desktop sliding-window strip —
     below ~516px the panel's content width can't fit 4 of them plus both nav
     buttons, and since the strip is overflow:hidden they'd just get silently
     clipped mid-thumbnail instead of shrinking. Let the row take up whatever
     space is left between the nav buttons, and let each thumb shrink together
     to fit it (flex-basis keeps them at the desktop 83px size — and single-
     fallback-thumb layouts from a narrow width — until there's genuinely not
     enough room). */
  .gp-pdp-gallery__thumbs { width: auto; flex: 1 1 0; min-width: 0; }
  .gp-pdp-gallery__thumb { width: auto; height: auto; flex: 0 1 83px; min-width: 0; aspect-ratio: 83/70; }
}
@media (max-width: 480px) {
  .gp-sect-pad { padding-top: 56px; padding-bottom: 56px; }
  .gp-sect-pad--sm { padding-top: 40px; padding-bottom: 40px; }
}

/* ════════════════════════════════════════════════════
   404 PAGE
   Full-viewport "wallpaper" hero: brand-color radial glows, faint ink-wash
   texture (reused from the homepage's Brand Promise section), corner vines
   (reused from the Brand pages) and a giant faint "404" watermark, styled
   after .gp-foot__wm-text's same reveal-through-low-opacity-text technique.
   ════════════════════════════════════════════════════ */
.gp-404 {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 160px 0 120px;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(200,162,74,.14) 0%, rgba(200,162,74,0) 55%),
    radial-gradient(120% 90% at 85% 100%, rgba(47,43,110,.10) 0%, rgba(47,43,110,0) 55%),
    var(--ivory);
  text-align: center;
}
.gp-404__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gp-404__wash { position: absolute; width: 640px; max-width: 60vw; opacity: .09; object-fit: contain; }
.gp-404__wash--1 { top: -8%; left: -10%; }
.gp-404__wash--2 { bottom: -12%; right: -8%; transform: scaleX(-1); }
.gp-404__num {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: var(--zh); font-weight: 700; font-size: clamp(200px, 38vw, 460px);
  line-height: 1; color: var(--dp); opacity: .05; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.gp-404__inner { position: relative; z-index: 1; max-width: 680px; }
.gp-404__eyebrow { justify-content: center; display: flex; margin-bottom: 20px; }
.gp-404__h1 { font-family: var(--zh); font-size: clamp(28px,3.6vw,48px); font-weight: 700; line-height: 1.25; color: var(--dp); letter-spacing: -.02em; margin-bottom: 20px; }
.gp-404__sub { font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 520px; margin: 0 auto 36px; }
.gp-404__ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .gp-404 { padding: 122px 0 96px; }
  .gp-404__num { font-size: clamp(140px, 46vw, 320px); }
}
@media (max-width: 768px) {
  .gp-404 { padding: 84px 0 72px; }
}
@media (max-width: 480px) {
  .gp-404__wash { opacity: .06; }
  .gp-404__num { font-size: clamp(110px, 50vw, 220px); }
}

/* ════════════════════════════════════════════════════
   HEADER — CART / ACCOUNT ICONS
   ════════════════════════════════════════════════════ */
.gp-nav__icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gp-nav__icon-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; color: var(--dp); text-decoration: none;
  transition: color .2s;
}
.gp-nav__icon-link:hover { color: var(--gold); }
.gp-nav__icon-badge {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 50%; background: var(--gold); color: #fff; font-family: var(--sans);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ════════════════════════════════════════════════════
   CART DRAWER
   ════════════════════════════════════════════════════ */
/* z-index: 800 — must sit above .gp-nav (600) and its mega-dropdowns (700), the highest
   existing layers on the page, so the drawer (and its overlay) fully covers the header
   instead of the fixed nav's CTA pill bleeding through on top of it. */
.gp-cart-drawer { position: fixed; inset: 0; z-index: 800; visibility: hidden; pointer-events: none; }
.gp-cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.gp-cart-drawer__overlay {
  position: absolute; inset: 0; background: rgba(20,16,40,.4);
  opacity: 0; transition: opacity .3s var(--ease, ease);
}
.gp-cart-drawer.is-open .gp-cart-drawer__overlay { opacity: 1; }
.gp-cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100vw);
  background: var(--ivory, #FBF8F1); box-shadow: -12px 0 40px rgba(20,16,40,.16);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease, cubic-bezier(.4,0,.2,1));
}
.gp-cart-drawer.is-open .gp-cart-drawer__panel { transform: translateX(0); }
.gp-cart-drawer__content { display: flex; flex-direction: column; height: 100%; }
.gp-cart-drawer__content.is-busy { opacity: .6; pointer-events: none; }
.gp-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 16px; border-bottom: 1px solid rgba(47,43,110,.08); flex-shrink: 0;
}
.gp-cart-drawer__title { font-family: var(--zh); font-size: 20px; font-weight: 700; color: var(--dp); }
.gp-cart-drawer__close {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; color: var(--dp); transition: background .2s;
}
.gp-cart-drawer__close:hover { background: rgba(47,43,110,.08); }
.gp-cart-drawer__empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 40px 24px; text-align: center;
}
.gp-cart-drawer__empty p { font-size: 15px; color: var(--graphite); }
.gp-cart-drawer__items { list-style: none; margin: 0; padding: 8px 24px; overflow-y: auto; flex: 1; }
.gp-cart-drawer__item {
  display: grid; grid-template-columns: 72px 1fr 24px; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(47,43,110,.06); transition: opacity .2s;
}
.gp-cart-drawer__item.is-loading { opacity: .5; pointer-events: none; }
.gp-cart-drawer__item-img {
  width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid rgba(47,43,110,.08);
}
.gp-cart-drawer__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-cart-drawer__item-info { min-width: 0; }
.gp-cart-drawer__item-title {
  font-family: var(--zh); font-size: 15px; font-weight: 700; color: var(--dp);
  text-decoration: none; display: block; line-height: 1.35;
}
.gp-cart-drawer__item-variant { font-family: var(--sans); font-size: 12.5px; color: var(--graphite); margin: 3px 0 0; }
.gp-cart-drawer__item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.gp-cart-drawer__item-price { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--dp); }
.gp-cart-drawer__qty {
  display: flex; align-items: center; gap: 10px; border: 1px solid rgba(47,43,110,.15);
  border-radius: 98px; padding: 4px 6px;
}
.gp-cart-drawer__qty-btn {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  font-size: 15px; color: var(--dp); border-radius: 50%; transition: background .2s;
}

/* ════════════════════════════════════════════════════
   WELLNESS JOURNAL — blog listing (templates/blog.json)
   & BLOG DETAILS — article page (templates/article.json)
   ════════════════════════════════════════════════════ */

/* ── Journal Hero ── */
.gp-jhero { margin: 0 20px; border-radius: 30px; overflow: hidden; padding: 100px 60px 60px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(200,162,74,.18) 100%); }
.gp-jhero__row {
  display: grid; grid-template-columns: 1fr 588px; column-gap: 60px; row-gap: 68px;
  grid-template-areas: "text media" "ctas media"; align-items: start; max-width: 1280px; margin: 0 auto;
}
.gp-jhero__text { grid-area: text; }
.gp-jhero__eyebrow { margin-bottom: 20px; display: inline-flex; }
.gp-jhero__h1 { font-family: var(--zh); font-size: clamp(30px,3.4vw,48px); font-weight: 700; line-height: 1.22; color: var(--dp); letter-spacing: -.02em; margin: 0 0 20px; }
.gp-jhero__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0 0 34px; max-width: 601px; }
.gp-jhero__topics { margin: 0; }
.gp-jhero__ctas { grid-area: ctas; display: flex; gap: 16px; flex-wrap: wrap; align-self: start; }
.gp-jhero__media { grid-area: media; border-radius: 24px; overflow: hidden; align-self: stretch; }
.gp-jhero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 588/540; display: block; }

/* ── Section intro (label / heading / subtext), shared by listing / pathway / related / newsletter ── */
.gp-blog-intro { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.gp-blog-intro__tagfilter { margin: 16px 0 0; font-size: 14px; color: var(--graphite); }
.gp-blog-intro__tagfilter a { color: var(--gold); text-decoration: underline; }

/* ── Latest Articles Grid ── */
.gp-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.gp-blog-grid--2 { grid-template-columns: repeat(2,1fr); }
.gp-blogcard {
  background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none;
  box-shadow: 0 1px 4px rgba(12,12,13,.1), 0 1px 4px rgba(12,12,13,.05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gp-blogcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23,21,60,.14); }
.gp-blogcard__media { position: relative; aspect-ratio: 406/227; overflow: hidden; background: rgba(200,162,74,.12); flex-shrink: 0; }
.gp-blogcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-blogcard__media--empty { display: flex; align-items: center; justify-content: center; color: var(--gold); }
.gp-blogcard__media--empty svg { width: 40px; height: 40px; opacity: .5; }
.gp-blogcard__tag {
  position: absolute; left: 16px; bottom: 16px; background: #fff; padding: 7px 12px; border-radius: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--dp); letter-spacing: -.01em;
}
.gp-blogcard__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.gp-blogcard__title {
  font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); line-height: 1.35;
  letter-spacing: -.02em; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-blogcard__excerpt {
  font-size: 15px; line-height: 1.5; color: var(--graphite); margin: -8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-blogcard__more { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--gold); }
.gp-blogcard__more svg { width: 20px; height: 20px; flex-shrink: 0; }
.gp-blog-empty { text-align: center; color: var(--graphite); font-size: 16px; padding: 40px 0; }

/* ── Pagination ── */
.gp-blog-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; flex-wrap: wrap; }
.gp-blog-pagination a, .gp-blog-pagination span {
  display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px;
  border-radius: 100px; font-family: var(--sans); font-size: 14px; color: var(--graphite); text-decoration: none;
  transition: background .2s, color .2s;
}
.gp-blog-pagination a:hover { background: rgba(47,43,110,.06); color: var(--dp); }
.gp-blog-pagination__current { background: var(--dp); color: #fff; font-weight: 700; }
.gp-blog-pagination__nav { border: 1px solid var(--mist); }
.gp-blog-pagination__nav.is-disabled { opacity: .35; pointer-events: none; }

/* ── Wellness Pathway (static 3-step section) ── */
.gp-step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 31px; width: 100%; }
.gp-step-card {
  background: var(--white); border: 1px solid #e8e7ea; border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 24px; min-height: 354px; position: relative; overflow: hidden;
}
.gp-step-card__eyebrow { font-family: var(--zh); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--gold); display: block; }
.gp-step-card__title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); margin: 8px 0 0; }
.gp-step-card__desc { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0; position: relative; z-index: 1; }
.gp-step-card__img { margin-top: auto; width: 100%; max-height: 180px; object-fit: contain; border-radius: 12px; position: relative; z-index: 1; }

/* #journalPathway's closing CTA row is the only .gp-cta-row instance with two
   pills instead of one — a flex gap (rather than a margin on the second pill)
   keeps them evenly spaced whether the row is a row (desktop) or a column
   (mobile, below). */
#journalPathway .gp-cta-row { gap: 16px; }

/* ── Newsletter ── */
.gp-jnl { display: flex; gap: 70px; align-items: flex-start; justify-content: center; max-width: 1280px; margin: 0 auto; }
.gp-jnl__text { flex: 1 1 0; min-width: 0; }
.gp-jnl__card {
  flex: 0 0 480px; max-width: 625px; width: 100%; background: #fff; border: 1px solid #e8e7ea; border-radius: 20px;
  padding: 36px; box-shadow: 0 16px 32px -4px rgba(12,12,13,.1), 0 4px 4px -4px rgba(12,12,13,.05);
}
.gp-jnl__card-head { text-align: center; margin-bottom: 28px; }
.gp-jnl__card-title { font-family: var(--zh); font-size: 22px; font-weight: 700; color: var(--dp); margin: 0 0 8px; }
.gp-jnl__card-sub { font-size: 16px; color: var(--graphite); margin: 0; }
.gp-jnl__field { margin-bottom: 24px; }
.gp-jnl__label { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--dp); margin-bottom: 8px; }
.gp-jnl__input {
  width: 100%; border: 1px solid #e8e7ea; border-radius: 14px; padding: 14px 20px; font-size: 14px;
  font-family: var(--sans); color: var(--dp); background: #fff;
}
.gp-jnl__input::placeholder { color: var(--graphite); }
.gp-jnl__submit { width: 100%; justify-content: space-between; }
.gp-jnl__disclaimer { font-size: 12px; color: var(--graphite); text-align: center; margin: 20px 0 0; }
.gp-jnl__success { font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); text-align: center; margin: 0; }

/* ── Article hero (Blog Details) ── */
/* First section on the page, so — like .gp-bhero — needs its own top clearance:
   the site nav is `position: fixed` and isn't in normal flow, so without this
   the title/meta render underneath the nav bar. */
.gp-article-hero-sec { position: relative; padding-top: 122px; }
.gp-article-crumb { font-size: 14px; color: var(--graphite); margin: 0 0 24px; }
.gp-article-crumb a { text-decoration: none; }
.gp-article-crumb a:hover { color: var(--dp); }
.gp-article-hero__head { max-width: 843px; margin: 0 0 42px; }
.gp-article-hero__title { font-family: var(--zh); font-size: clamp(30px,3.4vw,48px); font-weight: 700; line-height: 1.22; color: var(--dp); letter-spacing: -.02em; margin: 0 0 30px; }
.gp-article-hero__excerpt { font-size: 16px; line-height: 1.5; color: var(--graphite); margin: 0 0 30px; max-width: 601px; }
.gp-article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gp-article-meta__item {
  display: flex; align-items: center; gap: 10px; background: rgba(47,43,110,.06); color: var(--dp);
  border-radius: 100px; padding: 10px 16px; font-family: var(--sans); font-size: 15px; letter-spacing: -.02em;
}
.gp-article-meta__item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--dp); }
.gp-article-hero__media { border-radius: 32px; overflow: hidden; aspect-ratio: 1280/660; }
.gp-article-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Article body (rich text from article.content) ── */
.gp-article-body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--graphite); }
.gp-article-body > *:first-child { margin-top: 0; }
.gp-article-body > *:last-child { margin-bottom: 0; }
.gp-article-body p { margin: 0 0 24px; }
.gp-article-body h2 { font-family: var(--zh); font-size: clamp(22px,2.2vw,30px); font-weight: 700; color: var(--dp); letter-spacing: -.02em; line-height: 1.3; margin: 48px 0 20px; }
.gp-article-body h3 { font-family: var(--zh); font-size: 24px; font-weight: 700; color: var(--dp); letter-spacing: -.02em; line-height: 1.3; margin: 40px 0 18px; }
.gp-article-body h4 { font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); margin: 32px 0 14px; }
.gp-article-body ul, .gp-article-body ol { margin: 0 0 24px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.gp-article-body li { line-height: 1.6; }
.gp-article-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.gp-article-body strong, .gp-article-body b { color: var(--dp); font-weight: 700; }
.gp-article-body img { width: 100%; height: auto; border-radius: 16px; margin: 8px 0 24px; display: block; }
.gp-article-body hr { border: none; border-top: 1px solid var(--mist); margin: 40px 0; }
.gp-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.gp-article-body th, .gp-article-body td { border: 1px solid var(--mist); padding: 12px 16px; text-align: left; }
.gp-article-body th { font-family: var(--zh); color: var(--dp); background: rgba(47,43,110,.04); }
.gp-article-body blockquote {
  border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); border-radius: 16px;
  background: rgba(200,162,74,.04); padding: 24px 32px; text-align: center; margin: 8px 0 32px;
  font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); line-height: 1.5;
}
.gp-article-body blockquote p { margin: 0; }

/* ── Related articles card variant (wider, shows excerpt) ── */
.gp-blogcard--wide .gp-blogcard__media { aspect-ratio: 577/250; }

@media (max-width: 900px) {
  .gp-blog-grid, .gp-blog-grid--2 { grid-template-columns: repeat(2,1fr); }
  .gp-step-grid { grid-template-columns: 1fr; }
  .gp-jhero__row { grid-template-columns: 1fr; grid-template-areas: "text" "media" "ctas"; row-gap: 32px; }
  .gp-jhero__media { max-width: 100%; aspect-ratio: 588/420; }
  .gp-jnl { flex-direction: column; }
  .gp-jnl__card { flex: 1 1 auto; max-width: 100%; }
  /* Form card title/subtext and disclaimer switch from centered (desktop)
     to left-aligned, and the submit button drops its 100%-width stretch to
     sit at its natural pill size instead — matching every other CTA on
     mobile. */
  .gp-jnl__card-head { text-align: left; }
  .gp-jnl__disclaimer { text-align: left; }
  .gp-jnl__submit { width: auto; justify-content: flex-start; }
}
@media (max-width: 768px) {
  .gp-blog-grid, .gp-blog-grid--2 { grid-template-columns: 1fr; }
  .gp-jhero { margin: 0 12px; padding: 60px 20px 40px; }
  .gp-article-meta { gap: 10px; }
  .gp-article-meta__item { font-size: 13px; padding: 8px 14px; }
}
@media (max-width: 640px) {
  .gp-jhero__h1, .gp-article-hero__title { font-size: 28px; letter-spacing: -.06em; }
  .gp-jhero__desc, .gp-article-hero__excerpt { font-size: 14px; line-height: 1.45; }
  .gp-jnl__card { padding: 24px; }
  .gp-article-hero__media { border-radius: 14px; aspect-ratio: 350/180; }
  .gp-blogcard__body { padding: 20px; gap: 12px; }
  .gp-blogcard__title { font-size: 18px; }

  /* Hero primary/secondary CTAs stack instead of sitting side by side —
     same treatment as the other hero CTA rows sitewide. */
  #journalHero .gp-jhero__ctas { flex-direction: column; align-items: flex-start; }

  /* The desktop 2-column topic-pill layout (see #journalHero .gp-jhero__topics
     above) is unscoped by width and gets too narrow per column on phones,
     overflowing the nowrap chip labels — revert to a single column here,
     matching where .gp-chip-row itself goes single-column. */
  #journalHero .gp-jhero__topics { column-count: 1; }

  /* Pathway / Keep Reading are secondary content sections (tint-panel CTA
     blocks), not the page's magazine-style header like the listing intro
     above them — left-align on mobile like the rest of the site's section
     intros. Listing's intro stays centered intentionally (page header). */
  #journalPathway .gp-blog-intro,
  #journalRelated .gp-blog-intro { text-align: left; }

  /* Pathway's two-pill closing CTA stacks instead of sitting side by side —
     same treatment as the hero CTA rows above. */
  #journalPathway .gp-cta-row { flex-direction: column; align-items: flex-start; }
}
.gp-cart-drawer__qty-btn:hover { background: rgba(200,162,74,.15); color: var(--gold); }
.gp-cart-drawer__qty-val { font-family: var(--sans); font-size: 13px; font-weight: 600; min-width: 14px; text-align: center; }
.gp-cart-drawer__remove {
  display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
  color: var(--graphite); transition: color .2s;
}
.gp-cart-drawer__remove:hover { color: var(--brand-red); }
.gp-cart-drawer__foot { padding: 20px 24px 24px; border-top: 1px solid rgba(47,43,110,.08); flex-shrink: 0; }
.gp-cart-drawer__subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--zh); font-size: 16px; font-weight: 700; color: var(--dp); margin-bottom: 6px;
}
.gp-cart-drawer__note { font-size: 12.5px; color: var(--graphite); margin-bottom: 16px; }
.gp-cart-drawer__checkout { width: 100%; justify-content: center; }
.gp-cart-drawer__checkout.is-loading { opacity: .6; pointer-events: none; }
.gp-cart-drawer__view-cart {
  display: block; text-align: center; margin-top: 14px; font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; color: var(--dp); text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-cart-drawer__error {
  position: absolute; left: 24px; right: 24px; bottom: 20px; padding: 12px 16px;
  background: var(--brand-red); color: #fff; font-size: 13px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(139,28,28,.28);
}

@media (max-width: 480px) {
  .gp-cart-drawer__panel { width: 100vw; }
}

/* ════════════════════════════════════════════════════
   PDP — REAL ADD TO CART FORM
   ════════════════════════════════════════════════════ */
.gp-pdp-price { font-family: var(--zh); font-size: 24px; font-weight: 700; color: var(--dp); margin: 4px 0 0; }
.gp-pdp-add-form { display: flex; align-items: center; gap: 12px; }
.gp-pdp-qty {
  display: flex; align-items: center; border: 1.5px solid rgba(47,43,110,.18); border-radius: 98px;
  padding: 4px; flex-shrink: 0;
}
.gp-pdp-qty-btn {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  font-size: 17px; color: var(--dp); border-radius: 50%; transition: background .2s;
}
.gp-pdp-qty-btn:hover { background: rgba(200,162,74,.15); color: var(--gold); }
.gp-pdp-qty-input {
  width: 34px; text-align: center; border: none; background: none; font-family: var(--sans);
  font-size: 15px; font-weight: 600; color: var(--dp); -moz-appearance: textfield;
}
.gp-pdp-qty-input::-webkit-outer-spin-button, .gp-pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gp-pill:disabled, .gp-pill[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.gp-pill.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 480px) {
  .gp-pdp-add-form { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════
   CART PAGE (/cart)
   ════════════════════════════════════════════════════ */
.gp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gp-cart-page { padding-top: 140px; }
.gp-cart-page__head { margin-bottom: 40px; }
.gp-cart-page__h1 { font-family: var(--zh); font-size: clamp(28px,3.4vw,42px); font-weight: 700; color: var(--dp); margin-top: 12px; }
.gp-cart-page__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 80px 24px; text-align: center; background: #FCFAF4; border-radius: 30px;
}
.gp-cart-page__empty p { font-size: 16px; color: var(--graphite); }
.gp-cart-page__grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.gp-cart-page__table { width: 100%; border-collapse: collapse; }
.gp-cart-page__table thead th {
  text-align: left; font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--graphite); padding: 0 0 16px; border-bottom: 1px solid rgba(47,43,110,.1);
}
.gp-cart-page__col-remove { width: 40px; }
.gp-cart-page__row td { padding: 24px 12px 24px 0; border-bottom: 1px solid rgba(47,43,110,.08); vertical-align: middle; }
.gp-cart-page__row td:first-child { padding-left: 0; }
.gp-cart-page__product { display: flex; align-items: center; gap: 16px; }
.gp-cart-page__img {
  width: 88px; height: 88px; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid rgba(47,43,110,.08); flex-shrink: 0;
}
.gp-cart-page__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-cart-page__title { font-family: var(--zh); font-size: 16px; font-weight: 700; color: var(--dp); text-decoration: none; }
.gp-cart-page__variant { font-family: var(--sans); font-size: 13px; color: var(--graphite); margin: 4px 0 0; }
.gp-cart-page__remove-mobile { display: none; font-family: var(--sans); font-size: 12.5px; color: var(--brand-red); margin-top: 8px; }
.gp-cart-page__qty-input {
  width: 64px; padding: 8px 10px; border: 1.5px solid rgba(47,43,110,.18); border-radius: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--dp); text-align: center;
}
.gp-cart-page__linetotal { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--dp); }
.gp-cart-page__remove { display: flex; color: var(--graphite); transition: color .2s; }
.gp-cart-page__remove:hover { color: var(--brand-red); }
.gp-cart-page__summary { background: #FCFAF4; border-radius: 24px; padding: 32px; position: sticky; top: 120px; }
.gp-cart-page__subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); margin-bottom: 8px;
}
.gp-cart-page__note { font-size: 13px; color: var(--graphite); margin-bottom: 24px; }
.gp-cart-page__update { width: 100%; justify-content: center; margin-bottom: 12px; }
.gp-cart-page__checkout { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .gp-cart-page__grid { grid-template-columns: 1fr; }
  .gp-cart-page__summary { position: static; }
}
@media (max-width: 700px) {
  .gp-cart-page { padding-top: 100px; }
  .gp-cart-page__table thead { display: none; }
  .gp-cart-page__table, .gp-cart-page__table tbody, .gp-cart-page__table tr, .gp-cart-page__table td { display: block; width: 100%; }
  .gp-cart-page__row { padding: 20px 0; border-bottom: 1px solid rgba(47,43,110,.08); }
  .gp-cart-page__row td { border-bottom: none; padding: 6px 0; }
  .gp-cart-page__product { padding-bottom: 12px; }
  .gp-cart-page__col-remove, .gp-cart-page__row .gp-cart-page__remove { display: none; }
  .gp-cart-page__remove-mobile { display: inline-block; }
  .gp-cart-page__table td[data-label]::before {
    content: attr(data-label); display: inline-block; width: 90px; font-size: 12px;
    color: var(--graphite); text-transform: uppercase; letter-spacing: .03em;
  }
}
@media (max-width: 480px) {
  .gp-cart-page { padding-top: 88px; }
  .gp-cart-page__summary { padding: 24px 18px; }
}

/* ════════════════════════════════════════════════════
   CUSTOMER ACCOUNTS — login / register / orders / order detail / addresses
   ════════════════════════════════════════════════════ */
.gp-acct-page { padding-top: 140px; }
.gp-acct-page__narrow { max-width: 480px; }
.gp-acct-page__h1 { font-family: var(--zh); font-size: clamp(28px,3.4vw,42px); font-weight: 700; color: var(--dp); margin-top: 12px; }
.gp-acct-page__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.gp-acct-page__head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gp-acct__card { background: #FCFAF4; border-radius: 24px; padding: 36px; margin-top: 32px; }
.gp-acct__card--wide { max-width: 640px; }
.gp-acct__card-h2 { font-family: var(--zh); font-size: 18px; font-weight: 700; color: var(--dp); margin-bottom: 20px; }
.gp-acct__field { margin-bottom: 18px; }
.gp-acct__field label {
  display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--graphite);
  margin-bottom: 6px;
}
.gp-acct__field input {
  width: 100%; padding: 12px 16px; border: 1.5px solid rgba(47,43,110,.15); border-radius: 12px;
  font-family: var(--sans); font-size: 15px; color: var(--dp); background: #fff;
}
.gp-acct__field input:focus { outline: none; border-color: var(--gold); }
.gp-acct__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gp-acct__submit { width: 100%; justify-content: center; margin-top: 8px; }
.gp-acct__actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gp-acct__actions-row .gp-acct__submit { width: auto; flex: 1; }
.gp-acct__link {
  display: inline-block; margin-top: -6px; margin-bottom: 12px; font-family: var(--sans);
  font-size: 13px; font-weight: 600; color: var(--dp); text-decoration: underline; text-underline-offset: 3px;
}
.gp-acct__error {
  background: rgba(139,28,28,.08); border: 1px solid rgba(139,28,28,.2); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 20px;
}
.gp-acct__error ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--brand-red); }
.gp-acct__success {
  background: rgba(47,43,110,.06); border: 1px solid rgba(47,43,110,.15); border-radius: 12px;
  padding: 14px 18px; font-size: 13.5px; color: var(--dp);
}
.gp-acct__recover { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(47,43,110,.1); }
.gp-acct__recover-copy { font-size: 13.5px; color: var(--graphite); margin-bottom: 16px; }
.gp-acct__switch { text-align: center; margin-top: 24px; font-size: 14px; color: var(--graphite); }
.gp-acct__switch a { color: var(--dp); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.gp-acct__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 80px 24px; text-align: center; background: #FCFAF4; border-radius: 30px;
}
.gp-acct__empty p { font-size: 16px; color: var(--graphite); }

.gp-acct__orders-table { width: 100%; border-collapse: collapse; }
.gp-acct__orders-table thead th {
  text-align: left; font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--graphite); padding: 0 12px 16px 0; border-bottom: 1px solid rgba(47,43,110,.1);
}
.gp-acct__orders-table td { padding: 20px 12px 20px 0; border-bottom: 1px solid rgba(47,43,110,.08); font-size: 14px; color: var(--dp); }
.gp-acct__col-view { text-align: right; }
.gp-acct__badge {
  display: inline-block; padding: 5px 12px; border-radius: 98px; background: rgba(47,43,110,.08);
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--dp);
}
.gp-acct__view-link { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--dp); text-decoration: underline; text-underline-offset: 3px; }
.gp-acct__pagination { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

.gp-acct__back { display: inline-block; margin-bottom: 24px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--graphite); text-decoration: none; }
.gp-acct__back:hover { color: var(--dp); }
.gp-acct__order-meta { font-family: var(--sans); font-size: 13.5px; color: var(--graphite); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-acct__order-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; margin-top: 8px; }
.gp-acct__order-product { display: flex; align-items: center; gap: 14px; }
.gp-acct__order-product img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(47,43,110,.08); }
.gp-acct__order-title { display: block; font-family: var(--zh); font-size: 14.5px; font-weight: 700; color: var(--dp); }
.gp-acct__order-variant { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--graphite); margin-top: 3px; }
.gp-acct__tracking { margin-top: 32px; }
.gp-acct__tracking-h2 { font-family: var(--zh); font-size: 16px; font-weight: 700; color: var(--dp); margin-bottom: 12px; }
.gp-acct__tracking-row { font-size: 14px; color: var(--dp); }
.gp-acct__order-summary { background: #FCFAF4; border-radius: 24px; padding: 32px; }
.gp-acct__order-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--dp); padding: 8px 0; }
.gp-acct__order-row--total { font-family: var(--zh); font-size: 17px; font-weight: 700; border-top: 1px solid rgba(47,43,110,.12); margin-top: 8px; padding-top: 16px; }
.gp-acct__address { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(47,43,110,.1); font-size: 14px; color: var(--dp); line-height: 1.6; }

.gp-acct__address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
.gp-acct__address-card { background: #fff; border: 1px solid rgba(47,43,110,.1); border-radius: 20px; padding: 24px; }
.gp-acct__address-text { font-size: 14px; color: var(--dp); line-height: 1.6; margin-bottom: 16px; }
.gp-acct__address-actions { display: flex; gap: 10px; }
.gp-acct__address-actions form { display: contents; }
.gp-acct__address-edit { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(47,43,110,.1); }

@media (max-width: 900px) {
  .gp-acct__order-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .gp-acct-page { padding-top: 100px; }
  .gp-acct__orders-table thead { display: none; }
  .gp-acct__orders-table, .gp-acct__orders-table tbody, .gp-acct__orders-table tr, .gp-acct__orders-table td { display: block; width: 100%; }
  .gp-acct__orders-table tr { padding: 16px 0; border-bottom: 1px solid rgba(47,43,110,.08); }
  .gp-acct__orders-table td { border-bottom: none; padding: 4px 0; }
  .gp-acct__orders-table td[data-label]::before {
    content: attr(data-label); display: inline-block; width: 110px; font-size: 12px;
    color: var(--graphite); text-transform: uppercase; letter-spacing: .03em;
  }
  .gp-acct__col-view { text-align: left; }
}
@media (max-width: 480px) {
  .gp-acct-page { padding-top: 88px; }
  .gp-acct__card { padding: 24px 20px; }
  .gp-acct__field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ════════════════════════════════════════════════════
   SCIENCE & TECHNOLOGY PAGE — mobile fixes
   Figma node 1426:36369 (mislabeled "2.2 - Brand > Brand Story mobile
   responsive (chinese)" in the file itself, but its actual content is
   this page's sections — Hero, Why Wild Ginseng, The Science Gap,
   Fermentation Technology, Active Compounds, Modern Life Science,
   Safety & Trust).
   ════════════════════════════════════════════════════ */
.gp-disclaimer { text-align: center; font-size: 12px; font-style: italic; color: var(--graphite); max-width: 700px; margin: 0 auto; }

@media (max-width: 640px) {
  /* Hero + Safety&Trust panels go edge-to-edge on mobile in Figma (no
     rounded inset card) — same treatment already used elsewhere for
     #brandHero / #brandProblem / #brandMission. Science Gap + Active
     Compounds' tint panels do the same. */
  #sciHero .gp-bhero__panel,
  #sciSafetyTrust .gp-bhero__panel,
  #sciGap .gp-tint-panel,
  #activeCompounds .gp-tint-panel { margin: 0; border-radius: 0; padding: 60px 20px; }

  /* Hero trust badges: one per line, no divider/pairing (same as
     #socialHero / #partnerHero / #pvHero). CTAs stack. The hero photo
     sits between the badges and the CTAs in Figma, but both live inside
     the same .gp-reveal text block in markup — pulled out of flow with
     display:contents and re-sequenced with order (same technique as
     #brandHero/#pvHero). display:contents drops the media div's own box,
     so its border-radius has to move onto the <img> itself. */
  #sciHero .gp-trust-row__line { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 12px; }
  #sciHero .gp-trust-row__div { display: none; }
  #sciHero .gp-bhero__row > .gp-reveal { display: contents; }
  #sciHero .gp-bhero__media { order: 2; }
  #sciHero .gp-bhero__media img { border-radius: 14px; }
  #sciHero .gp-bhero__ctas { order: 3; flex-direction: column; align-items: flex-start; gap: 16px; }
  /* The text block's display:contents promotes label/h1/sub/trust-row into
     the row's grid directly, so the row's 30px gap applies between EVERY
     one of them too, stacking on top of each element's own margin (margins
     don't collapse between grid items) — compounding into an oversized
     gap. Tightened to one consistent, modest rhythm instead. */
  #sciHero .gp-bhero__row { row-gap: 12px; }
  #sciHero .gp-bhero__label { margin-bottom: 8px; }
  #sciHero .gp-bhero__h1 { margin-bottom: 12px; }
  #sciHero .gp-bhero__sub { margin-bottom: 0; }
  #sciHero .gp-trust-row { margin-bottom: 0; }

  /* Safety & Trust's hero photo is a landscape crop in Figma (350/232)
     rather than the near-square desktop default, plus the 14px mobile
     radius used across this page's other intro photos. */
  #sciSafetyTrust .gp-bhero__media img { aspect-ratio: 350/232; border-radius: 14px; }

  /* Science Gap + Active Compounds center their section intro on desktop
     via inline style, but Figma left-aligns both on mobile — same
     left-align override already used for #responsibleInnovation /
     #suitablePartners / #productMarketFit / #applicationForm. */
  #sciGap .gp-center-intro,
  #activeCompounds .gp-center-intro { text-align: left; }
  #sciGap .gp-center-intro__label,
  #activeCompounds .gp-center-intro__label { justify-content: flex-start; }

  /* Science Gap's + Fermentation's closing CTA row centers on desktop via
     inline style converted to .gp-cta-row, but Figma left-aligns it on
     mobile — same override already used for #responsibleInnovation/
     #qualitySafety/#tcmEducation/#hkWellnessBridge/#productMarketFit. */
  #sciGap .gp-cta-row,
  #fermentation .gp-cta-row { justify-content: flex-start; }

  /* Section headings + card/column titles + card descriptions step down
     to Figma's flat mobile sizes — the shared clamp()/default sizes are
     desktop-tuned and land a few px above what these phone frames show. */
  #sciWhyWild .gp-src-title,
  #sciGap .gp-src-title,
  #fermentation .gp-src-title,
  #activeCompounds .gp-src-title,
  #modernLifeScience .gp-src-title { font-size: 28px; }

  #sciWhyWild .gp-bcard__title,
  #fermentation .gp-bcard__title,
  #activeCompounds .gp-bcard__title,
  #modernLifeScience .gp-bcard__title,
  #sciGap .gp-compare3__title { font-size: 18px; }

  #sciWhyWild .gp-bcard__desc,
  #fermentation .gp-bcard__desc,
  #activeCompounds .gp-bcard__desc,
  #modernLifeScience .gp-bcard__desc,
  #sciGap .gp-compare3__desc { font-size: 14px; }

  /* Active Compounds' + Modern Life Science's items are a single vertical
     list of full-width icon+text rows in Figma's phone frame (not a card
     grid), so they stay stacked single-column — confirmed directly against
     the Figma mobile frame (node 1426:36369): each item spans the full
     350px row width, stacked top-to-bottom, no horizontal scroll intended. */
  #activeCompounds .gp-bcard-grid,
  #modernLifeScience .gp-bcard-grid { grid-template-columns: 1fr; }

  /* Wild Ginseng's factor cards + Fermentation's step cards become a
     horizontal snap-scroll in Figma (next card peeks at the edge) instead
     of the generic full-width single-column stack — same treatment as
     #responsibleInnovation/#everydayNeed above. */
  #sciWhyWild .gp-bcard-grid,
  #fermentation .gp-bcard-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #sciWhyWild .gp-bcard,
  #fermentation .gp-bcard { flex: 0 0 85%; scroll-snap-align: start; padding: 20px; }

  /* Safety & Trust's 5 badges do the same, at the narrower flex-basis
     already used for #brandDailyWellness's 5-badge grid. */
  #sciSafetyTrust .gp-bcard-grid--5 {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 4px; margin-bottom: -4px;
  }
  #sciSafetyTrust .gp-bcard--center { flex: 0 0 70%; scroll-snap-align: start; padding: 20px; }

  /* Wild Ginseng's closing quote bar stays horizontal with visible icons
     in Figma — the generic .gp-quote-bar rule stacks + hides icons, which
     doesn't match this page's phone frame (same override already used
     for #brandProblem/#brandMission). */
  #sciWhyWild .gp-quote-bar { flex-direction: row; align-items: center; gap: 12px; padding: 16px 12px; text-align: center; }
  #sciWhyWild .gp-quote-bar__icon { display: block; width: 27px; height: 27px; }
  #sciWhyWild .gp-quote-bar p { font-size: 12px; }

  /* Intro photos crop to Figma's 14px mobile radius instead of the
     desktop 24px (same override already used for #qualitySafety/
     #tcmEducation/#whatWeProvide above). */
  #sciWhyWild .gp-source__intro-media,
  #fermentation .gp-source__intro-media,
  #modernLifeScience .gp-source__intro-media { border-radius: 14px; }

  /* Science Gap's comparison columns: 80px of horizontal padding (more
     than even the desktop card's 40px) was squeezing the full-width image
     down into a small box surrounded by excess white space — reduced to a
     normal mobile card padding so the image actually fills the card. */
  #sciGap .gp-compare3__col { padding: 32px 24px; }

  /* Active Compounds' + Modern Life Science's disclaimers are centered
     with a fixed max-width on desktop, but Figma left-aligns them full
     width on mobile. */
  #activeCompounds .gp-disclaimer,
  #modernLifeScience .gp-disclaimer { text-align: left; max-width: none; margin: 0; }
}

/* ── Social Links Section ─────────────────────────────────────── */
.gp-socials { background: var(--dp); padding: 100px 0; text-align: center; }
.gp-socials__head { margin-bottom: 56px; }
.gp-socials__head .gp-label { color: var(--gold); justify-content: center; display: flex; }
.gp-socials__h2 { font-family: var(--zh); font-size: clamp(26px,3vw,44px); font-weight: 700; color: #fff; margin: 14px 0 16px; line-height: 1.2; }
.gp-socials__sub { font-size: 16px; color: rgba(255,255,255,.65); max-width: 480px; margin: 0 auto; line-height: 1.6; }
.gp-socials__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.gp-socials__item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 28px 24px; width: 140px; color: #fff; transition: background .2s, transform .2s, box-shadow .2s; cursor: pointer; }
.gp-socials__item:hover { background: rgba(200,162,74,.18); border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.gp-socials__item--pending { opacity: .45; cursor: default; }
.gp-socials__item--pending:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); transform: none; box-shadow: none; }
.gp-socials__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.gp-socials__icon svg { width: 100%; height: 100%; }
.gp-socials__icon--fill { color: #fff; background: var(--gold); border-radius: 10px; }
.gp-socials__name { font-family: var(--zh); font-size: 14px; font-weight: 600; color: #fff; letter-spacing: .02em; }
@media (max-width: 767px) {
  .gp-socials { padding: 72px 0; }
  .gp-socials__item { width: calc(33.33% - 14px); min-width: 96px; padding: 20px 12px; }
  .gp-socials__icon { width: 36px; height: 36px; }
  .gp-socials__name { font-size: 12px; }
}
}

/* ════════════════════════════════════════════════════
   HEADER — FIGMA NAV (node 771:262), desktop
   Flat serif links with a gold underline on the active/hovered item
   (the JS-driven .gp-nav__dot--auto.is-on is restyled as that underline),
   cart + gold dot, divider, globe + language.
   ════════════════════════════════════════════════════ */
.gp-lang__divider, .gp-lang__globe { display: none; }
@media (min-width: 769px) {
  .gp-nav { background: transparent; box-shadow: none; }
  .gp-nav--scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 20px rgba(47,43,110,.08); }
  .gp-nav__inner { padding: 0 48px; height: 90px; }
  .gp-nav__logo .gp-nav__logo-img { height: 84px !important; width: auto !important; }

  .gp-nav__links { background: none; border: 0; border-radius: 0; padding: 0; gap: 44px; }
  .gp-nav__link {
    position: relative; padding: 6px 0; border-radius: 0;
    font-family: var(--zh); font-size: 18px; font-weight: 700; line-height: 1.4;
    text-transform: none; letter-spacing: 0; color: #000;
  }
  .gp-nav__link:hover, .gp-nav__link--active { color: #000; }
  .gp-nav__dot { background: #DCB66F; }
  .gp-nav__dot--auto.is-on {
    position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
    width: calc(100% + 8px); height: 1px; border-radius: 0;
  }

  .gp-nav__icons { margin-left: auto; gap: 0; margin-right: 20px; }
  .gp-nav__icons .gp-nav__icon-link { width: 40px; height: 40px; color: #000; }
  .gp-nav__cart-img { width: 26px; height: 23px; display: block; }
  .gp-nav__icons .gp-nav__icon-badge {
    top: 2px; right: -2px; min-width: 15px; width: 15px; height: 15px; padding: 0;
    background: #DCB66F; color: #000; font-size: 9px; line-height: 15px;
  }
  .gp-nav__icons .gp-nav__icon-badge[hidden] { display: block; font-size: 0; }

  .gp-lang { display: flex; align-items: center; gap: 22px; }
  .gp-lang__divider { display: block; width: 1px; height: 36px; background: #DCB66F; }
  .gp-lang__btn { gap: 8px; padding: 6px 0; font-size: 22px; font-weight: 700; color: #000; }
  .gp-lang__btn:hover { background: none; color: #000; }
  .gp-lang__globe { display: block; width: 25px; height: 25px; }
  .gp-lang__drop { top: 100%; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .gp-nav__inner { padding: 0 24px; }
  .gp-nav__links { gap: 22px; }
  .gp-nav__link { font-size: 16px; }
  .gp-lang__btn { font-size: 18px; }
}

/* ════════════════════════════════════════════════════
   FOOTER — FIGMA GLASS CARD (node 782:263)
   ════════════════════════════════════════════════════ */
.gp-ft { position: relative; overflow: hidden; padding: 29px 20px 0; color: #fff; background: #12102e; }
.gp-ft::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(29,27,72,.86) 0%, rgba(13,12,40,.94) 100%), var(--gp-ft-bg) center / cover; }
.gp-ft > * { position: relative; z-index: 1; }
.gp-ft__wm { height: clamp(90px, 15vw, 215px); margin-top: 24px; align-items: flex-start; }
.gp-ft__wm .gp-foot__wm-text { font-size: clamp(80px, 21vw, 300px); line-height: .95; opacity: .85; }
.gp-ft__card {
  max-width: 1200px; margin: 0 auto; border-radius: 25px; border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 30px 44px 45px 31px; position: relative;
}
.gp-ft a { text-decoration: none; }
.gp-ft__main { display: flex; align-items: flex-start; min-height: 237px; padding-bottom: 32px; }

/* Brand */
.gp-ft__brand { flex: 0 0 136px; margin-right: 97px; display: flex; flex-direction: column; align-items: center; }
.gp-ft__logo { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gp-ft__logo-zh, .gp-ft__logo-en {
  display: block; background: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.gp-ft__logo-zh { width: 108px; height: 25px; }
.gp-ft__logo-en { width: 100px; height: 16px; }
.gp-ft__logo-rule { display: block; width: 136px; height: 1px; background: #816E42; margin-top: 9px; }
.gp-ft__tagline { margin: 11px 0 0; font-family: var(--zh); font-weight: 500; font-size: 14px; line-height: 1.2; color: #ffda84; letter-spacing: -.02em; white-space: nowrap; }
.gp-ft__contact-icons { display: flex; gap: 17.7px; margin-top: 46px; align-self: flex-start; padding-left: 6px; }
.gp-ft__contact-icon {
  width: 53px; height: 53px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(125,115,140,.05); border: 1.27px solid rgba(125,115,140,.12); transition: border-color .2s, background .2s;
}
.gp-ft__contact-icon:hover { border-color: #ffda84; background: rgba(255,218,132,.08); }
.gp-ft__contact-icon img { width: 20px; height: 20px; }

/* Link columns */
.gp-ft__cols { display: flex; margin-top: 15px; }
.gp-ft__col { min-height: 178px; padding: 9px 0 0 33px; border-right: 1px solid rgba(255,255,255,.55); }
.gp-ft__col:first-child { padding-left: 0; width: 128px; }
.gp-ft__col:nth-child(2) { width: 183px; }
.gp-ft__col:nth-child(3) { width: 228px; }
.gp-ft__col:last-child { border-right: 1px solid rgba(255,255,255,.55); }
.gp-ft__head { margin: 0 0 24px; font-family: var(--zh); font-weight: 500; font-size: 14.35px; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: #ffda84; white-space: nowrap; }
.gp-ft__links { display: flex; flex-direction: column; gap: 18.45px; margin: 0; padding: 0; list-style: none; }
.gp-ft__links li { margin: 0; padding: 0; line-height: 20.5px; }
.gp-ft__links a { display: block; font-family: var(--sans); font-size: 14.35px; line-height: 20.5px; letter-spacing: -.03em; color: #fff; white-space: nowrap; transition: color .2s; }
.gp-ft__links a:hover { color: #ffda84; }

/* Follow us + help */
.gp-ft__side { margin-left: 46px; padding-top: 24px; }
.gp-ft__social { display: flex; gap: 7px; margin-top: 10px; }
.gp-ft__social a { width: 44.87px; height: 44.87px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.gp-ft__social a:hover { transform: translateY(-2px); }
.gp-ft__social img { width: 20.4px; height: 20.4px; }
.gp-ft__help-title { margin: 14px 0 5px; font-family: var(--sans); font-size: 16px; line-height: 20.5px; letter-spacing: -.03em; color: #fff; }
.gp-ft__help { display: flex; flex-direction: column; font-family: var(--sans); font-size: 14px; line-height: 20.5px; letter-spacing: -.03em; color: rgba(255,255,255,.65); }
.gp-ft__help a { color: inherit; transition: color .2s; }
.gp-ft__help a:hover { color: #ffda84; }

/* Bottom bar */
.gp-ft__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 0 13px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.5);
  font-family: var(--sans); font-size: 12.7px; line-height: 18px; letter-spacing: -.03em; color: rgba(255,255,255,.38);
}
.gp-ft__bottom p { margin: 0; }
.gp-ft__legal { display: flex; align-items: center; gap: 5.4px; }
.gp-ft__legal a { color: rgba(255,255,255,.38); transition: color .2s; }
.gp-ft__legal a:hover { color: #ffda84; }
.gp-ft__legal span { color: #695d7b; font-weight: 700; }

@media (max-width: 1100px) {
  .gp-ft__card { padding: 30px 32px 32px; }
  .gp-ft__main { flex-wrap: wrap; row-gap: 40px; }
  .gp-ft__brand { margin-right: 48px; }
  .gp-ft__cols { flex: 1 1 auto; flex-wrap: wrap; row-gap: 24px; }
  .gp-ft__side { flex: 1 0 100%; margin-left: 0; padding-top: 0; }
  .gp-ft__bottom { margin-left: 0; }
}
@media (max-width: 768px) {
  .gp-ft { padding: 16px 12px 24px; }
  .gp-ft__card { border-radius: 18px; padding: 28px 24px 24px; }
  .gp-ft__main { flex-direction: column; align-items: stretch; }
  .gp-ft__brand { flex-basis: auto; margin-right: 0; align-items: flex-start; }
  .gp-ft__logo { align-items: flex-start; }
  .gp-ft__logo-rule { width: 136px; }
  .gp-ft__cols { flex-direction: column; margin-top: 0; row-gap: 0; }
  .gp-ft__col, .gp-ft__col:first-child, .gp-ft__col:nth-child(2), .gp-ft__col:nth-child(3) {
    width: auto; min-height: 0; padding: 24px 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.25);
  }
  .gp-ft__col:last-child { border-right: 0; }
  .gp-ft__links a, .gp-ft__head { white-space: normal; }
  .gp-ft__bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
}

/* Footer — accordion head + mobile layout (Figma iPhone frame 737:385). Desktop untouched. */
.gp-ft__head--btn { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: default; }
.gp-ft__chev, .gp-ft__mhelp { display: none; }
@media (max-width: 768px) {
  .gp-ft { padding: 40px 23px 0; }
  .gp-ft__card { padding: 24px 24px 28px; border-radius: 20px; }
  .gp-ft__main { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; row-gap: 0; }
  .gp-ft__brand, .gp-ft__side { display: contents; }
  .gp-ft__logo { order: 1; align-self: center; }
  .gp-ft__logo-rule { order: 2; align-self: center; width: 122px; margin-top: 8px; }
  .gp-ft__tagline { order: 3; align-self: center; margin-top: 8px; }
  .gp-ft__contact-icons, .gp-ft__side > .gp-ft__head, .gp-ft__side > .gp-ft__help-title, .gp-ft__side > .gp-ft__help { display: none; }
  .gp-ft__social { order: 4; justify-content: center; gap: 8px; margin: 22px 0 30px; }
  .gp-ft__social a { width: 40px; height: 40px; background: transparent; border: 1px solid #fff; }
  .gp-ft__social img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
  .gp-ft__cols { order: 5; flex-direction: column; margin-top: 0; }
  .gp-ft__col, .gp-ft__col:first-child, .gp-ft__col:nth-child(2), .gp-ft__col:nth-child(3) {
    width: auto; min-height: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.45);
  }
  .gp-ft__head--btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; margin: 0; font-size: 15px; cursor: pointer; }
  .gp-ft__chev { display: block; flex-shrink: 0; transition: transform .2s; transform: rotate(180deg); }
  .gp-ft__col.is-open .gp-ft__chev { transform: none; }
  .gp-ft__links { display: none; gap: 14px; padding: 6px 0 14px; }
  .gp-ft__col.is-open .gp-ft__links { display: flex; }
  .gp-ft__links a { font-size: 13px; }
  .gp-ft__mhelp { order: 6; display: flex; align-items: center; gap: 24px; margin-top: 22px; }
  .gp-ft__mhelp-icons { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
  .gp-ft__mhelp .gp-ft__contact-icon { width: 42px; height: 42px; background: transparent; border: 1px solid #fff; }
  .gp-ft__mhelp .gp-ft__help-title { margin: 0 0 4px; font-size: 15px; }
  .gp-ft__mhelp .gp-ft__help { font-size: 13px; }
  .gp-ft__bottom { margin-top: 24px; padding-top: 12px; font-size: 11px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .gp-ft__wm { height: 76px; margin-top: 20px; }
  .gp-ft__wm .gp-foot__wm-text { font-size: 17.5vw; }
}

/* Header — mobile (Figma iPhone frame 737:385): left logo, bare burger, plain language toggle */
@media (max-width: 768px) {
  .gp-nav__inner { padding: 0 28px; }
  .gp-nav__logo { left: 28px; }
  .gp-nav__logo .gp-nav__logo-img { height: 52px !important; width: auto !important; }
  .gp-nav__burger { background: none; box-shadow: none; width: 32px; height: 32px; border-radius: 0; margin-left: 8px; }
  .gp-nav__burger span { width: 20px; background: #1c194a; }
  .gp-lang__btn { background: none; box-shadow: none; padding: 6px 4px; font-size: 14px; color: #000; }
  .gp-lang__globe { display: none; }
  .gp-lang__divider { display: none; }
}

/* ==========================================================================
   English home page: long-copy overrides
   The home sections were laid out (absolute positions, fixed heights, tight
   letter-spacing) for short Chinese copy. English strings are 2-3x longer, so
   here the stages switch to flow/grid layout and type is re-sized.
   Scoped with :lang(en) so zh-TW / zh-Hans layouts are untouched.
   ========================================================================== */

/* ---- Hero ---- */
@media (min-width: 769px) {
  html:lang(en) #gpHero .gp-hero__content { padding-top: calc(96 * var(--u)); max-width: calc(640 * var(--u)); }
  html:lang(en) #gpHero .gp-hero__eyebrow { color: var(--gold); font-size: calc(16 * var(--u)); margin-bottom: calc(18 * var(--u)); }
  html:lang(en) #gpHero .gp-hero__h1 { font-size: calc(40 * var(--u)); line-height: 1.2; letter-spacing: -.005em; }
  html:lang(en) #gpHero .gp-hero__rule { margin: calc(14 * var(--u)) 0 calc(18 * var(--u)); }
  html:lang(en) #gpHero .gp-hero__subhead { font-size: calc(20 * var(--u)); line-height: 1.35; margin-bottom: calc(14 * var(--u)); max-width: calc(560 * var(--u)); }
  html:lang(en) #gpHero .gp-hero__sub { font-size: calc(16 * var(--u)); line-height: 1.5; max-width: calc(520 * var(--u)); margin-bottom: calc(28 * var(--u)); }
  html:lang(en) #gpHero .gp-hero__ctas { flex-wrap: wrap; }
}

/* ---- Audience / Everyday wellness ---- */
@media (min-width: 901px) {
  html:lang(en) #audience .gp-wb__stage { height: calc(820 * var(--u)); }
  html:lang(en) #audience .gp-wb__h2 { left: 50%; right: auto; width: calc(900 * var(--u)); transform: translateX(-50%); font-size: calc(40 * var(--u)); line-height: 1.2; letter-spacing: -.02em; }
  html:lang(en) #audience .gp-wb__sub { left: 50%; right: auto; width: calc(620 * var(--u)); transform: translateX(-50%); top: calc(146 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }
  html:lang(en) #audience .gp-wb__capsule { top: calc(236 * var(--u)); }
  html:lang(en) #audience .gp-wb__item--1, html:lang(en) #audience .gp-wb__item--3 { top: calc(330 * var(--u)); }
  html:lang(en) #audience .gp-wb__item--2, html:lang(en) #audience .gp-wb__item--4 { top: calc(540 * var(--u)); }
  html:lang(en) #audience .gp-wb__item { height: auto; min-height: calc(135 * var(--u)); }
  html:lang(en) #audience .gp-wb__text { width: calc(190 * var(--u)); top: calc(4 * var(--u)); }
  html:lang(en) #audience .gp-wb__title { font-size: calc(20 * var(--u)); line-height: 1.25; white-space: normal; }
  html:lang(en) #audience .gp-wb__en { font-size: calc(14 * var(--u)); line-height: 1.4; white-space: normal; }
  html:lang(en) #audience .gp-wb__desc { font-size: calc(14 * var(--u)); line-height: 1.45; white-space: normal; }
  html:lang(en) #audience .gp-wb__cta { top: calc(752 * var(--u)); }
}

/* ---- Quote banner ---- */
@media (min-width: 769px) {
  html:lang(en) .gp-qb { padding-left: 40px; padding-right: 40px; }
  html:lang(en) .gp-qb__quote { max-width: calc(980 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1.3; letter-spacing: 0; }
  html:lang(en) .gp-qb__source { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.5; letter-spacing: 0; }
  html:lang(en) .gp-qb__btn { margin-top: calc(40 * var(--u)); }
}
@media (max-width: 768px) {
  html:lang(en) .gp-qb__quote { font-size: clamp(20px, 5.4vw, 28px); line-height: 1.35; letter-spacing: 0; }
  html:lang(en) .gp-qb__source { font-size: 14px; line-height: 1.6; letter-spacing: 0; }
}

/* ---- Product range ---- */
@media (min-width: 901px) {
  html:lang(en) #products .gp-pr__eyebrow { margin-bottom: calc(14 * var(--u)); }
  html:lang(en) #products .gp-pr__h2 { font-size: calc(44 * var(--u)); line-height: 1.25; }
  html:lang(en) #products .gp-pr__sub { max-width: calc(860 * var(--u)); margin: calc(14 * var(--u)) auto calc(48 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.5; }
  html:lang(en) #products .gp-pr__card, html:lang(en) #products .gp-pr__card--2 { height: auto; min-height: calc(509 * var(--u)); display: flex; align-items: flex-start; }
  html:lang(en) #products .gp-pr__panel { position: relative; left: auto; top: auto; flex: 0 0 calc(432 * var(--u)); margin: calc(20 * var(--u)) 0 calc(23 * var(--u)) calc(22 * var(--u)); }
  html:lang(en) #products .gp-pr__body { position: static; flex: 1; min-width: 0; margin: 0 calc(24 * var(--u)) 0 calc(33 * var(--u)); padding-bottom: calc(24 * var(--u)); }
  html:lang(en) #products .gp-pr__name { font-size: calc(26 * var(--u)); line-height: 1.3; margin-top: calc(22 * var(--u)); }
  html:lang(en) #products .gp-pr__badge { font-size: calc(16 * var(--u)); height: auto; line-height: 1.3; padding: calc(6 * var(--u)) calc(20 * var(--u)); margin-top: calc(12 * var(--u)); white-space: normal; }
  html:lang(en) #products .gp-pr__desc { font-size: calc(16 * var(--u)); line-height: 1.55; margin-top: calc(14 * var(--u)); }
  html:lang(en) #products .gp-pr__feats { height: auto; margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; column-gap: calc(22 * var(--u)); }
  html:lang(en) #products .gp-pr__certs { margin: calc(22 * var(--u)) 0 0; }
  html:lang(en) #products .gp-pr__btn, html:lang(en) #products .gp-pr__card--2 .gp-pr__btn { position: static; margin: calc(22 * var(--u)) 0 0; width: auto; min-width: calc(240 * var(--u)); padding: 0 calc(32 * var(--u)); font-size: calc(20 * var(--u)); }
  html:lang(en) #products .gp-pr__note { font-size: calc(18 * var(--u)); line-height: 1.5; }
}
@media (max-width: 900px) {
  html:lang(en) #products .gp-pr__h2 { font-size: clamp(26px, 7.4vw, 36px); }
  html:lang(en) #products .gp-pr__sub { font-size: 14px; }
  html:lang(en) #products .gp-pr__name { font-size: 20px; }
  html:lang(en) #products .gp-pr__badge { height: auto; line-height: 1.3; padding: 6px 16px; font-size: 14px; white-space: normal; }
  html:lang(en) #products .gp-pr__btn, html:lang(en) #products .gp-pr__card--2 .gp-pr__btn { white-space: normal; font-size: 16px; }
}

/* ---- Research + recognition ---- */
@media (min-width: 901px) {
  html:lang(en) #research .gp-rr { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) calc(618 * var(--u)); column-gap: calc(56 * var(--u)); align-items: start; padding: 0 calc(36 * var(--u)) 0 calc(68 * var(--u)); box-sizing: border-box; }
  html:lang(en) #research .gp-rr > * { position: static; }
  html:lang(en) #research .gp-rr__h2 { grid-column: 1; grid-row: 1; font-size: calc(36 * var(--u)); white-space: normal; line-height: 1.25; }
  html:lang(en) #research .gp-rr__body { grid-column: 1; grid-row: 2; width: auto; margin-top: calc(18 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.6; }
  html:lang(en) #research .gp-rr__btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: calc(24 * var(--u)); height: auto; min-height: calc(57.6 * var(--u)); padding: calc(10 * var(--u)) calc(30 * var(--u)); font-size: calc(18 * var(--u)); white-space: normal; text-align: center; }
  html:lang(en) #research .gp-rr__img { grid-column: 2; grid-row: 1 / span 3; }
  html:lang(en) #research .gp-rr__divider { grid-column: 1 / -1; justify-self: center; margin-top: calc(56 * var(--u)); }
  html:lang(en) #research .gp-rr__eyebrow { grid-column: 1 / -1; margin-top: calc(6 * var(--u)); }
  html:lang(en) #research .gp-rr__logos { grid-column: 1 / -1; margin-top: calc(24 * var(--u)); }
  html:lang(en) #research .gp-rr__foot { grid-column: 1 / -1; justify-self: center; width: auto; max-width: calc(1033 * var(--u)); margin-top: calc(28 * var(--u)); }
}
@media (max-width: 900px) {
  html:lang(en) #research .gp-rr__btn { height: auto; min-height: 52px; padding: 12px 24px; font-size: 16px; white-space: normal; text-align: center; }
  html:lang(en) #research .gp-rr__body { font-size: 16px; }
}

/* ---- Testimonials ---- */
@media (min-width: 769px) {
  html:lang(en) #testimonials .gp-ts { height: auto; }
  html:lang(en) #testimonials .gp-ts { padding-top: calc(466 * var(--u)); }
  html:lang(en) #testimonials .gp-ts__slides { position: relative; top: auto; min-height: calc(250 * var(--u)); }
  html:lang(en) #testimonials .gp-ts__q { font-size: calc(22 * var(--u)); line-height: 1.45; max-width: calc(880 * var(--u)); }
  html:lang(en) #testimonials .gp-ts__tag { font-size: calc(14 * var(--u)); }
  html:lang(en) #testimonials .gp-ts__dots { position: static; margin: calc(20 * var(--u)) 0 calc(56 * var(--u)); }
}
@media (max-width: 768px) {
  html:lang(en) #testimonials .gp-ts__q { font-size: 16px; }
  html:lang(en) #testimonials .gp-ts__name span { white-space: normal; }
}

/* ---- Newsletter ---- */
@media (min-width: 901px) {
  html:lang(en) #newsletter .gp-nl { height: auto; min-height: calc(286 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(560 * var(--u))); column-gap: calc(48 * var(--u)); align-content: center; align-items: center; padding: calc(48 * var(--u)) calc(64 * var(--u)); box-sizing: border-box; }
  html:lang(en) #newsletter .gp-nl > * { position: static; }
  html:lang(en) #newsletter .gp-nl__kicker { grid-column: 1; grid-row: 1; font-size: calc(15 * var(--u)); }
  html:lang(en) #newsletter .gp-nl__h2 { grid-column: 1; grid-row: 2; margin-top: calc(12 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.2; white-space: normal; }
  html:lang(en) #newsletter .gp-nl__sub { grid-column: 1; grid-row: 3; margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }
  html:lang(en) #newsletter .gp-nl__form { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; left: auto; top: auto; width: auto; }
  html:lang(en) #newsletter .gp-nl__msg { position: absolute; left: 0; top: calc(72 * var(--u)); }
}
@media (max-width: 900px) {
  html:lang(en) #newsletter .gp-nl__h2 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* ---- Where to find us ---- */
@media (min-width: 901px) {
  html:lang(en) #stores .gp-st__h2 { font-size: calc(44 * var(--u)); line-height: 1.25; }
  html:lang(en) #stores .gp-st__sub { font-size: calc(18 * var(--u)); line-height: 1.5; }
  html:lang(en) #stores .gp-st__card { height: auto; padding-bottom: calc(20 * var(--u)); }
  html:lang(en) #stores .gp-st__info { position: static; padding: calc(16 * var(--u)) calc(84 * var(--u)) 0 calc(18 * var(--u)); }
  html:lang(en) #stores .gp-st__name { font-size: calc(20 * var(--u)); line-height: 1.3; }
  html:lang(en) #stores .gp-st__en { font-size: calc(14 * var(--u)); line-height: 1.4; white-space: normal; margin-top: calc(2 * var(--u)); }
  html:lang(en) #stores .gp-st__go { top: calc(272 * var(--u)); }
}