@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,900&family=Instrument+Serif:ital@1&display=swap');

/* ============================================================================
   YARDLY — Storefront Theme
   Forest Green premium outdoor brand
   Fonts: Bricolage Grotesque (display + body) · Instrument Serif (accent)
   (Banned fonts never used: Inter, Roboto, Arial, Helvetica, Space Grotesk,
    Open Sans, Lato, Montserrat, Poppins)
   ========================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --bg:        #faf7f2;
  --bg-alt:    #f0ebe1;
  --bg-deep:   #0f1f0f;
  --ink:       #1a2e1a;
  --ink-soft:  #3d5c3d;
  --muted:     #6b7280;
  --accent:    #e8651a;
  --accent-soft: #f08040;
  --accent-ink:  #ffffff;
  --success: #16a34a;
  --danger:  #dc2626;
  --hairline:  rgba(26,46,26,0.12);
  --hairline-2: rgba(26,46,26,0.06);
  --scrim:     rgba(0,0,0,0.12);
  --shadow-overlay: 0 1px 2px rgba(0,0,0,0.05), 0 12px 34px rgba(0,0,0,0.12);
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-accent:  "Instrument Serif", Georgia, serif;
  --f-body:    "Bricolage Grotesque", system-ui, sans-serif;
  --fs-eyebrow: 0.75rem;
  --fs-meta:    0.875rem;
  --fs-body:    1rem;
  --fs-lead:    1.25rem;
  --fs-h3:      1.5625rem;
  --fs-h2:      clamp(1.8rem, 3.4vw, 2.4rem);
  --fs-h1:      clamp(2.8rem, 6.5vw, 5.2rem);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  --r-sm:6px; --r-md:12px; --r-pill:999px;
  --maxw:1340px; --gutter:32px;
  --ease-out:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --d-micro:180ms; --d-reveal:280ms; --d-section:480ms;
}

[data-scheme="ink"] {
  --bg: #0f1f0f; --bg-alt:#1a3a1a; --ink:#faf7f2; --ink-soft:#a8c4a8;
  --muted:#6b9e6b; --hairline:rgba(250,247,242,0.16); --hairline-2:rgba(250,247,242,0.08);
}

/* ---- 2. Reset / base --------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,select,textarea { font:inherit; color:inherit; }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }

/* a11y utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:200; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:var(--r-md); transform:translateY(-150%); transition:transform var(--d-micro) var(--ease-out); }
.skip-link:focus { transform:translateY(0); }
main:focus { outline:none; }

/* ---- 3. Typography ----------------------------------------------------- */
h1,h2,h3,h4 { font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:0.02em; text-transform:uppercase; }
h4 { text-transform:none; letter-spacing:0.01em; }
h1,.display { font-size:var(--fs-h1); line-height:1.03; letter-spacing:0.01em; }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); line-height:1.14; }
h4 { font-size:var(--fs-lead); }
p { max-width:68ch; }
.lead { font-size:var(--fs-lead); line-height:1.5; color:var(--ink-soft); }
.accent { font-family:var(--f-accent); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none; }
.eyebrow {
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.16em;
  font-weight:600; color:var(--muted);
}
.muted { color:var(--muted); }
.meta { font-size:var(--fs-meta); color:var(--ink-soft); }
.price { font-variant-numeric:tabular-nums; }
.price-was { color:var(--muted); text-decoration:line-through; font-weight:400; }
.price-save { color:var(--accent); font-weight:600; }

/* ---- 4. Layout --------------------------------------------------------- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--s24); }
.section--tight { padding-block:var(--s16); }
.section[data-scheme="ink"], .scheme-ink { background:var(--bg); color:var(--ink); }
.bg-alt { background:var(--bg-alt); }
.center { text-align:center; }
.stack > * + * { margin-top:var(--s4); }
.section-head { max-width:42rem; margin-bottom:var(--s12); }
.section-head.center { margin-inline:auto; }
.split { display:grid; gap:var(--s16); align-items:center; }
@media (min-width:900px){
  .split { grid-template-columns:1fr 1fr; gap:var(--s24); }
  .split--57 { grid-template-columns:5fr 7fr; }
  .split--75 { grid-template-columns:7fr 5fr; }
  .split.reverse > :first-child { order:2; }
}

/* ---- 5. Buttons -------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--f-body); font-weight:600; font-size:0.8125rem;
  text-transform:uppercase; letter-spacing:0.07em;
  padding:0 var(--s8); height:52px; border-radius:var(--r-md);
  transition:background var(--d-micro) var(--ease-io), color var(--d-micro), transform var(--d-micro), border-color var(--d-micro);
  white-space:nowrap;
}
.btn:active { transform:scale(0.985); }
.btn--primary { background:var(--accent); color:#fff; }
.btn--primary:hover { background:#c8520f; }
[data-scheme="ink"] .btn--primary { background:var(--accent); color:#fff; }
.btn--secondary { border:1px solid var(--ink); color:var(--ink); }
.btn--secondary:hover { background:var(--ink); color:var(--bg); }
.btn--accent { background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover { background:#0b7d90; }
.btn--ghost { color:var(--ink); padding-inline:var(--s2); height:auto; letter-spacing:0.06em; }
.btn--ghost:hover { color:var(--accent); }
.btn--block { width:100%; }
.btn--lg { height:58px; font-size:0.875rem; }
.btn[disabled] { opacity:0.4; pointer-events:none; }
.link-underline { position:relative; font-weight:500; }
.link-underline::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--d-micro) var(--ease-io); }
.link-underline:hover::after { transform:scaleX(1); }

/* ---- 6. Announcement bar ---------------------------------------------- */
.announce {
  background:var(--ink); color:var(--bg); text-align:center;
  font-size:0.75rem; letter-spacing:0.05em; min-height:40px;
  display:flex; align-items:center; justify-content:center; gap:var(--s6);
  padding:var(--s2) var(--s12); position:relative;
}
.announce__rot { position:relative; height:1.25em; line-height:1.25em; overflow:hidden; }
.announce__rot span { display:block; height:1.25em; line-height:1.25em; animation:announceRot 12s infinite; }
@keyframes announceRot { 0%,28%{transform:translateY(0)} 33%,61%{transform:translateY(-1.25em)} 66%,94%{transform:translateY(-2.5em)} 100%{transform:translateY(0)} }
.announce__close { position:absolute; right:var(--s4); top:50%; transform:translateY(-50%); opacity:.6; font-size:1rem; }
.announce__close:hover { opacity:1; }
@media (max-width:640px){ .announce__sep{ display:none; } }

