/* Tokeny (:root), baza (body, .wide-width) i .btn-class-1 żyją w
     tokens.css / design-system.css (zawsze ładowane przed tym plikiem). */

  /* NAVBAR — usunięta 2026-09-30 zduplikowana, przestarzała kopia (nie
     zawierała poprawki mobilnego tap-to-expand z 2026-09-29 — .nav-open/
     .nav-dropdown-open — więc jej nieopatrzony żadnym media query hover/
     focus-within .nav-dropdown{display:block} wygrywał w kaskadzie z
     poprawną wersją w design-system.css, bo ten plik ładuje się PO nim na
     każdej stronie. Efekt: po drugim tapnięciu "Katalog Produktów" na
     mobile dropdown nie chciał się schować, bo kliknięty link zachowywał
     realny :focus, co utrzymywało :focus-within na <li>. Ten plik i tak
     zawsze deklaruje 'toolsmart-design-system' jako zależność (patrz
     functions.php), więc design-system.css jest gwarantowany na każdej
     stronie, która wczytuje ten plik — nie ma potrzeby duplikować tu
     nawigacji wcale). Style nawigacji: patrz design-system.css. */

  .btn-class-2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    color: var(--white);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-soft);
    padding: 1rem 2.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.25s ease;
    box-shadow: none;
  }

  .btn-class-2:hover {
    opacity: 1;
  }

  .btn-class-2:focus-visible {
    outline: 2px solid var(--neon-green);
    outline-offset: 3px;
  }

  .btn-class-2.active {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
    box-shadow: var(--shadow-soft);
    opacity: 1;
  }

  /* ============================================================
     STRONA KATEGORII — "Ładowarki Teleskopowe". Ten sam stały panel
     boczny co na Katalogu Produktów (tu z podświetloną bieżącą
     kategorią) + siatka kart z konkretnymi modelami.
     ============================================================ */
  .catalog-breadcrumb {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
  }

  .catalog-breadcrumb a {
    color: var(--sea-blue);
    text-decoration: none;
  }

  .catalog-breadcrumb a:hover { text-decoration: underline; }

  .catalog-breadcrumb .sep {
    margin: 0 0.4rem;
    color: var(--ink-subtle);
  }

  .catalog-breadcrumb .current {
    color: var(--ink-muted);
  }

  .catalog-hero {
    padding: var(--section-spacing) 0 2.5rem;
    text-align: left;
  }

  .catalog-hero h1 {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  .catalog-hero p {
    margin: 1rem 0 0;
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-muted);
  }

  /* ---- Persistent category sidebar: present on the catalog hub,
     and (once built) on every category/product page too, so you can
     jump sideways between categories without backing out to the hub. ---- */
  .catalog-body {
    /* padding-top/bottom only — NOT the shorthand `padding: 0 0 Npx`,
       which also zeroes left/right and silently killed the side padding
       .wide-width sets on this same element (equal specificity, later in
       cascade order wins: .catalog-left/#catalogResults/.catalog-grid and
       everything in them, incl. .catalog-results-bar's count+sort-button,
       sat flush against the viewport edge on every width, not just mobile
       — just most visible there since the results bar has no padding of
       its own to fall back on, unlike .catalog-card). */
    padding-top: 0;
    padding-bottom: var(--section-spacing);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    /* start (not stretch): the results column must be free to size to
       its OWN content — stretch would lock it to the sidebar's height,
       which stays roughly constant regardless of how many cards are
       filtered in, and on a large catalog (many models, tall filter
       sidebar) that leaves a big dead gap under a short filtered
       result set. The anti-jump handling now lives entirely in
       lockResultsHeight() + the #catalogResults transition below. */
    align-items: start;
  }

  .catalog-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6.5rem;
  }

  .catalog-sidenav {
    background: var(--navy);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
  }

  .catalog-sidenav h2 {
    margin: 0 0 0.85rem;
    font-size: var(--fs-label);
    font-weight: 900;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.5;
    padding: 0 0.4rem;
  }

  .catalog-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
  }

  .catalog-sidenav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--white);
    opacity: 0.7;
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  }

  .catalog-sidenav-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
  }

  .catalog-sidenav-link.active {
    opacity: 1;
    background: var(--neon-green);
    color: var(--navy);
    font-weight: 900;
  }

  /* ---- Parameter filters: specific to THIS category (udźwig, wysięg,
     wysokość podnoszenia don't exist/mean the same thing on other
     category pages, so this panel is not shown on the catalog hub). ---- */
  .catalog-filters {
    background: var(--sea-blue);
    border-radius: var(--radius-soft);
    padding: 1.25rem;
  }

  .catalog-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .catalog-filters-head h2 {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: 900;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.75; /* było niżej: < 4,5:1 na sea-blue */
  }

  .catalog-filters-reset {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--neon-green);
    text-decoration: underline;
    padding: 0;
  }

  .catalog-filter-group {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .catalog-filter-group:first-of-type {
    border-top: none;
  }

  /* ---- Info tooltip next to a filter's title (currently only used
     on "Wysokość robocza") — a plain "?" trigger sitting OUTSIDE the
     accordion-toggle <button>, so tapping it doesn't also expand/
     collapse the filter group underneath it. Shows on hover *and*
     focus, so it's reachable by keyboard and by tap on touch
     devices (a tap focuses the button, no extra JS needed). ---- */
  .catalog-filter-header-row {
    position: relative;
  }

  /* The tooltip trigger has to live OUTSIDE .catalog-filter-header (a
     <button> that toggles this whole group open/closed) � nesting an
     interactive element inside it would be invalid HTML and would
     also toggle the accordion every time someone taps "?". So it's a
     sibling instead, absolutely positioned to sit right after the
     "Wysoko�� robocza" label text. The offset is tuned to that
     specific label's width � it's a one-off placement, not a generic
     pattern for every filter title. */
  .catalog-filter-tooltip {
    position: absolute;
    top: 0.86rem;
    left: 8.2rem;
  }

  .catalog-filter-tooltip-trigger {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--neon-green);
    background: none;
    color: var(--neon-green);
    font-family: 'Lato', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .catalog-filter-tooltip-trigger:hover,
  .catalog-filter-tooltip-trigger:focus-visible {
    background: var(--neon-green);
    color: var(--navy);
  }

  .catalog-filter-tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    right: -0.5rem;
    width: 220px;
    background: var(--white);
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 30;
    pointer-events: none;
  }

  .catalog-filter-tooltip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 1.3rem;
    border: 6px solid transparent;
    border-top-color: var(--white);
  }

  .catalog-filter-tooltip-trigger:hover + .catalog-filter-tooltip-bubble,
  .catalog-filter-tooltip-trigger:focus-visible + .catalog-filter-tooltip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ---- Collapsible: each parameter starts closed, showing only its
     title + current range summary; click expands the from/to fields
     + slider. Same grid-rows technique as the FAQ accordion. ---- */
  .catalog-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0.75rem 0.2rem;
    font-family: 'Lato', sans-serif;
  }

  .catalog-filter-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .catalog-filter-group-title {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--white);
  }

  .catalog-filter-summary {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--white);
    opacity: 0.7;
  }

  .catalog-filter-chevron {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.35rem;
  }

  /* "Rozwiń" / "Zwiń" label next to the chevron — a plain CSS toggle
     off the same .catalog-filter-group.open class the JS already
     applies, no extra script needed.

     Oba warianty siedzą w TEJ SAMEJ komórce grida (kolumna 1) i chowają
     się przez visibility, nie display: "Zwiń" jest krótsze niż "Rozwiń",
     więc gdyby nieaktywny wariant znikał przez display:none, layout
     realnie tracił jego szerokość — dostępne miejsce na tytuł parametru z
     lewej się zmieniało i tekst potrafił przeskoczyć z 2 linii na 1 przy
     zwijaniu/rozwijaniu. Z visibility oba warianty nadal zajmują miejsce,
     więc szerokość kolumny jest zawsze równa szerszemu ("Rozwiń") i się
     nie zmienia. */
  .catalog-filter-toggle-text {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--white);
    opacity: 0.75; /* było niżej: < 4,5:1 na sea-blue */
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    visibility: hidden;
  }

  .catalog-filter-toggle-text--closed {
    visibility: visible;
  }

  .catalog-filter-group.open .catalog-filter-toggle-text--closed {
    visibility: hidden;
  }

  .catalog-filter-group.open .catalog-filter-toggle-text--open {
    visibility: visible;
  }

  .catalog-filter-chevron svg {
    grid-column: 2;
    grid-row: 1;
    width: 14px;
    height: 14px;
    stroke: var(--white);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
  }

  .catalog-filter-group.open .catalog-filter-chevron svg {
    transform: rotate(180deg);
  }

  .catalog-filter-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .catalog-filter-group.open .catalog-filter-body-wrap {
    grid-template-rows: 1fr;
  }

  .catalog-filter-body-inner {
    overflow: hidden;
  }

  .catalog-filter-inputs-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.2rem 0.9rem;
  }

  /* ---- Checkbox-style filter group (e.g. "Typ ładowarki") — same
     collapsible header as the range groups, but a plain checklist
     body instead of od-do fields + slider. ---- */
  .catalog-filter-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0 0.2rem 0.9rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .catalog-filter-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.45rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--white);
    transition: background-color 0.2s ease;
  }

  .catalog-filter-checkbox-option:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  .catalog-filter-checkbox-option input {
    accent-color: var(--neon-green);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .catalog-filter-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }

  .catalog-filter-input-wrap .catalog-filter-input-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--white);
    opacity: 0.75; /* było niżej: < 4,5:1 na sea-blue */
    flex-shrink: 0;
  }

  .catalog-filter-input {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--white);
    font-family: 'Lato', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
  }

  .catalog-filter-input:focus {
    outline: 2px solid var(--sea-blue);
    outline-offset: 1px;
    border-color: transparent;
  }

  /* Hide the number input's spinner arrows — cleaner in a tight field. */
  .catalog-filter-input::-webkit-outer-spin-button,
  .catalog-filter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .catalog-filter-unit {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--white);
    opacity: 0.75; /* było niżej: < 4,5:1 na sea-blue */
    flex-shrink: 0;
  }

  .catalog-filter-inputs-sep {
    font-size: 0.82rem;
    flex-shrink: 0;
    color: var(--white);
    opacity: 0.4;
  }

  /* ---- Dual-handle range slider: two native <input type="range">
     stacked on the same invisible track, each only clickable on its
     own thumb (pointer-events split via ::-webkit-slider-thumb), plus
     a highlighted fill bar drawn between them. ---- */
  .catalog-range-slider {
    position: relative;
    height: 22px;
    margin: 0 0.2rem 0.9rem;
  }

  .catalog-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transform: translateY(-50%);
  }

  .catalog-range-track-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    background: var(--neon-green);
    border-radius: 2px;
    transform: translateY(-50%);
  }

  .catalog-range-slider input[type="range"] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: 0;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .catalog-range-slider input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
  }

  .catalog-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    /* Webkit doesn't auto-center the thumb on the track — without this
       it sits flush with the top of the input's own (taller) box
       instead of centered on the 4px track. */
    margin-top: -6px;
    border-radius: 50%;
    background: var(--neon-green);
    border: none;
    box-shadow: 0 1px 5px rgba(9, 18, 43, 0.4);
    cursor: pointer;
  }

  /* ---- Spec badges on each card: the "key working parameters" for
     this category, at a glance, without opening the product page. ---- */
  .catalog-card-specs {
    display: flex;
    /* Zawsze jedna pigułka parametru na wiersz — także gdy dwie by się
       zmieściły obok siebie — żeby wszystkie karty w siatce wyglądały tak samo. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.1rem 0 0.25rem;
  }

  .catalog-card-spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gray);
    color: var(--navy);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* ---- Podświetlenie parametru, wg którego aktualnie sortuje/filtruje się
     siatka — czytelny sygnał "po czym teraz patrzysz na te maszyny",
     sterowane z category-filters.js przez data-sort-key na każdym badge'u.
     Bez obwódek, bez neon-green — --sort (parametr aktywnego sortowania)
     dostaje tło sea-blue, --filter (inny parametr aktualnie zawężany
     suwakiem, ale nie będący kluczem sortowania) dostaje tło #008FD1
     (--light-blue).
     Ikona/tekst w obu wariantach białe — nadpisania `svg` MUSZĄ siedzieć PO
     bazowej regule `.catalog-card-spec-badge svg` niżej w tym pliku: przy
     równej specyficzności selektorów o kolejności w kaskadzie decyduje
     kolejność w źródle, nie miejsce w HTML. ---- */
  .catalog-card-spec-badge--sort {
    background: var(--sea-blue);
    color: var(--white);
  }

  .catalog-card-spec-badge--filter {
    background: var(--light-blue);
    color: var(--white);
  }

  /* ---- Napęd — jedyny parametr, który różni się między kartami w
     obrębie tej samej kategorii (elektryczny/spalinowy), więc siedzi
     nad nazwą maszyny jako pierwsza rzecz, którą widać, a nie w rzędzie
     z pozostałymi specami. ---- */
  .catalog-card-drive-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--navy);
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
  }

  .catalog-card-drive-badge svg {
    width: 12px;
    height: 12px;
    stroke: var(--neon-green);
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* Kanister � dostarczony gotowy plik (design/icons/canister.svg), to
     wype�niony kszta�t, nie nasz zwyk�y cienki line-icon, wi�c dostaje
     odwrotne traktowanie (fill zamiast stroke). */

  .catalog-card-spec-badge svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .catalog-card-spec-badge--sort svg,
  .catalog-card-spec-badge--filter svg {
    stroke: var(--white);
  }

  .catalog-empty {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--ink-muted);
    font-size: 0.95rem;
  }

  .catalog-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  /* Anti-jump lock on the results column (see lockResultsHeight() in
     the script below): its min-height snaps — not animates — to
     whatever height the *current* filtered set actually needs,
     instead of staying frozen at the full, unfiltered grid height
     forever (which left a huge dead gap on a large, heavily-filtered
     catalog). Deliberately NOT a CSS transition here: range sliders
     fire dozens of "input" events per second while dragging, each
     retargeting an in-flight animation — combined with the sticky
     sidebar recalculating its position as the page height kept
     shifting under it, that produced a violent flicker/jump loop
     during drag. An instant snap has no such feedback loop. */

  .catalog-results-count {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-muted);
  }

  .catalog-results-count strong {
    color: var(--navy);
  }

  /* ---- Sortowanie: nie jest to filtr (nic nie ukrywa), więc żyje
     poza sidebarem filtrów — przyklejone do prawej krawędzi paska
     wyników, po przeciwnej stronie licznika. Wyklucza celowo napęd
     (elektryczny/spalinowy) — to kategoria, nie skala, więc nie ma
     sensownego kierunku "rosnąco/malejąco". ---- */
  .catalog-sort {
    position: relative;
    flex-shrink: 0;
  }

  .catalog-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.9rem;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    white-space: nowrap;
  }

  .catalog-sort-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-muted);
  }

  .catalog-sort-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
  }

  .catalog-sort-toggle svg {
    width: 14px;
    height: 14px;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }

  .catalog-sort.open .catalog-sort-toggle svg {
    transform: rotate(180deg);
  }

  .catalog-sort-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    min-width: 240px;
    background: var(--white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 0.4rem;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .catalog-sort.open .catalog-sort-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ---- Dymek nad "Sortuj:" — informuje o automatycznej zmianie
     sortowania (po ruszeniu suwaka jednego parametru) albo o
     niejednoznaczności (kilka parametrów filtrowanych naraz). Chowa się
     sam po timeoucie (auto) albo gdy warunek przestaje być spełniony
     (multi) — sterowane z category-filters.js przez klasę .visible. ---- */
  .catalog-sort-hint {
    position: absolute;
    bottom: calc(100% + 0.65rem);
    right: 0;
    z-index: 21;
    max-width: 260px;
    background: var(--navy);
    color: var(--white);
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 400;
    border-radius: var(--radius-soft);
    padding: 0.65rem 0.9rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .catalog-sort-hint::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 1.1rem;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: var(--navy);
    border-bottom: 0;
  }

  .catalog-sort-hint.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .catalog-sort-menu li {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
  }

  .catalog-sort-menu li:hover {
    background: var(--gray);
  }

  .catalog-sort-menu li.active {
    background: var(--navy);
    color: var(--white);
  }

  @media (max-width: 560px) {
    .catalog-results-bar {
      flex-wrap: wrap;
    }
    .catalog-sort-menu {
      right: auto;
      left: 0;
    }
  }

  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .catalog-card {
    background: var(--white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease;
  }

  /* Same stronger hover shadow as the "Wszystkie kategorie" tiles
     (.catalog-tile:hover), so product cards and category tiles feel
     consistent; image itself zooms to 110%, clipped by the card's own
     overflow:hidden. */
  .catalog-card:hover,
  .catalog-card:focus-visible {
    box-shadow: 0 20px 40px rgba(21, 42, 96, 0.28);
  }

  .catalog-card:hover .catalog-card-img-photo,
  .catalog-card:focus-visible .catalog-card-img-photo {
    transform: scale(1.1);
  }

  /* Prawdziwe zdjęcia produktowe to wycięte PNG-i na przezroczystym tle
     (nie pełne kadry sceny jak na kategorii ładowarek) — stąd "contain"
     zamiast "cover" (żeby maszyna nigdy nie ucinała się na krawędzi)
     plus jasnoszare tło karty, żeby wycięcie nie wisiało na bieli. */
  .catalog-card-img {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: var(--white);
    overflow: hidden;
  }

  /* Zdjęcie żyje w osobnym elemencie (nie jako inline background-image
     bezpośrednio na .catalog-card-img), żeby hover-zoom skalował
     wyłącznie fotografię -- wcześniejsze podejście przez ::before +
     background-image:inherit zostawiało drugą, nieskalowaną kopię
     zdjęcia widoczną pod powiększoną (duch pod spodem). Szare tło i
     badge (dziecko .catalog-card-img) nigdy się nie ruszają. */
  .catalog-card-img-photo {
    position: absolute;
    inset: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
  }

  .catalog-card-body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .catalog-card-name {
    margin: 0;
    font-size: var(--fs-card);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.3;
  }

  .catalog-card-btn {
    margin-top: auto;
    padding-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sea-blue);
    text-decoration: none;
  }

  .catalog-card-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
  }

  .catalog-card-btn:hover svg { transform: translateX(3px); }

  /* Do 1100px karty w 3 kolumnach obok panelu bocznego są za wąskie na
     najdłuższe parametry ("Szerokość transportowa: 0,81 m" się ucinało). */
  @media (max-width: 1100px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* Below this, the sidebar can't sit comfortably beside the grid —
     it collapses into a horizontally scrollable pill row above it. ---- */
  @media (max-width: 900px) {
    /* .catalog-hero ma text-align:left jako baza (pasuje do hero z jedną
       szeroką kolumną tekstu na desktopie) — na mobile/tablecie breadcrumb,
       H1 i opisowy <p> pod nim wyglądają przyczepione do lewej. .catalog-hero
       p ma max-width:640px, więc samo text-align:center by nie wystarczyło
       (ten sam gotcha co .services-hero-lead) — stąd dodatkowy margin:auto. */
    .catalog-hero h1,
    .catalog-breadcrumb,
    .catalog-hero p {
      text-align: center;
    }
    .catalog-hero p {
      margin-left: auto;
      margin-right: auto;
    }

    .catalog-body { grid-template-columns: 1fr; }

    .catalog-left {
      position: static;
      /* Without this, the grid item's automatic min-width defaults to
         its content's max-content size — and since .catalog-sidenav-list
         becomes a nowrap flex row below, that max-content size is the
         full *unwrapped* width of all category pills, which then forces
         the whole single-column grid track (and everything sharing it,
         including the card grid) wide enough to match, breaking layout
         and adding a horizontal scrollbar to the entire page. */
      min-width: 0;
    }

    .catalog-sidenav {
      padding: 0.5rem;
      overflow-x: auto;
    }

    .catalog-sidenav h2 { display: none; }

    .catalog-sidenav-list {
      flex-direction: row;
      gap: 0.5rem;
    }

    .catalog-sidenav-link {
      flex-shrink: 0;
      white-space: nowrap;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.08);
    }
  }

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

  /* ============================================================
     SEO CONTENT — teksty pod gridem produktowym, budujące
     treść strony kategorii pod kątem SEO.
     ============================================================ */
  .cat-seo {
    padding: var(--section-spacing) 0;
    background: var(--white);
  }

  .cat-seo-block + .cat-seo-block {
    margin-top: 5rem;
  }

  .cat-seo-intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
  }

  .cat-seo-intro-text h2,
  .cat-seo-types h2,
  .cat-seo-benefits-text h2 {
    margin: 0 0 1.25rem;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: 1.2;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  .cat-seo-intro-text p {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--navy);
    opacity: 0.8;
  }

  .cat-seo-intro-text p:last-child { margin-bottom: 0; }

  .cat-seo-intro-img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-soft);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-soft);
  }

  .cat-seo-types h2 { text-align: center; }

  .cat-seo-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-top: 2rem;
  }

  .cat-seo-type-card {
    background: var(--sea-blue);
    border-radius: var(--radius-soft);
    padding: 2rem 2.25rem;
  }

  .cat-seo-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .cat-seo-type-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .cat-seo-type-card h3 {
    margin: 0 0 0.6rem;
    font-size: var(--fs-h3);
    font-weight: 900;
    color: var(--neon-green);
  }

  .cat-seo-type-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--white);
    opacity: 0.9;
  }

  .cat-seo-benefits {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: center;
  }

  .cat-seo-benefits-img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-soft);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-soft);
  }

  .cat-seo-benefits-text > p {
    margin: 0 0 1.25rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--navy);
    opacity: 0.8;
  }

  .cat-seo-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
  }

  .cat-seo-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--navy);
  }

  .cat-seo-benefits-list li svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cat-seo-benefits-list strong { color: var(--navy); }

  @media (max-width: 900px) {
    .cat-seo-intro,
    .cat-seo-benefits {
      grid-template-columns: 1fr;
    }

    .cat-seo-intro-img { order: -1; }

    .cat-seo-types-grid { grid-template-columns: 1fr; }

    /* .cat-seo-types h2 jest już wyśrodkowane bezwarunkowo (ten sekcja od
       zawsze ma tak zrobiony nagłówek) — intro/benefits miały
       text-align:left dobrany pod dwukolumnowy układ obok zdjęcia, co na
       jednej, wyśrodkowanej kolumnie mobile/tablet wygląda przyczepione do
       lewej. Żadne z tych <p> nie ma max-width, więc samo text-align
       wystarczy, bez dodatkowego margin:auto. */
    .cat-seo-intro-text h2,
    .cat-seo-intro-text p,
    .cat-seo-benefits-text h2,
    .cat-seo-benefits-text > p {
      text-align: center;
    }
  }

  /* ============================================================
     FAQ — skopiowane 1:1 ze Strona główna.html (te same klasy,
     ten sam mechanizm renderowania z FAQ_ITEMS), pytania i
     odpowiedzi wymoderowane pod kategorię ładowarek teleskopowych.
     ============================================================ */
  .faq {
    background: var(--gray);
    padding: var(--section-spacing) 0;
  }

  .faq-head {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
  }

  .faq-head h2 {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: 1.25;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  .faq-head--desktop {
    display: none;
  }

  .faq-body {
    max-width: 1080px;
    margin: 0 auto;
  }

  .faq-tabs {
    display: none;
    gap: 2rem;
    align-items: stretch;
  }

  @media (min-width: 801px) {
    .faq-head { display: none; }
    .faq-head--desktop {
      display: block;
      max-width: none;
      margin: 0 0 1.75rem;
      text-align: left;
    }
    .faq-tabs { display: flex; }
    .faq-accordion { display: none; }
  }

  .faq-tab-list {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 0.5rem;
    max-height: 560px;
    overflow-y: auto;
  }

  .faq-tab-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .faq-tab-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-muted);
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .faq-tab-btn:hover {
    background: var(--gray);
    color: var(--navy);
  }

  .faq-tab-btn.active {
    opacity: 1;
    background: var(--gray);
    border-left-color: var(--light-blue);
    color: var(--sea-blue);
  }

  .faq-tab-panel {
    flex: 1;
    min-width: 0;
    background: var(--white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 2.25rem 2.5rem;
    min-height: 240px;
  }

  .faq-tab-panel-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .faq-tab-panel-content.is-switching {
    opacity: 0;
    transform: translateY(6px);
  }

  .faq-tab-panel-eyebrow {
    margin: 0 0 0.85rem;
    font-size: var(--fs-kicker);
    font-weight: 900;
    color: var(--sea-blue); /* był light-blue: 3,6:1 za mało dla małego tekstu */
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
  }

  .faq-tab-panel h3 {
    margin: 0 0 1.1rem;
    font-size: var(--fs-h3);
    font-weight: 900;
    line-height: 1.35;
    color: var(--navy);
  }

  .faq-tab-panel p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--navy);
    opacity: 0.8;
  }

  /* Odpowiedź z kilku akapitów (toolsmart_faq_answer_html) */
  .faq-tab-panel .faq-tab-panel-answer + .faq-tab-panel-answer { margin-top: 0.9rem; }

  .faq-accordion {
    border-top: 1px solid rgba(21, 42, 96, 0.15);
  }

  .faq-item {
    border-bottom: 1px solid rgba(21, 42, 96, 0.15);
  }

  .faq-question {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 1.6rem 0.25rem;
    font-family: 'Lato', sans-serif;
  }

  .faq-number {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--sea-blue); /* był light-blue: 3,6:1 za mało dla małego tekstu */
    min-width: 2.2rem;
  }

  .faq-question-text {
    flex: 1;
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 900;
    line-height: 1.4;
    color: var(--navy);
  }

  .faq-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .faq-toggle svg {
    width: 16px;
    height: 16px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
  }

  .faq-item.open .faq-toggle svg {
    transform: rotate(180deg);
  }

  .faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }

  .faq-item.open .faq-answer-wrap {
    grid-template-rows: 1fr;
  }

  .faq-answer-inner {
    overflow: hidden;
  }

  .faq-answer {
    margin: 0;
    padding: 0 0 1.75rem calc(2.2rem + 1.25rem);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink-muted);
    max-width: 560px;
  }

  .faq-answer:not(:last-child) { padding-bottom: 0.9rem; }

  @media (max-width: 560px) {
    .faq-number { display: none; }
    .faq-question { gap: 0.75rem; padding: 1.3rem 0.1rem; }
    .faq-question-text { font-size: var(--fs-h3); }
    .faq-answer { padding-left: 0; }
  }

  /* FOOTER — style stopki: patrz design-system.css (tu była uboższa kopia). */

