/* Bubu Performance Parts — bundled stylesheet (single request, no chained @import).
   Source of truth: styles/{tokens,base,layout,components/*,pages/*}.css
   Cascade order preserved exactly: tokens -> base -> layout -> components -> pages.
   To change styles, edit the matching source file and regenerate this bundle with:
     node tools/build-css.js */

/* ===== tokens.css ===== */
/* Inter — self-hosted variable font (wght 400–800). The font stack has always
   NAMED Inter first, but the perf pass removed the network font, so most
   visitors silently fell back to Segoe UI. Self-hosting restores the intended
   face: two subset files, cached forever, font-display swap keeps text visible
   during load. (ADR-027) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent: #f25b28;
  --accent-contrast: #ffffff;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", ui-monospace, monospace;
  /* Display = Inter pushed into a tighter, more confident "industrial" voice
     via weight + negative tracking. Same family, no extra network font. */
  --font-display: var(--font-sans);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.5rem + 3vw, 3rem);
  --fs-3xl: clamp(2.75rem, 1.4rem + 5.6vw, 4.5rem);

  --fw-regular: 400;
  --fw-medium: 540;
  --fw-semibold: 620;
  --fw-bold: 720;
  --fw-black: 820;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  /* tracking helpers for the display voice */
  --track-tight: -0.02em;
  --track-tighter: -0.035em;
  --track-eyebrow: 0.16em;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --container: 1200px;
  --header-h: 92px;

  --transition-fast: 140ms ease;
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06), 0 1px 1px rgba(10, 10, 11, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(10, 10, 11, 0.18), 0 2px 8px -2px rgba(10, 10, 11, 0.08);
  --shadow-lg: 0 24px 60px -16px rgba(10, 10, 11, 0.28), 0 6px 18px -8px rgba(10, 10, 11, 0.12);
  /* soft accent-tinted glow used on premium hover states (orange only) */
  --shadow-accent: 0 16px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent);
  /* subtle focus ring built from the accent — no new hue */
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

:root {
  --bg: #ffffff;
  --bg-subtle: #f5f5f6;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --border: #e4e4e7;
  --border-strong: #c7c7cc;
  --text: #0a0a0b;
  --text-muted: #6b6b73;
  --text-faint: #9a9aa2;
  --overlay: rgba(10, 10, 11, 0.45);
}

/* ===== base.css ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tighter);
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

ul {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Strong, palette-safe focus affordance for the key interactive surfaces.
   Combines the accent outline with a soft accent ring for high visibility. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.field:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--ring-accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--sp-3);
}

.muted {
  color: var(--text-muted);
}

.noscript-banner {
  background: var(--accent);
  color: var(--accent-contrast);
  text-align: center;
  padding: var(--sp-4);
  font-weight: var(--fw-medium);
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.tag-pill.is-universal {
  border-color: var(--border-strong);
}

.tag-pill.is-dedicated {
  color: var(--accent);
  border-color: var(--accent);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Resilience: if JS never runs, the noscript banner already warns the user,
   but ensure reveal content is never permanently invisible. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===== layout.css ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

main {
  flex: 1 0 auto;
  width: 100%;
}

.section {
  padding-block: var(--sp-8);
}

.section--tight {
  padding-block: var(--sp-6);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.section__head h2 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}

.section__head p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-6);
}

.layout-listing {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.layout-listing__sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.prose {
  max-width: 70ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.prose h1 {
  font-size: var(--fs-xl);
}

.prose h2 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-4);
}

.prose p,
.prose li {
  color: var(--text-muted);
}

.prose ul {
  list-style: disc;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.page-head {
  padding-block: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}

.breadcrumbs {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.breadcrumbs a:hover {
  color: var(--text);
}

@media (max-width: 900px) {
  .layout-listing {
    grid-template-columns: 1fr;
  }

  .layout-listing__sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .section {
    padding-block: var(--sp-6);
  }

  h1 {
    font-size: var(--fs-xl);
  }
}

/* ===== components/buttons.css ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast),
    filter var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn--primary {
  /* solid brand orange — no gradient */
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 1px 2px rgba(10, 10, 11, 0.18);
}

.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-accent), inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--border-strong);
  color: var(--bg);
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: not-allowed;
}

/* aria-disabled (not native disabled) keeps the button focusable/announced
   for screen readers, paired with aria-describedby explaining why — see the
   podsumowanie order gate in js/summary.js. Override :hover/:active so it
   still reads as inert. */
.btn--primary[aria-disabled="true"]:hover,
.btn--primary[aria-disabled="true"]:active {
  background: var(--border-strong);
  color: var(--bg);
  box-shadow: none;
  filter: none;
  transform: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--bg-subtle);
}

.btn--dark {
  background: var(--text);
  color: var(--bg);
}