/* ---- 7. Header / nav --------------------------------------------------- */
.header { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color var(--d-micro), padding var(--d-micro); }
.header.is-stuck { border-bottom-color:var(--hairline); }
.header__bar { display:flex; align-items:center; justify-content:space-between; height:80px; transition:height var(--d-micro) var(--ease-io); }
.header.is-stuck .header__bar { height:64px; }
.brand { font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:-0.02em; }
.brand sup { font-family:var(--f-accent); font-style:italic; font-size:.6em; color:var(--accent); margin-left:1px; }
.nav { display:none; gap:var(--s8); }
.nav__item { font-size:0.9rem; font-weight:500; padding-block:var(--s3); position:relative; display:inline-flex; align-items:center; gap:4px; }
.nav__item:hover { color:var(--accent); }
.header__actions { display:flex; align-items:center; gap:var(--s4); }
.icon-btn { position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-md); }
.icon-btn:hover { background:var(--bg-alt); }
.cart-count { position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px; background:var(--accent); color:#fff; font-size:0.625rem; font-weight:700; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; }
.nav-toggle { display:inline-flex; }
@media (min-width:1000px){ .nav { display:flex; } .nav-toggle{ display:none; } }

/* Mega menu */
.mega { position:absolute; left:0; right:0; top:100%; background:var(--bg); border-top:1px solid var(--hairline); box-shadow:var(--shadow-overlay); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out), visibility var(--d-reveal); }
.has-mega:hover .mega, .mega:hover { opacity:1; visibility:visible; transform:translateY(0); }
.mega__inner { display:grid; grid-template-columns:repeat(3,1fr) 1.3fr; gap:var(--s12); padding:var(--s12) var(--gutter); max-width:var(--maxw); margin-inline:auto; }
.mega__col h5 { font-family:var(--f-body); font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); margin-bottom:var(--s4); }
.mega__col a { display:block; padding-block:6px; font-size:0.95rem; }
.mega__col a:hover { color:var(--accent); }
.mega__promo { background:var(--bg-alt); border-radius:var(--r-md); overflow:hidden; position:relative; min-height:200px; display:flex; align-items:flex-end; }
.mega__promo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega__promo span { position:relative; padding:var(--s4); color:#fff; font-family:var(--f-display); font-size:1.1rem; background:linear-gradient(transparent, rgba(0,0,0,.55)); width:100%; }

/* ---- 8. Hero ----------------------------------------------------------- */
.hero { position:relative; min-height:84vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__media, .hero__media img, .hero__media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, transparent); }
.hero__scrim { position:absolute; inset:0; background:var(--scrim); }
.hero__inner { position:relative; z-index:2; padding-block:var(--s24); max-width:36rem; }
.hero h1 { color:#fff; }
.hero .eyebrow { color:rgba(255,255,255,.8); }
.hero .lead { color:rgba(255,255,255,.88); }
.hero__trust { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s6); font-size:0.85rem; color:rgba(255,255,255,.9); }
.hero__trust .stars { color:#F2C14E; }
@media (max-width:640px){ .hero__media::after{ background:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6)); } }

/* ---- 9. Trust / press / stats ----------------------------------------- */
.pressbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s12); opacity:.7; }
.pressbar span { font-family:var(--f-display); font-size:1.15rem; letter-spacing:.02em; filter:grayscale(1); }
.usps { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s8) var(--s6); }
.usp { display:flex; gap:var(--s3); align-items:flex-start; }
.usp svg { flex:0 0 22px; margin-top:2px; color:var(--accent); }
.usp b { display:block; font-weight:600; }
.usp p { font-size:0.875rem; color:var(--ink-soft); }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s12); text-align:center; }
.stat .num { font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3rem); line-height:1; }
.stat .lbl { font-size:0.85rem; color:var(--ink-soft); margin-top:var(--s2); }
@media (min-width:768px){ .usps{ grid-template-columns:repeat(4,1fr); } .stats{ grid-template-columns:repeat(4,1fr); } }

/* ---- 10. Product card -------------------------------------------------- */
.grid-products { display:grid; gap:var(--s8) var(--s6); grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .grid-products{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .grid-products{ grid-template-columns:repeat(4,1fr); } }
.card { position:relative; display:flex; flex-direction:column; }
.card__media { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md); background:var(--bg-alt); }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--d-reveal) var(--ease-out), opacity var(--d-reveal); }
.card__media img.alt { position:absolute; inset:0; opacity:0; }
.card:hover .card__media img.main { transform:scale(1.03); }
.card:hover .card__media img.alt { opacity:1; }
.card__quick { position:absolute; left:var(--s3); right:var(--s3); bottom:var(--s3); opacity:0; transform:translateY(8px); transition:opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); }
.card:hover .card__quick { opacity:1; transform:translateY(0); }
.card__quick .btn { background:var(--bg); color:var(--ink); box-shadow:var(--shadow-overlay); height:44px; }
.card__quick .btn:hover { background:var(--ink); color:var(--bg); }
.card__body { padding-top:var(--s4); }
.card__title { font-family:var(--f-body); font-weight:600; font-size:0.95rem; }
.card__desc { font-size:0.825rem; color:var(--muted); margin-top:2px; }
.card__price { margin-top:var(--s2); font-size:0.95rem; display:flex; gap:var(--s3); align-items:baseline; }
.card__swatches { display:flex; gap:6px; margin-top:var(--s3); }
.swatch { width:16px; height:16px; border-radius:var(--r-pill); border:1px solid var(--hairline); }
.swatch[aria-current="true"] { outline:1.5px solid var(--ink); outline-offset:2px; }
@media (hover:none){ .card__quick{ opacity:1; transform:none; } }

/* ---- 11. Badges & stars ----------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 8px; border-radius:var(--r-sm); }
.badge--sale { background:var(--accent); color:#fff; }
.badge--new { background:var(--ink); color:var(--bg); }
.badge--soft { background:var(--bg-alt); color:var(--ink-soft); }
.card__badge { position:absolute; top:var(--s3); left:var(--s3); z-index:2; }
.stars { color:#B8841F; letter-spacing:1px; font-size:0.9rem; }  /* >3:1 graphical contrast */
.rating { display:inline-flex; align-items:center; gap:var(--s2); font-size:0.85rem; }
.rating a { color:var(--ink-soft); }

