/*
Theme Name: VN Codes Store
Theme URI: https://vncodes.in
Author: UnfoldCRO
Description: Storefront theme for VN Codes — premium white-and-black creator store. VN app reel templates and QR codes, pay-once / lifetime access. Custom commerce via the vncodes-store plugin.
Version: 0.1.0
Text Domain: vncodes
*/

/* ===================================================================
   REEL STUDIO — design tokens
   =================================================================== */
/* ===================================================================
   VN Codes — design tokens
   Source: design/VN Brand Guide.dc.html (Brand Guidelines v1.0, Aug 2026).
   White page, warm Ink text, Brand Red for action. Greys are warm
   (#F6F5F5 / #EBE8E8 / #8A8585 / #6B6666), not neutral — mixing cool
   greys with the warm red reads muddy, which is why the whole scale
   is warm-biased.
   Contrast on white: ink 17.9:1, muted 5.5:1, red 4.6:1. muted-2
   (#8A8585, 3.5:1) is specified for meta/captions only — never body.
   =================================================================== */
:root {
  /* Surfaces */
  --bg: #FFFFFF;          /* page background — the site default */
  --surface: #FFFFFF;
  --surface-2: #F6F5F5;   /* cards, pills */
  --surface-3: #EBE8E8;   /* hairline borders, deeper pills */
  --line: #EBE8E8;
  --line-2: #DCD8D8;

  /* Ink + text */
  --text: #141212;        /* Ink — text, dark sections, footer, chips */
  --muted: #6B6666;       /* secondary copy */
  --muted-2: #8A8585;     /* meta text, captions only */

  /* Brand */
  --accent: #E01E2F;      /* Brand Red — accents, active states, links */
  --accent-ink: #FFFFFF;  /* text on red */
  --accent-dim: #C40F22;  /* pressed / gradient end */
  --red-tint: #FDEEEE;    /* badges, highlight chips, form panels */
  --grad-red: linear-gradient(180deg, #EF2038 0%, #C40F22 100%); /* primary buttons */
  --gold: #F0A500;        /* star ratings ONLY — never elsewhere */

  /* Type — Sora for headings/buttons/numbers, Manrope for all body copy */
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Radii — pills 999, cards 16–18, sections/bands 22–28 */
  --radius: 18px;
  --radius-sm: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --maxw: 1380px;
  --head: 68px;

  /* Category identities. The brand has exactly one accent, so category tiles
     get depth from Ink-toned gradients rather than a second hue — red stays
     reserved for action, which is what keeps the CTA readable as the CTA. */
  --grad-coral:   linear-gradient(155deg, #3A3434 0%, #141212 100%);
  --grad-magenta: linear-gradient(155deg, #4A4242 0%, #1E1A1A 100%);
  --grad-blue:    linear-gradient(155deg, #5A5252 0%, #2A2525 100%);
  --grad-purple:  linear-gradient(155deg, #2A2525 0%, #0D0B0B 100%);
  --grad-photo:   linear-gradient(155deg, #524A4A 0%, #201C1C 100%);
  --grad-lime:    linear-gradient(155deg, #423B3B 0%, #171414 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.9rem + 0.28vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ===================================================================
   Themed form controls (never native OS widgets)
   =================================================================== */
/* checkboxes */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px;
  background: var(--surface-2); cursor: pointer; position: relative;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
input[type="checkbox"]:hover { border-color: var(--muted); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* native select fallback theming (where a custom dropdown isn't used) */
select { -webkit-appearance: none; appearance: none; background-color: var(--surface-2); color: var(--text); }
/* themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* themed custom dropdown (select replacement) */
.tdrop { position: relative; display: inline-flex; align-items: center; }
.tdrop-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 0.88rem; font-family: inherit; transition: border-color 150ms var(--ease); }
.tdrop-btn:hover { border-color: var(--line-2); }
.tdrop.open .tdrop-btn { border-color: var(--accent); }
.tdrop-caret { width: 14px; height: 14px; transition: transform 180ms var(--ease); color: var(--muted); }
.tdrop.open .tdrop-caret { transform: rotate(180deg); }
.tdrop-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; z-index: 130; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; box-shadow: 0 20px 44px -18px rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms var(--ease); }
.tdrop.open .tdrop-menu { opacity: 1; visibility: visible; transform: none; }
.tdrop-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.tdrop-opt:hover { background: var(--surface-2); color: var(--text); }
.tdrop-opt.is-sel { color: var(--accent); }
.tdrop-opt.is-sel::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.wrap { width: 90%; max-width: var(--maxw); margin: 0 auto; padding: 0; }

/* Interactive UI shows the pointer (not the text I-beam) and isn't text-selectable */
button, .btn, summary, [role="button"], a,
.pcard, .bb-card, .bb-tab, .mtab-i, .chip, .foot-pill,
.tdrop-btn, .tdrop-opt, .add-cart-btn, .bb-toggle, .reel-play,
.nav-acct-disc, .pcard .name, .pcard .cat, .pcard .price {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Headings: Sora 700, sentence case. The previous settings were tuned for Anton
   (single-weight, all-caps display face) — 400 weight renders Sora anaemic, and
   uppercase contradicts the brand guide, whose own samples are sentence case
   ("Templates that feel viral", "Can't decide? Swipe."). Uppercase is reserved
   for overlines and buttons. Tracking follows the spec: -1.5px display, -1px h2. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}
h3, h4 { font-weight: 600; letter-spacing: -0.02em; }

/* Overline — the one heading-ish element that IS uppercase. */
.overline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.227em; /* +2.5px at 11px */
  text-transform: uppercase;
}
p { text-wrap: pretty; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }

/* ===================================================================
   Buttons
   =================================================================== */
/* Brand guide: all buttons are Sora 700, UPPERCASE, +0.8px tracking, full pill. */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.875rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.8px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
}
.btn svg { flex-shrink: 0; }

/* Primary — red gradient pill. "One per view" per the guide, so the shadow is
   tinted with Brand Red rather than the lime this fork inherited from VNT. */
.btn-primary { background: var(--grad-red); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(224,30,47,0.45); }
.btn-primary:active { transform: scale(0.99); }

/* Secondary — ink outline pill. */
.btn-secondary, .btn-ghost {
  background: transparent; color: var(--text); border: 1.5px solid var(--text);
}
.btn-secondary:hover, .btn-ghost:hover { transform: translateY(-2px); background: var(--text); color: #fff; }
.btn-secondary:active, .btn-ghost:active { transform: scale(0.99); }

.btn-lg { padding: 16px 30px; font-size: 0.95rem; }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); opacity: 0.9; }

/* ===================================================================
   Promo strip + sticky nav
   =================================================================== */
.promo { background: var(--accent); color: var(--accent-ink); overflow: hidden; padding: 8px 0; }
.promo-track { display: flex; width: max-content; will-change: transform; animation: promo-marquee 32s linear infinite; }
.promo-set { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; flex-shrink: 0; white-space: nowrap; }
.promo-track span { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.01em; }
.promo:hover .promo-track { animation-play-state: paused; }
@keyframes promo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 11, 15, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.brand .brand-logo, .brand svg, .brand img { height: 30px; width: auto; display: block; }
.foot-brand .brand .brand-logo, .foot-brand .brand svg, .foot-brand .brand img { height: 34px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; }
.brand-name { color: var(--text); }
.brand-dot { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 0.95rem; color: var(--muted); font-weight: 500; white-space: nowrap; transition: color 180ms var(--ease); }
.nav-links a:hover { color: var(--text); }

/* mega menu */
.nav-mega { position: relative; display: inline-flex; }
.nav-mega-trigger { display: inline-flex; align-items: center; gap: 5px; }
.mega-caret { transition: transform 200ms var(--ease); }
.nav-mega:hover .mega-caret, .nav-mega:focus-within .mega-caret, .nav-mega.is-open .mega-caret { transform: rotate(90deg); color: var(--accent); }
.nav-mega::after { content: ""; position: absolute; left: -20px; right: -40px; top: 100%; height: 20px; } /* hover bridge over the gap */
.mega {
  position: absolute; top: calc(100% + 16px); left: -20px; z-index: 120;
  width: min(80vw, 980px); display: grid; grid-template-columns: 2.4fr 1fr; gap: 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.75);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms var(--ease);
}
.nav-mega:hover .mega, .nav-mega:focus-within .mega, .nav-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-h { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.mega-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; }
.mega-cat { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--muted); font-size: 0.9rem; transition: background 150ms var(--ease), color 150ms var(--ease); }
.mega-cat:hover { background: var(--surface-2); color: var(--text); }
.mega-cat-thumb { width: 42px; height: 28px; border-radius: 7px; flex-shrink: 0; background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--line); }
.mega-cat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-cat .mega-n { color: var(--muted-2); font-size: 0.76rem; flex-shrink: 0; }
.mega-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--accent); font-size: 0.88rem; font-weight: 600; }
.mega-all:hover { color: var(--accent); text-decoration: underline; }
.mega-col-tags { border-left: 1px solid var(--line); padding-left: 22px; }
.mega-tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.mega-tag { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 0.82rem; color: var(--muted); transition: border-color 150ms var(--ease), color 150ms var(--ease); }
.mega-tag:hover { border-color: var(--accent); color: var(--text); }

.search-wrap { position: relative; margin-left: auto; flex: 0 1 280px; display: flex; align-items: center; }
.search-ic { position: absolute; left: 13px; color: var(--muted-2); display: grid; place-items: center; pointer-events: none; }
.search-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 10px 14px 10px 38px; font-size: 0.9rem; font-family: inherit;
  transition: border-color 180ms var(--ease);
}
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); display: none; z-index: 300;
  max-height: min(70vh, 460px); overflow-y: auto; padding: 6px;
}
.search-results:not(:empty) { display: block; }
.search-results::-webkit-scrollbar { width: 10px; }
.search-results::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 3px solid var(--surface); }
.sr-item { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; }
.sr-item + .sr-item { border-top: 1px solid var(--line); }
.sr-item:hover { background: var(--surface-2); }
.sr-thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px; background: var(--surface-2) center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.sr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sr-title { color: var(--text); font-weight: 600; font-size: 0.92rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cat { color: var(--muted-2); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sr-price { color: var(--accent); font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; margin-left: 6px; }
.sr-empty { padding: 22px 14px; color: var(--muted-2); font-size: 0.9rem; text-align: center; }

.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--text); position: relative; transition: background 180ms var(--ease); }
.nav-icon:hover { background: var(--surface-2); }
.cart-badge { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.nav-toggle { display: none; }

/* logged-in account: initial disc + dropdown */
.nav-acct { position: relative; }
.nav-acct-disc { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body, inherit); font-weight: 700; font-size: 0.92rem; line-height: 1; letter-spacing: 0; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
@media (max-width: 640px) { .nav-acct-disc { width: 34px; height: 34px; font-size: 0.85rem; } }
.nav-acct-disc:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(224,30,47,0.28); }
.acct-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms var(--ease); z-index: 120; }
.nav-acct.is-open .acct-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-acct.is-open .nav-acct-disc { box-shadow: 0 0 0 3px rgba(224,30,47,0.3); }
.acct-hi { padding: 8px 12px 10px; font-size: 0.92rem; color: var(--muted, #a1a1aa); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-hi strong { color: var(--text); }
.acct-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 0.92rem; transition: background 150ms var(--ease); }
.acct-link:hover { background: var(--surface-2); }
.acct-link svg { flex: 0 0 auto; opacity: 0.85; }
.acct-logout { color: var(--accent); }
.acct-logout svg { stroke: var(--accent); }

/* mini-cart drawer */
.mc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 220ms var(--ease); }
body.mc-open .mc-overlay { opacity: 1; visibility: visible; }
.mini-cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 90vw); z-index: 210;
  background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform 280ms var(--ease);
  display: flex; flex-direction: column;
}
body.mc-open .mini-cart:not(.wish-drawer) { transform: translateX(0); }
body.mc-open { overflow: hidden; }
/* Wishlist drawer reuses the mini-cart shell but has its own open state + overlay. */
.wish-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 220ms var(--ease); }
body.wish-open .wish-overlay { opacity: 1; visibility: visible; }
body.wish-open .wish-drawer { transform: translateX(0); }
body.wish-open { overflow: hidden; }
/* Heart toggles: on cards + on the PDP button */
.card-wish { position: absolute; top: 10px; right: 10px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; background: rgba(8,8,12,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 150ms var(--ease), transform 120ms var(--ease); }
.card-wish svg { width: 17px; height: 17px; }
.card-wish:hover { transform: scale(1.08); }
.card-wish.is-wished { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.card-wish.is-wished svg { fill: currentColor; }
.pdp-wish.is-wished { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pdp-wish.is-wished svg { fill: currentColor; }
.mc-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.mc-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--text); }
.mc-close:hover { background: var(--surface-2); }
.mc-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.mc-foot { padding: 18px 20px; border-top: 1px solid var(--line); }
.mc-empty { color: var(--muted); text-align: center; padding: 48px 16px; display: grid; gap: 16px; place-items: center; }
/* cart line items */
.mc-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc-item .mc-thumb { width: 46px; aspect-ratio: 9/16; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--surface-3); flex-shrink: 0; }
.mc-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mc-cat { font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.mc-name { font-weight: 600; font-size: 0.92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-name:hover { color: var(--accent); }
.mc-price { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--accent); }
.mc-rm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted-2); flex-shrink: 0; transition: background 160ms var(--ease), color 160ms var(--ease); }
.mc-rm:hover { background: var(--surface-2); color: var(--accent); }
/* footer rows */
.mc-nudge { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.mc-nudge strong { color: var(--text); }
.mc-nudge a { color: var(--accent); }
.mc-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; color: var(--muted); padding: 4px 0; }
.mc-row.mc-save { color: var(--accent); }
.mc-row.mc-total { color: var(--text); font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.mc-checkout { width: 100%; justify-content: center; margin-top: 14px; }
.mc-clear { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: 0; color: var(--muted-2); font: inherit; font-size: 0.82rem; text-align: center; cursor: pointer; border-radius: 8px; transition: color 160ms var(--ease), background 160ms var(--ease); }
.mc-clear:hover { color: var(--accent); background: var(--surface-2); }

/* ===================================================================
   Reveal (visible by default; JS enhances; safety net force-reveals)
   =================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   Marquee
   =================================================================== */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 14px 0; }
.marquee-track { display: flex; width: max-content; will-change: transform; animation: marquee 26s linear infinite; }
.marquee-set { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; flex-shrink: 0; white-space: nowrap; }
.marquee-set span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.1rem; color: var(--muted); display: inline-flex; align-items: center; gap: 30px; }
.marquee-set span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ===================================================================
   Sections
   =================================================================== */
.mm-section { padding: clamp(56px, 9vw, 100px) 0; }
.mm-section.surface { background: var(--surface); }
.mm-head { margin-bottom: 38px; max-width: 760px; }
.mm-head h1, .mm-head h2 { font-size: clamp(1.85rem, 5.2vw, 4rem); margin-bottom: 10px; }
.mm-head p { color: var(--muted); font-size: 1.05rem; }
.mm-head.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }

/* ===================================================================
   HERO
   =================================================================== */
.mm-hero { position: relative; padding: clamp(48px, 8vw, 84px) 0 64px; overflow: hidden; }
.mm-hero::before { content: ""; position: absolute; top: -12%; right: -6%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(124,58,237,0.22), transparent 62%); filter: blur(20px); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 22px; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mm-hero h1 { font-size: clamp(2.3rem, 8.5vw, 6.4rem); margin-bottom: 22px; }
.mm-hero h1 .hl { color: var(--accent); }
.mm-hero .lede { font-size: 1.18rem; color: var(--muted); max-width: 32ch; margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.avatars { display: flex; }
.avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; display: grid; place-items: center; color: #0B0B0F; font-weight: 700; font-size: 0.8rem; font-family: var(--font-head); }
.avatars span:first-child { margin-left: 0; }
.hero-trust-text { font-size: 0.92rem; color: var(--muted); }
.hero-trust-text strong { color: var(--text); }

/* hero phone cluster */
.reel-cluster { position: relative; height: 540px; }
.reel-cluster .phone { position: absolute; width: 220px; }
.reel-cluster .p1 { top: 24px; left: 2%; transform: rotate(-7deg); z-index: 2; }
.reel-cluster .p2 { top: 0; right: 2%; transform: rotate(6deg); width: 232px; z-index: 3; }
.reel-cluster .p3 { bottom: -6px; left: 32%; transform: rotate(-2deg); width: 228px; z-index: 4; }

/* feature strip (fallback hero sub-row, kept for compatibility) */
.mm-feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.fs-item { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.fs-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); color: var(--accent); flex-shrink: 0; }
.fs-item strong { display: block; font-size: 0.95rem; }
.fs-item span:not(.fs-ic) { color: var(--muted); font-size: 0.85rem; }

/* Hero backdrop columns — the design scrolls five of them at different speeds.
   -50% is exact because each column renders its tiles twice. */
@keyframes heroScrollY { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .vnc-hero-col { animation: none !important; } }

/* ===================================================================
   Search type-ahead
   =================================================================== */