.btn--dark:hover {
  filter: brightness(1.1);
}

.btn--sm {
  padding: var(--sp-2) var(--sp-3);
}

/* card add-to-cart: a touch more presence than a bare icon */
.product-card__add {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.product-card__add svg {
  width: 18px;
  height: 18px;
}

.btn--lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-base);
}

.btn--block {
  width: 100%;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover {
  background: var(--bg-subtle);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn--sm {
  width: 36px;
  height: 36px;
}

.icon-btn--sm svg {
  width: 16px;
  height: 16px;
}

@media (pointer: coarse) {
  .icon-btn--sm {
    width: 40px;
    height: 40px;
  }
}

/* ===== components/header.css ===== */
.site-header {
  position: sticky;
  /* Sticks right below the pre-launch banner when it's shown — the banner
     itself sticks at top:0 above it (see components/prelaunch.css) and sets
     --prelaunch-banner-h; falls back to 0 (top:0) once it's gone. */
  top: var(--prelaunch-banner-h, 0px);
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  flex-shrink: 0;
}

.logo {
  display: block;
  width: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 520px) {
  .site-header .logo {
    height: 46px;
  }

  .site-header .header__bar {
    gap: var(--sp-2);
    padding-inline: var(--sp-3);
  }
}

.header__menu {
  display: none;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.header__search-toggle {
  display: none;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.lang-btn:hover {
  background: var(--bg-subtle);
}

.header__cart {
  position: relative;
}

.cart-badge[hidden] {
  display: none;
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-nav__item--all {
  font-weight: var(--fw-bold);
  color: var(--text);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  padding: var(--sp-4);
  background: var(--bg);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mobile-menu__nav a {
  padding: var(--sp-3) var(--sp-2);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  border-radius: var(--radius-md);
}

.mobile-menu__nav a:hover {
  background: var(--bg-subtle);
}

.mobile-menu__cats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* a standalone category link in the mobile menu */
.mobile-menu__cat {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-menu__cat:hover,
.mobile-menu__cat:focus-visible {
  background: var(--bg-subtle);
  color: var(--accent);
}

/* expandable group section */
.mobile-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  background: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mobile-group__toggle:hover {
  background: var(--bg-subtle);
}

.mobile-group__caret {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.mobile-group__caret svg {
  width: 18px;
  height: 18px;
}

.mobile-group__toggle[aria-expanded="true"] .mobile-group__caret {
  transform: rotate(180deg);
}

.mobile-group__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.mobile-group__panel[hidden] {
  display: none;
}

.mobile-group__panel .mobile-menu__cat {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-group__caret {
    transition: none;
  }
}

@media (max-width: 860px) {
  .header__menu {
    display: inline-flex;
  }

  .site-header .header__search {
    display: none;
  }

  .header__search-toggle {
    display: inline-flex;
  }

  .site-header.is-search-open .header__search {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    max-width: none;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: 1;
  }

  .site-header.is-search-open .header__search-icon {
    left: calc(var(--sp-4) + var(--sp-3));
  }

  .site-header.is-search-open .search-panel {
    left: var(--sp-4);
    right: var(--sp-4);
  }

  .site-header.is-menu-open .mobile-menu {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-md);
    z-index: 40;
  }
}

/* When the mobile menu is open, lock the page behind it so touch-scrolling
   moves the menu panel, not the page underneath. */
body.menu-open {
  overflow: hidden;
}

/* ===== components/search.css ===== */
.header__search {
  position: relative;
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
}

.header__search-icon {
  position: absolute;
  left: var(--sp-3);
  color: var(--text-faint);
  display: inline-flex;
  pointer-events: none;
}

.header__search-icon svg {
  width: 18px;
  height: 18px;
}

.header__search-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3) 0 calc(var(--sp-6) + 2px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.header__search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 1;
}

.search-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

.search-hit:last-child {
  border-bottom: none;
}

.search-hit:hover,
.search-hit:focus-visible {
  background: var(--bg-subtle);
}

.search-hit__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-hit__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-hit:hover .search-hit__name {
  color: var(--accent);
}

.search-hit__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.search-hit__price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.search-empty {
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ===== components/category-nav.css ===== */
.category-nav {
  border-top: 1px solid var(--border);
  /* visible (not overflow-x:auto) so the mega-menu dropdown can escape the
     bar. The mega-menu groups collapse many categories into a few top-level
     items, so horizontal scrolling is no longer needed on desktop. */
  overflow: visible;
  scrollbar-width: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-nav__row {
  display: flex;
  flex-wrap: nowrap;           /* keep the whole nav on a single row */
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
}

.category-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.category-nav__item:hover,
.category-nav__item:focus-visible {
  background: var(--bg-subtle);
  color: var(--text);
}

/* ---- Desktop mega-menu ------------------------------------------------ */

.nav-group {
  position: relative;
}

.nav-group__trigger {
  /* the group label is a real link; the caret hints at the disclosure */
  cursor: pointer;
}

.nav-group__caret {
  display: inline-flex;
  transition: transform var(--transition-fast);
}

.nav-group__caret svg {
  width: 14px;
  height: 14px;
}

/* open the panel on pointer hover (CSS) and on keyboard/focus (.is-open via JS) */
.nav-group:hover .nav-group__caret,
.nav-group.is-open .nav-group__caret {
  transform: rotate(180deg);
}

.nav-group:hover .nav-group__trigger,
.nav-group.is-open .nav-group__trigger {
  background: var(--bg-subtle);
  color: var(--text);
}

.mega-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: 1;
  min-width: 240px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    visibility var(--transition-fast);
}

.nav-group:hover .mega-menu,
.nav-group.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Right-align the dropdowns of the right-most groups so a left:0 panel never
   spills past the viewport edge and creates a horizontal page scrollbar. */
.nav-group:nth-last-child(-n + 3) .mega-menu {
  left: auto;
  right: 0;
}

/* hover bridge: keep the panel reachable across the gap below the trigger */
.mega-menu::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--sp-2)) 0 auto 0;
  height: var(--sp-2);
}

/* One flat, evenly-styled list of subcategories (no bold headings). Short lists
   stay a single column; long ones flow into balanced columns so every entry is
   visible at once without scrolling (owner wants to see them all). */
.mega-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega-menu__link {
  display: block;
  /* Same compact type as the top-level category items, so a long group fits in
     a single column without overflowing the viewport. */
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  background: var(--bg-subtle);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .nav-group__caret,
  .mega-menu {
    transition: none;
  }
}

@media (max-width: 860px) {
  .category-nav {
    display: none;
  }
}

/* ===== components/footer.css ===== */
.site-footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-block: var(--sp-7) var(--sp-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-6);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 280px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer__col h3 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* real heading content — AA-passing muted instead of decorative faint */
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.footer__col a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: color var(--transition-fast);
}

.footer__col a:hover {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Trust + accepted-payments row (site-wide, every page). */
.footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__badges li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer__badges svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.footer__pay {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.footer__pay img {
  height: 22px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: 3px 5px;
}

/* Slim footer (owner 2026-07-19): payment marks live in the bottom bar now. */
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__bottom .footer__pay { display: flex; align-items: center; gap: 0.6rem; opacity: 0.85; }

/* ===== components/product-card.css ===== */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Restrained hover: a gentle lift and soft shadow, no loud accent border —
   keeps the grid calm and premium rather than busy. */
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
  transform: scale(1.035);
}

.product-card__flag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--sp-2) 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.product-card__flag::before {
  content: "★";
  font-size: 11px;
  line-height: 1;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  flex: 1;
}

.product-card__pills {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tag-pill.is-dedicated {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.stock-dot--in_stock {
  background: #16a34a;
}

.stock-dot--backorder {
  background: #2563eb;
}

.stock-dot--out_of_stock {
  background: #94a3b8;
}

.product-card__producer {
  display: block;
}

.producer-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  max-width: 130px;
}

.producer-logo {
  /* Fixed logo-box: every brand mark gets the same visible footprint (max
     16x108 + padding, capped to .producer-badge's 22px height) so a square
     icon (TiAL) and a wide wordmark (BorgWarner) read as similar visual
     weight instead of whatever their native aspect ratio happens to produce.
     Very wide logos get held back by max-width on purpose — that's the cap
     that keeps them from dominating. */
  max-height: 16px;
  max-width: 108px;
  padding: 3px 6px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.producer-badge--text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* real content — use AA-passing muted, not decorative faint */
  color: var(--text-muted);
}

.product-card__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  transition: color var(--transition-fast);
}

.product-card:hover .product-card__name,
.product-card__name:hover,
.product-card__name:focus-visible {
  color: var(--accent);
}

.product-card__spec {
  font-size: var(--fs-xs);
  min-height: 1em;
}

.product-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.product-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
}

.price-vat {
  font-size: 10px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.product-card__foot .btn {
  flex-shrink: 0;
}

/* Neutral chip behind every producer logo — a consistent frame that keeps both
   dark and light artwork readable; light-art logos get the dark variant. */
.producer-badge {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Weekly deals: struck-through old price + accent promo price + card flag */
.price-old {
  text-decoration: line-through;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  margin-right: var(--sp-2);
}
.price-promo { color: var(--accent); }
.product-card__flag--promo { background: var(--accent); color: var(--accent-contrast); }

/* ===== components/product-detail.css ===== */
.product-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-4) var(--sp-7);
}

.product-detail__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.product-detail__sku {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-detail__producer {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.product-detail__producer:hover {
  text-decoration: underline;
}

.product-detail__producer .producer-badge {
  height: 28px;
  max-width: 170px;
}

.product-detail__producer .producer-logo {
  /* Bigger context = more room, so bump the same fixed logo-box up a size
     rather than switching approach. */
  max-height: 20px;
  max-width: 140px;
  padding: 4px 10px;
}

.product-detail__producer .producer-badge--text {
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
}

.product-detail__panel h1 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
  line-height: 1.1;
}

.product-detail__fit {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.product-detail__short {
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.product-detail__buy {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}

.product-detail__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
}

.product-detail__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tight);
}

.product-detail__price-wrap .price-vat {
  font-size: var(--fs-xs);
}

.product-detail__buy .stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.product-detail__buy .stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.product-detail__buy .stock-dot--in_stock {
  background: #16a34a;
}

.product-detail__buy .stock-dot--backorder {
  background: #2563eb;
}

.product-detail__buy .stock-dot--out_of_stock {
  background: #94a3b8;
}

.product-detail__actions {
  display: flex;
  gap: var(--sp-3);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-2);
}

.qty-stepper span {
  min-width: 28px;
  text-align: center;
  font-weight: var(--fw-medium);
}

.product-detail__trust {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-4);
  padding: 0;
  margin: 0;
}

