@font-face{font-family:"Chomsky";src:url(fonts/Chomsky.woff2) format("woff2");font-weight:100 900;font-display:swap}   /* OFL, one weight: the range stops faux bold */
/* Night garage: black floor, warm headliner white, the shop Regal's champagne paint as the one accent, taillamp red only for info we still need.
   Chakra Petch for headings, labels and buttons: its cut-corner letters match the cut-corner plaques. Instrument Sans for reading.
   Chomsky (newspaper masthead blackletter) only for the name and ride names, the Old English of car-club plaques. */
:root{
  --bg:#0c0a09; --panel:#14110e; --raise:#1b1714; --line:#2b2520;
  --edge:#6f6356;      /* control borders, 3:1 or better on bg and raise */
  --ink:#efe7da; --muted:#a99d8b;
  --paint:#c9ad78; --on-paint:#0c0a09;
  --red:#ff8f80; --red-bg:#3a1512;
  --go:#7fcf8e; --low:#f0c35a;   /* stock: in stock, only a few left */
  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --black:"Chomsky","Old English Text MT",serif;
  --hh:56px; --top:calc(var(--hh) + env(safe-area-inset-top,0px));
  --cut:10px;
  --ease:cubic-bezier(.16,1,.3,1);   /* fast start, soft stop */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;touch-action:manipulation}   /* no double-tap zoom on iPhone; pinch zoom still works */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 64px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--body);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
a[href],button:not(:disabled),label,select,input[type=radio]{cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:8px;top:8px;z-index:60;padding:12px 16px;background:var(--paint);color:var(--on-paint);transform:translateY(-300%)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* the cut corner from the plaques, on buttons, tiles and tags. Clipping hides outlines, so focus becomes an inner ring */
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:clip-path .2s}
.cut:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 4px var(--ink)}

h2{font:700 clamp(2rem,7.5vw,3.6rem)/1 var(--display);letter-spacing:-.01em;text-wrap:balance}
h3{font:600 1.1rem/1.2 var(--display)}
.lead{font-size:1.1rem;color:var(--muted);max-width:36rem;text-wrap:pretty}
.label{font:600 .9rem/1.3 var(--display);color:var(--muted)}
.need{display:inline-block;padding:2px 7px;background:var(--red-bg);color:var(--red);font:600 .82rem/1.35 var(--display)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;background:var(--paint);color:var(--on-paint);
  font:700 1rem/1.1 var(--display);text-decoration:none;text-align:center;transition:clip-path .2s,transform .1s,filter .15s}
@media (hover:hover){.btn:hover{--cut:15px;filter:brightness(1.08)}}   /* hover deepens the cut */
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--raise);color:var(--paint)}
.btn:disabled{opacity:.4;filter:none;transform:none}