.vnc-sg {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
  background: #fff; border: 1px solid #ebe8e8; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20,18,18,.16); overflow: hidden; padding: 6px;
  max-height: 420px; overflow-y: auto; text-align: left;
}
.vnc-sg-i {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; color: #141212; text-decoration: none;
}
.vnc-sg-i:hover, .vnc-sg-i.is-on { background: #f6f5f5; }
.vnc-sg-thumb {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: #f3f1f1 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: #c40f22;
}
.vnc-sg-thumb.is-icon svg { width: 16px; height: 16px; }
.vnc-sg-t {
  flex: 1; min-width: 0; font: 600 13px 'Sora', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vnc-sg-parent {
  display: block; font: 400 11px 'Manrope', sans-serif; font-style: normal; color: #8a8585;
}
/* Category and subcategory rows are labelled so the two tiers are tellable
   apart from a template that merely shares the word. */
.vnc-sg-kind {
  flex: none; font: 700 9.5px 'Sora', sans-serif; letter-spacing: .5px;
  text-transform: uppercase; background: #fdeeee; color: #c40f22;
  padding: 3px 8px; border-radius: 999px;
}
.vnc-sg-meta { flex: none; font: 600 11.5px 'Manrope', sans-serif; color: #8a8585; }
@media (max-width: 680px) { .vnc-sg { max-height: 60vh; } }

/* Header menu: centred with tight spacing, as on the live site. */
.vnc-nav { width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) {
  .vnc-nav { gap: 0 16px !important; padding: 0 20px !important; }
}

/* ===================================================================
   Collection page — sticky filters + infinite scroll
   =================================================================== */
/* The sidebar is much shorter than the results grid, so it scrolled away and
   left the visitor no way to change filters without scrolling back up.
   96px clears the sticky site header. */
@media (min-width: 861px) {
  .vnc-coll-side {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Infinite scroll: the button is a real control, not just a sentinel, so
   keyboard and reduced-motion users can still page through. */
.vnc-more { display: flex; justify-content: center; margin-top: 22px; }
.vnc-more button {
  font: 700 12px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
  padding: 13px 26px; border: 2px solid #141212; border-radius: 999px;
  background: #fff; color: #141212; cursor: pointer;
}
.vnc-more button[disabled] { opacity: .55; cursor: default; }
.vnc-more.is-done { display: none; }

/* ===================================================================
   Phone header — VN Mobile.dc.html, frame 01
   Design rhythm: logo row 8px/16px/10px, search pill 2px 16px 0.
   The desktop header simply reflowed before, which left the search box
   squeezed between the logo and the icons and the gaps uneven.
   =================================================================== */
.vnc-burger { display: none; }
.nav-overlay { display: none; }

@media (max-width: 680px) {
  /* Row 1: burger + logo, then the icons. Row 2: search, full width. */
  .vnc-head-row {
    flex-wrap: wrap;
    gap: 12px !important;
    padding: 8px 16px 10px !important;
  }
  .vnc-head-row > a[aria-label] img { height: 30px !important; }

  .vnc-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; flex: none; padding: 0 6px;
    background: none; border: 0; cursor: pointer;
  }
  .vnc-burger span { display: block; height: 2px; border-radius: 2px; background: #141212; transition: transform .2s ease, opacity .2s ease; }
  .vnc-burger span:nth-child(2) { width: 78%; }
  body.nav-open .vnc-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .vnc-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .vnc-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .vnc-head-icons { margin-left: auto; gap: 14px !important; }
  /* Account lives in the drawer on a phone — the design's header carries only
     the two commerce icons, and three crowded the row. */
  /* !important because the anchor carries an inline display:flex, which a plain
     stylesheet rule cannot beat. */
  .vnc-head-icons > a[aria-label="Account"] { display: none !important; }

  /* Search drops to its own full-width row. */
  .vnc-head-search { order: 3; flex: 0 0 100% !important; margin: 2px 0 0; }
  .vnc-head-search form { max-width: none !important; padding: 11px 16px !important; }
  .vnc-head-search form span:last-child { display: none; }  /* the "/" hint is desktop-only */

  /* Category row moves into the drawer. */
  .vnc-nav { display: none !important; }
}

/* ===================================================================
   Mobile navigation drawer
   =================================================================== */
.nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 130;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
}
body.nav-open .nav-drawer { transform: none; visibility: visible; box-shadow: 20px 0 60px rgba(0,0,0,.25); }
.nav-overlay { position: fixed; inset: 0; z-index: 129; background: rgba(18,16,16,.5); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
body.nav-open .nav-overlay { display: block; opacity: 1; pointer-events: auto; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #ebe8e8; font: 600 16px 'Sora', sans-serif; }
.nav-drawer-body { flex: 1; overflow-y: auto; padding: 8px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-body a { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 12px; color: #141212; text-decoration: none; font: 600 14px 'Sora', sans-serif; }
.nav-drawer-body a:active { background: #f3f1f1; }
.nav-drawer-body a em { margin-left: auto; font-style: normal; font: 500 11.5px 'Manrope', sans-serif; color: #a5a0a0; }
.nav-drawer-body a.is-cta { margin-top: 8px; justify-content: center; border: 1.5px solid #141212; box-shadow: 2px 2px 0 #e01e2f; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
body.nav-open { overflow: hidden; }
@media (min-width: 681px) { .nav-drawer, .nav-overlay { display: none !important; } }

/* ===================================================================
   Mobile sticky buy bar (product pages)
   Phone-only. The tab bar is not rendered on product pages, so this owns the
   bottom of the screen there rather than competing with it.
   =================================================================== */
.vnc-buybar { display: none; }
@media (max-width: 680px) {
  .vnc-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid #ebe8e8;
    /* Extra bottom padding clears the iOS home indicator. */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 14px));
  }
  .vnc-buybar-wish {
    width: 46px; height: 46px; flex: none; border-radius: 999px;
    border: 1.5px solid #d9d5d5; background: #fff; color: #3c3838;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .vnc-buybar-wish.is-on { border-color: #e01e2f; color: #e01e2f; }
  .vnc-buybar-cta {
    flex: 1; min-width: 0; display: flex; align-items: stretch; overflow: hidden;
    border: 1.5px solid #141212; border-radius: 999px; background: #fff;
    transform: rotate(-1deg); box-shadow: 2px 2px 0 #e01e2f; text-decoration: none;
  }
  .vnc-buybar-price {
    padding: 12px 14px; font: 700 15px 'Sora', sans-serif; color: #141212;
    display: flex; align-items: center; gap: 6px; flex: none;
  }
  .vnc-buybar-price s { font-weight: 500; font-size: 11px; color: #a5a0a0; }
  .vnc-buybar-add {
    flex: 1; background: linear-gradient(90deg,#ef2038,#c40f22); color: #fff;
    font: 700 12px 'Sora', sans-serif; letter-spacing: 1px; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
  }
  /* Keep the last of the page clear of the bar. */
  body.single-template { padding-bottom: 84px; }
}

/* ===================================================================
   Mobile bottom tab bar (home + collection)
   =================================================================== */
.mtab { display: none; }
@media (max-width: 680px) {
  .mtab { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; display: flex; justify-content: space-around; align-items: stretch; gap: 2px; background: rgba(20, 20, 25, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 22px; padding: 8px 6px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
  .mtab-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 1px; color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1; text-decoration: none; transition: color 0.15s, transform 0.1s; }
  .mtab-i svg { width: 21px; height: 21px; flex: 0 0 auto; }
  .mtab-i span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtab-i.is-active { color: var(--accent); }
  .mtab-i:active { transform: scale(0.93); }
  /* Buttons sit in the bar alongside links, so strip the button chrome. */
  button.mtab-i { background: none; border: 0; font-family: inherit; cursor: pointer; }

  /* Raised centre action, tilted the way the design tilts every primary button. */
  .mtab { position: fixed; overflow: visible; }
  .mtab-gap { flex: 1 1 0; }
  .mtab-fab {
    position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%) rotate(-6deg);
    width: 52px; height: 52px; border-radius: 999px;
    background: linear-gradient(90deg,#ef2038,#c40f22); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    box-shadow: 0 10px 22px rgba(224,30,47,.45); text-decoration: none;
    transition: transform .15s ease;
  }
  .mtab-fab span { font: 700 7.5px 'Sora', sans-serif; letter-spacing: .5px; }
  .mtab-fab:active { transform: translate(-50%,-50%) rotate(-6deg) scale(.93); }

  /* Live counts, shared with the header badges via the same data attributes. */
  .mtab-ic { position: relative; display: inline-flex; }
  .mtab-b {
    position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 999px; background: #e01e2f; color: #fff; font-style: normal;
    font: 700 9px/15px 'Sora', sans-serif; text-align: center;
  }
  body { padding-bottom: 86px; }
  .go-top { bottom: 96px !important; }
}

/* ===================================================================
   Phone-frame reel cards (matrix)
   =================================================================== */
.mm-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 20px; }

/* "You might also like" carousel (PDP related) */
.mm-carousel { position: relative; }
.mm-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.mm-rail::-webkit-scrollbar { display: none; }
.mm-rail > .pcard { flex: 0 0 clamp(220px, 72vw, 248px); scroll-snap-align: start; }
.mm-cbtn { position: absolute; top: 36%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(11, 11, 15, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.mm-cbtn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mm-cbtn[hidden] { display: none; }
.mm-prev { left: -12px; }
.mm-next { right: -12px; }
@media (max-width: 680px) { .mm-cbtn { display: none; } }

/* category gradient identities (inherited by the screen via the var) */
.pcard, .reel-cluster .phone { --grad: var(--grad-photo); }
.pcard.c-coral, .phone.c-coral { --grad: var(--grad-coral); }
.pcard.c-magenta, .phone.c-magenta { --grad: var(--grad-magenta); }
.pcard.c-blue, .phone.c-blue { --grad: var(--grad-blue); }
.pcard.c-purple, .phone.c-purple { --grad: var(--grad-purple); }
.pcard.c-photo, .phone.c-photo { --grad: var(--grad-photo); }

/* hero decorative phones (cluster) keep simple bezel + overlay label */
.reel-cluster .phone { border-radius: 30px; border: 1px solid rgba(255,255,255,0.14); background: var(--surface); padding: 7px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); }
.reel-cluster .pcard-link { position: relative; display: flex; flex-direction: column; aspect-ratio: 9/16; border-radius: 24px; overflow: hidden; background: var(--grad); padding: 14px; justify-content: space-between; }
.reel-cluster .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.reel-cluster .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5)); }
.reel-cluster .cat { position: relative; z-index: 2; align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(11,11,15,0.55); padding: 5px 9px; border-radius: 8px; color: #fff; }
.reel-cluster .name { position: relative; z-index: 2; margin-top: auto; font-family: var(--font-head); text-transform: uppercase; font-size: 1.4rem; line-height: 0.92; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }

/* ===== iPhone-mockup reel card: phone frame + caption below ===== */
.pcard { display: flex; flex-direction: column; }
.phone-frame { position: relative; display: block; border-radius: 38px; background: linear-gradient(155deg, #20202a 0%, #0b0b0f 70%); border: 1px solid rgba(255,255,255,0.16); padding: 8px; box-shadow: 0 26px 52px -22px rgba(0,0,0,0.8); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.phone-frame::after { content: ""; position: absolute; right: -2px; top: 92px; width: 3px; height: 50px; border-radius: 2px; background: #3a3a44; }
.phone-frame::before { content: ""; position: absolute; left: -2px; top: 72px; width: 3px; height: 30px; border-radius: 2px; background: #3a3a44; box-shadow: 0 42px 0 #3a3a44; }
.pcard:hover .phone-frame { transform: translateY(-6px); box-shadow: 0 42px 72px -26px rgba(0,0,0,0.85); }
.pcard:active .phone-frame { transform: translateY(-3px) scale(0.995); }
.phone-screen { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: var(--grad); }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 32%; height: 15px; background: #000; border-radius: 999px; z-index: 3; }
.pcard .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pcard .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04) 40%, rgba(0,0,0,0.3) 100%); }
.reel-play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); box-shadow: 0 8px 24px rgba(0,0,0,0.45); transition: transform 200ms var(--ease); pointer-events: none; }
.reel-play svg { width: 17px; height: 17px; }
.pcard:hover .reel-play, .reel-cluster .phone:hover .reel-play { transform: translate(-50%,-50%) scale(1.08); }
.phone-frame.has-reel { cursor: pointer; }
.reel-unmute { position: absolute; z-index: 4; bottom: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(11,11,15,0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 150ms var(--ease); }
.reel-unmute svg { width: 17px; height: 17px; }
/* HLS player control — VOLUME only, bottom-RIGHT. Play/pause is the whole frame
   (tap to play, tap again to pause). Small neutral glass, never the brand colour. */
.reel-ctrls { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; }
.reel-ctrls > * { pointer-events: auto; }
.reel-ctrls .reel-unmute {
  position: static;
  width: 29px; height: 29px; border-radius: 50%;
  background: rgba(8,8,12,0.30);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.90);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: none;
  transition: background 150ms var(--ease), transform 120ms var(--ease);
}
.reel-ctrls .reel-unmute:hover { background: rgba(8,8,12,0.52); border-color: rgba(255,255,255,0.4); color: #fff; }
.reel-ctrls .reel-unmute:active { transform: scale(0.92); }
.reel-ctrls .reel-unmute svg { width: 13px; height: 13px; }
/* stay neutral even when unmuted — no brand accent */
.reel-ctrls .reel-unmute.is-on { background: rgba(8,8,12,0.30); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.90); }
.phone-frame.reel-playing .reel-play, .phone-frame.reel-playing .veil { opacity: 0; pointer-events: none; }

.pcard-info { padding: 11px 2px 10px; }
.pcard-info .cat { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.pcard-info .name { display: block; font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--text); transition: color 150ms var(--ease); }
.pcard-info .name:hover { color: var(--accent); }
.pcard-info .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pcard-info .price, .pcard-info .p-now { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--text); }
.p-free { color: var(--accent) !important; letter-spacing: 0.02em; }
.pcard-info .p-was { color: var(--muted-2); text-decoration: line-through; font-size: 0.82rem; margin-left: 6px; }
.add-cart-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 0.85rem; transition: transform 150ms var(--ease), background 150ms var(--ease); }
.add-cart-btn:hover { transform: translateY(-2px); }
.add-cart-btn:active { transform: scale(0.95); }
.add-cart-btn.is-added { background: var(--surface-3); color: var(--text); }

/* ===================================================================
   Category chips / tiles
   =================================================================== */
.chip-row { display: flex; flex-wrap: nowrap; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}
.chip:hover { transform: translateY(-3px); border-color: var(--line-2); color: var(--text); }
.chip.is-active, .chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.mm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ctile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 1 / 1; padding: 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; transition: transform 180ms var(--ease), border-color 180ms var(--ease); }
.ctile::before { content: ""; position: absolute; inset: 0; opacity: 0.16; background: var(--grad, var(--grad-photo)); }
.ctile.c-coral { --grad: var(--grad-coral); } .ctile.c-magenta { --grad: var(--grad-magenta); } .ctile.c-blue { --grad: var(--grad-blue); } .ctile.c-purple { --grad: var(--grad-purple); } .ctile.c-photo { --grad: var(--grad-photo); }
.ctile:hover { transform: translateY(-4px); border-color: var(--line-2); }
.ctile-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.ctile.has-bg::before { opacity: 0; }
.ctile.has-bg { background: var(--surface-3); }
.ctile.has-bg .ctile-bg + * , .ctile.has-bg .ctile-name, .ctile.has-bg .ctile-count, .ctile.has-bg .ctile-ic { position: relative; z-index: 2; }
.ctile.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,11,15,0.15) 0%, rgba(11,11,15,0.82) 100%); }
.ctile-ic { position: relative; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(11,11,15,0.5); color: var(--accent); margin-bottom: auto; }
.ctile-name { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.ctile-count { position: relative; z-index: 1; color: var(--muted); font-size: 0.85rem; }
.ctile.has-bg .ctile-count { color: rgba(244,244,245,0.8); }

/* collection archive banner header */
.coll-banner { position: relative; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; }
.coll-banner-pic { position: absolute; inset: 0; z-index: 0; }
.coll-banner-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-banner-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,11,15,0.4) 0%, rgba(11,11,15,0.92) 100%); }
.coll-banner .wrap { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 32px; }
.coll-banner h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); margin: 10px 0 8px; }
.coll-banner p { color: var(--muted); font-size: 1.02rem; }
@media (max-width: 640px) { .coll-banner { min-height: 200px; } }

/* ===================================================================
   Benefit zig-zag panels
   =================================================================== */
