:root {
    /* Palette: fischer-red (default — official partner) */
    --c-bg: #f5f4f1;
    --c-surface: #ffffff;
    --c-surface-2: #f0eeea;
    --c-ink: #14110f;
    --c-ink-2: #2a2724;
    --c-muted: #6b6864;
    --c-muted-2: #9a9893;
    --c-line: #d8d5cf;
    --c-line-2: #e7e4dd;
    --c-accent: #E2001A;                 /* fischer red */
    --c-accent-ink: #ffffff;
    --c-accent-2: #B5001A;
    --c-warn: oklch(0.78 0.16 90);       /* yellow */
    --c-ok: oklch(0.62 0.14 155);        /* green */
    --c-danger: oklch(0.55 0.20 25);

    /* Typography */
    --f-display: 'Space Grotesk', system-ui, sans-serif;
    --f-text: 'Inter', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Spacing & radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 22px;
    --shadow-sm: 0 1px 2px rgba(14,15,16,.06), 0 0 0 1px rgba(14,15,16,.04);
    --shadow-md: 0 6px 24px -8px rgba(14,15,16,.12), 0 0 0 1px rgba(14,15,16,.05);
    --shadow-lg: 0 24px 60px -20px rgba(14,15,16,.25);

    --grid-cols: 4;
    --card-pad: 18px;
  }

  /* Palette variants */
  [data-palette="graphite-orange"] {
    --c-bg: #f5f4f1;
    --c-surface: #ffffff;
    --c-surface-2: #ecebe6;
    --c-ink: #0e0f10;
    --c-ink-2: #2a2c2e;
    --c-muted: #6b6c6f;
    --c-line: #d8d6cf;
    --c-line-2: #e7e5df;
    --c-accent: oklch(0.68 0.18 50);
    --c-accent-ink: #ffffff;
    --c-accent-2: oklch(0.62 0.18 50);
  }
  [data-palette="navy-chartreuse"] {
    --c-bg: #f3f4f6;
    --c-surface: #ffffff;
    --c-surface-2: #e9ecf1;
    --c-ink: #0a1426;
    --c-ink-2: #1a2740;
    --c-muted: #5c6378;
    --c-line: #d2d6df;
    --c-line-2: #e3e6ec;
    --c-accent: oklch(0.85 0.18 120);
    --c-accent-ink: #0a1426;
    --c-accent-2: oklch(0.78 0.18 120);
  }
  [data-palette="steel-amber"] {
    --c-bg: #efeeea;
    --c-surface: #ffffff;
    --c-surface-2: #e3e1db;
    --c-ink: #1c1a16;
    --c-ink-2: #2d2a23;
    --c-muted: #6e6a60;
    --c-line: #cfccc3;
    --c-line-2: #ddd9cf;
    --c-accent: oklch(0.72 0.14 65);
    --c-accent-ink: #1c1a16;
    --c-accent-2: oklch(0.65 0.14 65);
  }

  /* Dark mode */
  [data-dark="true"] {
    --c-bg: #0d0e10;
    --c-surface: #16181b;
    --c-surface-2: #1f2125;
    --c-ink: #f5f4f1;
    --c-ink-2: #d8d6d0;
    --c-muted: #8e8f93;
    --c-muted-2: #62646a;
    --c-line: #2a2c30;
    --c-line-2: #1f2125;
  }

  /* Display font variants */
  [data-display="archivo"] { --f-display: 'Archivo', system-ui, sans-serif; }
  [data-display="ibm-mono"] { --f-display: 'IBM Plex Mono', ui-monospace, monospace; }

  /* Density */
  [data-density="dense"]   { --grid-cols: 5; --card-pad: 14px; }
  [data-density="comfortable"] { --grid-cols: 4; --card-pad: 18px; }
  [data-density="spacious"] { --grid-cols: 3; --card-pad: 24px; }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overflow-x: clip; }
  /* grid/flex items domyślnie nie kurczą się poniżej min-content — to rozpychało
     layout na mobilce; zezwalamy na zwężanie kluczowych kontenerów */
  .hero-v2-left, .hero-v2-right, .hero-v2-stat,
  .header-inner, .megabar-inner, .search { min-width: 0; }
  body {
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--f-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

  /* === Top utility bar === */
  .topbar {
    background: var(--c-ink);
    color: var(--c-surface);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    gap: 24px;
  }
  .topbar-strip {
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: var(--f-mono);
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(255,255,255,.78);
  }
  .topbar-strip .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent);
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: .35; }
  }
  .topbar-right { display: flex; gap: 18px; color: rgba(255,255,255,.7); font-size: 11px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
  .topbar-right a:hover { color: var(--c-accent); }

  /* === Header === */
  .header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0; z-index: 50;
  }
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    height: 84px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--c-ink);
  }
  .logo-mark {
    width: 38px; height: 38px;
    background: var(--c-ink);
    color: var(--c-accent);
    border-radius: 8px;
    display: grid; place-items: center;
    position: relative;
    overflow: hidden;
  }
  .logo-mark svg { width: 24px; height: 24px; }
  .logo-text { display: flex; flex-direction: column; line-height: 1; }
  .logo-text .l1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
  .logo-text .l2 { font-family: var(--f-mono); font-size: 9px; letter-spacing: .25em; color: var(--c-muted); margin-top: 4px; text-transform: uppercase; font-weight: 500; }

  /* Search — precyzyjny instrument */
  .search {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 0 5px 0 6px;
    height: 48px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s, box-shadow .18s, background .18s;
  }
  .search:hover { border-color: var(--c-muted-2); }
  .search:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-accent) 13%, transparent);
  }
  .search-cat {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border-radius: 8px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line-2);
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-ink-2);
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
  }
  .search-cat:hover { border-color: var(--c-muted-2); color: var(--c-ink); }
  .search-ico {
    display: grid; place-items: center;
    padding-left: 8px;
    color: var(--c-muted);
    flex: none;
  }
  .search input {
    flex: 1;
    border: 0; background: transparent;
    outline: none;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--c-ink);
    padding: 0 6px;
    min-width: 0;
  }
  .search input::placeholder { color: var(--c-muted); }
  .search-kbd {
    font-family: var(--f-mono);
    font-size: 12px;
    line-height: 1;
    color: var(--c-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 4px 9px;
    flex: none;
  }
  .search:focus-within .search-kbd { opacity: 0; }
  .search-btn {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border: 0;
    border-radius: 8px;
    height: 38px;
    padding: 0 18px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    display: flex; align-items: center; gap: 6px;
    flex: none;
    transition: background .15s, transform .08s;
  }
  .search-btn:hover { background: var(--c-accent-2); }
  .search-btn:active { transform: translateY(1px); }
  /* Hamburger w pasku wyszukiwarki — tylko mobile (desktop: megabar) */
  .search-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex: none;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    border-right: 1px solid var(--c-line);
    border-radius: 0;
    margin-right: 2px;
    transition: color .15s;
  }
  .search-burger:hover { color: var(--c-accent); }

  /* Header actions */
  .header-actions { display: flex; align-items: center; gap: 4px; }
  .icon-btn {
    background: transparent;
    border: 0;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--c-ink-2);
    position: relative;
    transition: all .15s;
  }
  .icon-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
  .icon-btn .label {
    position: absolute; bottom: 4px;
    font-size: 9px;
    font-family: var(--f-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .icon-btn .badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: grid; place-items: center;
    padding: 0 5px;
    font-family: var(--f-mono);
  }
  .cart-btn {
    background: var(--c-ink);
    color: var(--c-surface);
    border: 0;
    border-radius: 999px;
    height: 46px;
    padding: 0 18px 0 14px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
    font-size: 13px;
    margin-left: 6px;
    transition: all .15s;
  }
  .cart-btn:hover { background: var(--c-accent); color: var(--c-accent-ink); }
  .cart-btn .count {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
  }
  .cart-btn:hover .count { background: var(--c-ink); color: var(--c-accent); }

  /* === Mega nav === */
  .megabar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
  }
  .megabar-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 52px;
  }
  .cat-btn {
    background: var(--c-ink);
    color: var(--c-surface);
    border: 0;
    padding: 0 22px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
    font-size: 14px;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,.08);
    min-width: 280px;
  }
  .cat-btn:hover { background: var(--c-accent); color: var(--c-accent-ink); }
  .nav-items {
    display: flex;
    align-items: stretch;
    flex: 1;
  }
  .nav-item {
    padding: 0 18px;
    display: flex; align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink-2);
    border-right: 1px solid var(--c-line-2);
    position: relative;
    cursor: pointer;
    transition: all .15s;
  }
  .nav-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
  .nav-item.has-promo::after {
    content: "•";
    color: var(--c-accent);
    margin-left: 6px;
  }
  .nav-right {
    margin-left: auto;
    display: flex; align-items: center; gap: 18px;
    padding: 0 18px;
    border-left: 1px solid var(--c-line-2);
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-muted);
  }
  .nav-right strong { color: var(--c-accent); font-weight: 600; }

  /* Megabar affordances — open state turns the trigger red, flips chevron */
  .cat-btn svg:last-child { transition: transform .25s ease; }
  .megabar:has(.megadrop.open) .cat-btn { background: var(--c-accent); color: var(--c-accent-ink); }
  .megabar:has(.megadrop.open) .cat-btn svg:last-child { transform: rotate(180deg); }
  .nav-item { transition: color .15s, box-shadow .15s; }
  .nav-item:hover { color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--c-accent); }

  /* === Hero slider === */
  .hero {
    margin: 22px auto 0;
  }
  .hero-stage {
    position: relative;
    height: 520px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-ink);
    color: var(--c-surface);
  }
  .hero-slide {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
  }
  .hero-slide.active { opacity: 1; pointer-events: auto; }
  .hero-content {
    padding: 56px 56px 56px 64px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  .hero-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--c-accent);
    display: flex; align-items: center; gap: 12px;
  }
  .hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px; height: 1px;
    background: var(--c-accent);
  }
  .hero-title {
    font-family: var(--f-display);
    font-size: clamp(40px, 5vw, 76px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 24px 0 0;
    text-wrap: balance;
  }
  .hero-title em {
    font-style: normal;
    color: var(--c-accent);
    position: relative;
  }
  .hero-sub {
    color: rgba(255,255,255,.7);
    font-size: 16px;
    line-height: 1.55;
    max-width: 460px;
    margin: 20px 0 0;
  }
  .hero-meta {
    display: flex;
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 24px;
  }
  .hero-meta-item {
    flex: 1;
    padding-right: 24px;
  }
  .hero-meta-item + .hero-meta-item {
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.12);
  }
  .hero-meta-k {
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.5);
  }
  .hero-meta-v {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: -0.02em;
  }
  .hero-meta-v small { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); }

  .hero-cta-row {
    display: flex; gap: 12px;
    margin-top: 28px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    transition: all .2s;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -4px color-mix(in oklch, var(--c-accent) 50%, transparent); }
  .btn-ghost {
    background: transparent;
    color: var(--c-surface);
    border: 1px solid rgba(255,255,255,.22);
  }
  .btn-ghost:hover { background: rgba(255,255,255,.06); }

  .hero-visual {
    position: relative;
    background: var(--c-ink-2);
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,.06);
  }
  .hero-visual-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 70% 50%, rgba(255,255,255,.04), transparent 60%),
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.04) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.04) 40px);
  }

  /* Hero visual stage — placeholder product art */
  .hero-product {
    position: absolute; inset: 0;
    display: grid; place-items: center;
  }
  .hero-product-frame {
    width: 70%; height: 70%;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: var(--r-md);
    position: relative;
    background:
      linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
  }
  .hero-product-label {
    position: absolute;
    top: -1px; left: 16px;
    background: var(--c-ink-2);
    padding: 0 8px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: rgba(255,255,255,.5);
    letter-spacing: .15em;
    text-transform: uppercase;
    transform: translateY(-50%);
  }
  .hero-product-spec {
    position: absolute;
    bottom: 18px; right: 18px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: rgba(255,255,255,.6);
    text-align: right;
    line-height: 1.4;
  }
  .hero-product-spec strong {
    color: var(--c-accent);
    font-weight: 600;
  }

  /* Rulers */
  .ruler {
    position: absolute;
    font-family: var(--f-mono);
    font-size: 9px;
    color: rgba(255,255,255,.35);
    letter-spacing: .1em;
  }
  .ruler-h {
    top: 22px; left: 24px; right: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between;
    padding-top: 4px;
  }
  .ruler-v {
    top: 56px; bottom: 56px; left: 24px;
    border-left: 1px solid rgba(255,255,255,.12);
    display: flex; flex-direction: column; justify-content: space-between;
    padding-left: 6px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .hero-controls {
    position: absolute;
    bottom: 24px; right: 24px;
    display: flex; gap: 8px;
    z-index: 4;
  }
  .hero-ctrl {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
    color: var(--c-surface);
    display: grid; place-items: center;
    transition: all .15s;
  }
  .hero-ctrl:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }

  .hero-dots {
    position: absolute;
    bottom: 32px; left: 64px;
    display: flex; gap: 8px; align-items: center;
    z-index: 4;
    font-family: var(--f-mono);
    font-size: 11px;
    color: rgba(255,255,255,.5);
  }
  .hero-dot {
    width: 28px; height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    border: 0;
    transition: all .2s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }
  .hero-dot.active { background: rgba(255,255,255,.22); width: 60px; }
  .hero-dot.active::after {
    content: ""; position: absolute; inset: 0;
    background: var(--c-accent);
    animation: dotFill 7s linear forwards;
    transform-origin: left;
  }
  @keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* === Section headers === */
  .section { padding: 80px 0 20px; }
  .section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
  }
  .section-head .left { max-width: 600px; }
  .section-kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-muted);
    display: flex; align-items: center; gap: 10px;
  }
  .section-kicker::before {
    content: ""; width: 24px; height: 1px;
    background: var(--c-accent);
  }
  .section-title {
    font-family: var(--f-display);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
    color: var(--c-ink);
  }
  .section-sub {
    color: var(--c-muted);
    margin-top: 12px;
    max-width: 540px;
  }
  .section-link {
    font-family: var(--f-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-ink);
    display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 4px;
    transition: all .15s;
  }
  .section-link:hover { color: var(--c-accent); border-color: var(--c-accent); }

  /* === Category grid === */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .cat-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all .2s;
    cursor: pointer;
  }
  .cat-card:hover {
    border-color: var(--c-ink);
    transform: translateY(-2px);
  }
  .cat-card:hover .cat-arrow {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    transform: rotate(-45deg);
  }
  .cat-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-surface-2);
    overflow: hidden;
  }
  .cat-thumb .cat-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cat-thumb .ico {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px; height: 72px;
    opacity: .16;
    color: var(--c-ink);
  }
  .cat-info {
    padding: 16px 18px 18px;
  }
  .cat-card .num {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-muted);
    letter-spacing: .15em;
  }
  .cat-card .name {
    display: block;
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--c-ink);
    margin-top: 6px;
  }
  .cat-card .name small {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 8px;
  }
  .cat-arrow {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink);
    display: grid; place-items: center;
    transition: all .25s;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
    z-index: 2;
  }

  /* === Product grid === */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 16px;
  }
  .product-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--card-pad);
    display: flex; flex-direction: column;
    transition: all .2s;
    position: relative;
    overflow: hidden;
  }
  .product-card:hover {
    border-color: var(--c-ink);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .product-card:hover .product-img-stripe { opacity: 1; }
  .product-card:hover .quick-add { opacity: 1; transform: translateY(0); }

  .product-tags {
    position: absolute;
    top: 12px; left: 12px;
    display: flex; gap: 6px;
    z-index: 2;
  }
  .tag {
    font-family: var(--f-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  .tag.promo { background: var(--c-accent); color: var(--c-accent-ink); }
  .tag.new { background: var(--c-ink); color: var(--c-surface); }
  .tag.bestseller { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); }

  .product-img {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
    background: var(--c-surface);
    position: relative;
    display: grid; place-items: center;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .product-img-stripe {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in oklch, var(--c-ink) 4%, transparent) 18px 19px);
    opacity: .6;
    transition: opacity .2s;
  }
  .product-svg {
    position: relative; z-index: 1;
    width: 65%; height: 65%;
    color: var(--c-ink-2);
  }
  .product-img-meta {
    position: absolute;
    bottom: 8px; left: 8px;
    font-family: var(--f-mono);
    font-size: 9px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  .product-code {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .product-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 6px 0 8px;
    color: var(--c-ink);
    min-height: 40px;
  }
  .product-brand {
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-muted);
    margin-bottom: 14px;
  }
  .product-specs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .spec-pill {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-ink-2);
    background: var(--c-surface-2);
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .product-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--c-line-2);
  }
  .price {
    display: flex; flex-direction: column;
    line-height: 1;
  }
  .price-old {
    font-size: 12px;
    color: var(--c-muted);
    text-decoration: line-through;
    margin-bottom: 4px;
  }
  .price-now {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--c-ink);
  }
  .price-unit {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
  }
  .add-btn {
    background: var(--c-ink);
    color: var(--c-surface);
    border: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: all .15s;
    flex-shrink: 0;
  }
  .add-btn:hover { background: var(--c-accent); color: var(--c-accent-ink); transform: rotate(90deg); }
  .add-btn.added { background: var(--c-ok); color: white; }

  .stock-line {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
  }
  .stock-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-ok);
  }
  .stock-line.low .stock-dot { background: var(--c-warn); }

  /* === Trust strip === */
  .trust {
    margin-top: 60px;
    background: var(--c-ink);
    color: var(--c-surface);
    border-radius: var(--r-xl);
    padding: 40px 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .trust-item {
    display: flex; gap: 16px;
    align-items: flex-start;
  }
  .trust-item .ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: var(--c-accent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .trust-item h4 {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .trust-item p {
    margin: 0;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    line-height: 1.5;
  }

  /* === Brands === */
  .brands {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    margin-top: 28px;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .brands-label {
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--c-muted);
    border-right: 1px solid var(--c-line);
    padding-right: 32px;
    min-width: 160px;
  }
  .brands-list {
    display: flex; align-items: center;
    gap: 48px;
    flex: 1;
    flex-wrap: wrap;
  }
  .brand-tag {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--c-muted-2);
    opacity: .7;
    transition: all .15s;
    cursor: pointer;
  }
  .brand-tag:hover { color: var(--c-ink); opacity: 1; }
  .brand-tag .pin {
    color: var(--c-accent);
  }

  /* === B2B banner === */
  .b2b-banner {
    margin-top: 80px;
    border-radius: var(--r-xl);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    padding: 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .b2b-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 90% 50%, color-mix(in oklch, var(--c-accent) 14%, transparent), transparent 50%);
    pointer-events: none;
  }
  .b2b-banner h3 {
    font-family: var(--f-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 12px 0 16px;
  }
  .b2b-banner p {
    color: var(--c-muted);
    font-size: 15px;
    margin: 0 0 24px;
    max-width: 480px;
  }
  .b2b-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
  }
  .b2b-feat {
    display: flex; gap: 12px; align-items: flex-start;
  }
  .b2b-feat .n {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-accent);
    letter-spacing: .1em;
    font-weight: 600;
    padding-top: 2px;
  }
  .b2b-feat h5 {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
  }
  .b2b-feat p {
    font-size: 13px;
    color: var(--c-muted);
    margin: 0;
  }
  .b2b-visual {
    position: relative;
    height: 260px;
    border-radius: var(--r-lg);
    background: var(--c-ink);
    color: var(--c-surface);
    overflow: hidden;
    padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .b2b-visual-bg {
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.05) 31px 32px),
      repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.05) 31px 32px);
    pointer-events: none;
  }
  .b2b-quote {
    font-family: var(--f-display);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    position: relative;
  }
  .b2b-quote::before {
    content: "„";
    font-size: 60px;
    line-height: 0;
    color: var(--c-accent);
    margin-right: 6px;
    vertical-align: -10px;
  }
  .b2b-author {
    font-family: var(--f-mono);
    font-size: 11px;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .12em;
    position: relative;
  }

  /* === Footer === */
  .footer {
    background: var(--c-ink);
    color: var(--c-surface);
    margin-top: 100px;
    padding: 72px 0 32px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .footer h5 {
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--c-accent);
    margin: 0 0 18px;
  }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer ul a { color: rgba(255,255,255,.65); font-size: 14px; }
  .footer ul a:hover { color: var(--c-accent); }
  .footer-brand .logo-text .l1 { color: var(--c-surface); }
  .footer-brand .logo-text .l2 { color: rgba(255,255,255,.5); }
  .footer-brand p {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    margin: 20px 0 0;
    max-width: 280px;
    line-height: 1.55;
  }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  .footer-bottom .links { display: flex; gap: 24px; }
  .footer-bottom .links a:hover { color: var(--c-accent); }
  .newsletter {
    display: flex;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    padding: 4px;
    margin-top: 4px;
  }
  .newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0 18px;
    color: var(--c-surface);
    font-size: 13px;
    font-family: inherit;
  }
  .newsletter input::placeholder { color: rgba(255,255,255,.4); }
  .newsletter button {
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 13px;
  }

  /* === Mini-cart drawer === */
  .cart-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    background: var(--c-surface);
    border-left: 1px solid var(--c-line);
    z-index: 100;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
  }
  .cart-drawer.open { transform: translateX(0); }
  .cart-overlay {
    position: fixed; inset: 0;
    background: rgba(14,15,16,.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .cart-overlay.open { opacity: 1; pointer-events: auto; }
  .cart-head {
    padding: 22px 24px;
    border-bottom: 1px solid var(--c-line);
    display: flex; justify-content: space-between; align-items: center;
  }
  .cart-head h3 {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
  }
  .cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    padding: 14px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
  }
  .cart-item-img {
    width: 64px; height: 64px;
    background: var(--c-surface);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    display: grid; place-items: center;
    color: var(--c-ink-2);
  }
  .cart-item-img svg { width: 60%; height: 60%; }
  .cart-item-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .cart-item-meta {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .cart-qty {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
  }
  .qty-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    border-radius: 4px;
    display: grid; place-items: center;
    font-family: var(--f-mono);
    font-size: 14px;
    line-height: 1;
  }
  .qty-btn:hover { background: var(--c-ink); color: var(--c-surface); }
  .qty-val {
    font-family: var(--f-mono);
    font-size: 13px;
    min-width: 22px;
    text-align: center;
    font-weight: 600;
  }
  .cart-item-price {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 15px;
    text-align: right;
    align-self: center;
  }
  .cart-foot {
    border-top: 1px solid var(--c-line);
    padding: 20px 24px;
    background: var(--c-surface-2);
  }
  .cart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
  }
  .cart-total .lbl {
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-muted);
  }
  .cart-total .val {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .cart-checkout {
    width: 100%;
    height: 52px;
    background: var(--c-ink);
    color: var(--c-surface);
    border: 0;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 14px;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .cart-checkout:hover { background: var(--c-accent); color: var(--c-accent-ink); }
  .cart-empty {
    text-align: center;
    color: var(--c-muted);
    padding: 60px 20px;
    font-family: var(--f-display);
  }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--c-ink);
    color: var(--c-surface);
    padding: 14px 20px;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: all .3s cubic-bezier(.16,1,.3,1);
  }
  .toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  .toast .check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    display: grid; place-items: center;
  }

  /* Mega menu dropdown */
  .megadrop {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-surface);
    border-top: 2px solid var(--c-accent);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    z-index: 40;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .megadrop.open { max-height: 700px; }
  .megadrop-inner {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 0;
    min-height: 420px;
  }
  .megadrop-cats {
    background: var(--c-surface-2);
    padding: 24px 0;
    border-right: 1px solid var(--c-line);
  }
  .mc-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-left: 3px solid transparent;
    color: var(--c-ink-2);
  }
  .mc-item.active {
    background: var(--c-surface);
    border-left-color: var(--c-accent);
    color: var(--c-ink);
    font-weight: 600;
  }
  .mc-item:hover { color: var(--c-ink); }
  .mc-item .count {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--c-muted);
    letter-spacing: .08em;
  }
  .megadrop-body {
    padding: 32px 36px;
  }
  .md-title {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
  }
  .md-desc {
    color: var(--c-muted);
    font-size: 13px;
    margin: 0 0 22px;
  }
  .md-subcats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 32px;
  }
  .md-subcat h6 {
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--c-accent);
    margin: 0 0 10px;
  }
  .md-subcat ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .md-subcat a {
    font-size: 13px;
    color: var(--c-ink-2);
    transition: color .15s;
  }
  .md-subcat a:hover { color: var(--c-accent); }
  .megadrop-promo {
    background: var(--c-ink);
    color: var(--c-surface);
    padding: 32px 28px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .megadrop-promo .tag-promo {
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--c-accent);
  }
  .megadrop-promo h4 {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 14px 0 0;
  }
  .megadrop-promo p {
    color: rgba(255,255,255,.6);
    font-size: 13px;
    margin: 12px 0 0;
  }
  .megadrop-promo .btn-promo {
    margin-top: 20px;
    align-self: flex-start;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border: 0;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
  }

  /* Mobile-ish handling — not focus for prototype */
  @media (max-width: 1100px) {
    .header-inner { grid-template-columns: auto 1fr auto; }
    .search { max-width: 380px; }
    .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  }