/* header: burger, cart, the name lands top right */
.hdr{position:fixed;inset:0 0 auto;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:2px;height:var(--hh)}
.icon-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--ink);transition:color .15s,transform .1s}
@media (hover:hover){.icon-btn:hover{color:var(--paint)}}
.icon-btn:active{transform:scale(.93)}
.burger{margin-left:-12px}
.bars{display:grid;gap:6px;width:24px}
.bars i{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* cart: open-top basket, the count sits inside it. Two digits at most, so it stops at 99 */
.cart{width:52px}
.cart svg{width:36px;height:32px;overflow:visible}
.cart .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.cart text{fill:currentColor;font:700 15px var(--display);font-variant-numeric:tabular-nums;text-anchor:middle}
.cart text.two{font-size:12px;letter-spacing:-.6px}
.brand{margin-left:auto;padding-block:12px;font:700 1.35rem/1 var(--black);text-decoration:none;opacity:0;visibility:hidden}
.brand.on{opacity:1;visibility:visible}

/* menu */
.menu{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:29;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s linear .4s}
.menu[data-open="true"]{clip-path:inset(0);visibility:visible;transition:clip-path .4s var(--ease)}
@media (min-width:760px){.menu{bottom:auto;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.menu,.menu[data-open="true"]{transition:none}}
.menu-in{display:grid;gap:36px;padding-block:16px 40px}
@media (min-width:760px){.menu-in{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;padding-block:24px 48px}}
.menu-main a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:12px;border-bottom:1px solid var(--line);text-decoration:none;
  font:700 1.9rem/1.1 var(--display);transition:color .15s,padding .2s}
@media (hover:hover){.menu-main a:hover{color:var(--paint);padding-left:8px}}
.menu-main small{font:600 .88rem/1.3 var(--display);color:var(--muted);white-space:nowrap}
.ride-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:6px}
.ride-links a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding-block:6px;border-bottom:1px solid var(--line);text-decoration:none}
.ride-links .rn{font:700 1.15rem/1.1 var(--black);color:var(--paint)}
.ride-links .rm{font:600 .85rem/1.3 var(--display);color:var(--muted)}
.ride-links .rt{display:none}
.garage{margin-top:12px;color:var(--muted)}
body:has(.menu[data-open="true"]) .title-layer{opacity:0}
/* open menu: the champagne paint, with the header joining it */
.menu{background:var(--paint);color:var(--on-paint)}
.menu .menu-main a,.menu .ride-links a{border-bottom-color:rgba(12,10,9,.22)}
.menu .menu-main small,.menu .label,.menu .ride-links .rm,.menu .garage{color:#3a2f22}
.menu .ride-links .rn{color:var(--on-paint)}
.menu :focus-visible{outline-color:var(--on-paint)}
@media (hover:hover){.menu .menu-main a:hover{color:var(--on-paint)}.menu .ride-links a:hover .rn{text-decoration:underline}}
.hdr{transition:background .3s var(--ease),border-color .3s var(--ease)}
body:has(.menu[data-open="true"]) .hdr{background:var(--paint);border-bottom-color:rgba(12,10,9,.22)}
body:has(.menu[data-open="true"]) .hdr :is(.icon-btn,.brand){color:var(--on-paint)}
body:has(.menu[data-open="true"]) .hdr :focus-visible{outline-color:var(--on-paint)}

/* hero: the shop car in blocks. Scroll: name flies to the bar, camera rises, roof lifts, hood and trunk open, camera drops in full screen, parts become buttons */
main{padding-top:var(--top)}
.hero{position:relative;height:460svh}
.stage{position:sticky;top:var(--top);height:calc(100svh - var(--top));overflow:hidden;
  background:radial-gradient(ellipse 75% 40% at 50% 62%,rgba(201,173,120,.12),transparent 70%),var(--bg)}
#car{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.title-layer{position:fixed;left:0;right:0;top:calc(var(--top) + 22px);z-index:35;pointer-events:none;transition:opacity .2s}
h1{display:inline-block;font:700 clamp(2.4rem,10.5vw,6.4rem)/.95 var(--black);white-space:nowrap}
h1 .ch,.brand .ch{display:inline-block}
h1 .ch{transform-origin:0 0;will-change:transform}
.lede{margin-top:12px;max-width:22rem;color:var(--muted)}
.hint{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:14px 18px}
.hint p{font:600 .95rem/1.3 var(--display);color:var(--muted)}
.track,.prog{position:absolute;left:0;right:0;bottom:0;height:6px}
.track{background:#4d4130}   /* the top of Shop by ride, peeking up */
.prog{background:var(--paint);transform-origin:0 50%;transform:scaleX(0)}
.spots{position:absolute;inset:0;z-index:2;pointer-events:none}
.spot{--cut:7px;position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px 0 10px;border:0;
  background:rgba(12,10,9,.88);color:var(--ink);font:600 .9rem/1 var(--display);white-space:nowrap;transform:translate(-50%,-50%)}
.spot i{flex:none;width:10px;height:10px;background:var(--paint);transition:transform .2s}
@media (hover:hover){.spot:hover i{transform:rotate(45deg)}}
.spot[aria-pressed="true"]{background:var(--paint);color:var(--on-paint)}
.spot[aria-pressed="true"] i{background:var(--on-paint)}
.part-card{--cut:14px;position:absolute;z-index:4;left:16px;right:16px;bottom:72px;max-width:380px;display:grid;gap:10px;padding:18px;background:var(--raise);box-shadow:0 0 0 1px var(--line)}
@media (min-width:760px){.part-card{left:auto;right:32px;bottom:auto;top:24px}}
.part-card{grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:start}
.part-card>*{grid-column:2}
.part-card .pc-img{grid-column:1;grid-row:1/5;width:96px;aspect-ratio:4/3;object-fit:cover}
.part-card h3{font-size:1.4rem;padding-right:32px}
.part-card .row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.part-card .x{position:absolute;top:4px;right:4px}
.part-card .btn{justify-self:start}
.nogl{object-fit:cover;width:100%;height:100%;opacity:.55}
@media (prefers-reduced-motion:reduce){.hero{height:auto}.stage{position:relative;top:0;height:calc(100svh - var(--top));min-height:560px}.prog,.track{display:none}}

/* sections */
.sec{padding-block:72px}
@media (min-width:960px){.sec{padding-block:104px}}
.sec-head{display:grid;gap:12px;margin-bottom:28px;max-width:46rem}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;flex:none}
.chip input{position:absolute;inset:0;opacity:0;margin:0}
.chip span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 12px;border:1.5px solid var(--edge);background:var(--raise);font:500 .98rem/1 var(--body);transition:border-color .15s}
.chip span::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor}
@media (hover:hover){.chip:hover span{border-color:var(--ink)}}
.chip input:checked+span{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.chip input:checked+span::before{background:var(--on-paint);border-color:var(--on-paint)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}

/* shop: sticky toolbar with filter, sort and the grid toggle */
.toolbar{position:sticky;top:var(--top);z-index:10;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:20px}
.tools{display:flex;align-items:center;gap:8px;min-height:60px}
.count{margin-right:auto;font:600 .95rem/1 var(--display);color:var(--muted)}
.sort{display:flex;align-items:center;gap:8px}
.select{appearance:none;height:46px;padding:0 34px 0 12px;border:1.5px solid var(--edge);border-radius:0;color:var(--ink);font:500 1rem var(--body);
  background:var(--raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe7da' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center}
@media (hover:hover){.select:hover{border-color:var(--ink)}}
.grid-btn{width:46px;height:46px;border:1.5px solid var(--edge);background:var(--raise)}
.grid-btn svg{width:22px;height:22px;fill:currentColor}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:12px;margin-inline:-16px;padding-inline:16px}
.cats::-webkit-scrollbar{display:none}
@media (min-width:760px){.cats{flex-wrap:wrap;margin-inline:0;padding-inline:0}}
.grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:36px 14px}
@media (min-width:760px){.grid{gap:48px 24px}}
/* every card has the same skeleton and its button sits on the bottom edge, so a long name never pushes it out of line */
.card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;transform-origin:0 0}
.card h3{min-height:2.4em}
.tile{--cut:14px;position:relative;width:100%;aspect-ratio:4/3;margin-bottom:6px;background:var(--raise);overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover){.card:hover .tile img{transform:scale(1.04)}}
.card .cat{font:600 .82rem/1.3 var(--display);color:var(--muted)}
.stock{display:inline-flex;align-items:center;gap:8px;min-height:24px;font:600 .9rem/1 var(--display)}
.stock::before{content:"";flex:none;width:10px;height:10px}
.stock.in{color:var(--go)}.stock.in::before{background:var(--go)}
.stock.low{color:var(--low)}.stock.low::before{box-shadow:inset 0 0 0 1.5px var(--low);background:linear-gradient(90deg,var(--low) 50%,transparent 50%)}
.stock.special{color:var(--go)}.stock.special::before{box-shadow:inset 0 0 0 1.5px var(--go)}   /* orderable: green, hollow */
.stock.out{color:var(--red)}.stock.out::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23ff8f80' stroke-width='2.2'/%3E%3C/svg%3E") center/10px no-repeat}
.need.price{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;font:600 .9rem/1 var(--display)}
.card .btn{margin-top:auto;width:100%;min-height:44px;padding:0 10px;font-size:.95rem}
.card .stock+.price{margin-bottom:8px}
.grid.dense{gap:28px 10px}
.grid.dense .card h3{font-size:.95rem}
.grid.dense .card .btn{font-size:.82rem}
.grid.dense .card .cat{display:none}
.grid.dense .stock,.grid.dense .need.price{font-size:.8rem}
@media (min-width:760px){.grid.dense .card .cat{display:revert}.grid.dense .stock,.grid.dense .need.price{font-size:.9rem}}
.empty-grid{padding:32px 0;color:var(--muted)}

