/* CRIMINAL IL store — night showroom. Navy ink, one electric blue, angular cuts taken from the logo. */
:root{
  --ink: oklch(15% 0.035 262);
  --ink-2: oklch(19.5% 0.045 262);
  --ink-3: oklch(25% 0.055 262);
  --line: oklch(33% 0.06 262);
  --fg: oklch(96% 0.012 262);
  --muted: oklch(76% 0.035 262);
  --blue: oklch(56% 0.215 263);
  --blue-deep: oklch(36% 0.17 263);
  --blue-hi: oklch(68% 0.18 258);
  --hot: oklch(63% 0.22 25);
  --danger: oklch(70% 0.19 25);
  --cut: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  --font: "Rubik","Segoe UI",Arial,sans-serif;
  --num: "Barlow Condensed","Rubik",sans-serif;
  --z-sticky: 20; --z-overlay: 30; --z-drawer: 40;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font:400 16px/1.65 var(--font)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--blue);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{top:8px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.num{font-family:var(--num);font-weight:700;direction:ltr;unicode-bidi:isolate;letter-spacing:.01em}
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}

/* header */
.top{position:sticky;top:0;z-index:var(--z-sticky);background:var(--ink);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--num);font-weight:700;letter-spacing:.08em;font-size:22px;flex:none;direction:ltr}
.brand img{height:40px;width:auto}
.brand span span{color:var(--blue-hi)}
#nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
#nav a{color:var(--muted);padding:8px 14px;white-space:nowrap;font-size:15px;font-weight:500;border-bottom:2px solid transparent}
#nav a:hover{color:var(--fg)}
#nav a.on{color:var(--fg);border-bottom-color:var(--blue-hi)}
.cart-btn{background:var(--ink-2);border:0;box-shadow:inset 0 0 0 1px var(--line);padding:9px 18px;flex:none;font-weight:500;--cut:9px}
.cart-btn{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.cart-btn:hover{background:var(--ink-3)}
.cart-btn b{font-family:var(--num);background:var(--blue);color:#fff;padding:0 8px;margin-inline-start:6px;font-size:15px}
.acct{flex:none}
.me{display:flex;align-items:center;gap:8px;font-size:14px}
.me img{width:30px;height:30px;border-radius:50%;background:var(--ink-3)}
.me a{color:var(--muted);font-size:13px}
.me a:hover{color:var(--fg)}

/* buttons */
.btn{display:inline-block;border:0;background:var(--ink-3);color:var(--fg);padding:12px 26px;font-weight:600;text-align:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--ease),transform .2s var(--ease);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn:hover{background:var(--line)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--blue-hi)}
.btn.discord{background:#5865f2;color:#fff;box-shadow:none;padding:9px 18px}
.btn.discord:hover{background:#6b77f5}
.btn.block{display:block;width:100%}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg i{position:absolute;top:0;bottom:0}
.hero-bg .f1{left:0;width:64%;background:var(--blue-deep);clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
.hero-bg .f2{left:0;width:46%;background:var(--blue);clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
.hero-bg .f3{left:34%;width:14%;background:var(--ink);opacity:.35;clip-path:polygon(60% 0,100% 0,40% 100%,0 100%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:min(640px,86vh);padding-block:64px}
.kick{color:var(--blue-hi);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kick::before{content:"";width:28px;height:3px;background:var(--blue-hi)}
h1{font-size:clamp(40px,6.2vw,84px);line-height:1.02;font-weight:800;margin-bottom:20px;text-wrap:balance}
h1 em{font-style:normal;color:var(--blue-hi)}
.lead{color:var(--muted);font-size:18px;max-width:46ch;margin-bottom:30px;text-wrap:pretty}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-car{position:relative}
.car-frame{position:relative;aspect-ratio:16/11;background:var(--ink-2);--cut:34px;box-shadow:inset 0 0 0 1px var(--line)}
.car-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:car-in .7s var(--ease)}
@keyframes car-in{from{transform:scale(1.06)}to{transform:none}}
.car-meta{position:absolute;inset-inline:0;bottom:0;background:var(--ink);padding:14px 18px 14px 22px;display:flex;align-items:center;gap:14px;justify-content:space-between;--cut:20px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.car-name{font-family:var(--num);font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:.04em;text-transform:uppercase;direction:ltr;line-height:1.1}
.car-meta .num{font-size:30px}
.car-meta .btn{padding:9px 18px;font-size:15px}
.car-pick{display:flex;gap:10px;margin-top:14px}
.car-pick button{flex:1;display:flex;align-items:center;gap:10px;background:var(--ink-2);border:0;padding:6px;box-shadow:inset 0 0 0 1px var(--line);text-align:start;color:var(--muted);font-size:14px;transition:background .2s}
.car-pick button img{width:64px;height:42px;object-fit:cover}
.car-pick button[aria-pressed="true"]{background:var(--ink-3);color:var(--fg);box-shadow:inset 0 0 0 2px var(--blue-hi)}

/* sections */
section{padding-block:clamp(40px,6vw,76px)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:800;text-wrap:balance}
.sub{color:var(--muted);margin-top:6px}
.more{color:var(--blue-hi);font-weight:600}
.more:hover{color:var(--fg)}
.crumbs{color:var(--muted);font-size:14px;margin-bottom:16px}
.crumbs a:hover{color:var(--fg)}
.crumbs span{margin-inline:6px}
.empty{color:var(--muted);padding:30px 0}

/* bento categories */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(230px,auto);gap:14px}
.tile{position:relative;overflow:hidden;background:var(--ink-2);display:flex;align-items:flex-end;min-height:230px;box-shadow:inset 0 0 0 1px var(--line);--cut:22px}
.tile.packs{grid-column:span 2;grid-row:span 2}
.tile.gift{grid-column:span 4;min-height:120px}
.tile-bg{position:absolute;inset:0}
.tile-bg>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .tile-bg>img{transform:scale(1.05)}
.tile-bg.facets{background:var(--blue-deep)}
.tile-bg.facets i{position:absolute;inset:0}
.tile-bg.facets .a{background:var(--blue);clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}
.tile-bg.facets .b{background:var(--ink-3);opacity:.55;clip-path:polygon(0 0,34% 0,0 100%)}
.tile-bg.facets img{position:absolute;inset-block:14% auto;inset-inline-end:8%;height:52%;width:auto;opacity:.9}
.tile-in{position:relative;width:100%;padding:18px 20px;background:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px;transition:background .2s}
.tile:hover .tile-in{background:var(--blue-deep)}
.tile-in h3{font-size:20px;font-weight:700;line-height:1.2}
.tile-in small{color:var(--muted);display:block;font-size:13px}
.tile:hover .tile-in small{color:var(--fg)}
.tile-n{font-family:var(--num);font-size:30px;color:var(--blue-hi);font-weight:700;flex:none}
.tile:hover .tile-n{color:#fff}
.tile.packs .tile-in h3{font-size:28px}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{position:relative;background:var(--ink-2);display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line);--cut:18px;transition:background .25s var(--ease)}
.card:hover{background:var(--ink-3)}
.card-media{position:relative;display:block;aspect-ratio:16/11;background:var(--ink-3);overflow:hidden}
.card-media>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-media>img{transform:scale(1.04)}
.save{position:absolute;top:12px;inset-inline-start:12px;background:var(--hot);color:#fff;font-size:13px;font-weight:700;padding:3px 12px}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tag{color:var(--blue-hi);font-size:13px;font-weight:600}
.card h3{font-size:20px;font-weight:700;line-height:1.25}
.card h3 a:hover{color:var(--blue-hi)}
.card p{color:var(--muted);font-size:14px}
.incl{list-style:none;padding:0;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:2px}
.incl li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--blue-hi);margin-inline-end:10px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:rotate(45deg) scale(.8)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.price{font-family:var(--num);font-size:30px;font-weight:700;line-height:1;direction:ltr;unicode-bidi:isolate}
.price s{color:var(--muted);font-size:17px;font-weight:500;margin-inline-start:10px}
.price.big{font-size:44px}
.card-foot .btn{padding:9px 18px;font-size:15px}

/* featured pack */
.feature{display:grid;grid-template-columns:1.1fr 1fr;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);--cut:34px;margin-bottom:20px}
.feature-media{aspect-ratio:16/10;background:var(--ink-3);overflow:hidden}
.feature-media>*{height:100%}
.feature-info{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.feature-info h3{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.1}
.feature-info p{color:var(--muted)}
.feature .save{position:static;display:inline-block;align-self:flex-start}

/* community band */
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.band-in{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:clamp(20px,4vw,56px);align-items:center}
.band h3{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:8px}
.goal-n{font-family:var(--num);font-size:34px;font-weight:700;direction:ltr;text-align:right;line-height:1}
.goal-n small{color:var(--muted);font-size:18px;font-weight:500}
.bar{height:8px;background:var(--ink-3);margin-top:12px}
.bar i{display:block;height:100%;background:var(--blue-hi)}
.donor{font-family:var(--num);font-size:34px;font-weight:700;direction:ltr;text-align:right;line-height:1}
.ticker{direction:ltr;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:28px;animation:tick 28s linear infinite}
.ticker span{font-family:var(--num);font-size:22px;font-weight:500;color:var(--muted)}
.ticker span::before{content:"◆";color:var(--blue-hi);font-size:11px;margin-inline-end:12px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

/* steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s}
.steps li{padding:8px 28px 8px 0;border-inline-start:1px solid var(--line);padding-inline-start:28px}
.steps li:first-child{border-inline-start:0;padding-inline-start:0}
.steps b{display:block;font-family:var(--num);font-size:64px;line-height:1;color:var(--blue-hi);font-weight:700;margin-bottom:8px}
.steps span{color:var(--muted);font-size:17px;display:block;max-width:28ch}

/* category + product pages */
.page-head{background:var(--blue-deep);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-head::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:34%;background:var(--blue);clip-path:polygon(0 0,100% 0,60% 100%,0 100%)}
.page-head .wrap{position:relative;z-index:1;padding-block:44px 40px}
.page-head .crumbs{color:oklch(86% 0.04 262)}
.page-head h2{font-size:clamp(34px,5vw,60px)}
.page-head .sub{color:oklch(88% 0.04 262);font-size:18px}
.detail{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.detail-media{aspect-ratio:16/11;background:var(--ink-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);--cut:34px}
.detail-media>*{height:100%}
.detail-media>img{width:100%;object-fit:cover}
.detail-info{display:flex;flex-direction:column;gap:12px}
.detail-info h2{font-size:clamp(30px,4vw,52px)}
.detail-info>p{color:var(--muted);font-size:17px}
.detail-info h4{font-size:15px;color:var(--muted);font-weight:600;margin-top:6px}
.incl.big{gap:6px}
.incl.big li{display:flex;justify-content:space-between;align-items:center;background:var(--ink-2);padding:12px 16px;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.incl.big li::before{content:none}
.incl.big a:hover{color:var(--blue-hi)}
.incl.big .num{font-size:20px}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.specs div{background:var(--ink-2);padding:10px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.specs small{display:block;color:var(--muted);font-size:13px}
.detail .card-foot{margin-top:12px;padding-top:18px;border-top:1px solid var(--line)}
.detail .card-foot .btn{padding:14px 34px;font-size:17px}
details{background:var(--ink-2);padding:16px 20px;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--line)}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin-top:8px}

/* placeholder (no photo yet) */
.ph{width:100%;height:100%;position:relative;background:var(--blue-deep);overflow:hidden}
.ph i{position:absolute;inset:0}
.ph .a{background:var(--blue);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}
.ph .b{background:var(--ink);opacity:.4;clip-path:polygon(0 0,30% 0,0 100%)}
.ph img{position:absolute;inset-block:18% auto;inset-inline-end:10%;height:46%;width:auto}
.ph span{position:absolute;inset-inline-start:14px;bottom:10px;font-size:13px;color:oklch(92% 0.03 262);font-weight:500}
.collage{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;gap:3px}
.collage img:first-child{grid-row:span 2}
.collage img{width:100%;height:100%;object-fit:cover}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:14px;margin-top:20px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.foot-brand{display:flex;align-items:center;gap:14px;color:var(--fg)}
.foot-brand img{height:48px;width:auto}
.foot-brand small{display:block;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot-links a:hover{color:var(--fg)}
.foot-note{flex:1 0 100%}

/* cart */
.overlay{position:fixed;inset:0;background:oklch(10% 0.03 262 / .72);z-index:var(--z-overlay)}
.overlay[hidden]{display:none}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(420px,100%);background:var(--ink);border-right:1px solid var(--line);visibility:hidden;z-index:var(--z-drawer);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s var(--ease),visibility .3s}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:20px}
.drawer-head button{background:none;border:0;font-size:20px;color:var(--muted)}
.drawer-body{flex:1;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:var(--ink-2);padding:8px;box-shadow:inset 0 0 0 1px var(--line)}
.line-media{width:84px;height:58px;overflow:hidden}
.line-media>img{width:100%;height:100%;object-fit:cover}
.line-media .ph span{display:none}
.line-media .ph img{height:60%;inset-block:20% auto}
.line small{color:var(--muted)}
.line button{background:none;border:0;color:var(--danger);font-size:13px}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.who{background:var(--ink-2);padding:12px 14px;font-size:14px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.who b{color:var(--fg)}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:18px}
.total b{font-family:var(--num);font-size:32px}
.note{font-size:13px;color:var(--muted);min-height:1.2em}
.note.err{color:var(--danger)}

@media (max-width:960px){
  .hero-bg .f1{width:100%;clip-path:polygon(0 56%,100% 40%,100% 100%,0 100%)}
  .hero-bg .f2,.hero-bg .f3{display:none}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-block:40px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .top-in{flex-wrap:wrap;height:auto;padding-block:10px}
  #nav{order:5;flex:1 0 100%}
  .acct{margin-inline-start:auto}
  .tile.packs{min-height:300px}
  .tile.packs{grid-column:span 2;grid-row:span 1}
  .tile.gift{grid-column:span 2}
  .feature,.detail{grid-template-columns:1fr}
  .band-in{grid-template-columns:1fr 1fr}
  .band-in .ticker{grid-column:span 2}
  .steps{grid-template-columns:1fr;gap:20px}
  .steps li{border-inline-start:0;padding-inline-start:0}
}
@media (max-width:640px){
  .top-in{gap:10px;flex-wrap:wrap;height:auto;padding-block:10px}
  #nav{order:5;flex:1 0 100%}
  .acct{margin-inline-start:auto}
  .me span{display:none}
  .bento{grid-template-columns:1fr}
  .tile.packs,.tile.gift{grid-column:auto}
  .car-meta{flex-wrap:wrap}
  .car-pick button img{width:48px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ticker{overflow-x:auto}
}
.band-in>div{min-width:0}
.collage.c2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.collage.c2 img:first-child{grid-row:auto}
.cart-btn{display:inline-flex;align-items:center;gap:8px}
.cart-btn .ico{flex:none;color:var(--blue-hi)}
.drawer-head h3{display:flex;align-items:center;gap:10px}
.drawer-head .ico{color:var(--blue-hi)}
.empty-cart{margin:auto;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);text-align:center}
.empty-cart .ico{color:var(--line);width:72px;height:72px}
.total b{direction:ltr;unicode-bidi:isolate}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.toolbar input,.toolbar select{background:var(--ink-2);color:var(--fg);border:0;box-shadow:inset 0 0 0 1px var(--line);padding:11px 14px;font:inherit;min-width:0}
.toolbar input{flex:1 1 220px;max-width:360px}
.toolbar input:focus,.toolbar select:focus{outline:2px solid var(--blue-hi)}
.sort{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.count{margin-inline-start:auto;color:var(--muted);font-size:14px}
/* related + in packs */
.rel{padding-top:0}
.rel h2{font-size:26px;margin-bottom:18px}
.inpacks{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.inpacks h4{font-size:15px;color:var(--muted);font-weight:600}
.inpacks a{display:flex;justify-content:space-between;background:var(--ink-2);padding:10px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.inpacks a:hover{background:var(--ink-3)}
.inpacks .num{color:var(--blue-hi)}
/* toast */
.toast{position:fixed;inset-inline:0;bottom:22px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:50;background:var(--blue);color:#fff;display:flex;align-items:center;gap:16px;padding:12px 18px;transform:translateY(160%);transition:transform .35s var(--ease);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.toast.show{transform:none}
.toast button{background:var(--ink);border:0;color:#fff;padding:6px 14px;font-weight:600}
.car-pick{gap:8px}
.car-pick button{padding:4px}
.car-pick button img{width:100%;height:auto;aspect-ratio:16/10}