.product-detail__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.product-detail__trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

.product-detail__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
}

.product-detail__block h2 {
  font-size: var(--fs-lg);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.product-detail__block p {
  color: var(--text-muted);
}

.product-detail__block p + p {
  margin-top: var(--sp-3);
}

/* Expert description: scannable subheads + feature bullets */
.desc-subhead {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text);
  margin: var(--sp-5) 0 var(--sp-2);
}

.desc-subhead:first-child {
  margin-top: 0;
}

.desc-list {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.desc-list li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.desc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

.spec-table tr:nth-child(even) th,
.spec-table tr:nth-child(even) td {
  background: var(--bg-subtle);
}

.spec-table th {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  width: 45%;
}

.spec-table td {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.check-list svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.product-detail__related {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--border);
}

.product-detail__related-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}

.product-detail__related h2 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}

.product-detail__related-sub {
  color: var(--text-muted);
  font-size: var(--fs-md);
}

@media (max-width: 820px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .product-detail__panel {
    position: static;
  }
}

/* Verified-purchase reviews (product page + /ocena form + confirmation links) */
.product-reviews { margin-top: var(--sp-6); }
.product-review { border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }
.product-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.review-stars-static { color: var(--accent); letter-spacing: 2px; }
.product-review__meta { color: var(--text-muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-1); }
.product-review__verified { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); }
.product-review__verified svg { width: 14px; height: 14px; }
.product-review__text { margin: var(--sp-2) 0 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }

