/* Vault 151 shop skin.
   The roller banner's language, arranged for a webstore: hard 3px ink rules,
   condensed italic display type, cream on red. Edges that should look torn are
   displaced with turbulence on a pseudo-element, never on the element holding
   the type, so photographs and prices stay crisp.

   This file is the homepage's alone. store.css still dresses the other seven
   pages, so nothing here can reach them. */

:root{
  --red:#C62F1D; --red-deep:#8E1C0E; --ink:#2A2A2A; --bolt:#111D1F;
  --cream:#F6EAD1; --cream-2:#EFE2C6;
  /* The banner palette had no way to say "it worked": confirmations pointed
     at a leaf token that was never defined here and rendered in plain ink.
     A racing green that belongs on a market-stall banner. 5.3:1 and 7:1 on
     cream. */
  --leaf:#2E6B43; --leaf-dark:#24573A;
  /* 5.4:1 on cream. The obvious #7A6A55 lands at 4.37 and fails body text. */
  --muted:#6B5B47;
  --f:"Barlow Condensed",system-ui,-apple-system,sans-serif;
  --wrap:1360px;
}
*{box-sizing:border-box}
/* Several panels are toggled with the hidden attribute, and a display rule of
   ours would otherwise outrank the browser's [hidden]{display:none}. */
[hidden]{display:none !important}
html{overflow-x:hidden}
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--f);
  font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
a{color:inherit}
button,input,select,textarea{font-family:var(--f)}
:focus-visible{outline:3px solid var(--bolt); outline-offset:2px}

/* Display voice: condensed, heavy, italic, uppercase. Used for headings and
   for anything that behaves like a stamp. */
h1,h2,h3,.stamp{
  font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:-.01em; margin:0;
}

/* Drawn marks, sized to the text they sit beside. store.js emits these with
   .ic; anywhere a parent needs a different size it overrides on the svg. */
.ic{width:1em; height:1em; flex:none; stroke:currentColor; fill:none; vertical-align:-.12em}

/* ============ announce + header ============ */
/* Header and hero share the red so there is no seam between them, and no rule
   under the header: the banner has no such line. */