/* ============================================================
   Product Detail Page (PDP)
   ============================================================ */

/* Breadcrumb */
.crumbs {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 0 0;
  flex-wrap: wrap;
}
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-ink); }
.crumbs .sep { color: var(--c-muted-2); }
.crumbs .current { color: var(--c-ink); }

/* PDP header layout */
.pdp-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  margin-top: 24px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--c-line);
}

/* === Gallery === */
.pdp-gallery {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  position: sticky;
  top: 180px;
  align-self: start;
}
.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-thumb {
  width: 88px; height: 88px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  transition: all .15s;
}
.pdp-thumb:hover { border-color: var(--c-ink-2); }
.pdp-thumb.active {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 2px var(--c-ink) inset;
}
.pdp-thumb img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.pdp-thumb svg { width: 64%; height: 64%; color: var(--c-ink-2); }
.pdp-thumb-label {
  position: absolute;
  bottom: 4px; left: 4px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pdp-main-img {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp-main-img::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 24px, color-mix(in oklch, var(--c-ink) 3%, transparent) 24px 25px);
  opacity: .7;
}
.pdp-main-img > svg {
  position: relative;
  width: 60%; height: 60%;
  color: var(--c-ink);
}
.pdp-main-tags {
  position: absolute;
  top: 18px; left: 18px;
  display: flex; gap: 6px;
  z-index: 2;
}
.pdp-main-rulers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-muted);
  letter-spacing: .1em;
}
.pdp-main-rulers .r-top {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  border-top: 1px dashed var(--c-line);
  padding-top: 4px;
  display: flex; justify-content: space-between;
}
.pdp-main-rulers .r-left {
  position: absolute;
  top: 28px; bottom: 28px; left: 14px;
  border-left: 1px dashed var(--c-line);
  padding-left: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pdp-zoom {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-surface);
  border: 0;
  display: grid; place-items: center;
  z-index: 2;
}
.pdp-zoom:hover { background: var(--c-accent); color: var(--c-accent-ink); }