.review-page { max-width: 560px; }
.review-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.review-stars { display: flex; gap: var(--sp-1); }
.review-star { font-size: 2rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--border-strong); transition: color var(--transition-fast), transform var(--transition-fast); }
.review-star:hover { transform: scale(1.15); }
.review-star.is-on { color: var(--accent); }
.review-error { color: #c0392b; font-size: var(--fs-sm); margin: 0; }
.field-label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }

.confirmation__reviews { margin-top: var(--sp-4); text-align: left; }
.review-links { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.review-links__item { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); text-decoration: none; font-size: var(--fs-sm); }
.review-links__item:hover { text-decoration: underline; }
.review-links__item svg { width: 16px; height: 16px; }

/* Brand bar: the manufacturer mark gets real presence at the top of the panel
   (bare mark, no chip at this size — cleaner). The catalog number now lives in
   the spec table, not here, so the bar carries the logo alone. */
.product-detail__brandbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.product-detail__producer .producer-badge {
  height: 56px;
  max-width: 240px;
  background: none;
  border: none;
}
.product-detail__producer .producer-logo {
  max-height: 56px;
  max-width: 240px;
  padding: 0;
}
.product-detail__producer .producer-badge--text {
  height: auto;
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  padding: 0;
  background: none;
  border: none;
}
@media (max-width: 640px) {
  .product-detail__producer .producer-badge,
  .product-detail__producer .producer-logo { height: 44px; max-height: 44px; max-width: 180px; }
}

