/* ==========================================================================
   Altus Vault — trading card & collectibles storefront demo · Altus Digital
   Plain CSS, no build step.

   Deliberately unlike every other demo in the set:
     barber      navy + red,      Fraunces
     med spa     espresso + gold, Cormorant + Jost
     skin studio moss + sand,     Outfit + DM Sans
     roofing     slate + copper,  Archivo + Inter
     hair        noir + blush,    Bodoni Moda + Manrope
     landscaping green,           Playfair + Inter
     this one    bone + ink + violet, Space Grotesk + IBM Plex Sans

   It also has a different job from the others: they sell a booking, this
   sells a product. So it wears the furniture buyers expect from a store —
   announcement bar, search, cart count, category tiles, price and condition
   on every card, add-to-cart on the grid — rather than a hero and a form.
   ========================================================================== */

:root{
  /* Ground */
  --bone:#F7F5F2;          /* paper */
  --bone-2:#EFECE6;        /* alt band */
  --paper:#FFFFFF;
  --ink:#141319;           /* near-black, faintly violet */
  --ink-800:#232230;
  --ink-700:#3A3848;

  /* Accent — electric violet, with gold reserved for graded/premium */
  --violet:#5B2BE0;
  --violet-600:#4A1FC4;    /* AA for small text on bone */
  --violet-300:#B9A2FF;    /* AA for small text on ink */
  --violet-tint:#F0EBFF;
  --gold:#B8862B;          /* AA on bone — graded slabs only */
  --gold-300:#E5C77A;

  /* Text */
  --body:#4A4857;
  --muted:#5E5C6D;         /* AA on bone and bone-2 */
  --on-dark:#EDEBF2;
  --on-dark-dim:#A9A6BA;   /* AA on ink */

  /* Status */
  --in-stock:#1B7A4B;
  --low:#A8571B;

  /* Type */
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;

  /* Space */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;  --s5:1.5rem;
  --s6:2rem;   --s7:2.75rem;--s8:3.5rem; --s9:5rem;  --s10:6.5rem;

  --wrap:1240px;
  --r:8px; --r-lg:14px; --r-pill:999px;
  --line:#E2DED6;
  --line-dark:rgba(255,255,255,.14);
  --sh:0 1px 2px rgba(20,19,25,.04), 0 8px 24px -16px rgba(20,19,25,.18);
  --sh-2:0 20px 50px -24px rgba(20,19,25,.34);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
[id]{ scroll-margin-top:96px; }
body{
  margin:0; background:var(--bone); color:var(--body);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea,button{ font-family:inherit; font-size:inherit; }
h1,h2,h3,h4{
  margin:0; font-family:var(--f-display); color:var(--ink);
  font-weight:600; line-height:1.1; letter-spacing:-.03em;
}
:focus-visible{ outline:3px solid var(--violet); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* transition:none rather than a ~0s duration — a forced near-zero transition
     can leave a property pinned at its start value in Chrome. */
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--s5); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:300;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem;
  border-radius:var(--r); font-size:.9rem; transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

/* ---------- Reveal ----------
   Opt-in: only hidden once the inline head script stamps html.js, and that
   class is revoked by the script tag's onerror, so a missing main.js can
   never leave the page blank. */
.js .rv{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
.js .rv[data-d="1"]{ transition-delay:.08s; }
.js .rv[data-d="2"]{ transition-delay:.16s; }
.js .rv[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1; transform:none; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.5rem; border-radius:var(--r);
  font-family:var(--f-body); font-size:.95rem; font-weight:600;
  letter-spacing:-.01em; border:1px solid transparent; text-align:center;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.btn--primary{ background:var(--violet); color:#fff; border-color:var(--violet); }
.btn--primary:hover{ background:var(--violet-600); border-color:var(--violet-600); }
.btn--dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--dark:hover{ background:var(--ink-800); border-color:var(--ink-800); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ background:var(--paper); border-color:var(--ink); }
.btn--light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--light:hover{ background:var(--bone-2); border-color:var(--bone-2); }
.btn--sm{ min-height:40px; padding:.5rem 1rem; font-size:.88rem; }
.btn--block{ width:100%; }
.btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }

/* ---------- Section heads ---------- */
.eyebrow{
  display:inline-block; font-family:var(--f-body);
  font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--violet-600);
}
.sec{ padding:var(--s9) 0; }
.sec--sm{ padding:var(--s8) 0; }
.sec--alt{ background:var(--bone-2); }
.sec--ink{ background:var(--ink); color:var(--on-dark); }
.sec--ink h2,.sec--ink h3{ color:#fff; }
.sec--ink .eyebrow{ color:var(--violet-300); }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s6); }
.sec-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-top:.4rem; }
.sec-head p{ margin-top:.5rem; color:var(--muted); font-size:.98rem; }
.sec-link{
  font-size:.9rem; font-weight:600; color:var(--violet-600);
  white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px;
}
.sec-link:hover{ text-decoration:underline; }

/* ==========================================================================
   ANNOUNCEMENT BAR + HEADER
   ========================================================================== */
.ann{
  background:var(--ink); color:var(--on-dark);
  font-size:.8rem; text-align:center; padding:.6rem var(--s4);
}
.ann b{ color:#fff; font-weight:600; }
.ann span{ color:var(--violet-300); }

.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(247,245,242,.94);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-bar{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:var(--s5); height:76px;
}
.brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brand svg{ width:32px; height:32px; flex:none; }
.brand b{
  display:block; font-family:var(--f-display); font-weight:700; font-size:1.16rem;
  letter-spacing:-.03em; color:var(--ink); line-height:1;
}
.brand i{
  display:block; font-style:normal; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:4px;
}

/* Search is the primary navigation in a store, so it gets the middle column */
.search{ position:relative; max-width:520px; width:100%; }
.search input{
  width:100%; height:46px; padding:0 2.75rem 0 2.6rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--ink); font-size:.94rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
.search svg{
  position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; fill:var(--muted); pointer-events:none;
}
.search kbd{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-body); font-size:.66rem; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:.15rem .4rem; background:var(--bone);
}

.hdr-act{ display:flex; align-items:center; gap:.35rem; flex:none; }
.icon-btn{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:var(--r);
  transition:background .18s var(--ease);
}
.icon-btn:hover{ background:var(--bone-2); }
.icon-btn svg{ width:20px; height:20px; fill:var(--ink); }
.cart-count{
  position:absolute; top:5px; right:4px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  background:var(--violet); color:#fff; border-radius:var(--r-pill);
  font-size:.62rem; font-weight:700; line-height:1;
}
.burger{ display:none; }

/* Category nav under the bar */
.subnav{ border-bottom:1px solid var(--line); background:var(--bone); }
.subnav ul{ display:flex; gap:var(--s6); overflow-x:auto; scrollbar-width:none; }
.subnav ul::-webkit-scrollbar{ display:none; }
.subnav a{
  display:inline-flex; align-items:center; min-height:46px;
  font-size:.88rem; font-weight:500; color:var(--body); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease);
}
.subnav a:hover,.subnav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--violet); }
.subnav .hot{ color:var(--violet-600); font-weight:600; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ background:var(--bone); border-bottom:1px solid var(--line); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:var(--s8); align-items:center;
  padding:var(--s9) 0;
}
.hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); letter-spacing:-.045em; }
.hero h1 em{ font-style:normal; color:var(--violet); }
.hero-lede{ margin-top:var(--s5); font-size:1.06rem; color:var(--body); max-width:46ch; }
.hero-media{ position:relative; }
.hero-media img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-2); }
/* a price tag pinned to the photograph — the fastest way to say "this is a shop" */
.hero-tag{
  position:absolute; left:-1.25rem; bottom:1.75rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:.9rem 1.1rem; box-shadow:var(--sh-2); min-width:200px;
}
.hero-tag span{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero-tag b{ display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--ink); margin-top:.3rem; letter-spacing:-.02em; }
.hero-tag i{ display:block; font-style:normal; font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:var(--violet); margin-top:.35rem; letter-spacing:-.03em; }

