/* ============================================================
   Pawlus Speed Lab — Sklep
   Design tokens + components ported 1:1 from the Claude Design
   project "Strona internetowa sklepu" (Pawlus Speed Lab design
   system). Tokens copied verbatim from tokens/*.css; Button /
   Badge / Tag / Input reproduced from the compiled _ds_bundle.js.
   ============================================================ */

/* Self-hosted, glyph-subset to the site's used characters (regenerate: python3 tools/fetch-fonts.py).
   ponytail: subset via Google's &text= API — rerun if new Japanese glyphs are added. */
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/saira-italic700.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 800; font-display: swap; src: url('assets/fonts/saira-italic800.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/saira-italic900.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/saira-normal400.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/saira-normal500.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/saira-normal600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/chakra-normal400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/chakra-normal500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/chakra-normal600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/chakra-normal700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/notojp-normal500.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/notojp-normal700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/notojp-normal900.woff2') format('woff2'); }

/* ---- tokens/colors.css ---- */
:root {
  --psl-red: #D6301F;
  --psl-red-hot: #E8431C;
  --psl-yellow: #EFDD2A;
  --psl-cream: #F4EFDC;
  --psl-cream-dim: #D9D5C6;
  --psl-asphalt: #141412;
  --psl-asphalt-2: #1E1E1B;
  --psl-asphalt-3: #2A2A27;
  --psl-graphite: #33332E;
  --psl-gray: #A8A79D;
  --psl-gray-dim: #6B6B64;

  --bg-page: var(--psl-asphalt);
  --surface-card: var(--psl-asphalt-2);
  --surface-raised: var(--psl-asphalt-3);
  --border-default: var(--psl-graphite);
  --border-strong: #4A4A43;

  --text-primary: var(--psl-cream);
  --text-body: var(--psl-cream-dim);
  --text-muted: var(--psl-gray);
  --text-dim: #8A8A81;              /* was #6B6B64 (3.4:1) — lifted to clear WCAG AA 4.5:1 on cards */
  --text-on-accent: #FFF9EC;        /* warm near-white — cream on red was 4.24:1, just under AA */
  --text-inverse: var(--psl-asphalt);

  --accent: var(--psl-red);
  --accent-hover: #C22A1A;
  --accent-active: #A82416;
  --accent-text: #F0613D;           /* brighter red for small text on dark — 12px eyebrows now clear AA */
  --signal: var(--psl-yellow);
  --signal-hover: #E0CF1E;

  --link: var(--psl-yellow);
  --link-hover: var(--psl-cream);

  --focus-ring: 0 0 0 2px var(--psl-asphalt), 0 0 0 4px var(--psl-yellow);

  --status-ok: #7BB661;
  --status-warn: var(--psl-yellow);
  --status-error: var(--psl-red);

  /* ---- tokens/typography.css ---- */
  --font-display: 'Saira', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --text-display-xl: 900 italic 3.5rem/1.05 var(--font-display);
  --text-display-lg: 900 italic 2.5rem/1.1 var(--font-display);
  --text-display-md: 800 italic 1.75rem/1.15 var(--font-display);
  --text-display-sm: 800 italic 1.25rem/1.2 var(--font-display);
  --text-label: 800 italic 0.875rem/1.3 var(--font-display);

  --text-body-lg: 400 1.0625rem/1.65 var(--font-body);
  --text-body-md: 400 0.9375rem/1.6 var(--font-body);
  --text-body-sm: 400 0.8125rem/1.55 var(--font-body);
  --text-caption: 400 0.75rem/1.5 var(--font-body);

  --tracking-display: 0.02em;
  --tracking-overline: 0.3em;

  /* ---- tokens/spacing.css ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --content-max: 1200px;
  --content-pad: 40px;

  /* ---- tokens/effects.css ---- */
  --shadow-card: 0 8px 24px rgba(20, 20, 18, 0.2);
  --shadow-pop: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 12px 40px rgba(232, 67, 28, 0.25);

  --motif-checker: repeating-conic-gradient(var(--psl-cream) 0% 25%, var(--psl-asphalt) 0% 50%);
  --motif-checker-size: 28px 28px;
  --motif-tarmac: repeating-linear-gradient(135deg, #262623 0 18px, #2A2A27 18px 36px);
  --motif-caution: repeating-linear-gradient(0deg, var(--psl-red) 0 14px, var(--psl-yellow) 14px 28px);

  --skew-stripe: skewX(-24deg);
  --skew-checker: skewX(-12deg);

  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over inline display (view/form/splash toggles
   carry inline display:flex, which would otherwise defeat [hidden]). */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--psl-asphalt); }