.zz { display: grid; gap: 18px; }
.zz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.zz-text { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.zz-text .zz-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bg); color: var(--accent); margin-bottom: 16px; }
.zz-text h3 { font-size: 1.5rem; margin-bottom: 8px; }
.zz-text p { color: var(--muted); }
.zz-panel { border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: flex-end; min-height: 200px; background: var(--grad-lime); color: var(--accent-ink); position: relative; overflow: hidden; }
.zz-panel.g-coral { background: var(--grad-coral); color: #fff; }
.zz-panel.g-blue { background: var(--grad-blue); color: #fff; }
.zz-panel h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 0.95; }
.zz-panel .zz-tag { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; background: rgba(11,11,15,0.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: 999px; color: inherit; text-decoration: none; }
a.zz-tag { transition: background 0.15s ease; }
.zz-panel a.zz-tag:hover { background: rgba(11,11,15,0.42); }
.zz-row:nth-child(even) .zz-text { order: 2; }

/* ===================================================================
   Stats band (kept for compatibility)
   =================================================================== */
.mm-stats-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.msb-left h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 14px; }
.msb-left p { color: var(--muted); margin-bottom: 22px; max-width: 44ch; }
.msb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.stat .n { font-family: var(--font-head); font-size: 2.4rem; color: var(--accent); line-height: 1; }
.stat .l { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }

/* ===================================================================
   Bundle band
   =================================================================== */
.bundle-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bundle-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.bundle-card.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bundle-card .b-tag { position: absolute; top: -11px; left: 22px; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.bundle-card .b-qty { color: var(--muted); font-size: 0.85rem; }
.bundle-card .b-price { font-family: var(--font-head); font-size: 2.2rem; }
.bundle-card .b-sub { color: var(--muted-2); font-size: 0.8rem; }
.bundle-card ul { list-style: none; display: grid; gap: 7px; font-size: 0.88rem; color: var(--muted); }
.bundle-card li { display: flex; align-items: center; gap: 8px; }
.bundle-card li svg { color: var(--accent); flex-shrink: 0; }
.bundle-card .btn { margin-top: auto; justify-content: center; }

/* ===================================================================
   CTA banner
   =================================================================== */
/* Testimonials */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.tcard .tstars { display: inline-flex; gap: 2px; color: var(--accent); }
.tcard blockquote { color: var(--text); font-size: 1.02rem; line-height: 1.5; }
.tcard figcaption { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.tcard .tav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 700; flex-shrink: 0; }
.tcard figcaption > span { display: flex; flex-direction: column; line-height: 1.3; }
.tcard figcaption > span > span { color: var(--muted-2); font-size: 0.82rem; }
@media (max-width: 860px) { .tcards { grid-template-columns: 1fr; } }

/* Happy Users — horizontal reel rail */
.hu-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
.hu-rail::-webkit-scrollbar { height: 8px; }
.hu-rail::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; }
.hu-card { flex: 0 0 auto; width: 224px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.hu-media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.hu-media video, .hu-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hu-cap { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.hu-cap svg { color: var(--accent); flex: 0 0 auto; }
.hu-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .hu-card { width: 180px; } }

.cta-banner { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-banner h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.cta-banner p { font-weight: 600; opacity: 0.82; margin-top: 8px; }

/* ===================================================================
   PDP
   =================================================================== */
.pdp { padding: calc(var(--head) + 28px) 0 60px; }
.pdp-crumb { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 0.88rem; margin-bottom: 24px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; }
.pdp-crumb a, .pdp-crumb svg { flex-shrink: 0; }
.pdp-crumb a:hover { color: var(--accent); }
.pdp-crumb .cur { color: var(--text); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.pdp-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: start; }

.pdp-gallery { position: sticky; top: calc(var(--head) + 24px); }
.pdp-stage { position: relative; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.14); background: var(--surface); padding: 8px; max-width: 360px; margin: 0 auto; box-shadow: 0 40px 80px -28px rgba(0,0,0,0.75); --grad: var(--grad-photo); }
.pdp-stage.c-coral { --grad: var(--grad-coral); } .pdp-stage.c-magenta { --grad: var(--grad-magenta); } .pdp-stage.c-blue { --grad: var(--grad-blue); } .pdp-stage.c-purple { --grad: var(--grad-purple); } .pdp-stage.c-photo { --grad: var(--grad-photo); }
.pdp-shot { aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: var(--grad); object-fit: cover; width: 100%; }
/* PDP video = ONE clean frame. The .pdp-stage card is the only frame; drop the
   phone-mockup bezel + fake side-buttons so there's no nested double frame. */
.pdp-video.phone-frame { aspect-ratio: auto; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #000; box-shadow: none; }
.pdp-video.phone-frame::before, .pdp-video.phone-frame::after { display: none; }
.pdp-video .phone-screen { aspect-ratio: 9 / 16; border-radius: 18px; }
/* Mobile: narrow the reel card (30px each side) so it isn't full-height. */
@media (max-width: 640px) { .pdp-stage { max-width: 300px; } }
.pdp-shot-empty { display: grid; place-items: center; gap: 10px; color: #fff; }
.pdp-stage-badge { position: absolute; bottom: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; background: rgba(11,11,15,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: 8px; color: #fff; }
.pdp-thumbs { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.pdp-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); }
.pdp-thumb .t-img { width: 54px; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background-size: cover; background-position: center; }
.pdp-thumb .t-lbl { display: inline-flex; align-items: center; gap: 4px; }

.pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-cat { background: var(--surface-3); color: var(--text); }
/* VNT tinted these per-category in magenta/cyan. VN Codes has a single accent,
   so category chips stay neutral and the red tint marks the active one only —
   otherwise every chip competes with the Add to Cart button for attention. */
.chip-cat.c-coral,
.chip-cat.c-blue { background: var(--surface-3); color: var(--text); }
.chip-cat.is-active { background: var(--red-tint); color: var(--accent-dim); }
.chip-off { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.pdp-title { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 14px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pdp-price .now { font-family: var(--font-head); font-size: 2.6rem; color: var(--accent); }
.pdp-price .was { color: var(--muted-2); text-decoration: line-through; font-size: 1.2rem; }
.pdp-price .save { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 0.82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pdp-price .tax { color: var(--muted-2); font-size: 0.8rem; }
.pdp-lifetime { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }
.pdp-lifetime svg { color: var(--accent); }
.pdp-desc { color: var(--muted); margin-bottom: 24px; max-width: 56ch; }
/* PDP actions: hero CTA + Build a bundle stack full-width, Save | Share share a row.
   Grid (not flex-wrap) so nothing ever lands alone on an orphan line. */
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.pdp-actions .btn { width: 100%; justify-content: center; }
.pdp-actions .btn-primary,
.pdp-actions .pdp-bundle-btn { grid-column: 1 / -1; }
.pdp-bundle-strip { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.9rem; color: var(--muted); margin-bottom: 26px; }
.pdp-bundle-strip svg { color: var(--accent); flex-shrink: 0; }
.pdp-bundle-strip strong { color: var(--text); }
.pdp-getbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.pdp-getbox h3 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 14px; }
.pdp-getbox h3 svg { color: var(--accent); }
.pdp-getbox ul { list-style: none; display: grid; gap: 11px; }
.pdp-getbox li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--muted); }
.pdp-getbox li svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pdp-getbox strong { color: var(--text); }
.pdp-sku { color: var(--muted-2); font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-tags .tag { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; }

.pdp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pdp-step { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; }
.pdp-step .n { position: absolute; top: 18px; right: 18px; font-family: var(--font-head); font-size: 2rem; color: var(--line-2); }
.pdp-step svg { color: var(--accent); margin-bottom: 12px; }
.pdp-step h4 { font-size: 1.15rem; margin-bottom: 6px; }
.pdp-step p { color: var(--muted); font-size: 0.9rem; }

/* ===================================================================
   How-to timeline
   =================================================================== */
.howto-hero { padding: calc(var(--head) + 40px) 0 50px; position: relative; }
.howto-hero h1 { font-size: clamp(2.2rem, 7vw, 5rem); margin-bottom: 18px; }
.howto-hero h1 .hl { color: var(--accent); }
.howto-hero .lede { color: var(--muted); font-size: 1.15rem; max-width: 50ch; margin-bottom: 26px; }
.need-strip { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.need-strip .ns-item { display: inline-flex; align-items: center; gap: 8px; }
.need-strip .ns-item svg { color: var(--accent); }
.timeline { position: relative; display: grid; gap: 26px; max-width: 920px; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.tl-num { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-head); font-size: 1.5rem; z-index: 1; }
.tl-body { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.tl-body h4 { display: flex; align-items: center; gap: 9px; font-size: 1.2rem; margin-bottom: 6px; }
.tl-body h4 svg { color: var(--accent); }
.tl-body p { color: var(--muted); }

/* FAQ accordion */
.faq { display: grid; gap: 12px; max-width: 760px; }
/* Two-column section: heading left (sticky), content right — fills wide screens */
.mm-split { display: grid; grid-template-columns: minmax(260px, 0.72fr) 1.28fr; gap: 30px 56px; align-items: start; }
.mm-split .mm-head { margin: 0; position: sticky; top: calc(var(--head) + 24px); }
.mm-split .faq, .mm-split .timeline { max-width: none; }
@media (max-width: 860px) { .mm-split { grid-template-columns: 1fr; gap: 18px; } .mm-split .mm-head { position: static; } }
.faq details { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 200ms var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 20px 18px; color: var(--muted); }

/* ===================================================================
   Generic page / account / cart / checkout (dark token inheritance)
   =================================================================== */
.page-narrow { max-width: 820px; margin: 0 auto; padding: calc(var(--head) + 40px) 24px 70px; }
.page-narrow h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.95rem; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

/* ===================================================================
   Footer
   =================================================================== */
.site-foot { background: var(--bg); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 72px) 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { color: var(--muted); font-size: 0.92rem; max-width: 42ch; margin-bottom: 12px; }
.foot-brand .foot-mission { font-family: var(--font-head); text-transform: uppercase; color: var(--text); font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.foot-ig { display: inline-flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 0.9rem; transition: border-color 160ms var(--ease); }
.foot-ig:hover { border-color: var(--accent); color: var(--text); }
.foot-col h5 { font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.foot-col a { display: block; color: var(--muted); font-size: 0.92rem; padding: 5px 0; transition: color 160ms var(--ease); }
.foot-col a:hover { color: var(--text); }
.foot-touch { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.foot-touch h5 { margin-bottom: 4px; }
.foot-touch .foot-pill { width: 100%; justify-content: center; color: var(--text); }
.foot-touch .foot-pill-pri { color: var(--accent-ink); }
.foot-touch .foot-pill-pri:hover { color: var(--accent-ink); }
.foot-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease); }
.foot-pill svg { transition: transform 200ms var(--ease); }
.foot-pill:hover { transform: translateY(-2px); border-color: var(--line-2); }
.foot-pill:hover svg { transform: translateX(3px); }
.foot-pill-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.foot-pill-pri:hover { background: var(--accent-dim); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 0.85rem; flex-wrap: wrap; }
.foot-social { display: flex; gap: 8px; }
.foot-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.foot-social a:hover { color: var(--accent); border-color: var(--accent); }
.foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-legal a:hover { color: var(--text); }
.foot-pay { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 24px 0; }
.foot-pay-label { color: var(--muted-2); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; }
.foot-pay img { height: 26px; width: auto; max-width: 100%; opacity: 0.95; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; } .foot-touch { grid-column: 1 / -1; } .foot-bottom { flex-direction: column; align-items: flex-start; } }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .reel-cluster { height: 420px; max-width: 480px; }
  .mm-stats-band, .zz-row, .pdp-grid, .foot-top { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .bundle-band { grid-template-columns: repeat(2, 1fr); }
  .pdp-steps { grid-template-columns: 1fr; }
  .zz-row:nth-child(even) .zz-text { order: 0; }
}
@media (max-width: 768px) {
  .nav-links, .search-wrap { display: none; }
  .nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--text); }
  .nav-toggle:hover { background: var(--surface-2); }
  .site-head .wrap { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .site-head.nav-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 24px 16px; }
  .site-head.nav-open .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-mega { width: 100%; }
  .nav-mega-trigger { width: 100%; }
  .mega, .mega-caret { display: none !important; }
  .mm-feature-strip { grid-template-columns: 1fr; }
  .mm-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mm-head.with-action { flex-direction: column; align-items: flex-start; }
  .cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 460px) {
  .bundle-band { grid-template-columns: 1fr; }
  .pcard-info .name { font-size: 0.95rem; }
}

/* ===================================================================
   Bundle builder (bb-*)
   =================================================================== */
.bb { padding: calc(var(--head) + 44px) 0 70px; }
.bb-head { max-width: 700px; margin-bottom: 28px; }
.bb-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom: 10px; }
.bb-head p { color: var(--muted); }
.bb-head strong { color: var(--accent); }
/* sticky Filter button + collapsible category panel */
.bb-filter { position: sticky; top: calc(var(--head) + 8px); z-index: 30; margin-bottom: 22px; }
.bb-filter-btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: background 160ms var(--ease); }
.bb-filter-btn:hover { background: var(--surface-3); }
.bb-filter-cur { color: var(--accent); font-weight: 700; }
.bb-filter-chev { display: inline-flex; transition: transform 180ms var(--ease); }
.bb-filter-btn[aria-expanded="true"] .bb-filter-chev { transform: rotate(90deg); }
.bb-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bb-tabs[hidden] { display: none; }
.bb-tab { padding: 9px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); transition: transform 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease); }
.bb-tab:hover { transform: translateY(-2px); color: var(--text); }
.bb-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bb-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.bb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 680px) {
  .bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* Bundle cards reuse the home/collection iPhone-frame .pcard look */
.bb-card { background: none; border: 0; border-radius: 0; overflow: visible; padding: 0; }
.bb-card.is-picked .phone-frame { box-shadow: 0 0 0 2px var(--accent); }
.bb-thumb { position: relative; display: block; aspect-ratio: 9/16; background-size: cover; background-position: center; background-color: var(--surface-3); }
.bb-thumb .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }
.bb-thumb.has-reel { cursor: pointer; }
.bb-thumb.reel-playing .reel-play, .bb-thumb.reel-playing .veil { opacity: 0; pointer-events: none; }
.bb-cardbody { padding: 12px; }
.bb-cat { font-family: var(--font-head); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.bb-name { display: block; font-weight: 600; font-size: 0.92rem; margin: 3px 0 8px; }
.bb-cardrow { display: flex; align-items: center; justify-content: space-between; }
.bb-price { font-family: var(--font-head); font-weight: 700; }
.bb-toggle { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-3); border: 1px solid var(--line); color: var(--text); padding: 7px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; transition: background 160ms var(--ease); }
.bb-toggle:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bb-toggle.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bb-side { position: sticky; top: calc(var(--head) + 20px); }
/* "Show all / Show less" is only for the cramped mobile bottom-bar; desktop shows the
   full scrollable summary, so hide the toggle there (re-shown in the ≤980 media query). */
.bb-expand { display: none; }
.bb-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.bb-side-card h3 { font-size: 1.3rem; margin-bottom: 14px; }
.bb-tiers { display: flex; gap: 8px; margin-bottom: 12px; }
.bb-tier { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 600; padding: 7px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.bb-tier.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bb-progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.bb-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 300ms var(--ease); }
.bb-status { color: var(--muted); font-size: 0.88rem; margin-bottom: 14px; }
.bb-picked { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.bb-chip { position: relative; width: 44px; flex: 0 0 auto; }
.bb-chip-thumb { display: block; width: 44px; aspect-ratio: 9/16; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-3) center/cover no-repeat; cursor: pointer; }
.bb-card.bb-flash .phone-frame { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow 180ms var(--ease); }
.bb-chip button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background 150ms var(--ease), color 150ms var(--ease); }
.bb-chip button:hover { background: var(--accent); color: var(--bg); }
.bb-chip button svg { width: 11px; height: 11px; }
.bb-summary { margin-bottom: 14px; }
.bb-checkout { width: 100%; justify-content: center; margin-bottom: 10px; }
.bb-viewcart { display: block; text-align: center; color: var(--muted); font-size: 0.85rem; }
.bb-viewcart:hover { color: var(--accent); }
/* bundle summary rows */
.bb-summary { display: grid; gap: 6px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bb-srow { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; color: var(--muted); }
.bb-srow span { color: var(--text); }
.bb-srow.bb-save { color: var(--accent); }
.bb-srow.bb-save span { color: var(--accent); }
.bb-srow.bb-total { font-weight: 700; font-size: 1.15rem; color: var(--text); margin-top: 4px; }
.bb-srow.bb-total span { font-family: var(--font-head); font-weight: 700; }
/* sticky bundle card that fits the viewport (scrolls internally if long) */
.bb-side { align-self: start; }
.bb-side-card { max-height: calc(100dvh - var(--head) - 36px); overflow-y: auto; }

/* checkout order-summary rows */
.co-summary h3, #co-summary h3 { font-size: 1.3rem; margin-bottom: 10px; }
.co-lines { display: grid; gap: 16px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.co-line { display: flex; align-items: center; gap: 14px; font-size: 0.92rem; }
.co-thumb { width: 44px; height: 58px; flex: 0 0 auto; border-radius: 9px; background: var(--surface-2) center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.co-line-name { color: var(--text); flex: 1 1 auto; line-height: 1.45; padding-right: 8px; }
.co-line-price { color: var(--text); font-weight: 700; flex-shrink: 0; }
.co-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; color: var(--muted); padding: 6px 0; }
.co-row.co-save { color: var(--accent); }
.co-row.co-save span { color: var(--accent); }
.co-row.co-total { font-weight: 700; font-size: 1.2rem; color: var(--text); border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; }
.co-row.co-total span { font-family: var(--font-head); font-weight: 700; }

/* ===================================================================
   Account (acc-*)
   =================================================================== */
.acc { padding: calc(var(--head) + 40px) 0 70px; }
.acc-auth { max-width: 440px; margin: 0 auto; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; }
.acc-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; margin: 0 auto 20px; }
.acc-tabs { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 22px; }
.acc-tab { flex: 1; padding: 9px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--muted); transition: background 160ms var(--ease), color 160ms var(--ease); }
.acc-tab.is-active { background: var(--accent); color: var(--accent-ink); }
.acc-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }
.acc-lbl { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.acc-field { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 13px; margin-bottom: 15px; transition: border-color 160ms var(--ease); }
.acc-field:focus-within { border-color: var(--accent); }
.acc-field svg { color: var(--muted-2); flex-shrink: 0; }
.acc-field input { flex: 1; background: none; border: none; color: var(--text); padding: 12px 0; font-size: 0.95rem; font-family: inherit; outline: none; }
.acc-field input::placeholder { color: var(--muted-2); }
.acc-submit { width: 100%; justify-content: center; }
.acc-msg { margin-top: 14px; font-size: 0.88rem; padding: 10px 13px; border-radius: var(--radius-sm); }
.acc-msg.ok { background: rgba(224,30,47,0.12); color: var(--accent); }
.acc-msg.err { background: rgba(251,113,133,0.12); color: var(--accent); }
.acc-alt { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 16px; }
.acc-alt button { color: var(--muted); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; transition: color 160ms var(--ease); }
.acc-alt button:hover { color: var(--accent); }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.acc-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.acc-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-empty { text-align: center; padding: 60px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.acc-empty svg { color: var(--muted-2); margin-bottom: 14px; }
.acc-empty h2 { font-size: 1.6rem; margin-bottom: 8px; }
.acc-empty p { color: var(--muted); margin-bottom: 20px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.acc-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; }
.acc-thumb { width: 96px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--surface-3); display: grid; place-items: center; color: var(--muted-2); }
.acc-item-body { padding: 14px; flex: 1; }
.acc-item-body h3 { font-size: 1.05rem; margin-bottom: 10px; }
.acc-dls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-dls .btn { align-self: center; flex: 0 0 auto; padding: 9px 15px; font-size: 0.82rem; }
.acc-pending { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-2); font-size: 0.82rem; }

/* Account → saved templates (wishlist) */
.acc-wish { margin-top: 44px; }
.acc-wish > h2 { display: flex; align-items: center; gap: 9px; font-size: 1.4rem; margin-bottom: 18px; }
.acc-wish > h2 svg { color: var(--accent); }
.acc-wish-n { font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.acc-wish-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; }
.acc-wish-empty .acc-wish-ic { display: inline-flex; vertical-align: middle; color: var(--accent); }
.acc-wish-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-wish-price { font-weight: 700; color: var(--text); margin-right: auto; }
.acc-wish-row .btn { padding: 9px 15px; font-size: 0.82rem; flex: 0 0 auto; }
.acc-wish-rm { padding: 9px 11px; }

/* ===================================================================
   Cart (cp-*) + Checkout (co-*) + Thank-you (ty-*)
   =================================================================== */