.announce{
  background:var(--bolt); color:var(--cream); text-align:center;
  padding:7px 16px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.announce a{color:var(--cream); text-underline-offset:3px}

.topbar{position:sticky; top:0; z-index:40; background:var(--red)}
.topbar-in{
  max-width:var(--wrap); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:clamp(16px,2.4vw,38px);
}
/* The artwork carries its own shadow and red bolt edge, so no CSS filter goes
   near it; a second shadow reads as a mistake. */
.logo{flex:none; display:block; line-height:0}
.logo-img{height:clamp(40px,4.2vw,62px); width:auto}

.topnav{display:flex; gap:clamp(14px,1.8vw,26px)}
.topnav a{
  color:var(--cream); text-decoration:none; font-weight:800; font-size:15px;
  letter-spacing:.15em; text-transform:uppercase; padding-bottom:3px;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.topnav a:hover,.topnav a.on{border-bottom-color:var(--cream)}

.top-search{
  margin-left:auto; background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  padding:9px 12px; font-weight:700; font-size:14px; width:min(240px,22vw);
}
.top-search::placeholder{color:var(--muted)}
.search-wrap{position:relative; display:flex; flex:1; min-width:0}
.search-wrap .top-search{width:100%}
.search-drop{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--cream); border:3px solid var(--ink); max-height:min(420px,60vh); overflow-y:auto;
  box-shadow:8px 10px 0 rgba(17,29,31,.25);
}
.sd-row{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; cursor:pointer;
  background:none; border:0; border-bottom:1px solid rgba(17,29,31,.12); text-align:left; font-family:inherit; color:var(--ink);
}
.sd-row:hover,.sd-row.hot{background:var(--cream-2, #efe6d2)}
.sd-row img{width:34px; height:47px; object-fit:contain; flex:none; background:#e7ddc9}
.sd-row .sd-ph{width:34px; height:47px; flex:none; background:#e7ddc9}
.sd-name{font-weight:800; font-size:13px; line-height:1.2; display:block}
.sd-set{font-weight:700; font-size:11px; color:#6b6353; text-transform:uppercase; letter-spacing:.05em; display:block}
.sd-price{margin-left:auto; font-weight:900; font-style:italic; font-size:14px; white-space:nowrap}
.sd-all{justify-content:center; font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--red)}
@media(max-width:700px){ .search-drop{position:fixed; left:8px; right:8px; top:auto; margin-top:6px} }
.cart-btn{
  background:var(--cream); color:var(--ink); border:3px solid var(--ink); cursor:pointer;
  padding:10px 16px; font-weight:900; font-style:italic; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
}
.cart-btn:hover{background:var(--bolt); color:var(--cream)}
.cart-count{
  background:var(--bolt); color:var(--cream); min-width:20px; height:20px; padding:0 5px;
  display:inline-grid; place-items:center; font-style:normal; font-size:12px;
}
.cart-btn:hover .cart-count{background:var(--cream); color:var(--bolt)}

/* ============ hero ============ */
.hero{background:var(--red); position:relative}
.hero-in{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(18px,2.6vw,34px) 22px clamp(34px,4.6vw,58px);
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,54px); align-items:center;
}
.hero h1{
  color:var(--cream); font-size:clamp(38px,5.6vw,84px); line-height:.88;
  text-wrap:balance;
}
.hero-sub{
  margin:16px 0 0; color:var(--cream); max-width:38ch;
  font-weight:600; font-size:clamp(15px,1.25vw,18px); line-height:1.42;
}
.hero-ctas{display:flex; margin-top:26px; flex-wrap:wrap}
.cta-main,.cta-sell{
  font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.07em;
  font-size:clamp(14px,1.1vw,17px); padding:15px 26px; text-decoration:none;
  border:3px solid var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:9px;
}
.cta-main{background:var(--cream); color:var(--ink)}
.cta-main:hover{background:var(--bolt); color:var(--cream)}
/* The two sit shoulder to shoulder as one control, so the shared edge is drawn
   once rather than doubling into a 6px seam. */
.cta-sell{background:transparent; color:var(--cream); border-left-width:0}
.cta-sell:hover{background:var(--bolt); border-color:var(--bolt)}
.cta-main svg{width:14px; height:14px; fill:currentColor; flex:none}

.hero-stats{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; color:var(--cream);
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.stat-chip b{font-weight:900}

/* The stack: real scans of real stock, angled like cards dropped on a table.
   Populated by store.js from the priciest photographed cards. */
.hero-stack{position:relative; width:100%; max-width:560px; margin-left:auto; aspect-ratio:1/.78}
.hero-stack .hc{
  position:absolute; width:44%; border:3px solid var(--ink);
  box-shadow:11px 11px 0 rgba(17,29,31,.5); background:var(--red-deep);
}
.hero-stack .hc:nth-child(1){left:1%;  top:13%; transform:rotate(-9deg)}
.hero-stack .hc:nth-child(2){left:26%; top:0;   transform:rotate(-1deg); z-index:3; width:47%}
.hero-stack .hc:nth-child(3){left:49%; top:15%; transform:rotate(8deg)}
.hero-stack img{width:100%}

/* ============ the runner ============ */
/* A runner, not a navigation bar: it states what the shop deals in and keeps
   moving. It only reads as a torn band against red, so it carries its own red
   ground down the page. */
.stripwrap{background:var(--red); padding:0 0 14px}
.strip{position:relative; z-index:5; padding:7px 0; overflow:hidden}
.strip::before{
  content:""; position:absolute; left:-2%; right:-2%; top:0; bottom:0;
  background:var(--cream); filter:url(#rough); z-index:0;
}
.strip::after{
  content:""; position:absolute; left:-2%; right:-2%; top:100%; height:8px;
  background:var(--red-deep); filter:url(#rough); z-index:-1;
}
.strip-in{position:relative; z-index:1; display:flex; white-space:nowrap; will-change:transform}
.strip-in span{
  display:inline-flex; align-items:center; gap:clamp(16px,2.2vw,34px);
  padding-right:clamp(16px,2.2vw,34px);
  font-weight:800; font-size:clamp(12px,1.1vw,15px); letter-spacing:.24em; text-transform:uppercase;
}
.strip-in svg{width:1.5em; height:.56em; fill:var(--red); flex:none}

/* ============ page body ============ */
.wrap{max-width:var(--wrap); margin:0 auto; padding:30px 22px 70px}

.sec-head{display:flex; align-items:baseline; gap:16px; margin:34px 0 18px; flex-wrap:wrap}
.sec-head:first-child{margin-top:6px}
.sec-head h2{font-size:clamp(24px,3vw,42px)}
.sec-sub{font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.spacer{flex:1}
.bundle-open{
  color:var(--ink); font-weight:800; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; border-bottom:3px solid var(--red); padding-bottom:2px;
}
.bundle-open:hover{border-bottom-color:var(--ink)}
.sort{
  background:var(--cream); color:var(--ink); border:3px solid var(--ink); padding:9px 12px;
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}

.sold-ticker{
  border:3px solid var(--ink); background:var(--cream-2); padding:10px 14px; margin-bottom:18px;
  font-weight:700; font-size:14px; letter-spacing:.06em;
}
.sold-ticker b{font-weight:900; font-style:italic}

/* ============ shop layout ============ */
.shop-layout{display:grid; grid-template-columns:236px 1fr; gap:26px; align-items:start}
.side{position:sticky; top:104px; display:flex; flex-direction:column; gap:14px}
.side-card{border:3px solid var(--ink); background:var(--cream-2); padding:13px 14px}
.side-card h3{font-size:15px; letter-spacing:.12em; margin-bottom:9px}
.side-list{display:flex; flex-direction:column}
.side-list button{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:transparent; border:0; border-top:2px solid rgba(42,42,42,.18);
  padding:8px 2px; cursor:pointer; text-align:left;
  font-weight:700; font-size:14px; color:var(--ink);
}
.side-list button:first-child{border-top:0}
.side-list button:hover{color:var(--red)}
.side-list button.on{font-weight:900; font-style:italic; color:var(--red)}
.side-list .n{font-weight:800; font-size:12px; color:var(--muted); font-style:normal}
.side-list button.on .n{color:var(--red)}
.side-scroll{max-height:260px; overflow:auto}

.sell-promo{display:block; text-decoration:none; background:var(--red); color:var(--cream)}
.sell-promo b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:16px}
.sell-promo span{display:block; font-weight:600; font-size:13.5px; line-height:1.35; margin-top:5px}
.sell-promo .promo-cta{
  margin-top:9px; font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:12.5px; letter-spacing:.08em;
}
.sell-promo:hover{background:var(--bolt)}
.vault-why span{
  display:block; font-weight:700; font-size:13.5px; line-height:1.35; padding:5px 0;
  border-top:2px solid rgba(42,42,42,.18);
}
.vault-why span:first-of-type{border-top:0}

.mob-chips,.filters-toggle{display:none}
.chip{
  background:var(--cream); border:3px solid var(--ink); padding:7px 12px; cursor:pointer;
  font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.chip.on{background:var(--red); color:var(--cream)}
.chip .cn{font-weight:900; opacity:.7; margin-left:3px}

/* ============ the card ============ */
/* The card is grounded in the bolt's near black with a cream ticket across its
   foot. Red carries the hero and the bands, but a grid of red tiles competes
   with the card art it frames, so here the photograph is the colour and red is
   kept for the price. The outline is drawn rather than ruled, and lives on its
   own layer: filtering the whole card would wobble the photograph and the
   price along with it. */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:20px}
.pcard{
  position:relative; background:var(--bolt); color:var(--cream); display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.9,.2,1);
}
.pcard .edge{position:absolute; inset:0; border:3px solid var(--ink); pointer-events:none; z-index:3; filter:url(#rc1)}
.pcard:nth-child(3n+2) .edge{filter:url(#rc2)}
.pcard:nth-child(3n+3) .edge{filter:url(#rc3)}
.pcard:hover{transform:translate(-3px,-4px)}

.imgbox{position:relative; padding:16px 16px 12px; cursor:pointer}
/* A soft cast shadow, not the hard offset: on the dark ground the card should
   look lit rather than stuck on.
   Singles are portrait but sealed product is landscape or square, so the image
   box is pinned to card proportions and the picture is fitted inside it. Left
   to themselves the short tiles leave dead space under the photograph while the
   row stretches to the tallest card. */
.imgbox img{width:100%; aspect-ratio:63/88; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.imgbox.stockimg img{filter:none}
.noimg{
  display:grid; place-items:center; aspect-ratio:63/88; background:#1B2A2D; color:var(--cream);
}
.noimg svg{width:34%; height:auto; stroke:currentColor; fill:none}

.low-badge,.scan-badge,.flip-badge{
  font-weight:800; letter-spacing:.13em; text-transform:uppercase; font-size:11px;
}
.low-badge{
  position:absolute; top:12px; right:12px; z-index:4;
  background:var(--cream); color:var(--ink); padding:3px 7px; border:2px solid var(--ink);
}
/* The multi-copy chip was near-black on a near-black card. It keeps the dark
   fill so it stays distinct from the cream stock chip, and takes a cream edge
   to separate it from the field. */
.low-badge.multi{background:var(--bolt); color:var(--cream); border-color:var(--cream)}
.scan-badge{
  position:absolute; top:12px; left:12px; z-index:4;
  background:var(--red); color:var(--cream); padding:3px 7px;
  display:inline-flex; align-items:center; gap:5px;
}
/* Icons are drawn marks at text size, never free-floating artwork. */
.scan-badge svg,.flip-badge svg{width:12px; height:12px; flex:none; stroke:currentColor; fill:none}
.scan-badge i{font-style:normal}
.flip-badge{
  position:absolute; left:14px; bottom:14px; z-index:4; background:rgba(17,29,31,.86);
  color:var(--cream); padding:4px 8px; display:inline-flex; align-items:center; gap:5px;
  opacity:0; transition:opacity .18s ease;
}
.imgbox:hover .flip-badge{opacity:1}

/* the ticket, torn along its top edge to rhyme with the runner */
.info{position:relative; padding:12px 14px 14px; color:var(--ink); margin-top:auto}
.info::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-2px;
  background:var(--cream); filter:url(#rough); z-index:0;
}
.info > *{position:relative; z-index:1}
.name{font-weight:800; font-size:17px; line-height:1.15}
.set{font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.meta{display:flex; align-items:center; gap:9px; margin-top:9px; flex-wrap:wrap}
/* The price pushes the controls right, so the ticket stays one line deep. */
.price{font-weight:900; font-style:italic; font-size:23px; margin-right:auto; color:var(--red)}
.share{
  background:transparent; border:0; cursor:pointer; color:var(--muted); padding:4px; line-height:0;
}
.share svg{width:17px; height:17px; stroke:currentColor; fill:none}
.share:hover{color:var(--red)}
.add{
  background:var(--ink); color:var(--cream); border:0; padding:9px 15px; flex:none;
  font-weight:900; font-style:italic; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.add:hover:not(:disabled){background:var(--red)}
.add:disabled{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 2px var(--muted); cursor:default}

/* loading placeholders, sized like the cards they stand in for */
.skel{aspect-ratio:.62; background:var(--cream-2); border:3px solid rgba(42,42,42,.2); animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}

.empty{
  grid-column:1/-1; text-align:center; padding:54px 20px; border:3px solid var(--ink);
  background:var(--cream-2); font-weight:700; font-size:16px;
}
.empty-ball{display:none}

/* ============ featured row ============ */
.featured{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.fcard{position:relative; background:var(--bolt); color:var(--cream); text-decoration:none; display:block; border:3px solid var(--ink)}
.fcard:hover{transform:translate(-3px,-4px)}
.f-img{padding:13px}
.f-img img{width:100%; aspect-ratio:63/88; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.f-name{font-weight:800; font-size:16px; padding:0 13px}
.f-set{font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:0 13px; opacity:.85}
.f-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px 13px}

/* ============ trust ============ */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:56px}
.trust-tile{border:3px solid var(--ink); padding:16px 16px 18px; background:var(--cream-2)}
.trust-tile b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:16px; margin:9px 0 5px}
.trust-tile span{font-weight:600; font-size:14px; line-height:1.4; color:var(--ink)}
.t-ico{display:block; color:var(--red)}
.t-ico svg{width:26px; height:26px; stroke:currentColor; fill:none}

/* ============ basket drawer ============ */
.drawer-mask{position:fixed; inset:0; background:rgba(17,29,31,.6); z-index:60}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:61;
  background:var(--cream); border-left:3px solid var(--ink); display:flex; flex-direction:column;
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; background:var(--red); color:var(--cream);
}
.drawer-head h2{font-size:22px}
.iconbtn{background:transparent; border:0; color:inherit; cursor:pointer; padding:4px; line-height:0}
.iconbtn svg{width:20px; height:20px; stroke:currentColor; fill:none}
.drawer-body{flex:1; overflow:auto; padding:16px 18px}
.drawer-foot{padding:16px 18px; border-top:3px solid var(--ink); background:var(--cream-2)}

.cart-row{display:grid; grid-template-columns:44px 1fr auto auto; gap:10px; align-items:center; padding:11px 0; border-top:2px solid rgba(42,42,42,.18)}
.cart-row:first-child{border-top:0}
.cr-name{font-weight:800; font-size:15px; line-height:1.2}
.cr-price{font-weight:900; font-style:italic; font-size:16px}
.qty{display:flex; align-items:center; gap:8px; font-weight:800}
.qty button{background:var(--cream); border:2px solid var(--ink); width:34px; height:34px; display:grid; place-items:center; cursor:pointer; padding:0}
.qty button:hover{background:var(--ink); color:var(--cream)}
.qty svg{width:13px; height:13px; stroke:currentColor; fill:none}

.upsell{margin-bottom:12px}
.upsell-head{font-weight:900; font-style:italic; text-transform:uppercase; font-size:13px; letter-spacing:.1em; margin-bottom:8px}
.upsell-row{display:flex; gap:9px; overflow:auto}
.up-tile{background:var(--cream); border:3px solid var(--ink); padding:8px; cursor:pointer; width:106px; flex:none; text-align:left}
.up-tile:hover{background:var(--red); color:var(--cream)}
.up-name{display:block; font-weight:800; font-size:12.5px; line-height:1.2; margin-top:5px}
.up-price{display:flex; align-items:center; gap:4px; font-weight:900; font-style:italic; font-size:13px; margin-top:3px}
.up-price svg{width:11px; height:11px; stroke:currentColor; fill:none}
.up-emoji{display:block; aspect-ratio:1; background:var(--cream-2)}

.ship-nudge{margin-bottom:12px; font-weight:700; font-size:13.5px; display:flex; flex-direction:column; gap:6px}
.sn-done{display:inline-flex; align-items:center; gap:6px; font-weight:900; font-style:italic; text-transform:uppercase; color:var(--red)}
.sn-done svg{width:14px; height:14px; stroke:currentColor; fill:none}
.sn-bar{display:block; height:8px; background:var(--cream); border:2px solid var(--ink)}
.sn-bar i{display:block; height:100%; background:var(--red)}

.gc-row{display:flex; gap:8px; margin-bottom:9px}
.gc-row input{flex:1; min-width:0; background:var(--cream); border:3px solid var(--ink); padding:9px 11px; font-weight:700; font-size:14px}
.gc-apply{background:var(--ink); color:var(--cream); border:0; padding:9px 15px; font-weight:900; font-style:italic; text-transform:uppercase; font-size:12.5px; cursor:pointer}
.gc-apply:hover{background:var(--red)}
.msg{font-weight:700; font-size:13.5px; min-height:0}
.msg:empty{display:none}
.msg.ok{color:var(--leaf-dark)}
.msg.err{color:var(--red-deep)}

.total-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:10px 0; font-weight:900; font-style:italic; text-transform:uppercase; font-size:19px}
.gc-line{font-size:15px; color:var(--red)}
.ship-note{font-weight:600; font-size:13px; color:var(--muted); margin-bottom:10px}

.btn{width:100%; border:3px solid var(--ink); padding:13px 18px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.07em; font-size:15px; cursor:pointer; display:block}
.btn.primary{background:var(--red); color:var(--cream)}
.btn.primary:hover{background:var(--bolt)}
.btn.ghost{background:transparent; color:var(--ink); margin-top:9px; font-size:13px; padding:10px 16px}
.btn.ghost:hover{background:var(--ink); color:var(--cream)}
.btn:disabled{opacity:.5; cursor:default}
.field{display:block; margin-top:10px; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.field input,.field textarea{width:100%; margin-top:5px; background:var(--cream); border:3px solid var(--ink); padding:9px 11px; font-weight:700; font-size:14px; letter-spacing:0; text-transform:none}

/* ============ mailing list band ============ */
.ml-band{background:var(--red); color:var(--cream); border-top:3px solid var(--ink)}
.ml-in{max-width:var(--wrap); margin:0 auto; padding:34px 22px; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.ml-copy b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:clamp(20px,2.4vw,30px)}
.ml-copy span{display:block; font-weight:600; font-size:15px; line-height:1.4; margin-top:7px; max-width:46ch}
.ml-form{display:flex; gap:9px}
.ml-form input{flex:1; min-width:0; background:var(--cream); color:var(--ink); border:3px solid var(--ink); padding:13px; font-weight:700; font-size:15px}
.ml-form button{background:var(--cream); color:var(--ink); border:3px solid var(--ink); padding:13px 20px; font-weight:900; font-style:italic; text-transform:uppercase; font-size:14px; cursor:pointer; white-space:nowrap}
.ml-form button:hover{background:var(--bolt); color:var(--cream)}
.ml-msg{grid-column:1/-1; font-weight:800; font-size:14px}
.ml-code{font-weight:900; font-style:italic; letter-spacing:.1em}

/* ============ footer ============ */
footer{background:var(--bolt); color:var(--cream); padding:44px 22px 26px}
.foot-grid{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px}
.foot-grid b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:16px; letter-spacing:.06em; margin-bottom:9px}
.foot-grid a,.foot-grid span{display:block; font-weight:600; font-size:14px; line-height:1.9; text-decoration:none}
.foot-grid a:hover{color:var(--red); text-decoration:underline}
.foot-grid p{font-weight:600; font-size:14px; line-height:1.5; max-width:42ch; margin:0}
/* The cream wordmark, whose bolt stays red against the near-black footer.
   The header artwork was built for the red ground and its bolt vanishes here. */
.foot-brand{margin-bottom:14px}
.foot-brand img{height:46px; width:auto}
.logo-ball,.foot-ball{display:none}
.foot-legal{max-width:var(--wrap); margin:30px auto 0; padding-top:16px; border-top:2px solid rgba(246,234,209,.25); font-weight:600; font-size:13px}

.scan-badge.on-img{top:6px; left:6px; font-size:9px}

.v-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80;
  background:var(--bolt); color:var(--cream); border:3px solid var(--cream);
  padding:12px 20px; font-weight:800; font-size:14px;
}

/* ============ responsive ============ */
@media(max-width:1000px){
  .shop-layout{grid-template-columns:1fr}
  .side{position:static; display:none}
  .side.open{display:flex}
  .mob-chips{display:flex; gap:9px; overflow-x:auto; padding-bottom:12px; margin-bottom:4px}
  .filters-toggle{
    display:flex; align-items:center; gap:8px; width:100%; margin-bottom:14px;
    background:var(--cream); border:3px solid var(--ink); padding:11px 14px; cursor:pointer;
    font-weight:900; font-style:italic; text-transform:uppercase; font-size:13.5px; letter-spacing:.07em;
  }
  .ft-count{margin-left:auto; background:var(--red); color:var(--cream); padding:1px 7px; font-style:normal}
  .ft-count:empty{display:none}
  .ml-in,.foot-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr}
  /* The headline leads on a phone. The stack used to jump the queue and put
     three images above the promise, the CTAs and the stats. */
  .hero-stack{max-width:420px; margin:18px auto 0}
  .trust{margin-top:40px}
  /* The nav drops to its own line rather than disappearing: a shopper on a
     phone still needs to reach the buylist and the gift cards, and search is
     how you find one card among hundreds. */
  .topbar-in{flex-wrap:wrap; gap:12px; padding:10px 16px 0}
  .logo-img{height:38px}
  .top-search{margin-left:0; flex:1; width:auto; min-width:0; padding:7px 10px}
  .cart-btn{padding:8px 13px}
  .topnav{
    order:3; width:100%; gap:20px; overflow-x:auto; scrollbar-width:none;
    margin-top:2px; padding:9px 0 10px; border-top:2px solid rgba(246,234,209,.3);
  }
  .topnav::-webkit-scrollbar{display:none}
  /* The nav scrolls but nothing said so; the fade does. */
  .topnav{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
  .topnav a{font-size:13.5px; letter-spacing:.12em}
  .side{top:96px}
}
@media(max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px}
  .name{font-size:15px}
  .price{font-size:20px}
  /* A four figure price plus the copy-link button will not fit beside Add on a
     150px card, and Add is the one that has to stay. The link is a nicety and
     goes first; if a price is longer still, the row wraps rather than spilling. */
  .share{display:none}
  /* Two badges cannot share the top of a 150px card, so the camera keeps its
     mark and drops its label; the tooltip still explains it. */
  .scan-badge i{display:none}
  .hero-ctas{flex-direction:column; align-items:stretch}
  .cta-sell{border-left-width:3px; border-top-width:0}
  .announce{font-size:11.5px; letter-spacing:.1em}
  /* Three controls on one line at 375px: the wordmark gives up the room, so
     the search field stays wide enough to be worth tapping. */
  .topbar-in{gap:10px; padding:9px 14px 0}
  .logo-img{height:30px}
  .top-search{min-width:104px; font-size:13px}
  .cart-btn{padding:8px 10px; font-size:12px; gap:6px}
  .topnav{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============ content pages ============ */
/* Everything below dresses the pages that are not the shop: about, sell, gift
   cards, complete-your-set, checkout return. They share the chrome above and
   add a prose voice, because those pages are mostly reading and forms. */
.page{max-width:760px; margin:0 auto; padding:34px 22px 70px}
.page.wide{max-width:var(--wrap)}
.page h1{font-size:clamp(30px,4.4vw,52px); line-height:.94; text-wrap:balance}
.page h2{font-size:clamp(20px,2.4vw,28px); margin:38px 0 10px}
.page h3{font-size:17px; letter-spacing:.1em; margin:24px 0 8px}
.page .lead{font-weight:700; font-size:clamp(16px,1.5vw,19px); line-height:1.45; margin:14px 0 0; max-width:56ch}
.page p,.page li{font-weight:600; font-size:15.5px; line-height:1.62; max-width:68ch}
.page p{margin:12px 0}
.page ul{margin:12px 0; padding-left:20px}
.page li{margin:6px 0}
.page a{color:var(--red); font-weight:800; text-underline-offset:3px}
.page a:hover{color:var(--ink)}
.page .fine{font-weight:600; font-size:13px; color:var(--muted); margin-top:34px; max-width:74ch}

/* A stated promise or a callout. Ink on cream with a drawn edge, never a tinted
   panel with a coloured spine. */
.note{position:relative; background:var(--cream-2); padding:16px 18px; margin:18px 0}
/* Its own filter, not the card's: a callout is far larger than a card, so the
   card's frequency and displacement tore the border off its own box. */
.note::before{content:""; position:absolute; inset:0; border:3px solid var(--ink); filter:url(#rbox); pointer-events:none}
.note > *{position:relative}
/* Only the callout's own title, not every bold word inside it. */
.note > b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:16px; margin-bottom:6px}
.note ul{margin:8px 0 0}

/* The page's own masthead: a red band under the header so a content page opens
   with the same colour the shop does. */
.page-head{background:var(--red); color:var(--cream)}
.page-head .in{max-width:var(--wrap); margin:0 auto; padding:clamp(26px,4vw,52px) 22px}
.page-head h1{color:var(--cream); font-size:clamp(32px,5vw,64px); line-height:.9}
.page-head p{color:var(--cream); font-weight:600; font-size:clamp(15px,1.3vw,18px); line-height:1.4; max-width:52ch; margin:14px 0 0}

/* Forms on the content pages reuse the drawer's controls at a larger size. */
.form{display:grid; gap:14px; margin:22px 0}
.form label{display:block; font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.form input,.form select,.form textarea{
  width:100%; margin-top:6px; background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  padding:12px 13px; font-weight:700; font-size:15px; letter-spacing:0; text-transform:none;
}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.btn.wide{width:auto; padding:14px 28px; display:inline-block}

/* ============ sell page ============ */
.sell-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.panel{position:relative; background:var(--cream-2); padding:18px}
.panel::before{content:""; position:absolute; inset:0; border:3px solid var(--ink); filter:url(#rbox); pointer-events:none}
.panel > *{position:relative}
.panel h2{font-size:22px; margin-bottom:4px}
.sub{font-weight:600; font-size:13.5px; line-height:1.45; color:var(--muted)}
.big-search{
  width:100%; margin:12px 0; background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  padding:13px 14px; font-weight:800; font-size:16px;
}
.big-search::placeholder{color:var(--muted); font-weight:600}

/* search results */
.result{display:flex; align-items:center; gap:11px; padding:10px 0; border-top:2px solid rgba(42,42,42,.18)}
/* The API hands back a full size card image; without this the thumbnail sets
   the row height to 357px. */
.result img{width:38px; height:auto; flex:none; border:2px solid var(--ink)}
.result:first-child{border-top:0}
.r-info{flex:1; min-width:0}
.r-name{font-weight:800; font-size:15px; line-height:1.2}
.r-set{font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.offer-tag{font-weight:900; font-style:italic; font-size:17px; color:var(--red); white-space:nowrap}
.addbtn{
  background:var(--ink); color:var(--cream); border:0; padding:8px 13px; cursor:pointer; flex:none;
  font-weight:900; font-style:italic; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
}
.addbtn:hover{background:var(--red)}
.spin{font-weight:700; font-size:14px; color:var(--muted); padding:10px 0}

/* cash or credit */
.mode-seg{display:flex; margin:12px 0}
.mode-seg button{
  flex:1; background:transparent; color:var(--ink); border:3px solid var(--ink); cursor:pointer; padding:10px;
  font-weight:900; font-style:italic; font-size:13px; letter-spacing:.07em; text-transform:uppercase;
}
.mode-seg button + button{border-left-width:0}
.mode-seg button.on{background:var(--red); color:var(--cream)}
.ref-toggle{
  background:transparent; border:0; color:var(--red); cursor:pointer; padding:2px 0; text-align:left;
  font-weight:800; font-size:13.5px; text-decoration:underline; text-underline-offset:3px;
}
.photo-note,.ref-note{
  background:var(--cream); border:3px solid var(--ink); padding:11px 13px; margin:11px 0;
  font-weight:600; font-size:13.5px; line-height:1.45;
}
.ref-note{border-style:dashed}

/* the running quote */
.q-item{padding:11px 0; border-top:2px solid rgba(42,42,42,.18)}
.q-item:first-child{border-top:0}
.q-top{display:flex; align-items:center; gap:10px}
.q-top .cr-name{flex:1; min-width:0; font-weight:800; font-size:14.5px; line-height:1.2}
.q-top .cr-price{font-weight:900; font-style:italic; font-size:16px; color:var(--red)}
.q-ctrl{display:flex; align-items:center; gap:8px; margin-top:7px}
.cond-sel{background:var(--cream); color:var(--ink); border:2px solid var(--ink); padding:5px 8px; font-weight:700; font-size:12.5px}
.q-mkt{font-weight:600; font-size:12px; color:var(--muted)}
.q-warn{font-weight:700; font-size:12.5px; color:var(--red-deep); margin-top:5px}
.offer-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:14px;
  padding-top:12px; border-top:3px solid var(--ink);
  font-weight:900; font-style:italic; text-transform:uppercase; font-size:21px;
}
.small-print{font-weight:600; font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:11px}
@media(max-width:900px){ .sell-grid{grid-template-columns:1fr} }

/* ============ codes ============ */
/* A voucher code is a thing you read back to us, so it is stamped rather than
   styled: monospaced digits, wide tracking, selectable in one tap. */
.code-stamp{
  background:var(--bolt); color:var(--cream); border:3px solid var(--ink); padding:16px 10px;
  font-weight:900; font-style:italic; font-size:26px; letter-spacing:.14em; user-select:all;
}
.code-stamp.small{font-size:19px; padding:11px 10px; margin-top:8px}
.thanks-box{position:relative; text-align:center; margin-top:18px; padding:14px}
.thanks-box::before{content:""; position:absolute; inset:0; border:3px dashed var(--ink); pointer-events:none}
.thanks-box > *{position:relative}
.thanks-box b{display:block; font-weight:900; font-style:italic; text-transform:uppercase; font-size:15px}


/* The deep-link landing: a shared card announces itself instead of arriving
   silently in the middle of a grid. */
.pcard.hl{outline:4px solid var(--red); outline-offset:4px}

/* The viewer's buy row: the moment of highest desire finally has an action. */
.v3-buy{display:flex; align-items:center; gap:16px; margin-top:14px}
.v3-price{font-size:24px; font-weight:900; color:var(--cream); letter-spacing:.02em}
.v3-buy .add{background:var(--cream); color:var(--ink); border:3px solid var(--cream);
  padding:10px 22px; font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:.08em; font-size:13.5px; cursor:pointer}
.v3-buy .add:hover{background:transparent; color:var(--cream)}
.v3-buy .add:disabled{opacity:.55; cursor:default}
.v3-buy .add:disabled:hover{background:var(--cream); color:var(--ink)}
.v3-cond{color:rgba(246,234,209,.78); font-size:12.5px; font-weight:600; max-width:440px;
  text-align:center; margin-top:12px; line-height:1.5}
.v3-cond a{color:var(--cream)}

@media(max-width:1000px){
  .qty button{width:42px; height:42px}
  .qty svg{width:15px; height:15px}
}


/* ============ the card's own page ============ */
.pp-body{background:var(--cream)}
.pp{max-width:var(--wrap); margin:0 auto; padding:26px clamp(16px,3vw,40px) 70px}
.pp-back{display:inline-block; color:var(--ink); font-weight:900; font-style:italic;
  text-transform:uppercase; font-size:13px; letter-spacing:.08em; text-decoration:none; margin-bottom:16px}
.pp-back:hover{color:var(--red)}
.pp-gone-note{background:var(--cream-2); border:3px solid var(--ink); padding:10px 14px;
  font-weight:700; font-size:13.5px; margin-bottom:16px}
.pp-hero{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,3.5vw,48px); align-items:start}

.pp-stage{background:var(--bolt); border:3px solid var(--ink); padding:clamp(22px,3vw,44px);
  display:flex; flex-direction:column; align-items:center; gap:14px; touch-action:none; cursor:grab;
  perspective:900px; min-height:380px; justify-content:center}
.pp-stage:active{cursor:grabbing}
.pp-stage .card3d{position:relative; width:min(320px,70vw); aspect-ratio:63/88;
  transform-style:preserve-3d; transition:transform .06s linear}
.pp-stage .v3f,.pp-stage .v3b{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.pp-stage .v3f{transform:rotateY(0deg) translateZ(0.4px)}
.pp-stage .v3b{transform:rotateY(180deg)}
.pp-stage .v3-brand{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:#1a2629; border:2px dashed rgba(246,234,209,.3); color:var(--cream);
  font-weight:900; font-style:italic; text-transform:uppercase}
.pp-stage .v3-brand i{font-size:11px; font-weight:600; font-style:normal; opacity:.6; text-transform:none}
.pp-hint{color:rgba(246,234,209,.82); font-size:13.5px; font-weight:600; text-align:center; max-width:360px}
.pp-sleeve{color:rgba(246,234,209,.68); font-size:12.5px; font-weight:600; text-align:center; max-width:400px; line-height:1.5}
.pp-noimg{color:rgba(246,234,209,.6); font-weight:700; padding:60px 20px; text-align:center}

.pp-ticket h1{font-size:clamp(30px,4.2vw,48px); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:.01em; line-height:.95; margin:0 0 6px}
.pp-set{color:var(--muted); font-weight:700; font-size:14.5px; margin-bottom:16px}
.pp-price{font-size:clamp(30px,3.4vw,40px); font-weight:900; letter-spacing:.01em}
.pp-stock{color:var(--red-deep); font-weight:800; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; margin:4px 0 16px}
.pp-copies-lbl{display:block; font-weight:800; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:8px}
.pp-copies-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.pp-copy{background:var(--cream); border:3px solid var(--ink); padding:6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:800; font-size:12.5px}
.pp-copy img{width:64px; aspect-ratio:63/88; object-fit:cover; display:block}
.pp-copy.on{border-color:var(--red); outline:2px solid var(--red)}
.pp-acts{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.pp-add{background:var(--red); color:var(--cream); border:3px solid var(--ink); padding:14px 30px;
  font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.08em;
  font-size:15px; cursor:pointer}
.pp-add:hover{background:var(--red-deep)}
.pp-add:disabled{background:var(--cream-2); color:var(--muted); cursor:default}
.pp-share{background:var(--cream); border:3px solid var(--ink); padding:14px 18px; cursor:pointer;
  font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.08em; font-size:13px}
.pp-share:hover{background:var(--ink); color:var(--cream)}
.pp-reserve-hint{color:var(--muted); font-weight:600; font-size:13.5px; margin-top:10px}
.pp-note{background:var(--cream-2); border:3px solid var(--ink); padding:12px 16px; margin-top:18px}
.pp-note b{display:block; font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:12px; letter-spacing:.08em; margin-bottom:4px}
.pp-note span{font-weight:600; font-size:14px; line-height:1.55}
.pp-cond{color:var(--muted); font-weight:600; font-size:13.5px; margin-top:14px; line-height:1.5}
.pp-cond a{color:var(--ink)}

.pp-more{margin-top:54px}
.pp-more h2{font-weight:900; font-style:italic; text-transform:uppercase; font-size:22px; margin:0 0 14px}
.pp-more-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px}
.pp-mini{background:var(--cream-2); border:3px solid var(--ink); padding:8px; text-decoration:none;
  color:var(--ink); display:flex; flex-direction:column; gap:6px}
.pp-mini:hover{border-color:var(--red)}
.pp-mini img{width:100%; aspect-ratio:63/88; object-fit:cover; display:block}
.pp-mini-no{width:100%; aspect-ratio:63/88; background:var(--cream); border:2px dashed var(--muted)}
.pp-mini-t{font-weight:800; font-size:13px; line-height:1.2}
.pp-mini-p{font-weight:900; font-size:14px}
.pp-gone{text-align:center; padding-top:80px}
.pp-gone h1{font-weight:900; font-style:italic; text-transform:uppercase; font-size:34px}
.pp-gone p{color:var(--muted); font-weight:600; margin:12px 0 26px}
.pp-gone .pp-add{display:inline-block; text-decoration:none}
a.cart-btn{text-decoration:none; display:inline-flex; align-items:center; gap:7px}

@media(max-width:900px){
  /* The name and the price lead on a phone; the stage follows. */
  .pp-hero{grid-template-columns:1fr}
  .pp-ticket{order:-1}
  .pp-stage{min-height:0}
}