/* ============================================================
   Distinctive Media — print store, night theme.
   Scoped to body.shop, loaded after store.css.

   Glass is used only where something actually floats over
   scrolling content: the filter rail, the cart bar, the dialog.
   Nothing decorative gets a blur.
   ============================================================ */

body.shop{
  --shop-plate: oklch(0.185 0.028 265);   /* plate ground, a step off the page */
  --shop-glass: oklch(0.155 0.025 265 / 0.72);
  --shop-grid: oklch(0.79 0.128 208 / 0.10);
  background:var(--night);
  color:var(--ink);
}

/* ---------- hero: one claim, lit from behind ---------- */
.shop-hero{
  position:relative;
  padding:clamp(50px,7vw,100px) 0 clamp(44px,6vw,78px);
}
.shop-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(30px,5vw,80px);align-items:center;
}
.shop-draft{margin:0}
.shop-draft svg{width:100%;height:auto;display:block;font-family:var(--disp)}
@media (max-width:860px){
  .shop-hero-grid{grid-template-columns:1fr}
  .shop-draft{max-width:420px}
}
/* no glow behind the headline — that halo is on every AI landing page ever made.
   The type carries itself, and the hairline below does the separating. */
.shop-hero{border-bottom:1px solid var(--line)}
.shop-hero > .wrap{position:relative}

.shop-hero h1{
  font-size:clamp(2.4rem,6.4vw,5rem);line-height:0.98;letter-spacing:-0.035em;
  margin:20px 0 0;max-width:15ch;
}
.shop-lede{
  margin:22px 0 0;max-width:50ch;
  font-size:var(--t-lede);color:var(--dim);text-wrap:pretty;
}
.shop-hero .shop-note{margin-top:26px;font-size:var(--t-caption);color:var(--dim)}
.shop-hero .shop-note a{
  color:var(--miami);font-weight:700;
  border-bottom:1px solid oklch(0.79 0.128 208 / 0.35);
}

/* ---------- three facts, hairlines, no cards ---------- */
.shop-facts{border-block:1px solid var(--line);background:var(--night-2)}
.shop-facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.shop-fact{
  padding:clamp(24px,3.4vw,40px) clamp(16px,2.4vw,34px);
  border-right:1px solid var(--line);
}
.shop-fact:last-child{border-right:0}
.shop-fact b{display:block;font-size:var(--t-h4);line-height:1.15;letter-spacing:-0.02em}
.shop-fact span{display:block;margin-top:7px;font-size:var(--t-caption);color:var(--dim);text-wrap:pretty}
@media (max-width:760px){
  .shop-facts .wrap{grid-template-columns:1fr}
  .shop-fact{border-right:0;border-bottom:1px solid var(--line)}
  .shop-fact:last-child{border-bottom:0}
}

/* ---------- glass 1: the filter rail floats over the catalogue ---------- */
body.shop .store-filters{
  background:var(--shop-glass);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-block:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){
  body.shop .store-filters{background:oklch(0.16 0.025 265 / 0.97)}
}
body.shop .sf-chip{font-family:var(--disp);font-weight:700}

/* ---------- chapters ---------- */
.cat-head{
  grid-column:1 / -1;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(34px,4.5vw,60px) 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;scroll-margin-top:130px;
}
.cat-head:first-child{padding-top:clamp(26px,3vw,40px)}
.cat-head h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.05;letter-spacing:-0.03em}
.cat-head span{
  font-size:var(--m-label);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
}

/* ---------- the card ---------- */
body.shop .store-grid{
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:0 18px;padding-block:0 clamp(40px,6vw,80px);
}
body.shop .pcard{
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;margin-top:26px;
}
body.shop .pcard:hover{transform:none;border-color:var(--line)}
body.shop .pc-media{
  background:var(--shop-plate);border:1px solid var(--line);border-radius:0;
  aspect-ratio:4/3;
  transition:border-color .3s var(--ease);
}
/* Hover lift used to be a cyan glow (two box-shadows — banned outright).
   Depth is now stated the way DESIGN.md states it: the hairline goes cyan and
   a 3px accent edge lights down the left, drawn as a pseudo-element so the
   plate does not shift by 2px when it appears. */