/* === Buy box / product info === */
.pdp-info { display: flex; flex-direction: column; }

.pdp-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.pdp-brand-tag {
  background: var(--c-ink);
  color: var(--c-surface);
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pdp-brand-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.pdp-code {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pdp-rating {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-ink-2);
}
.pdp-stars {
  display: flex; gap: 2px;
  color: var(--c-accent);
}

.pdp-title {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--c-ink);
}
.pdp-subtitle {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 540px;
}

/* Quick spec strip */
.pdp-quickspec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: 24px;
  background: var(--c-surface);
}
.pdp-qs {
  padding: 14px 18px;
  border-right: 1px solid var(--c-line);
}
.pdp-qs:last-child { border-right: 0; }
.pdp-qs-k {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.pdp-qs-v {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

/* Variant selector compact */
.pdp-variants-compact {
  margin-bottom: 24px;
}
.pdp-vc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.pdp-vc-head h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-ink-2);
  margin: 0;
  font-weight: 600;
}
.pdp-vc-head a {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 1px;
}
.pdp-vc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pdp-vc-row .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 90px;
}
.pdp-vc-row .opts {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pdp-vc-opt {
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .15s;
}
.pdp-vc-opt:hover { border-color: var(--c-ink); }
.pdp-vc-opt.active {
  background: var(--c-ink);
  color: var(--c-surface);
  border-color: var(--c-ink);
}
.pdp-vc-opt.disabled {
  opacity: .35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Buy box */
.pdp-buybox {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.pdp-buybox::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent);
}
.pdp-price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
}
.pdp-price-old {
  font-size: 14px;
  color: var(--c-muted);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.pdp-price-now {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-ink);
}
.pdp-price-vat {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-top: 6px;
}
.pdp-price-vat strong { color: var(--c-ink-2); }
.pdp-savings {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 4px;
  text-transform: uppercase;
}

