/* VEXO SOLE: shared site styles. Dark, red-accent streetwear look. */
:root{
  --header-bg:rgba(11,11,13,.86); --glow:rgba(160,8,0,.38); --grad-from:#8a8a93; --shoe-shadow:rgba(0,0,0,.75);
  --bg:#0b0b0d; --panel:#141418; --panel-2:#1c1c22; --line:#2a2a31;
  --fg:#ffffff; --muted:#9a9aa5; --soft:#c9c9d0; --red:#e10600; --red-2:#ff2a1f;
  --good:#2fc77a; --ok:#f2b233; --fair:#9a9aa5; --wa:#25d366;
  --f-display:"Unbounded","Arial Black",sans-serif;
  --f-wide:"Syncopate","Arial",sans-serif;
  --f-heavy:"Archivo Black","Arial Black",sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:dark;
}
/* Light theme: chosen with the sun/moon button, remembered on this device */
:root[data-theme="light"]{
  --bg:#f3f3f5; --panel:#ffffff; --panel-2:#e9e9ee; --line:#d9d9e0;
  --fg:#0d0d10; --muted:#676772; --soft:#3a3a44; --red:#d40500; --red-2:#ff2a1f;
  --good:#12814a; --ok:#a86f00; --fair:#6b6b76;
  --header-bg:rgba(243,243,245,.88); --glow:rgba(225,6,0,.16); --grad-from:#a8a8b2; --shoe-shadow:rgba(20,20,30,.28);
  color-scheme:light;
}
:root[data-theme="light"] .card,:root[data-theme="light"] .summary,:root[data-theme="light"] .form{box-shadow:0 1px 2px rgba(20,20,30,.04)}
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--f-heavy);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.wide{font-family:var(--f-wide);font-weight:700;text-transform:uppercase;letter-spacing:.3em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* Announcement + header */
.announce{background:var(--red);color:#fff;text-align:center;font-family:var(--f-heavy);font-size:11px;letter-spacing:.12em;padding:8px var(--gutter)}
.announce{overflow:hidden;white-space:nowrap}
.announce-track span{display:inline-block}
.announce-track span+span{display:none}
.announce.ticker{padding-inline:0;text-align:left}
.announce.ticker .announce-track{display:inline-flex;animation:tick var(--tick,30s) linear infinite}
.announce.ticker .announce-track span{display:inline-block;margin-right:2.5em}
.announce.ticker .announce-track span::after{content:"✦";margin-left:2.5em;opacity:.8}
.announce.ticker:hover .announce-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.announce.ticker .announce-track{animation:none}.announce.ticker{text-overflow:ellipsis}}
header.site{position:sticky;top:0;z-index:30;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.site.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;color:var(--fg);flex:none}
.logo svg{height:38px;width:auto}
.menu{display:flex;gap:34px;margin-inline:auto}
.menu a{font-family:var(--f-wide);font-weight:700;font-size:10.5px;letter-spacing:.26em;padding-block:6px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap}
.menu a:hover{color:var(--red)}
.menu a[aria-current="page"]{border-color:var(--red)}
.actions{display:flex;align-items:center;gap:16px}
.icon-btn{background:none;border:0;display:grid;place-items:center;position:relative;width:36px;height:36px}
.icon-btn svg{width:22px;height:22px}
.count{color:#fff;position:absolute;top:-1px;right:-4px;background:var(--red);border-radius:999px;min-width:18px;height:18px;font-size:11px;font-weight:700;display:grid;place-items:center;padding-inline:4px}
.count[data-n="0"]{display:none}
.burger{display:none}
.search-bar{border-top:1px solid var(--line);padding-block:14px}
.search-bar form{display:flex;gap:10px}
.search-bar input{flex:1;min-width:0;background:var(--panel);border:1.5px solid var(--line);padding:12px 16px}
@media (max-width:960px){
  .menu{position:fixed;inset:76px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--gutter) 18px;transform:translateY(-140%);transition:transform .3s;margin:0}
  .menu.open{transform:none}
  .menu a{padding-block:14px;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{color:var(--red);border-color:var(--line)}
  .burger{display:grid}
  .actions{margin-left:auto}
}

/* Buttons */
.btn{font-family:var(--f-heavy);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:15px 28px;border:1.5px solid var(--fg);background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,color .2s,border-color .2s,transform .15s;text-align:center}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#0b0b0d}
.btn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.btn.wa:hover:not(:disabled){filter:brightness(1.08);background:var(--wa);border-color:var(--wa);color:#0b0b0d}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.btn.block{width:100%}
.link{color:var(--red);font-weight:600;border-bottom:1px solid currentColor}

/* Sections */
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
.h2{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.h2 em{font-style:normal;color:var(--red)}
.kicker{color:var(--red);margin-bottom:12px;font-size:11px}
.lead{color:var(--soft);max-width:58ch;margin-top:14px}
.page-head{padding-block:clamp(40px,6vw,72px) clamp(24px,3vw,36px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head::after{content:attr(data-ghost);position:absolute;right:-10px;bottom:-.25em;font-family:var(--f-display);font-weight:900;font-size:clamp(90px,16vw,220px);color:color-mix(in srgb,var(--fg) 4%,transparent);line-height:1;pointer-events:none;white-space:nowrap}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--fg)}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:36px 70px}
.hero::before{content:"";position:absolute;left:50%;top:44%;width:min(760px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--glow),transparent 62%);pointer-events:none}
/* The big faint VEXO sits behind the top part (same height for every pair), not the whole hero,
   whose height changes with the price and name of each pair */
.hero>.ghost{display:none}
.ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font-family:var(--f-display);font-weight:900;font-size:clamp(120px,24vw,330px);color:color-mix(in srgb,var(--fg) 5%,transparent);white-space:nowrap;pointer-events:none;user-select:none}
.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:430px}
.word{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,5vw,80px);line-height:.9;letter-spacing:-.04em;position:relative;z-index:1}
.word.left{color:var(--red);text-align:right;margin-right:12px}
.word.right{background:linear-gradient(90deg,var(--grad-from) 0%,var(--fg) 40%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:12px;padding-top:40px}
.hero h1.sub{font-weight:700;line-height:1.7;text-wrap:balance}
@media (min-width:981px){.hero h1.sub{max-width:30ch;margin-left:auto}}
.hero .sub{font-size:clamp(10px,1.1vw,13px);margin-top:22px;text-align:right;margin-right:12px;position:relative;z-index:1;letter-spacing:.35em}
.edition{color:var(--red);font-size:clamp(12px,1.4vw,17px);text-align:right;margin-bottom:8px}
.hero-shoe{position:relative;z-index:2;width:clamp(260px,30vw,440px);aspect-ratio:520/300;display:grid;place-items:center}
.hero-shoe .shoe-img{width:100%;transform:rotate(-22deg);filter:drop-shadow(-10px 40px 30px var(--shoe-shadow));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-shoe{min-height:0}
/* Photos sit in the same wide box as the drawn shoes on every screen, so the words, red arrows and VEXO
   never shift when the slider changes pair. The photo is the server's copy trimmed to the shoe (/img/t/) and fitted whole,
   so every pair sits centred at the same height. */
.hero-shoe img.shoe-img{width:100%;height:100%;max-width:none;object-fit:contain;transform:rotate(-8deg);border-radius:0}
.hero-shoe:hover .shoe-img{transform:rotate(-26deg) translateY(-8px)}
.hero-shoe:hover img.shoe-img{transform:rotate(-10deg) translateY(-8px)}
.darts{position:absolute;right:-6%;top:-6%;width:56px}
.dots{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:3}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:color-mix(in srgb,var(--fg) 28%,transparent);transition:background .2s,transform .2s}
.dots button.on{background:var(--fg);transform:scale(1.15)}
.hero-bottom{position:relative;display:grid;grid-template-columns:auto auto 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-top:20px}
.swatches{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.swatch{width:88px;height:64px;border-radius:12px;border:1.5px solid transparent;background:transparent;display:grid;place-items:center;transition:background .2s,border-color .2s;overflow:hidden}
.swatch .shoe-img{width:76px;transform:rotate(-18deg)}
.swatch img.shoe-img{width:100%;height:100%;object-fit:contain;padding:4px;transform:none} /* whole photo, also for wide shots */
.swatch:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.swatch[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.buy-info{justify-self:end;max-width:360px}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.price{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--red);white-space:nowrap}
.pname{font-family:var(--f-heavy);font-size:15px;line-height:1.25}
.pname span{display:block;font-family:var(--f-wide);font-weight:700;font-size:10px;letter-spacing:.2em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;margin:0 6px 10px 0}
.pill.red{background:var(--red);color:#fff}
.pill.c-good{background:rgba(47,199,122,.15);color:var(--good)}
.pill.c-ok{background:rgba(242,178,51,.15);color:var(--ok)}
.pill.c-fair{background:rgba(154,154,165,.15);color:var(--soft)}
.retail{color:var(--muted);font-size:13px}
.retail s{color:var(--soft)}
#heroRetail{position:relative;max-width:440px}
#heroRetail .clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#heroRetail .more{position:absolute;right:0;bottom:0;padding-left:3em;background:linear-gradient(to right,transparent,var(--bg) 2.4em);color:var(--red);font-size:12px;font-weight:700;line-height:inherit;text-decoration:underline;text-underline-offset:2px}
#heroRetail .more:hover{color:var(--red-2)}
@media (max-width:980px){
  .stage{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:0}
  .word.left,.word.right{margin:0;text-align:center;padding:0}
  .hero .sub,.edition{text-align:center;margin-right:0}
  .hero-shoe{margin-block:10px;width:min(440px,86vw)}
  /* Stacked layout: a taller box that holds the whole photo, so it never hangs over the words below */
  .hero-shoe{aspect-ratio:1/.82}
  .hero-shoe img.shoe-img{width:100%;height:100%;object-fit:contain}
  .ghost-m{top:60%}
  .dots{display:none}
  .hero-bottom{grid-template-columns:1fr;justify-items:center;text-align:center}
  .buy-info{justify-self:center}
  .price-row,.swatches,.btns{justify-content:center}
}

.strip{background:var(--red);color:#fff;overflow:hidden;padding-block:14px;white-space:nowrap}
.strip-track{display:inline-flex;gap:48px;animation:slide 32s linear infinite}
.strip span{font-family:var(--f-heavy);font-size:15px;letter-spacing:.1em}
@keyframes slide{to{transform:translateX(-50%)}}

/* Product grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s,transform .25s;position:relative;min-width:0}
.card:hover{border-color:var(--red);transform:translateY(-4px)}
.card .pic{position:relative;aspect-ratio:4/3;background:radial-gradient(circle at 50% 60%,var(--panel-2),var(--panel) 70%);display:grid;place-items:center;overflow:hidden}
.card .pic .shoe-img{width:84%;transform:rotate(-14deg);transition:transform .4s}
/* Photos: no frame; edges fade into the card so only the shoe shows. Transparent PNG/WebP cut-outs get a shoe-shaped shadow. */
.card .pic img.shoe-img{width:84%;height:84%;object-fit:contain;transform:rotate(-14deg);filter:drop-shadow(-6px 18px 16px var(--shoe-shadow));transition:transform .4s}
.card:hover .pic svg.shoe-img{transform:rotate(-20deg) scale(1.06)}
.card:hover .pic img.shoe-img{transform:rotate(-20deg) scale(1.06)}
.save{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;z-index:1}
.fav{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);border:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;z-index:2}
.fav svg{width:18px}
.fav[aria-pressed="true"] path{fill:var(--red);stroke:var(--red)}
.card.sold .pic .shoe-img,.card.reserved .pic .shoe-img{filter:grayscale(1);opacity:.35}
.stamp{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) rotate(-8deg);text-align:center;font-family:var(--f-display);font-weight:900;font-size:30px;letter-spacing:.12em;color:var(--fg);text-shadow:0 2px 16px var(--bg);z-index:1}
.card .body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.brand-l{font-family:var(--f-wide);font-weight:700;font-size:10px;letter-spacing:.22em;color:var(--muted)}
.card h3{font-family:var(--f-heavy);font-size:16px;font-weight:400;letter-spacing:.01em;margin-top:2px}
.card h3 a::after{content:"";position:absolute;inset:0}
.meta{display:flex;flex-wrap:wrap;gap:7px}
.meta span{font-size:12px;font-weight:600;border:1px solid var(--line);padding:4px 9px}
.meta .c-good{border-color:rgba(47,199,122,.5);color:var(--good)}
.meta .c-ok{border-color:rgba(242,178,51,.5);color:var(--ok)}
.meta .c-fair{color:var(--soft)}
.prices{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.prices b{font-family:var(--f-display);font-weight:700;color:var(--red);font-size:19px}
.prices s{color:var(--muted);font-size:13px}
.card .add{position:relative;z-index:2;margin-top:auto;background:transparent;border:1.5px solid var(--fg);padding:12px;font-family:var(--f-heavy);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.card .add:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.card .add:disabled{opacity:.5;cursor:not-allowed}
.card .add.in{background:var(--fg);color:var(--bg)}
.empty{color:var(--muted);padding:40px 0;grid-column:1/-1}
.skeleton{background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 50%,var(--panel) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite;min-height:380px;border:1px solid var(--line)}
@keyframes shimmer{to{background-position:-200% 0}}

/* Shop filters */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start}
.filters{position:sticky;top:96px;display:grid;gap:22px}
.filters h4{font-family:var(--f-wide);font-size:10px;letter-spacing:.22em;margin-bottom:10px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1.5px solid var(--line);padding:7px 13px;font-size:13px;font-weight:600;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip small{color:var(--muted);font-weight:500;margin-left:4px}
.chip[aria-pressed="true"] small{color:inherit;opacity:.65}
select,.input{background:var(--panel);border:1.5px solid var(--line);padding:10px 12px;font-size:14px;width:100%;min-width:0}
select:focus,.input:focus{border-color:var(--red);outline:none}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);cursor:pointer}
.check input{accent-color:var(--red);width:16px;height:16px}
.range-val{font-family:var(--f-display);font-size:14px;color:var(--red);float:right}
input[type=range]{width:100%;accent-color:var(--red)}
.shop-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.shop-top .sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.shop-top select{width:auto}
.filter-toggle{display:none}
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static;display:none;background:var(--panel);border:1px solid var(--line);padding:18px}
  .filters.open{display:grid}
  .filter-toggle{display:inline-flex}
}