body {
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: var(--link); text-decoration: none; transition: color var(--duration-fast) var(--ease-snap); }
a:hover { color: var(--link-hover); }

/* button/anchor reset used where the comp had clickable <div>s */
.reset-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Visible keyboard focus everywhere — brand double-ring token */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.psl-btn:focus-visible, .psl-tag:focus-visible { border-radius: var(--radius-md); }

@keyframes psl-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes psl-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.psl-pop { animation: psl-pop var(--duration-base) var(--ease-snap); }

/* Skip link — off-screen until focused, so keyboard users can jump past the nav */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--signal);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-snap);
}
.skip-link:focus { transform: translateY(0); color: var(--text-inverse); }

/* Cart quantity / remove controls — bumped to a ≥44px touch target on phones */
.psl-qty { width: 32px; height: 32px; }
.psl-cart-remove { padding: 6px; line-height: 1; }
@media (max-width: 720px) {
  .psl-qty { width: 44px; height: 44px; }
  .psl-cart-remove { min-width: 44px; min-height: 44px; }
}

/* ============================================================
   Components — reproduced from _ds_bundle.js
   ============================================================ */

/* ---- Button ---- */
.psl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-snap),
              border-color var(--duration-fast) var(--ease-snap);
  outline: none;
  /* size: md (default) */
  padding: 10px 20px;
  font-size: 0.9375rem;
  min-height: 40px;
}
.psl-btn--sm { padding: 7px 14px; font-size: 0.8125rem; min-height: 32px; }
.psl-btn--lg { padding: 13px 28px; font-size: 1.0625rem; min-height: 48px; }

.psl-btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.psl-btn--primary:hover { background: var(--accent-hover); }
.psl-btn--primary:active { background: var(--accent-active); }

.psl-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.psl-btn--secondary:hover { background: var(--surface-raised); border-color: var(--border-strong); }
.psl-btn--secondary:active { background: var(--surface-card); }

.psl-btn--signal { background: var(--signal); color: var(--text-inverse); border-color: transparent; }
.psl-btn--signal:hover { background: var(--signal-hover); }
.psl-btn--signal:active { background: #D4C41C; }

.psl-btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.psl-btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); }
.psl-btn--ghost:active { background: var(--surface-card); }

/* ---- Badge ---- */
.psl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.psl-badge--neutral { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border-default); }
.psl-badge--red { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.psl-badge--yellow { background: var(--signal); color: var(--text-inverse); border-color: transparent; }
.psl-badge--outline { background: transparent; color: var(--signal); border-color: var(--signal); }

/* ---- Tag ---- */
.psl-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-snap),
              color var(--duration-fast) var(--ease-snap),
              border-color var(--duration-fast) var(--ease-snap);
}
.psl-tag:hover { background: var(--surface-raised); }
.psl-tag.is-active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

/* ---- Faceted filter bar ---- */
.psl-facet { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.psl-facet-label {
  flex: 0 0 84px;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.psl-facet-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.psl-tag--parent { font-weight: 700; }
.psl-tag--child { color: var(--text-dim); }        /* generacja — lżejsza od marki */
.psl-tag--child.is-active { color: var(--text-on-accent); }
/* Wysuwanie generacji przy rozwinięciu marki. Klasę is-entering nadaje renderShop
   tylko chipom, które właśnie się pojawiły (nie przy każdym klikaniu w gałęzi). */
@keyframes psl-chip-in {
  from { opacity: 0; transform: translateX(-10px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.psl-tag--child.is-entering { animation: psl-chip-in 220ms var(--ease-snap) both; }
/* Chowanie generacji przy zwijaniu gałęzi. Klasę is-leaving nadaje dyspozytor
   znikającym chipom; po animacji renderShop usuwa je z DOM. */
@keyframes psl-chip-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-10px) scale(0.94); }
}
.psl-tag--child.is-leaving { animation: psl-chip-out 180ms var(--ease-snap) forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .psl-tag--child.is-entering,
  .psl-tag--child.is-leaving { animation: none; }
}

/* Chip na kafelku produktu (auto + typ) */
.psl-card-chip {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-snap),
              color var(--duration-fast) var(--ease-snap),
              border-color var(--duration-fast) var(--ease-snap);
}
.psl-card-chip:hover { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

/* ---- Input / textarea / select (forms) ---- */
.psl-input-label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.psl-input-label > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.psl-control {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 10px 14px;
  background: var(--bg-page);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-snap);
}
.psl-control::placeholder { color: var(--text-dim); }
.psl-control:focus { border-color: var(--signal); box-shadow: var(--focus-ring); }
textarea.psl-control { resize: vertical; }
select.psl-control { -webkit-appearance: none; appearance: none; cursor: pointer; }

/* ---- Brand logo (full racing-sticker logo) ---- */
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 68px; width: auto; }
.brand-emblem-footer { display: block; height: 96px; width: auto; }

