/* PUSHROD storefront — garage aesthetic. Theme colors are injected as CSS
   variables by store.js from /api/brand so each brand yaml re-skins it. */
:root{
  --bg:#14100c; --bg2:#1e1812; --card:#241c14;
  --accent:#f59e0b; --accent2:#dc2626;
  --text:#f3ead8; --muted:#a89a80;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font-family:'Helvetica Neue',Arial,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
header.top{position:sticky;top:0;z-index:10;background:var(--bg2);
  border-bottom:3px solid var(--accent);padding:.7rem 1.2rem;
  display:flex;align-items:center;gap:1rem}
.logo{font-family:'Arial Black','Helvetica Neue',sans-serif;font-size:1.6rem;
  letter-spacing:.12em;color:var(--accent)}
.brandlogo{height:2.6rem;width:auto;vertical-align:middle;margin-right:.6rem}
.brandnav{display:flex;gap:1rem;align-items:center;white-space:nowrap}
.brandnav a{font-size:.9rem;font-weight:600}
footer.page .sister{font-size:.8rem;color:var(--muted)}
.logo small{display:block;font-size:.6rem;letter-spacing:.3em;color:var(--muted);
  font-family:'Helvetica Neue',Arial,sans-serif}
.tagline{color:var(--muted);font-size:.85rem;flex:1}
.cartbtn{background:var(--accent);color:#14100c;border:0;border-radius:6px;
  padding:.55rem 1rem;font-weight:700;cursor:pointer;font-size:1rem}
.cartbtn:hover{filter:brightness(1.1)}
main{max-width:1200px;margin:0 auto;padding:1.2rem}
.pagetitle{font-size:1.5rem;font-weight:800;margin-bottom:1rem}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.toolbar select,.toolbar input{background:var(--card);color:var(--text);
  border:1px solid #4a3d2c;border-radius:6px;padding:.5rem .7rem;font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.card{background:var(--card);border:1px solid #3a2f21;border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .12s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card img{width:100%;aspect-ratio:1;object-fit:cover;background:#0d0a07}
.card .body{padding:.8rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card h3{font-size:1.02rem;line-height:1.3}
.card .meta{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.price{font-weight:800;font-size:1.15rem;color:var(--accent)}
.price .draft{font-size:.7rem;color:var(--muted);font-weight:400}
.wtag{font-size:.7rem;font-weight:700;color:#14100c;background:var(--accent);
  border-radius:10px;padding:.1rem .5rem;vertical-align:middle}
.tbd{color:var(--muted);font-style:italic}
.btn{background:var(--accent);color:#14100c;border:0;border-radius:6px;
  padding:.6rem 1rem;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* product detail */
.detail{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:2rem}
.detail img{width:100%;border-radius:10px;border:1px solid #3a2f21;background:#0d0a07}
.detail h1{font-size:1.8rem;margin-bottom:.3rem}
.detail .desc{color:var(--muted);margin:1rem 0}
.sizes{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.size{border:1px solid #4a3d2c;background:var(--card);color:var(--text);
  border-radius:6px;padding:.5rem .9rem;cursor:pointer}
.size.sel{background:var(--accent);color:#14100c;font-weight:700;border-color:var(--accent)}
.qtyrow{display:flex;gap:.6rem;align-items:center;margin:.8rem 0}
.qtyrow input{width:4rem;background:var(--card);color:var(--text);
  border:1px solid #4a3d2c;border-radius:6px;padding:.5rem;font-size:1rem}
/* PDP right rail (Bill 2026-10-17, all non-gateway faces): the price box floats —
   price + buy + product video stay in view together while the visitor
   scrolls on desktop; on mobile it is a plain stacked card, no sticky. */
.buyrail{background:var(--card);border:1px solid rgba(140,140,140,.45);
  border-radius:10px;padding:1rem;margin-top:1rem}
.buyrail .price{font-size:1.3rem}
.buyrail .product-video h2{font-size:1.02rem;margin:0 0 .5rem}
#railvideo:empty{display:none}
@media(min-width:761px){
  .detail.rail-detail .buyrail{position:sticky;top:5.5rem}
}
/* cart drawer */
.drawer{position:fixed;top:0;right:-420px;width:min(400px,92vw);height:100%;
  background:var(--bg2);border-left:3px solid var(--accent);transition:right .2s;
  z-index:20;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer header{padding:1rem;border-bottom:1px solid #3a2f21;display:flex;
  justify-content:space-between;align-items:center}
.drawer .items{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.citem{display:flex;gap:.7rem;background:var(--card);border-radius:8px;padding:.6rem}
.citem img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.citem .grow{flex:1}
.citem .row{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.citem button{background:none;border:1px solid #4a3d2c;color:var(--text);
  border-radius:4px;width:1.7rem;height:1.7rem;cursor:pointer}
.drawer footer{padding:1rem;border-top:1px solid #3a2f21}
.total{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:800;margin-bottom:.8rem}
.notice{background:#2a2118;border:1px solid var(--accent);border-radius:8px;
  padding:1rem;margin:1rem 0;color:var(--text)}
footer.page{text-align:center;color:var(--muted);padding:2rem;font-size:.85rem}
@media(max-width:760px){.detail{grid-template-columns:1fr}}

/* ---------- gateway doors ---------- */
/* The catalog lines as garage doors — five different door SYSTEMS, not
   five recolors of one sectional (Bill 2026-10-15, built from research
   on real old American garage doors):
   "All doors" — mid-century sectional: 4 sections with full-width seam
     shadows, 2 long raised panels per section, 4 plain lites in the top
     section, rust only along the bottom edge and corners.
   Motorcycle (PR-) — barn-red board-and-batten sliding door: vertical
     boards only, overhead track + roller hangers, ring latch, silvered
     wood streaking through the red.
   Muscle Car (RE-MC-) — 1950s one-piece tilt-up: a single plywood slab,
     shallow 2x3 moulding grid, centre T-handle, pivot bolts at the edges.
   RestoMod (RE-MP-) — 1920s carriage pair: vertical centre seam, 6 true
     divided lites per leaf, strap hinges from the outer edges, ring pulls.
   Truck (RE-CT-) — galvanised corrugated steel: fine vertical ribs,
     sheet joints with rivets, D-pull + padlock, white-rust blotches low.
   Every seam is a shadow line plus a 1px highlight; grime runs bottom-up;
   glass is near-black. Markup, labels, counts, and behavior unchanged —
   keyed by data-door (never position) so homepage and /about match. */
.doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:0 0 1rem; }
.door { position:relative; overflow:hidden; min-height:8.5rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0; text-align:center;
  padding:2.6rem .9rem 1.8rem; cursor:pointer; color:#1c1a17; font:inherit;
  background-color:#fff;
  border:2px solid transparent; border-radius:.45rem;
  box-shadow:
    inset 0 14px 14px -10px rgba(20,16,10,.50),
    inset 0 -14px 16px -10px rgba(20,16,10,.55),
    inset 10px 0 12px -10px rgba(20,16,10,.36),
    inset -10px 0 12px -10px rgba(20,16,10,.36),
    inset 0 0 0 1px rgba(20,16,10,.12); }
/* Base hardware belongs to the sectional ("All doors"): 4 plain lites in
   the top section — near-black glass, one diagonal glare on the 2nd pane —
   and a small centre pull in the second section from the bottom. */
.door::before { content:""; position:absolute; top:.55rem; left:50%; transform:translateX(-50%);
  width:82%; height:1.15rem; border-radius:2px; border:2px solid #B4AC94;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.20) 40%, rgba(255,255,255,0) 54%),
    linear-gradient(90deg, rgba(255,255,255,.05) 0 25%, rgba(0,0,0,.12) 25% 50%, rgba(255,255,255,.02) 50% 75%, rgba(0,0,0,.18) 75%),
    repeating-linear-gradient(90deg, #262C28 0 calc(25% - 4px), #D8D2BE calc(25% - 4px) 25%);
  background-size:27% 100%, auto, auto;
  background-position:32% 0, 0 0, 0 0;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(30,28,22,.5), inset 0 -4px 6px rgba(0,0,0,.35), 0 1px 2px rgba(60,52,36,.35); }
.door::after { content:""; position:absolute; top:59%; left:50%; transform:translateX(-50%);
  width:2.5rem; height:.48rem; border-radius:.24rem; border:1px solid rgba(20,18,14,.75);
  background:linear-gradient(180deg, #33302A, #17150F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(40,34,22,.5); }
.door[data-door="all"] { background-color:#D8D2BE;
  background-image:
    linear-gradient(180deg, rgba(150,86,38,.50), rgba(150,86,38,0)),
    linear-gradient(180deg, rgba(150,86,38,.42), rgba(150,86,38,0)),
    radial-gradient(ellipse 70px 20px at 6% 98%, rgba(146,84,32,.50), rgba(146,84,32,0) 70%),
    radial-gradient(ellipse 70px 20px at 94% 98%, rgba(146,84,32,.45), rgba(146,84,32,0) 70%),
    linear-gradient(180deg, rgba(18,16,12,0) 96.5%, rgba(18,16,12,.55) 96.5%),
    linear-gradient(180deg, rgba(150,90,40,0) 90%, rgba(150,90,40,.25) 96%, rgba(118,62,24,.45)),
    radial-gradient(ellipse 52px 22px at 27% 87%, rgba(96,86,64,.22), rgba(255,255,255,.10) 55%, rgba(0,0,0,0) 78%),
    linear-gradient(90deg, rgba(0,0,0,0) calc(7% - 2px), rgba(74,66,48,.30) calc(7% - 2px) 7%, rgba(255,255,255,.35) 7% calc(7% + 2px), rgba(0,0,0,0) calc(7% + 2px) calc(50% - 2px), rgba(255,255,255,.30) calc(50% - 2px) 50%, rgba(74,66,48,.32) 50% calc(50% + 2px), rgba(0,0,0,0) calc(50% + 2px) calc(93% - 2px), rgba(255,255,255,.30) calc(93% - 2px) 93%, rgba(74,66,48,.30) 93% calc(93% + 2px), rgba(0,0,0,0) calc(93% + 2px)),
    repeating-linear-gradient(180deg, rgba(43,38,30,.60) 0 2px, rgba(255,255,255,.55) 2px 3px, rgba(0,0,0,0) 3px calc(25% - 5px), rgba(74,66,50,.16) calc(25% - 5px) calc(25% - 2px), rgba(0,0,0,0) calc(25% - 2px) 25%),
    linear-gradient(90deg, rgba(32,29,24,.55) 0 6px, rgba(255,255,255,.16) 6px 8px, rgba(0,0,0,0) 8px calc(100% - 8px), rgba(255,255,255,.16) calc(100% - 8px) calc(100% - 6px), rgba(32,29,24,.55) calc(100% - 6px)),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 40%, rgba(84,74,54,0) 78%, rgba(84,74,54,.22));
  background-size:4px 34px, 4px 26px, auto, auto, auto, auto, auto, auto, auto, auto, auto;
  background-position:5px calc(75% + 2px), calc(100% - 9px) calc(75% + 2px), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.door[data-door="PR-"] { background-color:#8A4630;
  background-image:
    radial-gradient(ellipse 36px 26px at 93% 55%, rgba(28,15,8,.30), rgba(28,15,8,0) 70%),
    radial-gradient(circle, rgba(10,8,6,.9) 0 2px, rgba(255,255,255,.14) 2.6px, rgba(0,0,0,0) 3.6px),
    radial-gradient(circle, rgba(10,8,6,.9) 0 2px, rgba(255,255,255,.14) 2.6px, rgba(0,0,0,0) 3.6px),
    radial-gradient(circle, rgba(24,13,8,.8) 0 1.3px, rgba(255,210,180,.12) 1.9px, rgba(0,0,0,0) 2.7px),
    radial-gradient(circle, rgba(24,13,8,.8) 0 1.3px, rgba(255,210,180,.12) 1.9px, rgba(0,0,0,0) 2.7px),
    radial-gradient(circle, rgba(24,13,8,.8) 0 1.3px, rgba(255,210,180,.12) 1.9px, rgba(0,0,0,0) 2.7px),
    linear-gradient(180deg, rgba(142,133,120,0) 46%, rgba(142,133,120,.16) 74%, rgba(142,133,120,.34) 96%),
    linear-gradient(180deg, rgba(142,133,120,0) 52%, rgba(142,133,120,.13) 78%, rgba(142,133,120,.28) 97%),
    linear-gradient(180deg, rgba(122,30,16,.30), rgba(122,30,16,.36)),
    repeating-linear-gradient(90deg, rgba(255,214,180,.05) 0 12.5%, rgba(0,0,0,.05) 12.5% 25%, rgba(255,214,180,.02) 25% 37.5%),
    repeating-linear-gradient(90deg, rgba(255,205,170,.16) 0 1px, rgba(0,0,0,0) 1px calc(12.5% - 2px), rgba(30,14,8,.55) calc(12.5% - 2px) 12.5%),
    linear-gradient(180deg, #241C16, #171310),
    linear-gradient(180deg, #241C16, #171310),
    linear-gradient(180deg, #211A15 0 5.5%, #0F0C0A 5.5% 6.5%, rgba(255,255,255,.10) 6.5% calc(6.5% + 1px), rgba(0,0,0,0) calc(6.5% + 1px)),
    linear-gradient(180deg, rgba(255,226,196,.14), rgba(255,226,196,0) 42%, rgba(40,24,16,0) 76%, rgba(38,24,17,.42) 94%, rgba(24,15,10,.62));
  background-size:auto, 12px 12px, 12px 12px, 12.5% 14px, 12.5% 14px, 12.5% 14px, 10% 100%, 11% 100%, 12.5% 100%, auto, auto, 4.5% 12%, 4.5% 12%, auto, auto;
  background-position:0 0, 24.2% 15.5%, 74.2% 15.5%, 0 12%, 0 48.5%, 0 85%, 9% 0, 57% 0, 25% 0, 0 0, 0 0, 23% 6%, 73% 6%, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.door[data-door="RE-MC-"] { background-color:#D3C9A8;
  background-image:
    linear-gradient(180deg, rgba(150,86,38,.40), rgba(150,86,38,0)),
    radial-gradient(ellipse 46px 16px at 50% 58%, rgba(90,74,46,.20), rgba(90,74,46,0) 70%),
    radial-gradient(ellipse 44px 14px at 3% 97%, rgba(84,66,40,.50), rgba(84,66,40,0) 70%),
    radial-gradient(ellipse 44px 14px at 97% 97%, rgba(84,66,40,.45), rgba(84,66,40,0) 70%),
    radial-gradient(circle, rgba(34,28,18,.85) 0 3px, rgba(255,252,240,.25) 3.6px, rgba(0,0,0,0) 4.6px),
    radial-gradient(circle, rgba(34,28,18,.85) 0 3px, rgba(255,252,240,.25) 3.6px, rgba(0,0,0,0) 4.6px),
    repeating-linear-gradient(90deg, rgba(122,106,70,.07) 0 1px, rgba(0,0,0,0) 1px 9px),
    linear-gradient(90deg, rgba(0,0,0,0) 0 calc(8% - 2px), rgba(96,84,56,.45) calc(8% - 2px) 8%, rgba(255,252,240,.55) 8% calc(8% + 1px), rgba(0,0,0,0) calc(8% + 1px) calc(36% - 1px), rgba(255,252,240,.55) calc(36% - 1px) 36%, rgba(96,84,56,.45) 36% calc(36% + 2px), rgba(0,0,0,0) calc(36% + 2px) calc(40% - 2px), rgba(96,84,56,.45) calc(40% - 2px) 40%, rgba(255,252,240,.55) 40% calc(40% + 1px), rgba(0,0,0,0) calc(40% + 1px) calc(64% - 1px), rgba(255,252,240,.55) calc(64% - 1px) 64%, rgba(96,84,56,.45) 64% calc(64% + 2px), rgba(0,0,0,0) calc(64% + 2px) calc(68% - 2px), rgba(96,84,56,.45) calc(68% - 2px) 68%, rgba(255,252,240,.55) 68% calc(68% + 1px), rgba(0,0,0,0) calc(68% + 1px) calc(96% - 1px), rgba(255,252,240,.55) calc(96% - 1px) 96%, rgba(96,84,56,.45) 96% calc(96% + 2px), rgba(0,0,0,0) calc(96% + 2px)),
    linear-gradient(180deg, rgba(0,0,0,0) 0 calc(10% - 2px), rgba(96,84,56,.45) calc(10% - 2px) 10%, rgba(255,252,240,.55) 10% calc(10% + 1px), rgba(0,0,0,0) calc(10% + 1px) calc(44% - 1px), rgba(255,252,240,.55) calc(44% - 1px) 44%, rgba(96,84,56,.45) 44% calc(44% + 2px), rgba(0,0,0,0) calc(44% + 2px) calc(50% - 2px), rgba(96,84,56,.45) calc(50% - 2px) 50%, rgba(255,252,240,.55) 50% calc(50% + 1px), rgba(0,0,0,0) calc(50% + 1px) calc(84% - 1px), rgba(255,252,240,.55) calc(84% - 1px) 84%, rgba(96,84,56,.45) 84% calc(84% + 2px), rgba(0,0,0,0) calc(84% + 2px)),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%, rgba(96,80,50,0) 82%, rgba(96,80,50,.20) 94%, rgba(70,56,34,.34));
  background-size:3px 30px, auto, auto, auto, 14px 14px, 14px 14px, auto, auto, auto, auto;
  background-position:calc(100% - 12px) 33%, 0 0, 0 0, 0 0, 2px 33%, calc(100% - 16px) 33%, 0 0, 0 0, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat; }
.door[data-door="RE-MP-"] { background-color:#68755C;
  background-image:
    linear-gradient(180deg, #E3DCC4, #D8D0B2),
    linear-gradient(180deg, #E3DCC4, #D5CCAC),
    linear-gradient(180deg, #E0D8BE, #D8D0B2),
    radial-gradient(circle, rgba(0,0,0,0) 3px, rgba(16,14,11,.92) 3.5px 5.5px, rgba(0,0,0,0) 6.5px),
    radial-gradient(circle, rgba(0,0,0,0) 3px, rgba(16,14,11,.92) 3.5px 5.5px, rgba(0,0,0,0) 6.5px),
    radial-gradient(circle, rgba(14,12,10,.95) 0 3px, rgba(255,255,255,.16) 3.6px, rgba(0,0,0,0) 4.6px),
    radial-gradient(circle, rgba(14,12,10,.95) 0 3px, rgba(255,255,255,.16) 3.6px, rgba(0,0,0,0) 4.6px),
    radial-gradient(ellipse 64px 30px at 50% 58%, rgba(24,28,20,.28), rgba(0,0,0,0) 70%),
    linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 2px), rgba(18,22,16,.7) calc(50% - 2px) 50%, rgba(255,255,255,.16) 50% calc(50% + 2px), rgba(0,0,0,0) calc(50% + 2px)),
    linear-gradient(90deg, rgba(0,0,0,0) 0 8%, #060505 8% 10.5%, rgba(0,0,0,0) 10.5% 30%, #060505 30% 32.5%, rgba(0,0,0,0) 32.5% 52%, #060505 52% 54.5%, rgba(0,0,0,0) 54.5% 74%, #060505 74% 76.5%, rgba(0,0,0,0) 76.5%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 8%, #060505 8% 10.5%, rgba(0,0,0,0) 10.5% 30%, #060505 30% 32.5%, rgba(0,0,0,0) 32.5% 52%, #060505 52% 54.5%, rgba(0,0,0,0) 54.5% 74%, #060505 74% 76.5%, rgba(0,0,0,0) 76.5%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 8%, #060505 8% 10.5%, rgba(0,0,0,0) 10.5% 30%, #060505 30% 32.5%, rgba(0,0,0,0) 32.5% 52%, #060505 52% 54.5%, rgba(0,0,0,0) 54.5% 74%, #060505 74% 76.5%, rgba(0,0,0,0) 76.5%),
    linear-gradient(90deg, rgba(0,0,0,0) 0 8%, #060505 8% 10.5%, rgba(0,0,0,0) 10.5% 30%, #060505 30% 32.5%, rgba(0,0,0,0) 32.5% 52%, #060505 52% 54.5%, rgba(0,0,0,0) 54.5% 74%, #060505 74% 76.5%, rgba(0,0,0,0) 76.5%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, #211E1A 1px, #100E0C),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, #211E1A 1px, #100E0C),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, #211E1A 1px, #100E0C),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, #211E1A 1px, #100E0C),
    linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(14,17,12,.6) calc(50% - 1px) calc(50% + 1px), rgba(0,0,0,0) calc(50% + 1px)),
    linear-gradient(180deg, rgba(16,20,14,.55) 0 2px, rgba(255,255,255,.13) 2px 3px, rgba(0,0,0,0) 3px),
    linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(10,12,8,.20) 50%),
    linear-gradient(180deg, #5F7057, #4E5C46 68%, #3E4A38),
    linear-gradient(180deg, rgba(0,0,0,0) 0 calc(47% - 2px), rgba(20,26,18,.5) calc(47% - 2px) 47%, rgba(255,255,255,.13) 47% calc(47% + 1px), rgba(0,0,0,0) calc(47% + 1px) calc(68% - 2px), rgba(20,26,18,.5) calc(68% - 2px) 68%, rgba(255,255,255,.13) 68% calc(68% + 1px), rgba(0,0,0,0) calc(68% + 1px) calc(70.5% - 2px), rgba(20,26,18,.5) calc(70.5% - 2px) 70.5%, rgba(255,255,255,.13) 70.5% calc(70.5% + 1px), rgba(0,0,0,0) calc(70.5% + 1px) calc(80% - 2px), rgba(20,26,18,.5) calc(80% - 2px) 80%, rgba(255,255,255,.13) 80% calc(80% + 1px), rgba(0,0,0,0) calc(80% + 1px)),
    linear-gradient(90deg, rgba(0,0,0,0) 0 calc(10% - 2px), rgba(20,26,18,.5) calc(10% - 2px) 10%, rgba(255,255,255,.13) 10% calc(10% + 1px), rgba(0,0,0,0) calc(10% + 1px) calc(40% - 2px), rgba(20,26,18,.5) calc(40% - 2px) 40%, rgba(255,255,255,.13) 40% calc(40% + 1px), rgba(0,0,0,0) calc(40% + 1px) calc(60% - 2px), rgba(20,26,18,.5) calc(60% - 2px) 60%, rgba(255,255,255,.13) 60% calc(60% + 1px), rgba(0,0,0,0) calc(60% + 1px) calc(90% - 2px), rgba(20,26,18,.5) calc(90% - 2px) 90%, rgba(255,255,255,.13) 90% calc(90% + 1px), rgba(0,0,0,0) calc(90% + 1px)),
    linear-gradient(180deg, rgba(34,42,32,.34), rgba(34,42,32,.30)),
    linear-gradient(180deg, rgba(34,42,32,.34), rgba(34,42,32,.30)),
    linear-gradient(180deg, rgba(34,42,32,.34), rgba(34,42,32,.30)),
    linear-gradient(180deg, rgba(34,42,32,.34), rgba(34,42,32,.30)),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 40%, rgba(16,20,14,0) 80%, rgba(16,20,14,.38));
  background-size:14px 5px, 10px 4px, 12px 4px, 15px 15px, 15px 15px, 11px 11px, 11px 11px, auto, auto, 36% 2%, 36% 2%, 36% 2%, 36% 2%, 36% 4.5%, 36% 4.5%, 36% 4.5%, 36% 4.5%, 100% 18%, 100% 18%, 100% 18%, 100% 18%, auto, auto, 30% 21%, 30% 10%, 30% 21%, 30% 10%, auto;
  background-position:30% calc(40% + 2px), 68% calc(82% - 4px), 12% calc(82% - 3px), calc(50% - 17px) 55%, calc(50% + 2px) 55%, calc(50% - 15px) calc(55% - 12px), calc(50% + 4px) calc(55% - 12px), 0 0, 0 0, 1.5% 87.75%, 62.5% 87.75%, 1.5% 43.25%, 62.5% 43.25%, 1.5% 86.5%, 62.5% 86.5%, 1.5% 42%, 62.5% 42%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 10% 47%, 10% 70%, 60% 47%, 60% 70%, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.door[data-door="RE-CT-"] { background-color:#8B918C;
  background-image:
    linear-gradient(180deg, rgba(148,74,30,.55), rgba(148,74,30,0)),
    linear-gradient(180deg, rgba(148,74,30,.45), rgba(148,74,30,0)),
    radial-gradient(ellipse 40px 12px at 4% 99%, rgba(140,70,28,.5), rgba(140,70,28,0) 70%),
    radial-gradient(ellipse 40px 12px at 96% 99%, rgba(140,70,28,.45), rgba(140,70,28,0) 70%),
    radial-gradient(ellipse 60px 26px at 30% 88%, rgba(236,239,233,.20), rgba(236,239,233,0) 70%),
    radial-gradient(ellipse 52px 22px at 70% 92%, rgba(236,239,233,.16), rgba(236,239,233,0) 70%),
    radial-gradient(ellipse 80px 30px at 55% 76%, rgba(236,239,233,.10), rgba(236,239,233,0) 70%),
    radial-gradient(ellipse 55% 34% at 22% 26%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 50% 30% at 78% 44%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(38,42,40,.85) 0 1.6px, rgba(255,255,255,.20) 2.2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle, rgba(38,42,40,.85) 0 1.6px, rgba(255,255,255,.20) 2.2px, rgba(0,0,0,0) 3px),
    linear-gradient(90deg, rgba(0,0,0,0) calc(33.3% - 2px), rgba(44,48,46,.55) calc(33.3% - 2px) calc(33.3% + 1px), rgba(255,255,255,.18) calc(33.3% + 1px) calc(33.3% + 2px), rgba(0,0,0,0) calc(33.3% + 2px) calc(66.6% - 2px), rgba(44,48,46,.55) calc(66.6% - 2px) calc(66.6% + 1px), rgba(255,255,255,.18) calc(66.6% + 1px) calc(66.6% + 2px), rgba(0,0,0,0) calc(66.6% + 2px)),
    linear-gradient(180deg, #3B403E, #292D2B),
    linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,0) 1px),
    linear-gradient(180deg, #878D88, #787E7A 60%, #6A706C),
    repeating-linear-gradient(90deg, #A9AFA8 0 .5%, #9BA19C .5% 2.1%, #7E847F 2.1% 3%, #666C68 3% 3.5%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(40,44,42,0) 84%, rgba(40,44,42,.30) 96%, rgba(28,30,28,.45));
  background-size:3px 22px, 3px 18px, auto, auto, auto, auto, auto, auto, auto, 12px 36px, 12px 36px, auto, 1.05rem .95rem, 100% 10%, 100% 10%, auto, auto;
  background-position:21% 90%, 79% 90%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, calc(33.3% - 6px) 0, calc(66.6% - 6px) 0, 0 0, 93.5% 63%, 0 100%, 0 100%, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; }

.door[data-door="PR-"]::before { content:none; }
.door[data-door="PR-"]::after { top:52%; bottom:auto; left:auto; right:5.5%; transform:none;
  width:1.05rem; height:1.05rem; border-radius:50%;
  border:3px solid rgba(20,14,10,.92);
  background:radial-gradient(circle at 50% -2px, rgba(15,10,7,.95) 0 3.5px, rgba(0,0,0,0) 4.5px);
  box-shadow:0 2px 3px rgba(20,10,5,.45), inset 0 1px 1px rgba(255,255,255,.14); }

.door[data-door="RE-MC-"]::before { content:none; }
.door[data-door="RE-MC-"]::after { top:56.5%; width:1.7rem; height:.44rem;
  background:radial-gradient(circle at 50% 50%, #0F0C09 0 3.5px, rgba(0,0,0,0) 4.5px), linear-gradient(180deg, #2C261C, #16120D); }
.door[data-door="RE-MP-"]::before { top:6%; left:6%; transform:none; width:88%; height:34%;
  border:3px solid #55654B; border-radius:2px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0 14%, rgba(255,255,255,0) 30%),
    linear-gradient(90deg, rgba(227,220,196,.30), rgba(227,220,196,.26) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, rgba(8,10,8,.38), rgba(8,10,8,.38)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 calc(16.66% - 3px), #4C5A44 calc(16.66% - 3px) 16.66%),
    linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 3px), #4C5A44 calc(50% - 3px) calc(50% + 3px), rgba(0,0,0,0) calc(50% + 3px)),
    linear-gradient(155deg, #2A312A, #20261F 60%, #262C26);
  background-size:33% 52%, auto, 16.66% 50%, auto, auto, auto;
  background-position:0 0, 0 0, 66.7% 100%, 0 0, 0 0, 0 0;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(16,20,14,.5), inset 0 -6px 9px rgba(0,0,0,.35), 0 2px 4px rgba(20,26,16,.35); }
.door[data-door="RE-MP-"]::after { content:none; }
/* Door labels (Bill 2026-10-16, redo of the 2026-10-15 RestoMod-only
   contrast patch, which did not make the doors readable): EVERY door's
   title + subtitle sit on one solid cream label plate — opaque backing,
   dark text, heavy border — that paints above the door hardware
   (::before/::after) instead of competing with it. The two text elements
   stack with no gap and shared borders so they read as a single plate.
   Same plate in the /about mirror (.gname/.gdesc). */
.door[data-door="RE-CT-"]::before { content:none; }
.door[data-door="RE-CT-"]::after { top:47%; bottom:auto; left:auto; right:6%; transform:none;
  width:.6rem; height:1.6rem; border-radius:.32rem;
  border:3px solid rgba(38,42,40,.92); background:rgba(0,0,0,0);
  box-shadow:0 1px 2px rgba(20,22,20,.5), inset 0 1px 1px rgba(255,255,255,.14); }
.door strong { position:relative; z-index:2; display:block; align-self:stretch;
  font-family:'Arial Black','Helvetica Neue',sans-serif;
  font-size:1.08rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.3;
  color:#1C1A17; background:#F7F1DE; text-shadow:none;
  border:2px solid rgba(24,21,16,.88); border-bottom:0; border-radius:.5rem .5rem 0 0;
  padding:.5rem .6rem .05rem;
  box-shadow:-3px 0 4px -2px rgba(10,8,5,.4), 3px 0 4px -2px rgba(10,8,5,.4), 0 -3px 4px -2px rgba(10,8,5,.4); }
.door span { position:relative; z-index:2; display:block; align-self:stretch;
  color:#453F33; background:#F7F1DE; font-size:.8rem; letter-spacing:.04em;
  border:2px solid rgba(24,21,16,.88); border-top:0; border-radius:0 0 .5rem .5rem;
  padding:.02rem .6rem .55rem;
  box-shadow:-3px 0 4px -2px rgba(10,8,5,.4), 3px 0 4px -2px rgba(10,8,5,.4), 0 3px 4px -2px rgba(10,8,5,.4); }
.door:hover { border-color:var(--muted); }
.door.sel { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:-7px; }
.door:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover) and (prefers-reduced-motion: no-preference) {
  .door { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .door:hover, .door:focus-visible { transform:translateY(-5px);
    box-shadow:0 16px 18px -10px rgba(0,0,0,.85), inset 0 -16px 18px -16px rgba(0,0,0,.38); }
}
@media (prefers-reduced-motion: reduce) {
  .door:hover, .door:focus-visible { transform:none; }
}
@media (max-width:640px) { .doors { grid-template-columns:1fr; } }