.cartpage, .checkout, .thankyou { padding: calc(var(--head) + 40px) 0 70px; }
.cartpage h1, .checkout h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 26px; }
.cp-layout, .co-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.cp-side, .co-side { position: sticky; top: calc(var(--head) + 20px); }
.cp-side-card, .co-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cp-items { display: grid; gap: 12px; }
.cp-loading, .ty-loading { color: var(--muted); padding: 30px 0; }
.cp-upsell { margin-top: 40px; }
.co-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; }
.co-card h3 { font-size: 1.2rem; margin-bottom: 14px; }
.checkout .field { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.95rem; font-family: inherit; margin-bottom: 12px; }
.checkout .field:focus { outline: none; border-color: var(--accent); }
.co-check { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.9rem; margin: 6px 0 12px; }
.co-check input { accent-color: var(--accent); }
.co-pay { width: 100%; justify-content: center; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.co-secure svg { color: #16a34a; }
.co-msg { margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
.ty-body { max-width: 620px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 48px 30px; }

@media (max-width: 980px) {
  .bb-layout, .cp-layout, .co-layout { grid-template-columns: 1fr; }
  .bb-side, .cp-side, .co-side { position: static; }
  .co-side, .cp-side { margin-top: 18px; } /* breathing room above the order summary on mobile */
}

/* Bundle summary = fixed bottom bar on phone. Placed after the 980px block so it
   wins the position:static reset above (source order). */
@media (max-width: 680px) {
  .bb-side { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 120; }
  .bb-side-card { max-height: none; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55); display: grid; grid-template-columns: auto 1fr auto; gap: 7px 10px; align-items: center; }
  .bb-side-card h3, .bb-tiers, .bb-progress, .bb-viewcart { display: none; }
  .bb-status { grid-column: 1 / -1; grid-row: 1; margin: 0; background: var(--accent); color: var(--accent-ink); text-align: center; font-weight: 700; border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; }
  .bb-status strong { color: var(--accent-ink); }
  /* row 2 (compact): picked thumbs (scroll) | show-all | checkout */
  .bb-picked { grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap; gap: 5px; max-width: 120px; overflow-x: auto; scrollbar-width: none; margin: 0; }
  .bb-picked::-webkit-scrollbar { display: none; }
  .bb-picked:empty { display: none; }
  .bb-picked .bb-chip, .bb-picked .bb-chip-thumb { width: 30px; }
  .bb-picked .bb-chip-thumb { aspect-ratio: 1 / 1; border-radius: 6px; }
  .bb-picked .bb-chip button { width: 15px; height: 15px; top: -5px; right: -5px; }
  .bb-picked .bb-chip button svg { width: 9px; height: 9px; }
  .bb-expand { grid-column: 2; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-size: 0.78rem; font-weight: 600; }
  .bb-expand[hidden] { display: none; }
  .bb-expand-chev { display: inline-flex; transition: transform 180ms var(--ease); }
  .bb-side.is-expanded .bb-expand-chev { transform: rotate(-90deg); }
  .bb-summary { display: none; } /* Total only in expanded view */
  .bb-checkout { grid-column: 3; grid-row: 2; margin: 0; white-space: nowrap; padding: 9px 18px; font-size: 0.92rem; }
  /* expanded: stack everything, show all thumbs + summary */
  .bb-side.is-expanded .bb-side-card { display: flex; flex-direction: column; gap: 8px; }
  .bb-side.is-expanded .bb-status { order: 0; }
  .bb-side.is-expanded .bb-picked { order: 1; flex-wrap: wrap; max-width: none; max-height: 34vh; overflow-y: auto; gap: 6px; }
  .bb-side.is-expanded .bb-expand { order: 2; align-self: center; }
  .bb-side.is-expanded .bb-summary { order: 3; display: grid; gap: 3px; margin: 0; padding-top: 8px; }
  .bb-side.is-expanded .bb-srow { font-size: 0.8rem; }
  .bb-side.is-expanded .bb-srow.bb-total { font-size: 1rem; margin-top: 2px; }
  .bb-side.is-expanded .bb-checkout { order: 4; padding: 10px 18px; }
  body.page-template-default { padding-bottom: 116px; }
}

/* ===================================================================
   Motion: nav scroll shadow
   =================================================================== */
.site-head { transition: box-shadow 220ms var(--ease), background 220ms var(--ease); }
.site-head.scrolled { background: rgba(11,11,15,0.9); box-shadow: 0 10px 34px -14px rgba(0,0,0,0.7); }

/* ===================================================================
   Go-to-top button (home + collection)
   =================================================================== */
.go-top {
  position: fixed; right: 20px; bottom: 22px; z-index: 150;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(224,30,47,0.55);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.go-top.show { opacity: 1; transform: none; pointer-events: auto; }
.go-top:hover { transform: translateY(-3px); }
.go-top:active { transform: scale(0.92); }

/* ===================================================================
   Sticky add-to-cart bar (PDP)
   =================================================================== */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: rgba(20,20,25,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 300ms var(--ease);
}
.pdp-sticky.show { transform: none; }
.pdp-sticky .ps-info { display: flex; flex-direction: column; min-width: 0; }
.pdp-sticky .ps-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.pdp-sticky .ps-price { font-family: var(--font-head); font-weight: 700; color: var(--accent); }
.pdp-sticky .ps-add { flex: 0 0 auto; }

/* ===================================================================
   Responsive refinements — laptop / tablet / phone / small phone
   =================================================================== */
@media (max-width: 1180px) {
  .hero-grid { gap: 32px; }
  .bundle-band { gap: 12px; }
}
@media (max-width: 1024px) {
  .pdp-grid { gap: 36px; }
  .mm-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .wrap { width: 100%; padding: 0 14px; } /* phone gutter — site-wide */
  /* PDP: Add to cart + Build a bundle full-width, Save | Share split the last row */
  .pdp-actions { gap: 10px; }
  .pdp-actions .btn { min-width: 0; padding: 14px 12px; font-size: 0.92rem; gap: 8px; text-align: center; }
  .pdp-actions .btn svg { flex: 0 0 auto; }
  .mm-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Shop by moment: 2x2 auto-scrolling carousel (2 rows, columns scroll) */
  .mm-tiles { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: 1fr 1fr; grid-auto-columns: 44%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mm-tiles::-webkit-scrollbar { display: none; }
  .mm-tiles > .ctile { scroll-snap-align: start; }
  .pdp-thumbs { flex-wrap: wrap; }
  .pdp-steps { grid-template-columns: 1fr; }
  .timeline::before { left: 23px; }
  .tl-step { grid-template-columns: 48px 1fr; gap: 14px; }
  .tl-num { width: 48px; height: 48px; font-size: 1.3rem; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-item { flex-direction: column; }
  .acc-thumb { width: 100%; aspect-ratio: 16/9; }
  .pdp-sticky .ps-was { display: none; }
  .pdp-sticky { padding: 10px 14px; gap: 10px; }
  .go-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .mm-matrix, .bundle-band { grid-template-columns: 1fr; }
  .pcard-info .name { font-size: 0.92rem; }
  .pdp-price .now { font-size: 2.1rem; }
  .bundle-card { padding: 18px; }
  .zz-text, .acc-card { padding: 24px 20px; }
  .pdp-sticky .ps-title { max-width: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
  .go-top, .pdp-sticky, .site-head { transition: opacity 200ms ease; }
  .go-top:hover, .go-top:active { transform: none; }
}

/* sticky bar price block (now + struck compare + % off) */
.pdp-sticky .ps-price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.pdp-sticky .ps-now { font-family: var(--font-head); font-weight: 700; color: var(--accent); }
.pdp-sticky .ps-was { color: var(--muted-2); text-decoration: line-through; font-size: 0.82rem; }
.pdp-sticky .ps-off { background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }

/* ===================================================================
   Contact page
   =================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.contact-form { padding: 30px; }
.cf-h { font-size: 1.6rem; margin-bottom: 18px; }
.cf-label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.cf-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.cf-type { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.cf-type:hover { border-color: var(--line-2); }
.cf-type input { position: absolute; opacity: 0; pointer-events: none; }
.cf-type.is-active { border-color: var(--accent); background: rgba(224,30,47,0.07); }
.cf-type-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); color: var(--accent); flex-shrink: 0; }
.cf-type-t { display: flex; flex-direction: column; line-height: 1.25; }
.cf-type-t strong { font-size: 0.9rem; }
.cf-type-t span { font-size: 0.78rem; color: var(--muted-2); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form .field textarea { resize: vertical; min-height: 110px; }
.cf-submit { margin-top: 6px; }
.cf-note { margin-top: 14px; font-size: 0.9rem; padding: 11px 14px; border-radius: var(--radius-sm); }
.cf-note.ok { background: rgba(224,30,47,0.12); color: var(--accent); }
.cf-note.err { background: rgba(251,113,133,0.12); color: var(--accent); }
.contact-side { display: grid; gap: 16px; }
/* --- Contact: asymmetric split, dark surfaces only (redesign) --- */
.contact-split { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(28px, 5vw, 72px); align-items: start; }

/* Left: reasons to reach out — divided list, no cards */
.contact-aside { align-self: start; }
@media (min-width: 921px) { .contact-aside { position: sticky; top: calc(var(--head) + 36px); } }
.ct-kicker { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.ct-points { display: grid; }
.ct-point { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.ct-point:first-child { border-top: 0; padding-top: 0; }
.ct-point:last-child { padding-bottom: 0; }
.ct-point-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.ct-point h4 { font-size: 1.06rem; margin: 2px 0 5px; color: var(--text); }
.ct-point p { color: var(--muted); font-size: 0.94rem; line-height: 1.6; max-width: 42ch; }

/* Right: action panel */
.contact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); }
.cp-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cp-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(224,30,47,0.14); }
.contact-panel h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 14px 0 8px; color: var(--text); }
.contact-panel > p { color: var(--muted); font-size: 0.96rem; line-height: 1.6; margin-bottom: 24px; max-width: 46ch; }
.ch-row { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease); }
.ch-row + .ch-row { margin-top: 12px; }
.ch-row:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--surface-3); }
.ch-row:active { transform: scale(0.99); }
.ch-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--accent); flex-shrink: 0; transition: background 180ms var(--ease), color 180ms var(--ease); }
.ch-row:hover .ch-ic { background: var(--accent); color: var(--accent-ink); }
.ch-txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ch-txt strong { font-size: 1.02rem; color: var(--text); }
.ch-txt span { font-size: 0.84rem; color: var(--muted); }
.ch-arrow { margin-left: auto; color: var(--muted-2); flex-shrink: 0; transition: color 180ms var(--ease), transform 180ms var(--ease); }
.ch-row:hover .ch-arrow { color: var(--accent); transform: translateX(3px); }
.contact-panel .btn-lg { width: 100%; justify-content: center; margin-top: 22px; }

@media (max-width: 920px) { .contact-split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cf-types, .cf-row { grid-template-columns: 1fr; } }

/* ===================================================================
   All-templates filter page
   =================================================================== */
.tpl-layout { display: grid; grid-template-columns: 268px 1fr; gap: 30px; align-items: start; }
.tpl-filters { position: sticky; top: calc(var(--head) + 20px); align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 20px; }
.tpl-fhead { display: flex; align-items: center; justify-content: space-between; }
.tpl-fhead strong { font-size: 1.05rem; }
.tpl-clear { color: var(--muted); font-size: 0.82rem; }
.tpl-clear:hover { color: var(--accent); }
.tpl-fgroup { display: grid; gap: 10px; }
.tpl-flabel { font-family: var(--font-head); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.tpl-fgroup .search-input { font-size: 0.88rem; }
.tpl-checks { display: grid; grid-template-columns: 1fr; gap: 3px; max-height: 224px; overflow-y: auto; padding-right: 6px; }
.tpl-check { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--muted); cursor: pointer; min-width: 0; padding: 3px 0; }
.tpl-checks .tpl-check span { margin-left: auto; }
.tpl-price-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-2); font-size: 0.78rem; }
.tpl-check input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.tpl-check span { margin-left: auto; color: var(--muted-2); font-size: 0.78rem; }
.tpl-check:hover { color: var(--text); }
.tpl-range { width: 100%; accent-color: var(--accent); }
.tpl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tpl-count { color: var(--muted); font-size: 0.92rem; }
.tpl-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem; }
.tpl-sort select { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 0.88rem; }
.tpl-sort select:focus { outline: none; border-color: var(--accent); }
/* Generic page (policies etc.) rich-text */
.page-rte { color: var(--muted); line-height: 1.75; font-size: 1rem; }
.page-rte h1, .page-rte h2, .page-rte h3, .page-rte h4 { color: var(--text); margin: 1.4em 0 0.5em; line-height: 1.25; }
.page-rte h2 { font-size: 1.4rem; } .page-rte h3 { font-size: 1.15rem; }
.page-rte p { margin: 0 0 1em; }
.page-rte ul, .page-rte ol { margin: 0 0 1em 1.2em; }
.page-rte li { margin: 0.3em 0; }
.page-rte a { color: var(--accent); }
.page-rte strong { color: var(--text); }

.tpl-empty { text-align: center; padding: 60px 20px; color: var(--muted); display: grid; gap: 14px; place-items: center; }
.tpl-empty[hidden] { display: none; } /* class display: grid was overriding the hidden attribute */
.tpl-empty svg { color: var(--muted-2); }
.tpl-mfilter { display: none; }
@media (max-width: 860px) {
  .tpl-layout { grid-template-columns: 1fr; }
  .tpl-mfilter { display: inline-flex; align-items: center; gap: 8px; order: -1; grid-column: 1 / -1; justify-self: start; padding: 10px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 0.92rem; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
  .tpl-mfilter-chev { display: inline-flex; transition: transform 180ms var(--ease); }
  .tpl-layout.filters-open .tpl-mfilter-chev { transform: rotate(90deg); }
  .tpl-filters { position: static; display: none; }
  .tpl-layout.filters-open .tpl-filters { display: grid; }
  .tpl-checks { max-height: none; }
}

/* mobile search: toggle button hidden on desktop, reveal field on phone */
.nav-search-toggle { display: none; }
@media (max-width: 768px) {
  .nav-search-toggle { display: grid; }
  .site-head.search-open .search-wrap {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex: 1 1 auto; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .site-head.search-open .search-results { left: 24px; right: 24px; top: calc(100% + 4px); z-index: 300; }
}

/* ============ Blog ============ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform 220ms var(--ease), border-color 220ms var(--ease); }
.blog-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.blog-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-thumb-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); background: radial-gradient(120% 120% at 30% 20%, rgba(224,30,47,0.12), transparent 60%); }
.blog-chip { position: absolute; left: 12px; top: 12px; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; }
.blog-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.blog-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 0.78rem; }
.blog-date svg { color: var(--accent); }
.blog-body h3 { font-size: 1.12rem; line-height: 1.3; }
.blog-body h3 a { color: var(--text); }
.blog-body h3 a:hover { color: var(--accent); }
.blog-body p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.blog-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 0.88rem; }
.blog-more svg { transition: transform 200ms var(--ease); }
.blog-more:hover svg { transform: translateX(3px); }
.blog-pager { margin-top: 36px; display: flex; justify-content: center; }
.blog-pager ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.blog-pager a, .blog-pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.blog-pager a:hover { border-color: var(--accent); color: var(--accent); }
.blog-pager .current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.blog-empty { text-align: center; padding: 60px 20px; }
.blog-empty-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--accent); margin-bottom: 14px; }
.blog-empty h3 { font-size: 1.3rem; margin-bottom: 6px; }
.blog-empty p { color: var(--muted); }
.blog-empty a { color: var(--accent); font-weight: 700; }

/* single post */
.post-back { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; font-size: 0.9rem; margin-bottom: 14px; }
.post-back:hover { color: var(--accent); }
.post-meta { display: flex; gap: 18px; color: var(--muted-2); font-size: 0.86rem; margin-top: 6px; }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { color: var(--accent); }
.post-cover { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); margin-top: 8px; }
.post-cover img { width: 100%; height: auto; display: block; }
.post-body { max-width: none; margin: 0; color: var(--text); font-size: 1.04rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: 1.5rem; margin-top: 1.6em; }
.post-body h3 { font-size: 1.22rem; margin-top: 1.4em; }
.post-body a { color: var(--accent); text-decoration: underline; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--muted); font-style: italic; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li + li { margin-top: 0.4em; }
.post-tags { max-width: 760px; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags span { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; padding: 4px 11px; border-radius: 999px; }
.post-cta { max-width: 760px; margin: 36px 0 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-cta h3 { font-size: 1.2rem; }
.post-cta p { color: var(--muted); margin-top: 4px; }

/* QR preview (buyer surfaces — account + thank-you) */
.ty-qr img, .acc-qr img { width: 112px; height: 112px; border-radius: 10px; background: #fff; padding: 6px; display: block; margin: 8px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }

/* Thank-you: centered delivery card (image + QR centred) */
.ty-hero { text-align: center; }
.ty-items { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 22px 0; }
.ty-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ty-thumb { width: 150px; aspect-ratio: 9 / 16; background-size: cover; background-position: center; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.ty-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ty-qr { display: flex; justify-content: center; }
.ty-qr img { margin: 8px auto; }
.ty-dls { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---- PDP description accordion ---- */
.pdp-acc { margin: 18px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdp-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 14px 0; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--text); }
.pdp-acc > summary::-webkit-details-marker { display: none; }
.pdp-acc .acc-caret { margin-left: auto; transition: transform 200ms var(--ease); }
.pdp-acc[open] .acc-caret { transform: rotate(180deg); }
.pdp-acc-body { padding: 0 0 16px; }
.pdp-acc-body p { color: var(--muted); font-size: 0.93rem; line-height: 1.7; margin: 0 0 12px; max-width: 68ch; }

/* ---- SEO pre-footer: why-choose-us + FAQ ---- */
.seo-prefoot { border-top: 1px solid var(--line); background: var(--surface); }
.seo-prefoot .wrap { padding: clamp(40px,6vw,72px) 24px; display: grid; gap: clamp(36px,5vw,56px); }
.why-vn > h2 { font-family: var(--font-head); font-size: clamp(1.6rem,3.5vw,2.4rem); letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 8px; }
.why-sub { color: var(--muted); max-width: 70ch; margin: 0 0 24px; font-size: 0.95rem; line-height: 1.6; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }
/* FAQ: two-column — big heading left, accordion right (matches the home FAQ) */
.seo-faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,5vw,72px); align-items: start; }
.seo-faq-head h2 { font-family: var(--font-head); font-size: clamp(2.2rem,5vw,3.6rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; margin: 0 0 14px; }
.seo-faq-head p { color: var(--muted); font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 36ch; }
@media (min-width: 921px) { .seo-faq-head { position: sticky; top: calc(var(--head) + 32px); } }
@media (max-width: 920px) { .seo-faq { grid-template-columns: 1fr; gap: 24px; } .seo-faq-head h2 br { display: none; } }
.why-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.why-card svg { color: var(--accent); margin-bottom: 10px; }
.why-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 1rem; margin: 0 0 6px; }
.why-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin: 0; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-item { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item .faq-caret { margin-left: auto; flex: 0 0 auto; transition: transform 200ms var(--ease); color: var(--muted-2); }
.faq-item[open] .faq-caret { transform: rotate(180deg); }
.faq-a { padding: 0 18px 16px; }
.faq-a p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0; max-width: 72ch; }

/* ---- Footer: popular searches ---- */
.foot-poptags { display: flex; flex-wrap: wrap; gap: 4px 16px; line-height: 1.9; }
.foot-poptags a { font-size: 0.82rem; color: var(--muted); opacity: 0.55; transition: opacity 150ms var(--ease), color 150ms var(--ease); }
.foot-poptags a:hover { opacity: 1; color: var(--text); }

/* SEO Advance collapsible band — Why Choose Us / FAQ / Popular Searches (per-object aware) */
.foot-seo-acc { margin-top: 30px; }
.seo-acc { display: grid; gap: 12px; }
.seo-acc-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.seo-acc-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 20px 22px; font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 2vw, 1.15rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.seo-acc-panel > summary::-webkit-details-marker { display: none; }
.seo-acc-panel > summary .faq-caret { margin-left: auto; flex: 0 0 auto; transition: transform 200ms var(--ease); color: var(--muted-2); }
.seo-acc-panel[open] > summary .faq-caret { transform: rotate(180deg); }
.seo-acc-body { padding: 0 22px 22px; }
.seo-acc-body .why-vn > h2 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: 0 0 6px; }
.seo-acc-body .faq-list { max-width: none; }
.seo-acc-body .foot-poptags { line-height: 2; }
.seo-acc-body .foot-poptags a { opacity: 0.72; }

/* Why Choose Us rich text (per-object override) */
.why-rte { color: var(--muted); font-size: 0.95rem; line-height: 1.7; max-width: 80ch; }
.why-rte h2, .why-rte h3, .why-rte h4 { font-family: var(--font-head); font-weight: 700; color: var(--text); margin: 1.1em 0 0.4em; }
.why-rte h2 { font-size: 1.25rem; }
.why-rte h3 { font-size: 1.05rem; }
.why-rte p { margin: 0 0 0.9em; }
.why-rte ul, .why-rte ol { margin: 0 0 0.9em 1.25em; }
.why-rte li { margin: 0.2em 0; }
.why-rte a { color: var(--accent); text-decoration: underline; }
.why-rte :first-child { margin-top: 0; }
.why-rte :last-child { margin-bottom: 0; }

/* ---- Share sheet (choose where to share) ---- */
.share-sheet { position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 200ms var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.share-sheet.show { opacity: 1; }
.share-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 18px 18px 26px; transform: translateY(12px); transition: transform 240ms var(--ease); }
.share-sheet.show .share-card { transform: translateY(0); }
@media (min-width: 600px) { .share-sheet { place-items: center; } .share-card { border-radius: 18px; } }
.share-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.share-h strong { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.share-x { background: none; border: 0; color: var(--muted-2); cursor: pointer; padding: 4px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px,1fr)); gap: 10px; }
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 0.78rem; cursor: pointer; transition: border-color 150ms var(--ease), transform 120ms var(--ease); }
.share-opt:hover { border-color: var(--muted-2); transform: translateY(-2px); }
.share-opt svg { color: var(--accent); }