.pdp-qty-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pdp-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  height: 52px;
}
.pdp-qty button {
  width: 42px; height: 100%;
  background: transparent; border: 0;
  display: grid; place-items: center;
  color: var(--c-ink-2);
}
.pdp-qty button:hover { color: var(--c-accent); }
.pdp-qty input {
  width: 60px;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  outline: none;
}
.pdp-buy-btn {
  height: 52px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .15s;
  letter-spacing: .02em;
}
.pdp-buy-btn:hover { background: var(--c-accent-2); }

.pdp-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.pdp-secondary {
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pdp-secondary:hover { border-color: var(--c-ink); color: var(--c-ink); }

.pdp-stock-row {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.pdp-stock-item {
  display: flex; gap: 12px; align-items: center;
  font-size: 13px;
  color: var(--c-ink-2);
}
.pdp-stock-item .ico {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--c-accent);
}
.pdp-stock-item strong { color: var(--c-ink); }

/* === Sticky section nav === */
.pdp-tabs {
  position: sticky;
  top: 136px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  z-index: 30;
  margin-top: 0;
}
.pdp-tabs-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-tabs-inner::-webkit-scrollbar { display: none; }
.pdp-tab {
  padding: 18px 22px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-weight: 600;
}
.pdp-tab:hover { color: var(--c-ink-2); }
.pdp-tab.active {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}
.pdp-tab .count {
  margin-left: 6px;
  color: var(--c-muted-2);
  font-weight: 500;
}

/* === PDP sections === */
.pdp-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--c-line);
}
.pdp-section:last-child { border-bottom: 0; }
.pdp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}
.pdp-section-head h2 {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.pdp-section-head .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pdp-section-sub {
  color: var(--c-muted);
  font-size: 15px;
  max-width: 520px;
  margin: 0;
  text-wrap: pretty;
}

/* Description / features grid */
.pdp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pdp-feature {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.pdp-feature .ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  color: var(--c-accent);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.pdp-feature h4 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.pdp-feature p {
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

/* Description bullets */
.pdp-desc {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.pdp-desc p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-2);
  margin: 0 0 16px;
}
.pdp-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp-desc ul li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--c-line-2);
  font-size: 14px;
  color: var(--c-ink-2);
}
.pdp-desc ul li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--c-accent);
}

/* Variant table */
.pdp-vartable-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.pdp-vartable-toolbar {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
  align-items: center;
  flex-wrap: wrap;
}
.pdp-vartable-toolbar .filter-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.pdp-vartable-toolbar .filter-pill:hover { border-color: var(--c-ink); }
.pdp-vartable-toolbar .filter-pill .lbl { color: var(--c-muted); }
.pdp-vartable-toolbar .filter-pill .val { font-weight: 700; color: var(--c-ink); }
.pdp-vartable-toolbar .right {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
}

table.pdp-vartable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pdp-vartable th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
  white-space: nowrap;
}
.pdp-vartable td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-2);
  vertical-align: middle;
  color: var(--c-ink-2);
}
.pdp-vartable tr:last-child td { border-bottom: 0; }
.pdp-vartable tr:hover td { background: var(--c-surface-2); }
.pdp-vartable .code {
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--c-ink);
  font-size: 12px;
  letter-spacing: .04em;
}
.pdp-vartable .dim {
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--c-ink);
  font-size: 13px;
  letter-spacing: .04em;
}
.pdp-vartable .price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.pdp-vartable .price small {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-top: 2px;
}
.pdp-vartable .stk {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.pdp-vartable .stk::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-ok);
}
.pdp-vartable .stk.low { color: var(--c-warn); }
.pdp-vartable .stk.low::before { background: var(--c-warn); }
.pdp-vartable .stk.out { color: var(--c-danger); }
.pdp-vartable .stk.out::before { background: var(--c-danger); }
.pdp-vartable .add-row {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-ink);
  color: var(--c-surface);
  border: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
}
.pdp-vartable .add-row:hover { background: var(--c-accent); color: var(--c-accent-ink); }
.pdp-vartable .add-row.added { background: var(--c-ok); }
.pdp-vartable input[type="number"] {
  width: 52px;
  height: 32px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--c-surface);
}

/* Applications */
.pdp-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pdp-app {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .2s;
  display: flex; flex-direction: column;
}
.pdp-app:hover {
  border-color: var(--c-ink);
  transform: translateY(-2px);
}
.pdp-app-img {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
  position: relative;
  display: grid; place-items: center;
  color: var(--c-ink);
  overflow: hidden;
}
.pdp-app-img::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in oklch, var(--c-ink) 4%, transparent) 14px 15px);
}
.pdp-app-img svg {
  position: relative;
  width: 50%; height: 50%;
  color: var(--c-ink);
  opacity: .8;
}
.pdp-app-num {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-app-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--c-ink);
  color: var(--c-surface);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.pdp-app-body {
  padding: 16px 18px 18px;
}
.pdp-app-body h4 {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.pdp-app-body p {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* Spec table */
.pdp-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.pdp-spec-group h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--c-accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-ink);
}
.pdp-spec-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line-2);
  font-size: 14px;
  gap: 16px;
}
.pdp-spec-row .k {
  color: var(--c-muted);
}
.pdp-spec-row .v {
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--c-ink);
  text-align: right;
  letter-spacing: .03em;
}

/* Documents */
.pdp-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pdp-doc {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  position: relative;
}
.pdp-doc:hover {
  border-color: var(--c-ink);
  transform: translateY(-2px);
}
.pdp-doc:hover .pdp-doc-arrow {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  transform: rotate(-45deg);
}
.pdp-doc-icon {
  width: 48px; height: 60px;
  background: var(--c-surface-2);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  border-left: 3px solid var(--c-accent);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  overflow: hidden;
}
.pdp-doc-icon::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(225deg, var(--c-surface) 50%, var(--c-line) 50%);
}
.pdp-doc-body { flex: 1; min-width: 0; }
.pdp-doc h5 {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.pdp-doc-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pdp-doc-meta .lang {
  background: var(--c-surface-2);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--c-ink-2);
}
.pdp-doc-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-ink);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .25s;
  align-self: center;
}

/* Certs strip */
.pdp-certs {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.pdp-cert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-2);
  font-weight: 600;
}
.pdp-cert::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 700;
}

