@import url('./tokens.css?v=20260831c');

/* ============================================================
   GREYMTTR STORE - store.greymttr.com

   Same hand-written, no-build approach as greymttr.com, and the
   same tokens.css, so the two sites stay one visual system. Add
   colours and sizes to tokens.css, not here.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--body); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased;}
::selection{background:var(--flare); color:var(--bg);}
a{color:inherit;}
img{max-width:100%; display:block;}

@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}}

.wrap{max-width:1100px; margin:0 auto; padding:0 var(--sp-6);}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--orange); color:var(--bg); padding:12px 18px; font-family:var(--mono); font-size:var(--fs-sm);}
.readout{font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--tr-3); color:var(--orange2); text-transform:uppercase;}
.h{font-family:var(--stencil); font-weight:var(--fw-bold); color:var(--bright); line-height:var(--lh-tight); letter-spacing:var(--tr-1);}

/* ---- status bar + nav ----
   Same construction as the band site: the nav is sticky, opaque
   var(--bg), and sits ABOVE the texture overlays at --z-nav.
   All three matter together. See the long note in the main
   site's site.css - a translucent bar or one under the overlays
   renders a shade off from the theme-color strip iOS paints
   above it, which shows as a seam across the top. */
.statusbar{position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-5); background:var(--orange); color:var(--bg); font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:var(--tr-2); text-transform:uppercase; text-align:center;}
.statusbar span{animation:flicker 5s infinite;}

.nav{position:sticky; top:0; z-index:var(--z-nav); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); padding:var(--sp-4) var(--sp-8); background:var(--bg); border-bottom:var(--rule-hair) solid var(--edge-soft);}
.nav-brand{display:flex; align-items:center; gap:var(--sp-3); text-decoration:none;}
.nav-brand img{width:26px; height:26px; object-fit:contain;}
.nav-brand b{font-family:var(--stencil); font-weight:var(--fw-black); font-size:18px; letter-spacing:var(--tr-1); color:var(--bright);}
.nav-links{display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap;}
.nav-links a{font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--tr-2); text-transform:uppercase; color:var(--body); text-decoration:none; transition:color .2s;}
.nav-links a:hover{color:var(--orange);}

/* ---- cart button ---- */
.cartbtn{position:relative; display:inline-flex; align-items:center; gap:var(--sp-2); background:none; border:var(--rule-hair) solid var(--edge2); color:var(--body); font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--tr-2); text-transform:uppercase; padding:9px 14px; cursor:pointer; transition:border-color .2s,color .2s;}
.cartbtn:hover{border-color:var(--orange); color:var(--orange);}
.cartbtn .count{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; background:var(--orange); color:var(--bg); font-size:var(--fs-2xs); font-weight:var(--fw-mid);}
.cartbtn .count[data-empty="true"]{display:none;}

/* ---- hero ---- */
.hero{position:relative; text-align:center; padding:var(--sp-20) 0 var(--sp-12);}
.hero .glow{position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(var(--orange-rgb),.12), transparent 70%); z-index:0; pointer-events:none;}
.hero>*{position:relative; z-index:1;}
.hero h1{font-size:var(--fs-display); margin:var(--sp-4) 0 var(--sp-3);}
.hero p{max-width:60ch; margin:0 auto; font-size:var(--fs-xl); line-height:var(--lh-body); color:var(--body);}
.hero .loc{margin-top:var(--sp-5); font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:var(--tr-3); color:var(--mut); text-transform:uppercase;}

/* ---- product grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-6); padding-bottom:var(--sp-24);}
.card{position:relative; display:flex; flex-direction:column; border:var(--rule-hair) solid var(--edge); background:var(--panel-t); transition:border-color .2s;}
.card:hover{border-color:var(--edge2);}
.tick{position:absolute; width:16px; height:16px; z-index:2;}
.tick.tl{top:-1px;left:-1px;border-top:var(--rule) solid var(--orange);border-left:var(--rule) solid var(--orange);}
.tick.br{bottom:-1px;right:-1px;border-bottom:var(--rule) solid var(--orange);border-right:var(--rule) solid var(--orange);}
.card figure{margin:0; aspect-ratio:1; background:var(--panel-crt); border-bottom:var(--rule-hair) solid var(--edge); display:grid; place-items:center; overflow:hidden;}
/* contain, not cover: a square product photo still fills the frame
   exactly, and anything that is not square letterboxes instead of
   having its middle cropped out. Cover looked fine on the album art
   and beheaded the wordmark. */
.card figure img{width:100%; height:100%; object-fit:contain; padding:var(--sp-4);}
.card .body{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1;}
.card h3{margin:0; font-family:var(--stencil); font-weight:var(--fw-bold); font-size:22px; letter-spacing:var(--tr-1); color:var(--bright); line-height:1.1;}
.card .blurb{margin:0; font-size:var(--fs-md); line-height:var(--lh-body); color:var(--body); flex:1;}
.card .price{font-family:var(--mono); font-size:var(--fs-lg); color:var(--orange2); letter-spacing:var(--tr-1);}
.card .digital{font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:var(--tr-2); color:var(--mut); text-transform:uppercase;}