/* ---- Mini-cart footer actions + per-item share ---- */
.mc-foot-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.mc-foot-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--muted-2); font: inherit; font-size: 0.82rem; cursor: pointer; padding: 6px 2px; transition: color 150ms var(--ease); }
.mc-foot-link:hover { color: var(--accent); }
.mc-foot-link svg { width: 14px; height: 14px; }

/* ---- Mini-cart per-item share ---- */
.mc-share { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 0; background: none; border: 0; color: var(--muted-2); font: inherit; font-size: 0.78rem; cursor: pointer; transition: color 150ms var(--ease); }
.mc-share:hover { color: var(--accent); }
.mc-share svg { width: 14px; height: 14px; }

/* ===================================================================
   BLOG ARTICLE REDESIGN (single.php) — Reel Studio
   Reading progress · editorial hero · sticky TOC · rich body · share · CTA
   =================================================================== */

/* Reading progress bar */
.post-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.post-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent)); box-shadow: 0 0 14px rgba(224,30,47,0.6); }

/* Hero */
.post-hero { padding: calc(var(--head) + 46px) 0 40px; position: relative; overflow: hidden; }
.post-hero .wrap { position: relative; z-index: 1; }
.post-hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 120% at 12% 0%, rgba(224,30,47,0.10), transparent 60%),
              radial-gradient(50% 100% at 100% 0%, rgba(217,70,239,0.10), transparent 62%); }
.post-hero h1 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; max-width: 20ch; margin-bottom: 20px; }
.post-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.post-meta { margin-top: 0; }
.post-share { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 0.86rem; transition: transform 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); }
.post-share:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.post-share svg { color: var(--accent); }

/* Layout: reading column + sticky TOC */
.post-main { padding-top: 22px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(36px, 4vw, 64px); align-items: start; }
.post-col { min-width: 0; }

.post-toc { position: sticky; top: calc(var(--head) + 28px); }
.post-toc.is-empty { display: none; }
.toc-inner { border-left: 1px solid var(--line); padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.toc-h { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.toc-h svg { color: var(--accent); }
.toc-nav { display: flex; flex-direction: column; gap: 2px; }
.toc-nav a { font-size: 0.86rem; line-height: 1.4; color: var(--muted); padding: 6px 0; border-left: 2px solid transparent; margin-left: -20px; padding-left: 18px; transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.toc-nav a:hover { color: var(--text); }
.toc-nav a.is-active { color: var(--accent); border-left-color: var(--accent); }
.toc-share { margin-top: 16px; justify-content: center; width: 100%; font-size: 0.84rem; padding: 11px 14px; }

/* Body typography */
.post-body { max-width: none; }
.post-body > p:first-of-type { font-size: 1.16rem; line-height: 1.7; color: #E6E6E9; }
.post-body h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.2; margin-top: 2em; scroll-margin-top: calc(var(--head) + 24px); position: relative; padding-top: 16px; border-top: 1px solid var(--line); }
.post-body h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 3px; border-radius: 3px; background: var(--accent); }
.post-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; margin-top: 1.5em; }
.post-body a:not(.btn) { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(224,30,47,0.4); transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.post-body a:not(.btn):hover { border-bottom-color: var(--accent); background: rgba(224,30,47,0.08); }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul > li { position: relative; padding-left: 26px; }
.post-body ul > li::before { content: ""; position: absolute; left: 6px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.post-body ol { padding-left: 1.3em; }
.post-body li { color: #DCDCE0; }
.post-body li strong, .post-body p strong { color: var(--text); }
.post-body li em, .post-body p em { font-style: normal; }
.post-body li em:first-child { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 2px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }

/* FAQ accordion inside article (reuses .faq-list/.faq-item from the design system) */
.post-body .faq-list { margin-top: 1.2em; }
.post-body .faq-list + p em { color: var(--muted); }

/* Tags */
.post-tags { max-width: none; }

/* Share row */
.post-share-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-share-row > span { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.post-share-btns { display: inline-flex; gap: 10px; }
.ssbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); transition: transform 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); }
.ssbtn:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); }

/* CTA — gradient frame */
.post-cta { display: block; max-width: none; padding: 0; background: linear-gradient(155deg, rgba(224,30,47,0.45), rgba(217,70,239,0.35)); border: 0; border-radius: var(--radius-lg); }
.post-cta-inner { margin: 1px; background: var(--surface-2); border-radius: calc(var(--radius-lg) - 1px); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-cta h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.post-cta p { color: var(--muted); margin-top: 4px; }

/* Copy toast */
.post-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); z-index: 500; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.88rem; padding: 11px 20px; border-radius: 999px; box-shadow: 0 14px 36px -10px rgba(224,30,47,0.6); opacity: 0; transition: opacity 220ms var(--ease), transform 220ms var(--ease); pointer-events: none; }
.post-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1023px) {
  .post-layout { grid-template-columns: 1fr; max-width: 760px; }
  .post-toc { display: none; }
}
@media (max-width: 600px) {
  .post-share-row { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Design animations + hover states (ported from the Claude Design build).

   The design expresses hover via a `style-hover` attribute its renderer
   compiles away; real CSS has no such thing, so those rules land here keyed
   off the markup they belong to. Keyframes are copied verbatim.
   ========================================================================= */

@keyframes wiggle{0%,80%,100%{transform:rotate(-4deg)}84%{transform:rotate(3deg)}88%{transform:rotate(-8deg)}92%{transform:rotate(3deg)}96%{transform:rotate(-6deg)}}
/* Swipe deck: the hand rocks left-right to teach the drag gesture. */
@keyframes dragHint {
  0%, 100% { transform: translateX(-9px) rotate(-8deg); }
  50%      { transform: translateX(9px)  rotate(8deg); }
}
/* The deck's two action buttons — the pointer-free way to work the deck. */
[data-swipe-skip]:hover { background: rgba(255,255,255,.12) !important; transform: scale(1.06); }
[data-swipe-save]:hover { transform: scale(1.06); }
[data-swipe-skip]:active, [data-swipe-save]:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  [data-swipe-hint] span { animation: none !important; }
}

@keyframes fireFlick{0%,100%{transform:scale(1) rotate(-3deg)}30%{transform:scale(1.22) rotate(4deg)}60%{transform:scale(1.08) rotate(-5deg)}}

/* Hero chips lift and brighten. */
.hero-chip:hover { transform: translateY(-4px); background: rgba(255,255,255,.32) !important; }

/* Hero chip "popcorn" preview — a clip of a real template from that category
   springs up out of the pill on hover. Angles alternate so a row of chips does
   not look like one rubber-stamped animation. */
.hero-chip .chip-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  width: 96px; height: 170px; border-radius: 14px; object-fit: cover;
  pointer-events: none; z-index: 20; background: #c40f22;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateX(-50%) translateY(16px) scale(.25) rotate(-6deg);
  transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.hero-chip:hover .chip-pop,
.hero-chip:focus-visible .chip-pop { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-8deg); }
.hero-chip:nth-child(3n):hover .chip-pop,
.hero-chip:nth-child(3n):focus-visible .chip-pop { transform: translateX(-50%) translateY(0) scale(1) rotate(7deg); }
.hero-chip:nth-child(3n+2):hover .chip-pop,
.hero-chip:nth-child(3n+2):focus-visible .chip-pop { transform: translateX(-50%) translateY(0) scale(1) rotate(3deg); }
.hero-chip:nth-child(4n):hover .chip-pop,
.hero-chip:nth-child(4n):focus-visible .chip-pop { transform: translateX(-50%) translateY(-4px) scale(1) rotate(-5deg); }
@media (prefers-reduced-motion: reduce) {
  .hero-chip .chip-pop { transition: opacity .2s ease; }
  .hero-chip:hover .chip-pop { transform: translateX(-50%) scale(1); }
}
/* Touch has no hover — the pop would either never fire or stick after a tap. */
@media (hover: none) { .hero-chip .chip-pop { display: none; } }