/* FAQ */
.pdp-faq {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 880px;
}
.pdp-faq-item {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pdp-faq-q {
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink);
  transition: all .15s;
}
.pdp-faq-q:hover { background: var(--c-surface-2); }
.pdp-faq-q .icn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-surface-2);
  display: grid; place-items: center;
  transition: all .2s;
  flex-shrink: 0;
}
.pdp-faq-item.open .pdp-faq-q .icn {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  transform: rotate(45deg);
}
.pdp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.pdp-faq-item.open .pdp-faq-a { max-height: 400px; }
.pdp-faq-a-inner {
  padding: 0 22px 22px;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.6;
  border-top: 1px solid var(--c-line-2);
  padding-top: 16px;
}

/* Accessories grid uses regular product cards */

/* Print-friendly tweaks */
@media (max-width: 1100px) {
  .pdp-head { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .pdp-features { grid-template-columns: 1fr 1fr; }
  .pdp-apps { grid-template-columns: 1fr 1fr; }
  .pdp-docs { grid-template-columns: 1fr 1fr; }
  .pdp-spec-grid { grid-template-columns: 1fr; }
}



/* ============================================================
   Partner section (oficjalny partner fischer · 30 lat)
   ============================================================ */
.partner {
  margin-top: 28px;
  background: var(--c-ink);
  color: var(--c-surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
}
.partner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.035) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.035) 47px 48px);
  pointer-events: none;
}

.partner-left {
  padding: 56px 56px 56px 56px;
  position: relative;
  z-index: 1;
}
.partner-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 28px;
}
.partner-eyebrow .seal {
  width: 48px; height: 48px;
  color: var(--c-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
  animation: sealspin 30s linear infinite;
}
.partner-eyebrow .seal svg { width: 100%; height: 100%; }
@keyframes sealspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.partner-bignum {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 28px;
  position: relative;
}
.partner-bignum .years {
  font-family: var(--f-display);
  font-size: 200px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--c-surface);
  position: relative;
}
.partner-bignum .years::after {
  content: ".";
  color: var(--c-accent);
}
.years-meta {
  padding-bottom: 18px;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 24px;
}
.years-meta-l1 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-surface);
}
.years-meta-l2 {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--c-accent);
  margin-top: 8px;
  text-transform: uppercase;
}

.partner-lede {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.75);
  margin: 0 0 28px;
  max-width: 540px;
  text-wrap: pretty;
}
.partner-lede strong {
  color: var(--c-surface);
  font-weight: 600;
}

.partner-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  color: var(--c-surface);
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
  transition: all .2s;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }

.partner-right {
  padding: 56px 56px 56px 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: center;
}
.partner-fact {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all .2s;
}
.partner-fact:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.partner-fact .n {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-accent);
  letter-spacing: .15em;
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 3px;
}
.partner-fact h4 {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--c-surface);
  line-height: 1.25;
}
.partner-fact p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
}

@media (max-width: 1100px) {
  .partner { grid-template-columns: 1fr; }
  .partner-left { padding: 40px; }
  .partner-right { padding: 0 40px 40px; grid-template-columns: 1fr 1fr; }
  .partner-bignum .years { font-size: 140px; }
}


/* ============================================================
   V2 — Softening overrides (B2B / advisory tone)
   ============================================================ */

:root {
  /* Warmer, softer background */
  --c-bg: #FAF8F4;
  --c-surface: #ffffff;
  --c-surface-2: #F3F0EA;
  --c-surface-3: #ECE8E0;
  --c-ink: #1F1A18;
  --c-ink-2: #3A3431;
  --c-muted: #76706B;
  --c-muted-2: #A6A19B;
  --c-line: #E4DFD6;
  --c-line-2: #EFEBE3;

  /* Soften the shadows */
  --shadow-sm: 0 1px 1px rgba(31,26,24,.04);
  --shadow-md: 0 4px 18px -10px rgba(31,26,24,.08), 0 0 0 1px rgba(31,26,24,.04);
  --shadow-lg: 0 18px 50px -16px rgba(31,26,24,.18);

  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
}

/* Quieter topbar — light, not jet-black */
body .topbar {
  background: var(--c-ink);
  border-bottom: 0;
  border-top: 3px solid var(--c-accent);
}
body .topbar-strip { color: rgba(255,255,255,.7); }

/* Less aggressive hover transforms */
.product-card:hover,
.cat-card:hover { transform: none; }
.product-card:hover { box-shadow: var(--shadow-md); }

/* ============================================================
   Hero v2 — calm advisory
   ============================================================ */
.hero-v2 {
  margin: 28px auto 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 540px;
}
.hero-v2-left {
  padding: 64px 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}
.hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  background: var(--c-surface-2);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  align-self: flex-start;
  border: 1px solid var(--c-line);
}
.hero-v2-eyebrow .pill {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
}
.hero-v2-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
  max-width: 620px;
}
.hero-v2-title em {
  font-style: normal;
  color: var(--c-accent);
  font-weight: 600;
}
.hero-v2-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 20px 0 0;
  max-width: 540px;
  text-wrap: pretty;
}
.hero-v2-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-v2 .btn-ghost {
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  background: transparent;
}
.hero-v2 .btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-ink-2); }

.hero-v2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  padding-top: 28px;
}
.hero-v2-stat { padding-right: 20px; }
.hero-v2-stat + .hero-v2-stat { border-left: 1px solid var(--c-line); padding-left: 24px; }
.hero-v2-stat-v {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1;
}
.hero-v2-stat-v sup {
  font-size: 14px;
  vertical-align: super;
  color: var(--c-accent);
  font-weight: 700;
  margin-left: 2px;
}
.hero-v2-stat-k {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-muted);
  margin-top: 8px;
}

.hero-v2-right {
  position: relative;
  background: #e41e15;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-v2-partner-img {
  position: relative;
  width: 86%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: transparent;
  display: block;
  object-fit: contain;
}
.hero-v2-right-meta {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 3;
}

/* === Hero v2 — blueprint accents === */
.hero-v2-index {
  position: absolute;
  top: 28px; left: 56px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero-v2-index::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--c-accent);
}
.hero-v2-stats { position: relative; }
.hero-v2-stats::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 42px; height: 3px;
  background: var(--c-accent);
}
.hero-v2-right { isolation: isolate; }
.hero-v2-partner-img { z-index: 2; }
.hero-v2-corner {
  position: absolute;
  width: 26px; height: 26px;
  z-index: 3;
  pointer-events: none;
  border: 0 solid rgba(255,255,255,.7);
}
.hero-v2-corner.tl { top: 20px; left: 20px; border-top-width: 2px; border-left-width: 2px; }
.hero-v2-corner.tr { top: 20px; right: 20px; border-top-width: 2px; border-right-width: 2px; }
.hero-v2-corner.bl { bottom: 20px; left: 20px; border-bottom-width: 2px; border-left-width: 2px; }
.hero-v2-corner.br { bottom: 20px; right: 20px; border-bottom-width: 2px; border-right-width: 2px; }
.hero-v2-specchip {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(20,17,15,.40);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.hero-v2-specchip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   Section spacing — softer rhythm
   ============================================================ */
.soft-section {
  padding: 90px 0 40px;
}
.soft-section-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 40px;
  align-items: end;
}
.soft-section-head .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.soft-section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}
.soft-section-head h2 em { font-style: normal; color: var(--c-accent); font-weight: 600; }
.soft-section-head .lead {
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 500px;
  text-wrap: pretty;
}

/* ============================================================
   Industry solutions (B2B sectors)
   ============================================================ */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.industry {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  transition: all .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.industry:hover {
  border-color: var(--c-ink-2);
  background: var(--c-surface);
}
.industry:hover .industry-arrow {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.industry-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.industry-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-surface-2);
  color: var(--c-ink);
  display: grid; place-items: center;
}
.industry:hover .industry-ico {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.industry-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-ink);
  display: grid; place-items: center;
  transition: all .2s;
}
.industry-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.industry h3 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--c-ink);
}
.industry p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-muted);
}
.industry-tags {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--c-line);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.industry-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  padding: 3px 8px;
  background: var(--c-surface-2);
  border-radius: 4px;
}
.industry-img {
  height: 130px;
  margin: -28px -28px 0;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: relative;
}
.industry-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--c-surface) 100%);
}
.industry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  transition: transform .35s ease, opacity .2s;
  display: block;
}
.industry:hover .industry-img img {
  transform: scale(1.06);
  opacity: .85;
}

/* ============================================================
   Knowledge base / articles
   ============================================================ */