body.shop .pc-media::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--miami);pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);
}
body.shop .pcard:hover .pc-media{
  border-color:var(--miami-deep);
}
body.shop .pcard:hover .pc-media::before{opacity:1}
body.shop .pc-badge{background:var(--miami);color:var(--night-2);border-radius:0;font-family:var(--disp);font-weight:700}
body.shop .pc-badge-sale{background:var(--ink);color:var(--night-2)}
body.shop .pc-body{padding:16px 0 0}
body.shop .pc-cat{color:var(--miami);font-family:var(--disp);font-weight:700}
body.shop .pc-turn{color:var(--faint);font-family:var(--disp);font-weight:700}
body.shop .pc-body h3{font-size:var(--t-h4);line-height:1.15}
body.shop .pc-spec{
  color:var(--dim);font-family:var(--disp);font-weight:400;
  font-size:var(--t-caption);letter-spacing:0;line-height:1.5;
}
/* the plate already states the spec — no need to say it twice on one card */
body.shop .pcard:has(.pc-plate) .pc-spec{display:none}
body.shop .pcard:has(.pc-plate) .pc-body h3{margin-bottom:2px}
body.shop .pc-foot{border-top:1px solid var(--line);padding-top:14px}
body.shop .pc-price{
  color:var(--ink);font-family:var(--disp);font-weight:800;font-size:var(--t-h4);letter-spacing:-0.02em;
}
body.shop .pc-price small{color:var(--faint);font-weight:700}
body.shop .pc-price s{color:var(--faint)}
body.shop .pc-price .sale{color:var(--miami)}
body.shop .pc-btn{
  font-family:var(--disp);font-weight:700;border-radius:0;
  color:var(--miami);border-color:var(--miami-deep);
}
body.shop .pc-btn:hover{background:var(--miami);border-color:var(--miami);color:var(--night-2)}

/* ---------- the plate: a drawing, not a missing photograph ---------- */
body.shop .pc-media-plate{
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:
    linear-gradient(var(--shop-grid) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, var(--shop-grid) 1px, transparent 1px) 0 0/22px 100%,
    var(--shop-plate);
}
/* drafting title block, anchored like a real drawing — not floating centred text */
body.shop .pc-media-plate{position:relative}
body.shop .pc-plate{
  position:absolute;left:12px;bottom:12px;right:auto;
  display:block;max-width:min(78%,300px);
  border:1px solid var(--line);background:oklch(0.16 0.025 265 / 0.85);
  padding:0;text-align:left;
}
body.shop .pc-plate b{
  display:block;padding:9px 12px;
  font-size:var(--t-caption);font-weight:700;letter-spacing:0;line-height:1.4;
  color:var(--ink);
}
body.shop .pc-plate i{
  font-style:normal;display:block;
  padding:6px 12px;border-top:1px solid var(--line);
  font-size:var(--m-label);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--faint);
}
body.shop .pcard:hover .pc-plate{border-color:var(--miami-deep)}
body.shop .pcard:hover .pc-plate b{color:var(--miami)}
/* registration mark, opposite corner */
body.shop .pc-media-plate::after{
  content:"";position:absolute;right:14px;bottom:14px;width:16px;height:16px;
  border:1px solid oklch(0.62 0.03 250 / 0.7);border-radius:50%;
  background:
    linear-gradient(oklch(0.62 0.03 250 / 0.7),oklch(0.62 0.03 250 / 0.7)) 50% 0/1px 100% no-repeat,
    linear-gradient(oklch(0.62 0.03 250 / 0.7),oklch(0.62 0.03 250 / 0.7)) 0 50%/100% 1px no-repeat;
}

/* ---------- specs: raised panel so it reads as a different document ---------- */
.shop-specs{background:var(--night-2);border-top:1px solid var(--line);padding:clamp(60px,8vw,110px) 0}
.shop-specs h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.02;letter-spacing:-0.03em;max-width:16ch}
.shop-specs .lede{color:var(--dim);max-width:48ch;margin-top:16px;font-size:var(--t-lede);text-wrap:pretty}
.spec-table{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.spec-table div{
  display:grid;grid-template-columns:minmax(120px,0.28fr) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.spec-table dt{
  font-size:var(--m-label);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);
}
.spec-table dd{font-size:var(--t-caption);line-height:1.55;text-wrap:pretty;color:var(--dim)}
.spec-table dd b{color:var(--miami);font-weight:700}
@media (max-width:560px){ .spec-table div{grid-template-columns:1fr;gap:5px} }

/* ---------- glass 2: the product dialog floats over the page ---------- */
body.shop .pdlg{
  background:oklch(0.185 0.028 265 / 0.86);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid oklch(0.96 0.005 220 / 0.14);
  border-radius:0;
}
@supports not (backdrop-filter: blur(1px)){
  body.shop .pdlg{background:var(--panel)}
}
body.shop .pdlg::backdrop{background:oklch(0.09 0.015 265 / 0.7)}
body.shop .pdlg-media{background:transparent;border-right:1px solid var(--line)}
body.shop .pdlg-media img[hidden]{display:none}
body.shop .pdlg-media.pc-media-plate{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,56px);
  background:
    linear-gradient(var(--shop-grid) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, var(--shop-grid) 1px, transparent 1px) 0 0/22px 100%,
    oklch(0.16 0.025 265 / 0.5);
}
body.shop .pdlg-media .pc-plate{max-width:min(320px,80%)}
body.shop .pdlg-media .pc-plate b{font-size:var(--t-lede)}
body.shop .pdlg-spec{color:var(--dim);font-family:var(--disp);letter-spacing:0}
body.shop .pdlg-close{border-radius:0}
body.shop .opt-label{font-family:var(--disp);font-weight:700}
body.shop .opt-box{font-family:var(--disp);border-radius:0}
body.shop .pdlg-price{font-family:var(--disp);font-weight:800}
body.shop .pdlg-unit{font-family:var(--disp);font-weight:700}
body.shop .pdlg-add{border-radius:0}
body.shop .pdlg-fine{font-family:var(--disp);letter-spacing:0;text-transform:none;color:var(--faint)}

