/* shop.carecenter — storefront
   Care Center brand system · v2026.1

   Follows "CareCenter Logo Guidelines 2026" (PCPI Marketing, v1.0):
     · Palette is the logo's own Pantones only — teal #247088 and coral
       #f2643e — with white as the resting surface. No indigo/sky/violet.
     · Typography is Gotham, self-hosted (see @font-face below).
       Black for headers, Book for sub-heads and body.
     · Aesthetic is "modern, clean, and bold" — solid surfaces with real
       borders, not translucency. The previous glass system rendered every
       container as near-white-on-near-white, so product cards never read
       as distinct objects. Sections now alternate white and a teal tint,
       and every card is opaque white with a defined edge, so the cards
       segment against the band behind them.
     · Brand colour is used for headers, highlights and accents; texture
       stays subtle and never fills a whole background. */

/* ---------- Gotham (self-hosted) ----------
   Hoefler's Gotham has no "Regular" weight — Book is the family's true
   regular, and is what the guidelines mean by "Gotham Regular" for
   sub-heads. Black carries the headers.

   IMPORTANT: no weight of Gotham contains U+20B1 (₱), and this storefront
   prices everything in pesos. Montserrat therefore stays in the stack
   immediately after Gotham — the browser falls back per glyph, so Latin
   renders in Gotham while ₱ (and →) come from Montserrat, which is
   geometric enough to sit beside it without reading as a different face.
   Removing Montserrat from the stack makes every price render as tofu. */
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/gotham-300.5e02542bcd04.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/gotham-400.3ae97c80fba3.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/gotham-500.4f59161ebcd0.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/gotham-700.107632a9e6c9.woff2") format('woff2');
}
/* Black (weight 800/900) is the official "Gotham Black" cut (OTF from
   PCPI Marketing's Gotham package, converted to woff2). Headers and
   prices render in true Black, per the guidelines' hierarchy. */
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/gotham-black.1604f56333f1.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/gotham-black.1604f56333f1.woff2") format('woff2');
}

:root {
  --font-brand: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Brand (from the logo artwork) ---- */
  --teal:      #247088;
  --teal-800:  #143f4e;
  --teal-700:  #1a5568;
  --teal-600:  #1f6178;
  --teal-500:  #247088;
  --teal-400:  #3d8ba5;
  --teal-300:  #6faec4;
  --teal-200:  #a9cfdc;
  --teal-100:  #d7e8ef;
  --teal-50:   #eef5f8;

  --coral:     #f2643e;
  --coral-700: #c43f1d;
  --coral-600: #e04e28;
  --coral-500: #f2643e;
  --coral-400: #f5825f;
  --coral-200: #fbc6b4;
  --coral-100: #fde0d6;
  --coral-50:  #fef2ee;

  /* ---- Surfaces ---- */
  --bg:        #F4F8FA;   /* page — a hair of teal so white cards read as cards */
  --surface:   #FFFFFF;   /* cards, inputs */
  --surface-2: #EEF5F8;   /* tinted band / inset */
  --surface-3: #E3EEF3;   /* deeper inset, thumbs */

  /* ---- Ink ---- */
  --navy:   #10333F;      /* headings — teal-shifted near-black, not blue-grey */
  --ink:    #16313B;
  --ink-2:  #43616D;
  --muted:  #6E8792;
  --muted-2:#9AAEB7;
  --line:   #DCE8ED;
  --line-2: #C6D9E1;

  /* ---- Legacy aliases (templates/partials still reference these) ---- */
  --blue: var(--teal); --blue-400: var(--teal-400); --blue-500: var(--teal-500);
  --blue-600: var(--teal-600); --blue-700: var(--teal-700); --blue-50: var(--teal-50);

  /* ---- Brand marks ----
     The two "Visual Assets" from the 2026 guidelines. Referenced as
     background images so any surface can carry one as a corner accent
     without extra markup. Guidelines are explicit that these "add texture
     or subtle accents, not fill entire backgrounds". */
  --mark-cross: url("../images/brand/cross-cluster.2c4f4f1b4f90.svg");
  --mark-ecg:   url("../images/brand/ecg-line.81b3989d18c5.svg");

  /* No gradient tokens: the brand reads as flat, confident blocks of the
     two Pantones. Anything that needs to step darker uses a solid shade
     (--teal-700, --coral-600) rather than a ramp. */

  /* ---- States ---- */
  --success: #157A67; --success-bg: #E7F5F1;
  --danger:  #C4321F; --danger-bg:  #FDEEEB;
  --warning: #A35A12; --warning-bg: #FDF3E7;

  /* ---- Radius / elevation ---- */
  --r-xs: 10px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 24px;
  --sh-1: 0 1px 2px rgba(16,51,63,.06);
  --sh-2: 0 10px 24px -14px rgba(16,51,63,.22);
  --sh-3: 0 22px 48px -22px rgba(16,51,63,.30);
  /* The workhorse: a hairline edge plus a soft drop, so a white card on a
     white band still has a visible boundary. */
  --sh-card: 0 1px 2px rgba(16,51,63,.05), 0 14px 28px -20px rgba(16,51,63,.28);
  --sh-card-h: 0 2px 4px rgba(16,51,63,.06), 0 22px 40px -22px rgba(16,51,63,.34);
  --sh-teal: 0 12px 26px -12px rgba(36,112,136,.48);
  --sh-coral: 0 12px 26px -12px rgba(242,100,62,.45);
  --nav-h: 76px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-brand);
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Headers: bold and neat, per the guidelines' typography hierarchy. */
h1, h2, h3, h4, h5, h6, .serif {
  font-family: var(--font-brand);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}