.knowledge {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.kn-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .2s;
  text-decoration: none;
  color: inherit;
}
.kn-card:hover { border-color: var(--c-ink-2); }
.kn-card.feat { grid-row: span 2; }
.kn-img {
  aspect-ratio: 16 / 10;
  background: var(--c-surface-2);
  position: relative;
  display: grid; place-items: center;
  color: var(--c-ink-2);
  overflow: hidden;
}
.kn-card.feat .kn-img { aspect-ratio: 16 / 9; }
.kn-img::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 18px, color-mix(in oklch, var(--c-ink) 3%, transparent) 18px 19px);
}
.kn-img svg { position: relative; width: 50%; height: 50%; opacity: .5; }
.kn-card.feat .kn-img svg { width: 38%; height: 38%; }
.kn-kind {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--c-ink);
  color: var(--c-surface);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: 600;
}
.kn-kind.calc { background: var(--c-accent); }
.kn-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kn-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: flex;
  gap: 14px;
}
.kn-card.feat .kn-body { padding: 28px 32px 32px; }
.kn-card h3 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}
.kn-card.feat h3 {
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kn-card p {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}
.kn-card.feat p { font-size: 15px; }
.kn-arrow {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: flex; align-items: center; gap: 8px;
}

/* ============================================================
   Partner v2 — uses real authorization graphic
   ============================================================ */
.partner-v2 {
  margin-top: 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}
.partner-v2-left {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.partner-v2-left .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: flex; align-items: center; gap: 10px;
}
.partner-v2-left .eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--c-accent);
}
.partner-v2-left h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}
.partner-v2-left h2 strong { color: var(--c-accent); font-weight: 600; }
.partner-v2-left p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}
.partner-v2-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.partner-v2-fact {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.partner-v2-fact .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--c-accent);
  font-weight: 700;
  padding-top: 2px;
}
.partner-v2-fact h5 {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.partner-v2-fact p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}
.partner-v2-right {
  background: var(--c-surface);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: relative;
  border-left: 1px solid var(--c-line);
}
.partner-v2-banner {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.partner-v2-stamp {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 32px;
  border-top: 1px dashed var(--c-line);
}
.partner-v2-stamp .yr {
  font-family: var(--f-display);
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-ink);
}
.partner-v2-stamp .yr span {
  color: var(--c-accent);
  font-weight: 600;
}
.partner-v2-stamp .ymeta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.4;
}
.partner-v2-stamp .ymeta strong { color: var(--c-ink); display: block; font-weight: 600; font-size: 12px; }

/* ============================================================
   Section-title softer for category/products
   ============================================================ */
.section-title { font-weight: 500; }
.section-title em { font-weight: 600; }
.hero-v2-cta-row .btn-primary { box-shadow: none; }
.hero-v2-cta-row .btn-primary:hover { transform: none; box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--c-accent) 45%, transparent); }

/* Responsive */
@media (max-width: 1100px) {
  .hero-v2 { grid-template-columns: 1fr; min-height: 0; }
  .hero-v2-left { padding: 56px 40px 36px; }
  .hero-v2-index { left: 40px; }
  .hero-v2-right { min-height: 340px; padding: 40px; }
  .hero-v2-specchip { display: none; }
  .hero-v2-partner-img { width: 52%; }
  .partner-v2 { grid-template-columns: 1fr; }
  .partner-v2-right { border-left: 0; border-top: 1px solid var(--c-line); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .industries { grid-template-columns: 1fr 1fr; }
  .knowledge { grid-template-columns: 1fr 1fr; }
  .kn-card.feat { grid-row: auto; grid-column: span 2; }
  .soft-section-head { grid-template-columns: 1fr; }
}

/* Navbar — tablet/telefon: logo+akcje w rzędzie, szukajka pełną szerokością,
   megabar jako pełnoszerokościowy przycisk kategorii (rozwija listę). */
@media (max-width: 1000px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    height: auto;
    padding: 14px 0;
  }
  .logo { grid-row: 1; grid-column: 1; }
  .header-actions { grid-row: 1; grid-column: 2; justify-self: end; gap: 4px; }
  .header-actions .icon-btn { display: none; }
  /* telefon-CTA jako okrągła ikona na pasku z logo */
  .catalog-cta {
    width: 46px; height: 46px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    margin-left: 0;
  }
  .catalog-cta .cta-label { display: none; }
  .catalog-cta .cta-ico { width: 24px; height: 24px; stroke-width: 2; }
  .search {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    height: 46px;
  }
  .search-cat, .search-kbd { display: none; }

  /* dolny pasek megabara chowamy — kategorie otwiera hamburger w wyszukiwarce */
  .megabar { border-bottom: 0; }
  .megabar-inner { display: none; }
  .search-burger { display: inline-flex; }

  .megadrop.open { max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .megadrop-inner { grid-template-columns: 1fr; min-height: 0; }
  .megadrop-body, .megadrop-promo { display: none; }
  .megadrop-cats { padding: 8px 0; border-right: 0; }
}

/* Telefon */
@media (max-width: 680px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .industries { grid-template-columns: 1fr; }
  .knowledge { grid-template-columns: 1fr; }
  .kn-card.feat { grid-column: auto; }
  .cat-card .name { font-size: 16px; }
  .cat-info { padding: 12px 13px 14px; }

  /* navbar declutter na telefonie */
  .topbar-inner { height: 32px; gap: 12px; }
  .topbar-strip span:not(:first-child) { display: none; }
  .topbar-strip {
    min-width: 0;
    flex: 1;
    gap: 0;
  }
  .topbar-strip span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-right { display: none; }
  .logo-text .l2 { display: none; }
  .logo-text .l1 { font-size: 17px; }

  /* hero na telefonie */
  .hero-v2 { margin-top: 18px; }
  .hero-v2-left { padding: 30px 20px 26px; }
  .hero-v2-index { top: 14px; left: 20px; font-size: 10px; }
  .hero-v2-right { min-height: 300px; padding: 26px; display: flex; align-items: center; justify-content: center; }
  .hero-v2-partner-img { width: 80%; margin: 0 auto; }
  .hero-v2-right-meta { display: none; }
  .hero-v2-stats { padding-top: 22px; gap: 8px; }
  .hero-v2-stat { padding-right: 8px; }
  .hero-v2-stat + .hero-v2-stat { padding-left: 12px; }
  .hero-v2-stat-v { font-size: 23px; white-space: nowrap; }
  .hero-v2-stat-k { font-size: 9px; letter-spacing: .06em; }
}

@media (max-width: 640px) {
  .footer {
    margin-top: 64px;
    padding: 44px 0 24px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
    padding-bottom: 30px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .footer-brand .logo {
    font-size: 18px;
  }
  .footer-brand .logo-mark {
    width: 34px;
    height: 34px;
  }
  .footer-brand p {
    max-width: none;
    margin-top: 16px;
    font-size: 13px;
  }
  .footer h5 {
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .footer ul {
    gap: 8px;
  }
  .footer ul a {
    display: inline-flex;
    padding: 2px 0;
    font-size: 13.5px;
    line-height: 1.35;
  }
  .footer-top > div:last-child {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.035);
  }
  .footer-top > div:last-child ul {
    gap: 9px !important;
  }
  .newsletter {
    border-radius: var(--r-md);
    padding: 5px;
  }
  .newsletter input {
    min-width: 0;
    padding: 0 12px;
  }
  .newsletter button {
    flex: none;
    padding: 10px 13px;
  }
  .footer-bottom {
    display: block;
    padding-top: 20px;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .06em;
  }
  .footer-bottom .links {
    margin-top: 14px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .pdp-head {
    gap: 28px;
    margin-top: 18px;
    padding-bottom: 44px;
  }
  .pdp-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pdp-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
  .pdp-main-img { min-height: 280px; }
  .pdp-section {
    padding: 44px 0;
  }
  .pdp-section-head {
    display: block;
    margin-bottom: 22px;
  }
  .pdp-section-head h2 {
    font-size: 26px;
  }
  .pdp-section-sub {
    margin-top: 10px;
    font-size: 14px;
  }
  .pdp-desc,
  .pdp-features,
  .pdp-apps,
  .pdp-docs,
  .pdp-spec-grid {
    grid-template-columns: 1fr;
  }
  .pdp-tabs {
    top: 116px;
  }
  .pdp-tab {
    padding: 14px 16px;
    font-size: 10px;
  }
  .pdp-vartable-toolbar {
    padding: 12px 14px;
    gap: 8px;
  }
  .pdp-vartable-toolbar .right {
    flex-basis: 100%;
    margin-left: 0;
  }
  .pdp-vartable-wrap::after {
    content: "Przewiń tabelę →";
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-ink) 82%, transparent);
    color: var(--c-surface);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .prose {
    overflow-x: auto;
  }
  .compare {
    min-width: 620px;
  }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .product-img {
    margin-bottom: 0;
  }
  .product-code,
  .product-name,
  .product-brand,
  .product-foot {
    grid-column: 2;
  }
  .product-name {
    min-height: 0;
    margin-top: 4px;
  }
  .product-brand {
    margin-bottom: 8px;
  }
  .product-foot {
    padding-top: 10px;
  }
}

@media (max-width: 360px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .newsletter {
    display: grid;
    gap: 6px;
    background: transparent;
    padding: 0;
  }
  .newsletter input,
  .newsletter button {
    width: 100%;
    height: 42px;
    border-radius: var(--r-md);
  }
  .newsletter input {
    background: rgba(255,255,255,.06);
  }
}


/* ============================================================
   Catalog-only mode — hide commerce affordances
   ============================================================ */
[data-mode="catalog"] .cart-btn,
[data-mode="catalog"] .header-actions .icon-btn[title="Porównaj"],
[data-mode="catalog"] .product-card .add-btn,
[data-mode="catalog"] .product-card .product-foot .price-old,
[data-mode="catalog"] .product-card .price-now,
[data-mode="catalog"] .product-card .price-unit,
[data-mode="catalog"] .product-tags .tag.promo,
[data-mode="catalog"] .hero-product-spec,
[data-mode="catalog"] .megadrop-promo,
[data-mode="catalog"] .nav-item.has-promo::after { display: none !important; }

/* Replace product card foot — show only "Karta produktu" link */
[data-mode="catalog"] .product-card .product-foot {
  border-top: 1px solid var(--c-line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
}
[data-mode="catalog"] .product-card .product-foot .price {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
}
[data-mode="catalog"] .product-card .price::after {
  content: "Karta produktu →";
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-accent);
  font-weight: 600;
  text-transform: uppercase;
}

/* Header in catalog mode — replace cart with "Doradca" */
[data-mode="catalog"] .catalog-cta {
  display: inline-flex !important;
}
.catalog-cta { display: none; }
.catalog-cta {
  align-items: center;
  gap: 10px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: 0;
  border-radius: 999px;
  height: 46px;
  padding: 0 22px;
  font-weight: 600;
  font-size: 13px;
  margin-left: 6px;
  transition: all .15s;
  cursor: pointer;
  font-family: inherit;
}
.catalog-cta:hover { background: var(--c-accent-2); }
.catalog-cta .cta-ico { width: 18px; height: 18px; flex: none; }

/* Hide topbar "free shipping" / sales-y text - keep advisor */
[data-mode="catalog"] .topbar-strip > span:nth-child(3) { display: none; }

/* Hide entire B2B banner CTA pricing wording — already softened, leave it */

/* Hide cart drawer when in catalog mode */
[data-mode="catalog"] .cart-drawer,
[data-mode="catalog"] .cart-overlay { display: none !important; }

/* Hero v2 stats — replace catalog cta label */
/* (handled in React) */

/* PDP catalog mode — hide buybox */
[data-mode="catalog"] .pdp-buybox .pdp-price-row,
[data-mode="catalog"] .pdp-buybox .pdp-qty-row,
[data-mode="catalog"] .pdp-buybox .pdp-savings,
/* W trybie katalog chowamy tylko komórki cena/koszyk (gdyby istniały).
   NIE chowamy kolumn pozycyjnie (nth-last-child) — tabele wariantów/nośności/
   temperatur nie mają kolumn cena/koszyk, a pozycyjna reguła ucinała im realne dane. */
[data-mode="catalog"] .pdp-vartable .price,
[data-mode="catalog"] .pdp-vartable .add-row { display: none !important; }

[data-mode="catalog"] .pdp-buybox::before {
  background: var(--c-ink);
}
[data-mode="catalog"] .pdp-buybox {
  background: var(--c-surface-2);
}
[data-mode="catalog"] .pdp-buybox .pdp-secondary-row {
  grid-template-columns: 1fr;
  margin-top: 8px;
}

/* ─── PDP catalog pages gallery ─── */
.pdp-catalog-pages-label {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.pdp-catalog-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.pdp-catalog-page-thumb {
  display: block;
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
  text-decoration: none;
}
.pdp-catalog-page-thumb:hover {
  border-color: var(--c-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.pdp-catalog-page-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.pdp-catalog-page-num {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--c-muted);
  padding: 4px 0 6px;
  font-family: var(--f-mono);
}

/* ─── PDP catalog pages lightbox ─── */
.pdp-gallery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 18, 22, .92);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
}
.pdp-gallery-overlay.open {
  display: flex;
}
.pdp-gallery-stage {
  margin: 0;
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.pdp-gallery-stage img {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.pdp-gallery-caption {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
}
.pdp-gallery-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pdp-gallery-nav:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
}
.pdp-gallery-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  transition: color .15s;
}
.pdp-gallery-close:hover {
  color: #fff;
}
@media (max-width: 640px) {
  .pdp-gallery-overlay { padding: 12px; gap: 4px; }
  .pdp-gallery-nav { width: 40px; height: 40px; }
}

/* ============================================================
   STATYCZNE PODSTRONY (O firmie, Kontakt, Dostawa, Regulamin…)
   Wspólny język wizualny: page-hero + prose + karty info/download.
   ============================================================ */
.page-hero {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--c-line-2);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226,0,26,.05), transparent 55%),
    var(--c-surface);
}
.page-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--c-muted); margin-bottom: 18px;
}
.page-crumbs a:hover { color: var(--c-accent); }
.page-crumbs .current { color: var(--c-ink-2); font-weight: 500; }
.page-kicker {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px;
}
.page-h1 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0; color: var(--c-ink);
}
.page-h1 em { font-style: normal; color: var(--c-accent); }
.page-lead {
  margin: 16px 0 0; max-width: 760px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--c-muted);
}

