/* store.css — shared storefront theme for generated product + collection pages.
   Tokens copied from public/index.html so the whole site is ONE design system: the same vault
   black, teal and gold, the same glass cards, the same particle background sitting behind it.
   Generated pages link this instead of inlining their own styles, so a change here restyles all
   1,700+ pages on the next regen (and instantly for pages already served). */

:root{
  --bg:#0A0A0A; --bg-2:#0e1213;
  --teal:#14808C; --teal-lite:#22a7b6;
  --gold:#FFC233; --gold-deep:#e0a41f;
  --red:#E11D2A; --white:#FFFFFF;
  --muted:#B9C4C6; --muted-dim:#7f8a8c;
  --line:rgba(185,196,198,.14); --line-strong:rgba(255,194,51,.30);
  --card:rgba(255,255,255,.028); --card-hi:rgba(255,255,255,.05);
  --glass-blur:14px; --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Arial Narrow','Bebas Neue','Oswald',"Helvetica Neue",Arial,sans-serif;
  --font-body:system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--white);
  font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
/* Ambient vault glow beneath the particle canvas — identical to the home page. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% -8%, rgba(20,128,140,.22), transparent 60%),
    radial-gradient(60% 55% at 100% 108%, rgba(255,194,51,.10), transparent 55%),
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%),
    var(--bg);
}
#bg-canvas{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;display:block;width:100vw;height:100vh;height:100dvh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold);color:#111}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
.shead{
  position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.shead .row{display:flex;align-items:center;gap:1rem;padding:.85rem 0;flex-wrap:wrap}
.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-size:1.05rem;white-space:nowrap}
.brand span{color:var(--white)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{width:32px;height:32px;flex:0 0 auto}
.brand-word{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:1.02rem;line-height:1;display:flex;flex-direction:column;
}
.brand-word b{color:var(--gold)}
.brand-word span{color:var(--white)}
.brand-word small{
  font-family:var(--font-body);font-weight:700;letter-spacing:.38em;
  font-size:.46rem;color:var(--teal-lite);margin-top:3px;
}
.acctlink{white-space:nowrap}
.acctlink.on{color:var(--gold);font-weight:650}
@media (max-width:640px){
  .brand-word{font-size:.86rem;letter-spacing:.1em}
  .brand-word small{letter-spacing:.28em}
}
.snav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.92rem;color:var(--muted);margin-left:auto}
.snav a:hover{color:var(--gold)}
.cartlink{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-strong);
  border-radius:999px;padding:.45rem .9rem;color:var(--gold);font-weight:650;font-size:.9rem}
.cartlink:hover{background:rgba(255,194,51,.10)}
.cartcount{background:var(--gold);color:#1a1204;border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;padding:0 .35em}

/* ---------- breadcrumb ---------- */
.crumb{color:var(--muted-dim);font-size:.85rem;padding:1.4rem 0 .2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.5}