/* Payment states on the order confirmation / order-view page */
.pay-state { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.pay-state--ok { color: #1e7e34; }
.pay-state--ok svg { width: 18px; height: 18px; }
.pay-state--fail { color: #c0392b; }

/* Producer list price label next to the struck-out reference price (Omnibus-
   safe: it is the manufacturer's price, never presented as our former price). */
.product-detail__price-wrap .price-old__label {
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--color-text-muted, #6b7280);
  margin-right: 0.15rem;
}

/* ===== components/gallery.css ===== */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gallery__main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: border-color var(--transition-fast), box-shadow var(--transition-base);
}

.gallery__main:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__zoom-hint {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--text-muted);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.gallery__zoom-hint svg {
  width: 18px;
  height: 18px;
}

.gallery__main:hover .gallery__zoom-hint,
.gallery__main:focus-visible .gallery__zoom-hint {
  opacity: 1;
  transform: none;
  color: var(--accent);
}

.gallery-zoom__img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

.gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.gallery__thumb {
  width: 72px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-subtle);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.gallery__thumb:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__thumb.is-active {
  border-color: var(--accent);
}

/* ===== components/cart.css ===== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: var(--z-drawer);
}

.drawer-overlay.is-visible {
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 100%);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
}

.cart-drawer.is-open {
  transform: none;
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas: "img info total" "img qty remove";
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.cart-line__img {
  grid-area: img;
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cart-line__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-line__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}

.cart-line__name:hover {
  color: var(--accent);
}

.cart-line__price {
  font-size: var(--fs-xs);
}

.cart-line__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.cart-line__qty-val {
  min-width: 22px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.cart-line__total {
  grid-area: total;
  text-align: right;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.cart-line__remove {
  grid-area: remove;
  justify-self: end;
  color: var(--text-faint);
}

.cart-line__remove:hover {
  color: var(--accent);
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
}

.cart-summary__row strong {
  font-size: var(--fs-md);
}

.cart-free {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cart-free--reached {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  color: #15803d;
}

.cart-free--reached svg {
  width: 16px;
  height: 16px;
}

.cart-free__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  overflow: hidden;
}

.cart-free__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--transition-base);
}

.cart-ship-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.cart-page {
  max-width: 720px;
  margin-inline: auto;
}

/* Clear-cart text button (below checkout / continue) */
.cart-clear {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--color-text-muted, #8a8f98);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cart-clear:hover,
.cart-clear:focus-visible {
  color: var(--color-danger, #e5484d);
  text-decoration: underline;
}

/* Shared "temporarily out of stock" state — greys out the whole line (cart
   drawer/page AND the checkout order-item) so it reads as excluded, while
   Remove (and the qty stepper) stay usable. The order is placed WITHOUT
   these lines; see js/cart.js subtotal()/parcelSizes()/total(). */
.cart-line--unavailable,
.order-item--unavailable {
  opacity: 0.5;
}

.unavailable-badge {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ===== components/forms.css ===== */
.field {
  width: 100%;
  height: 46px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field::placeholder {
  color: var(--text-faint);
}

.field:hover {
  border-color: var(--border-strong);
}

textarea.field {
  height: auto;
  padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-snug);
  resize: vertical;
}

.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-6);
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--accent);
  min-height: 1em;
}

/* error text only takes vertical space once a message is present — keeps
   clean spacing between valid fields, no permanent reserved gap */
.field-error:empty {
  min-height: 0;
}

.field-row.has-error .field {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.field-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.field-check a {
  color: var(--accent);
  text-decoration: underline;
}

.field-check.has-error {
  color: var(--accent);
}

.field-check .field-error {
  grid-column: 2;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.turnstile-box {
  min-height: 0;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.filters__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* Truncate the closed value of long-option selects (e.g. the 100+ engine
   codes in "Pasuje do") instead of letting it overflow the panel. */
.filters__group select.field {
  text-overflow: ellipsis;
}

/* Dual-handle price slider */
.price-slider {
  padding: var(--sp-2) var(--sp-2) 0;
}

.price-slider__track {
  position: relative;
  height: 4px;
  margin: 10px 0;
  background: var(--border);
  border-radius: 999px;
}

.price-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 999px;
}

.price-slider__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-slider__input--min {
  z-index: 3;
}

.price-slider__input--max {
  z-index: 4;
}

.price-slider__input:focus-visible {
  outline: none;
}

.price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.price-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.price-slider__input:focus-visible::-webkit-slider-thumb,
.price-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* The focused handle must sit above its sibling so it stays visible/grabbable
   even when both handles overlap. */
.price-slider__input:focus-visible {
  z-index: 5;
}

.price-slider__input::-moz-range-track {
  background: transparent;
}

/* Touch: grow the hit area to ~28px (WCAG 2.5.5) while a thick white border
   keeps the visible dot small. Desktop pointer keeps the slim 16px thumb. */
@media (pointer: coarse) {
  .price-slider__track {
    height: 6px;
  }
  .price-slider__input::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    border-width: 9px;
  }
  .price-slider__input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-width: 9px;
  }
}

.price-slider__values {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.filters__check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}

.filters__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.filters__check input:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
  border-radius: var(--radius-sm);
}

.filters__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.filters__actions .btn--block {
  color: var(--text-muted);
}

/* Active-filter chips — a removable summary above the grid. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.chip:hover {
  border-color: var(--border-strong);
}

.chip__x {
  font-size: 1.05em;
  line-height: 1;
  color: var(--text-muted);
}

.chip:hover .chip__x {
  color: var(--accent);
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

/* "Clear all" reads as the quiet, terminal action in the chip row. */
.chip--clear {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chip--clear:hover {
  color: var(--accent);
}

.invoice-types {
  display: flex;
  gap: var(--sp-3);
}

.invoice-type {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.invoice-type:hover {
  border-color: var(--border-strong);
}

.invoice-type:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.invoice-type input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

.invoice-billing,
.invoice-billing-address {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.nip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}

.nip-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-height: 1em;
}

.nip-status.is-ok {
  color: #15803d;
}

.nip-status.is-error {
  color: var(--accent);
}

.ship-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ship-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ship-option:hover {
  border-color: var(--border-strong);
}

.ship-option__label {
  font-weight: var(--fw-medium);
}

.ship-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ship-option input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

.ship-free {
  color: #15803d;
}

.ship-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.pay-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pay-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pay-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pay-option input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

.pay-option__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pay-option__label {
  font-weight: var(--fw-medium);
}

.pay-option__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.pay-badges {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.pay-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.review-address {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.review-address h3 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.review-address p {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.review-address p + p {
  margin-top: var(--sp-2);
}

.checkout__section > h2 {
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--sp-1);
}

@media (max-width: 560px) {
  .pay-option {
    grid-template-columns: auto 1fr;
  }

  .pay-badges {
    grid-column: 2;
  }
}

/* ===== components/modal.css ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.modal.is-open {
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.modal__panel {
  position: relative;
  margin: auto;
  width: min(520px, calc(100% - 2 * var(--sp-4)));
  max-height: calc(100dvh - 2 * var(--sp-6));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform var(--transition-base);
}

.modal.is-open .modal__panel {
  transform: none;
}

.modal--sheet .modal__panel {
  margin: auto auto 0 auto;
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
}

/* Grabber handle so the bottom sheet reads as draggable/dismissible. */
.modal--sheet .modal__head {
  position: relative;
  padding-top: var(--sp-5);
}

.modal--sheet .modal__head::before {
  content: '';
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.modal__head h2 {
  font-size: var(--fs-md);
}

.modal__body {
  padding: var(--sp-4);
  overflow-y: auto;
}

/* ===== components/toast.css ===== */
.toast-stack {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: var(--z-toast);
  width: max-content;
  max-width: calc(100% - 2 * var(--sp-4));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.toast__icon {
  display: inline-flex;
  color: var(--accent);
}

.toast__icon svg {
  width: 18px;
  height: 18px;
}

.toast--error .toast__icon {
  color: #f87171;
}

/* ===== components/prelaunch.css ===== */
/* Pre-launch: sticky top banner, podsumowanie order gate, shared email-capture
   form and the footer fallback row. Contrast rule throughout: DARK text
   (var(--text)) on a light accent-tinted background for body copy; white text
   only on a solid-accent pill/button (var(--accent) fails AA for body text on
   white, ~3.4:1). */

.prelaunch-banner {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) + 1);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.prelaunch-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
  text-align: center;
}

.prelaunch-banner__text {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin: 0;
}

.prelaunch-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.prelaunch-banner__cta {
  white-space: nowrap;
}

.prelaunch-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.prelaunch-banner__close:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.prelaunch-banner__close svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .prelaunch-banner__inner {
    justify-content: flex-start;
    text-align: left;
  }

  .prelaunch-banner__text {
    flex: 1 1 220px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---- podsumowanie order gate ------------------------------------------ */

.prelaunch-gate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.prelaunch-gate__note {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ---- shared notify-capture form (banner modal / gate / footer) -------- */

.notify-capture__intro {
  color: var(--text);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}

.notify-capture__row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.notify-capture__row .field {
  flex: 1 1 220px;
}

.notify-capture__confirm {
  color: #15803d;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ---- footer fallback row ------------------------------------------------ */

.footer__notify {
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__notify h3 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.footer__notify-form {
  max-width: 420px;
}

/* ===== pages/home.css ===== */
.hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%);
  overflow: hidden;
}

/* faint engineered grid texture — built from the border colour, no new hue */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hero h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tighter);
  line-height: 1.04;
}

.hero p {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 54ch;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.hero__actions .btn {
  padding-inline: var(--sp-6);
}

/* tasteful staggered entrance for the hero, opt-out for reduced motion */
.hero__inner > * {
  animation: hero-rise 720ms var(--ease-out) both;
}

.hero__inner > :nth-child(1) { animation-delay: 40ms; }
.hero__inner > :nth-child(2) { animation-delay: 120ms; }
.hero__inner > :nth-child(3) { animation-delay: 200ms; }
.hero__inner > :nth-child(4) { animation-delay: 300ms; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner > * {
    animation: none;
  }
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.category-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-weight: var(--fw-semibold);
  transition: transform var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.category-tile:hover,
.category-tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-md);
}

.category-tile:hover svg,
.category-tile:focus-visible svg {
  color: var(--accent);
  transform: translateX(3px);
}

.category-tile svg {
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.category-tile__name {
  flex: 1;
}

/* Producer tile (owner): a vertical mark — logo on top, an orange separator,
   then the brand name in text below. The name reinforces logos that aren't
   self-explanatory, and the whole tile stays a single tap target. */
.producer-tile {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  min-height: 128px;
  position: relative;
}

.producer-tile__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
}

.producer-tile__logo img {
  /* Fixed logo-box, independent of the tile's actual width, so the same brand
     mark renders at the same size on every breakpoint instead of stretching on
     roomier grids. Wide wordmarks (BorgWarner, Kelford) get held back by
     max-width so they don't dominate a near-square mark like TiAL. */
  max-height: 40px;
  max-width: 120px;
  padding: 4px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.producer-tile__logo--text {
  font-weight: var(--fw-semibold);
  font-size: 1.05rem;
  text-align: center;
}

.producer-tile__sep {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #f25b28);
}

.producer-tile__name {
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  color: var(--text, #111827);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.category-tile svg {
  width: 18px;
  height: 18px;
  color: var(--text-faint);
}

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}

.value {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--border);
  transition: border-color var(--transition-base);
}

.value:hover {
  border-top-color: var(--accent);
}

.value h3 {
  font-size: var(--fs-md);
}

.value p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.value__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-tight);
  color: var(--accent);
  line-height: 1;
}

.trust {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.trust .section__head {
  align-items: center;
  text-align: center;
}

.trust__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  align-items: center;
  justify-content: center;
}

.trust__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.trust__logo:hover {
  opacity: 1;
  color: var(--text);
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: var(--fs-2xl);
  }

  .hero {
    padding-block: var(--sp-7) var(--sp-6);
  }
}

/* Newsletter band on home, right above "Why us" — the single signup point
   (footer stays slim). */
.nl-section {
  background: var(--bg-subtle, rgba(242, 91, 40, 0.05));
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  padding: 2.25rem 0;
  margin: 1.5rem 0;
}
.nl-band {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  align-items: center;
  justify-content: space-between;
}
.nl-band__intro { max-width: 30rem; }
.nl-band__intro h2 { margin: 0 0 0.4rem; }
.nl-band__intro p { margin: 0; }
.nl-band__form { flex: 1 1 24rem; max-width: 32rem; }
.nl-band__row { display: flex; gap: 0.6rem; }
.nl-band__row input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
}
.nl-band__consent { margin: 0.55rem 0 0; font-size: 0.75rem; }
.nl-band__consent a { text-decoration: underline; }
.nl-band__msg { margin: 0.55rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--color-success, #16a34a); }
.nl-band__msg--err { color: var(--color-danger, #dc2626); }
@media (max-width: 640px) {
  .nl-band__row { flex-direction: column; }
}

/* ===== pages/listing.css ===== */
.listing-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.listing-toolbar__count {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.listing-toolbar__sort {
  margin-left: auto;
}

.listing-more {
  text-align: center;
  margin-top: var(--sp-6);
}

/* Numbered pagination (replaces "load more") */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-6);
}
.pager__num,
.pager__edge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pager__num:hover,
.pager__edge:not(.is-disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pager__num.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  pointer-events: none;
}
.pager__edge.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.pager__gap {
  min-width: 24px;
  text-align: center;
  color: var(--text-faint);
  user-select: none;
}

.listing-toolbar__sort .field {
  height: 40px;
}

.listing-toolbar__filter {
  display: none;
}

.listing-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}

.listing-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.listing-empty__icon svg {
  width: 24px;
  height: 24px;
}

.listing-empty__text {
  font-size: var(--fs-md);
}

@media (max-width: 900px) {
  .listing-toolbar__filter {
    display: inline-flex;
  }

  .layout-listing__sidebar {
    display: none;
  }
}

/* Keep the filter/sort controls the same compact size as the nav (one type
   size across the browse UI, not the tall 16px form fields used at checkout). */
.layout-listing__sidebar .field,
.listing-toolbar__sort .field {
  font-size: 0.7rem;
  height: 36px;
}

.layout-listing__sidebar .filters__label {
  font-size: 0.7rem;
}

/* Category/subcategory SEO header + FAQ (from meta.json content). */
.listing-head { margin-bottom: var(--sp-4); }
.listing-head__title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--sp-2); }
.listing-head__intro { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; max-width: 78ch; margin: 0; }
.listing-faq { margin-top: var(--sp-6); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.listing-faq__title { font-size: 1.15rem; margin: 0 0 var(--sp-3); }
.listing-faq__item { border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }
.listing-faq__item summary { cursor: pointer; font-weight: var(--fw-medium); }
.listing-faq__item p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; margin: var(--sp-2) 0 0; }