.page-body { padding-top: 48px; padding-bottom: 72px; }
.page-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 48px;
  align-items: start;
}
.page-grid > .page-side { position: sticky; top: 24px; }
@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-grid > .page-side { position: static; }
}

/* — Prose: typografia treści — */
.prose { max-width: 760px; color: var(--c-ink-2); font-size: 15.5px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em;
  font-size: 24px; line-height: 1.2; color: var(--c-ink);
  margin: 40px 0 14px; scroll-margin-top: 24px;
}
.prose h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: 18px; color: var(--c-ink); margin: 28px 0 10px;
}
.prose p { margin: 0 0 16px; }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-accent-2); }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prose ol { counter-reset: prose; }
.prose ul li, .prose ol li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--c-accent);
  transform: rotate(45deg);
}
.prose ol li::before {
  counter-increment: prose; content: counter(prose);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--c-surface-2); color: var(--c-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.prose hr { border: none; border-top: 1px solid var(--c-line-2); margin: 32px 0; }
.prose blockquote {
  margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--c-accent);
  background: var(--c-surface-2); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-ink-2); font-style: italic;
}

/* — Karta boczna / info — */
.info-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.info-card + .info-card { margin-top: 20px; }
.info-card h4 {
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  margin: 0 0 14px; color: var(--c-ink);
}
.info-card.accent {
  background: var(--c-ink); color: #fff; border-color: var(--c-ink);
}
.info-card.accent h4 { color: #fff; }
.info-card.accent .ic-row { color: rgba(255,255,255,.85); }
.info-card.accent .ic-row strong { color: #fff; }
.ic-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; font-size: 14px; color: var(--c-ink-2);
  border-top: 1px solid var(--c-line-2);
}
.info-card.accent .ic-row { border-top-color: rgba(255,255,255,.12); }
.ic-row:first-of-type { border-top: none; }
.ic-row svg { flex: none; width: 18px; height: 18px; color: var(--c-accent); margin-top: 1px; }
.info-card.accent .ic-row svg { color: #fff; }
.ic-row .k { color: var(--c-muted); font-size: 12px; display: block; }
.ic-row strong { color: var(--c-ink); font-weight: 600; }

/* — Siatka kafelków (np. działy kontaktu, zalety) — */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.tile {
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg); padding: 24px; transition: border-color .15s, transform .15s;
}
a.tile:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.tile-ico {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--c-surface-2); display: grid; place-items: center;
  margin-bottom: 16px; color: var(--c-accent);
}
.tile-ico svg { width: 20px; height: 20px; }
.tile h3 { font-family: var(--f-display); font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.tile p { margin: 0; font-size: 13.5px; color: var(--c-muted); line-height: 1.5; }
.tile .tile-meta { margin-top: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--c-ink-2); }