/* ---------- product ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;padding:1.2rem 0 4rem;align-items:start}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:1.6rem}}
.gal{position:sticky;top:92px}
@media(max-width:860px){.gal{position:static}}
.hero{
  width:100%;aspect-ratio:1;object-fit:contain;border-radius:18px;
  background:var(--card);border:1px solid var(--line);padding:1rem;
}
.thumbs{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.7rem}
.thumbs img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:var(--card);
  border:1px solid var(--line);padding:.3rem;cursor:pointer;transition:border-color .2s}
.thumbs img:hover,.thumbs img.on{border-color:var(--gold)}
.pdp h1{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.14;
  margin:.1rem 0 .7rem;letter-spacing:.01em}
.price{font-size:2.1rem;font-weight:800;color:var(--gold);margin:.2rem 0 .1rem;font-variant-numeric:tabular-nums}
.meta{color:var(--muted);font-size:.94rem;margin:.3rem 0}
.meta b{color:var(--white);font-weight:650}
.pill{display:inline-flex;align-items:center;gap:.4em;font-size:.66rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;padding:.36em .75em;border-radius:999px}
.pill.stock{background:rgba(20,128,140,.22);color:#7fe6f0;border:1px solid rgba(34,167,182,.4)}
.pill.out{background:rgba(225,29,42,.16);color:#ff9aa1;border:1px solid rgba(225,29,42,.4)}
.pill.new{background:rgba(255,194,51,.18);color:#ffd979;border:1px solid rgba(255,194,51,.45)}
.buybox{margin:1.4rem 0 0;padding:1.3rem;border:1px solid var(--line-strong);border-radius:16px;
  background:var(--card-hi);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:12px;
  padding:1rem 1.4rem;font-weight:750;font-size:1rem;transition:transform .08s,filter .18s;width:100%}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,#f4cf7a,var(--gold));color:#1a1204}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--white);margin-top:.6rem}
.btn-ghost:hover{background:rgba(255,194,51,.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.shipnote{color:var(--muted);font-size:.86rem;margin-top:.85rem;line-height:1.5}
.desc{margin-top:1.6rem;color:var(--muted);font-size:.95rem;line-height:1.7}
.trust{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:1.2rem;color:var(--muted-dim);font-size:.84rem}

/* ---------- collection grid ---------- */
.chead{padding:2.2rem 0 .6rem}
.chead h1{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 .3rem;letter-spacing:.02em}
.chead p{color:var(--muted);margin:0;font-size:.98rem}
.facets{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem}
.facet{font-size:.85rem;font-weight:600;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);transition:.2s}
.facet:hover{color:var(--white);border-color:var(--gold)}
.facet.on{background:rgba(255,194,51,.14);border-color:var(--gold);color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;padding-bottom:3.5rem}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  background:var(--card);transition:transform .22s var(--ease),border-color .22s}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.card .thumb{position:relative;aspect-ratio:1;background:#0d0f10;display:flex;align-items:center;justify-content:center;padding:.7rem}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .thumb .pill{position:absolute;top:10px;left:10px;z-index:2}
.card .body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card .t{font-size:.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card .p{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.card .go{font-size:.78rem;color:var(--muted-dim);text-transform:uppercase;letter-spacing:.1em}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem}

/* ---------- footer ---------- */
.sfoot{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--muted-dim);font-size:.86rem}
.sfoot a{color:var(--muted)}
.sfoot a:hover{color:var(--gold)}
.sfoot .fr{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:.7rem}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);z-index:99;
  background:var(--gold);color:#1a1204;font-weight:750;padding:.85rem 1.3rem;border-radius:12px;
  transition:transform .3s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{transform:translateX(-50%) translateY(0)}


 * (append only; changes nothing above it)
 * ==========================================================================*/

/* ============================================================
   STOREFRONT HERO — .shero
   ⚠️ NOT `.hero`. `.hero` in this file is the product-page gallery image
   (`<img class="hero">` in productPage()); reusing it would restyle all
   1,715 product photos.

   Art is the Shopify-era "Kali.J Antigravity" set, re-encoded from
   /home/bigdoe/kj-theme/rise/assets/ (see integration_steps):
     /hero/hero-cosmic.{webp,jpg}   1376x768   <- kj-hero-bg.png
     /hero/art-apparel.{webp,jpg}    620x620   <- kj-tile-clothing-accessories
     /hero/art-tech.{webp,jpg}       620x620   <- kj-tile-electronics-games
     /hero/art-home.{webp,jpg}       620x620   <- kj-tile-home-goods-other
     /hero/art-toys.{webp,jpg}       620x620   <- kj-tile-toys-collectibles

   WIDE variant = full-bleed band carrying the SAME scrim the Shopify hero
   shipped, because that artwork was generated with its left third
   deliberately empty for headline copy. Any other crop wastes the art.
   PANEL variant = square art inset at its native 1:1 — never letterboxed
   into a banner strip, never stretched.
   TYPE variant = no art at all.

   Art is painted as a CSS background, never an <img>. A missing or 404'd
   file therefore degrades to the vault gradient; a broken-image icon is
   not a reachable state.
   ============================================================ */