/* ===== pages/checkout.css ===== */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  padding-bottom: var(--sp-8);
}

.checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 560px;
}

/* Sections are separated by generous whitespace and a single hairline rule
   rather than nested bordered cards — calmer, less visual noise.
   Block layout (not flex) so the fieldset's <legend> renders reliably as the
   section heading; child spacing comes from .checkout__section > * margins. */
.checkout__section {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.checkout__section > * + * {
  margin-top: var(--sp-3);
}

.checkout__section + .checkout__section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.checkout__section legend {
  width: 100%;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
  padding: 0;
}

/* Terms + primary CTA: a calm footer block, clearly the one obvious action. */
.checkout__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.ship-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sp-3);
}

.ship-brand {
  height: 20px;
  width: auto;
  opacity: 0.9;
}

.checkout__summary {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--bg-subtle);
}

.order-summary__title {
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--sp-4);
}

.order-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Editable order line (checkout): image · name/remove · qty stepper · total.
   Mirrors the cart drawer's product box, scaled for the summary column. */
.order-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas: "img name remove" "img qty total";
  gap: 2px var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.order-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.order-item__img {
  grid-area: img;
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.order-item__name {
  grid-area: name;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text);
}

.order-item__remove {
  grid-area: remove;
  justify-self: end;
  color: var(--text-faint);
}