/* shop by ride: car-club plaques */
.band{background:var(--panel);border-block:1px solid var(--line)}
/* rooms: every section gets its own floor so you always know where you are. Each one overlaps the room before it
   with a cut top corner, alternating sides, like plaques stacked down the page */
.room{--c:40px;position:relative;margin-top:calc(var(--c) * -1);padding-top:calc(72px + var(--c));border:0;overflow-x:clip;   /* entrances that tilt or slide never widen the phone page */
  
  clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.room.r{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
@media (min-width:960px){.room{--c:72px;padding-top:calc(104px + var(--c))}}
.room-gold{background:var(--paint);color:var(--on-paint)}
#rides.room{margin-top:0;clip-path:none;padding-top:72px}   /* joins the loading bar, so no cut corner */
@media (min-width:960px){#rides.room{padding-top:104px}}
.room-gold .lead{color:#3a2f22}
.room-gold :focus-visible{outline-color:var(--on-paint)}
.room-gold .plaque{background:#3a2f22}
.plaque{transform-origin:50% 0}
.room-gold .plaque.on .pl{background:var(--ink)}
.room-brown{--bg:#1a130d;--raise:#251b13;--line:#3a2b1e;--edge:#7d6f60;background:var(--bg)}
.room-black{background:var(--bg)}
.plaques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.plaques{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.plaque{--c:13px;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  display:grid;background:var(--paint);padding:1px;transition:padding .15s}
@media (hover:hover){.plaque:hover{padding:2px}.plaque:hover .pl{background:#241e19}}
.pl{display:grid;align-content:center;justify-items:center;gap:3px;min-height:116px;padding:16px 10px;text-align:center;text-decoration:none;background:var(--bg);clip-path:inherit;transition:background .15s}
.pl .rn{font:700 1.85rem/1 var(--black);color:var(--paint)}
.pl .rm{font:600 .95rem/1.25 var(--display);color:var(--ink)}
.pl .rt{font:500 .84rem/1.25 var(--display);color:var(--muted)}
.pl:focus-visible{outline:2px solid var(--ink);outline-offset:-8px}
.plaque.on .pl{background:var(--paint)}
.plaque.on .rn,.plaque.on .rm,.plaque.on .rt{color:var(--on-paint)}
.plaque.on .pl::after{content:"Your ride";margin-top:4px;padding:2px 6px;background:var(--on-paint);color:var(--paint);font:700 .78rem/1.3 var(--display)}
.plaque.on .pl:focus-visible{outline-color:var(--on-paint)}
button.pl{width:100%;border:0;color:inherit}

/* shop by ride: year, make, model filled in like a build sheet. One step open at a time; a picked step folds to one line with a dotted leader */
.ymm{display:grid;max-width:64rem;border-bottom:2px solid var(--on-paint)}
.step{border-top:2px solid var(--on-paint)}
.step-head{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 0;border:0;background:none;color:var(--on-paint);text-align:left}
.step-head:disabled{opacity:.45;cursor:not-allowed}
.sn{display:grid;place-items:center;flex:none;width:28px;height:28px;background:var(--on-paint);color:var(--paint);font:700 .95rem/1 var(--display)}
.sk{font:700 1.3rem/1 var(--display)}
.lead-dots{flex:1;min-width:12px;height:2px;margin-top:10px;background:radial-gradient(circle,rgba(12,10,9,.55) 1px,transparent 1.5px) 0 50%/7px 2px repeat-x}
.sv{font:700 1.65rem/1 var(--black);white-space:nowrap}
@media (hover:hover){.step-head:not(:disabled):hover .sk{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}}
.step-body{padding:0 0 24px}
.mk{border:0;background:var(--on-paint);color:var(--paint);transition:background .15s,color .15s,transform .1s}
.makes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){.makes{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mk{--cut:11px;display:grid;align-content:center;gap:5px;min-height:84px;padding:14px;text-align:left}
.mk b{font:700 1.2rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.mk small{font:500 .85rem/1.3 var(--display);color:var(--muted)}
@media (hover:hover){.mk:hover{background:#2a221a}}
.mk:active{transform:translateY(1px)}
.mk[aria-pressed="true"]{background:var(--ink);color:var(--on-paint)}
.mk[aria-pressed="true"] small{color:#3a2f22}
.ride-out{--cut:16px;display:grid;justify-items:start;gap:10px;margin-block:2px 22px;padding:22px 20px 20px;background:var(--on-paint);color:var(--ink)}
.ride-out .label{color:var(--muted)}
.ride-out h3{font:700 clamp(2rem,8.5vw,3.2rem)/1 var(--black);color:var(--paint)}
.ride-out h3:focus:not(:focus-visible){outline:none}
.ride-out :focus-visible{outline-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.again{min-height:44px;padding:0 8px;border:0;background:none;color:var(--ink);font:600 .95rem var(--display);text-decoration:underline;text-underline-offset:4px}
@media (hover:hover){.again:hover{color:var(--paint)}}
.other{margin-top:22px;color:#3a2f22;font-weight:500}
.other a{color:var(--on-paint);font-weight:700}

/* book: build and booking in one form */
.split{display:grid;gap:32px}
@media (min-width:960px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}.split>div:first-child{position:sticky;top:calc(var(--top) + 32px)}}
.split figure{margin-top:24px}
.split figcaption{margin-top:10px}
.form{display:grid;gap:30px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
legend{display:flex;align-items:baseline;gap:12px;padding:0;margin-bottom:10px;font:600 1.15rem/1.2 var(--display)}
legend .n{font:700 1.9rem/1 var(--display);color:var(--paint)}
.tiers{display:grid;gap:10px}
@media (min-width:640px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{position:relative;display:block}
.tier input{position:absolute;inset:0;opacity:0;margin:0}
.tier .t{display:grid;gap:10px;justify-items:start;height:100%;padding:16px;border:1.5px solid var(--edge);background:var(--raise);transition:border-color .15s}
.tier b{font:700 1.4rem/1 var(--display)}
@media (hover:hover){.tier:hover .t{border-color:var(--ink)}}
.tier input:checked+.t{border-color:var(--paint);box-shadow:inset 0 0 0 1.5px var(--paint),inset 0 -6px 0 var(--paint)}
.tier input:focus-visible+.t{outline:2px solid var(--ink);outline-offset:3px}
.field label{display:block;margin-bottom:8px;font:600 1rem var(--display)}
.input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--edge);border-radius:0;background:var(--raise);font-size:1rem;transition:border-color .15s}
@media (hover:hover){.input:hover{border-color:var(--ink)}}
.input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.summary{display:grid;gap:4px;padding:16px 0;border-block:1px solid var(--line)}
.summary output{font:600 1.15rem/1.3 var(--display)}
.msg:empty{display:none}
.msg{padding:12px 14px;background:var(--raise);border:1.5px solid var(--paint)}
.msg.err{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.form .btn{justify-self:start}

/* installs */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,300px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 12px;scroll-padding-inline:16px}
@media (min-width:760px){.reels{margin-inline:0;padding-inline:0;scroll-padding-inline:0}}
@media (min-width:960px){.reels{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}
.reel{--cut:16px;scroll-snap-align:start;aspect-ratio:9/16;display:grid;align-content:space-between;justify-items:start;padding:16px;background:var(--raise);text-decoration:none}
@media (hover:hover){.reel:hover{--cut:24px}}
.reel p{color:var(--muted)}

/* visit */
.visit{display:grid;gap:32px}
.visit figure{margin-inline:-16px}
@media (min-width:760px){.visit figure{margin-inline:0}}
@media (min-width:960px){.visit{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}.visit figure{grid-row:1/3}}
.facts{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);border-top:1.5px solid var(--paint)}
.facts dt,.facts dd{padding-block:14px;border-bottom:1px solid var(--line)}
.facts dt{font:600 .95rem/1.5 var(--display);color:var(--muted)}

footer{background:var(--paint);color:#3a2f22;padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));font-size:.95rem}
footer .mark{font:700 clamp(2.2rem,11vw,4.6rem)/.9 var(--black);color:var(--on-paint);margin-bottom:24px}
footer p{max-width:44rem}
footer p+p{margin-top:10px}
footer a{color:var(--on-paint)}
footer :focus-visible{outline-color:var(--on-paint)}

/* cart sheet: native modal dialog */
.sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:none;height:100%;max-height:none;padding:0;border:0;border-left:1px solid var(--line);background:var(--panel);color:var(--ink)}
.sheet[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sheet::backdrop{background:rgba(0,0,0,.65)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:env(safe-area-inset-top,0px) 8px 0 20px;border-bottom:1px solid var(--line)}
.sheet-top h2{font-size:1.6rem}
.x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8}
.lines{overflow:auto;padding:4px 20px 16px}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid var(--line)}
.line .nm{display:grid;gap:4px;margin-right:auto}
.line .thumb{flex:none;width:64px;aspect-ratio:4/3;object-fit:cover}
.qty{display:flex;align-items:center;gap:4px}
.qty button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--edge);background:var(--raise);font-size:1.2rem;transition:border-color .15s,transform .1s}
@media (hover:hover){.qty button:hover{border-color:var(--ink)}}
.qty button:active{transform:translateY(1px)}
.qty span{min-width:2.2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.empty{display:grid;gap:14px;justify-items:start;padding-top:20px}
.sheet-bottom{display:grid;gap:14px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--raise)}
.sheet-bottom legend{font-size:1rem;margin-bottom:8px}
.sheet-bottom .btn{width:100%}
.subtotal{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 1rem var(--display)}
.toast{--cut:12px;position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:420px;margin-inline:auto;padding:16px 18px;background:var(--paint);color:var(--on-paint);font:600 1rem/1.4 var(--display)}

/* home: featured parts. The console leads big because it is the part the shop is known for; four stock parts sit beside it */
.feature{display:grid;gap:36px}
@media (min-width:960px){.feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}}
.lead-part{display:grid;justify-items:start;gap:10px}
.lead-part .tile{--cut:20px}
.lead-part h3{font:700 clamp(1.6rem,6vw,2.2rem)/1.05 var(--display)}
.lead-part .desc{max-width:38ch;color:var(--muted)}
.lead-part .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-block:4px 6px}
.mini{--cols:2}
.all{margin-top:40px}
/* hero: two doors in, one for parts and one for installs */
.hint-acts{display:flex;flex-wrap:wrap;gap:8px}
.hint-acts .btn{min-height:44px;padding:0 16px;font-size:.95rem}
/* shop page */
.page-top{padding-top:calc(var(--top) + 44px)}
.page-h{display:block;font:700 clamp(2.2rem,8vw,3.8rem)/1 var(--display);white-space:normal}
.fit{display:grid;justify-items:start;gap:14px}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}