/* KGB — yz.css — stripped-back storefront: pale grey, product-first, tiny type. */
:root{
  --bg:#e8e8e6;
  --ink:#111;
  --mute:#8a8a87;
  --line:#d3d3d0;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.yz{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
.yz a{color:inherit;text-decoration:none}
.yz button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;cursor:pointer}
.yz img{display:block;max-width:100%}

/* header: only a light wash at the very top, so the page scrolls visibly under the glass menu (a solid band
   would leave the liquid glass nothing to bend) */
.yz-head{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;mix-blend-mode:normal;background:linear-gradient(rgba(232,232,230,.55),rgba(232,232,230,0))}
.yz-logo{font-weight:700;font-size:15px;letter-spacing:.3em}
.yz-nav{display:flex;gap:26px;align-items:center}
.yz-nav a{position:relative;padding:2px 0}
.yz-nav a:hover,.yz-nav a.is-on{border-bottom:1px solid var(--ink)}
.yz-cart-n{margin-left:4px}

/* shop grid: every garment on the page at once */
.yz-main{padding:76px 22px 60px}
.yz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 22px}
@media(min-width:1500px){.yz-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:1000px){.yz-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.yz-grid{grid-template-columns:repeat(2,1fr);gap:30px 12px}.yz-main{padding:68px 12px 50px}.yz-nav{gap:14px}.yz-head{padding:14px 12px}}
.yz-tile{display:block;text-align:center}
.yz-tile .ph{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.yz-tile img{max-height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .25s}
.yz-tile img.alt{position:absolute;inset:0;margin:auto;opacity:0;height:100%}
.yz-tile:hover img.alt{opacity:1}
.yz-tile:hover img.main{opacity:0}
.yz-tile .nm{margin-top:12px}
.yz-tile .pr{color:var(--mute);margin-top:2px}
.yz-tile .tag{color:var(--mute)}
.yz-tile.is-cover img{mix-blend-mode:normal;object-fit:cover;aspect-ratio:1;margin:auto;max-width:78%}
.yz-empty{padding:40vh 0;text-align:center;color:var(--mute)}
.yz-foot{padding:40px 22px 30px;display:flex;justify-content:space-between;color:var(--mute);flex-wrap:wrap;gap:12px}
.yz-foot a:hover{color:var(--ink)}

/* product page */
.yz-prod{display:grid;grid-template-columns:1fr 340px;gap:40px;padding:76px 22px 60px;min-height:100vh}
@media(max-width:860px){.yz-prod{grid-template-columns:1fr}}
.yz-prod .pics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-content:start}
.yz-prod .pics img{width:100%;mix-blend-mode:multiply}
.yz-prod .pics img.solo{grid-column:1/-1;max-width:640px;margin:auto}
.yz-info{position:sticky;top:76px;align-self:start}
.yz-info h1{font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:6px}
.yz-info .pr{margin-bottom:22px}
.yz-info p.d{text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.6;color:#444;margin:18px 0}
.yz-opts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 18px}
.yz-opts button{border:1px solid var(--line);padding:9px 14px;min-width:44px}
.yz-opts button.on,.yz-opts button:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.yz-add{display:block;width:100%;background:var(--ink)!important;color:var(--bg)!important;padding:15px;text-align:center}
.yz-add:hover{opacity:.85}
.yz-lbl{color:var(--mute)}