/* ---- 12. Cart drawer --------------------------------------------------- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity var(--d-reveal); z-index:90; }
.overlay.open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; height:100dvh; width:min(420px,100%); background:var(--bg); z-index:100; transform:translateX(100%); transition:transform var(--d-section) var(--ease-out); display:flex; flex-direction:column; box-shadow:var(--shadow-overlay); }
.drawer.open { transform:translateX(0); }
.drawer__head { display:flex; align-items:center; justify-content:space-between; padding:var(--s6); border-bottom:1px solid var(--hairline); }
.drawer__head h3 { font-size:1.1rem; }
.ship-bar { padding:var(--s4) var(--s6); background:var(--bg-alt); font-size:0.825rem; }
.ship-bar__track { height:6px; border-radius:var(--r-pill); background:var(--hairline); margin-top:var(--s2); overflow:hidden; }
.ship-bar__fill { height:100%; background:var(--success); width:0; transition:width var(--d-section) var(--ease-out); }
.drawer__items { flex:1; overflow-y:auto; padding:var(--s4) var(--s6); }
.line { display:grid; grid-template-columns:64px 1fr auto; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--hairline-2); }
.line__img { width:64px; height:80px; object-fit:cover; border-radius:var(--r-sm); background:var(--bg-alt); }
.line__t { font-weight:600; font-size:0.9rem; }
.line__v { font-size:0.8rem; color:var(--muted); }
.qty { display:inline-flex; align-items:center; border:1px solid var(--hairline); border-radius:var(--r-md); margin-top:var(--s2); }
.qty button { width:28px; height:28px; font-size:1rem; }
.qty span { min-width:26px; text-align:center; font-size:0.85rem; font-variant-numeric:tabular-nums; }
.line__rm { font-size:0.75rem; color:var(--muted); text-decoration:underline; margin-top:6px; }
.line__price { font-size:0.9rem; font-variant-numeric:tabular-nums; text-align:right; }
.crosssell { padding:var(--s4) var(--s6); border-top:1px solid var(--hairline); }
.crosssell h5 { font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:var(--s3); }
.cs-item { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; }
.cs-item img { width:44px; height:54px; object-fit:cover; border-radius:var(--r-sm); }
.cs-item .t { font-size:0.85rem; font-weight:500; flex:1; }
.cs-add { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--ink); border-radius:var(--r-pill); padding:5px 12px; }
.cs-add:hover { background:var(--ink); color:var(--bg); }
.drawer__foot { padding:var(--s6); border-top:1px solid var(--hairline); }
.drawer__sub { display:flex; justify-content:space-between; font-weight:600; margin-bottom:var(--s2); }
.drawer__note { font-size:0.75rem; color:var(--muted); margin-bottom:var(--s4); }
.trust-row { display:flex; align-items:center; justify-content:center; gap:var(--s4); font-size:0.72rem; color:var(--muted); margin-top:var(--s4); }
.pay-icons { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:var(--s3); opacity:.8; }
.pay-icons img, .pay-icons svg { height:22px; }
.drawer__empty { padding:var(--s16) var(--s6); text-align:center; color:var(--muted); }

/* Mobile nav (built by app.js) */
.mnav { position:fixed; top:0; left:0; height:100dvh; width:min(330px,84%); background:var(--bg); z-index:100; transform:translateX(-100%); transition:transform var(--d-section) var(--ease-out); box-shadow:var(--shadow-overlay); padding:var(--s6); display:flex; flex-direction:column; }
.mnav.open { transform:translateX(0); }
.mnav__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s6); }
.mnav a:not(.brand) { padding:var(--s4) 0; font-family:var(--f-display); font-size:1.3rem; border-bottom:1px solid var(--hairline-2); }
.mnav a:not(.brand):hover { color:var(--accent); }

/* ---- 13. Sticky ATC ---------------------------------------------------- */
.sticky-atc { position:fixed; left:0; right:0; bottom:0; z-index:70; background:color-mix(in srgb,var(--bg) 94%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--hairline); transform:translateY(110%); transition:transform var(--d-section) var(--ease-out); }
.sticky-atc.show { transform:translateY(0); }
.sticky-atc__in { display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--gutter); max-width:var(--maxw); margin-inline:auto; }
.sticky-atc img { width:42px; height:52px; object-fit:cover; border-radius:var(--r-sm); }
.sticky-atc__t { flex:1; min-width:0; }
.sticky-atc__t b { display:block; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-atc__t .price { font-size:0.85rem; }
@media (max-width:640px){ .sticky-atc__t b{ font-size:0.8rem; } .sticky-atc img{ display:none; } }

/* ---- 14. Modal --------------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; padding:var(--s6); }
.modal.open { display:flex; }
.modal__card { position:relative; background:var(--bg); border-radius:var(--r-md); max-width:520px; width:100%; padding:var(--s12); box-shadow:var(--shadow-overlay); z-index:2; }
.modal__close { position:absolute; top:var(--s4); right:var(--s4); font-size:1.3rem; color:var(--muted); }

/* ---- 15. Accordion ----------------------------------------------------- */
.accordion { border-top:1px solid var(--hairline); }
.acc { border-bottom:1px solid var(--hairline); }
.acc__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s6) 0; text-align:left; font-family:var(--f-display); font-weight:500; font-size:1.05rem; }
.acc__q svg { flex:0 0 18px; transition:transform var(--d-reveal) var(--ease-io); }
.acc.open .acc__q svg { transform:rotate(180deg); }
.acc__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-reveal) var(--ease-io); }
.acc.open .acc__a { grid-template-rows:1fr; }
.acc__a > div { overflow:hidden; }
.acc__a p { padding-bottom:var(--s6); color:var(--ink-soft); }

/* ---- 16. Forms --------------------------------------------------------- */
.field { display:block; margin-bottom:var(--s4); }
.field label { display:block; font-size:0.8rem; font-weight:500; margin-bottom:6px; }
.input, .select, textarea.input { width:100%; height:52px; padding:0 var(--s4); background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-md); transition:border-color var(--d-micro); }
textarea.input { height:auto; padding:var(--s4); }
.input:focus, .select:focus { border-color:var(--ink); outline:none; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.newsletter { display:flex; gap:var(--s2); max-width:420px; }
.newsletter .input { flex:1; }

/* ---- 17. PDP ----------------------------------------------------------- */
.pdp { display:grid; gap:var(--s12); padding-block:var(--s12); }
@media (min-width:980px){ .pdp{ grid-template-columns:1.15fr 1fr; gap:var(--s24); align-items:start; } }
.gallery__main { aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; background:var(--bg-alt); position:relative; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__main .badge { position:absolute; top:var(--s4); left:var(--s4); }
.gallery__thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); margin-top:var(--s2); }
.gallery__thumbs button { aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-alt); opacity:.65; transition:opacity var(--d-micro); }
.gallery__thumbs button[aria-current="true"], .gallery__thumbs button:hover { opacity:1; outline:1.5px solid var(--ink); outline-offset:-1.5px; }
.gallery__thumbs img { width:100%; height:100%; object-fit:cover; }
.buybox { position:sticky; top:96px; }
.buybox > * + * { margin-top:var(--s4); }
.buybox h1 { font-size:clamp(1.9rem,3.5vw,2.6rem); }
.offer-line { font-size:0.85rem; color:var(--accent); font-weight:600; }
.price-block { display:flex; align-items:baseline; gap:var(--s3); font-size:1.5rem; font-family:var(--f-display); }
.price-block .price-was { font-size:1.1rem; }
.afterpay { font-size:0.8rem; color:var(--muted); }
.variant-row { display:flex; gap:var(--s3); flex-wrap:wrap; }
.variant { padding:10px 16px; border:1px solid var(--hairline); border-radius:var(--r-md); font-size:0.85rem; font-weight:500; transition:border-color var(--d-micro), background var(--d-micro); }
.variant[aria-current="true"] { border-color:var(--ink); background:var(--ink); color:var(--bg); }
.label-sm { font-size:0.8rem; font-weight:600; margin-bottom:var(--s2); }