.hero-stats{ display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); }
.hero-stats div b{ display:block; font-family:var(--f-display); font-size:1.3rem; color:var(--ink); letter-spacing:-.03em; }
.hero-stats div span{ display:block; font-size:.8rem; color:var(--muted); margin-top:.15rem; }

/* ---------- Trust strip ---------- */
.trust{ border-bottom:1px solid var(--line); background:var(--paper); }
.trust ul{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); padding:var(--s5) 0; }
.trust li{ display:flex; align-items:center; gap:.7rem; font-size:.88rem; color:var(--body); }
.trust svg{ width:20px; height:20px; fill:none; stroke:var(--violet); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.trust b{ display:block; color:var(--ink); font-weight:600; font-size:.9rem; }
.trust span{ display:block; font-size:.78rem; color:var(--muted); }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.cats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
.cat{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cat img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.cat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,19,25,0) 34%, rgba(20,19,25,.82) 100%);
}
.cat-label{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:var(--s4) var(--s4) var(--s4); }
.cat-label b{ display:block; font-family:var(--f-display); font-size:1.06rem; color:#fff; letter-spacing:-.02em; }
.cat-label span{ display:block; font-size:.78rem; color:rgba(255,255,255,.8); margin-top:.15rem; }
@media (hover:hover){
  .cat:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
  .cat:hover img{ transform:scale(1.05); }
}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.grid-products{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
.prod{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
@media (hover:hover){
  .prod:hover{ border-color:var(--ink); box-shadow:var(--sh); transform:translateY(-2px); }
}
.prod-media{ position:relative; display:block; aspect-ratio:1; background:var(--bone-2); overflow:hidden; }
.prod-media img{ width:100%; height:100%; object-fit:cover; }
.prod-flags{ position:absolute; top:.6rem; left:.6rem; display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.flag{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .5rem; border-radius:5px; background:var(--ink); color:#fff;
}
.flag--graded{ background:var(--gold); color:#fff; }
.flag--sale{ background:var(--violet); }
.flag--low{ background:var(--low); }
.prod-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--s4); }
.prod-set{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.prod-name{
  margin-top:.35rem; font-family:var(--f-display); font-size:1rem; font-weight:600;
  color:var(--ink); letter-spacing:-.02em; line-height:1.28;
}
.prod-meta{ margin-top:.4rem; display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted); }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--line); flex:none; }
.stock{ color:var(--in-stock); font-weight:600; }
.stock--low{ color:var(--low); }
.prod-foot{ margin-top:auto; padding-top:var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.price{ font-family:var(--f-display); font-size:1.22rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; }
.price s{ display:block; font-size:.78rem; font-weight:400; color:var(--muted); letter-spacing:0; }
.add{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:40px; padding:.45rem .85rem; border-radius:var(--r);
  background:var(--ink); color:#fff; font-size:.84rem; font-weight:600;
  transition:background .18s var(--ease);
}
.add:hover{ background:var(--violet); }
.add svg{ width:15px; height:15px; fill:currentColor; }

/* ---------- Stars (demo data — see the note in the markup) ---------- */
.stars{ display:inline-flex; gap:1px; }
.stars svg{ width:12px; height:12px; fill:var(--gold); }
.rating{ display:flex; align-items:center; gap:.3rem; font-size:.75rem; color:var(--muted); }

/* ==========================================================================
   SPLIT BANDS
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.split img{ width:100%; border-radius:var(--r-lg); }
.split h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); }
.split p{ margin-top:var(--s4); color:var(--muted); }
.sec--ink .split p{ color:var(--on-dark-dim); }
.ticks{ margin-top:var(--s5); display:grid; gap:.75rem; }
.ticks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; }
.ticks svg{ width:19px; height:19px; flex:none; margin-top:1px; fill:none; stroke:var(--violet-300); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sec--ink .ticks li{ color:var(--on-dark); }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.news{ background:var(--ink); color:var(--on-dark); border-radius:var(--r-lg); padding:var(--s8) var(--s7); text-align:center; }
.news h2{ color:#fff; font-size:clamp(1.5rem,3vw,2rem); }
.news p{ margin-top:var(--s3); color:var(--on-dark-dim); max-width:48ch; margin-inline:auto; }
.news-form{ display:flex; gap:.6rem; max-width:26rem; margin:var(--s5) auto 0; }
.news-form input{
  flex:1 1 auto; min-width:0; height:48px; padding:0 1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r); color:#fff; font-size:.94rem;
}
.news-form input::placeholder{ color:var(--on-dark-dim); }
.news-form input:focus{ outline:none; border-color:var(--violet-300); }
.news-note{ margin-top:var(--s3); font-size:.76rem; color:var(--on-dark-dim); }

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.shop-head{ padding:var(--s7) 0 var(--s5); border-bottom:1px solid var(--line); }
.crumb{ font-size:.8rem; color:var(--muted); display:flex; gap:.5rem; align-items:center; }
.crumb a{ color:var(--violet-600); display:inline-flex; align-items:center; min-height:32px; }
.crumb a:hover{ text-decoration:underline; }
.shop-head h1{ margin-top:.6rem; font-size:clamp(1.8rem,4vw,2.6rem); }
.shop-head p{ margin-top:.5rem; color:var(--muted); }

.shop-layout{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:var(--s7); padding:var(--s7) 0 var(--s9); align-items:start; }
.facets{ position:sticky; top:104px; display:grid; gap:var(--s6); }
.facet h3{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.facet ul{ margin-top:var(--s3); display:grid; gap:.1rem; }
.facet label{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  font-size:.9rem; color:var(--body); min-height:38px;
}
.facet input{ width:17px; height:17px; accent-color:var(--violet); flex:none; }
.facet label span{ margin-left:auto; font-size:.76rem; color:var(--muted); }

.shop-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap; }
.shop-count{ font-size:.88rem; color:var(--muted); }
.shop-count b{ color:var(--ink); }
.sort{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--muted); }
.sort select{
  height:40px; padding:0 2rem 0 .7rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5z' fill='%235E5C6D'/%3E%3C/svg%3E") no-repeat right .4rem center/18px;
  -webkit-appearance:none; appearance:none; color:var(--ink); font-size:.88rem;
}
.shop-layout .grid-products{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.facet-toggle{ display:none; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s8); padding:var(--s7) 0 var(--s9); align-items:start; }
.pdp-gallery{ display:grid; gap:var(--s3); }
.pdp-main{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); }
.pdp-main img{ width:100%; aspect-ratio:1; object-fit:cover; }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.pdp-thumb{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper); padding:0; cursor:pointer;
  transition:border-color .18s var(--ease);
}
.pdp-thumb img{ width:100%; aspect-ratio:1; object-fit:cover; }
.pdp-thumb[aria-current="true"]{ border-color:var(--violet); box-shadow:0 0 0 2px var(--violet-tint); }

.pdp-info h1{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-top:.5rem; }
.pdp-price{ display:flex; align-items:baseline; gap:.75rem; margin-top:var(--s5); }
.pdp-price b{ font-family:var(--f-display); font-size:2.1rem; font-weight:700; color:var(--ink); letter-spacing:-.04em; }
.pdp-price s{ color:var(--muted); font-size:1rem; }
.pdp-price em{ font-style:normal; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--violet); padding:.24rem .5rem; border-radius:5px; }

.spec{ margin-top:var(--s5); border-top:1px solid var(--line); }
.spec div{ display:flex; justify-content:space-between; gap:var(--s4); padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.spec dt{ color:var(--muted); }
.spec dd{ margin:0; color:var(--ink); font-weight:500; text-align:right; }

.qty{ display:flex; align-items:center; gap:var(--s3); margin-top:var(--s6); }
.qty-box{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.qty-box button{ width:44px; height:48px; display:grid; place-items:center; font-size:1.1rem; color:var(--ink); }
.qty-box button:hover{ color:var(--violet); }
.qty-box span{ min-width:2.5rem; text-align:center; font-weight:600; color:var(--ink); }
.pdp-note{ margin-top:var(--s4); font-size:.82rem; color:var(--muted); }

.pdp-tabs{ margin-top:var(--s7); border-top:1px solid var(--line); }
.pdp-tab{ border-bottom:1px solid var(--line); }
.pdp-tab > button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:1.1rem 0; text-align:left;
  font-family:var(--f-display); font-weight:600; font-size:1rem; color:var(--ink); letter-spacing:-.02em;
}
.pdp-tab-icon{ position:relative; width:14px; height:14px; flex:none; }
.pdp-tab-icon::before,.pdp-tab-icon::after{
  content:""; position:absolute; background:var(--violet); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.pdp-tab-icon::before{ left:0; top:6px; width:14px; height:2px; }
.pdp-tab-icon::after{ left:6px; top:0; width:2px; height:14px; }
.pdp-tab > button[aria-expanded="true"] .pdp-tab-icon::after{ transform:rotate(90deg); opacity:0; }
/* max-height, not grid-template-rows: 0fr -> 1fr does not interpolate in
   current Chrome, so an accordion built that way simply snaps. */
.pdp-panel{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
.pdp-tab > button[aria-expanded="true"] + .pdp-panel{ max-height:44rem; }
.pdp-panel-in{ padding:0 0 1.25rem; font-size:.94rem; color:var(--body); }
.pdp-panel-in p + p{ margin-top:.7rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ background:var(--ink); color:var(--on-dark-dim); padding:var(--s8) 0 var(--s5); }
.ftr-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--s6); }
.ftr .brand b{ color:#fff; }
.ftr .brand i{ color:var(--on-dark-dim); }
.ftr-blurb{ margin-top:var(--s4); font-size:.88rem; max-width:34ch; }
.ftr h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:600; }
.ftr ul{ margin-top:var(--s4); display:grid; gap:.1rem; }
.ftr ul a{ display:inline-flex; align-items:center; min-height:38px; font-size:.9rem; transition:color .18s var(--ease); }
.ftr ul a:hover{ color:#fff; }
.ftr-bar{
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:.8rem;
}
.ftr-legal{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.ftr-legal a:hover{ color:#fff; }
.demo-note{
  margin-top:var(--s4); font-size:.76rem; color:var(--on-dark-dim);
  border-top:1px solid var(--line-dark); padding-top:var(--s4);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid-products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .shop-layout{ grid-template-columns:1fr; }
  .facets{ position:static; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-grid{ gap:var(--s7); }
}
@media (max-width:900px){
  .hdr-bar{ grid-template-columns:auto auto; height:66px; }
  .search{ display:none; }
  .burger{ display:grid; }
  .subnav ul{ gap:var(--s5); }
  .hero-grid{ grid-template-columns:1fr; padding:var(--s7) 0; }
  .hero-media{ order:-1; }
  .hero-tag{ left:auto; right:.75rem; bottom:.75rem; min-width:0; padding:.7rem .85rem; }
  .cats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split{ grid-template-columns:1fr; gap:var(--s6); }
  .trust ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pdp{ grid-template-columns:1fr; gap:var(--s6); }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:var(--s3); }
}
@media (max-width:680px){
  .grid-products,
  .shop-layout .grid-products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facets{ grid-template-columns:1fr; }
  .prod-body{ padding:.85rem; }
  .prod-name{ font-size:.92rem; }
  .prod-foot{ flex-direction:column; align-items:stretch; gap:.6rem; padding-top:.85rem; }
  .add{ justify-content:center; }
  .ftr-top{ grid-template-columns:1fr 1fr; gap:var(--s5); }
  .ftr-top > :first-child{ grid-column:1 / -1; }
  .news{ padding:var(--s7) var(--s5); }
  .news-form{ flex-direction:column; }
  .hero-stats{ gap:var(--s4) var(--s6); }
}
@media (max-width:420px){
  .trust ul{ grid-template-columns:1fr; }
  .pdp-thumbs{ grid-template-columns:repeat(4,1fr); }
}

/* The featured-listing tag was pinned over the middle of the photograph and
   covered the card it was describing. Drop it to the floor of the frame,
   where the image is out of focus anyway. */
.hero-tag{ left:-1.5rem; bottom:-1.25rem; }
@media (max-width:900px){ .hero-tag{ left:auto; right:.75rem; bottom:.75rem; } }

/* ==========================================================================
   ACCESSIBILITY FIXES — first audit pass
   ========================================================================== */

/* The graded badge was white on #B8862B: 3.24:1, and it carries the grade,
   which is the single most important word on a slab listing. #8F681F takes it
   to 5.04:1. The star fill uses the same token and reads fine darker. */
:root{ --gold:#8F681F; }

/* Footer legal links were 41x20 and 36x20. */
.ftr-legal a{ display:inline-flex; align-items:center; min-height:44px; }
.ftr-bar{ align-items:center; }

/* Breadcrumb links are short inline text; a 44px min-height would break the
   crumb row, so the hit area is expanded with a pseudo-element instead — the
   target grows, the layout does not move. */
.crumb a{ position:relative; }
.crumb a::after{ content:""; position:absolute; inset:-12px -8px; }

/* Facet rows: the checkbox is 17px but the whole label is clickable, so the
   label is what needs to clear 44. */
.facet label{ min-height:44px; }

/* ==========================================================================
   BRAND LAYER — "the display case"
   --------------------------------------------------------------------------
   The first build was a competent store in bone and violet, but it could have
   sold anything. This layer gives Altus Vault a signature of its own, taken
   from the product it sells: FOIL. A single holographic gradient runs through
   the mark, the rules, the grade chips and the hero card, and the hero itself
   is flipped to ink so the shop opens like a lit display cabinet rather than
   a page of stationery.

   Everything here is decorative or a colour swap. No content depends on it,
   every animation is disabled under prefers-reduced-motion, and the contrast
   ratios noted below were checked against the ink and bone grounds.
   ========================================================================== */

:root{
  /* The holo sweep. Violet is the brand; cyan, gold and rose are the
     refraction. Kept in one place so the mark, rules and chips can't drift. */
  --foil:linear-gradient(100deg,
    #8B6BFF 0%, #6FD9F5 20%, #E5C77A 40%, #FF9BD2 60%, #8B6BFF 82%, #6FD9F5 100%);
  --foil-soft:linear-gradient(100deg,
    rgba(139,107,255,.9), rgba(111,217,245,.9), rgba(229,199,122,.9), rgba(255,155,210,.9), rgba(139,107,255,.9));
  --foil-text:linear-gradient(96deg, #A98CFF 0%, #6FD9F5 52%, #C9B6FF 100%);
  --glow:rgba(91,43,224,.42);
  --case:#0E0D13;          /* one step below --ink: the inside of the cabinet */
}

/* Text painted with the foil. Used sparingly — one phrase per screen. */
.foil{
  background:var(--foil-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* A 2px foil hairline. The brand's punctuation mark. */
.foil-rule{ height:2px; border:0; margin:0; background:var(--foil); background-size:200% 100%; opacity:.85; }

/* ---------- Mark ----------
   The vault: a card slab seen head-on with a dial at its centre. */
.brand svg{ width:34px; height:34px; }
.brand b{ letter-spacing:-.035em; }

/* ---------- Announcement ticker ----------
   Was a single centred sentence. Now the brand motif repeats across the top
   of every page, which is what a store with an identity does. The strip is
   duplicated and translated; the duplicate run is hidden from the reading
   order so the copy is announced once. */
.ann{
  position:relative; background:var(--case); overflow:hidden;
  padding:0; height:38px; display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ann-track{ display:flex; flex:none; align-items:center; will-change:transform; animation:ticker 34s linear infinite; }
.ann-run{ display:flex; align-items:center; flex:none; }
.ann-item{
  display:inline-flex; align-items:center; gap:.55rem; flex:none;
  padding:0 1.35rem; font-size:.76rem; letter-spacing:.02em; color:var(--on-dark-dim);
  white-space:nowrap;
}
.ann-item b{ color:#fff; font-weight:600; }
.ann-item::after{
  content:""; width:6px; height:6px; flex:none; margin-left:1.1rem;
  background:var(--foil); transform:rotate(45deg); border-radius:1px;
}
@keyframes ticker{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
/* Without JS or with motion reduced the ticker still reads — it just holds. */
@media (prefers-reduced-motion:reduce){
  .ann-track{ animation:none; }
}

/* ---------- Eyebrow tick ----------
   Small foil diamond in front of every eyebrow. Cheap, repeated, and the
   thing you start recognising by the third section. */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow::before{
  content:""; width:6px; height:6px; flex:none;
  background:var(--foil); transform:rotate(45deg); border-radius:1px;
}

/* ==========================================================================
   HERO — the lit cabinet
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--case); color:var(--on-dark); border-bottom:0;
}
/* Violet spill from behind the card. */
.hero::before{
  content:""; position:absolute; z-index:-2; inset:-30% -10% auto auto;
  width:min(62rem,90%); aspect-ratio:1;
  background:radial-gradient(circle at 60% 45%, var(--glow) 0%, rgba(91,43,224,.16) 42%, transparent 68%);
  pointer-events:none;
}
/* The case: a faint grid, like the shelf glass. */
.hero::after{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.hero h1{ color:#fff; }
.hero .eyebrow{ color:var(--violet-300); }
.hero-lede{ color:var(--on-dark-dim); }
.hero-stats{ border-top-color:rgba(255,255,255,.14); }
.hero-stats div b{ color:#fff; }
.hero-stats div span{ color:var(--on-dark-dim); }
.hero .btn--outline{ color:#fff; border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.04); }
.hero .btn--outline:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }

/* The slab: the featured card sits in a foil-edged frame, lit from behind. */
.hero-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  padding:2px; background:var(--foil-soft);
  box-shadow:0 40px 90px -40px rgba(91,43,224,.75), 0 0 0 1px rgba(255,255,255,.06);
}
.hero-frame img{ position:relative; border-radius:calc(var(--r-lg) - 2px); box-shadow:none; }
/* The sheen. One pass every eight seconds — a glint, not a strobe. */
.hero-foil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:var(--r-lg);
  background:linear-gradient(112deg,
    transparent 36%, rgba(255,255,255,.26) 45%,
    rgba(185,162,255,.34) 50%, rgba(111,217,245,.22) 55%, transparent 64%);
  transform:translate3d(-130%,0,0);
  animation:sheen 8s cubic-bezier(.5,0,.2,1) 1.4s infinite;
}
@keyframes sheen{ 0%{ transform:translate3d(-130%,0,0); } 26%,100%{ transform:translate3d(130%,0,0); } }
@media (prefers-reduced-motion:reduce){
  .hero-foil{ animation:none; opacity:.2; transform:none; }
}
/* The price tag reads as a shelf label against the dark case. */
.hero-tag{
  background:rgba(24,23,32,.82); border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.9);
}
.hero-tag span{ color:var(--on-dark-dim); }
.hero-tag b{ color:#fff; }
.hero-tag i{ color:var(--violet-300); }

/* ---------- Header ----------
   The bar keeps its bone ground; the foil hairline underneath ties it to the
   case below and gives the sticky header an edge worth having. */
.hdr{ border-bottom:0; box-shadow:0 1px 0 var(--line); }
.hdr-foil{ height:2px; background:var(--foil); background-size:200% 100%; }

/* ==========================================================================
   PRODUCT CARDS — slabs, not tiles
   ========================================================================== */
/* The grade chip now looks like the label on a graded slab: ink body, foil
   edge, gold type. Gold-300 on ink is 8.9:1, better than the white-on-gold it
   replaces, and the grade is the most important word on the listing. */
.flag--graded{
  background:var(--ink); color:var(--gold-300);
  box-shadow:0 0 0 1px rgba(229,199,122,.55); letter-spacing:.12em;
}

/* A glint across the photograph on hover — the same move as the hero, at a
   quarter of the volume, and only where a pointer exists. */
@media (hover:hover){
  .prod-media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.30) 48%, rgba(185,162,255,.30) 54%, transparent 64%);
    transform:translate3d(-130%,0,0);
    transition:transform .85s cubic-bezier(.4,0,.2,1);
  }
  .prod:hover .prod-media::after{ transform:translate3d(130%,0,0); }
  .prod:hover{ border-color:var(--violet); box-shadow:0 18px 40px -26px var(--glow); }
  /* Category tiles get the same violet lift rather than a neutral shadow. */
  .cat:hover{ box-shadow:0 22px 50px -28px var(--glow); }
}
@media (prefers-reduced-motion:reduce){
  .prod-media::after{ display:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ position:relative; background:var(--case); }
.ftr-foil{ height:2px; background:var(--foil); background-size:200% 100%; }
.ftr .brand i{ color:var(--violet-300); opacity:.8; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero::after{ background-size:44px 44px; }
  .ann-item{ padding:0 1rem; font-size:.72rem; }
}

/* ---------- Two things the dark hero made obvious ----------
   1. The <figure> still carried the UA's 16px/40px margin, so on a phone the
      hero card was inset 40px on each side and read as a thumbnail.
   2. The featured tag sat on top of the card it describes. On a wide screen
      it hangs off the corner and that is fine; at one column there is no
      corner to hang off, so it comes out of the photograph entirely and
      becomes a caption under it — which is what a figcaption is for. */
.hero-media{ margin:0; }
@media (max-width:900px){
  .hero-tag{
    position:static; margin-top:var(--s4);
    display:grid; grid-template-columns:auto 1fr; align-items:baseline;
    gap:.2rem .75rem; padding:.85rem 1rem;
  }
  .hero-tag span{ grid-column:1 / -1; }
  .hero-tag i{ margin-top:0; justify-self:end; }
}