@font-face{font-family:'Dela Gothic One';src:url(fonts/dela.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/sg-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/sg-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/sg-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/sg-800.woff2) format('woff2');font-weight:800;font-display:swap}
:root{color-scheme:dark;
  --void:#070707;--surface:#161616;--line:#333;--ink:#f8f8f8;--muted:#ababab;
  --pink:#f3298c;--pink-deep:#cb0b71;--green:#5af5a9;--on-green:#070707;
  --display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --r-lg:20px;--r-sm:6px;--z-sticky:10;--z-scrim:40;--z-drawer:50;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:400}

.preview-bar{background:var(--green);color:var(--on-green);text-align:center;font:700 13px/1.3 var(--sans);padding:8px 16px}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);background:rgba(7,7,7,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand img{width:clamp(130px,16vw,190px)}
.nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,28px);font-weight:700;font-size:15px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.cart-btn{font:800 15px var(--sans);background:var(--ink);color:var(--void);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;display:flex;gap:8px;align-items:center}
.count{background:var(--pink);color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:12px;padding:0 6px}
@media (max-width:560px){.nav a[href*="help"]{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font:800 16px var(--sans);border-radius:999px;padding:15px 28px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn.primary{background:var(--green);color:var(--on-green)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.wide{width:100%}

.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px) clamp(32px,5vw,64px);max-width:1320px;margin:0 auto}
.hero h1{font-family:var(--display);font-size:clamp(46px,7.4vw,104px);line-height:.94;letter-spacing:-.01em}
.pink{color:var(--pink)}
.lede{color:var(--muted);font-size:clamp(17px,1.6vw,20px);max-width:34em;margin:24px 0 32px}
.hero-art img{width:100%;max-width:520px;margin-left:auto;animation:shout 2.6s ease-in-out infinite}
@keyframes shout{0%,100%{transform:rotate(0) scale(1)}8%{transform:rotate(-3deg) scale(1.04)}16%{transform:rotate(2deg) scale(1.02)}24%{transform:rotate(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-art img{animation:none}.btn.primary:hover{transform:none}}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{order:-1}.hero-art img{max-width:300px;margin:0 auto}}

.strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.strip p{margin:0;padding:18px clamp(16px,3vw,32px);color:var(--muted);font-size:15px}
.strip p+p{border-left:1px solid var(--line)}
.strip strong{color:var(--ink)}
@media (max-width:700px){.strip{grid-template-columns:1fr}.strip p+p{border-left:0;border-top:1px solid var(--line)}}

.shop,.related{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
.shop h2,.related h2{font-family:var(--display);font-size:clamp(32px,4.4vw,56px);line-height:.98;margin-bottom:24px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:700 14px var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.sep{width:1px;height:24px;background:var(--line);margin:0 6px}
.result{color:var(--muted);font-size:14px;margin:18px 0 20px}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(16px,2vw,24px)}
.grid.four{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card a{text-decoration:none;display:block}
.ph{background:var(--surface);border-radius:var(--r-lg);padding:18px 14px 6px;overflow:hidden;transition:background .2s ease}
.ph img{transition:transform .25s ease}
.card a:hover .ph{background:#1f1f1f}
.card a:hover .ph img{transform:scale(1.04) rotate(-1deg)}
.tag{display:inline-block;margin-top:12px;font:700 12px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.card h3{font:800 17px/1.3 var(--sans);margin-top:4px}
.price{margin:4px 0 0;color:var(--muted);font-weight:500}
.card[hidden]{display:none}

.crumbs{max-width:1320px;margin:0 auto;padding:24px clamp(16px,4vw,48px) 0;color:var(--muted);font-size:14px}
.crumbs a{color:var(--muted)}
.pdp{max-width:1320px;margin:0 auto;padding:16px clamp(16px,4vw,48px) 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:start}
.pdp-img{background:var(--surface);border-radius:var(--r-lg);padding:clamp(16px,3vw,40px);position:sticky;top:96px}
.pdp-info h1{font-family:var(--display);font-size:clamp(32px,3.8vw,52px);line-height:1;margin-top:8px}
.big-price{font:800 26px var(--sans);margin:16px 0 8px}
.hook{font-size:19px;color:var(--ink);margin:0 0 24px}
fieldset{border:0;padding:0;margin:0 0 20px}
legend{font:700 14px var(--sans);color:var(--muted);margin-bottom:10px}
.swatch{display:inline-flex;align-items:center;gap:8px;margin-right:18px;font-weight:700;cursor:pointer}
.swatch input,.size input{position:absolute;opacity:0;pointer-events:none}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line)}
.sw.black{background:#1d1d1f}.sw.white{background:#eeeeec}
.swatch input:checked+.sw{box-shadow:0 0 0 3px var(--void),0 0 0 5px var(--green)}
.swatch input:focus-visible+.sw,.size input:focus-visible+span{outline:3px solid var(--green);outline-offset:3px}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size span{display:grid;place-items:center;min-width:54px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);font-weight:700;cursor:pointer;background:var(--surface)}
.size input:checked+span{background:var(--ink);color:var(--void);border-color:var(--ink)}
.added{min-height:24px;color:var(--green);font-weight:700;margin:12px 0 0}
.facts{list-style:none;padding:20px 0 0;margin:20px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--muted)}
.facts li::before{content:"\2715";color:var(--pink);margin-right:10px;font-size:12px}
.more{color:var(--muted);font-size:15px;margin-top:20px}
@media (max-width:820px){.pdp{grid-template-columns:1fr}.pdp-img{position:static}}

.help{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
.help h1{font-family:var(--display);font-size:clamp(36px,5vw,60px);line-height:1;margin-bottom:12px}
.help h2{font:800 20px var(--sans);margin:32px 0 6px}
.help p{color:var(--muted);margin:0}
.help a{color:var(--green)}

.foot{border-top:1px solid var(--line);padding:40px clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;color:var(--muted)}
.foot p{margin:0}.fine{font-size:13px;flex-basis:100%}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-scrim)}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--surface);z-index:var(--z-drawer);border-left:1px solid var(--line);animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer-in{display:flex;flex-direction:column;height:100%}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--display);font-size:26px}
.x{background:none;border:0;color:var(--ink);font-size:32px;line-height:1;cursor:pointer;padding:4px 8px}
[data-cart-items]{flex:1;overflow:auto;padding:8px 24px}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line img{border-radius:10px;background:var(--void)}
.line h3{font:800 15px/1.3 var(--sans)}
.line p{margin:2px 0 0;color:var(--muted);font-size:14px}
.qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--void);color:var(--ink);cursor:pointer;font-weight:800}
.empty{color:var(--muted);padding:24px 0}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--line)}
.sub{display:flex;justify-content:space-between;margin:0 0 14px;font-size:17px}
.note{color:var(--muted);font-size:14px;margin:12px 0 0}
.shop{scroll-margin-top:72px}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.type input{position:absolute;opacity:0;pointer-events:none}
.type span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-weight:800;cursor:pointer}
.type small{font-weight:500;color:var(--muted);font-size:13px}
.type input:checked+span{background:var(--ink);color:var(--void);border-color:var(--ink)}
.type input:checked+span small{color:var(--void)}
.type input:focus-visible+span{outline:3px solid var(--green);outline-offset:3px}
.mug-note{color:var(--muted);margin:0 0 20px}
.kinds{display:block;font-size:13px;color:var(--muted);opacity:.85}
.group{margin-top:20px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--muted);font-size:15px}
.group strong{color:var(--ink)}
.group .em{color:var(--green);user-select:all}