/* Bundle tiers */
.tiers { display:grid; gap:var(--s3); }
.tier { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4); align-items:center; padding:var(--s4); border:1.5px solid var(--hairline); border-radius:var(--r-md); cursor:pointer; transition:border-color var(--d-micro), background var(--d-micro); }
.tier:hover { border-color:var(--ink-soft); }
.tier:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, var(--bg)); }
.tier:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.tier__radio { width:20px; height:20px; border-radius:var(--r-pill); border:1.5px solid var(--hairline); display:grid; place-items:center; }
.tier:has(input:checked) .tier__radio { border-color:var(--accent); }
.tier:has(input:checked) .tier__radio::after { content:""; width:10px; height:10px; border-radius:var(--r-pill); background:var(--accent); }
.tier__t b { font-size:0.95rem; }
.tier__t span { display:block; font-size:0.78rem; color:var(--muted); }
.tier__p { text-align:right; }
.tier__p b { font-size:1rem; font-variant-numeric:tabular-nums; }
.tier__p span { display:block; font-size:0.72rem; color:var(--muted); }
.tier__flag { position:absolute; top:-10px; right:14px; background:var(--accent); color:#fff; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:3px 8px; border-radius:var(--r-sm); }

/* sub vs onetime */
.purchase-mode { display:grid; gap:var(--s2); }
.pmode { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border:1.5px solid var(--hairline); border-radius:var(--r-md); cursor:pointer; font-size:0.875rem; }
.pmode:has(input:checked) { border-color:var(--ink); }
.pmode:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.pmode .tag { margin-left:auto; font-size:0.72rem; color:var(--success); font-weight:600; }

.atc-row { display:flex; gap:var(--s3); align-items:stretch; }
.atc-row .qty { margin-top:0; height:58px; }
.atc-row .qty button { width:40px; height:100%; }
.atc-row .btn { flex:1; }
.review-snip { font-size:0.85rem; color:var(--ink-soft); border-left:2px solid var(--accent); padding-left:var(--s3); }
.trust-trio { display:grid; gap:var(--s3); padding:var(--s4) 0; border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2); }
.trust-trio div { display:flex; gap:var(--s3); align-items:center; font-size:0.85rem; }
.trust-trio svg { flex:0 0 20px; color:var(--success); }
.ship-est { font-size:0.825rem; color:var(--ink-soft); display:flex; gap:var(--s2); align-items:center; }
.stock-low { font-size:0.8rem; color:var(--danger); font-weight:600; display:flex; align-items:center; gap:6px; }
.stock-low::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---- 18. Comparison ---------------------------------------------------- */
.compare { width:100%; border-collapse:collapse; }
.compare th, .compare td { padding:var(--s4); text-align:center; border-bottom:1px solid var(--hairline); font-size:0.9rem; }
.compare th:first-child, .compare td:first-child { text-align:left; color:var(--ink-soft); }
.compare thead th { font-family:var(--f-display); font-weight:600; }
.compare .us { background:color-mix(in srgb,var(--accent) 6%, var(--bg)); }
.compare .yes { color:var(--success); font-weight:700; }
.compare .no { color:var(--muted); }

/* ---- 19. Reviews ------------------------------------------------------- */
.reviews-summary { display:grid; gap:var(--s8); align-items:center; }
@media (min-width:768px){ .reviews-summary{ grid-template-columns:auto 1fr; gap:var(--s16); } }
.rs-score { text-align:center; }
.rs-score .big { font-family:var(--f-display); font-size:3.4rem; line-height:1; }
.rs-bars { display:grid; gap:6px; }
.rs-bar { display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3); align-items:center; font-size:0.8rem; }
.rs-bar__track { height:7px; background:var(--hairline); border-radius:var(--r-pill); overflow:hidden; }
.rs-bar__fill { height:100%; background:var(--accent); }
.filter-chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s8) 0; }
.chip { font-size:0.78rem; padding:7px 14px; border:1px solid var(--hairline); border-radius:var(--r-pill); }
.chip[aria-current="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.review-grid { display:grid; gap:var(--s6); grid-template-columns:1fr; }
@media (min-width:768px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
.review { padding:var(--s6); border:1px solid var(--hairline); border-radius:var(--r-md); }
.review__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s2); }
.review__name { font-weight:600; font-size:0.9rem; }
.review__name span { font-weight:400; color:var(--success); font-size:0.75rem; margin-left:6px; }
.review p { font-size:0.92rem; color:var(--ink-soft); }
.review__photos { display:flex; gap:6px; margin-top:var(--s3); }
.review__photos img { width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); }
.review__date { font-size:0.72rem; color:var(--muted); margin-top:var(--s3); }
.stars--off { color:var(--hairline); }