/* ---------- glass 3: the cart bar sits on top of everything ---------- */
body.shop .cartbar{
  background:oklch(0.79 0.128 208 / 0.9);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid oklch(0.96 0.005 220 / 0.2);
  color:var(--night-2);border-radius:0;
  font-family:var(--disp);
  /* Was a 99px pill lifted on a cyan drop-shadow — a radius outside the
     registration-mark exception plus a banned shadow. The bar still has to
     read as floating over the catalogue: it keeps the miami fill and the
     light hairline, and gains the 3px accent edge DESIGN.md uses for raised
     furniture. It is position:fixed to the right, so the edge grows outward
     and nothing on the page reflows. */
  border-left:3px solid var(--night-2);
}
@supports not (backdrop-filter: blur(1px)){
  body.shop .cartbar{background:var(--miami)}
}
body.shop .cart-dlg{
  background:oklch(0.185 0.028 265 / 0.9);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid oklch(0.96 0.005 220 / 0.14);
  border-radius:0;
}
@supports not (backdrop-filter: blur(1px)){
  body.shop .cart-dlg{background:var(--panel)}
}
body.shop .cart-dlg::backdrop{background:oklch(0.09 0.015 265 / 0.7)}
body.shop .ci-price{font-family:var(--disp);font-weight:700}
body.shop .cart-items .ci-name span{font-family:var(--disp);letter-spacing:0;color:var(--dim)}
body.shop .qty-step{border-radius:0}

