/* MAB MONO — black & white cinematic theme. No Apple aesthetic. */
:root{
  --bg:#000000; --bg2:#050505; --ink:#f5f4f0; --muted:#9b9b98;
  --line:#2a2a2d; --accent:#f5f4f0; --dim:#6d6d6a;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Archivo Black",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* fixed 3D stage — calm transparent light-drift (see camera3d.js) */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:.78}
/* soft vignette + top glow veil so type stays legible over motion */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255,255,255,.075), transparent 60%),
    radial-gradient(900px 700px at 85% 110%, rgba(255,255,255,.045), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.15) 65%, rgba(0,0,0,.78) 100%);
}
/* film grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:3;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
/* Liquid-light startup: soft focus, full-viewport caustics and floating glints. */
.boot{position:fixed;inset:0;z-index:9000;background:#030407;display:none;overflow:hidden;isolation:isolate;pointer-events:none}
.intro-pending .boot,.boot[data-liquid]{display:block}
.intro-pending .boot{pointer-events:auto}
.boot canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.boot-mark{position:absolute;left:50%;top:45%;width:clamp(112px,15vw,212px);margin:0;translate:-50% -50%;opacity:0;text-align:center;will-change:filter,transform,opacity}
.boot-mark img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(244,213,157,.12))}
body.booting{overflow:hidden}
.intro-pending .nav,.intro-pending .hero,.intro-pending .hud{opacity:0}
.liquid-reveal .nav,.liquid-reveal .hero,.liquid-reveal .hud{animation:liquidPageIn 1.65s cubic-bezier(.22,.61,.36,1) both}
@keyframes liquidPageIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
  .boot{display:none!important}
  .liquid-reveal .nav,.liquid-reveal .hero,.liquid-reveal .hud{animation:none}
}