/* UGC photo strip (homepage) */
.ugc-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:var(--s4); overflow-x:auto; padding-bottom:var(--s3); scroll-snap-type:x mandatory; scrollbar-width:none; }
.ugc-strip::-webkit-scrollbar { display:none; }
@media (min-width:900px){ .ugc-strip { grid-auto-flow:row; grid-template-columns:repeat(6,1fr); overflow:visible; } }
.ugc-strip__item { position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/5; scroll-snap-align:start; }
.ugc-strip__item img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.ugc-strip__item:hover img { transform:scale(1.06); }
.ugc-strip__item::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,14,10,.6)); pointer-events:none; }
.ugc-strip__tag { position:absolute; left:10px; bottom:9px; z-index:2; color:#fff; font-size:0.72rem; font-weight:600; letter-spacing:.01em; }

/* Buybox social-proof cue (low stock + 24h demand) */
.bb-socialcue { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6); align-items:center; margin-top:var(--s3); }
.bb-bought { font-size:0.8rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
.bb-bought svg { color:var(--success); }

/* Recent-purchase toast (bottom-left, dismissible, auto-hides) */
.sp-toast {
  position:fixed; left:16px; bottom:16px; z-index:90; max-width:330px;
  display:flex; align-items:center; gap:var(--s3);
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:0 12px 34px rgba(22,11,0,.18); padding:var(--s3) var(--s4) var(--s3) var(--s3);
  transform:translateY(140%); opacity:0; transition:transform .45s var(--ease-out), opacity .45s var(--ease-out);
  pointer-events:none;
}
.sp-toast.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.sp-toast img { width:46px; height:46px; border-radius:var(--r-sm); object-fit:cover; flex:0 0 auto; }
.sp-toast__b { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.sp-toast__b b { font-size:0.82rem; }
.sp-toast__b span { font-size:0.8rem; color:var(--ink-soft); }
.sp-toast__b em { font-size:0.68rem; color:var(--muted); font-style:normal; margin-top:2px; }
.sp-toast__x { position:absolute; top:6px; right:8px; font-size:0.95rem; color:var(--muted); line-height:1; }
.sp-toast__x:hover { color:var(--ink); }
@media (max-width:520px){ .sp-toast { left:8px; right:8px; bottom:8px; max-width:none; } }

/* ---- 20. Bundle teaser / editorial ------------------------------------ */
.media-card { position:relative; border-radius:var(--r-md); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; color:#fff; }
.media-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-card__body { position:relative; padding:var(--s12); background:linear-gradient(transparent, rgba(0,0,0,.6)); width:100%; }
.media-card h3 { color:#fff; }

/* ---- 21. Footer -------------------------------------------------------- */
.footer { background:var(--bg-deep); color:#C9C0B3; padding-block:var(--s16) var(--s8); }
.footer a:hover { color:#fff; }
.footer__grid { display:grid; gap:var(--s12); grid-template-columns:1fr; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer h5 { font-family:var(--f-body); font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.14em; color:#8C857A; margin-bottom:var(--s4); }
.footer li { margin-bottom:var(--s2); font-size:0.9rem; }
.footer .brand { color:#fff; }
.footer__bottom { display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center; margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.1); font-size:0.78rem; color:#8C857A; }

/* ---- 22. Checkout ------------------------------------------------------ */
.checkout { display:grid; gap:0; min-height:100dvh; }
@media (min-width:900px){ .checkout{ grid-template-columns:1.1fr 0.9fr; } }
.checkout__main { padding:var(--s12) clamp(var(--s6),6vw,var(--s24)); }
.checkout__aside { background:var(--bg-alt); padding:var(--s12) clamp(var(--s6),5vw,var(--s16)); border-left:1px solid var(--hairline); }
.steps { display:flex; gap:var(--s2); align-items:center; font-size:0.78rem; color:var(--muted); margin-bottom:var(--s8); flex-wrap:wrap; }
.steps b { color:var(--ink); }
.steps .on { color:var(--ink); font-weight:600; }
.step { display:none; }
.step.active { display:block; animation:fade var(--d-reveal) var(--ease-out); }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.express__lead { font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.12em; font-weight:600; color:var(--muted); margin-bottom:var(--s3); }
.express { display:grid; gap:var(--s2); grid-template-columns:1fr 1fr; }
@media (max-width:380px){ .express { grid-template-columns:1fr; } }
.express .btn { height:48px; border-radius:var(--r-md); text-transform:none; letter-spacing:0; font-weight:600; transition:transform var(--d-micro) var(--ease-out), box-shadow var(--d-micro) var(--ease-out), filter var(--d-micro); }
.express .btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(22,11,0,.16); }
.express .btn svg { display:inline-block; }
.btn-applepay { background:#000; color:#fff; }
.btn-paypal { background:#FFC439; color:#003087; }
.btn-gpay { background:#fff; color:#3c4043; border:1px solid var(--hairline); font-weight:600; }
.btn-gpay .gpay-mark b { font-weight:700; }
.btn-shoppay { background:#5a31f4; color:#fff; }
.divider { display:flex; align-items:center; gap:var(--s4); color:var(--muted); font-size:0.78rem; margin:var(--s6) 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--hairline); }
.pay-tabs { display:flex; gap:var(--s2); margin-bottom:var(--s4); }
.pay-tab { flex:1; padding:var(--s4); border:1.5px solid var(--hairline); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; gap:var(--s2); font-size:0.85rem; font-weight:600; }
.pay-tab[aria-current="true"] { border-color:var(--ink); }
.pay-pane { display:none; padding:var(--s6); border:1px solid var(--hairline); border-radius:var(--r-md); }
.pay-pane.active { display:block; }
.card-field { background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-md); padding:var(--s4); font-variant-numeric:tabular-nums; color:var(--ink-soft); display:flex; justify-content:space-between; }
.sum-line { display:flex; justify-content:space-between; padding:var(--s2) 0; font-size:0.9rem; }
.sum-total { display:flex; justify-content:space-between; padding-top:var(--s4); margin-top:var(--s2); border-top:1px solid var(--hairline); font-family:var(--f-display); font-size:1.25rem; }
.sum-items { display:grid; gap:var(--s4); margin-bottom:var(--s6); }
.sum-item { display:grid; grid-template-columns:56px 1fr auto; gap:var(--s3); align-items:center; }
.sum-item img { width:56px; height:70px; object-fit:cover; border-radius:var(--r-sm); }
.sum-item .t { font-size:0.85rem; font-weight:500; }
.sum-item .v { font-size:0.75rem; color:var(--muted); }
.secure-note { font-size:0.78rem; color:var(--muted); display:flex; align-items:center; gap:6px; justify-content:center; margin-top:var(--s4); }
.pay-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s4); }
.pay-badge {
  font-size:0.62rem; font-weight:700; letter-spacing:0.04em; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-sm);
  padding:4px 8px; line-height:1; display:inline-flex; align-items:center;
}

/* Mobile order summary (collapsible) — desktop hides it (the aside shows instead) */
.co-mobile-sum { display:none; }
@media (max-width:899px){
  .co-mobile-sum {
    display:block; margin-bottom:var(--s6);
    background:var(--bg-alt); border:1px solid var(--hairline); border-radius:var(--r-md);
  }
  .co-mobile-sum > summary {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
    padding:var(--s4) var(--s6); cursor:pointer; list-style:none; user-select:none;
    font-size:0.92rem;
  }
  .co-mobile-sum > summary::-webkit-details-marker { display:none; }
  .co-mobile-sum__label { display:inline-flex; align-items:center; gap:var(--s2); color:var(--accent); font-weight:600; }
  .co-mobile-sum__label > svg:first-child { color:var(--accent); }
  .co-mobile-sum__chev { transition:transform var(--d-reveal) var(--ease-io); color:var(--accent); }
  .co-mobile-sum[open] .co-mobile-sum__chev { transform:rotate(180deg); }
  .co-mobile-sum__total { font-family:var(--f-display); font-size:1.15rem; font-weight:700; }
  .co-mobile-sum__body { padding:0 var(--s6) var(--s6); border-top:1px solid var(--hairline); padding-top:var(--s4); }
  .co-mobile-sum[open] > summary { padding-bottom:var(--s3); }
}

/* Embedded Stripe Payment Element + states */
#stripe-payment-element { min-height:48px; margin-bottom:var(--s4); }
.stripe-loading { display:flex; align-items:center; justify-content:center; gap:var(--s3); padding:var(--s8) var(--s4); font-size:0.85rem; color:var(--muted); }
.spinner { width:16px; height:16px; border:2px solid var(--hairline); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cc-fallback { display:grid; gap:0; }
.pay-error { background:color-mix(in srgb, var(--danger) 8%, var(--bg)); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); color:var(--danger); border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:0.82rem; margin-bottom:var(--s4); }
.test-mode-note { font-size:0.76rem; color:var(--ink-soft); background:var(--bg-alt); border:1px dashed var(--hairline); border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-top:var(--s3); text-align:center; }
.btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after { content:""; position:absolute; width:18px; height:18px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.secure-note svg { flex:0 0 auto; }

/* Promo-code row: validity feedback + applied chip */
.promo-row { display:flex; gap:var(--s2); margin-bottom:var(--s4); }
.promo-row .input { flex:1; }
.promo-msg { font-size:0.76rem; margin:-8px 0 var(--s4); min-height:1em; }
.promo-msg.ok { color:var(--success); }
.promo-msg.err { color:var(--danger); }

/* Express-lead row: small reassurance under the wallet buttons */
.express-foot { font-size:0.74rem; color:var(--muted); text-align:center; margin-top:var(--s3); }

/* ---- Payment step: express block + "also accepted" + trust badges ---- */
.express-block { margin-bottom:var(--s2); }
#express-checkout-element { min-height:8px; }

.also-lead {
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.12em;
  font-weight:600; color:var(--muted); text-align:center; margin:var(--s6) 0 var(--s3);
}
.pay-logos { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pay-logo {
  font-size:0.66rem; font-weight:800; letter-spacing:0.01em; line-height:1;
  padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--bg); display:inline-flex; align-items:center;
}
.pay-logo--klarna   { background:#ffb3c7; color:#0a0b09; border-color:transparent; }
.pay-logo--afterpay { background:#b2fce4; color:#0a0b09; border-color:transparent; }
.pay-logo--cashapp  { background:#00d632; color:#fff; border-color:transparent; }
.pay-logo--amazon   { background:#232f3e; color:#ff9900; border-color:transparent; text-transform:lowercase; }
.pay-logo--crypto   { background:#0a0b09; color:#fff; border-color:transparent; }

.trust-badges {
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); justify-content:center;
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--hairline);
}
.trust-badge { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--ink-soft); }
.trust-badge svg { flex:0 0 auto; color:var(--success); }
.trust-badge--stars .stars { color:#f5a623; letter-spacing:1px; }

/* ---- 23. Confirmation -------------------------------------------------- */
.confirm { max-width:640px; margin-inline:auto; text-align:center; padding-block:var(--s24); }
.confirm__check { width:64px; height:64px; border-radius:50%; background:var(--success); color:#fff; display:grid; place-items:center; margin:0 auto var(--s6); }
.confirm__card { text-align:left; border:1px solid var(--hairline); border-radius:var(--r-md); padding:var(--s8); margin-top:var(--s8); }
.upsell { border:1.5px solid var(--accent); border-radius:var(--r-md); padding:var(--s8); margin-top:var(--s12); text-align:left; display:grid; grid-template-columns:auto 1fr; gap:var(--s6); align-items:center; }
.upsell img { width:96px; height:120px; object-fit:cover; border-radius:var(--r-sm); }

/* ---- 23b. Legal / policy pages ---------------------------------------- */
.legal { max-width:820px; padding-block:var(--s16) var(--s24); }
.legal h1 { font-size:clamp(2.2rem,5vw,3.2rem); margin:var(--s2) 0 var(--s2); }
.legal__updated { margin-bottom:var(--s12); }
.legal__lead { font-size:1.05rem; color:var(--ink-soft); margin-bottom:var(--s8); }
.legal h2 { font-family:var(--f-display); font-size:1.35rem; margin:var(--s12) 0 var(--s3); text-transform:none; letter-spacing:0.01em; }
.legal p { margin-bottom:var(--s4); color:var(--ink-soft); }
.legal a { color:var(--ink); }
.legal__list { margin:0 0 var(--s4) var(--s4); display:grid; gap:var(--s2); }
.legal__list li { position:relative; padding-left:var(--s6); color:var(--ink-soft); }
.legal__list li::before { content:""; position:absolute; left:0; top:0.6em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.legal__list--ol { counter-reset:step; }
.legal__list--ol li::before { content:counter(step); counter-increment:step; top:0; width:auto; height:auto; background:none; color:var(--accent); font-weight:700; }
.legal__highlight { display:flex; gap:var(--s4); align-items:flex-start; background:var(--bg-alt); border:1px solid var(--hairline); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:var(--s6); margin:var(--s8) 0; }
.legal__highlight svg { flex:0 0 auto; color:var(--success); margin-top:2px; }
.legal__highlight p { margin:0; color:var(--ink); }
.legal__table-wrap { overflow-x:auto; margin:var(--s4) 0 var(--s6); }
.legal__table { width:100%; border-collapse:collapse; font-size:0.9rem; min-width:480px; }
.legal__table th, .legal__table td { padding:var(--s3) var(--s4); text-align:left; border-bottom:1px solid var(--hairline); }
.legal__table thead th { font-family:var(--f-display); font-weight:600; text-transform:none; }
.legal__table tbody td:first-child { color:var(--ink); font-weight:500; }
.legal__back { margin-top:var(--s12); }

/* ---- 23c. Cookie consent banner --------------------------------------- */
.cookie-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--bg-deep); color:#EDE4D6;
  box-shadow:0 -8px 30px rgba(0,0,0,.28);
  transform:translateY(110%); transition:transform .4s var(--ease-out);
}
.cookie-bar.show { transform:translateY(0); }
.cookie-bar__in { max-width:var(--maxw); margin-inline:auto; padding:var(--s4) var(--gutter); display:flex; gap:var(--s6); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookie-bar__text { font-size:0.85rem; margin:0; max-width:62ch; color:#C9C0B3; }
.cookie-bar__text a { color:#fff; }
.cookie-bar__actions { display:flex; gap:var(--s3); align-items:center; flex-shrink:0; }
.cookie-bar__actions .btn--ghost { color:#EDE4D6; }
.cookie-bar__actions .btn--ghost:hover { color:var(--accent-soft); }
.cookie-bar__actions .btn--primary { background:var(--accent); color:#fff; height:44px; }
.cookie-bar__actions .btn--primary:hover { background:#d93d00; }
@media (max-width:560px){ .cookie-bar__in { flex-direction:column; align-items:stretch; gap:var(--s3); } .cookie-bar__actions .btn { flex:1; } }

/* ---- 24. Reveal / utilities ------------------------------------------- */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity var(--d-section) var(--ease-out), transform var(--d-section) var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; }
.hide-mobile { display:none; }
@media (min-width:768px){ .hide-mobile{ display:initial; } .hide-desktop{ display:none; } }
.flow > * + * { margin-top:var(--s6); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================================
   YARDLY SOLAR RIOT LAYER — bold outdoor energy
   ========================================================================= */

/* Buttons: bold lift + warm shadow */
.btn { border-radius:var(--r-md); }
.btn--primary { box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 38%, transparent); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%, transparent); background:#c8520f; }
.btn--lg { letter-spacing:.08em; font-size:0.9rem; font-weight:700; }
.btn--accent { background:var(--accent); box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 38%, transparent); }
.btn--accent:hover { transform:translateY(-2px); background:#d93d00; }
.btn--ghost:hover { color:var(--accent); }

/* Product cards: shadow + lift */
.grid-products { gap:var(--s8) var(--s6); align-items:stretch; }
.card { transition:transform .3s var(--ease-out); }
.card__media { border-radius:16px; box-shadow:0 6px 18px rgba(22,11,0,.07); transition:box-shadow .3s var(--ease-out); }
.card:hover { transform:translateY(-7px); }
.card:hover .card__media { box-shadow:0 20px 40px rgba(22,11,0,.17); }
.card__title { font-size:1rem; font-weight:600; text-transform:none; }
.card__body { display:flex; flex-direction:column; flex:1; }
.card__price { margin-top:auto; padding-top:var(--s2); }

/* Gallery + media */
.gallery__main { border-radius:20px; box-shadow:0 10px 30px rgba(22,11,0,.08); }
.gallery__thumbs button { border-radius:10px; }
.media-card { border-radius:20px; }

/* Badges */
.badge--sale { background:linear-gradient(135deg, var(--accent), var(--accent-soft)); color:#fff; }
.badge--new  { background:linear-gradient(135deg, #160b00, #3d1f00); color:#fff; }
.tier__flag  { background:linear-gradient(135deg, var(--accent), var(--accent-soft)); border-radius:8px; box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 30%, transparent); }

/* Quantity tiers */
.tier { border-radius:14px; }
.tier:has(input:checked) { box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%, transparent); }
.pmode { border-radius:12px; }

/* Hero: warm cinematic overlay */
.hero__media::after { background:linear-gradient(90deg, rgba(22,8,0,.68), rgba(22,8,0,.20) 55%, transparent), linear-gradient(0deg, rgba(22,8,0,.48), transparent 44%); }
.hero h1 { font-size:clamp(3.2rem,8vw,6.8rem); letter-spacing:0.01em; font-weight:800; }

/* Stats: orange fire on numbers */
.stat .num { background:linear-gradient(135deg, var(--ink), var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Announcement bar */
.announce { background:var(--bg-deep); }

/* Inputs + chips */
.input, .select, textarea.input { border-radius:var(--r-md); }
.chip { border-radius:var(--r-pill); transition:background var(--d-micro), color var(--d-micro), border-color var(--d-micro); }
.chip:hover { border-color:var(--ink); }

/* Brand logo: mixed-case not uppercase */
.brand { text-transform:none; letter-spacing:-0.01em; }

/* Nav items: not uppercase */
.nav__item { text-transform:none; letter-spacing:0; }

/* Eyebrow text: keep all-caps + no display font */
.eyebrow { font-family:var(--f-body); }

/* ============================================================================
   TRUST BAND
   ========================================================================= */
.trustband { padding-block:var(--s12); }
.trustband__inner {
  background:var(--bg);
  border:1px solid var(--hairline-2);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(22,11,0,.05);
  padding:var(--s8) clamp(var(--s6),4vw,var(--s12));
}
.trustband .pressbar {
  gap:clamp(var(--s4),3vw,var(--s12));
  opacity:1;
  padding-bottom:var(--s6);
  border-bottom:1px solid var(--hairline-2);
  margin-bottom:var(--s6);
}
.pressbar__lead {
  font-family:var(--f-accent); font-style:italic; font-size:1rem;
  color:var(--muted); letter-spacing:0; filter:none; white-space:nowrap;
}
.pressbar__logo {
  font-family:var(--f-display); font-weight:700; font-size:1.1rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); filter:none; opacity:.75;
  display:inline-flex; align-items:center; gap:8px;
  transition:opacity var(--d-micro);
}
.pressbar__logo:hover { opacity:1; }
.pressbar__logo svg { width:18px; height:18px; color:var(--accent); }
.pressbar__sep { width:1px; height:18px; background:var(--hairline); display:inline-block; }
.pressbar__rev { color:var(--accent); text-transform:none; font-family:var(--f-body); font-weight:600; }
.pressbar__rev .stars { color:#F2A420; font-size:.85rem; }
.trustband .usps { gap:0; }
.trustband .usp {
  justify-content:center; align-items:center; text-align:left;
  padding:var(--s2) clamp(var(--s4),2.4vw,var(--s8));
  position:relative;
}
.trustband .usp b { text-transform:none; font-size:0.95rem; }
.trustband .usp + .usp::before {
  content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--hairline-2);
}
@media (max-width:767px){
  .trustband .usp { justify-content:flex-start; gap:var(--s3); }
  .trustband .usp:nth-child(2)::before,
  .trustband .usp:nth-child(4)::before { display:none; }
  .trustband .usp:nth-child(3)::after,
  .trustband .usp:nth-child(4)::after {
    content:""; position:absolute; left:6%; top:0; width:88%; height:1px; background:var(--hairline-2);
  }
  .trustband .usp:nth-child(3), .trustband .usp:nth-child(4){ padding-top:var(--s6); }
  .trustband .usp:nth-child(1), .trustband .usp:nth-child(2){ padding-bottom:var(--s6); }
}
@media (max-width:520px){
  .pressbar__lead, .pressbar__sep { display:none; }
  .trustband .pressbar { justify-content:center; }
}

/* ============================================================================
   PROOF BAND — rating + stats + testimonials (replaces old social-logo bar)
   ========================================================================= */
.proofband { display:grid; gap:var(--s8); margin-bottom:var(--s10); }
.proofband__rating { display:flex; align-items:center; justify-content:center; gap:var(--s4); }
.proofband__score { font-family:var(--f-display); font-weight:800; font-size:3.2rem; line-height:1; color:var(--ink); }
.proofband__rcol { display:flex; flex-direction:column; gap:3px; }
.proofband__rcol .stars { color:#f5a623; letter-spacing:3px; font-size:1.15rem; }
.proofband__rsub { font-size:0.95rem; color:var(--ink-soft); }
.proofband__rsub b { color:var(--ink); }
.proofband__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); max-width:600px; width:100%; margin-inline:auto; }
.proofband__stat { text-align:center; padding:var(--s5) var(--s3); background:#fff; border:1px solid var(--hairline); border-radius:16px; }
.proofband__stat b { display:block; font-family:var(--f-display); font-weight:800; font-size:1.6rem; line-height:1; color:var(--accent); margin-bottom:4px; }
.proofband__stat span { font-size:0.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.proofband__quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.pq { margin:0; padding:var(--s5); background:#fff; border:1px solid var(--hairline); border-radius:16px; display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.pq .stars { color:#f5a623; letter-spacing:2px; font-size:0.9rem; }
.pq p { margin:0; font-size:1rem; line-height:1.42; color:var(--ink); font-style:italic; }
.pq figcaption { font-size:0.82rem; color:var(--muted); font-weight:600; }
@media (max-width:760px){
  .proofband__quotes { grid-template-columns:1fr; }
  .proofband__rating { flex-direction:column; text-align:center; gap:8px; }
  .proofband__rcol { align-items:center; }
}

/* ============================================================================
   SEARCH OVERLAY
   ========================================================================= */
.search-ov { position:fixed; inset:0; z-index:120; display:none; }
.search-ov.open { display:block; }
.search-ov__scrim { position:absolute; inset:0; background:rgba(22,8,0,.52); backdrop-filter:blur(3px); }
.search-ov__panel {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(680px,100%); background:var(--bg);
  border-radius:0 0 24px 24px; box-shadow:var(--shadow-overlay);
  padding:var(--s8) clamp(var(--s4),4vw,var(--s8)) var(--s6);
  animation:searchDrop var(--d-reveal) var(--ease-out);
}
@keyframes searchDrop { from{opacity:0;transform:translate(-50%,-12px)} to{opacity:1;transform:translate(-50%,0)} }
.search-ov__bar { display:flex; align-items:center; gap:var(--s3); border-bottom:2px solid var(--ink); padding-bottom:var(--s3); }
.search-ov__bar svg { flex:0 0 22px; color:var(--ink); }
.search-ov__input { flex:1; border:none; outline:none; background:none; height:40px; font-family:var(--f-display); font-size:1.35rem; color:var(--ink); text-transform:uppercase; letter-spacing:0.02em; }
.search-ov__input::placeholder { color:var(--muted); }
.search-ov__close { flex:0 0 auto; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 8px; }
.search-ov__close:hover { color:var(--ink); }
.search-ov__hint { font-size:.78rem; color:var(--muted); margin-top:var(--s3); }
.search-ov__results { margin-top:var(--s4); max-height:min(56vh,420px); overflow-y:auto; display:grid; gap:var(--s2); }
.search-res { display:flex; align-items:center; gap:var(--s4); padding:var(--s2); border-radius:14px; transition:background var(--d-micro); }
.search-res:hover { background:var(--bg-alt); }
.search-res img { width:52px; height:52px; object-fit:cover; border-radius:10px; background:var(--bg-alt); }
.search-res__t { flex:1; min-width:0; }
.search-res__t b { display:block; font-size:.95rem; font-weight:600; text-transform:none; }
.search-res__t span { font-size:.8rem; color:var(--muted); }
.search-res__p { font-variant-numeric:tabular-nums; font-weight:600; font-size:.9rem; }
.search-ov__empty { padding:var(--s8) 0; text-align:center; color:var(--muted); font-size:.9rem; }

/* ============================================================================
   SECTION RHYTHM
   ========================================================================= */
.section { padding-block:clamp(var(--s16), 9vw, var(--s24)); }
.section--tight { padding-block:clamp(var(--s12), 6vw, var(--s16)); }
.benefits-stack { gap:clamp(var(--s12), 7vw, 88px); }
.section-head.center .eyebrow { display:inline-block; }
.section-head.center .eyebrow::before,
.section-head.center .eyebrow::after {
  content:""; display:inline-block; width:22px; height:1px; vertical-align:middle;
  background:var(--accent); opacity:.55; margin:0 10px;
}
.split .gallery__main img { transition:transform var(--d-section) var(--ease-out); }
.split:hover .gallery__main img { transform:scale(1.02); }
.stats .stat { padding:var(--s4) 0; }

/* Comparison table — don't uppercase heading cells */
.compare th, .compare td { text-transform:none; }

/* ============================================================================
   PREMIUM POLISH LAYER — cohesive DTC depth, micro-interactions, rhythm
   (on-brand Solar Riot; all motion respects prefers-reduced-motion below)
   ========================================================================= */

/* Scroll reveal: add a touch of scale + blur-in for a premium settle */
[data-reveal] { transform:translateY(22px) scale(.992); filter:saturate(.96); }
[data-reveal].in { transform:none; filter:none; }

/* Product cards — richer media, image zoom, gradient lift, quick-add slide-up */
.card { position:relative; }
.card__media { position:relative; overflow:hidden; }
.card__media .main, .card__media .alt { transition:transform .6s var(--ease-out), opacity .4s var(--ease-out); }
.card:hover .card__media .main { transform:scale(1.06); }
.card__quick { transition:transform .35s var(--ease-out), opacity .35s var(--ease-out); }
@media (min-width:768px){
  .card__quick { transform:translateY(8px); opacity:0; }
  .card:hover .card__quick, .card:focus-within .card__quick { transform:translateY(0); opacity:1; }
}
.card__badge { box-shadow:0 4px 12px rgba(22,11,0,.18); }
.card__title { transition:color var(--d-micro); }
.card:hover .card__title { color:var(--accent); }

/* Buttons — subtle sheen sweep on primary/accent for a polished, tactile feel */
.btn--primary, .btn--accent { position:relative; overflow:hidden; }
.btn--primary::after, .btn--accent::after {
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease-out); pointer-events:none;
}
.btn--primary:hover::after, .btn--accent:hover::after { left:130%; }

/* Hero — fade/rise the inner content on load for cinematic entrance */
@keyframes heroRise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.hero__inner > * { animation:heroRise .8s var(--ease-out) backwards; }
.hero__inner > *:nth-child(1){ animation-delay:.05s; }
.hero__inner > *:nth-child(2){ animation-delay:.14s; }
.hero__inner > *:nth-child(3){ animation-delay:.23s; }
.hero__inner > *:nth-child(4){ animation-delay:.32s; }
.hero__inner > *:nth-child(5){ animation-delay:.40s; }
.hero__trust { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.92); }
.hero__trust .stars { color:#FFC93D; }

/* Gallery thumbnails — clear active ring + hover */
.gallery__thumbs button { overflow:hidden; opacity:.7; transition:opacity var(--d-micro), box-shadow var(--d-micro), transform var(--d-micro); }
.gallery__thumbs button:hover { opacity:1; transform:translateY(-2px); }
.gallery__thumbs button[aria-current="true"] { opacity:1; box-shadow:0 0 0 2px var(--accent); }

/* Buybox tiers — smoother selected lift already exists; add hover affordance */
.tier { transition:box-shadow .25s var(--ease-out), border-color var(--d-micro), transform var(--d-micro); }
.tier:hover { transform:translateY(-1px); }

/* Sticky ATC bar — frosted, refined entrance */
.sticky-atc { box-shadow:0 -6px 24px rgba(22,11,0,.14); backdrop-filter:blur(10px); }

/* Reviews — gentle card lift */
.review { transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.review:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,11,0,.08); }

/* Trust band logos — settle on hover */
.pressbar__logo { transition:color var(--d-micro), transform var(--d-micro); }
.pressbar__logo:hover { color:var(--accent); transform:translateY(-1px); }

/* Footer link Legal column inherits .footer li styles automatically */

/* ---- Shipping Protection (cart drawer row) -------------------------------- */
.ship-protect { border-top:1px solid var(--hairline); padding:14px 20px; background:var(--bg-alt); }
.sp-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.sp-row input { display:none; }
.sp-cb { width:18px; height:18px; border:2px solid var(--hairline); border-radius:4px; flex-shrink:0; display:grid; place-items:center; transition:background .15s, border-color .15s; }
.sp-row:has(input:checked) .sp-cb { background:var(--accent); border-color:var(--accent); }
.sp-row:has(input:checked) .sp-cb::after { content:"✓"; color:#fff; font-size:11px; font-weight:700; line-height:1; }
.sp-copy { flex:1; }
.sp-copy strong { display:block; font-size:.85rem; font-weight:600; color:var(--text-primary,var(--ink)); }
.sp-copy span { font-size:.78rem; color:var(--text-muted,var(--muted)); }

/* ---- Shipping Protection (checkout order bump) ---------------------------- */
.ob-protect { margin:16px 0; }
.ob-protect__card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:2px solid var(--accent); border-radius:var(--r-md); cursor:pointer; background:color-mix(in srgb, var(--accent) 8%, transparent); }
.ob-protect__card input { display:none; }
.ob-protect__icon { font-size:1.4rem; flex-shrink:0; }
.ob-protect__text { flex:1; }
.ob-protect__text strong { display:block; font-weight:600; font-size:.9rem; }
.ob-protect__text span { font-size:.8rem; color:var(--text-muted,var(--muted)); }
.ob-protect__price { font-weight:700; color:var(--accent); white-space:nowrap; }

/* Honor reduced-motion for everything added above */
@media (prefers-reduced-motion:reduce){
  .hero__inner > *, .btn--primary::after, .btn--accent::after,
  .card__media .main, .card__quick, .split:hover .gallery__main img { animation:none !important; transition:none !important; }
  .card__quick { transform:none !important; opacity:1 !important; }
}