/* Add-to-cart pill presses in. */
[data-vnc-add]:hover { transform: rotate(-2deg) translateY(-2px); box-shadow: 3px 3px 0 #e01e2f; }

/* Horizontal rails: hide the scrollbar, keep the scrolling. */
[style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* The design is built at 1280px. Below that the hero type has to come down or
   it overflows on a phone, which is where most of this traffic is. */
@media (max-width: 720px) {
  .vnc-hero h1 { font-size: 32px !important; letter-spacing: -1px !important; }
  .vnc-hero p  { font-size: 14px !important; }
}

/* Category marquee rails (design: two full-bleed rows, second reversed). The
   -50% translate is why front-page.php emits each row's tiles twice. */
@keyframes heroScroll { to { transform: translateX(-50%); } }
.cat-marquee:hover > div { animation-play-state: paused; }
.vnc-cat-tile:hover { transform: translateY(-5px); background: #fdeeee !important; }

/* Respect a reduced-motion preference — the rails and the wiggle are decorative. */
@media (prefers-reduced-motion: reduce) {
  .cat-marquee > div { animation: none; }
  [style*="animation:wiggle"], [style*="animation:fireFlick"] { animation: none !important; }
}

/* FAQ accordion: <details> so it works without JS. Hide the native marker and
   flip the +/− via the open state. */
.vnc-faq-item > summary::-webkit-details-marker { display: none; }
.vnc-faq-item[open] > summary > span:last-child { background: #e01e2f; color: #fff; }
.vnc-faq-item[open] > summary > span:last-child::after { content: ''; }
.vnc-faq-item[open] > summary > span:last-child { font-size: 0; }
.vnc-faq-item[open] > summary > span:last-child::before { content: '−'; font-size: 15px; }

/* Design is authored at 1280px with 32px gutters; below that these full-width
   blocks need the same side padding as the rest of the page. */
.vnc-stats, .vnc-banner, .vnc-myob, .vnc-faq { padding-left: 24px; padding-right: 24px; }
.vnc-stats, .vnc-banner, .vnc-myob { box-sizing: border-box; }

@media (max-width: 720px) {
  .vnc-stats { grid-template-columns: repeat(2, 1fr); }
  .vnc-stats > div:nth-child(3) { border-left: none; }
  .vnc-banner { flex-wrap: wrap; gap: 16px; }
  .vnc-banner > div:nth-child(4) { display: none; }
}

/* Collection page: pagination pills + sidebar collapse. */
.vnc-pager .page-numbers { padding: 8px 14px; background: #fff; border: 1px solid #e3dfdf; border-radius: 999px; color: #141212; }
.vnc-pager .page-numbers.current { background: #141212; border-color: #141212; color: #fff; }
.vnc-pager .page-numbers.dots { border: none; background: none; color: #8a8585; }
.vnc-pager .page-numbers:hover:not(.current):not(.dots) { border-color: #141212; }

@media (max-width: 900px) {
  .vnc-coll { flex-direction: column; }
  .vnc-coll-side { width: 100% !important; }
}

/* Product page: the design is a fixed two-column at 1280px. */
@media (max-width: 860px) {
  .vnc-pdp > div:first-child > div { width: 100% !important; height: auto !important; aspect-ratio: 9/16; }
  .vnc-pdp > div:first-child { width: 100%; }
  .vnc-why { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .vnc-steps { grid-template-columns: 1fr !important; }
  .vnc-why { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) { .vnc-bundles { grid-template-columns: 1fr !important; } }

/* Blog listing */
.vnc-blog-card:hover { transform: translateY(-4px); }
@media (max-width: 900px) {
  .vnc-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vnc-blog-feat { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) { .vnc-blog-grid { grid-template-columns: 1fr !important; } }

/* ---- Footer (ported from the design: dark rounded card) ---- */
.vnc-foot a { color: rgba(255,255,255,.75); }
.vnc-foot a:hover { color: #fff; }
.vnc-foot-bottom a { color: rgba(255,255,255,.7); }
.vnc-foot-panel > summary::-webkit-details-marker { display: none; }
.vnc-foot-panel[open] > summary .faq-caret { transform: rotate(180deg); }
.vnc-foot-panel .faq-caret { transition: transform .2s ease; color: #8a8585; }
@media (max-width: 900px) {
  .vnc-foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .vnc-foot { margin: 48px 12px 12px !important; padding: 26px 22px 20px !important; }
  .vnc-foot-grid { grid-template-columns: 1fr !important; }
  .vnc-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Static page prose ---- */
.vnc-prose { font-size: 15px; line-height: 1.75; color: #4b4358; }
.vnc-prose p { margin: 0 0 14px; }
.vnc-prose h2 { font: 600 17px 'Sora', sans-serif; color: #141212; margin: 24px 0 8px; }
.vnc-prose h3 { font: 600 15px 'Sora', sans-serif; color: #141212; margin: 20px 0 6px; }
.vnc-prose ul, .vnc-prose ol { font-size: 14.5px; line-height: 1.9; margin: 0 0 14px; padding-left: 20px; }
.vnc-prose a { color: #c40f22; text-decoration: underline; font-weight: 600; }
.vnc-prose strong { color: #141212; }

@media (max-width: 860px) { .vnc-howto-steps { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px) { .vnc-howto-steps { grid-template-columns: 1fr !important; } }

/* Cart + checkout: design shells around store.js-rendered content. */
@media (max-width: 860px) {
  .vnc-cart-grid, .vnc-co-grid { grid-template-columns: 1fr !important; }
  .cp-side .cp-side-card, .co-side .co-side-card { position: static !important; }
}
.vnc-checkout .field:focus { outline: none; border-color: #141212; }

/* =========================================================================
   Account + cart internals, restyled to the design language.

   Both surfaces are class-driven — the account forms are wired to theme.js by
   id, and the cart line items are injected by store.js at runtime — so neither
   can be restyled from PHP. Overriding the classes here changes the look while
   leaving every JS contract untouched.
   ========================================================================= */

/* ---- Account: auth card ---- */
.acc-auth { max-width: 460px; margin: 0 auto; padding: 40px 24px 56px; }
.acc-card { border: 1.5px solid #141212; border-radius: 24px; padding: 30px; background: #fff; }
.acc-mark { width: 46px; height: 46px; border-radius: 999px; background: #fdeeee; color: #c40f22;
            display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.acc-tabs { display: flex; gap: 6px; background: #f3f1f1; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.acc-tab { flex: 1; border: none; background: none; cursor: pointer; border-radius: 999px; padding: 9px 12px;
           font: 700 11.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .6px; color: #6b6666; }
.acc-tab.is-active { background: #141212; color: #fff; }
.acc-sub { font-size: 13px; color: #6b6666; line-height: 1.6; margin: 0 0 16px; text-align: center; }
.acc-lbl { display: block; font: 600 11px 'Sora', sans-serif; letter-spacing: .8px; text-transform: uppercase;
           color: #8a8585; margin: 10px 0 5px; }
.acc-field { display: flex; align-items: center; gap: 10px; border: 1.5px solid #e3dfdf; border-radius: 12px;
             padding: 0 14px; background: #fff; color: #a5a0a0; }
.acc-field:focus-within { border-color: #141212; color: #141212; }
.acc-field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
                   padding: 13px 0; font: 400 14px 'Manrope', sans-serif; color: #141212; }
.acc-submit { width: 100%; margin-top: 18px; border: none; cursor: pointer; border-radius: 999px; padding: 15px 0;
              font: 700 12.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
              background: linear-gradient(90deg, #ef2038, #c40f22); color: #fff;
              display: flex; align-items: center; justify-content: center; gap: 8px; }
.acc-alt { text-align: center; font-size: 12.5px; color: #8a8585; margin-top: 14px; }
.acc-alt a, .acc-alt button { color: #c40f22; font-weight: 600; background: none; border: none; cursor: pointer; font-size: 12.5px; }
.acc-msg { font-size: 13px; margin-top: 10px; text-align: center; }
.acc-spin { display: inline-flex; animation: vncSpin 1s linear infinite; }
@keyframes vncSpin { to { transform: rotate(360deg); } }

/* ---- Account: signed-in dashboard ---- */
.acc { max-width: 1280px; margin: 0 auto; padding: 32px 24px 48px; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
            margin-bottom: 22px; }
.acc-head h1 { font: 700 32px 'Sora', sans-serif; letter-spacing: -1px; margin: 0; }
.acc-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.acc-item { border: 1px solid #ebe8e8; border-radius: 18px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.acc-thumb { width: 56px; height: 96px; flex: none; border-radius: 10px; overflow: hidden; background: #f3f1f1; }
.acc-thumb img, .acc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-item-body { flex: 1; min-width: 0; }
.acc-item-body h3, .acc-item-body h4 { font: 600 14px 'Sora', sans-serif; margin: 0 0 4px; }
.acc-dls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.acc-dls a { font: 700 10.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
             padding: 8px 14px; border: 1.5px solid #141212; border-radius: 999px; color: #141212; }
.acc-qr { border-radius: 10px; border: 1px solid #ebe8e8; }
.acc-empty, .acc-wish-empty { background: #f6f5f5; border-radius: 18px; padding: 36px 24px; text-align: center;
                              font-size: 13.5px; color: #6b6666; }
.acc-pending { font-size: 12px; color: #8a8585; }
.acc-wish-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f1f1; }
.acc-wish-n { flex: 1; min-width: 0; font: 600 13.5px 'Sora', sans-serif; }
.acc-wish-price { font: 700 13px 'Sora', sans-serif; flex: none; }
.acc-wish-rm { background: none; border: none; cursor: pointer; color: #8a8585; font-size: 11.5px; text-decoration: underline; }

/* ---- Cart line items (injected by store.js) ---- */
.cp-item, .cp-row { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #f3f1f1; }
.cp-thumb { width: 46px; height: 80px; border-radius: 10px; flex: none; overflow: hidden; background: #f3f1f1; position: relative; }
.cp-thumb img, .cp-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-cont { flex: 1; min-width: 0; }
.cp-name { font: 600 13.5px 'Sora', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cat, .cp-meta { font-size: 11.5px; color: #8a8585; margin-top: 3px; }
.cp-price { text-align: right; flex: none; font: 700 14px 'Sora', sans-serif; }
.cp-rm { cursor: pointer; font-size: 11px; color: #8a8585; text-decoration: underline; margin-top: 4px;
         background: none; border: none; display: block; }
.cp-empty { padding: 44px 20px; text-align: center; color: #8a8585; font-size: 14px; }
.cp-nudge { margin-top: 14px; border: 1.5px dashed #e01e2f; border-radius: 14px; background: #fdf5f5;
            padding: 12px 16px; font: 600 12.5px 'Sora', sans-serif; }
.cp-up-card { border: 1px solid #ebe8e8; border-radius: 16px; padding: 12px; }
.cp-up-name { font: 600 12.5px 'Sora', sans-serif; margin-top: 8px; }
.cp-up-price { font-size: 11.5px; color: #8a8585; }

/* `display:inline-flex` on .acc-spin beat the hidden attribute, so the loader
   showed on the idle button. The attribute has to win. */
.acc-spin[hidden], .acc-form[hidden], [hidden] { display: none !important; }

/* =========================================================================
   Bundle builder (MYOB) + blog post, restyled to the design language.

   Both are class-driven and partly rendered by store.js at runtime, so they are
   restyled here rather than in PHP — the markup and its JS hooks are untouched.
   ========================================================================= */

/* ---- MYOB builder ---- */
.bb { max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }
.bb-head h1 { font: 700 32px 'Sora', sans-serif; letter-spacing: -1px; margin: 0 0 6px; }
.bb-head p { font-size: 13.5px; color: #6b6666; margin: 0 0 20px; }
.bb-head strong { color: #141212; }
.bb-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.bb-filter { margin-bottom: 14px; }
.bb-filter-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: #fff;
                 border: 1px solid #e3dfdf; border-radius: 999px; padding: 9px 16px;
                 font: 600 12.5px 'Manrope', sans-serif; color: #141212; }
.bb-filter-cur { color: #c40f22; font-weight: 700; }
.bb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.bb-tab { cursor: pointer; background: #fff; border: 1px solid #e3dfdf; border-radius: 999px; padding: 7px 14px;
          font: 600 12.5px 'Manrope', sans-serif; color: #4b4358; }
.bb-tab.is-active { background: linear-gradient(90deg, #ef2038, #c40f22); border-color: transparent; color: #fff; }
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.bb-side-card { border: 2px solid #141212; border-radius: 22px; padding: 20px; position: sticky; top: 96px; background: #fff; }
.bb-summary { font: 700 26px 'Sora', sans-serif; letter-spacing: -1px; }
.bb-status { font-size: 12.5px; color: #6b6666; margin-top: 4px; }
.bb-progress { height: 8px; border-radius: 999px; background: #f3f1f1; overflow: hidden; margin: 14px 0 8px; }
.bb-progress-fill, .bb-fill { height: 100%; background: linear-gradient(90deg, #ef2038, #c40f22);
                              border-radius: 999px; transition: width .35s ease; display: block; }
.bb-tiers { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.bb-tier { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #6b6666;
           border: 1px solid #ebe8e8; border-radius: 12px; padding: 9px 12px; }
.bb-tier.is-active { border-color: #e01e2f; background: #fdf5f5; color: #141212; font-weight: 600; }
.bb-picked { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.bb-chip { display: inline-flex; align-items: center; gap: 6px; background: #f3f1f1; border-radius: 999px;
           padding: 4px 10px 4px 4px; font-size: 11.5px; color: #141212; }
.bb-chip-thumb { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; flex: none; }
.bb-srow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; }
.bb-checkout, .bb-viewcart { display: block; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer;
                             border-radius: 999px; padding: 14px 0; margin-top: 12px;
                             font: 700 12px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px; }
.bb-checkout { background: linear-gradient(90deg, #ef2038, #c40f22); color: #fff; border: none; }
.bb-viewcart { background: #fff; border: 1.5px solid #141212; color: #141212; }
.bb-flash { animation: vncFlash .5s ease; }
@keyframes vncFlash { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); } }
.bb-expand { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: none;
             color: #c40f22; font: 600 12.5px 'Manrope', sans-serif; margin-top: 14px; }

@media (max-width: 900px) {
  .bb-layout { grid-template-columns: 1fr; }
  .bb-side-card { position: static; }
}

/* ---- Blog post ---- */
.post-single { --post-w: 100%; }   /* was 760px reading measure — widened to page width on request */
.post-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.post-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ef2038, #c40f22); }
.post-hero { max-width: 1280px; margin: 0 auto; padding: 36px 24px 0; text-align: left; }
.post-hero-glow { display: none; }
.post-back { display: inline-flex; align-items: center; gap: 7px; font: 700 11px 'Sora', sans-serif;
             text-transform: uppercase; letter-spacing: .8px; color: #c40f22; }
.post-single h1 { font: 700 38px/1.15 'Sora', sans-serif; letter-spacing: -1.2px; margin: 16px 0 10px; }
.post-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
                 border-bottom: 1px solid #ebe8e8; padding-bottom: 16px; }
.post-meta { font-size: 12.5px; color: #8a8585; margin: 0; }
.post-share { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: #fff;
              border: 1.5px solid #141212; border-radius: 999px; padding: 8px 15px;
              font: 700 10.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px; color: #141212; }
.post-cover { max-width: 1280px; margin: 22px auto 0; padding: 0 24px; }
.post-cover img { width: 100%; height: auto; border-radius: 22px; display: block; }
.post-main { padding: 8px 0 40px; }
/* Article + table of contents. The 760px reading measure applies to the text
   column, not the whole grid — constraining the grid left ~330px for the prose. */
.post-layout { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%;
               display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 44px; align-items: start; }
.post-col { min-width: 0; max-width: var(--post-w); }
.post-toc { position: sticky; top: 96px; }
.post-col { font-size: 15px; line-height: 1.8; color: #4b4358; }
.post-col h2 { font: 700 24px 'Sora', sans-serif; letter-spacing: -.5px; color: #141212; margin: 32px 0 10px; }
.post-col h3 { font: 700 18px 'Sora', sans-serif; color: #141212; margin: 24px 0 8px; }
.post-col p { margin: 0 0 16px; }
.post-col ul, .post-col ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.9; }
.post-col a { color: #c40f22; text-decoration: underline; font-weight: 600; }
.post-col img { max-width: 100%; height: auto; border-radius: 18px; margin: 8px 0 20px; }
.post-col blockquote { border-left: 3px solid #e01e2f; background: #fdf5f5; border-radius: 0 14px 14px 0;
                       margin: 20px 0; padding: 14px 18px; font-style: normal; color: #141212; }
.post-toc { border: 1px solid #ebe8e8; border-radius: 18px; padding: 18px; font-size: 13px; }
.post-share-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 980px) {
  .post-layout { grid-template-columns: 1fr; gap: 28px; }
  .post-toc { position: static; order: -1; }
}
@media (max-width: 600px) {
  .post-single h1 { font-size: 28px; letter-spacing: -.8px; }
}

/* SEO band sits on the white page above the dark footer card — keep it dark-on-white
   so the .vnc-foot link colour above cannot leak into it. */
.vnc-foot-seo a { color: #4b4358; }
.vnc-foot-seo a:hover { color: #c40f22; }
.vnc-foot-seo .vnc-foot-panel > summary { color: #141212; }

/* How-it-works band: the connector arrows only make sense on one row. */
.vnc-hiw-card:hover { transform: translateY(-5px) rotate(-1deg); }
@media (max-width: 900px) {
  .vnc-hiw { grid-template-columns: 1fr !important; }
  .vnc-hiw-arrow { display: none !important; }
  .vnc-more { grid-template-columns: 1fr !important; }
}

/* Swipe Mode: the design is a fixed 1fr/300px split at 1280px. */
.vnc-swipe:focus-within { outline: none; }
.vnc-swipe [data-swipe-deck]:focus-visible { outline: 2px solid #ff5252; outline-offset: 6px; border-radius: 22px; }
@media (max-width: 900px) {
  .vnc-swipe { grid-template-columns: 1fr !important; padding: 30px 24px !important; gap: 28px !important; }
  .vnc-swipe [data-swipe-deck] { height: 420px !important; max-width: 300px; margin: 0 auto; }
  .vnc-swipe > video { display: none; }
}

/* =========================================================================
   Cart drawer — ported from the design's `cartOpen` panel.

   store.js builds the drawer's contents at runtime, so this restyles its
   classes rather than the markup: nothing about the open/close contract
   (body.mc-open, .mc-overlay, [data-close-cart]) changes.

   Design: 430px panel on a #f3f1f1 tray, each group a white 16px card, with a
   black "3rd one free" bar under the header.
   ========================================================================= */
.mc-overlay { background: rgba(18,16,16,.5); }

.mini-cart { width: min(430px, 92vw); background: #f3f1f1; border-left: none;
             font-family: 'Manrope', sans-serif; }
/* The shadow belongs to the OPEN drawer only. Left on permanently it painted a
   dark 60px band down the right edge of every page: the panel parks just off the
   viewport, and a -20px/60px-blur shadow reaches back inside it. */
body.mc-open .mini-cart:not(.wish-drawer),
body.wish-open .wish-drawer { box-shadow: -20px 0 60px rgba(0,0,0,.25); }

.mc-head { padding: 9px 20px; background: #fff; border-bottom: none;
           font: 600 16px 'Sora', sans-serif; }
.mc-close { width: 32px; height: 32px; border-radius: 999px; background: #f3f1f1; }
.mc-close:hover { background: #ebe8e8; }

/* The standing offer, stated once at the top of the drawer. */
.mc-offer { background: #141212; color: #fff; text-align: center;
            padding: 11px 16px; font: 600 12.5px 'Sora', sans-serif; letter-spacing: .1px; }
.wish-drawer .mc-offer { display: none; }
.mc-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 9px;
           scrollbar-width: none; }
.mc-body::-webkit-scrollbar { display: none; }

/* Each line item is its own white card rather than a ruled row. */
.mc-item { background: #fff; border-radius: 16px; padding: 12px 14px; border-bottom: none;
           gap: 12px; }
.mc-item .mc-thumb { width: 46px; height: 80px; aspect-ratio: auto; border-radius: 10px; }
.mc-name { font: 600 13.5px 'Sora', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-cat  { font: 400 11.5px 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; color: #8a8585; }
.mc-price { font: 700 14px 'Sora', sans-serif; }
.mc-rm { font-size: 11px; color: #8a8585; text-decoration: underline; background: none; border: none; cursor: pointer; }
.mc-nudge { background: #fff; border-radius: 16px; padding: 12px 16px; text-align: center;
            font: 600 12.5px 'Sora', sans-serif; }
.mc-nudge b, .mc-nudge strong { color: #c40f22; }
.mc-empty { background: #fff; border-radius: 16px; padding: 28px 16px; color: #8a8585; font-size: 13px; }

/* position:relative anchors the green "₹X saved so far!" pill, which the design
   hangs half outside the footer's top edge. */
.mc-foot { background: #fff; border-top: 1px solid #ebe8e8; padding: 14px 16px 16px; position: relative; }
/* The drawer body is built from inline-styled cards, so nothing inside it should
   inherit the page's link underline or button chrome. */
.mc-body a { color: inherit; text-decoration: none; }
/* ...but not the filled CTA. `.mc-body a` outranks `.btn-primary`, so the empty-state
   "Browse templates" button was inheriting the grey #8a8585 body colour and rendering
   grey-on-red. Restore the on-red ink explicitly. */
.mc-body a.btn-primary { color: var(--accent-ink); }
.mc-body input::placeholder { color: #a5a0a0; }
.mc-foot a { text-decoration: none; }
.mc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 3px 0; }
.mc-row.mc-total { font: 700 16px 'Sora', sans-serif; padding-top: 8px; }
.mc-row.mc-save { color: #15803d; font-weight: 600; }
.mc-foot-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mc-foot-actions a, .mc-foot-actions button, .mc-share {
  display: block; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer;
  border-radius: 999px; padding: 14px 0; border: none;
  font: 700 12px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
  background: linear-gradient(90deg, #ef2038, #c40f22); color: #fff;
}
.mc-foot-actions a + a, .mc-foot-actions .mc-foot-link {
  background: #fff; border: 1.5px solid #141212; color: #141212;
}
.mc-foot-link { font-size: 12px; color: #6b6666; }

/* Bundle builder: the tier the visitor arrived asking for (?n=5). */
.bb-tier.is-goal { border-color: #e01e2f; background: #fdf5f5; color: #141212; font-weight: 700; }
.bb-goal { font-size: 13px; color: #c40f22; margin-top: 6px; }

/* ---- Drawer: milestone track (design's m1/m2/m3 progress card) ---- */
.mc-ms { background: #fff; border-radius: 16px; padding: 14px 16px; }
.mc-ms-head { text-align: center; font: 600 12.5px 'Sora', sans-serif; }
.mc-ms-head strong { color: #c40f22; }
.mc-ms-head.mc-ms-done { color: #15803d; }
.mc-ms-track { display: flex; align-items: center; margin-top: 12px; }
.mc-ms-seg { flex: 1; height: 3px; border-radius: 999px; background: #ebe8e8; margin: 0 6px; position: relative; overflow: hidden; }
.mc-ms-seg-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ef2038, #c40f22); border-radius: 999px; transition: width .35s ease; }
.mc-ms-dot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
             min-width: 44px; text-align: center; }
.mc-ms-dot b { width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 1.5px solid #d9d5d5;
               color: #a5a0a0; display: flex; align-items: center; justify-content: center;
               font: 700 10px 'Sora', sans-serif; }
.mc-ms-dot i { font: 600 9.5px 'Sora', sans-serif; font-style: normal; color: #a5a0a0; }
.mc-ms-dot.is-hit b { background: linear-gradient(90deg, #ef2038, #c40f22); border-color: transparent; color: #fff; }
.mc-ms-dot.is-hit i { color: #c40f22; }

/* ---- Drawer: "You may also like…" ---- */
.mc-suggest:empty { display: none; }
.mc-suggest { background: #fff; border-radius: 16px; padding: 14px 16px; }
.mc-suggest-h { font: 600 14px 'Sora', sans-serif; }
.mc-suggest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.mc-sg { min-width: 0; display: block; }
.mc-sg-thumb { display: block; aspect-ratio: 9/16; border-radius: 12px; background: #f3f1f1 center/cover no-repeat; }
.mc-sg-name { display: block; font: 600 10.5px 'Sora', sans-serif; margin-top: 6px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sg-price { display: block; font-size: 10px; color: #8a8585; }

/* =========================================================================
   Click-to-play video (vnc_video()).

   Nothing autoplays; the poster stands in until the visitor clicks. Native
   controls are never rendered, so there is no progress bar, fullscreen button
   or overflow menu — only a centre play button and a bottom-left mute toggle.
   ========================================================================= */
/* ---- Ambient light -------------------------------------------------------
   The glow is a box-shadow whose colour design.js samples from the playing
   video, so no element is added to or moved in the DOM. box-shadow paints
   outside the border box and is not clipped by .vnc-video's own overflow:hidden,
   which is exactly why it is used here instead of a blurred canvas behind the
   player: an earlier wrapper-based version broke click-to-pause. */
@media (prefers-reduced-motion: reduce) { .vnc-video { box-shadow: none !important; } }

.vnc-video { position: relative; display: block; padding: 0; border: 0; margin: 0;
             background: repeating-linear-gradient(45deg,#fdeeee 0 12px,#f6e0e0 12px 24px);
             overflow: hidden; cursor: pointer; width: 100%; font: inherit; color: inherit; }
.vnc-video video,
.vnc-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vnc-video-poster { background: center/cover no-repeat; }
/* Once playing, the video covers the poster. */
.vnc-video.is-playing .vnc-video-poster { opacity: 0; }

/* Centre play button — always legible, emphasised on hover. */
.vnc-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.92);
                  width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.9);
                  color: #141212; display: flex; align-items: center; justify-content: center;
                  transition: transform .18s ease, opacity .18s ease; opacity: .92;
                  box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
.vnc-video-play svg { width: 17px; height: 17px; margin-left: 2px; }
.vnc-video:hover .vnc-video-play { transform: translate(-50%,-50%) scale(1.06); opacity: 1; }
.vnc-video.is-playing .vnc-video-play,
.vnc-video.is-loading .vnc-video-play { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
.vnc-video:focus-visible { outline: 2px solid #e01e2f; outline-offset: 3px; }

/* Loading spinner between click and first frame. */
.vnc-video-spin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
                  border: 2.5px solid rgba(255,255,255,.55); border-top-color: #fff; border-radius: 999px;
                  opacity: 0; pointer-events: none; }
.vnc-video.is-loading .vnc-video-spin { opacity: 1; animation: vncSpin .8s linear infinite; }

/* Mute toggle, bottom-left. Only meaningful once something is playing. */
.vnc-video-mute { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px;
                  border-radius: 999px; background: rgba(18,16,16,.55); color: #fff;
                  display: flex; align-items: center; justify-content: center; cursor: pointer;
                  opacity: 0; transition: opacity .18s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vnc-video-mute svg { width: 15px; height: 15px; }
.vnc-video.is-playing .vnc-video-mute,
.vnc-video:hover .vnc-video-mute { opacity: 1; }
.vnc-video-mute:hover { background: rgba(18,16,16,.78); }
.vnc-video-mute .vnc-ic-on { display: none; }
.vnc-video.is-sound-on .vnc-video-mute .vnc-ic-on { display: block; }
.vnc-video.is-sound-on .vnc-video-mute .vnc-ic-off { display: none; }

/* Belt and braces: if a native control layer ever appears, hide it. */
.vnc-video video::-webkit-media-controls,
.vnc-video video::-webkit-media-controls-enclosure,
.vnc-video video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }

/* The footer card shares the content column: 1232px is the 1280px page box less
   its 24px gutters, so the card's edges line up with everything above it. The
   design's flat `margin:24px` only aligned on its fixed 1280 canvas. */
@media (max-width: 600px) {
  .vnc-foot { width: calc(100% - 24px) !important; padding: 26px 22px 20px !important; }
}

/* ---- Horizontal rail controls ----
   The rails hide their scrollbar, which reads well but leaves a mouse user no
   way to move the row and no hint it continues. Buttons appear on hover or
   keyboard focus, and disappear entirely when there is nothing to scroll. */
.vnc-rail-wrap { position: relative; }
.vnc-rail-btn {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; z-index: 4;
  background: #fff; border: 1.5px solid #141212; color: #141212;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.vnc-rail-btn svg { width: 17px; height: 17px; }
.vnc-rail-prev { left: -6px; }
.vnc-rail-next { right: -6px; }
.vnc-rail-wrap:hover .vnc-rail-btn,
.vnc-rail-btn:focus-visible { opacity: 1; }
.vnc-rail-btn:hover { transform: translateY(-50%) scale(1.06); }
.vnc-rail-btn[disabled] { opacity: 0 !important; pointer-events: none; }
.vnc-rail-wrap.is-static .vnc-rail-btn { display: none; }

/* Touch devices scroll by swipe and have no hover — the buttons would only
   cover cards. */
@media (hover: none) {
  .vnc-rail-btn { display: none; }
}

/* ---- Full-bleed product rails ----
   The row runs edge to edge so cards bleed off both sides, but the FIRST card
   still lines up with the 1280px content column above it: the left pad is the
   24px page gutter plus whatever margin that column has at this viewport. */
.vnc-rail {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(24px, calc((100vw - 1280px) / 2 + 24px)) !important;
  padding-right: max(24px, calc((100vw - 1280px) / 2 + 24px));
  scroll-padding-left: max(24px, calc((100vw - 1280px) / 2 + 24px));
}
/* Arrows sit inside the content column, not out at the viewport edge. */
.vnc-rail-wrap .vnc-rail-prev { left: max(10px, calc((100vw - 1280px) / 2 + 10px)); }
.vnc-rail-wrap .vnc-rail-next { right: max(10px, calc((100vw - 1280px) / 2 + 10px)); }

/* =========================================================================
   Keep the theme's global resets out of the WordPress admin bar.

   `img { display:block }` was forcing the UnfoldCRO Security node's inline 16px
   icon onto its own line, which pushed its label out of the 32px bar and over
   the announcement strip. The bar is WordPress's UI, not ours — it styles itself
   and our resets have no business reaching it.
   ========================================================================= */
#wpadminbar img { display: inline-block; max-width: none; vertical-align: middle; }
#wpadminbar a { color: inherit; text-decoration: none; }
#wpadminbar * { box-sizing: content-box; }
#wpadminbar .ab-item { white-space: nowrap; }
#wpadminbar button { font-family: inherit; }

/* ---------------------------------------------------------------------------
   MYOB (make-your-own-bundle) mobile corrections.

   This file carries two generations of rules: an original design system around
   L1040-1225, and a later override block around L1950-1990 that re-declares the
   same selectors. Because the later block wins on source order, two deliberate
   mobile decisions were being undone:

   1. `.bb-grid` was set back to `auto-fill, minmax(190px, 1fr)`. Two 190px tracks
      plus the gap need ~396px, so a 390px phone fell to a SINGLE column.
   2. `.bb-tiers` / `.bb-viewcart` were un-hidden and `.bb-side-card` padding went
      back to 20px, so the fixed bottom bar rendered the full desktop card —
      310px, 37% of an iPhone screen.

   Appended at the end of the file so it settles both without touching either
   original block.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }

  /* NOTE: the mobile dock was rebuilt (bb-dock-lead / bb-dock-mid / bb-dock-cta)
     and now owns its own phone layout. The overrides that used to live here hid
     .bb-tiers and .bb-progress — which were redundant in the old bar but are core
     UI inside the new dock — so they collapsed it to 0x0. Removed; do not
     reintroduce display rules for the dock's internals from this file. */
}

/* Product page: the reel was a fixed 600px tall, so on a 390x844 phone the media
   alone ran to ~790px and pushed the title, price and buy button entirely below
   the fold. Cap it by viewport height and let the 9/16 ratio set the width, so the
   full video and the details under it share the first screen (VN Template does the
   same). Inline width/height on the element, hence the !important. */
@media (max-width: 640px) {
  /* Selector mirrors the existing `.vnc-pdp > div:first-child > div` rule in the
     860px block — that one is also !important and more specific, so a bare
     `.vnc-pdp-stage` lost to it and the reel stayed full-width (608px tall). */
  .vnc-pdp > div:first-child > div.vnc-pdp-stage {
    height: min(52vh, 440px) !important;
    width: auto !important;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  .vnc-pdp { gap: 18px !important; padding-top: 12px !important; }
}

/* Collection / category grid: the inline rule is auto-fill minmax(200px,1fr), which
   needs ~416px for two tracks. A 390px phone has ~342px of usable width, so it
   collapsed to a single column. Force the two-up the design intends. */
@media (max-width: 640px) {
  [data-coll-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* Static-page CTA row (About). The buttons sit side by side straight out of the
   editor content with nothing between them, and `.vnc-prose a` underlines every
   link — which on a filled pill button reads as a rendering fault. */
.vnc-prose .vnc-page-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.vnc-prose .vnc-page-cta a { text-decoration: none; }

/* Blog cards size to their own image now, so don't stretch them to the row height. */
.vnc-blog-grid { align-items: start; }

/* ---- Home page, phone corrections ---- */
@media (max-width: 640px) {
  /* Stats: four across on a 390px screen gives ~110px cells, so the labels wrap
     unevenly and the row reads as misaligned. Two-up, with the dividers redrawn
     for a 2x2 (the inline border-left assumes a single row). */
  .vnc-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .vnc-stats > div { border-left: 0 !important; padding: 20px 8px !important; }
  .vnc-stats > div:nth-child(2n) { border-left: 1px solid #ebe8e8 !important; }
  .vnc-stats > div:nth-child(n+3) { border-top: 1px solid #ebe8e8; }

  /* MYOB teaser: the overlapping card fan is 96px cards at -32px overlap, which
     measures ~410px and pushes past the screen edge. Scale it to fit. */
  .vnc-myob { overflow: hidden; }
  .vnc-myob-fan { padding: 6px 0 6px 26px !important; width: 100%; justify-content: center; }
  .vnc-myob-fan > * { width: 66px !important; height: 118px !important; margin-left: -22px !important; }
}

/* Product page title: 36px/1.12 Sora is right on desktop but on a 390px phone a
   long template name ran to three or four lines (~120px tall) and pushed the price
   and Add to cart down the page. Scaled with the viewport instead. */
@media (max-width: 640px) {
  .vnc-pdp h1 { font-size: clamp(21px, 5.6vw, 26px) !important; line-height: 1.2 !important; letter-spacing: -.5px !important; margin: 10px 0 6px !important; }
  .vnc-pdp .vnc-pdp-price, .vnc-pdp b[style*="40px"] { font-size: 30px !important; }
}

/* Two sticky buy bars exist by design: .vnc-buybar is phone-only (its own media
   query), .pdp-sticky owns desktop. .pdp-sticky has no width limit of its own, so
   without this both would stack at the bottom of a phone screen. */
@media (max-width: 680px) {
  .pdp-sticky { display: none !important; }
}

/* Desktop sticky buy bar in white, matching the phone bar (rgba(255,255,255,.96)).
   It was dark (rgba(20,20,25,0.92)), which was the only dark surface on the product
   page. The title needs an explicit dark colour — on the dark bar it inherited a
   light one — and a soft shadow replaces the contrast the dark panel used to give. */
.pdp-sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #ebe8e8 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
}
.pdp-sticky .ps-title { color: #141212; }
.pdp-sticky .ps-price .ps-was { color: #a5a0a0; }

/* ---- Phone: floating tab bar in white, and smaller rail cards ---- */
@media (max-width: 680px) {
  /* Was rgba(20,20,25,.92) — a dark slab floating over an otherwise white site.
     Item labels/icons inherit var(--muted), which is tuned for dark; they need an
     explicit dark ink so they stay legible on white. The red active state and the
     MYOB FAB already read correctly against white and are left alone. */
  .mtab {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #ebe8e8 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
  }
  .mtab-i { color: #6b6666 !important; }
  .mtab-i.is-active { color: #c40f22 !important; }
}

@media (max-width: 640px) {
  /* Rail product cards 20% smaller on phones: 226 -> 181 wide, 380 -> 304 tall.
     Both dimensions are inline on the elements, hence !important. Covers the
     video-player card and the poster-only fallback. */
  [data-rail] > div { width: 181px !important; }
  [data-rail] .vnc-video { height: 304px !important; }
  [data-rail] a[style*="380px"] { height: 304px !important; }
}

/* ---- Phone: side gutters + calmer category marquee ---- */
@media (max-width: 680px) {
  /* These blocks are `max-width:1280px; margin:X auto 0`, and auto margins collapse
     to 0 below 1280px — so on a phone each sat flush against both screen edges with
     its 22-26px corner radius and border clipped by the viewport. Give them the same
     14px gutter .wrap already uses on phones. */
  .vnc-hero, .vnc-stats, .vnc-myob, .vnc-banner, .vnc-faq, .vnc-coll-banner {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  /* Category tiles: two auto-scrolling rows ran 278px tall — a third of the screen
     for decoration. One row, slightly smaller tiles. The full-bleed 100vw stays:
     a marquee is meant to run off both edges, unlike the rounded cards above. */
  .cat-marquee > div:nth-child(2) { display: none !important; }  /* rows carry inline display:flex */
  .cat-marquee { padding: 4px 0 !important; }
  .cat-marquee .vnc-cat-tile { width: 128px !important; }
  .cat-marquee .vnc-cat-tile { font-size: 14px !important; padding: 14px 8px !important; }
}

/* Lazy category rails reserve the height a filled rail actually occupies, so
   injecting the cards shifts nothing. Measured: 431px desktop, 407px at 390px wide
   (cards are 20% smaller on phones). The class is removed once the cards land. */
.vnc-rail-lazy { min-height: 431px; }
@media (max-width: 640px) { .vnc-rail-lazy { min-height: 407px; } }

/* ===================================================================
   Collection filters — desktop sidebar, phone bottom sheet.
   The panel was 447px of filters sitting above the first template.
   =================================================================== */
.vnc-coll-filter-btn { display: none; }
.vnc-coll-sheet-head { display: none; }
.vnc-coll-overlay { display: none; }

@media (max-width: 860px) {
  .vnc-coll-filter-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 16px; background: #fff; border: 1px solid #e3dfdf;
    border-radius: 999px; font: 600 12.5px 'Manrope', sans-serif; color: #141212;
  }

  /* Slides up from the bottom. Kept in the DOM (not `hidden`) so it can animate;
     visibility keeps it out of the tab order while closed. */
  .vnc-coll-side {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
    width: auto !important; max-height: 82vh; overflow-y: auto;
    z-index: 210; margin: 0 !important;
    border: 0 !important; border-radius: 22px 22px 0 0 !important;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.22);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }
  .vnc-coll-side.is-open { transform: none; visibility: visible; }

  /* Sticky header so "close" is always reachable in a long filter list. */
  .vnc-coll-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; background: #fff;
    margin: 0 -18px 6px; padding: 14px 18px 12px;
    border-bottom: 1px solid #ebe8e8;
    font: 700 15px 'Sora', sans-serif;
  }
  .vnc-coll-sheet-head button {
    display: inline-flex; padding: 6px; border: 0; background: none;
    color: #6b6666; cursor: pointer; line-height: 0;
  }

  .vnc-coll-overlay {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: rgba(18, 16, 16, 0.5); opacity: 0;
    transition: opacity .28s ease;
  }
  .vnc-coll-overlay.is-open { opacity: 1; }
  .vnc-coll-overlay[hidden] { display: none; }
}

/* Collection banner on phones: it was 206px — a 34px H1 with 26/30px padding, and
   the rotated "3RD ONE FREE" badge wrapping onto its own line — so the first
   template sat well down the page. Same content, tighter. */
@media (max-width: 640px) {
  .vnc-coll-banner {
    padding: 14px 16px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }
  .vnc-coll-banner h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -.5px !important;
    margin: 3px 0 2px !important;
  }
  /* The badge shares the row instead of forcing a wrap. */
  .vnc-coll-banner > div:last-child {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-width: 1.5px !important;
    box-shadow: 2px 2px 0 #141212 !important;
  }
}

/* ===================================================================
   Product page buy block + USPs on phones.
   Wishlist and Share were rendering 24px tall (half the 44px minimum tap
   target) because they were flex items competing with two wide buttons.
   The four USPs stacked one per row at 145px each — 622px for four lines.
   =================================================================== */
@media (max-width: 640px) {
  .pdp-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  /* Primary and secondary get a full row each; the two icon actions share the third. */
  .pdp-actions > a { grid-column: 1 / -1; min-width: 0 !important; padding: 14px 0 !important; }
  .pdp-actions > button {
    width: auto !important; min-height: 46px; align-self: stretch;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    font: 700 12px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .6px;
  }
  /* Label the icon buttons — an unlabelled heart and share glyph are guesswork. */
  .pdp-actions > button[data-wish]::after { content: 'Save'; }
  .pdp-actions > button[data-share-url]::after { content: 'Share'; }

  .vnc-why { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vnc-why > div { padding: 13px 12px !important; border-radius: 14px !important; }
  .vnc-why > div > div:nth-child(2) { font-size: 13px !important; margin-top: 6px !important; }
  .vnc-why > div > div:nth-child(3) { font-size: 11.5px !important; line-height: 1.5 !important; }
}


/* ===================================================================
   Swipe deck — phone.
   Full-bleed black panel sized so the heading, the reel and both action
   buttons land inside one screen with no scrolling. The deck was 300x340
   (ratio 0.88), which squashed a 9:16 reel; it is now a true 9:16 card.
   =================================================================== */
@media (max-width: 640px) {
  .vnc-swipe {
    /* Edge to edge: cancels the 24px padding on the section wrapper too. */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    text-align: center;
  }
  /* Copy block: tight, so the reel gets the height. */
  .vnc-swipe .vnc-swipe-copy { font-size: 24px !important; letter-spacing: -.5px !important; }
  .vnc-swipe .vnc-swipe-sub { font-size: 13px !important; line-height: 1.5 !important; }

  /* A real 9:16 reel. Height drives it; width follows the ratio. */
  .vnc-swipe [data-swipe-deck] {
    height: min(470px, 56vh) !important;
    width: auto !important;
    aspect-ratio: 9 / 16;
    margin: 0 auto !important;
  }
  .vnc-swipe [data-swipe-actions] { margin: 0 auto !important; }
}
/* The "SWIPE RIGHT = IN CART" badge duplicates the subtitle on a small screen and
   costs ~55px of the one-view budget. */
@media (max-width: 640px) { .vnc-swipe-badge { display: none !important; } }

/* ===================================================================
   Bundle dock (MYOB)

   Appended deliberately at the END of the file. The earlier MYOB panel
   rules (~line 1191) were written before the .bb-* redesign block at
   ~1958, which redeclares .bb-side-card / .bb-tiers / .bb-chip-thumb /
   .bb-summary at the same specificity and therefore won everywhere,
   including inside the mobile media query. That is what left the phone
   panel with desktop geometry: stacked tier chips, an unreadable
   red-on-red status strip, a thumb with no background-size, and the
   checkout button hanging off the card edge. Everything the dock needs
   now lives here, after those rules, so it wins by document order.
   =================================================================== */

.bb-layout { grid-template-columns: 1fr; }

/* Empty bundle: the bar stays put at every width. It is the page's running
   scoreboard, and hiding it meant the dock only appeared once the cart call
   returned — which on this page reads as "the bar never loaded". Checkout is
   disabled instead, so the state is visible but not actionable. */
.bb-side.is-empty .bb-checkout { pointer-events: none; opacity: .45; }
.bb-side.is-empty .bb-viewcart { display: none; }
/* Nothing to show or expand while the bundle is empty. */
.bb-side.is-empty .bb-picked,
.bb-side.is-empty .bb-expand { display: none !important; }

/* ---- Desktop: full-width bar under the grid ---- */
@media (min-width: 901px) {
  .bb-side { position: sticky; top: auto; bottom: 18px; z-index: 90; margin-top: 24px; align-self: stretch; }
  /* The bar spans the grid, so its blocks stay anchored to the two ends and the
     status takes the middle. Centring the whole group instead squeezed all three
     into the middle third and left both ends empty. */
  .bb-side-card {
    display: flex; align-items: center; justify-content: space-between; gap: 26px;
    max-height: none; overflow: visible;
    padding: 14px 18px; border: 2px solid #141212; border-radius: 22px; background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  }
  .bb-dock-lead { display: flex; align-items: baseline; gap: 14px; flex: none; }
  .bb-dock-mid { flex: 1 1 auto; min-width: 0; text-align: center; }
  .bb-dock-cta { display: flex; align-items: center; gap: 10px; flex: none; }

  /* The bar carries the live status line; tiers and the picked list stay in the
     page header and the cart, so the bar never grows taller than one row. */
  .bb-side .bb-tiers,
  .bb-side .bb-progress,
  .bb-side .bb-picked,
  .bb-side .bb-expand,
  .bb-side .bb-summary { display: none; }

  .bb-side .bb-status { margin: 0; font-size: 13px; color: #6b6666; text-align: right; }
  .bb-side .bb-checkout, .bb-side .bb-viewcart { width: auto; margin: 0; padding: 12px 22px; font-size: 13px; }
}

/* ---- Shared dock typography ---- */
.bb-count { font: 400 13px 'Manrope', sans-serif; color: #6b6666; white-space: nowrap; }
.bb-count strong { font: 700 17px 'Sora', sans-serif; color: #141212; letter-spacing: -0.4px; }
.bb-count-sub { margin-left: 7px; font-size: 12px; color: #8a8585; }
/* Centred, not baseline: the savings pill has its own padding, so sitting it on
   the price baseline pushed it low against the 26px total. */
.bb-money { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-was { font-size: 14px; color: #8a8585; text-decoration: line-through; }
.bb-now { font: 700 26px 'Sora', sans-serif; color: #141212; letter-spacing: -1px; }
.bb-save-pill {
  font: 700 11px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .6px;
  background: #fdeeee; color: #c40f22; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}

/* The original mobile block styled .bb-status as a solid --accent pill with
   --accent-ink text. Later rules restated the colour but never the background,
   so the line kept its red fill under grey text and became unreadable. Reset
   the whole treatment here, once, for both breakpoints. */
.bb-side .bb-status {
  background: none; padding: 0; border-radius: 0; font-weight: 500; text-align: left;
}
.bb-side .bb-status strong { color: #c40f22; font-weight: 700; }

/* On the desktop bar the status owns the whole middle column, so left-aligning
   it parked the sentence against the savings pill with a wide gap before the
   buttons. Centre it in the space it actually occupies. */
@media (min-width: 901px) {
  .bb-side .bb-status { text-align: center; }
}

/* Thumb is a <span> painted with an inline background-image, so it needs
   background-size — object-fit does nothing here and left it rendering at
   natural size, which is what looked like a broken image. */
.bb-side .bb-chip-thumb {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  background-color: #f3f1f1;
}

/* ---- Mobile: collapsed bar / expanded sheet ---- */
@media (max-width: 900px) {
  .bb-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 120; margin: 0; }
  .bb-side-card {
    display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: center;
    /* `top: 96px` survives from the desktop sticky rule; on a relatively
       positioned box that offset still applies and pushed the whole panel a
       screen-and-a-bit below the fold. */
    position: relative; top: auto; max-height: none; overflow: visible;
    /* !important matches the later mobile override block, which forces this
       padding and would otherwise leave no room for the floating toggle. */
    padding: 22px 14px calc(11px + env(safe-area-inset-bottom)) !important;
    border: 1px solid #e3dfdf; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.16);
  }
  /* Collapsed reads bottom-up: what you picked and what unlocks next on the
     first row, then the money and the action beneath it. */
  .bb-dock-mid { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }

  /* Collapsed: the unlock line reads first, thumbs sit under it. Side by side,
     the line was squeezed into whatever the thumb strip left over and truncated
     mid-price. */
  .bb-side:not(.is-expanded) .bb-dock-mid { flex-direction: column; align-items: stretch; gap: 7px; }
  .bb-side:not(.is-expanded) .bb-status {
    order: 0; white-space: normal; overflow: visible; text-overflow: clip; flex: none;
  }
  .bb-side:not(.is-expanded) .bb-picked { order: 1; max-width: none; }
  .bb-dock-lead {
    grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 3px; min-width: 0;
  }
  .bb-dock-cta { grid-column: 2; grid-row: 2; display: flex; align-items: center; }

  .bb-now { font-size: 21px; }
  .bb-was { font-size: 12.5px; }
  .bb-save-pill { font-size: 10px; padding: 5px 9px; }
  .bb-side .bb-viewcart { display: none; }
  /* :not(.is-expanded) to out-specify the older collapsed rule, which zeroes the
     horizontal padding and leaves the label welded to the pill's edges. */
  .bb-side .bb-checkout,
  .bb-side:not(.is-expanded) .bb-checkout {
    width: auto; margin: 0; padding: 11px 18px; font-size: 13px; white-space: nowrap;
    border-radius: 999px;
  }
  /* The label is a text node and the arrow an inline SVG, so they sat on the text
     baseline with the glyph riding low. Centre both on the flex cross-axis. */
  .bb-side .bb-checkout {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1;
  }
  .bb-side .bb-checkout svg { flex: none; display: block; }

  /* Collapsed: one quiet status line, thumbs on a single scrolling row. */
  .bb-side .bb-tiers, .bb-side .bb-progress, .bb-side .bb-summary { display: none; }
  .bb-side .bb-status {
    order: 1; margin: 0; flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: #6b6666;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bb-side .bb-status strong { color: #c40f22; }
  .bb-side .bb-picked {
    order: 0; margin: 0; display: flex; flex-wrap: nowrap; gap: 6px;
    max-width: 117px; overflow-x: auto; scrollbar-width: none;
  }
  .bb-side .bb-picked::-webkit-scrollbar { display: none; }
  .bb-side .bb-picked:empty { display: none; }
  /* Picked thumbs 10% larger: 30 -> 33 collapsed, and the strip widens to match
     so the same three still sit in view before it scrolls. */
  .bb-side .bb-chip { width: 33px; flex: 0 0 auto; }
  .bb-side .bb-chip-thumb { width: 33px; height: 33px; border-radius: 8px; }
  .bb-side .bb-chip button { width: 16px; height: 16px; top: -5px; right: -5px; }
  .bb-side .bb-chip button svg { width: 9px; height: 9px; }
  /* Toggle floats on the panel's top edge in BOTH states — it belongs to the
     panel, not to a row inside it, and stays in one place as the sheet opens. */
  .bb-side .bb-expand {
    /* The card is a grid and an older rule still assigns this button
       `grid-column: 2; grid-row: 2`. For an absolutely positioned grid child the
       GRID AREA becomes the containing block, so those two lines pinned the
       toggle over the checkout cell. Clear the placement and it resolves against
       the card itself. */
    grid-area: auto; justify-self: auto; align-self: auto;
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 6;
    flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 0;
    padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #e3dfdf;
    box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.10);
    color: #141212; font: 600 11.5px 'Manrope', sans-serif; cursor: pointer; white-space: nowrap;
  }
  .bb-side .bb-expand[hidden] { display: none; }
  /* The icon is chevron-right, so the rotation carries the meaning: up while
     collapsed (the sheet will rise), down once expanded (it will drop back). */
  .bb-side .bb-expand-chev { display: inline-flex; transition: transform 180ms ease; transform: rotate(-90deg); }
  .bb-side.is-expanded .bb-expand-chev { transform: rotate(90deg); }

  /* Expanded: the same card becomes a sheet, in reading order.
     The card itself must NOT scroll — the toggle straddles its top edge, and an
     overflow:auto ancestor would clip anything sitting outside the box. The
     picked grid keeps its own capped scroll instead, so the sheet still cannot
     outgrow the screen. */
  .bb-side.is-expanded .bb-side-card {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    max-height: none; overflow: visible; padding-top: 24px;
  }
  /* Price line sits directly above the buttons, where the totals block used to
     be — it is the last thing read before committing. */
  .bb-side.is-expanded .bb-dock-mid { order: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .bb-side.is-expanded .bb-dock-lead {
    order: 1; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px;
    padding-top: 12px; border-top: 1px solid #ebe8e8;
  }
  .bb-side.is-expanded .bb-tiers { order: 0; display: flex; flex-direction: row; gap: 8px; margin: 0; }
  .bb-side.is-expanded .bb-tier {
    flex: 1; justify-content: center; margin: 0; padding: 8px 4px; font-size: 12px; text-align: center;
    border-radius: 10px; background: #f8f6f6; border: 1px solid #e3dfdf; color: #6b6666;
  }
  .bb-side.is-expanded .bb-tier.is-hit { border-color: #e01e2f; background: #fdf5f5; color: #141212; font-weight: 600; }
  .bb-side.is-expanded .bb-progress { order: 1; display: block; margin: 0; }
  .bb-side.is-expanded .bb-status { order: 2; white-space: normal; overflow: visible; font-size: 12.5px; text-align: left; }
  .bb-side.is-expanded .bb-picked {
    order: 3; flex-wrap: wrap; max-width: none; max-height: 32vh; overflow-y: auto; overflow-x: hidden; gap: 8px;
  }
  .bb-side.is-expanded .bb-chip, .bb-side.is-expanded .bb-chip-thumb { width: 46px; }
  .bb-side.is-expanded .bb-chip-thumb { height: 62px; border-radius: 9px; }
  /* Toggle floats on the sheet's top edge, like a handle. Out of flow, so it no
     longer sits between the thumbnails and the buttons. */
  .bb-side.is-expanded .bb-expand {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 6;
    order: 0; margin: 0; padding: 7px 14px;
    background: #fff; border: 1px solid #e3dfdf; box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.10);
  }

  /* The breakdown said the same thing as the headline — subtotal, savings and
     total are all already in the price line at the top of the sheet. */
  .bb-side.is-expanded .bb-summary { display: none; }

  .bb-side.is-expanded .bb-dock-cta { order: 2; display: flex; flex-direction: row; align-items: stretch; gap: 10px; }
  /* align-self stretches to the line box MINUS margins, and .bb-viewcart carries
     an inherited vertical margin from the stacked layout — that margin was the
     12px height gap, not a misalignment. Zero it and both pills match. */
  .bb-side.is-expanded .bb-dock-cta > * { align-self: stretch; margin: 0; }
  .bb-side.is-expanded .bb-viewcart { flex: 1 1 0; display: flex; align-items: center; justify-content: center; width: auto; text-align: center; padding: 12px 10px; font-size: 12.5px; }
  .bb-side.is-expanded .bb-checkout { flex: 1.4 1 0; width: auto; padding: 12px 10px; font-size: 13.5px; }
}

/* ---- MYOB builder card ----------------------------------------------------
   Flat card: media, title, usage count, add pill. The phone-mockup frame the
   grid used to render belongs on the marketing rails, not here — in a picker
   the chrome competes with the 400 thumbnails the buyer is scanning.
   -------------------------------------------------------------------------- */
.bb-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3dfdf; border-radius: 16px; padding: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.bb-card:hover { border-color: #cfc9c9; }
/* Inset ring rather than a 2px border, so promoting a card to "in cart" does not
   shift its contents by a pixel. */
.bb-card.is-in { border-color: #141212; box-shadow: inset 0 0 0 1px #141212; }

.bb-cardmedia { position: relative; border-radius: 11px; overflow: hidden; }
.bb-incart {
  display: none; position: absolute; top: 8px; left: 8px; z-index: 3;
  background: #141212; color: #fff; border-radius: 999px; padding: 5px 9px;
  font: 700 9.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
}
.bb-card.is-in .bb-incart { display: inline-block; }

.bb-cardimg { display: block; position: relative; aspect-ratio: 9/16; border-radius: 11px; overflow: hidden; }
.bb-cardimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bb-cardtitle {
  display: block; margin: 10px 2px 0; color: #141212;
  font: 600 13px/1.35 'Sora', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-cardtitle:hover { color: #c40f22; }

.bb-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 2px 2px; }
/* The count yields first: "In cart" is a wider label than "Add", and on a
   two-column phone grid a non-shrinking count pushed the pill past the card. */
.bb-uses { flex: 0 1 auto; min-width: 0; font-size: 11.5px; color: #8a8585; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-fire { display: inline-block; animation: fireFlick 1.1s ease-in-out infinite; }

.bb-addbtn {
  flex: none; cursor: pointer; border: 1px solid transparent; border-radius: 999px;
  padding: 8px 16px; color: #fff; background: linear-gradient(90deg, #ef2038, #c40f22);
  font: 700 10.5px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .8px;
  transition: filter 160ms ease;
}
.bb-addbtn:hover { filter: brightness(1.06); }
.bb-addbtn.is-added { background: #fff; color: #141212; border-color: #e3dfdf; }

/* Page head: eyebrow above the title, per the MYOB design. */
.bb-eyebrow {
  margin: 0 0 6px; font: 700 11px 'Sora', sans-serif;
  text-transform: uppercase; letter-spacing: 3px; color: #c40f22;
}

/* The fixed dock overlays the last row on phones; give the grid room to end. */
@media (max-width: 900px) {
  .bb-layout { padding-bottom: 104px; }
}
@media (max-width: 640px) {
  .bb-card { padding: 7px; border-radius: 14px; }
  .bb-cardtitle { font-size: 12.5px; margin-top: 8px; }
  .bb-uses { font-size: 10.5px; }
  .bb-addbtn { padding: 7px 11px; font-size: 9.5px; letter-spacing: .6px; }
  .bb-incart { top: 7px; left: 7px; font-size: 9px; padding: 4px 8px; }
}

/* ---- "Explore more categories" pill rail ----------------------------------
   One scrolling line instead of a wrapping block. Pills keep their intrinsic
   width (flex:none) so they never squash to fit.
   -------------------------------------------------------------------------- */
.vnc-catrail {
  display: flex; gap: 10px; margin-top: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.vnc-catrail::-webkit-scrollbar { display: none; }
.vnc-catrail > a { scroll-snap-align: start; }

/* Bleed to the screen edges on phones so a pill never looks clipped by the
   container padding; the inline padding keeps the first pill off the edge. */
@media (max-width: 640px) {
  .vnc-catrail { margin-inline: -32px; padding-inline: 32px; }
}

/* ---- Mobile tab bar: cart/wishlist count -----------------------------------
   .mtab-ic is itself a <span>, so the label rule that ellipsises tab captions
   (.mtab-i span { overflow:hidden }) was also clipping the badge, which is
   absolutely positioned at top:-6px/right:-8px and therefore sits outside its
   parent's box. Give the icon wrapper its own visible overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mtab-i .mtab-ic { overflow: visible; max-width: none; text-overflow: clip; }
  .mtab { overflow: visible; }
  /* Two digits ("12") need more room than the 15px circle sized for one. */
  .mtab-b { min-width: 16px; height: 16px; line-height: 16px; font-size: 9px; padding: 0 4px; box-sizing: border-box; }
}

/* ---- MYOB: phone gutter + sticky filter row --------------------------------
   `.bb` carried its own 24px side padding on top of the 14px gutter `.wrap`
   already applies on phones, so this page sat 38px in from each edge while every
   home section sat at 14px. Drop the section padding and let the shared gutter
   do the work.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .bb { padding-left: 0; padding-right: 0; }
}

/* The filter row sticks under the header. --vnc-headh is measured live in
   theme.js because the header changes height when it sheds the search row, and
   the old `var(--head)` constant described the desktop header only — which is
   why the pill slid behind a taller phone header. */
.bb-filter { position: sticky; top: calc(var(--vnc-headh, 68px) + 8px); z-index: 30; }

@media (max-width: 680px) {
  .bb-filter {
    display: flex; align-items: center; gap: 10px;
    /* Sits directly under the header: the row paints its own white background,
       so any gap here just shows page behind a floating strip. */
    top: var(--vnc-headh, 68px);
    margin: 0 -14px; padding: 8px 14px;
    background: #fff;
  }
  .bb-filter-btn { flex: none; }

  /* Reads like the filter pill: icon plus label, not a bare circle. Expands into
     a full-width field on tap. */
  .bb-search {
    margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
    background: #fff; border: 1px solid #e3dfdf; border-radius: 999px;
    padding: 2px; transition: flex-basis 220ms ease;
  }
  .bb-search-btn {
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
    background: none; color: #141212; cursor: pointer;
    font: 600 13px 'Manrope', sans-serif;
  }
  .bb-search-label { display: inline; }
  .bb-search.is-open .bb-search-label { display: none; }
  .bb-search.is-open .bb-search-btn { padding: 0 6px 0 10px; }

  /* Close control only exists once the field is open. */
  .bb-search-close {
    display: none; flex: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-right: 3px; padding: 0;
    border: 0; border-radius: 999px; background: #f3f1f1; color: #141212; cursor: pointer;
  }
  .bb-search.is-open .bb-search-close { display: inline-flex; }
  .bb-search-input {
    width: 0; min-width: 0; padding: 0; border: 0; outline: none; background: none;
    font: 500 13px 'Manrope', sans-serif; color: #141212;
    transition: width 220ms ease, padding 220ms ease;
  }
  /* type=search draws its own clear button, which sat next to ours and showed
     two crosses the moment anything was typed. */
  .bb-search-input::-webkit-search-cancel-button,
  .bb-search-input::-webkit-search-decoration {
    -webkit-appearance: none; appearance: none; display: none;
  }
  .bb-search.is-open { flex: 1 1 auto; background: #fff; }
  .bb-search.is-open .bb-search-input { width: 100%; padding-right: 12px; }
  /* Class goes on the row, not the form: the pill precedes the form in the DOM,
     so no sibling combinator can reach back to it. */
  .bb-filter.is-searching .bb-filter-btn { display: none; }

  /* The category panel is a child of the row, so making that row a flex line
     turned the panel into a flex item and it stood up as a column beside the
     pill. Take it out of flow entirely and open it as a bottom drawer. */
  .bb-filter .bb-tabs {
    /* Above the bundle dock (z-index 120), which otherwise painted over the last
       rows of chips, and padded past it so nothing sits under the bar. */
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 300;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
    margin: 0; max-height: 68vh; overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    background: #fff; border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.22);
  }
  /* The dock occupies the same corner of the screen; while the drawer is open it
     would show through beneath the chips. */
  body.bb-filter-open .bb-side { display: none; }
  /* Explicit: the rule above sets display, which would otherwise beat [hidden]. */
  .bb-filter .bb-tabs[hidden] { display: none !important; }

  /* Header sheds its full-width search row once scrolled; the pill above takes
     over, so search is never more than a tap away. */
  .vnc-head.is-condensed .vnc-head-search { display: none !important; }
}

/* Desktop keeps the header search, which never moves — no second control. */
@media (min-width: 681px) {
  .bb-search { display: none; }
}

/* ---- Bundle dock: open / collapse transition --------------------------------
   The two states are different layouts (grid vs flex column), so store.js FLIPs
   the height: measure, swap, measure, tween. The card owns the height easing and
   clips while it runs; the toggle lives outside the card so it is never clipped.
   Contents rise and fade in as the panel grows, which is what carries the eye
   across the swap.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bb-side.is-tween .bb-side-card {
    overflow: hidden;
    transition: height 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: height;
  }
  /* Content rise/fade is driven by store.js (Web Animations), not a class: the
     equivalent CSS lost the cascade to the state rules on these same blocks. */

  .bb-expand-chev { transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-side .bb-side-card,
  .bb-side .bb-side-card,
  .bb-expand-chev { transition: none !important; }
}

/* "Explore more categories" is a single pill line, not a card rail, so it needs
   less air beneath it than the sections either side. The next block carries an
   80px top margin of its own; pull that in for this pairing only. */
.vnc-catsec + div { margin-top: 40px !important; }
@media (max-width: 680px) {
  .vnc-catsec { padding-top: 26px !important; }
  .vnc-catsec + div { margin-top: 32px !important; }
}

/* Browse drawer: "View all categories" sits between the category list and the
   MYOB call to action, so it reads as the end of the list rather than another
   category — no count, and a divider above it. */
.nav-drawer-body .is-all {
  border-top: 1px solid var(--line, #ebe8e8);
  margin-top: 6px;
  padding-top: 12px;
  font-weight: 600;
}
.nav-drawer-body .is-all span { display: inline-flex; line-height: 0; color: #c40f22; }

/* ============================================================================
   Cursors — two only: a hand on things you can click, an arrow on everything
   else. The browser default puts an I-beam over every run of text, which on a
   storefront reads as "this is an editable field" on copy that is not one.
   Real text inputs keep the I-beam, because there the meaning is correct.
   ========================================================================= */
body,
h1, h2, h3, h4, h5, h6,
p, span, li, td, th, dd, dt, small, strong, b, em, i, label, figcaption {
	cursor: default;
}

a[href],
button,
summary,
select,
[role="button"],
[role="tab"],
[role="option"],
[data-add],
[data-market],
.vnc-region,
.btn,
.chip,
.bb-tier,
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="submit"],
input[type="button"],
label[for] {
	cursor: pointer;
}

/* Genuine free-text entry — the I-beam belongs here and nowhere else. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
[contenteditable="true"] {
	cursor: text;
}

/* A disabled control should not promise a click. */
button[disabled],
input[disabled],
select[disabled],
.btn[disabled],
[aria-disabled="true"] {
	cursor: not-allowed;
}

/* ============================================================================
   Rails scroll by hand, never on their own.
   The ambient drift and the 55s category marquee are gone; these keep the
   strips usable without them — a hidden scrollbar so the band still looks like
   a band, momentum scrolling on iOS, and a grab cursor so a mouse user can see
   the row is draggable.
   ========================================================================= */
.cat-marquee {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* old Edge  */
	overscroll-behavior-x: contain; /* don't trigger back-swipe at the ends */
}
.cat-marquee::-webkit-scrollbar { display: none; }

[data-rail] {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;
}
[data-rail].is-dragging {
	cursor: grabbing;
	/* Kill text/image selection mid-drag, and stop the browser's own smooth
	   scrolling from fighting the per-frame scrollLeft the drag sets. */
	user-select: none;
	scroll-behavior: auto;
}
[data-rail].is-dragging a,
[data-rail].is-dragging img,
[data-rail].is-dragging video { pointer-events: none; }