.shero{
  position:relative;isolation:isolate;overflow:hidden;
  margin:1.4rem 0 .2rem;border:1px solid var(--line);border-radius:20px;
  min-height:clamp(200px,25vw,320px);
  display:flex;align-items:center;gap:clamp(1.1rem,3.5vw,2.8rem);
  padding:clamp(1.7rem,4.4vw,3.2rem) clamp(1.2rem,3.6vw,2.8rem);
  background:
    radial-gradient(120% 150% at 6% 0%, rgba(20,128,140,.20), transparent 62%),
    radial-gradient(90% 130% at 100% 100%, rgba(255,194,51,.10), transparent 58%),
    #0b0e0f;
}
.shero__inner{position:relative;z-index:2;flex:1 1 auto;min-width:0;max-width:60ch}
.shero__eyebrow{
  margin:0 0 .85rem;color:var(--muted-dim);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3em;
}
.shero h1{
  font-family:var(--font-display);margin:0;letter-spacing:.01em;line-height:1.04;
  font-size:clamp(1.9rem,5.2vw,3.6rem);text-wrap:balance;color:var(--white);
}
.shero h1 .a{color:var(--gold)}
.shero__sub{margin:.95rem 0 0;color:var(--muted);font-size:clamp(.95rem,1.35vw,1.08rem);max-width:52ch}
.shero__trust{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.4rem 0 0;padding:0;
  color:var(--muted-dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
}
.shero__trust li{position:relative;padding-left:1.05rem}
.shero__trust li::before{content:"\2726";position:absolute;left:0;color:var(--teal-lite)}

/* ---- WIDE: full-bleed art + the Shopify scrim, ported 1:1 ---- */
.shero--wide::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--shero-img) center right/cover no-repeat;
}
.shero--wide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,#0A0C12 2%,rgba(10,12,18,.92) 30%,rgba(10,12,18,.58) 58%,rgba(10,12,18,.20) 100%),
    linear-gradient(180deg,rgba(10,12,18,.50) 0%,transparent 38%,rgba(10,12,18,.80) 100%);
}

/* ---- PANEL: square art, native aspect, no crop ---- */
.shero__art{
  position:relative;z-index:2;flex:0 0 auto;align-self:center;
  width:clamp(120px,20vw,220px);aspect-ratio:1;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 18px 46px rgba(0,0,0,.45);
  background:#0d0f10 var(--shero-img) center/cover no-repeat;
}

/* ---- art sources. Plain JPEG first = universal; WebP only where supported,
        so an old browser silently keeps the 128 KB jpg instead of nothing. ---- */
.shero--cosmic {--shero-img:url("/hero/hero-cosmic.jpg")}
.shero--apparel{--shero-img:url("/hero/art-apparel.jpg")}
.shero--tech   {--shero-img:url("/hero/art-tech.jpg")}
.shero--home   {--shero-img:url("/hero/art-home.jpg")}
.shero--toys   {--shero-img:url("/hero/art-toys.jpg")}
@supports (background-image:image-set(url("/hero/art-apparel.webp") type("image/webp"))){
  .shero--cosmic {--shero-img:image-set(url("/hero/hero-cosmic.webp") type("image/webp"),url("/hero/hero-cosmic.jpg") type("image/jpeg"))}
  .shero--apparel{--shero-img:image-set(url("/hero/art-apparel.webp") type("image/webp"),url("/hero/art-apparel.jpg") type("image/jpeg"))}
  .shero--tech   {--shero-img:image-set(url("/hero/art-tech.webp") type("image/webp"),url("/hero/art-tech.jpg") type("image/jpeg"))}
  .shero--home   {--shero-img:image-set(url("/hero/art-home.webp") type("image/webp"),url("/hero/art-home.jpg") type("image/jpeg"))}
  .shero--toys   {--shero-img:image-set(url("/hero/art-toys.webp") type("image/webp"),url("/hero/art-toys.jpg") type("image/jpeg"))}
}

