/* tokens live in shared/tokens.css (linked first in base.html) — do not redefine here */
  .skip-link{ position:fixed; top:-100px; left:16px; z-index:999; background:var(--ink); color:var(--bg);
    padding:.75rem 1.25rem; border-radius:9999px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; transition:top .2s var(--ease-utility);
    opacity:0; pointer-events:none; clip-path:inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap }
  .skip-link:focus-visible{ top:16px; opacity:1; pointer-events:auto; clip-path:none; height:auto; width:auto }
  html{ scroll-behavior:smooth }
  html, body{ overflow-x:clip } /* kill decorative overflow at 360px; sticky still works (clip ≠ hidden) */
  ::selection{ background:var(--ink); color:var(--bg) }
  .outline-word{ -webkit-text-stroke:1px var(--ink); color:var(--ink) }
  /* products: colored by default, B&W on card hover (mono-brand effect) —
     filter lives on the image's link wrapper (a:has(> .card-img)) so the
     grayscale never stacks with the img's group-hover scale on one element
     (filter + transform together force re-rasterization → blur) */
  a:has(> .card-img){ transition:filter .3s ease }
  /* brightness dim in dark mode — scoped away from images that carry a hover
     transform (card/deck/cat-tile): filter + transform on one element forces
     re-rasterization → smear. Card images get the dim on their link wrapper
     instead (same element that owns the hover grayscale, transform stays on
     the img) */
  .dark img:not(.card-img):not(.deck-media img):not(.cat-tile img):not(.cat-tile__img--a):not(.cat-tile__img--b){ filter:brightness(.9) }
  .dark a:has(> .card-img){ filter:brightness(.9) }
  .group:hover a:has(> .card-img){ filter:grayscale(1) }
  .js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(0,0,.2,1), transform .7s cubic-bezier(0,0,.2,1) }
  [data-reveal].revealed{ opacity:1; transform:none }
  @media (prefers-reduced-motion:reduce){ [data-reveal]{transform:none;transition:opacity .3s linear} *{animation:none!important} }
  /* ── component library styles (UI6/UI8/UI9 kit) ── */
  .spin{ animation:spin 1s linear infinite }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  .bounce{ animation:bounce 1.2s ease-in-out infinite }
  @keyframes bounce{ 0%,80%,100%{ transform:scale(.6);opacity:.4 } 40%{ transform:scale(1);opacity:1 } }
  /* elevation utilities (plan §3.1 — ramp wired) */
  .elevation-0{ background:var(--e0); color:var(--e6) }
  .elevation-1{ background:var(--e1); color:var(--e6) }
  .elevation-2{ background:var(--surface); box-shadow:0 2px 6px rgba(0,0,0,.04) }
  .elevation-3{ background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.08) }
  .elevation-4{ background:var(--surface); box-shadow:0 20px 48px rgba(0,0,0,.12) }
  /* focus rings (§3.4) — a11y-compliant, no mouse noise */
  :focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px }
  button:focus-visible, a:focus-visible{ outline-offset:4px }
  /* hero v2 stack (§4.1) — L2 cursor spotlight + L3 grain */
  .hero-stack{ position:relative; isolation:isolate }
  .hero-stack::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(420px at var(--mx,80%) var(--my,20%), var(--pat2), transparent 65%) }
  .hero-stack::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.25;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E") }
  /* scroll cue (§4.1 L6) */
  .scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:.4rem;
    font-size:10px; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); opacity:.85 }
  .scroll-cue::after{ content:"⌄"; line-height:1; font-size:15px; color:var(--ink);
    animation:cueDrop 1.8s var(--ease-utility) infinite }
  @keyframes cueDrop{ 0%{ opacity:.35; transform:translateY(-3px) } 55%{ opacity:1; transform:none } 100%{ opacity:.35; transform:translateY(3px) } }
  /* fly-to-cart (§4.6) */
  .fly-dot{ position:fixed; z-index:95; width:14px; height:14px; border-radius:9999px;
    background:var(--ink); pointer-events:none; transition:transform .7s var(--ease-cinematic), opacity .7s }
  .skeleton{ position:relative; overflow:hidden; background:var(--chip) }
  .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--pat2),transparent); animation:shimmer 1.6s infinite }
  @keyframes shimmer{ 100%{ transform:translateX(100%) } }
  .bar-fill{ transition:width .5s cubic-bezier(0,0,.2,1) }
  input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:var(--line); outline:none; cursor:pointer }
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ink); border:4px solid var(--bg); box-shadow:0 0 0 1px var(--ink); cursor:grab }
  input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--ink); border:4px solid var(--bg); box-shadow:0 0 0 1px var(--ink); cursor:grab }
  input[type=checkbox],input[type=radio]{ accent-color:var(--ink) }
  .pattern-dots{ background-image:radial-gradient(var(--pat2) 1.5px,transparent 1.5px); background-size:22px 22px }
  .pattern-grid{ background-image:linear-gradient(var(--pat) 1px,transparent 1px),linear-gradient(90deg,var(--pat) 1px,transparent 1px); background-size:32px 32px }
  .pattern-diag{ background-image:repeating-linear-gradient(45deg,var(--pat2) 0 1px,transparent 1px 12px) }
  .pattern-waves{ background-image:radial-gradient(ellipse at 50% -50%,var(--pat2) 0 40%,transparent 55%); background-size:120px 90px }
  .pattern-cross{ background-image:linear-gradient(var(--pat2) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--pat2) 1.5px,transparent 1.5px); background-size:18px 18px; background-position:center }
  .parallax-slow{ transition:transform .3s ease-out }
  /* density modes (kit density toggle, real) */
  html[data-density="compact"] #grid, html[data-density="compact"] .pgrid{ gap-x:.75rem; gap-y:1.75rem }
  html[data-density="compact"] #grid .text-sm, html[data-density="compact"] .pgrid .text-sm{ font-size:.8125rem }
  html[data-density="compact"] #grid article img, html[data-density="compact"] .pgrid article img{ border-radius:.75rem }
  /* marquee pause on hover (motion audit) */
  .ticker:hover, .ex-ticker:hover, .animate-marquee:hover{ animation-play-state:paused }
  .mega-panel{ transform-origin:top; transition:opacity .25s ease,transform .25s ease }
  .modal-card{ animation:popin .3s cubic-bezier(0,0,.2,1) }
  @keyframes popin{ from{ transform:scale(.96);opacity:0 } to{ transform:scale(1);opacity:1 } }
  .ticker{ animation:marquee2 14s linear infinite }
  @keyframes marquee2{ to{ transform:translateX(-50%) } }
  /* ── semantic states (monochrome palette) ── */
  .focus-ring{ outline:2px solid var(--ink); outline-offset:2px }
  .state-success{ background:var(--ink); color:var(--bg) }
  .state-info{ background:var(--surface); border:1px solid var(--line) }
  .state-warning{ border:2px solid var(--ink) }
  .state-error{ border:2px dashed var(--ink) }
  .state-disabled{ background:var(--chip); color:var(--muted); cursor:not-allowed }

