/* Distinctive Media — Print Store (loads after home.css, uses its tokens) */

.store-hero{padding:clamp(56px,7vw,90px) 0 clamp(30px,4vw,50px)}
.store-hero h1{font-size:var(--t-page);line-height:1.0;letter-spacing:-0.03em;font-stretch:100%;margin:18px 0 16px}
.store-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--t-body);color:var(--dim);max-width:64ch;
}
.store-note b{color:var(--ink)}

/* filter chips */
.store-filters{
  position:sticky;top:69px;z-index:30;
  background:oklch(0.16 0.025 265 / 0.92);backdrop-filter:blur(10px);
  border-block:1px solid var(--line);
}
.store-filters .wrap{display:flex;gap:8px;flex-wrap:wrap;padding-block:12px}
.sf-chip{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--dim);background:none;border:1px solid var(--line);border-radius:0;
  padding:8px 14px;cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.sf-chip:hover{border-color:var(--miami-deep);color:var(--ink)}
.sf-chip.on{background:var(--miami);border-color:var(--miami);color:var(--night-2)}

/* ---------- product cards ---------- */
.store-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:18px;padding-block:clamp(30px,4vw,50px);
}
.pcard{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  overflow:hidden;
  transition:border-color .25s, transform .3s var(--ease);
}
.pcard:hover{border-color:var(--miami-deep);transform:translateY(-4px)}
.pc-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;
  background:var(--night-2);border-bottom:1px solid var(--line);
}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pc-media img.is-placeholder{object-fit:cover;opacity:.9}
.pcard:hover .pc-media img{transform:scale(1.04)}
.pc-badge{
  position:absolute;top:10px;left:10px;
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.1em;
  background:var(--miami);color:var(--night-2);border-radius:0;padding:4px 8px;
}
.pc-badge-sale{left:auto;right:10px;background:var(--ink);color:var(--night-2)}
.pc-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.pc-cat{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--miami);
}
.pc-turn{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.pc-body h3{font-size:var(--t-lede);line-height:1.15;font-stretch:100%;cursor:pointer}
.pc-body h3:hover{color:var(--miami)}
.pc-spec{
  /* Not an uppercase technical label, so it takes no tracking at all rather
     than 0.02em, which sat under the 0.05–0.14em label band. Matches the
     letter-spacing:0 that body.shop already forces on this element. */
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);line-height:1.6;letter-spacing:0;
  color:var(--dim);margin-top:6px;
}
.pc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;
  border-top:1px dashed var(--line);
}
.pc-price{font-family:var(--disp);font-weight:700;font-size:var(--m-spec);font-weight:600;color:var(--ink);white-space:nowrap}
.pc-price small{font-size:var(--m-label);color:var(--dim);margin-right:5px;letter-spacing:0.08em;text-transform:uppercase}
.pc-price s{color:var(--dim);font-size:var(--m-spec);margin-right:6px}
.pc-price .sale{color:var(--miami)}
.pc-btn{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.1em;
  color:var(--miami);background:transparent;
  border:1px solid var(--miami-deep);border-radius:0;
  padding:9px 13px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .2s, color .2s, border-color .2s;
}
.pc-btn i{font-style:normal;font-size:var(--m-spec);line-height:1}
.pc-btn:hover{background:var(--miami);color:var(--night-2);border-color:var(--miami)}
.pc-btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- product dialog ---------- */
.pdlg{
  margin:auto;position:relative;
  border:1px solid var(--line);border-radius:0;padding:0;
  background:var(--panel);color:var(--ink);
  width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 60px);
  overflow:hidden;
}
.pdlg::backdrop{background:oklch(0.1 0.015 265 / 0.78);backdrop-filter:blur(4px)}
.pdlg-split{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);max-height:calc(100vh - 60px)}
.pdlg-media{background:var(--night-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdlg-media img{width:100%;height:100%;object-fit:cover;display:block}
.pdlg-media img.is-placeholder{object-fit:contain;padding:clamp(20px,4vw,44px)}
.pdlg-body{padding:clamp(22px,3vw,34px);overflow-y:auto}
.pdlg-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;padding-right:46px}
.pdlg h2{font-size:var(--t-h3);line-height:1.05;font-stretch:100%}
.pdlg-spec{
  /* same as .pc-spec: lowercase spec line, so no label tracking (was 0.03em,
     under the 0.05–0.14em band). body.shop already overrides this to 0. */
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);letter-spacing:0;color:var(--dim);margin-top:8px;
}
.pdlg-desc{color:var(--dim);font-size:var(--t-body);margin-top:14px;text-wrap:pretty}
.pdlg-close{
  position:absolute;top:14px;right:14px;z-index:3;
  background:oklch(0.16 0.025 265 / 0.9);border:1px solid var(--line);border-radius:0;
  color:var(--ink);font-size:var(--t-body);width:36px;height:36px;cursor:pointer;
  transition:border-color .2s, background .2s;
}
.pdlg-close:hover{border-color:var(--miami);background:var(--night-2)}

/* option boxes */
.pdlg-opts{margin-top:20px;display:grid;gap:16px}
.opt-label{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px;
}
.opt-boxes{display:flex;flex-wrap:wrap;gap:8px}
.opt-box{
  display:flex;align-items:baseline;gap:7px;
  background:var(--night);border:1px solid var(--line);border-radius:0;
  padding:10px 13px;cursor:pointer;
  font-family:var(--disp);font-weight:700;
  transition:border-color .18s, background .18s, color .18s;
}
.opt-box b{font-size:var(--m-spec);font-weight:600;color:var(--ink)}
.opt-box span{font-size:var(--m-label);color:var(--dim)}
.opt-box:hover{border-color:var(--miami-deep)}
.opt-box.on{border-color:var(--miami);background:var(--miami-wash)}
.opt-box.on b{color:var(--miami)}
.opt-box.on span{color:var(--miami)}
/* Focus ring: outline, not box-shadow. The ring was miami at 0.3 alpha sitting
   flush on the border box — 1.93:1 on --night, 1.97:1 on --panel, under the
   1.4.11 3:1 minimum, and on the .on state it fell flush against an already
   miami border (1.0:1). Opaque miami held 2px clear of the box puts dark ground
   on both sides of the ring: 9.68:1 against every ground it lands on.
   Matches the site ring in css/home.css. */