a { color: var(--teal-600); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--teal-700); }
img { max-width: 100%; display: block; }

/* ---------- Image loading placeholder ----------
   Card art and product photos each finish downloading at their own pace,
   so without this they pop in one at a time while scrolling - looks like
   the page is stuttering rather than just... loading. shop_base.js adds
   .img-loading up front and swaps in .is-loaded once the image actually
   has pixels (or skips straight to it if the browser already had it
   cached), so a shimmer sits in an image's place instead of blank space
   or a half-drawn photo. */
.img-loading {
  background-image: linear-gradient(100deg, var(--surface-2) 28%, var(--surface-3) 50%, var(--surface-2) 72%);
  background-size: 200% 100%;
  animation: img-shimmer 1.3s ease-in-out infinite;
}
.img-loading.is-loaded {
  animation: none;
  background-image: none;
}
@keyframes img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .img-loading { animation: none; background-image: none; }
}

.container { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral); display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow--teal { color: var(--teal); }

/* ---------- Section bands ----------
   Alternating white / tinted bands are what let a white card read as a
   distinct object. `.section` is the neutral rhythm; `.band` paints the
   full-bleed background behind it. */
.section { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.band { background: var(--surface); }
.band--tint { background: var(--surface-2); }
.band--teal { background: var(--teal); color: #fff; }
.band--teal h2, .band--teal h3 { color: #fff; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.9rem; flex-wrap: wrap; }
.section-head h2 {
  font-weight: 900; font-size: clamp(1.6rem, 2.9vw, 2.2rem);
  letter-spacing: -.03em; margin: .45rem 0 0; line-height: 1.1;
}
.section-head .sub { color: var(--muted); font-size: .92rem; }
.section-head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

/* Short solid coral rule under every section heading. This is the main
   place the palette's second colour now shows up in the page's structure
   rather than only on buttons — teal sets the frame, coral marks it. */
.section-head h2::after {
  content: ""; display: block; width: 52px; height: 4px;
  background: var(--coral); border-radius: 2px; margin-top: .85rem;
}
.section-head--center h2::after { margin-left: auto; margin-right: auto; }

/* Thin ECG trace used as a section divider — the brand's own rule line.
   Solid, not tinted: a translucent version reads as a smudge rather than
   a mark, and this one has a job (dividing two sections) rather than
   being pure decoration. */
.ecg-rule {
  height: 18px; margin: 0 auto;
  background: var(--mark-ecg) no-repeat center/auto 100%;
}
/* The "how it works" heading sits directly above the ECG divider, so its
   own coral underline just doubled up on the same job right next to it -
   scoped off here only; every other section keeps the shared rule. */
#how .section-head h2::after { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: 999px; font-family: var(--font-brand);
  font-weight: 700; font-size: .9rem; letter-spacing: .01em;
  border: 1.5px solid transparent; padding: .78rem 1.6rem; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap; text-decoration: none; line-height: 1.2;
}
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Primary = brand teal. */
.btn-emerald { background: var(--teal); color: #fff; box-shadow: var(--sh-teal); }
.btn-emerald:hover { background: var(--teal-700); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(36,112,136,.55); }

/* Accent = coral, for the one call to action that should win the page. */
.btn-coral { background: var(--coral); color: #fff; box-shadow: var(--sh-coral); }
.btn-coral:hover { background: var(--coral-600); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(242,100,62,.55); }

.btn-ink { background: var(--teal-800); color: #fff; box-shadow: 0 12px 26px -14px rgba(20,63,78,.7); }
.btn-ink:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

.btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--teal-700); box-shadow: var(--sh-1); }
.btn-outline:hover { background: var(--teal-50); border-color: var(--teal-300); color: var(--teal-700); transform: translateY(-1px); }

/* On a teal band, the secondary button inverts. */
.band--teal .btn-outline, .btn-on-teal {
  background: transparent; border-color: rgba(255,255,255,.55); color: #fff;
}
.band--teal .btn-outline:hover, .btn-on-teal:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

.btn-ghost { background: transparent; color: var(--muted); padding: .6rem 1rem; border-color: transparent; }
.btn-ghost:hover { color: var(--teal-700); }
.btn-lg { padding: .9rem 1.9rem; font-size: .98rem; }
.btn-xl { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ---------- Navbar ---------- */
.shop-navbar {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.shop-navbar.scrolled { box-shadow: 0 6px 20px -16px rgba(16,51,63,.5); }
.shop-navbar .nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shop-navbar .brand { display: flex; align-items: center; color: var(--ink); }
.shop-navbar .brand img { height: 46px; width: auto; }
.shop-navbar .nav-links { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.shop-navbar .nav-links .nav-link {
  color: var(--ink-2); font-weight: 600; font-size: .88rem; padding: .5rem .9rem;
  border-radius: 999px; transition: color .15s, background .15s;
}
.shop-navbar .nav-links .nav-link:hover { color: var(--teal-700); background: var(--teal-50); }

.cart-badge {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: .86rem;
  box-shadow: var(--sh-1);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s, color .18s;
}
.cart-badge:hover { border-color: var(--teal-300); color: var(--teal-700); transform: translateY(-1px); box-shadow: var(--sh-2); }
.cart-badge .count {
  min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 800;
}

@media (max-width: 480px) {
  :root { --nav-h: 62px; }
  .shop-navbar .brand img { height: 34px; }
  .shop-navbar .nav-links { gap: .3rem; }
  .shop-navbar .nav-links .nav-link { display: none; }
  .cart-badge { padding: .5rem .75rem; font-size: 0; gap: 0; }
  .cart-badge .fa-bag-shopping { font-size: .95rem; }
  .cart-badge .count { font-size: .68rem; }
}

/* ---------- Hero ----------
   Flat white stage, no corner mark - the card visual and chip row carry
   enough of their own visual weight already. The brand marks still show
   up elsewhere (gift band, the "how it works" section divider). */
.hero { padding: 3.4rem 0 3.9rem; position: relative; overflow: hidden; background: var(--surface); }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.6rem; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 {
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin: .85rem 0 1rem; color: var(--navy);
  text-transform: uppercase;
}
.hero h1 .hero-line-1 { color: var(--coral); }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero h1 .dot { color: var(--teal); }
.hero .lead { color: var(--ink-2); font-size: 1.04rem; max-width: 470px; margin-bottom: 1.6rem; }
.hero .hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.reassurance { display: flex; flex-wrap: wrap; gap: .55rem; }
.reassurance .chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 700; color: var(--ink-2);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .45rem .9rem; box-shadow: var(--sh-1);
}
.reassurance .chip .fa { color: var(--teal); font-size: .92em; }
/* Alternate chips tick in coral so the reassurance row carries both brand tones. */
.reassurance .chip:nth-child(2) .fa { color: var(--coral); }

.hero-grid > div > * { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-grid > div > *:nth-child(1) { animation-delay: .02s; }
.hero-grid > div > *:nth-child(2) { animation-delay: .09s; }
.hero-grid > div > *:nth-child(3) { animation-delay: .16s; }
.hero-grid > div > *:nth-child(4) { animation-delay: .23s; }
.hero-grid > div > *:nth-child(5) { animation-delay: .30s; }
.hero-stage { animation: rise .8s cubic-bezier(.2,.7,.3,1) both .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Membership card object ---------- */
.hero-stage { position: relative; display: flex; justify-content: center; align-items: center; padding: 1.6rem 2.6rem; }
.hero-card-obj { position: relative; display: inline-block; perspective: 1200px; animation: card-bob 7s ease-in-out infinite; }
@keyframes card-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.member-card {
  position: relative; width: 355px; max-width: 100%; aspect-ratio: 1.586/1;
  border-radius: 20px; padding: 1.6rem 1.5rem; color: #EAF4F8;
  display: flex; flex-direction: column;
  /* Solid brand teal, not a ramp: a Care Center card should read as one
     confident block of colour. --mc-g1 is the product's own card colour
     (teal by default); --mc-g2 is kept only as the darker shade for the
     footer band below, so existing product records keep working. */
  background: var(--mc-g1, #247088);
  box-shadow: 0 34px 64px -28px rgba(16,51,63,.62);
  overflow: hidden;
}
.hero-card-obj .member-card {
  transform: rotate(-3.5deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .12s ease-out;
}
/* Coral corner block — the teal-and-orange pairing the brand is built on,
   stated on the card object itself. This slot previously held a sweeping
   white "shimmer" gradient; a solid accent is both on-palette and less of
   a stock-template tell. */
.member-card::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 78px; height: 11px; background: var(--coral); pointer-events: none;
}
.member-card .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.member-card .mc-brand { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.member-card .mc-chip { width: 38px; height: 28px; border-radius: 6px; background: var(--teal-200); box-shadow: 0 1px 2px rgba(0,0,0,.25) inset; }
.member-card .mc-type { align-self: flex-start; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-200); font-weight: 800; }
.member-card .mc-number { margin-top: auto; font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.member-card .mc-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: .68rem; letter-spacing: .03em; color: rgba(234,244,248,.82); margin-top: .45rem; }
.member-card .mc-foot .holder { font-size: .84rem; font-weight: 800; color: #fff; }
.member-card .mc-valid { text-align: right; }
.member-card .mc-valid small { display: block; font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
/* Real artwork replaces the mock face entirely. */
.mc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-card--art .mc-brand, .member-card--art .mc-type, .member-card--art .mc-chip,
.member-card--art .mc-number, .member-card--art .mc-foot { display: none; }
.member-card--art::after { display: none; }

/* The card keeps its tilt-toward-the-pointer motion (product_list.js still
   sets --mx/--my and .is-tilting), but the roaming white radial "gloss"
   that rode on top of it is gone: a soft moving highlight is the most
   generic effect on the page and reads as a plain gradient, which is
   exactly what the brand is moving away from. */
.gloss { display: none; }

.float-tag {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem;
  padding: .7rem .95rem .7rem .7rem; border-radius: var(--r);
  background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: var(--sh-2); animation: float-a 9s ease-in-out infinite;
}
.float-tag .ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--teal);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.float-tag.ft-2 .ico { background: var(--coral); }
.float-tag b { display: block; font-size: .8rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.float-tag small { display: block; font-size: .68rem; color: var(--muted); line-height: 1.25; }
.float-tag.ft-1 { top: -4%; left: -10%; animation-duration: 8s; }
.float-tag.ft-2 { bottom: -6%; right: -12%; animation-duration: 11s; animation-direction: reverse; }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-stage { order: -1; padding: 1.2rem 3.6rem; }
  .member-card { width: 300px; }
}
@media (max-width: 640px) { .float-tag { display: none; } .hero-stage { padding: .5rem 0; } }
@media (max-width: 560px) { .hero .hero-cta .btn { flex: 1 1 auto; } }

/* ---------- Tier cards ----------
   Opaque white on the tinted band, with a hairline edge — this is the
   segmentation the glass version was missing. */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.4rem; margin-top: 1.2rem; }
.tier-card-wrap { position: relative; }
.tier-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  background: var(--coral); color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .4rem .9rem;
  border-radius: 999px; box-shadow: var(--sh-coral);
}
.tier-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 1.7rem 1.5rem 1.6rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: var(--sh-card);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.tier-card:hover { transform: translateY(-5px); box-shadow: var(--sh-card-h); border-color: var(--teal-200); }
/* The featured tier is marked by a solid brand edge, not a diffuse glow,
   and capped with a coral bar so the promoted card is the one place on
   the grid where both brand colours meet. */
.tier-card--featured {
  border-color: var(--teal); border-width: 2px; box-shadow: var(--sh-card-h);
  overflow: hidden;
}
.tier-card--featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 6px; background: var(--coral);
}
.tier-card--featured:hover { border-color: var(--teal-700); }

.tier-art { position: relative; perspective: 1000px; margin: 0 auto 1.3rem; width: 100%; max-width: 268px; }
.tier-art-link { display: block; }
.tier-art .member-card {
  width: 100%;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .12s ease-out;
}
.tier-card h3 { font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
.tier-card h3 a { color: var(--navy); }
.tier-card h3 a:hover { color: var(--teal); }
.tier-sub { color: var(--muted); font-size: .85rem; margin: 0 0 .9rem; line-height: 1.5; }
.tier-price { font-weight: 900; font-size: 1.75rem; letter-spacing: -.03em; color: var(--navy); margin: 0 0 1rem; }
.tier-price small { font-size: .66rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.tier-benefits { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.tier-benefits li { position: relative; padding-left: 1.5rem; font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.tier-benefits li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem;
  color: var(--teal); position: absolute; left: 0; top: .2em;
}
.tier-card form { margin-top: auto; }

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ---------- Gift band ----------
   Solid brand teal with white text — the guidelines' recommended pairing
   when a Pantone is used as a background. */
.gift-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(1.9rem, 4vw, 3.1rem);
  background: var(--teal); color: #fff;
  box-shadow: 0 26px 52px -28px rgba(16,51,63,.55);
}
/* Coral base rule — the teal panel finishes on an orange edge. */
.gift-band::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 7px; background: var(--coral); pointer-events: none; z-index: 1;
}
.gift-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.25fr; gap: 2.6rem; align-items: center; }
.gift-eyebrow { margin-bottom: .2rem; color: var(--coral-200); }
.gift-band h2 { font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; margin: .6rem 0 .9rem; color: #fff; }
.gift-band > .gift-grid > div:first-child p { color: rgba(255,255,255,.86); font-size: .96rem; max-width: 40ch; margin: 0 0 1.5rem; }
.gift-band .btn-ink { background: var(--coral); box-shadow: var(--sh-coral); }
.gift-band .btn-ink:hover { background: var(--coral-600); }

/* Horizontal step flow — icon circles on a dotted connector, echoing the
   reference layout but in brand teal rather than a white card. */
.gift-flow { position: relative; display: flex; align-items: flex-start; }
.gift-flow::before {
  content: ""; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 0;
  border-top: 2px dotted rgba(255,255,255,.4); z-index: 0;
}
.gflow-step {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  padding: 0 .5rem;
}
.gf-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.gflow-step b { display: block; font-size: .8rem; font-weight: 800; color: #fff; line-height: 1.3; }
.gflow-step small { display: block; color: rgba(255,255,255,.78); font-size: .72rem; line-height: 1.4; }

@media (max-width: 860px) {
  .gift-grid { grid-template-columns: 1fr; gap: 2rem; }
  .gift-flow { flex-wrap: wrap; row-gap: 1.6rem; }
  .gift-flow::before { display: none; }
  .gflow-step { flex: 1 1 45%; }
}
@media (max-width: 480px) { .gflow-step { flex: 1 1 100%; } }

/* ---------- How it works ---------- */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.2rem; }
.how-card {
  text-align: center; padding: 1.7rem 1.2rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--sh-card);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.how-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-h); border-color: var(--teal-200); }
.how-card .n {
  width: 38px; height: 38px; margin: 0 auto .9rem; border-radius: 50%; background: var(--teal);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem;
}
.how-card b { display: block; color: var(--navy); font-size: .95rem; margin-bottom: .35rem; font-weight: 800; }
.how-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

@media (max-width: 860px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .how-grid { grid-template-columns: 1fr; } }

/* ---------- Value strip (icon row) ---------- */
.value-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-item { display: flex; gap: .7rem; align-items: flex-start; }
.value-item .vi {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal); font-size: .95rem;
}
.value-item:nth-child(even) .vi { background: var(--coral-50); color: var(--coral); }
.value-item b { display: block; font-size: .84rem; font-weight: 800; color: var(--navy); line-height: 1.25; }
.value-item small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: .1rem; }
@media (max-width: 1000px) { .value-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .value-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Product grid ---------- */
/* Fixed 3-up rather than auto-fill: auto-fill's 250px minimum packed 4
   narrow columns onto a wide viewport, and the card art (native ratio
   ~1.586:1) got cropped to fit thumb tiles narrower than its own shape,
   clipping the Care Center wordmark on the right edge. Three wider
   columns give each card enough width that its art shows uncropped. */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 880px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
.product-card {
  position: relative; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sh-card);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--sh-card-h); border-color: var(--teal-200); }

.product-card .thumb {
  display: block; position: relative; overflow: hidden; height: 164px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
/* ~1.586:1, matching the card art's own ratio at the new 3-up column
   width, so cover crops next to nothing instead of clipping the sides. */
.product-card.is-card .thumb { height: 240px; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .thumb.is-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
}
/* A product with no image is left as a plain surface — no brand-mark
   accent here. The marks are used sparingly, on a couple of section
   accents, not repeated on every empty tile across the grid. */
.medallion {
  position: relative; z-index: 1;
  width: 62px; height: 62px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.65rem; color: #fff; background: var(--teal);
  box-shadow: 0 12px 22px -10px rgba(36,112,136,.55), 0 0 0 6px rgba(255,255,255,.7);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover .medallion { transform: translateY(-3px) scale(1.04); }
.product-card .thumb .ribbon { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 999px;
}
.pill.card    { background: var(--teal); color: #fff; }
.pill.package { background: var(--coral); color: #fff; }
.pill.service { background: var(--teal-800); color: #fff; }

.product-card .body { padding: 1.15rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-card .cat { font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--coral); }
.product-card h3 { font-weight: 800; font-size: 1.05rem; margin: 0; letter-spacing: -.02em; line-height: 1.25; }
.product-card h3 a { color: var(--navy); }
.product-card h3 a:hover { color: var(--teal); }
.product-card .desc { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.5; }
.product-card .card-benefits { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.product-card .card-benefits li { display: flex; gap: .45rem; align-items: flex-start; font-size: .76rem; color: var(--ink-2); line-height: 1.4; }
.product-card .card-benefits li .fa { color: var(--teal); margin-top: .18rem; font-size: .66rem; }
.product-card .card-benefits li:nth-child(n+4) { display: none; }
.product-card .card-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.product-card .price { font-size: 1.2rem; font-weight: 900; color: var(--navy); letter-spacing: -.02em; white-space: nowrap; }
.product-card .price small { font-size: .66rem; color: var(--muted); font-weight: 600; margin-left: .15rem; }
.product-card .quick-add { margin: 0; }
.product-card .add-btn { padding: .58rem 1.15rem; font-size: .82rem; }
.product-card .quick-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.product-card .terms-link { font-size: .74rem; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.product-card .terms-link:hover { color: var(--teal-700); }

/* ---------- Tier grid terms link ---------- */
.tier-terms { margin: -.6rem 0 1rem; }
.tier-terms .terms-link { font-size: .76rem; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.tier-terms .terms-link:hover { color: var(--teal-700); }

/* ---------- Terms & Conditions modal ---------- */
/* Bootstrap's .modal-dialog-centered + .modal-dialog-scrollable conflict:
   long content taller than the viewport makes the dialog re-center/jump on
   every scroll tick. We keep .modal-dialog-scrollable and center the dialog
   ourselves (flex-start on tall content, center on short) so scrolling the
   terms is stable and never flickers. */
.shop-modal-dialog { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.shop-modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.shop-modal-content .modal-header { border-bottom: 1px solid var(--line); padding: 1.25rem 1.5rem; }
.shop-modal-content .modal-title { font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.shop-modal-content .modal-body { padding: 1.5rem; }
.shop-modal-content .modal-footer { border-top: 1px solid var(--line); padding: 1rem 1.5rem; }
.shop-modal-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); margin: 0 0 .5rem; }
.shop-modal-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.shop-modal-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.shop-modal-list li .fa { color: var(--teal); margin-top: .22rem; font-size: .8rem; }
.shop-modal-copy { font-size: .92rem; color: var(--ink); line-height: 1.65; }
/* Numbered legal terms from Product.terms_and_conditions - a single
   paragraph per line, wrapped by linebreaksbr. */
.shop-modal-terms { font-size: .9rem; color: var(--ink); line-height: 1.7; white-space: pre-line; }
.shop-modal-note { font-size: .84rem; color: var(--muted); background: var(--surface-2); border-radius: var(--r-sm); padding: .8rem 1rem; margin: 0 0 1rem; display: flex; gap: .6rem; align-items: flex-start; }
.shop-modal-note .fa { color: var(--teal); margin-top: .2rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Product detail ---------- */
.pd-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; padding: 1.5rem 0 1rem; }
@media (max-width: 880px) { .pd-grid { grid-template-columns: 1fr; gap: 2rem; } }
.pd-gallery {
  border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--line);
  background: var(--surface-2);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-card);
}
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery .ph { font-size: 4rem; color: var(--teal-300); }
/* Card artwork is a finished, laid-out design (wordmark, logo lockup) at
   the card's own ~1.586:1 ratio, not a photo meant to fill any frame -
   cropping it against the 4:3 default risks cutting the card name off
   the edge. Match the frame to the artwork instead. */
.pd-gallery--card { aspect-ratio: 1.586/1; }
.pd-gallery--card img { object-fit: contain; }
.pd-info { position: sticky; top: calc(var(--nav-h) + 24px); }
.pd-info h1 { font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.08; margin: .6rem 0 .4rem; }
.pd-info .pd-desc { color: var(--ink-2); margin: 0 0 1.5rem; font-size: 1rem; }
.pd-price { font-weight: 900; font-size: 2.1rem; color: var(--navy); letter-spacing: -.03em; }
.pd-price small { font-weight: 600; font-size: .8rem; color: var(--muted); margin-left: .3rem; }
.benefit-list { list-style: none; margin: 0; padding: 0; }
.benefit-list li { display: flex; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
.benefit-list li:last-child { border-bottom: none; }
.benefit-list .fa { color: var(--teal); margin-top: .2rem; }
.info-note { background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--r-sm); padding: .95rem 1.1rem; color: var(--teal-700); font-size: .86rem; }
.info-note .fa { color: var(--teal); }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-row {
  display: flex; gap: 1.1rem; align-items: center; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem;
  box-shadow: var(--sh-card); margin-bottom: .9rem;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s;
}
.cart-row:hover { box-shadow: var(--sh-card-h); transform: translateY(-1px); border-color: var(--teal-200); }
.cart-row .thumb { width: 80px; height: 80px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); flex-shrink: 0; }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-row .thumb .ph { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--teal-300); }
.cart-row .meta { flex: 1; }
.cart-row .meta .name { font-weight: 800; font-size: 1rem; color: var(--navy); }
.cart-row .meta .unit { color: var(--muted); font-size: .85rem; }
.qty-box { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qty-box button { background: transparent; border: none; width: 36px; height: 36px; font-size: 1.15rem; color: var(--muted); cursor: pointer; transition: color .15s; }
.qty-box button:hover { color: var(--teal); }
.qty-box input { width: 42px; text-align: center; border: none; font-weight: 700; background: transparent; color: var(--ink); }
.summary-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; box-shadow: var(--sh-card); position: sticky; top: calc(var(--nav-h) + 16px);
}
.summary-card h4 { font-weight: 800; font-size: 1.12rem; margin: 0 0 1rem; }
.summary-row { display: flex; justify-content: space-between; color: var(--ink-2); margin-bottom: .6rem; font-size: .92rem; }
.summary-row.total { border-top: 1px dashed var(--line-2); padding-top: .9rem; margin-top: .5rem; color: var(--navy); font-weight: 900; font-size: 1.25rem; letter-spacing: -.02em; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state .ic { font-size: 2.4rem; color: var(--teal-300); }
.guarantee { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding: .9rem; background: var(--teal-50); border-radius: var(--r-sm); font-size: .8rem; color: var(--ink-2); }
.guarantee .fa { color: var(--teal); }

/* ---------- Payment flow strip ---------- */
.flow-strip { margin: 0 0 2.4rem; }
.flow-strip .fs-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: .95rem 1.2rem; box-shadow: var(--sh-card);
}
.flow-strip .fs-label { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.flow-step { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.flow-step .fa { color: var(--teal); }
.flow-sep { color: var(--muted-2); font-size: .7rem; }
@media (max-width: 720px) { .flow-sep { display: none; } .flow-strip .fs-inner { gap: .35rem .9rem; } }

/* ---------- Stepper ---------- */
.stepper-wrap { padding: 1.8rem 0 .6rem; }
.shop-stepper { display: flex; justify-content: space-between; align-items: flex-start; gap: .25rem; margin: 0 auto; max-width: 720px; position: relative; }
.shop-stepper::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 2px; background: var(--line-2); border-radius: 2px; }
.step-item { position: relative; z-index: 1; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.step-circle {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; border: 2px solid var(--line-2);
  background: var(--surface); color: var(--muted-2); box-shadow: var(--sh-1); transition: all .25s ease;
}
.step-item.completed .step-circle { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: var(--sh-teal); }
.step-item.current .step-circle { background: var(--coral); border-color: var(--coral); color: #fff; transform: scale(1.08); box-shadow: var(--sh-coral); }
.step-label { font-size: .76rem; font-weight: 700; color: var(--muted-2); }
.step-item.completed .step-label, .step-item.current .step-label { color: var(--navy); }

/* ---------- Checkout ---------- */
.checkout-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 2rem 2.2rem; }
@media (max-width: 600px) { .checkout-card { padding: 1.4rem 1.3rem; } }
.co-title { font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 .3rem; }
.co-sub { color: var(--muted); margin: 0 0 1.6rem; }
.form-label { font-weight: 700; font-size: .84rem; margin-bottom: .35rem; color: var(--ink-2); }
.form-control, .form-select { border-radius: var(--r-sm); border-color: var(--line-2); padding: .78rem .95rem; font-size: .95rem; background: var(--surface); color: var(--ink); font-family: var(--font-brand); }
.form-control:focus, .form-select:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 .22rem rgba(36,112,136,.16); }
.field-group { position: relative; }
.field-group .ico { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.field-group .ico + .form-control { padding-left: 2.4rem; }
.order-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--r-sm); padding: .85rem 1.1rem; }
.order-strip .lbl { color: var(--ink-2); font-size: .82rem; }
.order-strip .val { font-weight: 800; color: var(--navy); }

.purchase-mode-picker { border: 0; padding: 0; margin: 0 0 .4rem; }
.purchase-mode-picker legend { float: none; width: auto; padding: 0; }
.pm-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 600px) { .pm-options { grid-template-columns: 1fr; } }
.pm-option { position: relative; display: block; cursor: pointer; margin: 0; }
.pm-option input { position: absolute; opacity: 0; pointer-events: none; }
.pm-option .pm-body {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: .9rem 1rem; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pm-option .pm-body .fa-solid { color: var(--teal); margin-top: .2rem; }
.pm-option .pm-body small { color: var(--muted); line-height: 1.4; display: inline-block; }
.pm-option input:checked + .pm-body { border-color: var(--teal); background: var(--teal-50); box-shadow: 0 0 0 .18rem rgba(36,112,136,.13); }
.pm-option input:focus-visible + .pm-body { outline: 2px solid var(--teal); outline-offset: 2px; }
.recipient-fields { border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); padding: 1rem 1.1rem; background: var(--surface-2); }
.recipient-fields .recipient-head { display: flex; gap: .7rem; align-items: flex-start; }
.recipient-fields .recipient-head .fa-gift { color: var(--coral); margin-top: .25rem; }

/* ---------- Payment / QR ---------- */
.pay-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .pay-layout { grid-template-columns: 1fr; } }
.qr-card { text-align: center; background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--r-lg); padding: 1.9rem; }
.qr-card .merchant { font-weight: 800; font-size: 1.08rem; color: var(--teal-700); display: inline-flex; align-items: center; gap: .5rem; }
.qr-card .merchant .fa { color: var(--teal); }
.qr-card .qr-frame { display: inline-flex; padding: .85rem; background: #fff; border-radius: var(--r); box-shadow: var(--sh-2); margin: 1rem 0; }
.qr-card .qr-frame img { width: 220px; height: 220px; object-fit: contain; border-radius: var(--r-sm); }
.qr-card .amount-block { margin-top: .4rem; }
.qr-card .amount-block .lbl { font-size: .76rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.qr-card .amount-block .amt { font-weight: 900; font-size: 2.1rem; color: var(--navy); letter-spacing: -.03em; line-height: 1.15; }
.qr-card .ref { color: var(--muted); font-size: .84rem; margin-top: .3rem; }
.qr-card .ref strong { color: var(--navy); font-weight: 800; }
.pay-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.pay-steps li { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: .92rem; counter-increment: step; }
.pay-steps li:last-child { border-bottom: none; }
.pay-steps li::before { content: counter(step,decimal-leading-zero); flex-shrink: 0; font-weight: 900; color: var(--coral); font-size: .95rem; min-width: 1.6rem; }

/* ---------- Proof upload ---------- */
.proof-drop { display: block; border: 2px dashed var(--line-2); border-radius: var(--r); padding: 2.2rem; text-align: center; background: var(--surface); color: var(--muted); cursor: pointer; transition: all .18s ease; }
.proof-drop:hover, .proof-drop.drag { border-color: var(--teal); background: var(--teal-50); }
.proof-drop .ic { font-size: 2.2rem; color: var(--teal-300); margin-bottom: .6rem; }
.proof-drop strong { color: var(--navy); }
.proof-preview { margin-top: 1.2rem; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--line); background: var(--surface-2); }
.proof-preview img, .proof-preview iframe { width: 100%; max-height: 480px; object-fit: contain; display: block; }

/* ---------- Status ---------- */
.status-banner { border-radius: var(--r); padding: 1.6rem 1.8rem; display: flex; gap: 1rem; align-items: center; }
.status-banner .si { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.status-banner.pending { background: var(--warning-bg); border: 1.5px solid #F2DFC2; color: #7A4A0E; }
.status-banner.pending .si { background: rgba(163,90,18,.14); color: var(--warning); }
.status-banner.approved { background: var(--success-bg); border: 1.5px solid #BFE5DC; color: #0D5A4C; }
.status-banner.approved .si { background: rgba(21,122,103,.14); color: var(--success); }
.status-banner.rejected { background: var(--danger-bg); border: 1.5px solid #F5CFC8; color: #8E2417; }
.status-banner.rejected .si { background: rgba(196,50,31,.14); color: var(--danger); }
.status-banner h3 { font-weight: 800; margin: 0 0 .2rem; font-size: 1.22rem; letter-spacing: -.02em; }
.prov-list { margin-top: 1.4rem; }
.prov-list .ph { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; margin-bottom: .8rem; color: var(--navy); }
.prov-list .ph .fa { color: var(--teal); }
.prov-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.prov-table th, .prov-table td { padding: .78rem .9rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.prov-table th { color: var(--muted); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.card-number { font-weight: 800; letter-spacing: .08em; color: var(--teal); font-variant-numeric: tabular-nums; }
.provisioned-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.15rem; }
.provisioned-card { min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--sh-card); }
.provisioned-card__face { padding: .8rem; background: var(--teal-50); }
.provisioned-card__face img { display: block; width: 100%; aspect-ratio: 506 / 319; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 8px 18px rgba(20,63,78,.13); }
.provisioned-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem .95rem 1rem; }
.provisioned-card__meta > div { min-width: 0; display: grid; gap: .22rem; }
.provisioned-card__label { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.provisioned-card__meta .card-number { display: block; overflow-wrap: anywhere; font-size: .88rem; }
.provisioned-card__meta .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) { .provisioned-card__meta { align-items: flex-start; flex-direction: column; } }

/* ---------- Footer ---------- */
.shop-footer {
  background: var(--teal-800); color: #A9C4CE; margin-top: 0;
  padding: 3.2rem 0 2rem; position: relative; overflow: hidden;
}
/* Coral top rule + cross cluster: the footer is a solid deep-teal slab
   finished with an orange edge, rather than a teal slab with a coral
   glow bleeding through it. */
.shop-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 6px; background: var(--coral); pointer-events: none;
}
.shop-footer .container { position: relative; }
.shop-footer .row-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.shop-footer .f-brand { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.18rem; color: #F2F8FA; }
/* Guidelines §5/§7: a monotone version of the mark is the approved
   treatment when the full-colour logo would lose clarity — its teal
   elements are near-invisible against the dark teal footer. */
.shop-footer .f-brand img { height: 36px; filter: brightness(0) invert(1); opacity: .95; }
.shop-footer .f-note { color: #8FAEBA; font-size: .85rem; max-width: 380px; margin-top: .85rem; line-height: 1.6; }
.shop-footer a { color: #A9C4CE; }
.shop-footer a:hover { color: #fff; }
.shop-footer .f-cols { display: flex; gap: 3rem; }
.shop-footer .f-col h6 { color: #F2F8FA; font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; margin: 0 0 .85rem; }
.shop-footer .f-col ul { list-style: none; margin: 0; padding: 0; }
.shop-footer .f-col li { margin-bottom: .5rem; font-size: .87rem; }
.shop-footer .f-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.4rem; color: #7C9CA9; font-size: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* Pre-footer CTA band */
.cta-band { background: var(--teal); color: #fff; padding: 2.6rem 0; }
.cta-band .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.cta-band h3 { color: #fff; font-weight: 900; font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 0 0 .3rem; letter-spacing: -.02em; }
.cta-band p { margin: 0; color: rgba(255,255,255,.82); font-size: .92rem; }
.cta-band .cta-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: calc(var(--nav-h) + 14px); right: 18px; z-index: 1080; display: flex; flex-direction: column; gap: .6rem; max-width: 380px; }
.toast-msg {
  display: flex; gap: .7rem; align-items: flex-start; background: var(--surface);
  border: 1.5px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: var(--r-sm); padding: .9rem 1rem; box-shadow: var(--sh-3); font-size: .9rem; color: var(--ink);
  animation: toast-in .35s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.toast-msg.success { border-left-color: var(--success); }
.toast-msg.error { border-left-color: var(--danger); }
.toast-msg.warning { border-left-color: var(--warning); }
.toast-msg .fa { margin-top: .15rem; }
.toast-msg.success .fa { color: var(--success); }
.toast-msg.error .fa { color: var(--danger); }
.toast-msg.warning .fa { color: var(--warning); }

/* ---------- Misc ---------- */
.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 700; font-size: .86rem; margin-bottom: 1.2rem; }
.back-link:hover { color: var(--teal-700); }
.link-accent { color: var(--coral); font-weight: 800; display: inline-flex; align-items: center; gap: .4rem; }
.link-accent:hover { color: var(--coral-600); }

/* ---------- Contact Support ---------- */
.contact-wrap { max-width: 820px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 1.8rem 1.4rem; text-align: center; box-shadow: var(--sh-card);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-h); }
.contact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal-50);
  color: var(--teal); font-size: 1.2rem; margin-bottom: .9rem;
}
.contact-card h3 { font-weight: 800; font-size: 1.05rem; margin: 0 0 .4rem; color: var(--navy); }
.contact-card p { color: var(--muted); font-size: .88rem; margin: 0 0 1.1rem; line-height: 1.5; }
.contact-card .btn { font-size: .82rem; padding: .65rem 1.2rem; }

.contact-faq { margin-top: 2.8rem; }
.contact-faq h3 { font-weight: 800; font-size: 1.2rem; color: var(--navy); margin: 0 0 1.2rem; }
.faq-item { padding: 1.1rem 0; border-bottom: 1px dashed var(--line-2); }
.faq-item:last-child { border-bottom: none; }
.faq-item b { display: block; color: var(--navy); font-size: .95rem; margin-bottom: .35rem; }
.faq-item p { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.55; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-grid > div > *, .hero-stage, .member-card, .toast-msg, .reveal { opacity: 1 !important; transform: none !important; }
}