/* ---- Header nav + mobile burger menu ---- */
.header-nav { display: flex; gap: 14px; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-snap), border-color var(--duration-fast) var(--ease-snap);
}
.nav-burger:hover { background: var(--surface-raised); border-color: var(--border-strong); }

/* Below this width the fully-expanded nav no longer fits → collapse to burger. */
@media (max-width: 860px) {
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 12px 20px 16px;
    background: var(--psl-asphalt);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-pop);
    transform-origin: top;
    /* closed state — animated open via .open. visibility uses 0s duration +
       delay so it flips instantly (delayed on close so the fade-out shows),
       which avoids a quirk where a timed visibility transition freezes opacity. */
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-snap),
                transform var(--duration-base) var(--ease-snap),
                visibility 0s linear var(--duration-base);
  }
  .header-nav.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--duration-base) var(--ease-snap),
                transform var(--duration-base) var(--ease-snap),
                visibility 0s linear 0s;
  }
  .nav-burger { display: inline-flex; }
}

/* ---- Image slot (placeholder for warsztat / product photos) ---- */
.img-slot {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background: var(--psl-asphalt);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.img-slot svg { opacity: 0.4; }

/* ============================================================
   Responsive layer
   The comp is desktop-fixed (inline grid-template-columns).
   Layout grids get a class so media queries can collapse them
   without overflow at small viewports. Visual props stay inline.
   ============================================================ */
.wrap { width: 100%; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-3-sm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hero-grid  { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.split-grid { display: grid; gap: 48px; align-items: center; }
.split-a { grid-template-columns: 0.9fr 1.1fr; }   /* cream CTA */
.split-b { grid-template-columns: 1.05fr 0.95fr; align-items: start; }  /* product */
.split-c { grid-template-columns: 1.1fr 0.9fr; align-items: start; }    /* contact */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.cart-row  { display: grid; grid-template-columns: 1fr auto auto auto; gap: 20px; align-items: center; }
.blog-row  { display: grid; grid-template-columns: 280px 1fr; }

@media (max-width: 960px) {
  .hero-grid, .split-a, .split-b, .split-c { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-3, .grid-3-sm, .grid-2 { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 1fr auto; row-gap: 12px; }
  .cart-row .cart-line-total { grid-column: 1 / -1; text-align: left !important; }
  /* pull side padding in so nothing overflows on phones */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 420px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Display headings use fixed desktop sizes inline (from the comp). Scale them
   down fluidly on small screens so nothing overflows, and let long single
   words (e.g. KOMPROMISÓW) wrap instead of pushing horizontal scroll. */
@media (max-width: 720px) {
  main h1 { font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important; }
  main h2 { font-size: clamp(1.375rem, 6.5vw, 1.75rem) !important; }
  main h1, main h2 { overflow-wrap: break-word; }
  /* trim the roomy desktop vertical padding on phones */
  .hero-grid { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* Respect reduced-motion: kill the looping ticker, splash breathe,
   and any transform transitions. */
@media (prefers-reduced-motion: reduce) {
  .psl-ticker-track { animation: none !important; }
  * { transition-duration: 1ms !important; }
  /* fully drop the menu transition here — a 1ms visibility transition otherwise
     freezes opacity, leaving the menu invisible. Instant is correct anyway. */
  .header-nav, .header-nav.open { transition: none !important; }
}

/* ============================================================
   Legal pages (Polityka prywatności / Regulamin / Zwroty)
   Scaffold only — readable prose column + visible fill markers.
   ============================================================ */
.legal { max-width: 780px; }
.legal h2 {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  text-transform: uppercase; font-size: 1.375rem; line-height: 1.2;
  color: var(--text-primary); margin: 40px 0 12px;
}
.legal h3 { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin: 22px 0 6px; }
.legal p, .legal li { font-size: 0.9375rem; line-height: 1.7; color: var(--text-body); }
.legal ul, .legal ol { margin: 8px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal .lead { font-size: 0.9375rem; color: var(--text-muted); max-width: 64ch; }
/* placeholder the owner/lawyer must replace */
.legal .fill {
  background: rgba(239, 221, 42, 0.16); color: var(--text-primary);
  border: 1px dashed var(--signal); border-radius: 6px;
  padding: 1px 7px; font-size: 0.8125rem; font-weight: 600; white-space: normal;
}
/* italic guidance note explaining what a section needs */
.legal .note {
  font-size: 0.8125rem; line-height: 1.6; color: var(--text-dim);
  font-style: italic; border-left: 2px solid var(--border-strong);
  padding-left: 12px; margin: 8px 0;
}
/* unmissable "this is a draft" banner at the top of every legal page */
.legal-draft {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(214, 48, 31, 0.12); border: 1px solid var(--psl-red);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 8px;
}
.legal-draft strong { color: var(--psl-red); }
.legal-form {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 12px; padding: 20px 24px; margin: 12px 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem;
  line-height: 1.9; color: var(--text-body); white-space: pre-wrap;
}

/* ---- Product image gallery / carousel ---- */
/* Big image is a horizontal scroll-snap track; thumbnails below drive it. */
.psl-gallery-main {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.psl-gallery-main::-webkit-scrollbar { display: none; }
.psl-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}
/* Directional motion blur while scrolling — horizontal-only SVG blur whose
   strength app.js drives from scroll velocity; snaps to sharp once it settles. */
.psl-gallery-main.is-scrolling .psl-gallery-slide img {
  filter: url(#psl-motion-blur);
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .psl-gallery-main { scroll-behavior: auto; }
  .psl-gallery-main.is-scrolling .psl-gallery-slide img { filter: none; }
}
/* Transparent full-height edge buttons over the main image -> prev/next slide.
   Invisible at rest; a subtle chevron fades in on hover (desktop affordance). */
.psl-gallery-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  min-width: 56px;
  max-width: 96px;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 10px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.psl-gallery-nav--prev { left: 0; justify-content: flex-start; }
.psl-gallery-nav--next { right: 0; justify-content: flex-end; }
.psl-gallery-nav svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--text-primary);
  background: rgba(17, 17, 17, 0.5);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms var(--ease-snap);
}
.psl-gallery-frame:hover .psl-gallery-nav svg { opacity: 0.7; }
.psl-gallery-nav:hover svg { opacity: 1; }
.psl-gallery-nav:focus-visible svg { opacity: 1; outline: 2px solid var(--signal); outline-offset: 2px; }

.psl-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.psl-gallery-thumbs::-webkit-scrollbar { height: 6px; }
.psl-gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.psl-gallery-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-card);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 150ms var(--ease-snap), border-color 150ms var(--ease-snap);
}
.psl-gallery-thumb:hover { opacity: 1; }
.psl-gallery-thumb.is-active { opacity: 1; border-color: var(--signal); }

/* ---- Card carousel (product list) ---- */
/* Same edge-click navigation as the p14 gallery, scaled to the 200px card image. */
.psl-card-media {
  position: relative;
  height: 200px;
  background: var(--psl-asphalt);
  display: block;
}
.psl-card-media--link { cursor: pointer; }
.psl-card-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.psl-card-track::-webkit-scrollbar { display: none; }
/* Directional motion blur while scrolling — same shared SVG filter as the p14 gallery. */
.psl-card-track.is-scrolling .psl-card-slide img {
  filter: url(#psl-motion-blur);
  will-change: filter;
}
.psl-card-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: block;
}
/* Transparent full-height edge buttons -> prev/next slide; chevron fades in on hover. */
.psl-cardnav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  min-width: 44px;
  max-width: 72px;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 8px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.psl-cardnav--prev { left: 0; justify-content: flex-start; }
.psl-cardnav--next { right: 0; justify-content: flex-end; }
.psl-cardnav svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  color: var(--text-primary);
  background: rgba(17, 17, 17, 0.5);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms var(--ease-snap);
}
.psl-card-media:hover .psl-cardnav svg { opacity: 0.7; }
.psl-cardnav:hover svg { opacity: 1; }
.psl-cardnav:focus-visible svg { opacity: 1; outline: 2px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .psl-card-track { scroll-behavior: auto; }
  .psl-card-track.is-scrolling .psl-card-slide img { filter: none; }
}