/* reskin for cart / checkout / account pages that still use store.js markup */
body.yz-legacy{background:var(--bg)!important;color:var(--ink)!important;font-family:var(--font)!important}
body.yz-legacy main{padding-top:70px}
body.yz-legacy .site-header,body.yz-legacy .site-footer,body.yz-legacy .page-banner,
body.yz-legacy .cursor-dot,body.yz-legacy .cursor-ring,body.yz-legacy .footer-retro,
body.yz-legacy .shop-cart-fab{display:none!important}
body.yz-legacy h1,body.yz-legacy h2,body.yz-legacy h3{font-family:var(--font)!important;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
body.yz-legacy .btn,body.yz-legacy button.btn-solid{background:var(--ink)!important;color:var(--bg)!important;border:0!important;border-radius:0!important;font-family:var(--font)!important;letter-spacing:.1em;text-transform:uppercase}
body.yz-legacy input,body.yz-legacy select,body.yz-legacy textarea{background:transparent!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:0!important;font-family:var(--font)!important}
body.yz-legacy *{border-radius:0}

/* dark pages (games, DVD player) keep their own look; only the header is new */
.yz-dark .yz-head{background:#000!important;color:#fff;border:0!important;box-shadow:none!important}
.yz-dark .yz-head a{color:#fff}
.yz-dark main{padding-top:56px}
.yz-dark .yz-head{font-family:var(--font);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.yz-dark .site-header,.yz-dark .page-banner{display:none!important}
.yz-head a{color:inherit;text-decoration:none}

/* legacy pages: flatten the old theme through its own tokens */
body.yz-legacy{
  --paper:#e8e8e6;--paper-dark:#dcdcda;--surface:#f2f2f0;--surface-2:#e8e8e6;--ink:#111;--ink-dim:#777;
  --accent:#111;--accent-dark:#000;--red:#111;--red-dark:#000;--crimson:#000;--line:#cfcfcc;--bevel:#cfcfcc;--chrome:#cfcfcc;
  --shadow-hard:none;--font-cover:var(--font);--font-body:var(--font);--font-blackletter:var(--font);--font-pixel:var(--font);--font-feature:var(--font);
  background-image:none!important;
}
body.yz-legacy::before,body.yz-legacy::after{display:none!important}
body.yz-legacy *{box-shadow:none!important;text-shadow:none!important;font-style:normal!important}
body.yz-legacy *{font-family:var(--font)!important}
body.yz-legacy .reveal,body.yz-legacy .stagger>*{opacity:1!important;transform:none!important}
body.yz-legacy [class*="card"],body.yz-legacy [class*="panel"],body.yz-legacy .checkout-form,body.yz-legacy .order-summary{background:var(--surface)!important;border:1px solid var(--line)!important}
body.yz-legacy .ws2-tag,body.yz-legacy .ws2-ad,body.yz-legacy #ws2Tag{display:none!important}
body.yz-legacy img{mix-blend-mode:multiply}
.yz-dark .ws2-tag{top:60px}

/* dark pages: whole page black so no pale band shows under the player */
body.yz-dark{background:#000!important;background-image:none!important;color:#fff;
  --paper:#000;--paper-dark:#0d0d0d;--surface:#111;--surface-2:#161616;--ink:#fff;--ink-dim:#aaa;--line:#2a2a2a}
body.yz-dark::before,body.yz-dark::after{display:none!important}
.yz-dark .yz-head{top:0}
.yz-dark .section{background:transparent!important;color:#fff}
.yz-dark .section-label,.yz-dark .section-title,.yz-dark .section h2,.yz-dark .section h3,.yz-dark .section p{color:#fff!important}

/* official logo */
.yz-logo img{height:34px;width:auto;display:block}
.yz-dark .yz-logo img{filter:invert(1)}

/* WHITE theme for games (WS2) + DVD player */
body.yz-dark{background:#fff!important;color:#111;
  --paper:#fff;--paper-dark:#f2f2f2;--surface:#fff;--surface-2:#f5f5f5;--ink:#111;--ink-dim:#777;--line:#ddd}
.yz-dark .yz-head{background:#fff!important;color:#111}
.yz-dark .yz-head a{color:#111}
.yz-dark .yz-logo img{filter:none}
.yz-dark .section,.yz-dark .dvd,.yz-dark .theater,.yz-dark .games,.yz-dark main>section{background:#fff!important}
.yz-dark .section-label,.yz-dark .section-title,.yz-dark .section:not(.games) h2,.yz-dark .section:not(.games) h3,.yz-dark .section:not(.games) p{color:#111!important}
.yz-dark .dvd::before,.yz-dark .dvd::after,.yz-dark .theater::before,.yz-dark .theater::after{display:none!important}
.yz-dark .disc-nav,.yz-dark .disc-caption,.yz-dark .disc-caption *,.yz-dark .disc-tools button,.yz-dark #discTools button{color:#111!important;border-color:#111!important;text-shadow:none!important}
.yz-dark .disc-caption .eyebrow,.yz-dark .disc-caption small{color:#777!important}
.yz-dark .disc-reflect,.yz-dark .disc-scene::after{opacity:.25}

/* CD cases: one simple soft ground shadow, no mirror reflection */
.yz-dark .disc.is-case *[class*="reflect"],.yz-dark .disc.is-case .jewel-reflect{display:none!important}
.yz-dark .disc.is-case::after{content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:7%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 70%);filter:blur(6px);
  transform:translateZ(-1px);pointer-events:none;z-index:-1}
.yz-dark .disc-float{-webkit-box-reflect:none!important}
.yz-dark .disc.is-case::after{transform:none!important;z-index:0!important;bottom:-4%!important;height:9%!important;left:10%!important;right:10%!important}
body.yz-dark .theater .disc.is-case .disc-float{-webkit-box-reflect:none;box-reflect:none}
body.yz-dark .theater .disc.is-case .disc-float{-webkit-box-reflect:below 0 linear-gradient(transparent,transparent)}

/* the DVD video screen is gone from the player page: music videos live in the WS2's KGB DVD app */
.yz-dark #tv,.yz-dark .tv,.yz-dark #deckControls,.yz-dark .deck-controls{display:none!important}

/* ===== LIQUID GLASS: every pill is a real Glisse glass layer (js/glass.js + the last section of this
   file). The values here are only the stand-in a pill shows until that loads, or if it can't:
   Glisse's own light-glass tint, hairline edge and drop, frosted. ===== */
:root{
  --glass:rgba(255,255,255,.6);
  --glass-on:rgba(255,255,255,.9);
  --glass-edge:1px solid transparent;
  --glass-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);
  --glass-frost:blur(3px) saturate(1.5);
  --glass-ease:scale .5s cubic-bezier(.34,1.56,.64,1),transform .2s,background-color .2s,color .2s;
}
.yz-opts button,.yz-add,
body.yz-legacy .btn,body.yz-legacy button.btn-solid,body.yz-legacy button[type=submit],
body.yz-legacy .cart-actions button,body.yz-legacy .qty button{
  position:relative;color:#111!important;font-weight:600;letter-spacing:.1em;
  background:var(--glass)!important;border:var(--glass-edge)!important;border-radius:999px!important;
  box-shadow:var(--glass-shadow)!important;-webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);
  transition:var(--glass-ease);
}
.yz-opts button{padding:10px 20px;min-width:52px}
.yz-opts button:hover,.yz-add:hover,body.yz-legacy .btn:hover{background:var(--glass-on)!important;opacity:1}
.yz-opts button.on{box-shadow:var(--glass-shadow),0 0 0 1.5px #111!important}
.yz-opts button.on:hover{color:#111!important}
.yz-add{padding:16px;font-size:12px}
/* inputs: a soft inset glass trough */
body.yz-legacy input,body.yz-legacy select,body.yz-legacy textarea,.yz-bar input[type=text]{
  border-radius:999px!important;background:linear-gradient(180deg,rgba(210,213,217,.55),rgba(255,255,255,.85))!important;
  border:1px solid rgba(255,255,255,.95)!important;box-shadow:inset 0 2px 5px rgba(120,126,134,.35),0 1px 0 #fff!important;padding-left:14px!important}
body.yz-legacy textarea{border-radius:18px!important}
/* panels/cards: frosted glass sheets instead of flat boxes */
body.yz-legacy [class*="card"],body.yz-legacy [class*="panel"],body.yz-legacy .checkout-form,body.yz-legacy .order-summary{
  border-radius:22px!important;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35))!important;
  border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,0 12px 32px rgba(110,116,124,.25)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* music page sections */
.yz-sec{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin:6px 0 22px}
.yz-main .yz-grid + .yz-sec{margin-top:70px}
.yz-empty-s{grid-column:1/-1;padding:30px 0 10px;text-align:left;color:var(--mute)}

/* ===== boombox stage: case centred; on LOAD it slides left, the boombox slides in, the CD drops in ===== */
.yz-dark .theater.is-3d .theater-inner{display:block!important;position:relative;min-height:min(78vh,660px);padding-block:1.5rem;transition:none}
.yz-dark .theater.is-3d .disc-stage{position:absolute!important;left:50%;top:1.5rem;width:min(460px,92%);transform:translateX(-50%);max-height:none!important;
  transition:left .9s cubic-bezier(.3,0,.2,1),transform .9s cubic-bezier(.3,0,.2,1),opacity .4s}
.yz-dark .theater.is-3d .disc-stage[hidden]{display:flex!important;visibility:visible!important;opacity:1!important;max-height:none!important;overflow:visible!important;pointer-events:none}
.yz-dark .theater.is-3d .disc-stage[hidden] .disc-caption,.yz-dark .theater.is-3d .disc-stage[hidden] .disc-load,.yz-dark .theater.is-3d .disc-stage[hidden] #discTools,.yz-dark .theater.is-3d .disc-stage[hidden] .disc-nav{opacity:0;transition:opacity .3s}
.yz-dark .theater[data-state="loading"] .disc-stage,.yz-dark .theater[data-state="theater"] .disc-stage{left:17%;transform:translateX(-50%) scale(.72);transform-origin:50% 0}
.yz-dark .theater[data-state="theater"] .disc.is-front .jc-disc{opacity:0}
.yz-dark .theater.is-3d .deck3d{position:absolute!important;right:0;top:0;width:66%;height:100%;max-height:none!important;aspect-ratio:auto!important;margin:0!important;
  opacity:0;transform:translateX(90px);pointer-events:none;transition:opacity .8s ease,transform .9s cubic-bezier(.3,0,.2,1)}
.yz-dark .theater[data-state="loading"] .deck3d,.yz-dark .theater[data-state="theater"] .deck3d,.yz-dark .theater[data-state="ejecting"] .deck3d{opacity:1;transform:none;pointer-events:auto}
.yz-dark .theater.is-3d .deck{position:absolute;left:0;right:0;bottom:0}
@media (max-width:1000px){
  .yz-dark .theater[data-state="loading"] .disc-stage,.yz-dark .theater[data-state="theater"] .disc-stage{left:30%;transform:translateX(-50%) scale(.52)}
  .yz-dark .theater.is-3d .deck3d{width:100%;top:34%;height:66%}
}

/* ===== header menu items as liquid glass pills ===== */
.yz-nav{gap:10px}
.yz-nav a{position:relative;padding:8px 18px!important;border-radius:999px;font-weight:600;color:#111!important;border:var(--glass-edge)!important;
  background:var(--glass);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);transition:var(--glass-ease)}
.yz-nav a:hover{background:var(--glass-on)}
.yz-nav a.is-on,.yz-nav a[aria-current]{box-shadow:var(--glass-shadow),0 0 0 1.5px #111}
.yz-nav a:hover,.yz-nav a.is-on{border-bottom:var(--glass-edge)}
.yz-dark .yz-head a{color:#111!important}
@media(max-width:760px){.yz-nav{gap:6px}.yz-nav a{padding:6px 10px!important;font-size:10px}}
.yz-dark .theater.is-3d .disc-stage .disc-ring{opacity:1!important;filter:none!important}

/* fixed photo boxes: every garment is centred in the same frame, so switching colour never moves it */
.yz-prod .pics .fit{position:relative;aspect-ratio:4/5;overflow:hidden}
.yz-prod .pics .fit.solo{grid-column:1/-1;width:min(100%,560px);margin:0 auto}
.yz-prod .pics .fit img{mix-blend-mode:multiply}
.yz-tile .ph[data-centre]{aspect-ratio:4/5}
.yz-tile .ph[data-centre] img{mix-blend-mode:multiply}
.yz-info p.d{display:none}

/* ===== retire the old (Anton / blue / boxed) look on the Boombox + Games pages ===== */
.yz-dark .cursor-dot,.yz-dark .cursor-ring{display:none!important}
.yz-dark *{font-family:var(--font)!important}
.yz-dark .dvd,.yz-dark .theater,.yz-dark .theater-inner{border:0!important;box-shadow:none!important}
.yz-dark .disc-caption,.yz-dark .disc-caption *{text-transform:uppercase;letter-spacing:.14em;font-style:normal!important;font-weight:500}
.yz-dark .disc-caption h3{font-size:clamp(1.1rem,2vw,1.5rem)!important;font-weight:700;letter-spacing:.2em}
.yz-dark .disc-caption .eyebrow,.yz-dark .disc-caption small{font-size:10px;letter-spacing:.22em}
.yz-dark .disc-caption p,.yz-dark .disc-meta{font-size:11px}
/* every button on these pages: liquid glass pill, no boxes */
.yz-dark .disc-tools button,.yz-dark #discTools button,.yz-dark .disc-load,.yz-dark .btn,.yz-dark .btn-solid{
  position:relative;color:#111!important;font-size:11px!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--glass)!important;border:var(--glass-edge)!important;border-radius:999px!important;box-shadow:var(--glass-shadow)!important;padding:10px 22px!important;
  -webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);transition:var(--glass-ease)}
.yz-dark .disc-load{padding:13px 34px!important}
.yz-dark .disc-tools button:hover,.yz-dark .disc-load:hover{background:var(--glass-on)!important;filter:none}
.yz-dark .disc-tools button[aria-pressed=true],.yz-dark .disc-tools button.is-on{background:var(--glass-on)!important}
.yz-dark .disc-nav{border-radius:999px!important;background:var(--glass)!important;border:var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important;color:#111!important}
.yz-dark .theater.is-3d .theater-inner{min-height:max(760px,84vh)!important}
.yz-dark .theater.is-3d .deck3d{height:min(100%,640px)!important}
.yz-dark .yz-foot{position:relative;z-index:2;background:#fff}

/* ===== always 3 per row, every row (even a short last one) centred on the page ===== */
.yz-main{display:flex;flex-direction:column;align-items:center}
.yz-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:48px var(--gx,28px);width:100%;max-width:1120px;margin-inline:auto;--gx:28px}
.yz-grid .yz-tile{flex:0 0 calc((100% - 2 * var(--gx)) / 3);min-width:0}
.yz-grid .yz-empty,.yz-grid .yz-empty-s{flex:1 0 100%;text-align:center}
.yz-sec{width:100%;max-width:1120px;text-align:center}
/* phones: two per row, not three — at three a garment was only ~110px wide on a 390px screen */
@media(max-width:640px){
  .yz-grid{--gx:14px;gap:34px var(--gx)}
  .yz-grid .yz-tile{flex-basis:calc((100% - var(--gx)) / 2)}
  .yz-tile .nm,.yz-tile .pr{font-size:12px}
}

/* the moment LOAD DISC is pressed the caption + buttons fade out, so nothing sits under the sliding boombox */
.yz-dark .theater[data-state="loading"] .disc-caption,.yz-dark .theater[data-state="loading"] .disc-load,.yz-dark .theater[data-state="loading"] #discTools,.yz-dark .theater[data-state="loading"] .disc-nav,
.yz-dark .theater[data-state="theater"] .disc-caption,.yz-dark .theater[data-state="theater"] .disc-load,.yz-dark .theater[data-state="theater"] #discTools,.yz-dark .theater[data-state="theater"] .disc-nav{opacity:0!important;pointer-events:none;transition:opacity .25s}
.yz-dark .theater.is-3d .deck3d{z-index:1}
.yz-dark .theater.is-3d .disc-stage{z-index:2}

/* no hover flip to the back of the garment: tiles always show the front */
.yz-tile img.alt{display:none!important}
.yz-tile:hover img.main{opacity:1!important}

/* the old music player (Spotify strip, TV, OSD) never shows: it keeps running off-screen, the boombox is the only UI */
.yz-dark .theater.is-3d .deck,.yz-dark #deckAudio,.yz-dark .deck-audio,.yz-dark #spotifyMount,.yz-dark .tv-osd,.yz-dark #tvOsd,.yz-dark #tv{
  position:fixed!important;left:-9999px!important;top:0!important;width:320px!important;height:120px!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}

/* claim button + secondary glass link */
.yz-alt{margin-top:10px;text-decoration:none}
.yz-msg{margin-top:14px;font-size:11px;letter-spacing:.08em;color:var(--mute);text-transform:none;line-height:1.5}
.yz-add:disabled{opacity:.6;cursor:default}

/* ===== DARK MODE — follows the device's setting (js/theme.js + each page's <head>), no toggle ===== */
.yz-nav a{position:relative;padding:8px 18px;border-radius:999px;font:inherit;font-weight:600;letter-spacing:inherit;text-transform:inherit;color:#111;cursor:pointer;
  border:var(--glass-edge);background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);transition:var(--glass-ease)}
/* dark = the whole page inverted, then pictures / 3D / the console screen turned back so they keep their real colours */
html[data-theme="dark"]{filter:invert(1) hue-rotate(180deg);background:#fff}
html[data-theme="dark"] img,html[data-theme="dark"] video,html[data-theme="dark"] canvas,html[data-theme="dark"] iframe,
html[data-theme="dark"] .ws2-screen,html[data-theme="dark"] .disc,html[data-theme="dark"] .disc-fly,html[data-theme="dark"] .wallet{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .yz-logo img{filter:none!important}
html[data-theme="dark"] .yz-tile img,html[data-theme="dark"] .pics img{mix-blend-mode:normal!important}
html[data-theme="dark"] .ws2-screen:fullscreen{filter:contrast(1.08) saturate(1.15) brightness(1.04)}
html[data-theme="dark"] .yz-dark .yz-logo img{filter:none!important}

/* WS2 pop-up / corner tag: gone for good */
.ws2-tag,#ws2Tag,.ws2-ad,#ws2Ad,.ws2-ad-overlay,[class*="ws2-ad"]{display:none!important}

/* black + white scrollbars (no more blue) */
html{scrollbar-color:#111 #ececec}
html[data-theme="dark"]{scrollbar-color:#e6e6e6 #141414}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#ececec}
::-webkit-scrollbar-thumb{background:#111;border:3px solid #ececec;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#333}
html[data-theme="dark"]::-webkit-scrollbar-track{background:#141414}
html[data-theme="dark"]::-webkit-scrollbar-thumb{background:#e6e6e6;border-color:#141414}

/* ===== LIQUID GLASS — Glisse (glisse.kelvinzhang.ca, MIT), mounted by js/glass.js =====
   glass.js renders a Glisse <Glass> (.kgb-lg-host > .lg-glass.kgb-lg) under each pill and marks the pill
   .has-lg. The pill itself then draws nothing — no tint, frost, edge, shadow or filter: a filter,
   backdrop-filter or opacity < 1 on it would make it a backdrop root and cut the glass off from the page it
   is meant to bend. Selectors start "html body" so they outrank yz-legacy's blanket
   `*{border-radius:0; box-shadow:none!important}`. */
html body .has-lg{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;opacity:1!important;
  text-shadow:none!important;overflow:visible!important;isolation:isolate;transition:var(--glass-ease)}
html body .has-lg.lg-pos{position:relative}
/* nothing in the header may blend: a mix-blend-mode makes its stacking context — the fixed header — an
   isolated group, and every backdrop-filter inside it (the glass pills, the phone menu's frost) then sees only
   the header, not the page. The logo's old `multiply` did exactly that; the logo is black on transparent, so
   normal blending draws it identically. (yz-legacy pages multiply every img, hence the !important.) */
html body .yz-head img{mix-blend-mode:normal!important}
html body .has-lg::before{content:none!important}
html body .kgb-lg-host{position:absolute;inset:0;z-index:-1;display:block;border-radius:inherit!important;pointer-events:none}
html body .kgb-lg{position:absolute!important;inset:0;border-radius:inherit!important;transition:background-color .2s;
  box-shadow:inset 0 0 0 .5px var(--lg-edge),0 1px 3px var(--lg-drop)!important}
html body .kgb-lg[data-rim]{box-shadow:0 1px 3px var(--lg-drop)!important}
@media (hover:hover){html body .has-lg:hover>.kgb-lg-host>.kgb-lg{background-color:var(--lg-glass-active)}}
html body .has-lg.is-pressed{scale:var(--lg-press,1.06);transition:scale .16s cubic-bezier(.3,0,.2,1)}
html body .has-lg:disabled{color:rgba(17,17,17,.4)!important;cursor:default}
/* the selected colour / size, and the page you're on: a hairline ink ring round the glass */
html body .yz-opts .has-lg.on>.kgb-lg-host>.kgb-lg,
html body .yz-nav .has-lg:is(.is-on,[aria-current])>.kgb-lg-host>.kgb-lg{box-shadow:0 0 0 1.5px #111,0 1px 3px var(--lg-drop)!important}
/* dark mode inverts the whole page, glass and all, which would turn the rim's light black. So: Glisse's
   dark-glass tint / edge / shine written as their light inverses (they invert back), the rim redrawn on
   ::before and turned back to white, and no drop shadow (inverted, it would glow). */
html[data-theme="dark"] body .kgb-lg{--lg-glass:#d7d7d79e;--lg-glass-active:#b9b9b99e;--lg-edge:#ffffff14;--lg-drop:transparent;--lg-rim-shine:.13;background-image:none!important}
html[data-theme="dark"] body .kgb-lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--lg-rim,none) 0 0/100% 100% no-repeat;filter:invert(1) hue-rotate(180deg)}
@media (prefers-reduced-transparency:reduce){html body .kgb-lg{--lg-glass:#fffffff0;--lg-glass-active:#f2f2f4f5}}
@media (prefers-reduced-motion:reduce){html body .has-lg,html body .has-lg.is-pressed{scale:none;transition:none}}

/* ===== home page: each garment fades up into place as it scrolls into view (yz.js puts .yz-fx on the
   grid, then .is-in on each tile). A fading tile is its own compositing group, so the photos' multiply
   would have nothing to darken and white photo backgrounds would flash: the photo box gets the page grey. */
.yz-grid.yz-fx .yz-tile{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.yz-grid.yz-fx .yz-tile.is-in{opacity:1;transform:none}
.yz-grid.yz-fx .yz-tile .ph{background:var(--bg)}
@media (prefers-reduced-motion:reduce){.yz-grid.yz-fx .yz-tile{opacity:1;transform:none;transition:none}}

/* ===== footer pinned to the bottom: the page is a full-height column, main takes the slack, so on a short page
   (an empty cart, a shop with few items) the footer sits on the bottom edge instead of under the content ===== */
body.yz,body.yz-dark{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.yz>main,body.yz-dark>main{flex:1 0 auto}
body.yz>.yz-foot,body.yz-dark>.yz-foot{flex-shrink:0;margin-top:auto}

/* ===== footer credit ===== */
.yz-credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ===== HQ → Store: the add-item form and the item list ===== */
.hq-store{margin:0 0 2.6rem}
.hq-add{margin:0 0 1.4rem;padding:18px;border-radius:22px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.hq-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-bottom:14px}
.hq-add-grid>label,.hq-add-sizes{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hq-add-grid .field-hint{text-transform:none;letter-spacing:.02em;font-weight:400}
.hq-add-wide{grid-column:1/-1}
.hq-add-sizes{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;border:0;padding:0;margin:0;min-width:0}
.hq-add-sizes legend{width:100%;margin-bottom:2px;padding:0}
.hq-add-sizes label{display:inline-flex;align-items:center;gap:6px}
html body.yz-legacy .hq-add input[type=checkbox]{width:16px;height:16px;padding:0!important;margin:0;border-radius:4px!important;
  box-shadow:none!important;background:none!important;accent-color:#111}
html body.yz-legacy .hq-add input[type=file]{border-radius:14px!important;padding:8px 12px!important;font-size:12px;text-transform:none;letter-spacing:0}
.hq-add textarea,.hq-add input:not([type=checkbox]):not([type=file]),.hq-add select{padding:10px 14px;font-size:13px;text-transform:none;letter-spacing:.02em}
.hq-thumb{width:52px;height:52px;object-fit:contain;display:block;mix-blend-mode:normal!important}
.hq-thumb.is-empty{display:grid;place-items:center;font-size:9px;color:var(--mute);border:1px dashed var(--line);border-radius:10px}
.hq-sub{color:var(--mute);font-size:.85em}
.hq-store-table td{vertical-align:middle}
#hqStoreList.is-busy{pointer-events:none;cursor:progress}
@media(max-width:640px){.hq-add-grid{grid-template-columns:1fr}}

/* ===== phones: the header menu folds into a glass menu button (theme.js adds it and .has-menu, so with no
   script the plain row stays). Tapping it drops every item — the pages and Cart — in one panel drawn the
   way Glisse draws its own Menu: the --lg-surface tint, a 22px blur, a
   hairline edge and a soft drop (frosted, not refracting, so the rows stay legible). In the panel the items are
   rows, not pills: their glass layers are hidden and the press swell is off. The logo never shrinks
   (.yz img{max-width:100%} used to collapse it to 0px). ===== */
.yz-head{gap:12px}
.yz-logo{flex:none}
.yz-logo img{max-width:none}
.yz-menu-btn{display:none}
@media(max-width:640px){
  .yz-head.has-menu{padding-top:11px;padding-bottom:11px}
  .yz-head.has-menu .yz-menu-btn{display:inline-grid;place-items:center;position:relative;flex:none;width:40px;height:40px;padding:0;border-radius:999px;color:#111;
    background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);transition:var(--glass-ease)}
  .yz-menu-btn i{position:absolute;left:13px;right:13px;top:50%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor;
    transition:transform .28s cubic-bezier(.3,0,.2,1)}
  .yz-menu-btn i:first-of-type{transform:translateY(-3.5px)}
  .yz-menu-btn i:last-of-type{transform:translateY(3.5px)}
  .yz-head.is-open .yz-menu-btn i:first-of-type{transform:rotate(45deg)}
  .yz-head.is-open .yz-menu-btn i:last-of-type{transform:rotate(-45deg)}
  html body .yz-head.has-menu .yz-nav{position:absolute;top:calc(100% - 4px);right:12px;width:220px;max-width:calc(100vw - 24px);
    flex-direction:column;align-items:stretch;gap:0;padding:6px;border-radius:20px;
    background:rgba(250,250,252,.86);-webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);
    box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 12px 40px rgba(25,25,35,.12)!important;
    opacity:0;visibility:hidden;transform:scale(.96);transform-origin:calc(100% - 20px) 0;
    transition:opacity .12s ease-out,transform .12s ease-out,visibility 0s .12s}
  html body .yz-head.has-menu.is-open .yz-nav{opacity:1;visibility:visible;transform:none;
    transition:opacity .16s ease-out,transform .24s cubic-bezier(.3,1.25,.5,1),visibility 0s}
  html body .yz-head.has-menu .yz-nav>a{display:flex;align-items:center;justify-content:flex-start;
    width:100%;min-height:42px;padding:10px 12px!important;border:0!important;border-radius:14px!important;font-size:12px;font-weight:600;text-align:left;
    background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body .yz-head.has-menu .yz-nav>:is(a,button):is(:active,:focus-visible){background:rgba(60,60,67,.09)!important}
  html body .yz-head.has-menu .yz-nav>:is(a,button):focus-visible{outline:2px solid rgba(0,0,0,.4);outline-offset:-2px}
  html body .yz-head.has-menu .yz-nav>.has-lg>.kgb-lg-host{display:none}
  html body .yz-head.has-menu .yz-nav>.has-lg.is-pressed{scale:none}
  /* dark mode inverts the page: Glisse's dark menu surface, edge and shadow, written as their light inverses */
  html[data-theme="dark"] body .yz-head.has-menu .yz-nav{background:rgba(227,227,224,.86);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.13),0 12px 40px rgba(255,255,255,.38)!important}
}
@media(max-width:640px) and (hover:hover){html body .yz-head.has-menu .yz-nav>:is(a,button):hover{background:rgba(60,60,67,.09)!important}}
@media(max-width:640px) and (prefers-reduced-motion:reduce){
  html body .yz-head.has-menu .yz-nav,html body .yz-head.has-menu.is-open .yz-nav{transform:none;transition:none}
  .yz-menu-btn i{transition:none}
}