/* Product page */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;padding-block:36px 70px}
/* Grid children may shrink below their content width (stops the page sliding sideways on phones) */
.pdp>*{min-width:0}
/* Desktop: details on the right span both rows; the video sits under the photos.
   Phones (one column): photos, then details and buy buttons, then the video. */
.pdp>div:nth-child(2){grid-column:2;grid-row:1 / span 2}
.pdp>.pdp-video{grid-column:1;grid-row:2;margin-top:0}
.pdp>.pdp-reviews{grid-column:1;grid-row:2}
.pdp:has(>.pdp-reviews),.pdp:has(>.pdp-video){grid-template-rows:auto 1fr} /* photo row stays photo-height; the tall details column stretches row 2 */
.gallery-main{background:radial-gradient(circle at 50% 60%,var(--panel-2),var(--panel) 70%);border:1px solid var(--line);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative}
.gallery-main .shoe-img{width:86%;transform:rotate(-16deg);filter:drop-shadow(0 30px 24px rgba(0,0,0,.6))}
.gallery-main>.shoe-img{grid-area:1/1}
.gallery-main img.shoe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;filter:none} /* pinned to the square box, so tall photos fit too */
.gallery-main.zoomable{cursor:crosshair}
.zoom-lens{position:absolute;left:0;top:0;width:190px;height:190px;border-radius:50%;pointer-events:none;z-index:3;background-color:var(--panel);background-repeat:no-repeat;border:2px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.35),inset 0 0 18px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.zoom-lens.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gallery.has-nav{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:10px;align-items:center}
.gallery.has-nav~.thumbs{padding-inline:40px}
.gal-nav{width:30px;height:44px;border:0;background:none;color:var(--fg);display:grid;place-items:center;padding:0;cursor:pointer;opacity:.75;transition:color .2s,opacity .2s,transform .2s}
.gal-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.gal-nav:hover,.gal-nav:focus-visible{color:var(--red);opacity:1}
.gal-nav[data-step="-1"]:hover{transform:translateX(-2px)}.gal-nav[data-step="1"]:hover{transform:translateX(2px)}
.pdp-video{margin-top:26px}
.pdp-video .label{margin-bottom:10px;color:var(--muted)}
/* Reel-style product video: vertical 9:16 frame */
.reel{position:relative;width:min(340px,100%);aspect-ratio:9/16;background:#000;border:1px solid var(--line);overflow:hidden;margin-inline:auto}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.reel.wide video{object-fit:contain}
.reel::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.reel-tag{position:absolute;left:14px;right:60px;bottom:18px;z-index:1;color:#fff;font-family:var(--f-heavy);font-size:13px;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.reel-snd{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.reel-snd svg{width:19px;height:19px}
.reel-snd:hover{background:var(--red)}
.reel-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .2s;pointer-events:none}
.reel-play svg{width:30px;height:30px;margin-left:4px}
.reel.paused .reel-play{opacity:1}
.reel-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2);z-index:2}
.reel-bar i{display:block;height:100%;width:0;background:var(--red)}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:76px;height:76px;border:1.5px solid var(--line);background:var(--panel);padding:0;overflow:hidden}
.thumbs button[aria-pressed="true"]{border-color:var(--red)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;line-height:1.05;margin-block:6px 14px}
.pdp .price-big{font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--red)}
.cond-meter{margin-block:22px;background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.cond-meter .top{display:flex;justify-content:space-between;font-weight:700;margin-bottom:10px}
.bar{height:8px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-block:20px}
.specs div{background:var(--bg);padding:12px 14px}
.specs dt{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.specs dd{font-weight:600;margin-top:2px}
.pdp .actions-col{display:grid;gap:10px;margin-top:20px}
/* Product page info panels (size & fit, ways to pay, help) */
.info-card{background:var(--panel);border:1px solid var(--line);padding:16px 18px;margin-top:16px}
.info-card h3{font-family:var(--f-heavy);font-weight:400;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.info-card p{font-size:13.5px;color:var(--muted);margin-top:10px}
.size-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.size-row div{background:var(--bg);padding:10px 8px;text-align:center}
.size-row small{display:block;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.size-row b{font-family:var(--f-display);font-size:18px}
.pay-chips{display:flex;flex-wrap:wrap;gap:8px}
.pay-chips span{border:1.5px solid var(--line);padding:6px 12px;font-size:13px;font-weight:600;color:var(--soft)}
.help-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border-left:3px solid var(--wa)}
.help-card p{margin-top:4px}
.help-card .btn{flex:none;padding:12px 18px}
@media (max-width:520px){.help-card{flex-direction:column;align-items:stretch}}
.assure{list-style:none;display:grid;gap:10px;margin-top:24px;font-size:14px;color:var(--soft)}
.assure li{display:flex;gap:10px}
.assure svg{width:18px;height:18px;color:var(--red);flex:none;margin-top:2px}
.desc{color:var(--soft);margin-top:24px;white-space:pre-line}
@media (max-width:900px){.pdp,.pdp:has(>.pdp-reviews),.pdp:has(>.pdp-video){grid-template-columns:1fr;grid-template-rows:none}.pdp>div:nth-child(2),.pdp>.pdp-video,.pdp>.pdp-reviews{grid-column:auto;grid-row:auto}}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.step{background:var(--bg);padding:30px 26px}
.step .n{font-family:var(--f-display);font-weight:900;font-size:44px;color:var(--red);line-height:1;margin-bottom:16px}
.step h3{font-family:var(--f-heavy);font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px}

/* Brand row */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.brands a{background:var(--bg);padding:26px 18px;text-align:center;transition:background .2s}
.brands a:hover{background:var(--panel)}
.brands b{display:block;font-family:var(--f-heavy);font-size:17px;letter-spacing:.04em}
.brands span{font-size:12px;color:var(--muted)}

/* Banner */
.banner{background:var(--red);color:#fff;padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.banner::after{content:"SELL";position:absolute;right:-10px;bottom:-60px;font-family:var(--f-display);font-weight:900;font-size:220px;color:rgba(0,0,0,.12);pointer-events:none}
.banner .h2{font-size:clamp(26px,3.6vw,44px)}
.banner p{margin-top:10px;opacity:.92;max-width:52ch}
.banner .btn{position:relative;z-index:1;background:var(--bg);border-color:var(--bg);color:var(--fg)}
@media (max-width:760px){.banner{grid-template-columns:1fr}}

/* Tables */
.tbl{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{font-family:var(--f-wide);font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--muted);background:var(--panel)}
tr:last-child td{border-bottom:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
/* Condition guide: score and grade stay on one line (dot + word together); only the description wraps */
.grade-tbl td:nth-child(-n+2){white-space:nowrap;vertical-align:middle}
/* Condition meter: 5 rising bars, filled up to the grade */
.cond-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-right:10px;vertical-align:-2px}
.cond-bars i{display:block;width:4px;border-radius:1px;background:var(--line)}
.cond-bars i:nth-child(1){height:5px}.cond-bars i:nth-child(2){height:7px}.cond-bars i:nth-child(3){height:9px}.cond-bars i:nth-child(4){height:11px}.cond-bars i:nth-child(5){height:14px}
.cond-bars[data-l="1"] i:nth-child(-n+1),.cond-bars[data-l="2"] i:nth-child(-n+2),.cond-bars[data-l="3"] i:nth-child(-n+3),.cond-bars[data-l="4"] i:nth-child(-n+4),.cond-bars[data-l="5"] i{background:var(--c)}
.grade-tbl td:last-child{width:100%}
@media (max-width:520px){.grade-tbl th,.grade-tbl td{padding:12px 10px}.grade-tbl td:nth-child(2){padding-right:6px}}
.two{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}

/* Forms */
.form{background:var(--panel);border:1px solid var(--line);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.field input,.field select,.field textarea{background:var(--bg);border:1.5px solid var(--line);padding:12px 14px;font-size:15px;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field small{color:var(--muted);font-size:12px}
.form .btn{grid-column:1/-1}
.form-msg{grid-column:1/-1;font-size:14px;min-height:1.4em;color:var(--good)}
.form-msg.err{color:#ff6b62}
.ferr{color:#ff6b62!important}
.ferr:empty{display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#ff6b62}
.radio-cards label.off{opacity:.45;cursor:not-allowed}
.field input.fixed{color:var(--muted);cursor:default}
.combo{position:relative}
.combo-list{position:absolute;top:calc(100% - 4px);left:0;right:0;z-index:25;background:var(--panel);border:1.5px solid var(--red);border-top:0;max-height:280px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.combo-list button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;text-align:left;padding:11px 14px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font-size:15px;cursor:pointer}
.combo-list button small{color:var(--muted);font-size:12px;white-space:nowrap}
.combo-list button:hover,.combo-list button[aria-selected="true"]{background:rgba(225,6,0,.1)}
.combo-head{padding:9px 14px;font-size:12px;color:var(--muted);letter-spacing:.04em}
details.policy{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}
details.policy summary{cursor:pointer;font-weight:600;color:var(--soft)}
details.policy p{margin-top:8px;white-space:pre-line}
.track-box{background:var(--panel);border:1px solid var(--line);padding:18px 20px;margin-top:26px;display:grid;gap:10px}
.track-box .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.track-box dt{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.track-box dd{font-weight:600;overflow-wrap:anywhere}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:560px;margin-inline:auto;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:16px 18px;display:grid;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:14px;color:var(--soft)}
.consent .btns{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:11px 18px}
.menu a.m-only{display:none}
@media (max-width:960px){.menu a.m-only{display:block}}
.track-btn.on{color:var(--red)}
/* Policy pages */
.policy-wrap{display:grid;grid-template-columns:220px minmax(0,760px);gap:clamp(24px,5vw,64px);padding-block:40px 80px}
.policy-nav{display:grid;gap:2px;align-content:start;position:sticky;top:110px}
.policy-nav a{padding:10px 14px;border-left:2px solid var(--line);color:var(--muted);font-weight:600;font-size:14px}
.policy-nav a:hover{color:var(--fg)}
.policy-nav a[aria-current="page"]{border-color:var(--red);color:var(--fg);background:var(--panel)}
.prose{color:var(--soft);font-size:15.5px;line-height:1.7}
.prose h2{font-family:var(--f-heavy);font-weight:400;font-size:18px;color:var(--fg);margin:34px 0 10px;letter-spacing:.01em}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:14px}
.prose ul{padding-left:20px;margin-bottom:14px;display:grid;gap:6px}
.prose li::marker{color:var(--red)}
@media (max-width:860px){.policy-wrap{grid-template-columns:1fr;padding-top:24px}.policy-nav{position:static;display:flex;flex-wrap:wrap;gap:8px}.policy-nav a{border:1.5px solid var(--line);padding:8px 12px}.policy-nav a[aria-current="page"]{border-color:var(--red)}}
/* Shipping history timeline (order tracking page) */
.history{list-style:none;display:grid;gap:0;margin-top:4px}
.history li{position:relative;padding:0 0 18px 28px;display:grid;gap:2px}
.history li:last-child{padding-bottom:0}
.history li::before{content:"";position:absolute;left:5px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid var(--panel);box-shadow:0 0 0 1.5px var(--line)}
.history li::after{content:"";position:absolute;left:9.5px;top:20px;bottom:2px;width:1.5px;background:var(--line)}
.history li:last-child::after{display:none}
.history li b{font-weight:600;color:var(--soft);font-size:15px}
.history li time{color:var(--muted);font-size:13px}
.history li.now::before{background:var(--red);box-shadow:0 0 0 1.5px var(--red),0 0 0 6px rgba(225,6,0,.15)}
.history li.now b{color:var(--fg)}
.history li.bad b{color:#ff6b62}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio-cards label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);padding:12px;cursor:pointer;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--fg)}
.radio-cards input{accent-color:var(--red)}
.radio-cards label:has(input:checked){border-color:var(--red);background:rgba(225,6,0,.08)}
.perks{list-style:none;display:grid;gap:12px;margin-top:24px}
.perks li{display:flex;gap:12px;color:var(--soft)}
/* Ticks: Lucide circle-check in VEXO red (drawn as a mask so it takes the theme colour) */
.perks li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
.drop{border:1.5px dashed var(--line);padding:18px;text-align:center;color:var(--muted);font-size:14px;cursor:pointer;transition:border-color .2s}
.drop:hover,.drop.over{border-color:var(--red)}
.previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.previews img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line)}
@media (max-width:560px){.form{grid-template-columns:1fr}.radio-cards{grid-template-columns:1fr}}

/* Cart page */
.cart-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,48px);align-items:start;padding-block:36px 80px}
.line-item{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding-block:18px;border-bottom:1px solid var(--line)}
.line-item .th{background:var(--panel);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.line-item .th .shoe-img{width:88%;transform:rotate(-14deg)}
.line-item .th img.shoe-img{width:100%;height:100%;object-fit:cover;transform:none}
.line-item strong{font-family:var(--f-heavy);font-weight:400;display:block}
.line-item small{display:block;color:var(--muted);font-size:13px}
.line-item .ip{font-family:var(--f-display);font-weight:700;color:var(--red);white-space:nowrap;text-align:right}
.rm{display:block;background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;margin-top:6px;margin-left:auto}
.summary{background:var(--panel);border:1px solid var(--line);padding:24px;display:grid;gap:12px;position:sticky;top:96px}
.row{display:flex;justify-content:space-between;font-size:15px;color:var(--soft)}
.row.total{color:var(--fg);font-size:20px;font-weight:700;padding-top:12px;border-top:1px solid var(--line)}
.track{height:5px;background:var(--line);overflow:hidden}
.fill{height:100%;background:var(--red);transition:width .3s}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:520px){.line-item{grid-template-columns:80px 1fr}.line-item>div:last-child{grid-column:2}.line-item .ip{text-align:left}.rm{margin-left:0}}

/* FAQ */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-family:var(--f-heavy);font-size:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--red);font-family:var(--f-display);font-size:22px;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--soft);padding-bottom:20px;max-width:70ch}

/* Footer */
footer.site{border-top:1px solid var(--line);padding-block:56px 30px;margin-top:20px}
.foot{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.foot .logo svg{height:44px}
.foot p{color:var(--muted);font-size:14px;margin-top:16px;max-width:32ch}
.foot h4{font-family:var(--f-wide);font-size:10px;letter-spacing:.24em;margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot li,.foot li a{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.foot li a:hover{color:var(--fg)}
.copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:1100px){.foot{grid-template-columns:repeat(4,1fr)}.foot>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:35;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s;color:#fff}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,180%);visibility:hidden;background:var(--fg);color:var(--bg);font-weight:700;padding:13px 22px;z-index:60;transition:transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0);visibility:visible}
.notice{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:16px 18px;color:var(--soft);font-size:14px}
.success-mark{width:72px;height:72px;border-radius:50%;background:rgba(47,199,122,.15);color:var(--good);display:grid;place-items:center;margin-bottom:22px}
.success-mark svg{width:36px;height:36px}
pre.bank{white-space:pre-wrap;font-family:var(--f-body);background:var(--panel);border:1px solid var(--line);padding:16px;margin-top:10px}

 /* ---------- Phones ---------- */
@media (max-width:600px){
  body{font-size:15px}
  .nav{height:64px;gap:10px}
  .logo svg{height:32px}
  .actions{gap:4px}
  .menu{inset:64px 0 auto 0}
  .announce{font-size:10px;padding-block:6px}
  .hero-shoe{width:min(330px,82vw)!important;margin-block:4px 0!important}
  .edition{margin-top:28px;position:relative;z-index:3}
  section{padding-block:44px}
  .hero{padding-block:20px 44px}
  .word{font-size:clamp(46px,15vw,64px)}
  .hero .sub{margin-top:12px;letter-spacing:.25em}
  .hero-bottom{gap:22px}
  .btns{width:100%}
  .btns .btn{flex:1;padding-inline:12px}
  .swatch{width:72px;height:54px}
  .swatch .shoe-img{width:62px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .body{padding:12px;gap:8px}
  .card h3{font-size:14px}
  .brand-l{font-size:9px;letter-spacing:.16em}
  .meta{gap:5px}
  .meta span{font-size:10.5px;padding:3px 6px}
  .prices{gap:2px 8px}
  .prices b{font-size:15px}
  .prices s{font-size:11px}
  .card .add{padding:10px 6px;font-size:10.5px}
  .save{top:8px;left:8px;font-size:10px;padding:3px 6px}
  .fav{top:6px;right:6px;width:30px;height:30px}
  .stamp{font-size:20px}
  .sec-head{margin-bottom:20px}
  .sec-head .btn{padding:11px 16px}
  .h2{font-size:clamp(28px,8.4vw,40px)}
  .page-head{padding-block:28px 22px}
  .brands{grid-template-columns:repeat(2,1fr)}
  .brands a{padding:18px 10px}
  .steps{margin-top:24px}
  .step{padding:22px 18px}
  .step .n{font-size:34px;margin-bottom:10px}
  .pdp{padding-block:18px 50px;gap:22px}
  .pdp .price-big{font-size:28px}
  .thumbs button{width:60px;height:60px}
  .specs{grid-template-columns:1fr 1fr}
  .banner::after{font-size:140px;bottom:-36px}
  .banner .btn{width:100%}
  .shop-top{gap:10px}
  .shop-top .sort select{max-width:160px}
  .cart-layout{padding-block:20px 60px}
  .summary{padding:18px}
  .form{padding:18px}
  .foot{gap:28px}
  .wa-float{width:50px;height:50px;right:14px;bottom:14px}
  .wa-float svg{width:26px;height:26px}
  th,td{padding:10px 12px}
}
@media (max-width:360px){.grid{grid-template-columns:1fr}}

.js .reveal.pending{opacity:0;transform:translateY(24px)}
.reveal{transition:opacity .7s,transform .7s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Slide-in cart */
.cd-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;opacity:0;transition:opacity .3s}
.cd-scrim.show{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);border-left:1px solid var(--line);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
.cart-drawer.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cd-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.cd-head h2{font-family:var(--f-display);font-size:20px}
.cd-head h2 span{color:var(--muted);font-size:15px}
.cd-x{background:none;border:0;font-size:30px;line-height:1;width:40px;height:40px;color:var(--fg)}
.cd-x:hover{color:var(--red)}
.cd-body{flex:1;overflow-y:auto;padding:0 20px;overscroll-behavior:contain}
.cd-item{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding-block:16px;border-bottom:1px solid var(--line)}
.cd-item .th{background:var(--panel);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.cd-item .th .shoe-img{width:88%;transform:rotate(-14deg)}
.cd-item .th img.shoe-img{width:100%;height:100%;object-fit:cover;transform:none}
.cd-item strong{font-family:var(--f-heavy);font-weight:400;display:block;font-size:14px}
.cd-item small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.cd-item .ip{display:block;font-family:var(--f-display);font-weight:700;color:var(--red);margin-top:6px}
.cd-item.off .th{opacity:.4}
.cd-item .rm{align-self:start}
.cd-empty{padding:40px 0;display:grid;gap:18px;justify-items:start}
.cd-foot{border-top:1px solid var(--line);padding:18px 20px calc(18px + env(safe-area-inset-bottom));display:grid;gap:10px;background:var(--panel)}
.cd-foot .row{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.cd-foot .row b{font-family:var(--f-display);color:var(--red)}
html.cd-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cart-drawer,.cart-drawer.open,.cd-scrim{transition:none}}

/* Full-screen search */
.search-ov{position:fixed;inset:0;z-index:85;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-12px);transition:opacity .22s,transform .22s}
.search-ov.open{opacity:1;transform:none}
.so-top{position:sticky;top:0;z-index:2;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.so-bar{display:flex;align-items:center;gap:14px;padding-block:18px}
.so-ico{width:26px;height:26px;flex:none;color:var(--muted)}
.so-bar input{width:100%;background:transparent;border:0;outline:0;color:var(--fg);font-family:var(--f-heavy);font-size:clamp(20px,3vw,30px);letter-spacing:.01em;padding:6px 0}
.so-bar input::placeholder{color:var(--muted);opacity:.7}
.so-bar input::-webkit-search-cancel-button{display:none}
.so-x{flex:none;background:none;border:1.5px solid var(--line);width:44px;height:44px;font-size:26px;line-height:1;color:var(--fg)}
.so-x:hover{border-color:var(--red);color:var(--red)}
.so-body{padding-block:24px 70px}
.so-brands{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.so-head{font-family:var(--f-heavy);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
@media (max-width:600px){.so-bar{gap:10px;padding-block:12px}.so-ico{width:22px;height:22px}.so-x{width:40px;height:40px}.so-brands{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.so-brands .chip{flex:none}}
@media (prefers-reduced-motion:reduce){.search-ov{transition:none}}

/* Animated header icons: play on hover, tap and keyboard focus */
.actions .icon-btn svg{transform-origin:center;will-change:transform}
.track-btn:hover svg,.track-btn:focus-visible svg,.track-btn:active svg{animation:ic-drive .7s ease-in-out}
#searchBtn:hover svg,#searchBtn:focus-visible svg,#searchBtn:active svg{animation:ic-look .6s ease-in-out}
.theme-btn:hover .i-moon,.theme-btn:focus-visible .i-moon,.theme-btn:active .i-moon{animation:ic-swing .8s ease-in-out}
.theme-btn:hover .i-sun,.theme-btn:focus-visible .i-sun,.theme-btn:active .i-sun{animation:ic-spin .9s ease-in-out}
#cartBtn:hover svg,#cartBtn:focus-visible svg,#cartBtn:active svg{animation:ic-jiggle .6s ease-in-out}
.burger:hover svg,.burger:active svg{animation:ic-look .5s ease-in-out}
.count.bump{animation:ic-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ic-drive{0%{transform:translateX(0)}25%{transform:translateX(3px) translateY(-1px) rotate(-3deg)}50%{transform:translateX(5px)}75%{transform:translateX(-1px) translateY(-1px)}100%{transform:translateX(0)}}
@keyframes ic-look{0%{transform:none}30%{transform:rotate(-14deg) scale(1.12)}60%{transform:rotate(8deg) scale(1.08)}100%{transform:none}}
@keyframes ic-swing{0%{transform:rotate(0)}30%{transform:rotate(-24deg)}60%{transform:rotate(12deg)}100%{transform:rotate(0)}}
@keyframes ic-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.12)}100%{transform:rotate(180deg) scale(1)}}
@keyframes ic-jiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg) translateY(-1px)}45%{transform:rotate(8deg)}70%{transform:rotate(-4deg)}}
@keyframes ic-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.actions .icon-btn svg,.count.bump{animation:none!important}}

/* ---------- Reviews (product page) ---------- */
.stars{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");position:relative;display:inline-block;flex:none;width:90px;height:18px;background:var(--line);-webkit-mask:var(--star) 0 0/18px 18px repeat-x;mask:var(--star) 0 0/18px 18px repeat-x;vertical-align:middle}
.stars i{position:absolute;inset:0 auto 0 0;width:var(--v);background:#f5b400}
.rate-link{display:inline-flex;align-items:center;gap:8px;margin:-2px 0 12px;font-size:14px;color:var(--soft)}
.rate-link b{color:var(--fg)}
.rate-link span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rate-link:hover span{text-decoration-color:var(--red)}
.reviews-sec{padding-top:0;scroll-margin-top:80px}
.rv-grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.rv-grid>*{min-width:0}
.no-reviews .rv-grid{grid-template-columns:minmax(0,640px)}
.no-reviews .rv-summary{position:static}
.rv-summary{background:var(--panel);border:1px solid var(--line);padding:22px;display:grid;gap:18px;position:sticky;top:90px}
.rv-avg{display:flex;align-items:center;gap:14px}
.rv-avg>b{font-family:var(--f-heavy);font-size:52px;line-height:1}
.rv-avg small{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.rv-bars{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rv-bars li{display:grid;grid-template-columns:12px 14px 1fr 22px;align-items:center;gap:6px;font-size:13px;color:var(--soft)}
.rv-bars svg{width:13px;height:13px;fill:#f5b400}
.rv-bars i{height:7px;background:var(--panel-2);border-radius:9px;overflow:hidden}
.rv-bars em{display:block;height:100%;background:#f5b400;border-radius:inherit;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rv-bars small{text-align:right;color:var(--muted)}
.rv-empty{text-align:center}
.rv-empty-stars .stars{width:120px;height:24px;-webkit-mask-size:24px 24px;mask-size:24px 24px}
.rv-empty h3{margin:10px 0 6px;font-size:18px}
.rv-empty p{color:var(--soft);font-size:14px;margin:0}
.rv-summary .btn{width:100%;justify-content:center}
.rv-main{display:grid;gap:16px}
.rv-list{display:grid;gap:14px}
.rv-list:empty{display:none}
.rv{background:var(--panel);border:1px solid var(--line);padding:18px 20px;animation:rvIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes rvIn{from{opacity:0;transform:translateY(10px)}}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:700;font-size:16px}
.rv-who{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
.rv-who b{font-size:15px}
.rv-who small{flex-basis:100%;color:var(--muted);font-size:12px}
.rv-ver{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--good)}
.rv-ver svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rv-body{margin:12px 0 0;color:var(--soft);line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.rv-reply{margin-top:14px;padding:12px 14px;background:var(--panel-2);border-left:3px solid var(--red);font-size:14px}
.rv-reply b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.rv-reply p{margin:4px 0 0;color:var(--soft);white-space:pre-line;overflow-wrap:anywhere}
.rv-thanks{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--good);padding:16px 18px;color:var(--soft);font-size:14px;animation:rvIn .45s both}
.rv-thanks b{color:var(--fg)}
.rv-form{animation:rvIn .35s both}
.rv-form[hidden],.reviews-sec[hidden]{display:none}
.rv-form .full{grid-column:1/-1}
.rv-form .lbl{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.rv-form .opt{text-transform:none;letter-spacing:0;font-weight:400}
.rv-hint{margin:0;font-size:13px;color:var(--muted)}
.rv-actions{display:flex;gap:10px;flex-wrap:wrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.star-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{cursor:pointer;line-height:0;padding:2px}
.star-input svg{width:34px;height:34px;fill:var(--panel-2);stroke:var(--line);stroke-width:1.2;transition:fill .15s,stroke .15s,transform .15s}
.star-input label:hover svg,.star-input label:hover~label svg,.star-input input:checked~label svg{fill:#f5b400;stroke:#f5b400}
.star-input label:hover svg{transform:scale(1.15)}
.star-input input:focus-visible+label{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:820px){.rv-grid{grid-template-columns:1fr}.rv-summary{position:static}}
@media (max-width:560px){.rv{padding:16px}.rv-top{flex-wrap:wrap}.rv-top>.stars{margin-left:52px}}
/* Reviews placed under the photos (pairs without a video) */
.reviews-sec.in-pdp{padding:0}
.reviews-sec.in-pdp .wrap{padding:0;max-width:none;width:auto;margin:0}
.reviews-sec.in-pdp .sec-head{margin-bottom:16px}
.reviews-sec.in-pdp .h2{font-size:clamp(24px,2.6vw,34px)}
.reviews-sec.in-pdp .rv-grid,.reviews-sec.in-pdp.no-reviews .rv-grid{grid-template-columns:1fr;gap:16px}
.reviews-sec.in-pdp .rv-main:not(:has(>:not([hidden]):not(:empty))){display:none}
.reviews-sec.in-pdp .rv-summary{position:static;grid-template-columns:auto 1fr;align-items:center;gap:16px 28px}
.reviews-sec.in-pdp .rv-summary>.btn,.reviews-sec.in-pdp .rv-empty{grid-column:1/-1}
.reviews-sec.in-pdp.no-reviews .rv-summary{grid-template-columns:1fr}
@media (max-width:560px){.reviews-sec.in-pdp .rv-summary{grid-template-columns:1fr}}
.side-cards:empty{display:none}
.side-cards{margin-top:2px}
.side-cards .info-card{margin-top:16px}