/* Dodane dla realnego WordPressa: PHP renderuje WSZYSTKIE panele FAQ do DOM
   naraz (nie tylko aktywny, jak w makiecie JS), więc potrzebny jest prosty
   pokaż/ukryj zamiast pojedynczego dynamicznie podmienianego panelu. */
.faq-tab-panel-item { display: none; }
.faq-tab-panel-item.active { display: block; }

/* ============================================================
   KATALOG PRODUKTÓW — hub grid (kafle kategorii). Brakowało tego w
   pierwszym wyciągnięciu CSS (wzięte z kategoria-podnosniki-nozycowe.html,
   które nigdy nie renderuje siatki kafli, bo nie ma podkategorii) —
   dociągnięte osobno z design/katalog-1.html.
   ============================================================ */
.catalog-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.catalog-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-soft);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.catalog-tile:hover,
.catalog-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(21, 42, 96, 0.28);
}

.catalog-tile-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
}

.catalog-tile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(207, 255, 4, 0);
  transition: background-color 0.25s ease;
}

.catalog-tile:hover .catalog-tile-img::after {
  background: rgba(207, 255, 4, 0.2);
}

.catalog-tile-label {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 1.1rem 1rem;
  font-weight: 900;
  font-size: var(--fs-card);
  transition: color 0.25s ease;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.catalog-tile:hover .catalog-tile-label {
  color: var(--neon-green);
}

@media (max-width: 980px) {
  .catalog-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .catalog-hub-grid { grid-template-columns: 1fr; }
}