@media(max-width:760px){
  /* Phone: the copy sits ON the art (the empty left third is off-screen once
     the band narrows), so lay a full scrim under it — same fix the Shopify
     theme shipped in kj-premium.css. */
  .shero{min-height:0;flex-direction:column;align-items:flex-start;text-align:left}
  .shero--wide::before{background-position:70% center}
  .shero--wide::after{
    background:linear-gradient(180deg,rgba(10,12,18,.88) 0%,rgba(10,12,18,.74) 50%,rgba(10,12,18,.94) 100%);
  }
  .shero__art{width:min(148px,42vw);order:-1;margin-bottom:.4rem}
  .shero__trust{gap:.4rem 1rem;font-size:.62rem;margin-top:1rem}
}
@media(max-width:420px){.shero__art{display:none}}
@media(prefers-reduced-motion:reduce){.shero{transition:none}}

/* ============================================================
   FILTER BAR — .sf*
   Namespaced so it cannot touch the `.facets` link row (those stay plain
   navigation <a>s and keep working with JS off) nor index.html's own
   `.inv-chip` search, which lives on a page that never loads this file.
   ============================================================ */
.sf{
  margin:.5rem 0 1.4rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:16px;
  background:var(--card);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
}
.sf__top{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.sf__search{
  flex:1 1 240px;display:flex;align-items:center;gap:.55rem;min-width:0;
  padding:.58rem .9rem;border:1px solid var(--line);border-radius:12px;background:#0d0f10;color:var(--muted);
  transition:border-color .2s;
}
.sf__search:focus-within{border-color:var(--gold)}
.sf__search input{flex:1;min-width:0;background:none;border:0;color:var(--white);font:inherit;outline:none}
.sf__search input::placeholder{color:var(--muted-dim)}
.sf select,.sf__btn{
  background:#0d0f10;color:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:.58rem .85rem;font:inherit;font-size:.9rem;
}
.sf__btn{font-weight:650;transition:border-color .2s,color .2s}
.sf__btn:hover{border-color:var(--gold);color:var(--gold)}
.sf__btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.sf__groups{display:none;gap:1.3rem 1.9rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.sf.is-open .sf__groups{display:flex}
.sf-group{border:0;margin:0;padding:0;min-width:0}
.sf-group legend{
  padding:0;margin:0 0 .55rem;color:var(--muted-dim);font-size:.64rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;
}
.sf-opts{display:flex;gap:.45rem;flex-wrap:wrap}
.sf-opt{
  font:inherit;font-size:.83rem;font-weight:600;padding:.44rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);transition:.18s;
}
.sf-opt:hover{color:var(--white);border-color:var(--gold)}
.sf-opt[aria-pressed="true"]{background:rgba(255,194,51,.14);border-color:var(--gold);color:var(--gold)}
.sf-n{opacity:.6;margin-left:.35em;font-variant-numeric:tabular-nums}
.sf__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.9rem}
.sf__count{margin:0;color:var(--muted);font-size:.88rem}
.sf__count b{color:var(--white)}
.sf__reset{
  margin-left:auto;background:none;border:0;color:var(--muted-dim);font:inherit;font-size:.84rem;
  text-decoration:underline;text-underline-offset:3px;padding:.3rem;
}
.sf__reset:hover{color:var(--gold)}
.sf__more{
  grid-column:1/-1;justify-self:center;margin:0 auto 2.4rem;padding:.85rem 2.2rem;border-radius:12px;
  border:1px solid var(--line-strong);background:transparent;color:var(--white);font:inherit;font-weight:700;
}
.sf__more:hover{background:rgba(255,194,51,.08)}
.card[hidden]{display:none}