/* LA Skate Co — base tokens + commerce components (Route 66 Ends Here) */
:root{
  --asphalt:#1a1815; --asphalt-2:#26221d; --asphalt-3:#322d26;
  --primer:#f2ede2; --primer-dim:#b9b2a4;
  --smog:#e9a83b; --smog-pale:#f4d99b;
  --caltrans:#1d6a4f; --roadpaint:#e8e3d4;
  --shopred:#d0311e; --shopred-deep:#9c2416;
  --font-sign:"Oswald","Arial Narrow",sans-serif;
  --font-road:"Overpass","Helvetica Neue",sans-serif;
  --font-tag:"Overpass Mono",ui-monospace,monospace;
  --t-hero:clamp(4.5rem,22vw,22rem);
  --t-street:clamp(2.2rem,8vw,7.5rem);
  --t-sign:clamp(1.25rem,3vw,2.4rem);
  --t-body:clamp(1rem,1.1vw,1.125rem);
  --t-tag:clamp(.72rem,.9vw,.85rem);
  --s1:.5rem;--s2:1rem;--s3:2rem;--s4:4rem;--s5:8rem;
  --ease-push:cubic-bezier(.16,1,.3,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-land:cubic-bezier(.22,.9,.32,1.04);
  --d-fast:.28s;--d-med:.6s;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--asphalt);color:var(--primer);font-family:var(--font-road);font-size:var(--t-body);line-height:1.65;overflow-x:hidden}
::selection{background:var(--smog);color:var(--asphalt)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--smog);outline-offset:3px}
img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--caltrans);color:var(--primer);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* ---- wayfinding nav (page variant: solid) ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:calc(env(safe-area-inset-top) + .8rem) 1.4rem .8rem;pointer-events:none}
.nav.solid{background:linear-gradient(180deg,rgba(26,24,21,.92),rgba(26,24,21,.75) 70%,transparent);}
.nav a{pointer-events:auto;text-decoration:none}
.nav .mark{font-family:var(--font-sign);font-weight:600;font-size:1.05rem;letter-spacing:.14em}
.nav .links{display:flex;gap:.6rem;align-items:center;pointer-events:auto}
.plate-btn{display:inline-block;white-space:nowrap;font-family:var(--font-tag);font-size:var(--t-tag);letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--roadpaint);padding:.55rem .9rem;background:rgba(26,24,21,.55);color:var(--primer);cursor:pointer;
  transition:transform .18s var(--ease-push),box-shadow .18s,background .18s;box-shadow:0 3px 0 rgba(0,0,0,.45);text-decoration:none}
.plate-btn:hover{background:var(--caltrans)}
.plate-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.plate-btn.red{background:var(--shopred);border-color:var(--smog-pale)}
.plate-btn.red:hover{background:var(--shopred-deep)}
.cart-count{display:inline-block;min-width:1.3em;text-align:center;background:var(--shopred);border-radius:2px;padding:0 .2em;margin-left:.4em}

/* ---- commerce ---- */
.shop-wrap{max-width:1480px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6rem) 4vw 6rem}
.shop-head{display:flex;flex-wrap:wrap;align-items:end;gap:1.2rem;justify-content:space-between;margin-bottom:2.2rem}
.shop-head h1{font-family:var(--font-sign);font-weight:600;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5rem);line-height:.9}
.shop-head .mile{font-family:var(--font-tag);font-size:var(--t-tag);letter-spacing:.18em;color:var(--caltrans)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;align-items:center}
.chip{font-family:var(--font-tag);font-size:var(--t-tag);letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--asphalt-3);
  background:transparent;color:var(--primer-dim);padding:.5rem .85rem;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--roadpaint);color:var(--primer)}
.chip[aria-pressed="true"]{background:var(--caltrans);border-color:var(--caltrans);color:var(--primer)}
.filters select,.filters input[type=search]{font-family:var(--font-tag);font-size:var(--t-tag);letter-spacing:.08em;background:var(--asphalt-2);
  color:var(--primer);border:2px solid var(--asphalt-3);padding:.5rem .7rem;min-height:44px}
