/* SWGOD — layout/interaction modeled on a blueprint-grid storefront; all brand assets are the client's own */
:root{
  --ink:#111;
  --dash:#7b7b7b;
  --grid:rgba(131,201,242,.22);
  --note:#f7ee98;
  --note-ink:#5b5236;
  --cross:#b3443f;
  --paper:#fff;
  --font-display:"VT323","Courier New",monospace;
  --font-body:"Share Tech Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background-color:#fff;
  background-image:linear-gradient(var(--grid) 2px,transparent 0),linear-gradient(90deg,var(--grid) 2px,transparent 0);
  background-size:50px 50px;background-position:-2px -2px;
  background-attachment:fixed;
  color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.45;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{flex:1}

/* ---------- header ---------- */
.header{position:relative;z-index:100;width:95%;margin:0 auto;padding:12px 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav{display:flex;gap:3em;align-items:center;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.04em;color:#6d6d6d}
.nav a,.nav button{background:none;border:0;padding:6px 0;color:inherit;font:inherit;text-transform:uppercase}
.nav a:hover,.nav button:hover{color:var(--ink)}
.has-dropdown{position:relative}
.has-dropdown>button::after{content:"";display:inline-block;width:.38em;height:.38em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-3px);margin-left:.45em}
.sub-nav{display:none;position:absolute;left:0;top:100%;z-index:110;min-width:300px;
  background:var(--note);color:var(--note-ink);padding:16px 18px 20px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.has-dropdown:hover .sub-nav,.has-dropdown:focus-within .sub-nav,.has-dropdown.open .sub-nav{display:block}
.sub-nav a{display:block;padding:5px 0;font-size:1.3rem;color:var(--note-ink);position:relative;width:max-content}
.sub-nav a:hover::before,.sub-nav a:focus-visible::before{content:"";position:absolute;inset:0 -12px;
  background:url("../img/marker-circle.svg") center/100% 100% no-repeat;pointer-events:none}
.sub-nav .note-cross{position:absolute;right:20px;bottom:18px;width:84px;opacity:.55;transform:rotate(8deg);pointer-events:none}
.logo{display:flex;justify-content:center;align-items:center}
.logo img{height:92px;width:auto;object-fit:contain}
.cart-btn{justify-self:end;position:relative;background:none;border:0;padding:6px;display:flex;align-items:center}
.cart-btn svg{width:46px;height:46px}
.cart-count{position:absolute;right:0;bottom:0;min-width:22px;height:22px;padding:0 4px;display:none;align-items:center;justify-content:center;
  background:var(--note);color:var(--note-ink);font-family:var(--font-display);font-size:1.1rem;transform:rotate(4deg)}
.cart-count.on{display:flex}
.burger{display:none;background:none;border:0;padding:4px}
.burger svg{width:34px;height:34px}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;background:#000;color:#cfcfcf;font-family:var(--font-display);font-size:1.45rem;letter-spacing:.06em;
  padding:.3em 0;margin-bottom:1em;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{padding-right:1.2em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- product grid ---------- */
.grid{width:calc(100% - 32px);margin:0 auto 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:2px dashed var(--dash);display:flex;flex-direction:column;min-height:100%}
.card-img{position:relative;aspect-ratio:1/1;border-bottom:2px dashed var(--dash);overflow:hidden;margin:.5em .5em 0;border-bottom-width:2px}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}
.card-img img.alt{opacity:0}
.card:hover .card-img img.alt{opacity:1}
.card-info{padding:14px 12px 20px}
.card-title{margin:0;font-family:var(--font-display);font-size:1.7rem;line-height:1.05;letter-spacing:.04em;color:#555;text-transform:uppercase}
.card-meta{margin:6px 0 0;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;color:#6d6d6d;text-transform:uppercase}

/* ---------- product page ---------- */
.pdp{width:calc(100% - 32px);max-width:1280px;margin:10px auto 60px;display:grid;grid-template-columns:70px minmax(0,1fr) 420px;gap:24px;align-items:start}
.thumbs{display:flex;flex-direction:column;gap:12px;align-items:center}
.thumbs button{border:0;background:none;padding:0;width:56px;height:56px;opacity:.55;transition:opacity .2s}
.thumbs button.on,.thumbs button:hover{opacity:1}
.thumbs button.on{outline:2px solid var(--cross);outline-offset:2px;border-radius:50%}
.thumbs img{width:100%;height:100%;object-fit:cover}
.stage{background:#fff;border:2px dashed var(--dash);aspect-ratio:1/1;position:relative}
.stage img{width:100%;height:100%;object-fit:contain}
.buy{text-align:center}
.buy h1{margin:8px 0 16px;font-family:var(--font-display);font-size:2.3rem;line-height:1;letter-spacing:.05em;text-transform:uppercase}
.dash{border:0;border-top:2px dashed var(--dash);margin:16px 0}
.opt-label{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.08em;color:#6d6d6d;text-transform:uppercase;margin:6px 0}
.opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:14px}
.opt{min-width:64px;padding:6px 12px;background:#000;color:#fff;border:2px solid #000;font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase}
.opt:hover{background:#333}
.opt.on{background:#fff;color:#000}
.price{display:inline-block;position:relative;padding:8px 22px;margin:10px 0 14px;font-family:var(--font-display);font-size:1.7rem}
.price::before{content:"";position:absolute;inset:0;background:url("../img/marker-circle.svg") center/100% 100% no-repeat}
.acc{border-top:2px dashed var(--dash);text-align:left}
.acc:last-of-type{border-bottom:2px dashed var(--dash)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:12px;font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase}
.acc button::after{content:"+";font-size:1.6rem;line-height:1}
.acc.open button::after{content:"–"}
.acc div{display:none;padding:0 12px 14px;color:#444}
.acc.open div{display:block}
.btn{display:block;width:100%;padding:14px;margin-top:22px;background:#000;color:#fff;border:2px solid #000;
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase}
.btn:hover:not(:disabled){background:#fff;color:#000}
.btn:disabled{background:#cfcfcf;border-color:#cfcfcf;color:#fff;cursor:not-allowed}
.back{display:inline-block;margin:6px 16px;font-family:var(--font-display);font-size:1.15rem;color:#6d6d6d;letter-spacing:.06em}

/* ---------- text pages ---------- */
.doc{width:calc(100% - 32px);max-width:720px;margin:20px auto 60px;background:#fff;border:2px dashed var(--dash);padding:28px 24px}
.doc h1{margin:0 0 12px;font-family:var(--font-display);font-size:2.4rem;letter-spacing:.05em;text-transform:uppercase}

/* ---------- footer ---------- */
.footer{position:relative;z-index:98;background:#fff;border-top:2px dashed #000;margin-top:20px}
.footer-inner{width:95%;margin:0 auto;padding:28px 0 22px;display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:32px;align-items:start}
.footer-brand{display:flex;gap:18px;align-items:center}
.footer-brand img{height:96px;width:auto}
.footer-brand p{margin:0;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;color:#6d6d6d;text-transform:uppercase}
.footer h3{margin:0 0 8px;font-family:var(--font-display);font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{font-size:.9rem;color:#6d6d6d;padding:2px 0}
.footer li a:hover{color:#000}
.news h3{font-size:1.5rem}
.news p{margin:0 0 12px;font-size:.9rem;color:#6d6d6d}
.news form{display:flex;border-bottom:2px dashed var(--dash)}
.news input{flex:1;border:0;background:none;padding:10px 0;font:inherit;outline:0}
.news button{background:none;border:0;font-size:1.6rem;padding:0 8px}
.news .msg{min-height:1.4em;margin-top:8px;font-size:.85rem;color:var(--cross)}
.legal{width:95%;margin:0 auto;padding:0 0 22px;display:flex;gap:24px;font-size:.8rem;color:#8a8a8a}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:310;width:min(420px,100%);background:#fff;
  background-image:repeating-linear-gradient(#fff,#fff 26px,rgba(112,221,255,.55) 27px);
  transform:translateX(102%);transition:transform .38s cubic-bezier(.65,0,.35,1);display:flex;flex-direction:column;border-left:2px dashed var(--dash)}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:#fff;border-bottom:2px dashed var(--dash)}
.drawer-head h2{margin:0;font-family:var(--font-display);font-size:1.8rem;letter-spacing:.06em}
.x{background:none;border:0;font-size:2rem;line-height:1;padding:0 6px}
.lines{flex:1;overflow:auto;padding:6px 0}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;margin:0 14px;padding:12px;background:#fff;border-bottom:2px dashed var(--dash)}
.line img{width:72px;height:72px;object-fit:contain;border:2px dashed var(--dash)}
.line b{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;font-weight:400;display:block;line-height:1.05}
.line small{color:#6d6d6d;display:block}
.line .rm{background:none;border:0;color:var(--cross);font-size:.8rem;text-decoration:underline;padding:0}
.empty{margin:30px 14px;padding:16px;background:#fff;text-align:center;font-family:var(--font-display);font-size:1.4rem;letter-spacing:.05em;border:2px dashed var(--dash)}
.drawer-foot{padding:14px 18px 18px;background:#fff;border-top:2px dashed var(--dash)}
.sum{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:1.5rem}
.fine{font-size:.78rem;color:#6d6d6d;margin:6px 0 0}

/* ---------- page transition (curtain wipe) ---------- */
.curtain{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}
.curtain i{position:absolute;top:0;bottom:0;width:100%;display:block}
.curtain .outer{background:#000;left:0;transform:translateX(-100%)}
.curtain .inner{background:#fff;left:0;transform:translateX(100%)}
.curtain.cover{pointer-events:auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.pdp{grid-template-columns:56px minmax(0,1fr)}.buy{grid-column:1/-1}}
@media (max-width:760px){
  .header{grid-template-columns:44px 1fr 56px;padding:8px 0}
  .nav{display:none}
  .burger{display:block}
  .logo img{height:64px}
  .cart-btn svg{width:38px;height:38px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px;width:calc(100% - 32px)}
  .card-title{font-size:1.35rem}.card-meta{font-size:1rem}
  .marquee{font-size:1.2rem}
  .pdp{grid-template-columns:1fr;gap:12px}
  .thumbs{flex-direction:row;order:2;overflow:auto;justify-content:flex-start}
  .thumbs button{flex:0 0 56px}
  .footer-inner{grid-template-columns:1fr;gap:22px}
  .mobile-menu{display:none;position:absolute;z-index:120;top:100%;left:8px;width:min(300px,calc(100% - 16px));background:var(--note);color:var(--note-ink);padding:14px 16px 20px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
  .mobile-menu.on{display:block}
  .mobile-menu a{display:block;padding:6px 0;font-family:var(--font-display);font-size:1.4rem;letter-spacing:.05em;text-transform:uppercase;width:max-content}
  .mobile-menu .note-cross{position:absolute;right:16px;bottom:14px;width:90px;opacity:.5;transform:rotate(8deg)}
}
@media (min-width:761px){.mobile-menu{display:none!important}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.curtain{display:none}.drawer,.scrim{transition:none}}

/* avoid a flash of the new page before the wipe-out starts */
.wiping .curtain .outer,.wiping .curtain .inner{transform:none}
.wiping .curtain{pointer-events:auto}
.doc h3{margin:22px 0 4px;font-family:var(--font-display);font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;font-weight:400}
.doc p{margin:0 0 10px}
.doc .btn{display:inline-block;width:auto;padding:12px 28px}
.doc hr.dash{margin:14px 0}

/* product page: prev/next bar + description */
.subbar{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 32px);margin:0 auto}
.subbar .back{margin:6px 0}
.pager{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;color:#6d6d6d}
.pager a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;font-size:1.9rem;line-height:1;background:#fff;border:2px dashed var(--dash)}
.pager a:hover{background:#000;color:#fff;border-color:#000}
.pager span{min-width:54px;text-align:center}
.desc{margin:4px 0 14px;text-align:left;white-space:pre-line;color:#444;border-top:2px dashed var(--dash);padding-top:14px}
@media (max-width:760px){.subbar{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);padding:2px 0;margin-bottom:6px}}