/* ── page loader (brand: MONO. + spinner + progress bar) ── */
.ex-loader{ position:fixed; inset:0; z-index:90; background:var(--bg); display:grid; place-items:center; transition:opacity var(--dur-slow) var(--ease-utility), visibility var(--dur-slow) }
.ex-loader--done{ opacity:0; visibility:hidden; pointer-events:none }
.ex-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; padding:1rem }
.ex-loader-brand{ font-size:2rem; line-height:1; font-weight:900; letter-spacing:-.03em }
.ex-loader-dot{ color:var(--muted) }
.ex-loader-spin{ width:34px; height:34px; border-radius:9999px; border:2px solid var(--line); border-top-color:var(--ink); animation:ex-rotate .8s linear infinite }
.ex-loader-track{ width:180px; height:2px; background:var(--chip); border-radius:9999px; overflow:hidden }
.ex-loader-bar{ height:100%; width:0; background:var(--ink); border-radius:9999px }
@keyframes ex-rotate{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .ex-loader{ transition:none } .ex-loader-spin{ animation:none } }

/* ── cookie consent card (created by chrome.js) — slide-up entry ── */
.cookie-bar{ animation:cookie-in var(--dur-slow) var(--ease-utility) both }
@keyframes cookie-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .cookie-bar{ animation:none } }

/* ── chrome: drawers, overlays, search dropdown, micro-labels (sf-chrome) ── */
.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 }
@media (prefers-reduced-motion:reduce){ .drawer{ transition:none } }
.search-dd{ z-index:60 }
.search-dd[hidden]{ display:none }
.search-dd-head{ padding:.5rem .75rem 0; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.search-dd-item{ display:flex; align-items:center; gap:.75rem; padding:.55rem .75rem; text-decoration:none; color:inherit }
.search-dd-item:hover,.search-dd-item[aria-selected="true"]{ background:var(--chip) }
.search-dd-item img{ width:40px; height:40px; object-fit:cover; border-radius:.5rem; background:var(--chip); flex-shrink:0 }
.search-dd-item .ttl{ font-size:.8125rem; font-weight:700; line-height:1.2 }
.search-dd-item .meta{ font-size:.6875rem; color:var(--muted); margin-top:1px }
.search-dd-item .pr{ margin-left:auto; font-size:.8125rem; font-weight:800; flex-shrink:0 }
.search-dd-foot{ border-top:1px solid var(--line); padding:.55rem .75rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.search-dd-foot a{ color:var(--ink); display:flex; justify-content:space-between; align-items:center; text-decoration:none }
.search-dd-foot a:hover{ opacity:.65 }
.search-dd-empty{ padding:1rem .75rem; font-size:.8125rem; color:var(--muted); text-align:center }
.search-dd-loading{ padding:1rem; display:flex; justify-content:center }
.card-variants{ display:block; margin-top:3px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.newsletter-msg{ font-size:11px; letter-spacing:.02em }
.newsletter-msg.err{ color:var(--ink); font-weight:700 }
.newsletter-msg.err::before{ content:"✕ "; }
.newsletter-msg.ok{ color:var(--muted) }
.newsletter-msg.ok::before{ content:"✓ "; font-weight:700 }
.flt-cat[aria-pressed="true"]{ background:var(--ink); color:var(--bg) }

/* slim scrollbar for the search modal */
.bo-scroll-slim{ scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.bo-scroll-slim::-webkit-scrollbar{ width:4px; height:4px }
.bo-scroll-slim::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px }
/* modal search results items — bigger real images */
#searchModal .search-dd-item img{ width:48px; height:48px; border-radius:.6rem }
#searchModal .search-dd-item{ padding:.6rem .8rem }
#searchModal .search-dd-head{ padding:.7rem .9rem 0 }

/* PDP accordions — only the open section shows its body */
.acc-body{ display:none }
.acc-open .acc-body{ display:block }
.acc-ico{ transition:transform .2s ease }
.acc-toggle{ cursor:pointer }

/* footer pinned to the bottom on short pages — flexbox sticky footer
   via a dedicated .page-wrap (body-as-flex-container does not distribute
   free space to #main on the live pages, so the wrap is the reliable one) */
.page-wrap{ display:flex; flex-direction:column; min-height:100vh; width:100% }
#main{ flex:1 0 auto }