/* size picker */
.sizes{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.sizes button{background:none; border:var(--rule-hair) solid var(--edge2); color:var(--body); font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:1px; padding:6px 11px; cursor:pointer; transition:all .15s;}
.sizes button:hover{border-color:var(--orange2); color:var(--orange2);}
.sizes button[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:var(--bg);}

.add{width:100%; background:var(--orange); border:none; color:var(--bg); font-family:var(--mono); font-size:var(--fs-md); font-weight:var(--fw-mid); letter-spacing:var(--tr-3); text-transform:uppercase; padding:13px; cursor:pointer; transition:background .2s;}
.add:hover{background:var(--orange2);}
.add:disabled{background:var(--edge); color:var(--mut); cursor:not-allowed;}

/* Shown only on /?test=1, so an internal item on screen is never
   mistaken for something a fan is meant to buy. */
.testbanner{margin:0 0 var(--sp-6); border:var(--rule-hair) dashed var(--orange); background:rgba(var(--orange-rgb),.07); color:var(--orange2); font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--tr-1); padding:var(--sp-4) var(--sp-5);}

/* ---- cart drawer ---- */
.scrim{position:fixed; inset:0; background:rgba(var(--bg-rgb),.75); z-index:150; opacity:0; pointer-events:none; transition:opacity .2s;}
.scrim[data-open="true"]{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:160; background:var(--panel); border-left:var(--rule-hair) solid var(--edge); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease;}
.drawer[data-open="true"]{transform:translateX(0);}
.drawer header{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5) var(--sp-6); border-bottom:var(--rule-hair) solid var(--edge);}
.drawer header h2{margin:0; font-family:var(--stencil); font-weight:var(--fw-bold); font-size:24px; letter-spacing:var(--tr-1); color:var(--bright);}
.drawer .close{background:none; border:none; color:var(--mut); font-family:var(--mono); font-size:20px; cursor:pointer; padding:4px 8px;}
.drawer .close:hover{color:var(--orange);}
.lines{flex:1; overflow-y:auto; padding:var(--sp-4) var(--sp-6);}
.empty{padding:var(--sp-10) 0; text-align:center; font-family:var(--mono); font-size:var(--fs-md); color:var(--mut); letter-spacing:var(--tr-1);}
.line{display:grid; grid-template-columns:56px 1fr auto; gap:var(--sp-4); align-items:center; padding:var(--sp-4) 0; border-bottom:var(--rule-hair) dashed var(--edge);}
.line img{width:56px; height:56px; object-fit:cover; border:var(--rule-hair) solid var(--edge);}
.line .nm{font-size:var(--fs-md); color:var(--bright); line-height:1.35;}
.line .mono{font-family:var(--mono); font-size:var(--fs-2xs); color:var(--mut); letter-spacing:1px; text-transform:uppercase;}
.qty{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2);}
.qty button{width:24px; height:24px; background:none; border:var(--rule-hair) solid var(--edge2); color:var(--body); font-family:var(--mono); font-size:13px; line-height:1; cursor:pointer;}
.qty button:hover{border-color:var(--orange); color:var(--orange);}
.qty span{font-family:var(--mono); font-size:var(--fs-md); min-width:20px; text-align:center;}
.line .amt{font-family:var(--mono); font-size:var(--fs-md); color:var(--orange2); white-space:nowrap;}

.drawer footer{padding:var(--sp-5) var(--sp-6) var(--sp-6); border-top:var(--rule-hair) solid var(--edge);}
.totals{display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-md); color:var(--body); margin-bottom:var(--sp-2);}
.totals.grand{font-size:var(--fs-lg); color:var(--bright); margin-bottom:var(--sp-4);}
.note{font-family:var(--mono); font-size:var(--fs-2xs); color:var(--mut); letter-spacing:1px; line-height:1.6; margin:0 0 var(--sp-4);}
.checkout{width:100%; background:var(--orange); border:none; color:var(--bg); font-family:var(--mono); font-size:var(--fs-md); font-weight:var(--fw-mid); letter-spacing:var(--tr-3); text-transform:uppercase; padding:15px; cursor:pointer; transition:background .2s;}
.checkout:hover{background:var(--orange2);}
.checkout:disabled{background:var(--edge); color:var(--mut); cursor:not-allowed;}
.err{margin:var(--sp-3) 0 0; font-family:var(--mono); font-size:var(--fs-sm); color:var(--orange2); line-height:1.6;}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,14px); z-index:170; background:var(--panel); border:var(--rule-hair) solid var(--orange); color:var(--bright); font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--tr-1); padding:12px 20px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;}
.toast[data-show="true"]{opacity:1; transform:translate(-50%,0);}

/* ---- footer ---- */
.foot{border-top:var(--rule-hair) solid var(--edge-soft); padding:var(--sp-10) 0 var(--sp-12); text-align:center;}
.foot p{margin:0 0 var(--sp-3); font-family:var(--mono); font-size:var(--fs-2xs); color:var(--mut); letter-spacing:var(--tr-2); text-transform:uppercase; line-height:1.9;}
.foot a{color:var(--mut); text-decoration:none;}
.foot a:hover{color:var(--orange);}

@media (max-width:640px){
  .nav{padding:var(--sp-3) var(--sp-5); gap:var(--sp-3);}
  .nav-links{gap:var(--sp-4);}
  .hero{padding:var(--sp-12) 0 var(--sp-8);}
  .grid{grid-template-columns:1fr;}
}

/* Respect a reduced-motion preference: the drawer and toast still
   change state, they just stop sliding. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}