/* blur is expensive on low-power devices and pointless to animate */
@media (prefers-reduced-transparency: reduce){
  body.shop .store-filters,body.shop .pdlg,body.shop .cart-dlg{backdrop-filter:none;-webkit-backdrop-filter:none}
  body.shop .store-filters{background:oklch(0.16 0.025 265 / 0.97)}
  body.shop .pdlg,body.shop .cart-dlg{background:var(--panel)}
  body.shop .cartbar{background:var(--miami);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* .pdlg-add extends .pc-btn, and the scoped rule above outranks it —
   restate the filled variant or the label goes miami-on-miami. */
body.shop .pdlg-add{
  background:var(--miami);border-color:var(--miami);color:var(--night-2);
}
body.shop .pdlg-add:hover{
  background:oklch(0.85 0.11 208);border-color:oklch(0.85 0.11 208);color:var(--night-2);
}
body.shop .pdlg-add[disabled]{opacity:0.5}

/* ============================================================
   CLEANUP PASS
   The page read generic for four reasons: a glow behind the
   headline, 29 identical tiles, an anonymous pill row, and
   miami on absolutely everything so nothing was accented.
   ============================================================ */

/* ---------- category rail: an index, not pills ---------- */
body.shop .store-filters .wrap{
  display:flex;gap:0;flex-wrap:wrap;align-items:stretch;padding-block:0;
}
body.shop .sf-chip{
  display:flex;align-items:baseline;gap:9px;
  padding:16px clamp(14px,1.8vw,22px);
  border:0;border-radius:0;border-bottom:2px solid transparent;
  background:transparent;color:var(--dim);
  font-family:var(--disp);font-weight:700;font-size:var(--t-caption);
  letter-spacing:0;text-transform:none;
  transition:color .2s, border-color .2s, background .2s;
}
body.shop .sf-chip i{
  font-style:normal;
  font-size:var(--m-label);font-weight:700;
  color:var(--faint);font-variant-numeric:tabular-nums;
}
body.shop .sf-chip:hover{color:var(--ink);background:oklch(0.96 0.005 220 / 0.04)}
body.shop .sf-chip.on{
  color:var(--ink);background:transparent;border-bottom-color:var(--miami);
}
body.shop .sf-chip.on i{color:var(--miami)}
/* Focus ring was an inset box-shadow. An outline draws the identical 2px
   square ring inside the border box without using a banned property, and it
   survives forced-colors mode, which box-shadow does not. */
body.shop .sf-chip:focus-visible{outline:2px solid oklch(0.79 0.128 208 / 0.5);outline-offset:-2px}

/* ---------- rhythm: the first product of each chapter runs wide ---------- */
body.shop .pcard-lead{grid-column:span 2}
body.shop .pcard-lead .pc-media{aspect-ratio:16/9}
body.shop .pcard-lead .pc-body h3{font-size:var(--t-h3)}
body.shop .pcard-lead .pc-plate b{font-size:var(--t-lede)}
@media (max-width:900px){ body.shop .pcard-lead{grid-column:span 1} 
  body.shop .pcard-lead .pc-media{aspect-ratio:4/3} }

/* ---------- roles for colour: one accent, used once ---------- */
/* the price is data — it must be the most scannable thing on the card */
body.shop .pc-price{
  color:var(--ink);font-size:var(--t-h3);font-weight:800;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
body.shop .pc-price s{color:var(--faint);font-size:var(--t-caption);font-weight:400}
body.shop .pc-price small{color:var(--faint);font-size:var(--m-label)}
/* the sale figure is the ONLY miami text on the card */
body.shop .pc-price .sale{color:var(--miami)}
/* the button is the only filled object — solid, so it can't be confused with a price */
body.shop .pc-btn{
  background:var(--miami);border-color:var(--miami);color:var(--night-2);
  padding:11px 16px;font-size:var(--m-label);letter-spacing:0.06em;
}
body.shop .pc-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--night-2)}
/* filled miami here, so the ring goes ink — same reasoning as .pdlg-add */
body.shop .pc-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* category label steps back — it repeats on every card in a chapter that already has a heading */
body.shop .pc-cat{color:var(--faint)}
/* badges in ink, so miami means "price" and nothing else */
body.shop .pc-badge{background:var(--ink);color:var(--night-2)}
body.shop .pc-badge-sale{background:var(--miami);color:var(--night-2)}
body.shop .pc-foot{align-items:flex-end}

/* ---------- plate grounds differ by what's being printed ---------- */
/* fabric and frames: engineering grid */
body.shop [data-cat="Tents"] .pc-media-plate,
body.shop [data-cat="Displays & Signs"] .pc-media-plate{
  background:
    linear-gradient(var(--shop-grid) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, var(--shop-grid) 1px, transparent 1px) 0 0/22px 100%,
    var(--shop-plate);
}
/* banners: a scale rule, because length is the variable that matters */
body.shop [data-cat="Banners & Flags"] .pc-media-plate{
  background:
    repeating-linear-gradient(90deg, var(--shop-grid) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, oklch(0.79 0.128 208 / 0.18) 0 1px, transparent 1px 200px),
    var(--shop-plate);
}
/* cut products: trim marks at the corners */
body.shop [data-cat="Cards & Paper"] .pc-media-plate,
body.shop [data-cat="Stickers & Labels"] .pc-media-plate{
  background:
    linear-gradient(var(--shop-grid),var(--shop-grid)) 22px 22px/calc(100% - 44px) 1px no-repeat,
    linear-gradient(var(--shop-grid),var(--shop-grid)) 22px calc(100% - 22px)/calc(100% - 44px) 1px no-repeat,
    linear-gradient(var(--shop-grid),var(--shop-grid)) 22px 22px/1px calc(100% - 44px) no-repeat,
    linear-gradient(var(--shop-grid),var(--shop-grid)) calc(100% - 22px) 22px/1px calc(100% - 44px) no-repeat,
    var(--shop-plate);
}

/* Every product in this catalogue carries a sale price, so colouring the sale
   figure miami made every price miami — back to competing with the button.
   Price is always ink. Miami means "act on this" and "this is discounted",
   and those two never sit next to each other. */
body.shop .pc-price .sale{color:var(--ink)}
body.shop .pc-price s{
  color:var(--faint);font-size:var(--t-caption);
  text-decoration-thickness:1px;margin-right:8px;
}




/* ---------- chapter opener: full width, so product rows stay aligned ---------- */
body.shop .pcard-lead{grid-column:1 / -1}
@media (min-width:761px){
  body.shop .pcard-lead{
    display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);
    gap:clamp(24px,3.5vw,56px);align-items:end;
    padding-bottom:clamp(22px,3vw,34px);
  }
  body.shop .pcard-lead .pc-media{aspect-ratio:21/9;margin:0}
  body.shop .pcard-lead .pc-body{padding:0 0 4px}
  body.shop .pcard-lead .pc-body h3{font-size:var(--t-h2);letter-spacing:-0.03em;line-height:1.02}
  body.shop .pcard-lead .pc-foot{margin-top:24px}
  body.shop .pcard-lead .pc-price{font-size:var(--t-h1)}
  body.shop .pcard-lead .pc-plate{max-width:min(60%,360px)}
}

/* grid ground was too faint to read as a drawing */
body.shop{--shop-grid: oklch(0.79 0.128 208 / 0.16)}