.order-item__remove:hover {
  color: var(--accent);
}

.order-item__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.order-item__qty-val {
  min-width: 22px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.order-item__total {
  grid-area: total;
  justify-self: end;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* Read-only order line (review / confirmation): no stepper or remove. */
.order-item--static {
  grid-template-columns: 56px 1fr auto auto;
  grid-template-areas: "img name qty total";
}

.order-item__qty-static {
  grid-area: qty;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.order-summary__totals {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.order-summary__grand {
  margin-top: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  align-items: baseline;
}

.order-summary__grand strong {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
}

.field-error--form {
  text-align: center;
  font-size: var(--fs-sm);
}

.field-error--info {
  color: var(--text-muted);
}

.order-summary__subnote {
  font-size: var(--fs-sm);
}

.order-summary__ship-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.confirmation {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.confirmation__badge {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.confirmation__badge svg {
  width: 32px;
  height: 32px;
}

.confirmation__lead {
  color: var(--text-muted);
  max-width: 52ch;
}

.confirmation__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.confirmation__order strong {
  font-size: var(--fs-lg);
  color: var(--text);
  font-family: var(--font-mono);
}

.confirmation__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  margin-block: var(--sp-4);
  /* Size each card to its own content — without this the short payment card
     stretches to match a long order list, becoming a big empty grey box. */
  align-items: start;
}

.confirmation__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.confirmation__card h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-4);
}

.confirmation__bank {
  background: var(--bg-subtle);
}

/* Payment box: even vertical rhythm (message → button → transfer note), left
   aligned, so the elements never crowd or read as stacked on top of each other. */
.confirmation__bank [data-pay-box] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.confirmation__bank [data-pay-box] p {
  margin: 0;
  /* Same size as a product name in the order list (owner) — the default body
     size read too large next to the compact summary. */
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.bank-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.bank-details dt {
  color: var(--text-muted);
}

.bank-details dd {
  font-weight: var(--fw-medium);
  text-align: right;
}

@media (max-width: 860px) {
  .checkout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .checkout__form {
    max-width: none;
  }

  .checkout__summary {
    position: static;
    order: -1;
    padding: var(--sp-5);
  }

  .confirmation__grid {
    grid-template-columns: 1fr;
  }
}

.modal--geo .modal__panel {
  width: min(980px, 96vw);
  height: min(88vh, 880px);
  max-height: 92dvh;
}

.modal--geo .modal__body {
  padding: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.modal--geo inpost-geowidget {
  display: block;
  width: 100%;
  height: 100%;
}

.modal__close {
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 var(--sp-1);
}

[data-locker-open] {
  margin-top: var(--sp-2);
}

.locker-selected {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent);
}

.pay-option--single {
  grid-template-columns: 1fr;
}

.pay-title-logo {
  width: 20%;
  min-width: 84px;
  max-width: 116px;
  height: auto;
  align-self: flex-start;
  display: block;
}

.pay-banner {
  width: 100%;
  height: auto;
  display: block;
  margin-top: var(--sp-3);
}

/* Per-item availability warning at the order-summary step (fed by supplier sync) */
.order-item__avail { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.order-item__avail--warn { color: #b42318; }
.order-item__avail--soon { color: #b26a00; }