.filters input[type=search]{flex:1;min-width:180px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.pcard{background:var(--asphalt-2);border:1px solid var(--asphalt-3);text-decoration:none;display:flex;flex-direction:column;
  transition:transform .25s var(--ease-push),box-shadow .25s;transform-style:preserve-3d;position:relative}
.pcard:hover{transform:perspective(700px) rotateY(4deg) translateY(-4px);box-shadow:-14px 18px 34px rgba(0,0,0,.45)}
.pcard .ph{aspect-ratio:1;background:var(--primer);display:grid;place-items:center;overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcard .meta{padding:.9rem .9rem 1rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.pcard .vend{font-family:var(--font-tag);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--primer-dim)}
.pcard .name{font-size:.95rem;line-height:1.35;font-weight:600}
.pcard .price{font-family:var(--font-tag);color:var(--shopred);margin-top:auto;padding-top:.4rem}
.pcard .price s{color:var(--primer-dim);margin-left:.5em}
.count-note{font-family:var(--font-tag);font-size:var(--t-tag);color:var(--primer-dim);letter-spacing:.12em;margin:1rem 0 0}

/* cart drawer */
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity var(--d-fast)}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--asphalt);border-left:2px solid var(--roadpaint);
  transform:translateX(102%);transition:transform var(--d-fast) var(--ease-push);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 1.2rem) 1.2rem calc(env(safe-area-inset-bottom) + 1.2rem)}
.drawer.open{pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.drawer h2{font-family:var(--font-sign);text-transform:uppercase;font-weight:600;font-size:1.6rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}
.drawer .items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.citem{display:grid;grid-template-columns:72px 1fr auto;gap:.9rem;align-items:center;border:1px solid var(--asphalt-3);padding:.6rem;background:var(--asphalt-2)}
.citem img{width:72px;height:72px;object-fit:contain;background:var(--primer)}
.citem .t{font-size:.85rem;line-height:1.3;font-weight:600}
.citem .v{font-family:var(--font-tag);font-size:.7rem;color:var(--primer-dim)}
.citem .qty{display:flex;align-items:center;gap:.45rem;margin-top:.3rem}
.citem .qty button{width:28px;height:28px;background:var(--asphalt-3);color:var(--primer);border:0;cursor:pointer;font-size:1rem}
.citem .rm{background:none;border:0;color:var(--primer-dim);cursor:pointer;font-family:var(--font-tag);font-size:.7rem;letter-spacing:.1em;text-decoration:underline}
.citem .p{font-family:var(--font-tag);color:var(--shopred)}
.drawer .foot{border-top:2px dashed var(--asphalt-3);padding-top:1rem;margin-top:1rem}
.drawer .total{display:flex;justify-content:space-between;font-family:var(--font-tag);margin-bottom:.9rem}
.drawer .total b{color:var(--shopred)}
.btn-buy{display:block;width:100%;text-align:center;font-family:var(--font-sign);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.1rem;background:var(--shopred);color:var(--primer);border:2px solid var(--smog-pale);padding:.9rem;cursor:pointer;text-decoration:none;
  transition:transform .15s var(--ease-push),box-shadow .15s;box-shadow:0 4px 0 var(--shopred-deep)}
.btn-buy:hover{filter:brightness(1.07)}
.btn-buy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shopred-deep)}
.btn-buy[disabled]{opacity:.45;pointer-events:none}
.drawer .note{font-family:var(--font-tag);font-size:.68rem;color:var(--primer-dim);letter-spacing:.06em;margin-top:.7rem;line-height:1.5}
.drawer .empty{color:var(--primer-dim);text-align:center;margin-top:3rem;font-family:var(--font-tag);letter-spacing:.1em}

/* footer */
.foot-sign{border-top:2px solid var(--asphalt-3);margin-top:5rem;padding:4rem 4vw calc(env(safe-area-inset-bottom) + 3rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;background:var(--asphalt-2)}
.foot-sign h3{font-family:var(--font-tag);font-size:var(--t-tag);letter-spacing:.2em;color:var(--caltrans);text-transform:uppercase;margin-bottom:.9rem}
.foot-sign h3.gold{color:var(--smog)}
.foot-sign p,.foot-sign a{font-size:.95rem;color:var(--primer-dim);text-decoration:none;line-height:1.8}
.foot-sign a:hover{color:var(--primer)}
.foot-sign ul{list-style:none}
.foot-sign .big{font-family:var(--font-sign);font-weight:600;font-size:1.5rem;color:var(--primer);text-transform:uppercase;line-height:1.15}
.foot-legal{grid-column:1/-1;border-top:1px dashed var(--asphalt-3);padding-top:1.4rem;font-family:var(--font-tag);font-size:.68rem;
  letter-spacing:.12em;color:var(--primer-dim);display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between}
@media (max-width:768px){
  .shop-wrap{padding-top:calc(env(safe-area-inset-top) + 5rem)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .pcard:hover{transform:none}
}