/* — Lista plików do pobrania — */
.dl-list { display: grid; gap: 12px; }
.dl-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg); padding: 16px 20px; transition: border-color .15s, box-shadow .15s;
}
.dl-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.dl-badge {
  flex: none; width: 48px; height: 56px; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  display: grid; place-items: center; position: relative;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--c-accent);
}
.dl-badge span { letter-spacing: .04em; }
.dl-main { flex: 1; min-width: 0; }
.dl-main h4 { font-family: var(--f-display); font-size: 15px; font-weight: 600; margin: 0 0 3px; }
.dl-main p { margin: 0; font-size: 13px; color: var(--c-muted); }
.dl-meta { flex: none; font-family: var(--f-mono); font-size: 11px; color: var(--c-muted-2); text-align: right; }
.dl-arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-surface-2); display: grid; place-items: center; color: var(--c-ink);
  transition: background .15s, color .15s;
}
.dl-card:hover .dl-arrow { background: var(--c-accent); color: #fff; }
.dl-arrow svg { width: 16px; height: 16px; }

/* — Tabela porównawcza (fischer vs Hilti) — */
.compare {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden; font-size: 14px;
}
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--c-line-2); vertical-align: top; }
.compare thead th { background: var(--c-surface-2); font-family: var(--f-display); font-size: 13px; }
.compare thead th.col-fischer { color: var(--c-accent); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { font-weight: 600; color: var(--c-ink); width: 34%; }
.compare .yes { color: var(--c-ok); font-weight: 600; }
.compare .no { color: var(--c-muted-2); }

/* — FAQ / akordeon prosty (details) — */
.faq details {
  border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  background: var(--c-surface); margin-bottom: 12px; padding: 0 20px;
}
.faq details[open] { border-color: var(--c-line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 0;
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--c-accent); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 0 18px; color: var(--c-ink-2); font-size: 14.5px; line-height: 1.6; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* — Pasek CTA na dole strony — */
.cta-band {
  margin-top: 56px; background: var(--c-ink); color: #fff;
  border-radius: var(--r-xl); padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 100% 0%, rgba(226,0,26,.35), transparent 60%);
  pointer-events: none;
}
.cta-band .cta-text { position: relative; max-width: 560px; }
.cta-band h3 { font-family: var(--f-display); font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; }
.cta-band .cta-actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

/* — Statystyki w rzędzie (O firmie) — */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--c-line-2); border: 1px solid var(--c-line-2); border-radius: var(--r-lg); overflow: hidden; }
.stat-cell { background: var(--c-surface); padding: 26px 24px; }
.stat-cell .v { font-family: var(--f-display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--c-ink); }
.stat-cell .v sup { font-size: 16px; color: var(--c-accent); }
.stat-cell .k { font-size: 13px; color: var(--c-muted); margin-top: 4px; }

/* — Formularz kontaktowy — */
.contact-form { display: grid; gap: 16px; max-width: 640px; }
.contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .cf-row { grid-template-columns: 1fr; } }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; margin-top: 7px; padding: 11px 14px;
  font-family: inherit; font-size: 14px; font-weight: 400; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(226,0,26,.12);
}
.contact-form button { justify-self: start; margin-top: 4px; }
.contact-form .cf-error { display: block; font-size: 12px; color: #c0392b; margin-top: 4px; font-weight: 400; }
.contact-form .is-invalid { border-color: #c0392b !important; }

/* — Mapka / placeholder lokalizacji — */
.map-embed { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-lg); display: block; }
@media (max-width: 640px) {
  .cta-band { padding: 28px 24px; }
  .page-body { padding-top: 36px; padding-bottom: 56px; }
}

/* ===================== WYSZUKIWARKA ===================== */
.search-empty {
  max-width: 560px; margin: 8px auto 0; padding: 48px 24px;
  text-align: center; color: var(--c-muted);
}
.search-empty-ico {
  width: 46px; height: 46px; color: var(--c-line);
  margin: 0 auto 18px; display: block;
}
.search-empty h3 {
  margin: 0 0 10px; font-size: 20px; color: var(--c-ink); font-weight: 600;
}
.search-empty p { margin: 0 auto; max-width: 460px; line-height: 1.6; font-size: 14px; }
.search-empty code {
  font-family: var(--f-mono); font-size: 12.5px; background: var(--c-surface-2, var(--c-surface));
  border: 1px solid var(--c-line); border-radius: var(--r-sm, 6px); padding: 1px 6px; color: var(--c-ink);
}

/* — Układ listingu z filtrami po lewej — */
.listing {
  display: grid; grid-template-columns: 248px 1fr; gap: 30px; align-items: start;
}
.listing-main { min-width: 0; }

.filters {
  position: sticky; top: 88px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg, 12px); padding: 6px 18px 18px;
}
.filters-top {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0 10px; border-bottom: 1px solid var(--c-line);
}
.filters-title {
  font-family: var(--f-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink); font-weight: 600;
}
.filters-clear { font-size: 12px; color: var(--c-accent); text-decoration: none; }
.filters-clear:hover { text-decoration: underline; }

.filter-group { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-head {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); font-weight: 600;
}
.filter-opt {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  font-size: 13.5px; color: var(--c-ink); cursor: pointer;
}
.filter-opt input { width: 15px; height: 15px; accent-color: var(--c-accent); cursor: pointer; flex: none; }
.filter-label { flex: 1; line-height: 1.3; }
.filter-count {
  font-family: var(--f-mono); font-size: 11px; color: var(--c-muted);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 999px; padding: 1px 7px;
}
.filter-opt:hover .filter-label { color: var(--c-accent); }

.category-seo-content {
  max-width: 880px;
  margin-top: 48px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 1.75;
}
.category-seo-content h2,
.category-seo-content h3 {
  margin: 28px 0 12px;
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.2;
}
.category-seo-content h2 { font-size: 28px; }
.category-seo-content h3 { font-size: 20px; }
.category-seo-content p { margin: 0 0 14px; }
.category-seo-content ul,
.category-seo-content ol {
  margin: 0 0 16px 20px;
  padding: 0;
}
.category-seo-content a { color: var(--c-accent); }

.category-faq {
  max-width: 880px;
  margin-top: 36px;
}
.category-faq h2 {
  margin: 0 0 16px;
  color: var(--c-ink);
  font-size: 28px;
  font-weight: 600;
}
.category-faq-list {
  border-top: 1px solid var(--c-line);
}
.category-faq details {
  border-bottom: 1px solid var(--c-line);
  padding: 16px 0;
}
.category-faq summary {
  cursor: pointer;
  color: var(--c-ink);
  font-weight: 600;
  list-style-position: outside;
}
.category-faq details div {
  max-width: 760px;
  margin-top: 10px;
  color: var(--c-ink-2);
  font-size: 14.5px;
  line-height: 1.65;
}

@media (max-width: 860px) {
  .listing { grid-template-columns: 1fr; gap: 18px; }
  .filters { position: static; }
}

/* ── Wyszukiwarka aprobat i atestów (/aprobaty) ───────────────────── */
.appr-search {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm);
  margin-bottom: 44px;
}
.appr-search-head h2 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em;
  font-size: 22px; line-height: 1.2; color: var(--c-ink); margin: 0 0 8px;
}
.appr-search-head p { margin: 0 0 20px; color: var(--c-muted); font-size: 14.5px; line-height: 1.55; max-width: 760px; }
.appr-search-head code {
  font-family: var(--f-mono); font-size: 12.5px; background: var(--c-surface-2);
  padding: 1px 6px; border-radius: 5px; color: var(--c-ink);
}

.appr-form { display: grid; grid-template-columns: minmax(0,1fr) 280px auto; gap: 14px; align-items: end; }
.appr-field { display: flex; flex-direction: column; gap: 6px; }
.appr-field label { font-size: 12px; font-weight: 600; color: var(--c-ink-2); letter-spacing: .01em; }
.appr-field input, .appr-field select {
  height: 46px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg, #fff); color: var(--c-ink); font-size: 15px; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.appr-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.appr-field input:focus, .appr-field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.appr-submit { height: 46px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.appr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.appr-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface-2);
  color: var(--c-ink-2); font-size: 13px; text-decoration: none; transition: .15s;
}
.appr-chip:hover { border-color: var(--c-accent); color: var(--c-ink); }
.appr-chip.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.appr-chip-cnt { font-family: var(--f-mono); font-size: 11px; opacity: .7; }
.appr-chip.is-active .appr-chip-cnt { opacity: .85; }

.appr-count { margin: 18px 0 14px; color: var(--c-muted); font-size: 13.5px; }

.appr-results { display: flex; flex-direction: column; gap: 22px; }
.appr-group { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.appr-group-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.appr-group-name { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; color: var(--c-ink); text-decoration: none; }
a.appr-group-name:hover { color: var(--c-accent); }
.appr-group-code { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }

.appr-docs { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .appr-docs { grid-template-columns: 1fr; } }
.appr-doc {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  text-decoration: none; color: inherit; border-top: 1px solid var(--c-line);
  transition: background .15s;
}
.appr-docs > .appr-doc:nth-child(-n+2) { border-top: none; }
@media (max-width: 720px) { .appr-docs > .appr-doc:nth-child(2) { border-top: 1px solid var(--c-line); } }
.appr-doc:hover { background: var(--c-surface-2); }
.appr-doc-ico {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--c-accent); color: #fff; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.appr-doc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.appr-doc-title { font-size: 14px; font-weight: 600; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-doc-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--c-muted); }
.appr-doc-type { color: var(--c-accent-2); font-weight: 600; }
.appr-doc-arrow { flex: none; color: var(--c-muted); }
.appr-doc:hover .appr-doc-arrow { color: var(--c-accent); }

.appr-empty {
  text-align: center; padding: 40px 20px; color: var(--c-muted);
  border: 1px dashed var(--c-line); border-radius: var(--r-lg); margin-top: 22px;
}
.appr-empty h3 { font-family: var(--f-display); font-size: 17px; color: var(--c-ink); margin: 12px 0 8px; }
.appr-empty p { margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.55; }
.appr-empty a { color: var(--c-accent); }

@media (max-width: 720px) {
  .appr-form { grid-template-columns: 1fr; }
  .appr-search { padding: 22px 18px; }
}