.opt-box:focus-visible{outline:3px solid var(--miami);outline-offset:2px}

.pdlg-pricerow{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:1px dashed var(--line);margin-top:22px;padding-top:18px;
}
.pdlg-price{font-family:var(--disp);font-weight:700;font-size:var(--t-h4);font-weight:600;letter-spacing:-0.01em}
.pdlg-price s{font-size:var(--m-spec);color:var(--dim);margin-right:8px}
.pdlg-price .sale{color:var(--miami)}
.pdlg-unit{font-family:var(--disp);font-weight:700;font-size:var(--m-label);letter-spacing:0.06em;color:var(--dim);text-transform:uppercase}
.pdlg-add{
  width:100%;justify-content:center;margin-top:16px;
  padding:15px;font-size:var(--m-label);
  background:var(--miami);color:var(--night-2);border-color:var(--miami);
}
.pdlg-add:hover{background:oklch(0.85 0.11 208);border-color:oklch(0.85 0.11 208)}
.pdlg-fine{
  font-family:var(--disp);font-weight:700;font-size:var(--m-label);letter-spacing:0.06em;line-height:1.8;
  color:var(--dim);margin-top:12px;text-transform:uppercase;
}
.pdlg-fine a{color:var(--miami)}

/* ---------- cart bar + drawer ---------- */
.cartbar{
  position:fixed;right:18px;bottom:18px;z-index:45;
  display:none;align-items:center;gap:10px;
  background:var(--miami);color:var(--night-2);
  border:0;border-radius:0;padding:14px 22px;
  font-family:var(--disp);font-weight:800;font-size:var(--t-body);cursor:pointer;
}
.cartbar.show{display:flex}
.cartbar b{
  background:var(--night-2);color:var(--miami);border-radius:0;
  min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-caption);
}
.cart-dlg{
  margin:auto;
  border:1px solid var(--line);border-radius:0;padding:0;
  background:var(--panel);color:var(--ink);
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 60px);
}
.cart-dlg::backdrop{background:oklch(0.1 0.015 265 / 0.75);backdrop-filter:blur(4px)}
.cart-inner{padding:clamp(24px,4vw,36px);overflow-y:auto;max-height:calc(100vh - 60px)}
.cart-inner .pdlg-top{align-items:flex-start}
.cart-inner .pdlg-close{position:static;flex-shrink:0}
.cart-items{list-style:none;margin:16px 0;border-top:1px solid var(--line)}
.cart-items li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-body);
}
.cart-items .ci-name b{display:block}
.cart-items .ci-name span{font-family:var(--disp);font-weight:700;font-size:var(--m-label);color:var(--dim);line-height:1.6}
.ci-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ci-price{font-family:var(--disp);font-weight:700;font-weight:600;font-size:var(--m-spec)}
.ci-x{background:none;border:0;color:var(--dim);cursor:pointer;font-size:var(--t-body);padding:4px}
.ci-x:hover{color:oklch(0.72 0.13 25)}
.cart-total{display:flex;justify-content:space-between;font-weight:800;font-size:var(--t-lede);margin:6px 0 4px}
.cart-design-note{font-size:var(--t-caption);color:var(--dim);margin-bottom:16px;text-wrap:pretty}
.cart-empty{color:var(--dim);padding:20px 0;text-align:center}
.cart-empty a{color:var(--miami);font-weight:600}

/* ---------- focus fallback ----------
   Every ring on the site was per-selector, so anything not named had no
   authored indicator: on the store pages that was .pc-btn, .pdlg-close,
   .pdlg-add, .cartbar, .ci-x, the .qty-step steppers, the .ck-* form
   controls, .ck-editlink, the policy <summary> toggles and the shared
   .btn / .callbar links.

   store.css is the first store sheet on all four store pages, so this is the
   floor for every one of them. The element list is wrapped in :where() so the
   whole selector weighs 0,1,0 — every per-element :focus-visible rule already
   in home.css, store.css, store-pages.css and store-shop.css is at least
   0,2,0 and still wins. It adds a ring where there was none; it never
   replaces one.

   3px, not 2px: Chrome device-rounds outline widths down at fractional DPR,
   where 2px lands at 1.6px. 3px lands at 2.4px, still over the 2px floor.
   outline-offset holds the ring clear of the control so it always sits on the
   dark page ground — 9.68:1 — even on the miami-filled buttons. */
:where(a[href],area[href],button,input,select,textarea,summary,[tabindex]:not([tabindex^="-"]),[contenteditable="true"]):focus-visible{
  outline:3px solid var(--miami);
  outline-offset:2px;
}
/* Miami-filled controls take the ink ring instead, the way css/home.css rings
   the filled hero button — a miami ring beside a miami fill reads as one
   thicker edge rather than as a separate indicator. */
.pdlg-add:focus-visible,
.cartbar:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

@media (max-width:760px){
  .pdlg-split{grid-template-columns:1fr;overflow-y:auto}
  .pdlg-media{aspect-ratio:16/10}
}
@media (max-width:640px){
  .store-filters{top:63px}
  /* clear the sticky call bar */
  .cartbar{bottom:80px;right:12px}
}