/* HUD — minimal, quiet */
.hud{position:fixed;inset:14px;z-index:4;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(245,244,240,.62)}
.hud-corner{position:absolute;width:18px;height:18px;border:1px solid rgba(245,244,240,.28)}
.tl{top:0;left:0;border-right:0;border-bottom:0}.tr{top:0;right:0;border-left:0;border-bottom:0}
.bl{bottom:0;left:0;border-right:0;border-top:0}.br{bottom:0;right:0;border-left:0;border-top:0}
.hud-top,.hud-bottom{position:absolute;left:36px;right:36px;display:flex;justify-content:space-between;opacity:.8}
.hud-top{top:6px}.hud-bottom{bottom:6px}
.rec{display:flex;align-items:center;gap:8px}
.rec i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.15}}
.scrollbar{position:absolute;right:-8px;top:60px;bottom:60px;width:2px;background:rgba(245,244,240,.15)}
#scrollbarFill{width:100%;height:0%;background:#fff}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px 22px;display:flex;justify-content:space-between;align-items:center}
.brand{font-family:var(--mono);font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:.12em;font-size:15px;display:inline-flex;align-items:center;gap:10px}
.brand-logo{height:34px;width:auto;display:block;image-rendering:auto;flex:none}
.blink{animation:blink 1s infinite}
.links a{margin-left:20px;text-decoration:none;color:var(--ink);font-size:13px;font-family:var(--mono);letter-spacing:.08em;opacity:.8}
.links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.links a.btn,.nav a.btn{color:#0a0a0b}
.links a.btn:hover,.nav a.btn:hover{color:#000;text-decoration:none}
/* Liquid route transition — used by the top navigation only. */
.liquid-route{position:fixed;inset:0;z-index:8900;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;background:rgba(3,4,7,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:visibility 0s linear .55s}
.liquid-route.is-active{visibility:visible;transition:none}
.route-tide{position:absolute;left:-18%;top:32%;width:136%;height:34%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,239,192,.46),rgba(224,170,83,.22) 30%,rgba(96,61,25,.07) 55%,transparent 72%);filter:blur(34px);transform:translate3d(-13%,14%,0) rotate(-7deg);opacity:0}
.route-tide-b{top:47%;background:radial-gradient(ellipse at center,rgba(255,225,157,.26),rgba(183,123,48,.14) 40%,transparent 73%);filter:blur(48px);transform:translate3d(16%,-7%,0) rotate(5deg)}
.route-sparkles{position:absolute;inset:0;opacity:0}.route-sparkles i{position:absolute;left:var(--x);top:var(--y);width:calc(4px * var(--s));height:calc(4px * var(--s));border-radius:50%;background:#fff1cf;box-shadow:0 0 calc(12px * var(--s)) rgba(255,212,133,.9);transform:scale(0);animation:none}
.liquid-route.is-opening{animation:routeWashIn .53s cubic-bezier(.36,0,.16,1) both}.liquid-route.is-opening .route-tide{animation:routeTideIn .53s cubic-bezier(.23,.9,.25,1) both}.liquid-route.is-opening .route-tide-b{animation:routeTideInB .53s cubic-bezier(.23,.9,.25,1) both}.liquid-route.is-opening .route-sparkles{animation:routeSparkles .53s ease both}.liquid-route.is-opening .route-sparkles i{animation:routeSparkle 1s ease-in-out var(--d) both}
.liquid-route.is-closing{animation:routeWashOut .52s cubic-bezier(.4,0,.3,1) both}.liquid-route.is-closing .route-tide{animation:routeTideOut .52s cubic-bezier(.4,0,.3,1) both}.liquid-route.is-closing .route-tide-b{animation:routeTideOutB .52s cubic-bezier(.4,0,.3,1) both}.liquid-route.is-closing .route-sparkles{animation:routeSparklesOut .52s ease both}
@keyframes routeWashIn{0%{opacity:0;background:rgba(3,4,7,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}55%{opacity:1;background:rgba(23,17,9,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}100%{opacity:1;background:rgba(14,11,7,.78);backdrop-filter:blur(27px);-webkit-backdrop-filter:blur(27px)}}
@keyframes routeWashOut{0%{opacity:1;background:rgba(14,11,7,.78);backdrop-filter:blur(27px);-webkit-backdrop-filter:blur(27px)}100%{opacity:0;background:rgba(3,4,7,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
@keyframes routeTideIn{to{opacity:1;transform:translate3d(12%,-5%,0) rotate(-3deg) scale(1.12)}}@keyframes routeTideInB{to{opacity:1;transform:translate3d(-11%,6%,0) rotate(4deg) scale(1.16)}}
@keyframes routeTideOut{to{opacity:0;transform:translate3d(34%,-18%,0) rotate(0) scale(1.28)}}@keyframes routeTideOutB{to{opacity:0;transform:translate3d(-30%,14%,0) rotate(0) scale(1.3)}}
@keyframes routeSparkles{55%{opacity:1}100%{opacity:.75}}@keyframes routeSparklesOut{to{opacity:0}}@keyframes routeSparkle{0%,100%{transform:scale(0);opacity:0}42%{transform:scale(1);opacity:1}70%{transform:scale(.6);opacity:.55}}
@media(prefers-reduced-motion:reduce){.liquid-route{display:none!important}}
/* content floats above canvas */
.hero,main,footer,.marquee{position:relative;z-index:5}
.hero{max-width:var(--max);margin:0 auto;padding:16vh 22px 10vh;min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.3em;font-size:12px}
.mega{font-family:var(--disp);font-size:clamp(28px,5.9vw,72px);line-height:1;letter-spacing:-.02em;margin:20px 0 14px;text-transform:uppercase;white-space:nowrap;
  color:#f5f4f0;text-shadow:0 8px 34px rgba(0,0,0,.6),0 2px 14px rgba(255,255,255,.1)}
.mega .ch{display:inline-block;will-change:transform,opacity}
@supports ((-webkit-background-clip:text) and (background-clip:text)) {
  .mega{background:linear-gradient(180deg,#ffffff 15%,#ececea 50%,#a9a9a6 75%,#ffffff 98%);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 8px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 12px rgba(255,255,255,.08))}
  .mega .ch{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
}
@media(max-width:700px){.mega{white-space:normal;font-size:clamp(38px,10.5vw,60px);line-height:.95}}
.mega .ch{display:inline-block}
.hero .sub{font-size:clamp(16px,2.2vw,22px);color:#cfcfcb;max-width:640px}
.cta-row{margin:30px 0;display:flex;gap:14px;flex-wrap:wrap}
.btn{background:#f5f4f0;color:#0a0a0b;border:1px solid #f5f4f0;border-radius:999px;padding:15px 32px;font-size:13px;font-family:var(--mono);letter-spacing:.12em;text-decoration:none;cursor:pointer;display:inline-block;transition:transform .25s,background .25s,color .25s,box-shadow .25s,border-color .25s;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.btn:hover{background:#fff;color:#000;transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.btn.ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn.small{padding:9px 18px;font-size:12px}
.micro{color:var(--muted);font-size:13px}
.scroll-hint{margin-top:7vh;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;align-items:center;gap:12px}
.scroll-hint span{width:1px;height:44px;background:#fff;display:inline-block;animation:drop 1.6s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* hero watermark — large faint logo, bottom-right of hero */
.hero{position:relative;overflow:hidden}
.hero-watermark{position:absolute;right:22px;bottom:5vh;width:clamp(220px,30vw,420px);height:auto;opacity:.16;pointer-events:none;user-select:none;z-index:0}
.hero>*:not(.hero-watermark){position:relative;z-index:1}
@media(max-width:700px){.hero-watermark{width:min(46vw,220px);opacity:.13;right:14px;bottom:9vh}}
/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#000}
.marquee-track{display:flex;white-space:nowrap;font-family:var(--mono);font-size:13px;letter-spacing:.3em;padding:12px 0;animation:mq 22s linear infinite;color:#d8d8d4}
@keyframes mq{to{transform:translateX(-50%)}}
/* frames */
.frame{max-width:var(--max);margin:0 auto;padding:14vh 22px;min-height:80vh}
.frame-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.3em;border:1px solid var(--line);padding:8px 14px;color:var(--muted);margin-bottom:18px;background:rgba(0,0,0,.5)}
.section-head h2{font-family:var(--disp);font-size:clamp(38px,6vw,76px);margin:0;text-transform:uppercase;letter-spacing:-.01em}
.section-head p{color:#c9c9c5;max-width:640px}
.section-head em{color:#fff}
/* gallery */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.filters button{border:1px solid var(--line);background:rgba(0,0,0,.55);color:var(--ink);padding:10px 18px;cursor:pointer;font-size:12px;font-family:var(--mono);letter-spacing:.1em;transition:all .25s}
.filters button.active,.filters button:hover{background:#f5f4f0;color:#000;border-color:#f5f4f0}
/* gallery — masonry jigsaw: every photo at its true aspect ratio, tiles touching,
   nothing cropped. Row spans are computed in app.js (layoutMasonry) from each
   image's real dimensions; grid-auto-rows is just the 8px measuring unit. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:1px;gap:0;line-height:0;background:var(--bg);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.work{grid-row-end:span 240;background:#0b0b0d;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;overflow:hidden;position:relative;transition:box-shadow .35s;margin:0;line-height:1.5}
.work:hover{box-shadow:inset 0 0 0 1px #f5f4f0,0 18px 44px rgba(0,0,0,.6);z-index:2}
.work img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;filter:saturate(1.06) contrast(1.06) brightness(.98);transform:scale(1);transition:transform .16s ease-out,filter .4s}
/* hover: image pops out of its own tile (clipped by overflow:hidden on .work) */
.work:hover img{filter:saturate(1.16) contrast(1.12) brightness(1.08);transform:scale(1.1)}
.work .pad{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;line-height:1.5;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 52%,rgba(0,0,0,.85))}
.work h3{margin:0 0 6px;font-size:18px;letter-spacing:.01em}
.pill{display:inline-block;font-size:11px;font-family:var(--mono);letter-spacing:.14em;background:transparent;border:1px solid var(--line);padding:4px 12px;color:var(--muted);margin-bottom:10px}
.work .pad .pill{margin:0;border-color:rgba(245,244,240,.34);color:#f5f4f0;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* cards */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.card{background:rgba(16,16,18,.72);border:1px solid rgba(255,255,255,.1);padding:28px;border-radius:18px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);position:relative;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.card::before{content:"";position:absolute;top:14px;left:20px;width:28px;height:2px;background:linear-gradient(90deg,#fff,transparent);opacity:.7}
.card h3{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-top:0}
.price{font-family:var(--disp);font-size:52px;margin:10px 0}
.pop{border-color:#f5f4f0;box-shadow:0 0 0 1px #f5f4f0,0 20px 60px rgba(255,255,255,.08)}
.card ul{padding-left:18px;color:#c9c9c5}.card li{margin:7px 0}
.addons{margin-top:22px}.addons ul{columns:2;margin:0}
@media(max-width:640px){.addons ul{columns:1}}
/* about */
.about{display:grid;grid-template-columns:1.35fr 1fr;gap:26px}
.about h2{font-family:var(--disp);font-size:clamp(34px,5vw,60px);text-transform:uppercase;margin:0 0 10px}
.about p{color:#d6d6d2}
.tick{padding-left:18px;color:#d6d6d2}.tick li{margin:8px 0}
/* form */
.form label{display:block;font-size:12px;font-family:var(--mono);letter-spacing:.14em;margin:14px 0;color:#cfcfcb}
.form input,.form select,.form textarea{width:100%;margin-top:8px;padding:14px;background:#000;border:1px solid var(--line);color:var(--ink);font-size:15px;font-family:var(--body);border-radius:0;transition:border-color .25s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.row{grid-template-columns:1fr}.about{grid-template-columns:1fr}.links a:not(.btn){display:none}.hud-bottom{display:none}}
footer{position:relative;z-index:5;text-align:center;padding:40px 20px;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.12em;border-top:1px solid var(--line)}
footer a{color:#fff}
/* reveal defaults (anime.js enhances) */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
/* ---------- video cards (click-to-play facades) ---------- */
.vcard{padding:0;overflow:hidden}
.vcard .pad{padding:18px}
.vwrap{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.vwrap img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.06)}
.vwrap:hover img{filter:saturate(1.14) contrast(1.1) brightness(1.04)}
.vplay{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(245,244,240,.94);color:#0a0a0b;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;transition:transform .25s,background .25s;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.vwrap:hover .vplay,.vwrap:focus-visible .vplay{transform:scale(1.1);background:#fff}
.vwrap:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.vdur{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.78);padding:3px 9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;border-radius:4px}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
::selection{background:#f5f4f0;color:#000}
/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(5,5,6,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:zoom-out;padding:4vh 4vw}
#lb.open{display:flex}
#lb figure{margin:0;max-width:min(94vw,1500px);text-align:center}
#lb img{max-width:min(94vw,1500px);max-height:76vh;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 120px rgba(0,0,0,.7);cursor:default}
#lb figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#d8d8d4}
#lb figcaption strong{color:#fff;letter-spacing:.06em;font-size:15px;display:block;margin-bottom:4px}
#lb .count{color:var(--muted)}
.lb-btn{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;font-family:var(--mono)}
.lb-btn:hover{background:rgba(255,255,255,.18);transform:scale(1.06)}
#lbClose{top:22px;right:22px}
#lbPrev{left:18px;top:50%;transform:translateY(-50%)}
#lbNext{right:18px;top:50%;transform:translateY(-50%)}
#lbPrev:hover{transform:translateY(-50%) scale(1.06)}
#lbNext:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:640px){#lbPrev{left:8px}#lbNext{right:8px}.lb-btn{width:40px;height:40px}}
/* ---------- shop tab (free checkout, same page) ---------- */
#shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:18px;width:100%}
.shop-card{padding:0;overflow:hidden;min-width:0}
.shop-card .pad{padding:18px}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 18px;flex-wrap:wrap}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap}
.shop-filters button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font-family:var(--mono);font-size:12px}
.shop-filters button.on{background:#f5f4f0;color:#0a0a0b}
/* media: always fluid, never overflows — full screen, mobile, or narrow split tab */
.shop-media{width:100%;max-width:100%;aspect-ratio:4/5;max-height:420px;background:#000;overflow:hidden;display:block}
.shop-media img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block}
/* loading tile: hourglass + LOADING */
.shop-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);background:radial-gradient(300px 200px at 50% 30%,rgba(255,255,255,.07),transparent 70%),#0d0d0f;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.3em}
.shop-loading svg{opacity:.85;animation:hourglass 2.2s ease-in-out infinite}
@keyframes hourglass{0%,100%{transform:rotate(0);opacity:.6}50%{transform:rotate(180deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.shop-loading svg{animation:none}}
.shop-row{display:flex;gap:8px;margin-top:10px}
.shop-row select{flex:1;min-width:0;background:#000;color:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
/* narrow screens + split tabs: 2 cols on phones, 1 col under 380px, no horizontal scroll */
@media(max-width:640px){
  #shopGrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:12px}
  .shop-card .pad{padding:12px}
  .shop-media{max-height:300px}
}
@media(max-width:380px){#shopGrid{grid-template-columns:1fr}}
#shop{overflow:hidden}
#shopGrid{min-width:0}
#shopDrawer{position:fixed;right:0;top:0;width:min(380px,92vw);height:100%;background:#111113;border-left:1px solid var(--line);padding:20px;transform:translateX(105%);transition:.25s;z-index:300;display:flex;flex-direction:column;gap:8px}
#shopDrawer.open{transform:none}
.shop-drawer-head{display:flex;justify-content:space-between;align-items:center}
.shop-drawer-head button{background:#222;color:#fff;border:0;border-radius:8px;padding:4px 10px;cursor:pointer}
#shopItems{flex:1;overflow:auto}
.shop-item{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}
.shop-item button{background:#222;color:#fff;border:0;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px}
.shop-total{font-size:20px;font-weight:800;margin:8px 0}
#shopDrawer input,#shopDrawer textarea{width:100%;background:#000;border:1px solid var(--line);color:#fff;border-radius:8px;padding:10px;margin:4px 0;font-size:14px}