/* =========================================================
   ARBEITSWELT-SHOP.DE — arkusz główny
   Projekty graficzne (HTML/CSS) pod późniejsze wdrożenie w OpenCart 3.0
   ========================================================= */

/* ---------- Zmienne ---------- */
:root {
    /* Kolory brandu */
    --red:        #0b1a2b;   /* czerwony akcent — z logo klienta */
    --red-dark:   #081827;
    --blue:       #1c268b;   /* niebieski z logo (na jasnym tle) */
    --blue-bright:#3644c9;   /* jaśniejszy wariant — akcent na ciemnym tle */
    --navy:       #16233d;   /* granat z logo american parts */
    --black:      #0c0d10;   /* tło topbar / marki */
    --dark:       #14161b;   /* tło navbar */
    --dark-2:     #1c1f26;   /* karty / hover */
    --line:       #2a2e37;   /* delikatne linie na ciemnym */
    --white:      #ffffff;
    --gray:       #f3f4f6;
    --text:       #1c1f26;
    --muted:      #9aa0ac;   /* szary tekst na ciemnym */

    /* Typografia */
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: "Barlow Condensed", "Inter", Arial, sans-serif;

    /* Layout */
    --container: 1600px;
    --pad: 28px;
}

/* ---------- Reset / podstawy ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Kontener ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ---------- Ikony ---------- */
.ico {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.ico--sm { width: 14px; height: 14px; stroke-width: 2; }
.ico--lg { width: 30px; height: 30px; }

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.topbar {
    background: var(--black);
    color: #cfd3db;
    font-size: 12.5px;
    border-bottom: 2px solid var(--blue-bright);   /* akcent flagi — niebieska linia nad logo */
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
}
.topbar__list { display: flex; gap: 30px; }
.topbar__list li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__list .ico { width: 16px; height: 16px; color: var(--blue-bright); }

.topbar__lang {
    display: flex; align-items: center; gap: 7px;
    color: #cfd3db; font-size: 12.5px; font-weight: 600;
    letter-spacing: .5px;
}
.flag-de {
    width: 20px; height: 14px; border-radius: 2px; overflow: hidden;
    background: linear-gradient(#000 0 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6% 100%);
    display: inline-block;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header {
    background: var(--dark);
    color: var(--white);
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--line);
}
.header__inner {
    display: flex;
    align-items: center;
    /* 07.08 klient: wieksza wyszukiwarka i flagi kosztem menu — mniejszy odstep miedzy blokami */
    gap: 22px;
    height: 84px;
}

/* --- Logo lockup --- */
.brand { display: flex; align-items: center; gap: 16px; flex: none; }
.brand__logo { height: 72px; width: auto; display: block; }
.brand__ap { display: flex; align-items: center; gap: 10px; }
.brand__badge {
    font-family: var(--font-head);
    font-weight: 700; font-size: 26px; letter-spacing: 1px;
    color: var(--white);
    border: 2px solid var(--red);
    border-radius: 6px;
    padding: 1px 8px;
    line-height: 1;
    position: relative;
}
.brand__name {
    font-family: var(--font-head);
    display: flex; flex-direction: column;
    font-weight: 700; font-size: 19px; line-height: .95;
    letter-spacing: 1.5px; color: var(--white);
}
.brand__name span { color: var(--muted); font-weight: 600; }

/* --- Primary nav --- */
.nav { flex: none; margin-left: auto; }   /* menu dosunięte do prawej, przy ikonach */

/* --- Searchbox (Desktop) --- */
.header__search {
    /* 06.08 klient: po usunieciu pozycji START z menu zwolnione miejsce idzie na wyszukiwarke.
       flex-grow 1 = pasek zjada wolna przestrzen, max-width pilnuje, zeby na szerokich ekranach
       nie rozjechal sie przez pol naglowka.
       07.08 klient: jeszcze szerzej — miejsce bierzemy z menu (mniejszy odstep + mniejszy tekst
       w .nav__list nizej). Przy 1600 px pasek ma ~495 px zamiast 328 px. */
    flex: 1 1 620px;
    max-width: 780px;
    display: flex; align-items: center;
    height: 44px;
    background: #ffffff;
    border: 1px solid #d7dae1;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.header__search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.15); }
.header__search input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text); font-family: var(--font-body); font-size: 14px;
    padding: 0 15px;
}
.header__search input::placeholder { color: #8a909b; }
.header__search button {
    flex: none;
    width: 50px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--red); color: #fff;
    transition: background .15s;
}
.header__search button:hover { background: var(--red-dark); }

/* --- Live autocomplete (searchbox top + numsearch) --- */
.ap-suggest {
    position: fixed; z-index: 200; background: #fff;
    border: 1px solid #e6e8ec; border-radius: 12px;
    box-shadow: 0 18px 44px rgba(12,13,16,.22);
    max-height: 68vh; overflow-y: auto; display: none;
}
.ap-suggest.is-open { display: block; }
.ap-suggest__group { padding: 10px 15px 5px; font-family: var(--font-head); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9aa0ac; }
.ap-suggest__item, .ap-suggest__cat { display: flex; align-items: center; gap: 12px; padding: 8px 15px; color: var(--navy); text-decoration: none; }
.ap-suggest__item:hover, .ap-suggest__cat:hover { background: var(--gray); }
.ap-suggest__thumb { width: 46px; height: 46px; flex: none; background: #fff; border: 1px solid #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-suggest__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ap-suggest__name { flex: 1; font-size: 13.5px; line-height: 1.3; color: var(--text); }
.ap-suggest__price { flex: none; font-family: var(--font-head); font-weight: 700; color: var(--red); font-size: 14px; }
.ap-suggest__cat span { flex: 1; font-size: 13.5px; font-weight: 500; }
.ap-suggest__cat .ico { color: var(--red); flex: none; }
.ap-suggest__empty { padding: 16px 15px; color: #9aa0ac; font-size: 13.5px; }

.header__actions .header__ico-search { display: none; }   /* tylko mobile */
/* 07.08 klient: menu tekstowe oddaje miejsce wyszukiwarce i flagom — ciasniejszy odstep
   miedzy pozycjami (30 -> 16 px) i drobniejszy tekst z mniejszym rozstrzelaniem liter. */
.nav__list { display: flex; align-items: center; gap: 16px; }
.nav__list a {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-head);
    font-size: 15px; font-weight: 600; letter-spacing: .4px;
    color: #e7e9ee;
    padding: 6px 0;
    position: relative;
    transition: color .15s;
}
.nav__list a:hover { color: var(--white); }
.nav__list a.is-active { color: var(--white); }
.nav__list a.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px; background: var(--red); border-radius: 2px;
}

/* --- Dropdown kategorii w menu --- */
.nav__has-sub { position: relative; }
.nav__sub {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 250px; padding: 8px 0; margin: 0; list-style: none;
    background: #fff; border: 1px solid #e6e8ec; border-radius: 10px;
    box-shadow: 0 14px 34px rgba(12,13,16,.20);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.nav__has-sub:hover .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub li { display: block; }
.nav__sub a {
    display: block; padding: 9px 18px;
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: var(--navy);
}
.nav__sub a:hover { background: var(--gray); color: var(--red); }

/* Pelna lista kategorii (34 pozycje) — jedna kolumna bylaby dluzsza niz ekran.
   Kolumny licza sie same z wysokosci, wiec dopisanie kategorii niczego nie psuje. */
.nav__sub--wide {
    display: flex; flex-direction: column; flex-wrap: wrap;
    max-height: 60vh; width: max-content; max-width: min(94vw, 900px);
    padding: 10px 6px;
}
.nav__sub--wide li { width: 260px; }
.nav__sub--wide a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; border-radius: 6px; }
.nav__cnt { color: #9aa1ab; font-size: 12px; font-weight: 600; }
.nav__sub--wide a:hover .nav__cnt { color: var(--red); }
/* na waskich ekranach menu i tak jest mobilne — nie rozpychamy go na sile */
@media (max-width: 640px) {
    .nav__sub--wide { max-height: none; width: auto; }
    .nav__sub--wide li { width: auto; }
}


/* --- Action icons --- */
.header__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.header__actions button {
    color: #e7e9ee;
    display: flex; align-items: center;
    transition: color .15s;
}
.header__actions button:hover { color: var(--red); }
.header__cart { position: relative; }
.header__cart-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--red); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    background: var(--black);           /* wypełnienie pillarbox na ultra-szerokich ekranach */
    color: var(--white);
    overflow: hidden;
}
/* Warstwa ze zdjęciem — ograniczona do 1920px i wyśrodkowana,
   cover = brak zniekształceń, tylko dokadrowanie. */
.hero__bg {
    position: absolute; inset: 0;
    max-width: 1920px;
    margin: 0 auto;
    /* Desktop: oryginalne zdjecie 3 aut (Mustang / Camaro / RAM) — zostaje na zyczenie klienta.
       Camaro w srodku kadru jest teraz lepiej widoczne, bo tekst zszedl z 62 na 46px,
       a plaski panel pod tekstem zastapil gradient. Wersja z samym Camaro = TYLKO mobile. */
    background: url("../img/hero/hero.webp") center 42% / cover no-repeat;
    transform: scale(1.06);              /* zapas na parallax, bez odslaniania krawedzi */
    filter: brightness(1);
    transition: transform .35s ease-out;
    will-change: transform;
}
.hero__overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    /* DESKTOP: przyciemnienie TYLKO pod tekstem po lewej — od 30% w prawo zdjecie
       ma byc czyste, bez zadnej warstwy (zyczenie klienta: overlay psuje jakosc fotki).
       Wygaszone do 40% — dalej ZERO warstwy. Kolumna tekstu zwezona do 470px, zeby
       miescila sie w ciemnej strefie i pozostala czytelna. */
    background: linear-gradient(90deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.93) 25%, rgba(6,7,9,.60) 33%, rgba(6,7,9,0) 40%);
}
.hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 540px;
    padding-top: 54px;
    padding-bottom: 54px;
}
.hero__content {
  /* 470px, zeby tekst miescil sie w ciemnej strefie gradientu (wygaszony do 40%) */
  max-width: 470px;
  padding: 0;
}

/* Nadtytul „★★★ US POWER. EU SERVICE." */
.hero__eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: #e8eaee;
    margin-bottom: 16px;
}
.hero__eyebrow span { color: var(--red); letter-spacing: 1px; margin-right: 6px; }

.hero__title {
    font-family: var(--font-head);
    font-size: 46px; font-weight: 700; line-height: 1.04;
    letter-spacing: .5px;
    margin-bottom: 14px;
}
.hero__title span { color: var(--red); }

.hero__sub {
    font-size: 15.5px; color: #cfd3da;
    margin-bottom: 22px; line-height: 1.55;
    max-width: 440px;
}

/* Ocena pod naglowkiem — liczona z oc_review (kontroler home.php::apReviewScore) */
.hero__rating {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 14px; color: #cfd3da;
}
.hero__stars { color: var(--red); font-size: 17px; letter-spacing: 2px; }
.hero__rating strong { color: #fff; font-size: 16px; font-weight: 700; }
.hero__rating-lbl { color: #9aa1ad; }

/* CTA */
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head);
    font-size: 16px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 4px;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--dark { background: #23262e; color: #fff; border: 1px solid #34384250; }
.btn--dark:hover { background: #2d313b; }
.btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); font-size: 13px; padding: 11px 20px; }
.btn--outline:hover { background: #fff; color: var(--black); }

/* finder box */
.hero__finder {
    margin-left: auto;
    width: 320px; flex: none;
    background: rgba(12,13,16,.72);
    border: 1px solid rgba(255,255,255,.14);
    border-top: 3px solid var(--blue-bright);   /* akcent niebieski */
    border-radius: 10px;
    padding: 26px 24px;
    text-align: center;
    backdrop-filter: blur(3px);
}
.hero__finder .ico--lg { color: var(--blue-bright); margin: 0 auto 12px; }
.hero__finder h3 {
    font-family: var(--font-head);
    font-size: 20px; font-weight: 700; letter-spacing: .8px;
    margin-bottom: 8px;
}
.hero__finder p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.hero__finder .btn--outline { width: 100%; justify-content: center; }

/* =========================================================
   USP BAR (dlaczego u nas)
   ========================================================= */
/* USP — kafelki w jednej jasnej karcie (makieta 27.07). Sekcja przeniesiona
   POD finder, zeby wybor pojazdu byl pierwsza rzecza pod hero. */
.usp { background: var(--white); padding: 34px 0 10px; }
.usp__card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #f7f8fa;
    border: 1px solid #e8e9ec;
    border-radius: 16px;
    padding: 26px 10px;
}
.usp__item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 0 16px;
}
.usp__item + .usp__item { border-left: 1px solid #e4e6ea; }
.usp__item .ico { width: 30px; height: 30px; color: var(--red); }
.usp__item strong {
    font-family: var(--font-head);
    font-size: 16px; font-weight: 600; letter-spacing: .3px; color: var(--text); line-height: 1.25;
}
.usp__item span { font-size: 13px; color: #7a808b; line-height: 1.4; }

/* =========================================================
   NAGŁÓWEK SEKCJI (reużywalny — WÄHLE DEIN FAHRZEUG, BESTSELLER, ...)
   ========================================================= */
.section-head { text-align: center; margin-bottom: 30px; }
.section-title {
    font-family: var(--font-head);
    font-size: 34px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text);
    display: inline-block; position: relative;
    padding-bottom: 12px;
}
.section-title::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 54px; height: 3px; background: var(--red); border-radius: 2px;
}
.section-sub {
    margin-top: 14px;
    font-size: 15px; color: #6c727d; max-width: 620px;
    margin-left: auto; margin-right: auto;
}

/* =========================================================
   FAHRZEUG-FINDER
   ========================================================= */
.finder {
    background: var(--gray);
    padding: 46px 0;
    border-bottom: 1px solid #e8e9ec;
}

/* pasek nagłówka (otoczka modułu) */
.finder__topbar {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(90deg, #16233d 0%, #0c0d10 100%);
    border-bottom: 2px solid var(--red);
    padding: 15px 24px;
    color: #fff;
}
.finder__topbar .ico { color: var(--red); width: 22px; height: 22px; flex: none; }
.finder__topbar h2 {
    font-family: var(--font-head);
    font-size: 19px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    line-height: 1;
}
.finder__topbar p { font-size: 13px; color: rgba(255,255,255,.6); margin-left: auto; }

.finder__body { padding: 24px; }

/* =========================================================
   FAHRZEUG-FINDER — VARIANTE B (dunkles Band)
   (bazowe .finder__* zostają nietknięte → łatwy powrót do A)
   ========================================================= */
.finder--b { background: linear-gradient(180deg, #14161b 0%, #0c0d10 100%); padding: 54px 0; color: #fff; border-bottom: none; }

.finder-b__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; margin-bottom: 24px; }
.finder-b__head .ico { width: 30px; height: 30px; color: var(--red); margin-bottom: 4px; }
.finder-b__head h2 { font-family: var(--font-head); font-size: 32px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.finder-b__head p { color: var(--muted); font-size: 14.5px; }

.finder--b .finder__tabs { justify-content: center; margin-bottom: 18px; }
.finder--b .finder__tab { background: transparent; border: 1px solid rgba(255,255,255,.16); color: #cfd3db; border-radius: 999px; }
.finder--b .finder__tab:hover { color: #fff; }
.finder--b .finder__tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.finder--b .finder__tab.is-active .ico { color: #fff; }

.finder--b .finder__field label { display: none; }

.finder--b .finder__bar {
    max-width: 1040px; margin: 0 auto;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px; padding: 8px; gap: 8px; align-items: stretch;
}
/* Plakietka „Schnell. Exakt. Passend." — subtelna, bez neonu z makiety (zyczenie klienta) */
.finder-b__badge {
    display: inline-block;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: #f2f4f7;
    background: rgba(216,0,27,.16);
    border: 1px solid rgba(216,0,27,.5);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 14px;
}
/* Link „Alle Marken & Modelle" — zastepuje usuniety kafel z hero */
.finder__all {
    display: inline-block; margin-left: 10px;
    color: #f2f4f7; font-weight: 600; text-decoration: underline;
    text-underline-offset: 3px;
}
.finder__all:hover { color: var(--red); }
.finder--b .finder__bar.is-hidden { display: none; }

.finder--b .ss__btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.finder--b .ss__btn:hover { border-color: rgba(255,255,255,.32); }
.finder--b .ss__btn.is-open { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.18); }
.finder--b .ss__value { color: #8a909b; }
.finder--b .ss__value.has-value { color: #fff; font-weight: 500; }
.finder--b .ss__chev { color: #cfd3db; }
.finder--b .ss.is-disabled .ss__btn { background: rgba(255,255,255,.02); }

/* CTA pierwszego pola (Marke) na ciemnym pasmie → czerwony akcent, biały tekst */
.finder--b .ss.is-cta .ss__btn { border-color: var(--red); background: rgba(216,0,27,.12); box-shadow: 0 0 0 3px rgba(216,0,27,.15); }
.finder--b .ss.is-cta .ss__value { color: #fff; }
.finder--b .ss.is-cta .ss__chev { color: var(--red); }

.finder--b .finder__field select { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); color: #fff; }
.finder--b .finder__field select:disabled { background-color: rgba(255,255,255,.02); color: rgba(255,255,255,.4); }

.finder-b__makes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; }
.finder-b__makes.is-hidden { display: none; }
.finder-b__makes-label { font-size: 12.5px; color: var(--muted); }
.finder--b .finder__makes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; overflow: visible; padding: 0; }
.finder--b .make-tile { flex: 0 0 auto; width: 80px; height: 46px; flex-direction: row; padding: 8px 10px; border-radius: 8px; }
.finder--b .make-tile span { display: none; }
.finder--b .make-tile img { max-height: 18px; max-width: 100%; }

.finder--b .finder__note { justify-content: center; color: var(--muted); margin-top: 18px; }
.finder--b .finder__note .ico { color: var(--red); }
.finder__card {
    max-width: none;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(20,22,27,.08);
    overflow: hidden;
}

/* Marken-Schnellwahl (Swiper) */
.finder__swiper { position: relative; margin-bottom: 22px; }
.finder__swiper.is-hidden { display: none; }
.finder__makes {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 2px;
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}
.finder__makes::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.make-tile {
    flex: 1 0 96px;        /* rośnie by wypełnić szeroki rząd, nie kurczy się poniżej 96px */
    max-width: 160px;
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 74px;
    padding: 8px 8px;
    background: #fff;
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.make-tile img { max-height: 22px; max-width: 70%; width: auto; object-fit: contain; }
.make-tile span {
    font-family: var(--font-head);
    font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #4a4f59;
    text-transform: uppercase;
}
.make-tile:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(20,22,27,.09); transform: translateY(-1px); }
.make-tile:active { transform: translateY(0); }
.make-tile.is-active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(216,0,27,.15); }
.make-tile.is-active span { color: var(--red); }

/* strzałki swipera */
.swiper-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--text);
    border: 1.5px solid #e0e2e7;
    box-shadow: 0 4px 12px rgba(20,22,27,.12);
    transition: background .15s, color .15s, opacity .15s;
}
.swiper-nav:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.swiper-nav--prev { left: -10px; }
.swiper-nav--next { right: -10px; }
.swiper-nav.is-hidden { opacity: 0; pointer-events: none; }

/* Umschalter */
.finder__tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.finder__tab {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head);
    font-size: 15px; font-weight: 600; letter-spacing: .5px;
    color: #6c727d;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--gray);
    transition: all .15s;
}
.finder__tab:hover { color: var(--text); }
.finder__tab.is-active { background: var(--blue); color: #fff; }
.finder__tab.is-active .ico { color: #fff; }

/* Pasek pól */
.finder__bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
.finder__bar.is-hidden { display: none; }
/* Finder pojazdu ma 4 kroki (Marke > Modell > Baujahr > Motor) — panel "Kategorie" dalej 3 */
.finder__bar[data-pane="vehicle"] { grid-template-columns: 1.1fr 1.25fr .7fr 1.25fr auto; }

.finder__field { display: flex; flex-direction: column; gap: 6px; }
.finder__field label {
    font-size: 13px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--text);
}
.finder__field select {
    font-family: var(--font-body);
    font-size: 15px; color: var(--text);
    height: 52px;
    padding: 0 40px 0 15px;
    border: 1.5px solid #d7dae0;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236c727d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
    background-size: 18px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.finder__field select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(28,38,139,.12);
}
.finder__field select:disabled { background-color: #f2f3f5; color: #aab0ba; cursor: not-allowed; }

/* --- Wyszukiwalna lista (SearchSelect) --- */
.ss { position: relative; }
.ss__btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 52px;
    padding: 0 12px 0 15px;
    border: 1.5px solid #d7dae0;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.ss__btn:hover { border-color: #c2c7d0; }
.ss__btn.is-open { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28,38,139,.12); }
.ss__value {
    font-family: var(--font-body); font-size: 15px; color: #aab0ba;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss__value.has-value { color: var(--text); font-weight: 500; }
.ss__chev { color: #6c727d; transition: transform .15s; flex: none; }
.ss__btn.is-open .ss__chev { transform: rotate(180deg); }

.ss.is-disabled { opacity: .6; pointer-events: none; }
.ss.is-disabled .ss__btn { background: #f2f3f5; }

/* CTA — pierwsze pole (marka) wyróżnione dopóki nie wybrane */
.ss.is-cta .ss__btn {
    border-color: var(--blue);
    background: rgba(28,38,139,.05);
    box-shadow: 0 0 0 3px rgba(28,38,139,.10);
}
.ss.is-cta .ss__value { color: var(--blue); font-weight: 600; }
.ss.is-cta .ss__chev { color: var(--blue); }

.ss__panel {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(20,22,27,.16);
    overflow: hidden;
}
.ss__search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid #eef0f3;
}
.ss__search .ico { color: #9aa0ac; }
.ss__input {
    flex: 1; border: none; outline: none;
    font-family: var(--font-body); font-size: 14.5px; color: var(--text);
    background: transparent;
}
/* 15.09.2026 klient: po wyborze marki (np. Chevrolet) lista „Modell wählen" miala POZIOMY pasek.
   Pole ma na desktopie ~167 px, a nazwy modeli eBay sa dlugie („Astro Extended Passenger Van"
   + „10 Motoren") — wiersz rozpychal liste do 217 px. Panel jest teraz szerszy od pola (ale nigdy
   szerszy niz ekran), dlugie nazwy sie zawijaja, a przewijanie w poziomie jest wylaczone. */
.ss__panel { right: auto; width: max(100%, min(320px, calc(100vw - 32px))); }
.ss__list { max-height: 264px; overflow-y: auto; overflow-x: hidden; padding: 6px; }
.ss__opt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 7px;
    font-size: 14.5px; color: var(--text);
    cursor: pointer;
}
.ss__opt span { min-width: 0; overflow-wrap: anywhere; }
.ss__opt:hover { background: var(--gray); }
.ss__opt.is-sel { background: rgba(28,38,139,.08); color: var(--blue); font-weight: 600; }
.ss__opt em { font-style: normal; font-size: 12px; color: #9aa0ac; flex: none; }
.ss__empty { padding: 14px 12px; font-size: 14px; color: #9aa0ac; text-align: center; }

.finder__submit { height: 52px; justify-content: center; white-space: nowrap; }

.finder__note {
    display: flex; align-items: center; gap: 8px;
    margin-top: 18px;
    font-size: 13.5px; color: #7a808b;
}
.finder__note .ico { color: var(--blue); }

/* =========================================================
   BELIEBTE MODELLE
   ========================================================= */
.models { padding: 60px 0; background: var(--white); }
.models__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 18px;
}

.vehicle-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.vehicle-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,22,27,.12); border-color: #dcdfe4; }

/* media = miejsce na zdjęcie (placeholder) */
.vehicle-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(120% 120% at 50% 0%, #2a3346 0%, #14161b 60%, #0c0d10 100%);
    background-size: cover; background-position: center;
    overflow: hidden;
}
.vehicle-card__ghost { width: 66%; height: auto; fill: rgba(255,255,255,.10); stroke: none; }
.vehicle-card__logo {
    position: absolute; top: 12px; left: 12px;
    background: #fff; border-radius: 7px;
    padding: 6px 9px; height: 30px;
    display: flex; align-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.vehicle-card__logo img { width: 64px; height: 18px; object-fit: contain; object-position: center; flex: none; }
.vehicle-card__tag {
    position: absolute; bottom: 10px; right: 10px;
    font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.25); border-radius: 5px;
    padding: 2px 7px;
}

/* Realne zdjęcia modeli (portret) — placeholder (sylwetka + tag) ukryty tylko tam,
   gdzie jest zdjęcie. Karty bez zdjęcia pokazują sylwetkę do czasu podmiany:
   .vehicle-card[data-model="silverado1500"] .vehicle-card__media { background-image:url("../img/makes/silverado.jpg"); } */
.vehicle-card--photo .vehicle-card__ghost, .vehicle-card--photo .vehicle-card__tag { display: none; }
.vehicle-card[data-model="mustang"]    .vehicle-card__media { background-image: url("../img/makes/p1.jpg"); }
.vehicle-card[data-model="challenger"] .vehicle-card__media { background-image: url("../img/makes/p3.jpg"); }
.vehicle-card[data-model="ram1500"]    .vehicle-card__media { background-image: url("../img/makes/p5.jpg"); }

.vehicle-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 3px; }
.vehicle-card__body h3 {
    font-family: var(--font-head);
    font-size: 21px; font-weight: 700; letter-spacing: .4px; color: var(--text);
    text-transform: uppercase;
}
.vehicle-card__year { font-size: 13.5px; color: #7a808b; }
.vehicle-card__cta {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-head);
    font-size: 14px; font-weight: 600; letter-spacing: .5px; color: var(--red);
    text-transform: uppercase;
}
.vehicle-card:hover .vehicle-card__cta { gap: 10px; }

/* kafel: wszystkie marki */
.vehicle-card--all {
    align-items: center; justify-content: center; text-align: center;
    gap: 8px; padding: 28px 20px;
    color: #fff;
    background: linear-gradient(135deg, #16233d 0%, #0c0d10 100%);
    border-color: transparent;
}
.vehicle-card--all .ico--lg { color: var(--blue-bright); margin-bottom: 4px; }
.vehicle-card--all h3 {
    font-family: var(--font-head);
    font-size: 20px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.vehicle-card--all span { font-size: 13px; color: var(--muted); }
.vehicle-card--all .vehicle-card__cta { color: #fff; margin-top: 6px; }

/* =========================================================
   BELIEBTE KATEGORIEN
   ========================================================= */
.categories { padding: 60px 0; background: var(--gray); }
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cat-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* media placeholder — podmień na foto przez .cat-card__media background-image */
}
.cat-card__media {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 120% at 50% 35%, #2a3346 0%, #14161b 62%, #0c0d10 100%);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s;
}
.cat-card__ico {
    width: 40%; height: auto;
    fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .2s;
}
.cat-card__count {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(216,0,27,.92); color: #fff;
    font-family: var(--font-body); font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; letter-spacing: .3px;
}
.cat-card__media { background-color: #fff; }
.cat-card__name {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 30px 16px 14px;
    font-family: var(--font-head);
    font-size: 16px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; color: #fff;
    background: linear-gradient(180deg, rgba(12,13,16,0) 0%, rgba(12,13,16,.85) 70%);
}
.cat-card__name::after {
    content: ""; display: block; width: 26px; height: 2px; margin-top: 7px;
    background: var(--red); border-radius: 2px;
    transition: width .2s;
}
.cat-card:hover .cat-card__media { transform: scale(1.06); }
.cat-card:hover .cat-card__name::after { width: 48px; }

/* Realne zdjęcia kategorii — ikony placeholder ukryte */
.cat-card__ico { display: none; }
.cat-card[data-cat="front-stossfaenger"] .cat-card__media { background-image: url("../img/cat/zderzak.jpg"); }
.cat-card[data-cat="heck-stossfaenger"]  .cat-card__media { background-image: url("../img/cat/tylzderzak.jpg"); }
.cat-card[data-cat="motorhauben"]        .cat-card__media { background-image: url("../img/cat/maska.jpg"); }
.cat-card[data-cat="spoiler"]            .cat-card__media { background-image: url("../img/cat/spoiler.jpg"); }
.cat-card[data-cat="seitenschweller"]    .cat-card__media { background-image: url("../img/cat/cat5.jpg"); }
.cat-card[data-cat="led-beleuchtung"]    .cat-card__media { background-image: url("../img/cat/frontlight.jpg"); }
.cat-card[data-cat="bremsen"]            .cat-card__media { background-image: url("../img/cat/brakes.jpg"); }
.cat-card[data-cat="rueckleuchten"]      .cat-card__media { background-image: url("../img/cat/ligts.jpg"); }

.categories__more { text-align: center; margin-top: 30px; }
.btn--outline-dark {
    background: transparent; color: var(--text);
    border: 1.5px solid #c9ccd2; font-size: 14px; padding: 12px 26px;
}
.btn--outline-dark:hover { background: var(--text); color: #fff; border-color: var(--text); }

/* =========================================================
   BESTSELLER (karuzela kart produktów)
   ========================================================= */
.bestsellers { padding: 60px 0; background: var(--white); }
.pswiper { position: relative; }
.pswiper__track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden; /* jawnie — inaczej overflow-x:auto wymusza overflow-y:auto i przycina GÓRĘ kart (phantom scroll przy snap/subpikselu) */
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 10px 4px 14px; /* pionowy zapas na cień hover + brak przycinania góry */
    scrollbar-width: none; -ms-overflow-style: none;
}
.pswiper__track::-webkit-scrollbar { display: none; }

.product-card {
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.product-card:hover { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

.product-card__badge {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    font-family: var(--font-head);
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    padding: 4px 9px; border-radius: 6px; color: #fff;
}
.product-card__badge--sale { background: var(--red); }
.product-card__badge--tuv  { background: var(--blue); display: inline-flex; align-items: center; gap: 4px; }
.product-card__badge--sale + .product-card__badge--tuv { top: 44px; }  /* stack pod Angebot gdy oba */

.product-card__wish {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #7a808b;
    border: 1px solid #e6e8ec;
    box-shadow: 0 2px 8px rgba(20,22,27,.08);
    transition: color .15s, background .15s;
}
.product-card__wish:hover { color: var(--red); background: #fff5f6; }

.product-card__media {
    background: #fff;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    border-bottom: 1px solid #f0f1f3;
    overflow: hidden;   /* AP: nic nie wyjezdza poza kafelek */
}
.product-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }  /* AP: <a> jest block (nie flex) wiec img nie jest flex-itemem -> width:100% dziala i nie wyjezdza */

.product-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand { height: 20px; margin-bottom: 8px; display: flex; align-items: center; }
.product-card__brand img { max-height: 18px; max-width: 84px; width: auto; object-fit: contain; }
.product-card__brand--text { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #8a909b; }

.product-card__title {
    font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 41px; max-height: 41px; overflow-wrap: anywhere; word-break: break-word;
}
.product-card__fit { font-size: 12.5px; color: #8a909b; margin-top: 5px; }

.product-card__meta {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: 12px; margin-bottom: 12px;
}
.product-card__price { display: flex; align-items: baseline; gap: 8px; }
.product-card__price .now { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--red); }
.product-card__price .old { font-size: 13px; color: #aab0ba; text-decoration: line-through; }
.product-card__stock {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: #1c9a52;
}
.product-card__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1c9a52; }

.product-card__add {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: 8px;
    background: var(--red); color: #fff;
    font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase;
    transition: background .15s;
}
.product-card__add:hover { background: var(--red-dark); }

/* =========================================================
   UNSERE MARKEN
   ========================================================= */
.brands { position: relative; padding: 64px 0; background: linear-gradient(180deg, #14161b 0%, #0c0d10 100%); }
.section-head--light .section-title { color: #fff; }
.section-head--light .section-sub { color: var(--muted); }

.brands__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.brand-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brand-card__frame {
    width: 100%; height: 104px;
    background: #fff;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    padding: 18px 22px;
    box-shadow:
        0 10px 34px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.05),
        0 0 26px rgba(255,255,255,.05);
    transition: transform .15s, box-shadow .15s;
}
.brand-card__frame img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
.brand-card:hover .brand-card__frame {
    transform: translateY(-4px);
    box-shadow:
        0 18px 46px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.12),
        0 0 36px rgba(255,255,255,.14);
}
.brand-card { text-decoration: none; }
.brand-card__desc { font-size: 12.5px; color: var(--muted); letter-spacing: .3px; text-align: center; }
.brand-card__count { font-size: 11px; font-weight: 800; color: #e63946; letter-spacing: .4px; text-transform: uppercase; text-align: center; }
.brand-card:hover .brand-card__desc { color: #fff; }

/* =========================================================
   CTA-BANNER + KONTAKT
   ========================================================= */
.cta-banner {
    position: relative;
    background: #0c0d10 url("../img/banner-dolny.jpg") center/cover no-repeat;
    overflow: hidden;
}
.cta-banner__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,9,12,.92) 0%, rgba(8,9,12,.78) 26%, rgba(8,9,12,.35) 52%, rgba(8,9,12,0) 78%);
}
.cta-banner__inner {
    position: relative;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 36px;
    min-height: 380px;
    padding-top: 48px; padding-bottom: 48px;
}
.cta-banner__text { max-width: 420px; color: #fff; }
.cta-banner__text h2 {
    font-family: var(--font-head);
    font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: .5px;
    text-transform: uppercase; margin-bottom: 14px;
}
.cta-banner__text p { font-size: 16px; color: #d6d9df; line-height: 1.6; margin-bottom: 26px; }

/* panel kontaktowy (glass) */
.cta-banner__contact {
    order: -1;                       /* box z lewej, tekst obok */
    flex: none; width: 320px;
    background: rgba(12,13,16,.72);
    border: 1px solid rgba(255,255,255,.14);
    border-top: 3px solid var(--red);
    border-radius: 12px;
    padding: 26px 26px 28px;
    backdrop-filter: blur(6px);
    color: #fff;
}
.cta-banner__contact h3 {
    font-family: var(--font-head);
    font-size: 22px; font-weight: 700; letter-spacing: .5px; margin-bottom: 6px;
}
.cta-banner__contact > p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

.contact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.contact-list .ico { color: var(--red); width: 22px; height: 22px; flex: none; }
.contact-list span { display: flex; flex-direction: column; font-size: 14px; }
.contact-list strong { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }

.btn--light { background: #fff; color: var(--black); width: 100%; justify-content: center; }
.btn--light:hover { background: #e9eaec; }

/* =========================================================
   KONTAKTFORMULAR (minimalistisch)
   ========================================================= */
.contact {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(12,13,16,.95) 0%, rgba(12,13,16,.85) 45%, rgba(14,16,20,.7) 100%),
        url("../img/banner-dolny.jpg") center/cover no-repeat #0c0d10;
    padding: 66px 0;
}
/* akcent flagowy (niebiesko-czerwony pasek jak w top navbarze) */
.brands::before, .contact::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--blue-bright) 0%, var(--red) 100%);
    z-index: 3;
}
/* dekoratory */
.contact__glow {
    position: absolute; z-index: 0; pointer-events: none;
    width: 560px; height: 560px; border-radius: 50%;
    left: -170px; bottom: -220px;
    background: radial-gradient(circle, rgba(216,0,27,.16) 0%, transparent 65%);
}
.contact__deco {
    position: absolute; z-index: 0; pointer-events: none;
    width: 380px; height: 380px; right: 40px; top: -70px;
    fill: rgba(255,255,255,.035);
    transform: rotate(-12deg);
}
.contact__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center;
}

/* --- środkowa kolumna: konsultant dosunięty do samego dołu sekcji --- */
.contact__figure {
    display: flex; align-items: flex-end; justify-content: center;
    align-self: stretch;
    margin-bottom: -66px;   /* kasuje dolny padding sekcji → konsultant stoi na dole, bez luki */
}
.contact__figure img { max-height: 500px; width: auto; display: block; }

/* --- lewa kolumna: info + ikony --- */
.contact__info { color: #fff; }
.contact__badge {
    display: inline-flex; width: 52px; height: 52px; border-radius: 12px;
    align-items: center; justify-content: center; margin-bottom: 18px;
    background: rgba(216,0,27,.14); color: var(--red);
}
.contact__badge .ico { width: 28px; height: 28px; }
.contact__info h2 {
    font-family: var(--font-head);
    font-size: 36px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    line-height: 1.05; margin-bottom: 12px;
}
.contact__info > p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.6; max-width: 420px; margin-bottom: 28px; }
.contact__features { display: flex; flex-direction: column; gap: 16px; }
.contact__features li { display: flex; align-items: flex-start; gap: 13px; }
.contact__fico {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--red);
}
.contact__fico .ico { width: 20px; height: 20px; }
.contact__features strong { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .3px; color: #fff; }
.contact__features li > div span { font-size: 13px; color: var(--muted); }

/* --- prawa kolumna: formularz (biała karta) --- */
.contact__form {
    display: flex; flex-direction: column; gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 32px 34px;
    box-shadow: 0 26px 64px rgba(0,0,0,.45);
}
.contact__form > h3 {
    font-family: var(--font-head);
    font-size: 22px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text);
}
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact .field { display: flex; flex-direction: column; gap: 7px; }
.contact .field label {
    font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #3a3f48;
}
.contact .field label span { color: #a3a8b0; font-weight: 500; text-transform: none; letter-spacing: 0; }
.contact .field input,
.contact .field textarea {
    border: 1.5px solid #dcdfe4; border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
    font-family: var(--font-body); font-size: 15px; color: var(--text);
    outline: none; resize: none;
    transition: border-color .15s, box-shadow .15s;
}
.contact .field input::placeholder,
.contact .field textarea::placeholder { color: #aeb3bc; }
.contact .field input:focus,
.contact .field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.1); }

.contact__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.contact__submit span { font-size: 12.5px; color: #9aa0ac; }
.contact__submit a { color: #6c727d; text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #0a0b0e; color: #aeb3bd; }
.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    padding: 56px 0 44px;
}
.footer__brand { max-width: 320px; }
.footer__logo { height: 46px; width: auto; margin-bottom: 16px; }
.footer__brand p { font-size: 13.5px; line-height: 1.6; color: #8a909b; margin-bottom: 18px; }
.footer__contact { display: flex; flex-direction: column; gap: 9px; }
.footer__contact li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #c2c7d0; }
.footer__contact .ico { color: var(--red); flex: none; }

.footer__col h4 {
    font-family: var(--font-head);
    font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13.5px; color: #9aa0ac; transition: color .15s; }
.footer__col a:hover { color: #fff; }

.footer__pay { margin-top: 22px; }
.footer__pay > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6c727d; margin-bottom: 8px; }
.footer__pay-icons { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.footer__pay-icons img { height: 28px; width: auto; display: block; border-radius: 5px; }

.footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid #1c1f26;
    font-size: 12.5px; color: #6c727d;
}
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__legal a { color: #8a909b; transition: color .15s; }
.footer__legal a:hover { color: #fff; }
.footer__vat { color: #565b64; }
.footer__credit { color: #9aa0ac; font-weight: 600; text-decoration: none; transition: color .15s; }
.footer__credit:hover { color: var(--red); }

/* =========================================================
   KATEGORIESEITE (Hero + Katalog + Filter)
   ========================================================= */
.cathero { position: relative; background: linear-gradient(180deg, #14161b 0%, #0c0d10 100%); color: #fff; padding: 26px 0 30px; }
.cathero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--blue-bright) 0%, var(--red) 100%); }
.cathero__crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.cathero__crumbs a { color: var(--muted); }
.cathero__crumbs a:hover { color: #fff; }
.cathero__crumbs strong { color: #fff; font-weight: 600; }
.cathero__crumbs span { color: #464b55; }
.cathero__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cathero__text h1 { font-family: var(--font-head); font-size: 36px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1.05; }
.cathero__text p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.6; margin-top: 10px; max-width: 560px; }
.cathero__media { flex: none; width: 230px; height: 132px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.cathero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.catalog { background: #fff; padding: 40px 0 64px; }
.catalog__inner { display: grid; grid-template-columns: 258px 1fr; gap: 36px; align-items: start; }

/* --- filtry --- */
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters__head h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
.filters__reset { font-size: 12.5px; color: var(--red); background: none; border: none; cursor: pointer; text-decoration: underline; }
/* AP: drzewko kategorii w lewym pasku (styl eBay) */
.cattree { padding: 4px 0 18px; border-bottom: 1px solid #eceef1; margin-bottom: 4px; }
.cattree__title { font-family: var(--font-head); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text); margin-bottom: 10px; }
.cattree__list { list-style: none; margin: 0; padding: 0; }
.cattree__link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; color: #2a2e37; font-size: 13.5px; text-decoration: none; line-height: 1.25; }
.cattree__link:hover { background: #f2f4f7; }
.cattree__cnt { color: #9aa0ab; font-size: 12px; flex: none; }
.cattree__l1 > .cattree__link { font-weight: 600; }
.cattree__l2 > .cattree__link { padding-left: 22px; font-size: 13px; }
.cattree__l3 > .cattree__link { padding-left: 36px; font-size: 12.5px; color: #4a4f59; }
.cattree__item.is-open > .cattree__link { color: var(--red); }
.cattree__item.is-active > .cattree__link { background: var(--red); color: #fff; font-weight: 600; }
.cattree__item.is-active > .cattree__link .cattree__cnt { color: rgba(255,255,255,.85); }

.filters__group { padding: 18px 0; border-bottom: 1px solid #eceef1; }
.filters__title { font-family: var(--font-head); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text); margin-bottom: 12px; }
.filters__opt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4a4f59; padding: 5px 0; cursor: pointer; }
.filters__opt input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.filters__opt .cnt { margin-left: auto; font-size: 12px; color: #aab0ba; }

/* --- Auto-facety atrybutow (Einbauposition, Hersteller, ...) --- */
.filters__facetvals { display: flex; flex-direction: column; max-height: 230px; overflow-y: auto; }
.filters__opt--facet { text-decoration: none; color: #4a4f59; }
.filters__opt--facet:hover { color: var(--text); }
.filters__opt--facet .filters__box {
  width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid #cbd0d8; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.filters__opt--facet.is-active .filters__box { background: var(--red); border-color: var(--red); }
.filters__opt--facet.is-active .filters__lbl { color: var(--text); font-weight: 600; }
.filters__lbl { flex: 1; min-width: 0; }

.filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0 4px; }
.filters__chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  background: #fdecec; color: var(--red); border: 1px solid #f6c9cd; border-radius: 999px; padding: 4px 10px; text-decoration: none;
}
.filters__chip:hover { background: #fbdada; }
.filters__clearall { font-size: 12.5px; color: #8a909b; text-decoration: underline; margin-left: 2px; }
.filters__clearall:hover { color: var(--red); }
.filters__price { display: flex; align-items: center; gap: 10px; }
.filters__price input { width: 100%; min-width: 0; height: 42px; border: 1.5px solid #dcdfe4; border-radius: 8px; padding: 0 12px; font-family: var(--font-body); font-size: 14px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.filters__price input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.1); }
.filters__price span { color: #aab0ba; }
/* Widelki cenowe filtruja teraz serwerowo, wiec potrzebuja zatwierdzenia (Enter tez dziala). */
.filters__pricego { flex: 0 0 auto; height: 42px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.filters__pricego:hover { filter: brightness(1.08); }
.filters__note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #8a909b; margin-top: 16px; line-height: 1.5; }
.filters__note .ico { color: var(--blue); flex: none; margin-top: 1px; }

/* --- toolbar + siatka --- */
.catalog__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.catalog__count { font-size: 14px; color: #6c727d; }
.catalog__count strong { color: var(--text); font-family: var(--font-head); font-size: 17px; }
.catalog__sort { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #6c727d; }
.catalog__sort select { height: 42px; border: 1.5px solid #dcdfe4; border-radius: 8px; padding: 0 36px 0 12px; font-family: var(--font-body); font-size: 14px; color: var(--text); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236c727d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center; background-size: 16px; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; }
.catalog__sort select:focus { border-color: var(--red); }

.catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.catalog__grid .product-card { width: auto; }   /* nadpisuje 280px ze swipera bestseller */

/* --- Strona Fahrzeuge (przegladaj wg pojazdu) --- */
.veh-make { margin-bottom: 30px; }
.veh-make__title { font-family: var(--font-head); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--navy); display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--gray); }
.veh-make__count { font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.veh-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.veh-model { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; color: var(--navy); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.veh-model:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(216,0,27,.08); }
.veh-model__name { flex: 1; font-weight: 600; font-size: 14px; }
.veh-model__years { font-size: 12px; color: var(--muted); }
.veh-model__cnt { flex: none; min-width: 24px; text-align: center; font-size: 11px; font-weight: 700; color: var(--red); background: rgba(216,0,27,.08); border-radius: 20px; padding: 2px 7px; }
.product-card__stock--soon { color: #c8791b; }
.product-card__stock--soon::before { background: #c8791b; }
.product-card__stock--out { color: #b91c1c; }
.product-card__stock--out::before { background: #b91c1c; }

.catalog__empty { text-align: center; padding: 46px 0; color: #6c727d; font-size: 15px; }
.catalog__empty button { color: var(--red); background: none; border: none; text-decoration: underline; cursor: pointer; font-size: 15px; }

/* --- paginacja --- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
.pagination a { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e0e2e7; border-radius: 8px; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text); transition: all .15s; }
.pagination a:hover { border-color: var(--red); color: var(--red); }
.pagination a.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.pagination span { color: #aab0ba; padding: 0 4px; }

/* =========================================================
   PRODUKTSEITE (PDP)
   ========================================================= */
.pdp { background: #fff; padding: 30px 0 64px; }
.pdp__crumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    font-size: 13px; color: #8a909b; margin-bottom: 24px;
    overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.pdp__crumbs::-webkit-scrollbar { display: none; }
.pdp__crumbs a, .pdp__crumbs strong, .pdp__crumbs span { flex: 0 0 auto; }
.pdp__crumbs a { color: #8a909b; text-decoration: none; }
.pdp__crumbs a:hover { color: var(--red); }
.pdp__crumbs strong { color: var(--text); font-weight: 600; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.pdp__crumbs span { color: #c2c7d0; }
/* na wąskich ekranach chowamy „Home", żeby ważniejsza była ścieżka kategorii */
@media (max-width: 560px) { .pdp__crumbs > a:first-child { display: none; } .pdp__crumbs > a:first-child + span { display: none; } }

.pdp__top { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 48px; align-items: start; }

/* galeria */
.gallery__main { position: relative; background: #fff; border: 1px solid #e6e8ec; border-radius: 16px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; }
.gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__badge { position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 6px; z-index: 3; }
.gallery__badge--tuv { background: var(--blue); display: inline-flex; align-items: center; gap: 5px; }
.gallery__badge + .gallery__badge--tuv { top: 48px; }  /* pod Angebot gdy oba */
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gallery__thumb { aspect-ratio: 1/1; min-width: 0; background: #fff; border: 1.5px solid #e6e8ec; border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s; }
.gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumb:hover { border-color: #c2c7d0; }
.gallery__thumb.is-active { border-color: var(--red); }
/* AP: mobile — mniej kolumn miniatur, min-width:0 zeby grid sie nie rozpychal (aspect-ratio bug) */
@media (max-width: 560px) {
    .gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* lightbox / pelnoekranowa galeria */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(12,13,16,.93); }
.lightbox.is-open { display: flex; }
.lightbox__stage { max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 90vw; max-height: 88vh; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close { position: absolute; top: 18px; right: 26px; background: none; border: none; color: #fff; font-size: 42px; line-height: 1; cursor: pointer; opacity: .8; transition: opacity .15s; }
.lightbox__close:hover { opacity: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.14); border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.lightbox__nav:hover { background: var(--red); }
.lightbox__prev { left: 26px; }
.lightbox__next { right: 26px; }
.lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--font-body); font-size: 14px; letter-spacing: .5px; opacity: .85; }
@media (max-width: 700px) {
    .lightbox__nav { width: 44px; height: 44px; font-size: 26px; }
    .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
    .lightbox__close { top: 10px; right: 14px; }
}

/* buybox */
.buybox__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.buybox__cond { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #1c9a52; background: rgba(28,154,82,.1); padding: 4px 10px; border-radius: 6px; }
.buybox__cat { font-size: 13px; color: #8a909b; }
.buybox__cat a { color: var(--red); }
.buybox__title { font-family: var(--font-head); font-size: 30px; font-weight: 700; letter-spacing: .3px; line-height: 1.1; color: var(--text); text-transform: uppercase; }
.buybox__fit { font-size: 14px; color: #6c727d; margin-top: 8px; }
.buybox__fit strong { color: var(--text); }

.buybox__price { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.buybox__now { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--red); line-height: 1; }
.buybox__old { font-size: 17px; color: #aab0ba; text-decoration: line-through; }
.buybox__save { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; background: var(--red); padding: 4px 9px; border-radius: 6px; }
.buybox__vat { font-size: 12.5px; color: #8a909b; margin-top: 6px; }
/* AP: baner darmowej wysylki do DE (klient: "bardzo wazne") */
.buybox__free { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: #e9f7ee; color: #15803d; border: 1px solid #b7e4c7; border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.buybox__free strong { font-weight: 700; }
.buybox__free .ico { color: #15803d; flex: none; }
/* AP: Google Maps na stronie "Über ARBEITSWELT-SHOP.DE" */
.ab-map { margin: 28px 0 8px; }
.ab-map__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 6px; }
.ab-map__addr { margin: 0 0 14px; color: #4a4f59; font-size: 14px; }
.ab-map__frame { border-radius: 16px; overflow: hidden; border: 1px solid #e6e8ec; box-shadow: 0 6px 24px rgba(0,0,0,.06); line-height: 0; }
.ab-map__frame iframe { display: block; width: 100%; height: 360px; border: 0; }
@media (max-width: 560px){ .ab-map__frame iframe { height: 260px; } }
.buybox__vat a { color: #6c727d; text-decoration: underline; }

.buybox__avail { display: flex; align-items: center; gap: 20px; margin: 18px 0; flex-wrap: wrap; }
.buybox__stock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #1c9a52; }
.buybox__stock .dot { width: 8px; height: 8px; border-radius: 50%; background: #1c9a52; }
.buybox__ship { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6c727d; }
.buybox__ship .ico { color: #6c727d; }

.buybox__buy { display: flex; align-items: stretch; gap: 10px; margin-top: 6px; }
.qty { display: flex; align-items: center; border: 1.5px solid #dcdfe4; border-radius: 10px; overflow: hidden; flex: none; }
.qty button { width: 42px; height: 52px; font-size: 20px; color: var(--text); background: #fff; cursor: pointer; }
.qty button:hover { background: #f3f4f6; }
.qty input { width: 44px; height: 52px; border: none; text-align: center; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text); outline: none; }
.buybox__cart { flex: 1; height: 52px; justify-content: center; }
.buybox__wish { flex: none; width: 52px; height: 52px; border: 1.5px solid #dcdfe4; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #7a808b; cursor: pointer; transition: all .15s; }
.buybox__wish:hover { color: var(--red); border-color: var(--red); }
.buybox__now-btn { width: 100%; justify-content: center; height: 50px; margin-top: 10px; }

.buybox__trust { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #eceef1; }
.buybox__trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #4a4f59; }
.buybox__trust .ico { color: var(--red); flex: none; }

.buybox__pay { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.buybox__pay span { font-size: 12.5px; color: #8a909b; margin-right: 2px; }
.buybox__pay img { height: 26px; width: auto; border-radius: 5px; }

/* tabs */
.tabs { margin-top: 48px; }
.tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid #e6e8ec; flex-wrap: wrap; }
.tabs__btn { font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .4px; color: #8a909b; padding: 14px 20px; background: none; cursor: pointer; position: relative; }
.tabs__btn:hover { color: var(--text); }
.tabs__btn.is-active { color: var(--text); }
.tabs__btn.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--red); border-radius: 2px; }
.tabs__panel { padding: 28px 2px; max-width: 840px; }
.tabs__panel.is-hidden { display: none; }
.tabs__panel p { font-size: 15px; color: #4a4f59; line-height: 1.7; margin-bottom: 14px; }
.pdp__list { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.pdp__list li { position: relative; padding-left: 26px; font-size: 14.5px; color: #4a4f59; }
.pdp__list li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 15px; height: 9px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }

/* attrs */
.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.attrs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #eceef1; }
.attrs dt { font-size: 13.5px; color: #8a909b; }
.attrs dd { font-size: 13.5px; color: var(--text); font-weight: 600; text-align: right; }
.attrs__note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8a909b; margin-top: 18px; }
.attrs__note .ico { color: var(--blue); flex: none; }

/* compat */
/* ==========================================================================
   AP: wyglad opisu produktu importowanego z eBay (wg makiety klienta)
   --------------------------------------------------------------------------
   WYLACZNIE stylowanie. Tresc opisu zostaje dokladnie taka, jaka przyszla
   z eBay — nic tu nie dopisujemy i nie generujemy. Tam, gdzie w opisie
   czegos nie ma, po prostu nie bedzie tego widac.
   Caly zakres ograniczony do .apdesc (kontener wokol {{ description }}),
   zeby nasze wlasne bloki .passt i .compat-notes zostaly nietkniete.
   ========================================================================== */
.apdesc { font-size: 15px; color: #4a4f59; line-height: 1.7; }
.apdesc > :first-child { margin-top: 0; }
.apdesc b:empty, .apdesc strong:empty { display: none; }   /* 239 opisow ma puste <b></b> */

/* --- naglowek glowny -----------------------------------------------------
   Wszystkie wielokrotne <h3> w katalogu sasiaduja ze soba (772 produkty)
   i razem tworza JEDNA nazwe artykulu ("2x PERFORMANCE FRONT ROTORS" / "+" /
   "4x CERAMIC FRONT BRAKE PADS"). Dlatego 18.08.2026, na prosbe klienta,
   kazdy z nich jest tak samo duzy i czarny — wczesniej drugi i kolejne
   szly mniejszym czerwonym drukiem jako podtytul i wygladaly jak inny
   produkt. Czerwona kreska nadal zamyka caly blok naglowkow.             */
.apdesc h3 {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text);
  line-height: 1.1; margin: 0 0 2px;
}
/* czerwona kreska zamyka caly blok naglowkow — tylko pod ostatnim z nich */
.apdesc h3:not(:has(+ h3))::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--red); border-radius: 2px; margin: 14px 0 0;
}

/* --- wyrozniony wtret w rodzaju "!! TÜV-MATERIALGUTACHTEN !!" -----------
   TYLKO pogrubienie stojace tuz po naglowku. Bez tego zawezenia plakietke
   dostawaly zwykle pogrubienia w biegu tekstu (np. lista numerow OEM),
   co wygladalo jak wyroznienie czegos, co nim nie jest.               */
.apdesc h3 + strong, .apdesc h3 + b,
.apdesc h4 + strong, .apdesc h4 + b {
  display: inline-block; margin: 16px 0 0; padding: 7px 14px;
  background: #fff1f2; border: 1px solid #f6c9cf; border-radius: 8px;
  font-family: var(--font-head); font-size: 14.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--red-dark);
}

/* --- punkty: dwie kolumny z czerwonym ptaszkiem ------------------------- */
.apdesc ul {
  list-style: none; margin: 20px 0 4px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px;
  /* pionowa linia miedzy kolumnami — jak na makiecie */
  background: linear-gradient(#eceef1, #eceef1) center top / 1px 100% no-repeat;
}
.apdesc ul li {
  position: relative; padding-left: 34px;
  font-size: 14.5px; line-height: 1.5; color: #6b717c;
}
/* 68 opisow ma pusty punkt "<li><b></b></li>" — bez tego zostaje sam ptaszek */
.apdesc ul li:empty,
.apdesc ul li:has(> b:only-child:empty),
.apdesc ul li:has(> strong:only-child:empty) { display: none; }
.apdesc ul li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--red);
}
.apdesc ul li::after {
  content: ""; position: absolute; left: 6px; top: 6.5px;
  width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
/* 93% punktow ma tresc w <b> — to jest tytul punktu */
.apdesc ul li b, .apdesc ul li strong {
  display: block; font-weight: 700; font-size: 14px;
  color: var(--text); letter-spacing: .1px; line-height: 1.4;
}

/* --- "PASST FÜR:" — naglowek + tabela jako jedna karta ------------------ */
.apdesc h4 {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text);
  margin: 30px 0 0;
}
.apdesc table {
  width: 100%; max-width: 640px; margin: 12px 0 4px;
  border-collapse: separate; border-spacing: 0;
  background: #fafbfc; border: 1px solid #eceef1; border-radius: 12px;
  overflow: hidden; font-size: 14px;
}
.apdesc td, .apdesc th {
  padding: 13px 14px; text-align: center; border: 0;
  border-left: 1px solid #e9ebef; color: var(--text); vertical-align: middle;
}
.apdesc td:first-child, .apdesc th:first-child { border-left: 0; }
.apdesc tr + tr td { border-top: 1px solid #e9ebef; }
/* Naglowki kolumn. Wszystkie 1189 tabel maja te sama, stala budowe:
   marka | model | wariant | rocznik — wiec podpisy sa bezpieczne.
   Doklejane stylem, per jezyk strony; tresci opisu nie ruszamy.          */
.apdesc tr:first-child td::before {
  display: block; margin-bottom: 7px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: #8a909b;
}
html[lang="de"] .apdesc tr:first-child td:nth-child(1)::before { content: "Marke"; }
html[lang="de"] .apdesc tr:first-child td:nth-child(2)::before { content: "Modell"; }
html[lang="de"] .apdesc tr:first-child td:nth-child(3)::before { content: "Karosserie"; }
html[lang="de"] .apdesc tr:first-child td:nth-child(4)::before { content: "Baujahr"; }
html[lang="en"] .apdesc tr:first-child td:nth-child(1)::before { content: "Make"; }
html[lang="en"] .apdesc tr:first-child td:nth-child(2)::before { content: "Model"; }
html[lang="en"] .apdesc tr:first-child td:nth-child(3)::before { content: "Body"; }
html[lang="en"] .apdesc tr:first-child td:nth-child(4)::before { content: "Year"; }
html[lang="fr"] .apdesc tr:first-child td:nth-child(1)::before { content: "Marque"; }
html[lang="fr"] .apdesc tr:first-child td:nth-child(2)::before { content: "Modèle"; }
html[lang="fr"] .apdesc tr:first-child td:nth-child(3)::before { content: "Carrosserie"; }
html[lang="fr"] .apdesc tr:first-child td:nth-child(4)::before { content: "Année"; }

/* --- telefon ------------------------------------------------------------ */
@media (max-width: 700px) {
  .apdesc h3 { font-size: 25px; }
  .apdesc ul { grid-template-columns: 1fr; gap: 14px; background: none; }
  .apdesc td, .apdesc th { padding: 11px 8px; font-size: 13px; }
  .apdesc tr:first-child td::before { font-size: 10.5px; letter-spacing: .5px; }
}

/* AP: "Passt für" pod opisem (zdeduplikowane pojazdy) */
/* Plakietka TÜV w opisie — wstawia ja kontroler karty (apTuvBadge), bo haslo
   przychodzi z eBaya w kilkunastu wariantach zapisu i w roznych znacznikach.
   Kolory swiadomie NIE z --blue (granat z logo) — plakietka ma byc informacja,
   a nie drugim akcentem marki obok czerwieni. */
.tuvline { margin: 0 0 18px; }
.tuvbadge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px;
    border: 1px solid #cfe0fb; border-radius: 9px;
    background: #eef4ff; color: #1a5fd0;
    font-family: var(--font-head);
    font-size: 19px; font-weight: 700; letter-spacing: .3px;
    line-height: 1.2;
}
.tuvbadge svg { flex: none; }
@media (max-width: 560px) {
    .tuvbadge { font-size: 16px; padding: 8px 13px; gap: 7px; }
}

.passt { margin-top: 26px; padding-top: 20px; border-top: 1px solid #eceef1; }
.passt__title { font-family: var(--font-head); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text); margin: 0 0 12px; }
.passt__num { color: #9aa0ab; font-weight: 400; font-size: 13px; }
.passt__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid #eceef1; border-radius: 10px; }
.passt__item { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 9px 16px; border-bottom: 1px solid #eef0f3; background: #fff; flex-wrap: wrap; }
.passt__item:nth-child(even) { background: #fafbfc; }
.passt__item:last-child { border-bottom: none; }
.passt__car { font-size: 13.5px; font-weight: 600; color: var(--text); }
.passt__years { font-size: 12.5px; color: #8a909b; text-align: right; margin-left: auto; }

.pdp__fitintro { font-weight: 600; color: var(--text) !important; }
.compat { display: block; margin: 4px 0 8px; padding: 0; list-style: none; border: 1px solid #eceef1; border-radius: 10px; overflow: hidden; }
.compat li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; background: #fff; border-bottom: 1px solid #eef0f3; }
.compat li:nth-child(even) { background: #fafbfc; }
.compat li:last-child { border-bottom: none; }
.compat span { font-size: 14px; font-weight: 600; color: var(--text); }
.compat em { font-style: normal; font-size: 12.5px; color: #8a909b; text-align: right; flex: none; }

/* versand */
.shipgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shipgrid h4 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text); margin-bottom: 10px; }
.shipgrid h4 .ico { color: var(--red); }
.shipgrid p { font-size: 14px; color: #6c727d; line-height: 1.6; margin: 0; }

/* related */
.pdp__related { margin-top: 56px; }
.pdp__related .section-title::after { left: 0; transform: none; }
.related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.related__grid .product-card { width: auto; }

@media (max-width: 900px) {
    .pdp__top { grid-template-columns: 1fr; gap: 28px; }
    .attrs { grid-template-columns: 1fr; }
    .compat { grid-template-columns: 1fr; }
    .shipgrid { grid-template-columns: 1fr; gap: 22px; }
    .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .related__grid { grid-template-columns: 1fr; }
    .buybox__title { font-size: 24px; }
    .buybox__now { font-size: 32px; }
}

@media (max-width: 980px) {
    .catalog__inner { grid-template-columns: 1fr; }
    .filters { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
    .filters__head, .filters__note { grid-column: 1 / -1; }
    .catalog__grid { grid-template-columns: repeat(2, 1fr); }
    .cathero__media { display: none; }
}
@media (max-width: 560px) {
    .filters { grid-template-columns: 1fr; }
    .catalog__grid { grid-template-columns: 1fr; }
    .cathero__text h1 { font-size: 28px; }
}

/* =========================================================
   RESPONSYWNOŚĆ (wstępna — dopracujemy przy pełnym RWD)
   ========================================================= */
@media (max-width: 860px) {
    .finder__bar, .finder__bar[data-pane="vehicle"] { grid-template-columns: 1fr 1fr; }
    .finder__submit { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .brands__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__top { grid-template-columns: 1fr 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; max-width: none; }
    .cta-banner__inner { flex-direction: column; align-items: flex-start; }
    .cta-banner__contact { width: 100%; max-width: 380px; }
}
@media (max-width: 1120px) {
    .contact__inner { grid-template-columns: 1fr 1fr; }
    .contact__figure { display: none; }
}
@media (max-width: 860px) {
    .contact__inner { grid-template-columns: 1fr; gap: 34px; }
    .contact__deco { display: none; }
}
@media (max-width: 560px) {
    .contact__row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .cta-banner__text h2 { font-size: 34px; }
}
@media (max-width: 560px) {
    .brands__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .finder__makes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .finder__bar, .finder__bar[data-pane="vehicle"] { grid-template-columns: 1fr; }
    .finder__makes { grid-template-columns: repeat(2, 1fr); }
    .section-title { font-size: 27px; }
}
@media (max-width: 1200px) {
    /* 07.08: 992–1200 px to najciasniejszy zakres z widocznym menu (nizej menu znika).
       Zeby naglowek nie wyszedl poza ekran po powiekszeniu wyszukiwarki i flag: ciasniejsze
       menu, mniejszy odstep blokow i o krok mniejsze flagi. Policzone — minimum ~990 px. */
    .header__inner { gap: 16px; }
    .nav__list { gap: 10px; }
    .nav__list a { font-size: 13.5px; letter-spacing: 0; }
    /* flagi w tym zakresie tez schodza o krok — regula jest przy sekcji .langsw nizej,
       bo tamten blok jest w pliku PO tym media query i inaczej by je przebil */
    .hero__finder { display: none; }
    .hero__title { font-size: 52px; }
}
@media (max-width: 992px) {
    .topbar__list { gap: 8px 18px; font-size: 11.5px; flex-wrap: wrap; }   /* AP: zawijanie zamiast rozpychania strony na mobile */
    .topbar__inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
    /* AP: numsearch (Teilenummer bekannt?) — min-width 300/320px rozpychal uklad na telefonie; pozwalamy sie zwezic */
    .numsearch__label, .numsearch__form { min-width: 0; }
    /* AP: input + button jedno pod drugim (w rzedzie input nie chcial sie zwezic i rozpychal strone) */
    .numsearch__form { flex-basis: 100%; max-width: none; flex-direction: column; }
    .numsearch__form input, .numsearch__form .btn { width: 100%; min-width: 0; }
    .nav { display: none; } /* mobilne menu dodamy osobno */
    .usp__inner { flex-wrap: wrap; height: auto; padding-top: 18px; padding-bottom: 18px; gap: 16px; }
    .usp__item, .usp__item + .usp__item { flex: 1 1 45%; border-left: none; padding-left: 0; }
}
/* 07.08: pasek szukania chowamy juz od 1100 px, nie od 992. Ponizej ~1150 px zostawalo na niego
   kilkadziesiat pikseli (sam czerwony przycisk) — po powiekszeniu wyszukiwarki i flag lepiej
   pokazac lupe, ktora rozwija pelnej szerokosci pasek pod naglowkiem. Menu tekstowe zostaje
   widoczne do 992 px. */
@media (max-width: 1100px) {
    .header__search { display: none; }                       /* desktop searchbox off */
    /* AP: mobile — klik w lupe rozwija pasek szukania pod naglowkiem */
    .header.is-search-open .header__search {
        display: flex; position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; padding: 12px 16px; gap: 8px;
        box-shadow: 0 10px 24px rgba(0,0,0,.16); border-top: 1px solid #eceef1; z-index: 60;
    }
    .header.is-search-open .header__search input {
        flex: 1; width: 100%; min-width: 0; color: #111; background: #fff;
        border: 1.5px solid #d4d7dd; border-radius: 8px; padding: 12px 14px; font-size: 15px;
    }
    .header.is-search-open .header__search button {
        flex: none; background: var(--red); border: none; border-radius: 8px;
        padding: 0 16px; color: #fff; cursor: pointer;
    }
    .header.is-search-open .header__search button .ico { color: #fff; }
    .header__actions .header__ico-search { display: flex; }  /* lupa wraca na mobile */
}

/* =========================================================
   Podstrona: Fahrzeugtyp wählen (fahrzeugtyp.html)
   Krok 1 (typ nadwozia) przed Marke → Modell → Motor
   ========================================================= */

/* Schritt-Anzeige 1 → 2 → 3 */
.vsteps {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    padding: 18px 0 26px;
    counter-reset: none;
}
.vsteps__item {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-head);
    font-size: 17px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase;
    color: #9aa0ac;
    position: relative;
}
.vsteps__item + .vsteps__item::before {
    content: "›";
    margin-right: 18px;
    color: #c6cad2; font-size: 20px; font-weight: 500;
}
.vsteps__num {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: #e6e8ec; color: #6b7180;
}
.vsteps__item.is-active { color: var(--text); }
.vsteps__item.is-active .vsteps__num { background: var(--red); color: #fff; }

/* Siatka typów — kafle w poziomym formacie (media 16:10 zamiast portretu) */
.typewahl { padding: 38px 0 56px; }
.typewahl__grid { margin-top: 0; }
.type-card .vehicle-card__media { aspect-ratio: 16 / 10; }
.type-card .vehicle-card__ghost { width: 58%; }
.type-card.is-active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(216,0,27,.18), 0 16px 34px rgba(20,22,27,.10); }
.type-card--skip .ico--lg { width: 34px; height: 34px; }

.typewahl__note {
    display: flex; align-items: center; gap: 8px;
    margin-top: 22px;
    font-size: 13px; color: #7a808b;
}
.typewahl__note .ico--sm { flex: none; }

/* Schritt 2: kafle marek dla wybranego typu — wycentrowane */
.markewahl { padding: 10px 0 64px; }
.markewahl__grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px;
    max-width: 960px; margin: 0 auto;
}
.markewahl__grid .make-tile {
    flex: 0 0 168px; max-width: none; height: 96px; gap: 8px;
}
.markewahl__grid .make-tile img { max-height: 28px; }
.make-tile__count {
    font-size: 11px; color: #9aa0ac; letter-spacing: .2px;
}
.markewahl .typewahl__note { justify-content: center; }

@media (max-width: 720px) {
    .vsteps__item { font-size: 14.5px; }
    .vsteps__item + .vsteps__item::before { margin-right: 10px; }
    .markewahl__grid .make-tile { flex-basis: 132px; height: 88px; }
}

/* Linki w kartach produktu (zdjęcie + tytuł → produkt.html) */
.product-card__media a {
    display: block;
    width: 100%; height: 100%;
    position: relative;
}
/* Swap zdjecia na hover (drugie zdjecie z galerii) — wyzsza specyficznosc niz .product-card__media img */
.product-card__media img.product-card__media-hover {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    object-fit: contain;
    background: #fff;               /* pelna biala podkladka — zakrywa glowne zdjecie */
    opacity: 0; transition: opacity .25s ease;
    z-index: 2;                     /* nad glownym zdjeciem */
}
.product-card:hover img.product-card__media-hover { opacity: 1; }
.product-card__title a:hover { color: var(--red); }


/* =========================================================
   Poprawki od klienta (2026-07)
   ========================================================= */

/* --- Finder wyrazniejszy: wieksze naglowki i pola --- */
.finder--b { padding: 64px 0; border-top: 3px solid var(--red); }
.finder-b__head .ico { width: 40px; height: 40px; }
.finder-b__head h2 { font-size: 42px; letter-spacing: 1px; }
.finder-b__head p { font-size: 17px; color: #d6dae2; }
.finder--b .finder__bar {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.finder--b .ss__btn { padding: 16px 16px; }
.finder--b .ss__value { font-size: 16px; }
.finder--b .finder__submit { font-size: 16px; }
.finder-b__makes-label { font-size: 14px; }

/* --- Pasek wyszukiwania po numerze czesci (dla warsztatow) --- */
.numsearch { background: var(--gray); border-bottom: 1px solid #e6e8ec; }
.numsearch__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
    padding-top: 20px; padding-bottom: 20px;
}
.numsearch__label { display: flex; align-items: center; gap: 14px; min-width: 300px; flex: 1; }
.numsearch__label .ico { width: 34px; height: 34px; color: var(--red); flex: none; }
.numsearch__label strong {
    display: block; font-family: var(--font-head);
    font-size: 19px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.numsearch__label span { font-size: 13.5px; color: #6b7180; }
.numsearch__form { display: flex; gap: 8px; flex: 1; min-width: 320px; max-width: 560px; }
.numsearch__form input {
    flex: 1;
    font-family: var(--font-body); font-size: 14.5px;
    padding: 12px 14px;
    border: 1.5px solid #d4d7dd; border-radius: 6px; background: #fff;
}
.numsearch__form input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.12); }
.numsearch__form .btn { white-space: nowrap; }

/* Pasek VIN pod finderem (06.08) — ten sam uklad co szukanie po numerze czesci, ale bialy,
   zeby dwa sasiadujace paski nie zlaly sie w jeden szary blok. Pole VIN wersalikami,
   bo numer nadwozia zapisuje sie duzymi literami. */
.numsearch--vin { background: #fff; }
.numsearch--vin .numsearch__form input { text-transform: uppercase; letter-spacing: .5px; }
.numsearch--vin .numsearch__form input::placeholder { text-transform: none; letter-spacing: 0; }

/* --- Opinie eBay nad stopka --- */
.ebayrev { background: #fff; border-top: 1px solid #ececec; padding: 44px 0; }
.ebayrev__inner { display: flex; gap: 34px; align-items: stretch; flex-wrap: wrap; }
.ebayrev__badge {
    flex: 0 0 240px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    padding: 20px 26px;
    background: var(--gray); border-radius: 12px; border: 1px solid #e6e8ec;
}
.ebayrev__score {
    font-family: var(--font-head); font-size: 52px; font-weight: 700; line-height: 1;
    color: var(--red);
}
.ebayrev__stars { color: #f5a623; font-size: 18px; letter-spacing: 2px; }
.ebayrev__lbl { font-size: 14px; color: #4a4f59; line-height: 1.35; }
.ebayrev__link {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--blue);
}
.ebayrev__link:hover { color: var(--red); }
.ebayrev__list { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-width: 300px; }
.ebayrev__item {
    background: var(--gray); border: 1px solid #e6e8ec; border-radius: 12px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.ebayrev__istars { color: #f5a623; font-size: 14px; letter-spacing: 2px; }
.ebayrev__item p { font-size: 13.5px; line-height: 1.55; color: #2a2e37; }
.ebayrev__item footer { margin-top: auto; font-size: 12px; color: #9aa0ac; }
@media (max-width: 900px) { .ebayrev__list { grid-template-columns: 1fr; } }

/* --- Czat (widget wstrzykiwany przez chat.js) --- */
.apchat { position: fixed; right: 22px; bottom: 22px; z-index: 999; font-family: var(--font-body); }
.apchat__toggle {
    display: flex; align-items: center; gap: 9px;
    background: var(--red); color: #fff;
    font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    padding: 13px 20px; border-radius: 999px;
    box-shadow: 0 10px 30px rgba(216,0,27,.35);
    transition: transform .12s, box-shadow .12s;
}
.apchat__toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(216,0,27,.45); }
.apchat__toggle .ico { width: 20px; height: 20px; }
.apchat__panel {
    position: absolute; right: 0; bottom: 64px;
    width: 330px; max-width: calc(100vw - 44px);
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(12,13,16,.35);
    border: 1px solid #e6e8ec;
}
.apchat__head {
    display: flex; align-items: center; gap: 10px;
    background: var(--dark); color: #fff;
    padding: 13px 16px;
    font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .4px;
}
.apchat__dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; flex: none; }
.apchat__status { font-family: var(--font-body); font-size: 11px; color: #9aa0ac; font-weight: 400; margin-left: auto; }
.apchat__close { color: #cfd3db; font-size: 20px; line-height: 1; padding: 2px 4px; }
.apchat__close:hover { color: #fff; }
.apchat__msgs { padding: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; background: var(--gray); }
.apchat__msg {
    max-width: 85%; padding: 9px 12px; border-radius: 12px;
    font-size: 13px; line-height: 1.45;
}
.apchat__msg--bot { background: #fff; border: 1px solid #e6e8ec; border-bottom-left-radius: 4px; align-self: flex-start; }
.apchat__msg--user { background: var(--red); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.apchat__form { display: flex; border-top: 1px solid #e6e8ec; background: #fff; }
.apchat__form input { flex: 1; border: none; padding: 12px 14px; font-family: var(--font-body); font-size: 13.5px; }
.apchat__form input:focus { outline: none; }
.apchat__form button { color: var(--red); padding: 0 16px; display: flex; align-items: center; }
.apchat__form button .ico { width: 20px; height: 20px; }

/* --- Podstrona TUV & Original Supplier --- */
.tuv-usps { padding: 40px 0 10px; }
.tuv-usps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tuv-usp {
    background: var(--gray); border: 1px solid #e6e8ec; border-radius: 12px;
    padding: 26px 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.tuv-usp .ico { width: 34px; height: 34px; color: var(--red); }
.tuv-usp h3 { font-family: var(--font-head); font-size: 21px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.tuv-usp p { font-size: 14px; color: #4a4f59; line-height: 1.55; }
@media (max-width: 860px) { .tuv-usps__grid { grid-template-columns: 1fr; } }

.tuvsec { padding: 44px 0 70px; }
.tuvsec__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 992px) { .tuvsec__inner { grid-template-columns: 1fr; } }
.tuvsec__text h2 { font-family: var(--font-head); font-size: 32px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px; }
.tuvsec__text p { font-size: 15px; line-height: 1.65; color: #2a2e37; margin-bottom: 14px; }
.tuvsec__text ul { display: grid; gap: 10px; margin: 18px 0 24px; }
.tuvsec__text li { display: flex; gap: 10px; font-size: 14.5px; color: #2a2e37; }
.tuvsec__text li .ico { width: 19px; height: 19px; color: var(--red); flex: none; margin-top: 1px; }

/* Muster-Gutachten — obrazek oryginału klienta (TÜV AUSTRIA) */
.tuvdoc { margin: 0; }
.tuvdoc__label {
    max-width: 420px;
    font-family: var(--font-head); font-weight: 700; font-size: 22px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--text);
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 2px solid var(--red);
}
.tuvdoc img {
    width: 100%; max-width: 420px; height: auto; display: block;
    border: 1px solid #d9dce2; border-radius: 6px;
    box-shadow: 0 24px 60px rgba(12,13,16,.16);
}
.tuvdoc figcaption {
    max-width: 420px; margin-top: 12px;
    font-size: 11.5px; line-height: 1.5; color: #9aa0ac;
}

/* =========================================================
   Animacje wejscia (styl ScrollMagic, bez biblioteki)
   ========================================================= */

/* Hero: teksty pojawiaja sie i wjezdzaja z lewej przy wczytaniu */
@keyframes apSlideInL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes apSlideInR { from { opacity: 0; transform: translateX(34px); }  to { opacity: 1; transform: none; } }
.hero__eyebrow, .hero__title, .hero__sub, .hero__rating {
    opacity: 0;
    animation: apSlideInL .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero__eyebrow { animation-delay: .02s; }
.hero__title   { animation-delay: .12s; }
.hero__sub     { animation-delay: .26s; }
.hero__rating  { animation-delay: .40s; }
.hero__finder  { opacity: 0; animation: apSlideInR .7s cubic-bezier(.22,.61,.36,1) .45s forwards; }

/* Sekcje: odslanianie przy scrollu (klasy nadaje ui.js) */
.rv        { opacity: 0; transform: translateY(26px);  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
.rv--left  { transform: translateX(-30px); }
.rv--right { transform: translateX(30px); }
.rv.is-in  { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__title, .hero__sub, .hero__rating, .hero__finder { animation: none; opacity: 1; }
    .rv { opacity: 1; transform: none; transition: none; }
}

/* Hero: wejscie tla przy wczytaniu — start rozmyty/przyblizony, wyostrza sie.
   Bez fill:forwards, zeby po animacji inline-transform parallaxu (ui.js) dzialal. */
/* brightness(1.6) w KAZDYM kroku — filter to jedna wlasciwosc, wiec keyframe musi
   powtorzyc brightness z reguly bazowej .hero__bg; inaczej podczas animacji zdjecie
   nie jest rozjasnione, a po jej zakonczeniu brightness przeskakuje. Animujemy tylko blur+saturate. */
@keyframes apHeroBg {
    from { opacity: .3; transform: scale(1.14); filter: brightness(1) blur(16px) saturate(.75); }
    to   { opacity: 1;  transform: scale(1.06); filter: brightness(1) blur(0)    saturate(1); }
}
.hero__bg { animation: apHeroBg 1.5s cubic-bezier(.22,.61,.36,1) backwards; }
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }

/* TYMCZASOWE zdjecia dla nowych modeli (grafiki po starych modelach — decyzja
   klienta: liczy sie efekt wizualny; do podmiany gdy beda docelowe fotki):
   p6 = pickup (F-150) -> Silverado 1500, p4 = Charger -> Grand Cherokee, p2 = Camaro -> Tahoe */
.vehicle-card[data-model="silverado1500"]  .vehicle-card__media { background-image: url("../img/makes/p6.jpg"); }
.vehicle-card[data-model="grand-cherokee"] .vehicle-card__media { background-image: url("../img/makes/p4.jpg"); }
.vehicle-card[data-model="tahoe"]          .vehicle-card__media { background-image: url("../img/makes/p2.jpg"); }

/* Opinie eBay jako rotator (8 opinii, widoczne 3, autoprzewijanie w ui.js) */
.ebayrev__slider { position: relative; flex: 1; min-width: 300px; }
.ebayrev__list {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ebayrev__list::-webkit-scrollbar { display: none; }
.ebayrev__item {
    flex: 0 0 calc((100% - 28px) / 3);
    scroll-snap-align: start;
}
@media (max-width: 1100px) { .ebayrev__item { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 700px)  { .ebayrev__item { flex-basis: 100%; } }

/* Klikalna opinia -> link do produktu */
.ebayrev__list > .ebayrev__link {
    flex: 0 0 calc((100% - 28px) / 3);
    scroll-snap-align: start;
    text-decoration: none; display: flex;
}
.ebayrev__link .ebayrev__item { flex: 1 1 auto; width: 100%; margin: 0; }
.ebayrev__item--clickable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ebayrev__link:hover .ebayrev__item--clickable { border-color: var(--red); box-shadow: 0 6px 16px rgba(216,0,27,.12); transform: translateY(-2px); }
.ebayrev__prod { display: block; margin-top: 6px; color: var(--red); font-weight: 700; font-size: 12px; }
@media (max-width: 1100px) { .ebayrev__list > .ebayrev__link { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 700px)  { .ebayrev__list > .ebayrev__link { flex-basis: 100%; } }

/* Zdjecia typow pojazdow na fahrzeugtyp.html (assets/img/cit/) — zamiast sylwetek */
.type-card .vehicle-card__ghost,
.type-card .vehicle-card__tag { display: none; }
.type-card[data-type="Pickup"]              .vehicle-card__media { background-image: url("../img/cit/pickup.jpg"); }
.type-card[data-type="SUV / Geländewagen"]  .vehicle-card__media { background-image: url("../img/cit/suv.jpg"); }
.type-card[data-type="Van / Bus"]           .vehicle-card__media { background-image: url("../img/cit/bus.jpg"); }
.type-card[data-type="Minivan"]             .vehicle-card__media { background-image: url("../img/cit/van.jpg"); }
.type-card[data-type="Limousine"]           .vehicle-card__media { background-image: url("../img/cit/limusine.jpg"); }
.type-card[data-type="Coupé"]               .vehicle-card__media { background-image: url("../img/cit/coupe.jpg"); }
.type-card[data-type="Cabrio"]              .vehicle-card__media { background-image: url("../img/cit/cabrio.jpg"); }

/* =========================================================
   Navigationsbaum (fahrzeugtyp.html) — drzewko 5 kolumn
   ========================================================= */
.baumsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 20px 0 4px; }
.baumsteps__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: 10px; align-items: center; }
.baumsteps__no { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
    background: var(--red); color: #fff; font-family: var(--font-head); }
.baumsteps__item b { font-family: var(--font-head); font-size: 15px; letter-spacing: .4px; text-transform: uppercase; color: #fff; }
.baumsteps__item small { grid-column: 2; font-size: 11.5px; color: rgba(255,255,255,.6); }
.baumsteps__sep { color: #c6cad2; display: flex; }
.baumsteps__sep svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 820px) { .baumsteps__item small, .baumsteps__sep { display: none; } .baumsteps { gap: 8px 14px; } }

.baumsec { padding: 26px 0 56px; }
.baum { display: flex; align-items: stretch; gap: 8px; padding: 4px 0 14px; }
/* kolumny rozciągają się na pełną szerokość kontenera */
.baum-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: #fff;
    border: 1px solid #e3e5ea; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(20,22,27,.06); }
.baum-col__hd { display: flex; align-items: center; gap: 9px; background: var(--dark); color: #fff;
    padding: 13px 15px; font-family: var(--font-head); font-size: 15px; font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase; }
.baum-col__no { width: 22px; height: 22px; border-radius: 50%; background: var(--red);
    display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.baum-col__bd { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.baum-col__crumb { font-size: 11px; color: #9aa0ac; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baum-col__crumb b { color: var(--text); }
.baum-col__sub { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: #4a4f59;
    text-transform: uppercase; letter-spacing: .3px; margin: 2px 0 6px; }
.baum-col__hint { font-size: 11px; color: #9aa0ac; line-height: 1.4; margin-top: 8px;
    border-top: 1px dashed #e3e5ea; padding-top: 8px; }

.baum-list { display: flex; flex-direction: column; }
.baum-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; cursor: pointer;
    border-radius: 7px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.baum-row + .baum-row { border-top: 1px solid #f0f1f4; }
.baum-row:hover { background: #f7f8fa; }
.baum-row.is-active { background: rgba(216,0,27,.06); border-color: rgba(216,0,27,.35); }
.baum-row.is-active .baum-row__name { color: var(--red); font-weight: 600; }
.baum-row.is-active .baum-row__chev { color: var(--red); }
.baum-row__logo { width: 34px; height: 22px; object-fit: contain; flex: none; }
.baum-row__thumb { width: 30px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; }
.baum-row__thumb svg { width: 26px; height: 26px; stroke: #9aa0ac; fill: none; stroke-width: 1.5; }
/* kategorie: miniaturka zdjęcia (placeholdery z głównej) */
.baum-row__ic { width: 46px; height: 34px; flex: none; border-radius: 6px; overflow: hidden; background: #f3f4f6; }
.baum-row__ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.baum-row__name { flex: 1; font-size: 13.5px; color: var(--text); line-height: 1.25; }
.baum-row__cnt { font-family: var(--font-head); font-size: 13px; color: #9aa0ac; font-variant-numeric: tabular-nums; }
.baum-row__chev { width: 15px; height: 15px; stroke: #c6cad2; fill: none; stroke-width: 2; flex: none; }

.baum-years { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.baum-year { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
    background: #fff; border: 1.5px solid #e3e5ea; border-radius: 8px; cursor: pointer; transition: .12s; }
.baum-year:hover { border-color: #c6cad2; }
.baum-year.is-active { border-color: var(--red); background: rgba(216,0,27,.05); }
.baum-year b { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); }
.baum-year.is-active b { color: var(--red); }
.baum-year small { font-size: 10.5px; color: #9aa0ac; }

/* Kolumna 5 — wyniki */
.baum-res__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.15;
    color: var(--text); margin: 4px 0 6px; }
.baum-res__bar { font-size: 12px; color: #7a808b; margin-bottom: 10px; }
.baum-res__bar strong { color: var(--text); }
.baum-prods { display: flex; flex-direction: column; gap: 8px; }
.baum-prod { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid #eceef1; border-radius: 8px; }
.baum-prod__ph { width: 46px; height: 40px; flex: none; border-radius: 6px; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center; }
.baum-prod__ph svg { width: 24px; height: 24px; stroke: #9aa0ac; fill: none; stroke-width: 1.5; }
.baum-prod__t { flex: 1; min-width: 0; }
.baum-prod__t b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baum-prod__t small { font-size: 11px; color: #9aa0ac; }
.baum-prod__pr { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--red); white-space: nowrap; }
.baum-res__more { width: 100%; justify-content: center; margin-top: 12px; }

.baum-arrow { flex: none; display: flex; align-items: center; color: var(--red); }
.baum-arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Tablet: 2 kolumny obok siebie (strzałki chowamy) */
@media (max-width: 1024px) {
    .baum { flex-wrap: wrap; }
    .baum-col { flex: 1 1 calc(50% - 4px); }
    .baum-arrow { display: none; }
}
/* Telefon: kolumny jedna pod drugą */
@media (max-width: 620px) {
    .baum-col { flex-basis: 100%; }
}

.baum__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 12.5px; color: #7a808b; line-height: 1.5; }
.baum__note .ico--sm { flex: none; margin-top: 2px; }

/* ==== Karty "Beliebte Modelle": lista silnikow jako OVERLAY na karcie (hover/tap) ==== */
/* Stylistyka: biale tlo, czarne + czerwone linki. Scroll: SimpleBar. */
.vehicle-card--photo { position: relative; cursor: pointer; }
.vehicle-card--photo.is-open { z-index: 20; }
/* Overlay wypelnia cala karte (nie dropdown pod spodem) — przykrywa zdjecie na hover */
.vehicle-card__engines {
    position: absolute; inset: 0; z-index: 6;
    display: none; flex-direction: column;
    background: #fff;
    padding: 12px;
}
.vehicle-card--photo:hover > .vehicle-card__engines,
.vehicle-card--photo.is-open > .vehicle-card__engines { display: flex; }
.vehicle-card__eng-head {
    flex: none; color: #0c0d10;
    font-family: var(--font-head); font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 4px 8px; margin-bottom: 6px;
    border-bottom: 2px solid #e63946;
}
.vehicle-card__eng-scroll { flex: 1 1 auto; min-height: 0; }
.vehicle-card__eng-list { list-style: none; margin: 0; padding: 0; }
.vehicle-card__eng {
    display: block; padding: 8px 10px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: #0c0d10; cursor: pointer;
    transition: background .12s, color .12s;
}
.vehicle-card__eng:hover { background: #fff0f1; color: #e63946; }
.vehicle-card__eng--empty { color: #9aa0ac; font-weight: 500; cursor: default; }
.vehicle-card__eng--empty:hover { background: transparent; color: #9aa0ac; }
/* SimpleBar — czerwony, cienki suwak */
.vehicle-card__eng-scroll .simplebar-scrollbar::before { background: #e63946; opacity: 0; }
.vehicle-card__eng-scroll .simplebar-scrollbar.simplebar-visible::before { opacity: .55; }
.vehicle-card__eng-scroll .simplebar-track.simplebar-vertical { width: 9px; }

/* ==== "Beliebte Modelle": jeden wiersz (max 6), nie zawija ==== */
.models__grid--row { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1200px) { .models__grid--row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .models__grid--row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .models__grid--row { grid-template-columns: repeat(2, 1fr); } }

/* Mobile: mniejszy padding kontenera + mniejsze logo, zeby header (logo+ikony) sie miescil */
@media (max-width: 560px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .brand__logo { max-width: 148px; }
    .header__actions { gap: 14px; }
}

/* Kompatibilität — wichtige Hinweise zur Passform (odzyskane notatki eBay) */
.compat-notes{background:#fff8ec;border:1px solid #f5d8a0;border-left:4px solid #f59e0b;border-radius:10px;padding:14px 16px;margin:0 0 18px}
.compat-notes__head{display:flex;align-items:center;gap:9px;font-weight:700;color:#9a5b00;font-size:14.5px;margin-bottom:8px}
.compat-notes__ico{width:20px;height:20px;flex:none;fill:none;stroke:#f59e0b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.compat-notes__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.compat-notes__list li{position:relative;padding-left:18px;font-size:14px;color:#5b4a2a;line-height:1.45}
.compat-notes__list li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;border-radius:50%;background:#f59e0b}

/* Wishlist — stan "polubione" (serduszko wypelnione czerwone) */
.product-card__wish.is-wished svg, .buybox__wish.is-wished svg { fill: #0b1a2b; stroke: #0b1a2b; }
.product-card__wish.is-wished, .buybox__wish.is-wished { color: #0b1a2b; }

/* Wishlist badge w headerze (jak koszyk) */
.header__wish { position: relative; }
.header__wish-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--red); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* ===== Pasek serwisowy ADMINA (numer oferty eBay). Widoczny WYLACZNIE gdy w tej samej
   przegladarce jest zalogowana sesja panelu — klient sklepu tego nie zobaczy. ===== */
.apadm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:6px 10px;
  background:#fff8e1;border:1px dashed #e0a800;border-radius:6px;font-size:12px;line-height:1.4;color:#5c4600}
.apadm--card{margin:4px 0 0;padding:3px 6px;font-size:11px;gap:6px}
.apadm__tag{background:#e0a800;color:#fff;font-weight:700;letter-spacing:.04em;
  padding:1px 6px;border-radius:3px;font-size:10px}
.apadm__id{font-family:ui-monospace,Menlo,Consolas,monospace}
.apadm__lnk{font-family:ui-monospace,Menlo,Consolas,monospace;color:#0654ba;text-decoration:underline}
.apadm__lnk:hover{color:#c00}
/* przycisk "Sprawdz na eBay" (faza dev — widoczny dla wszystkich, przelacznik ap_ebay_link_mode) */
.apadm__btn{display:inline-flex;align-items:center;gap:6px;background:#0654ba;color:#fff;
  font-weight:700;font-size:13px;padding:7px 12px;border-radius:6px;text-decoration:none;white-space:nowrap}
.apadm__btn:hover{background:#053e8c;color:#fff}
.apadm__btn svg{flex:none}

/* =========================================================
   HOME 27.07 — hero MINIMALISTYCZNE + kafelki USP (makieta klienta)
   Cel klienta: hero ma byc niskie, zeby wyszukiwarka byla widoczna OD RAZU.
   Proporcje zmierzone z MOBILE.png (zrzut 1320px @3x = 440pt):
   karta hero ~232pt wysokosci, karta findera ~195pt — obie mieszcza sie na ekranie.
   ========================================================= */

/* --- desktop: nizsze hero, ciasniejszy naglowek findera --- */
.hero__inner { min-height: 430px; padding-top: 44px; padding-bottom: 44px; }
.finder--b { padding: 44px 0 54px; }

/* --- kafelki USP: 5 -> 3 kolumny --- */
@media (max-width: 1100px) {
    .usp__card { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
    /* przy zawijaniu kreski pionowe rozjezdzaja sie miedzy rzedami — tylko w rzedzie */
    .usp__item + .usp__item { border-left: none; }
    .usp__item:not(:nth-child(3n+1)) { border-left: 1px solid #e4e6ea; }
}

/* --- MOBILE: hero jako niska, zaokraglona karta; Camaro po PRAWEJ obok tekstu --- */
@media (max-width: 992px) {
    /* czarny margines dookola + zaokraglenie = "karta" jak na makiecie
       (padding na sekcji zamiast margin, zeby tlo zostalo ciemne az do findera) */
    .hero { padding: 14px; }
    .hero__bg, .hero__overlay { inset: 14px; border-radius: 16px; }
    /* MOBILE: zdjecie z samym Camaro (mobile.webp od klienta) — na desktopie zostaje 3-autowe */
    .hero__bg { background-image: url("../img/hero/camaro.webp"); background-position: right center; transform: none; animation: none; }
    /* gradient POZIOMY — tekst czytelny po lewej, auto odslonete po prawej */
    .hero__overlay {
        background: linear-gradient(90deg, rgba(6,7,9,.96) 0%, rgba(6,7,9,.93) 40%, rgba(6,7,9,.6) 66%, rgba(6,7,9,.10) 100%);
    }
    .hero__inner { min-height: 232px; padding: 24px 20px; }
    .hero__content { max-width: 60%; }
    .hero__eyebrow { font-size: 10.5px; letter-spacing: 1.6px; margin-bottom: 10px; }
    .hero__title { font-size: 30px; margin-bottom: 10px; }
    .hero__sub { font-size: 13px; line-height: 1.45; margin-bottom: 12px; max-width: none; }
    .hero__rating { font-size: 12px; gap: 7px; }
    .hero__stars { font-size: 14px; }
    .hero__rating strong { font-size: 13px; }

    /* finder tuz pod hero — ciasniejszy naglowek, zeby pola byly na pierwszym ekranie */
    .finder--b { padding: 22px 0 34px; }
    .finder-b__head { margin-bottom: 16px; }
    .finder-b__badge { font-size: 11px; margin-bottom: 10px; padding: 4px 12px; }
    .finder-b__head h2 { font-size: 28px; }
    .finder-b__head p { font-size: 14px; }
}

@media (max-width: 700px) {
    .usp__card { grid-template-columns: repeat(2, 1fr); }
    .usp__item:not(:nth-child(3n+1)) { border-left: none; }
    .usp__item:not(:nth-child(2n+1)) { border-left: 1px solid #e4e6ea; }
    .hero__title { font-size: 27px; }
    .hero__sub { font-size: 12.5px; }
    .finder-b__head h2 { font-size: 25px; }
}

/* najwezsze telefony — auto zwezone, ale nadal widoczne (klient chce Camaro w kadrze) */
@media (max-width: 460px) {
    .hero__content { max-width: 66%; }
    .hero__inner { min-height: 214px; padding: 20px 16px; }
    .hero__title { font-size: 25px; }
    .usp__card { grid-template-columns: 1fr; }
    .usp__item:not(:nth-child(2n+1)) { border-left: none; }
    .usp__item + .usp__item { border-top: 1px solid #e4e6ea; padding-top: 20px; }
    .finder__all { display: block; margin: 8px 0 0; }
}

/* Podtytul hero: druga czesc (claim importera) tylko na desktopie —
   na telefonie hero ma byc minimalne, zeby finder byl od razu widoczny. */
@media (max-width: 992px) {
    .hero__sub-more { display: none; }
}

/* Link do ocen sprzedawcy na eBay — pod sekcja opinii (27.07) */
.ebayrev__more { margin-top: 18px; text-align: center; }
.ebayrev__more a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px;
    border: 1px solid #d5d8de; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--text);
    background: #fff;
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ebayrev__more a:hover { border-color: var(--red); color: var(--red); box-shadow: 0 6px 18px rgba(16,20,28,.08); }
.ebayrev__more .ico { width: 17px; height: 17px; }

/* Przelacznik jezyka (28.07) — flagi w pasku ikon naglowka, bez dropdownu */
.langsw { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; }
.langsw__btn {
    /* 06.08 klient: flagi byly za male (16x11 px) — powiekszone o ~40%
       07.08 klient: jeszcze wieksze. Zrodlo to juz NIE stockowy PNG 16x11 (rozmazywal sie przy
       kazdym powiekszeniu), tylko wlasne SVG 3:2 w ap/img/flags — ostre w kazdym rozmiarze. */
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 32px; padding: 0;
    border: 1px solid transparent; border-radius: 4px;
    background: none; cursor: pointer; opacity: .55;
    transition: opacity .15s ease, border-color .15s ease;
    /* przelacznik to teraz <a> (linki do wersji jezykowych), nie <button> */
    text-decoration: none;
}
.langsw__btn img {
    display: block; width: 36px; height: 24px; border-radius: 2px;
    /* delikatna ramka odcina krawedz flagi od ciemnego paska (outline, nie inset box-shadow —
       ten na <img> chowa sie pod obrazkiem) */
    outline: 1px solid rgba(255,255,255,.30); outline-offset: -1px;
}
.langsw__btn:hover { opacity: 1; }
.langsw__btn.is-active { opacity: 1; border-color: var(--red); }
/* 992–1200 px: naglowek z menu ma najmniej miejsca — flagi o krok mniejsze (patrz media 1200 wyzej) */
@media (max-width: 1200px) {
    .langsw__btn { width: 36px; height: 28px; }
    .langsw__btn img { width: 30px; height: 20px; }
}
@media (max-width: 575px) {
    .langsw { gap: 3px; margin-right: 3px; }
    .langsw__btn { width: 34px; height: 26px; }
    .langsw__btn img { width: 28px; height: 19px; }
}

/* znacznik przy opinii przetlumaczonej maszynowo — jak "Zobacz tlumaczenie" na Facebooku */
.ebayrev__tr { opacity: .6; font-size: .9em; font-style: italic; }

/* ============================================================================
   AP 01.09.2026 — PRZYKLEJONY PASEK KOSZYKA (zgloszenie klienta, pkt 5)
   Wchodzi dopiero gdy w koszyku cos jest (atrybut hidden zdejmuje cart.js).
   TYLKO mobile/tablet — na desktopie koszyk z kwota widac w naglowku, a pasek
   na dole zaslanialby tresc. Odsuniety o safe-area, zeby na iPhonie nie chowal
   sie pod paskiem gestow.
   ========================================================================== */
.cartbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--dark); color: var(--white);
    text-decoration: none; box-shadow: 0 -6px 24px rgba(0,0,0,.28);
    border-top: 2px solid var(--red);
}
.cartbar__ico { position: relative; flex: 0 0 auto; display: flex; }
.cartbar__ico .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cartbar__badge {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff;
    font: 700 11px/18px var(--font-body); text-align: center;
}
.cartbar__txt { flex: 1 1 auto; font: 600 14px/1.2 var(--font-body); }
.cartbar__txt b { display: block; font: 800 17px/1.2 var(--font-head); letter-spacing: .3px; }
.cartbar__cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px; border-radius: 6px; background: var(--red);
    font: 800 13px/1 var(--font-head); letter-spacing: .6px; text-transform: uppercase;
}
.cartbar__cta .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cartbar[hidden] { display: none; }
/* 02.09.2026 klient: pasek ma byc TEZ na desktopie — wczesniej tylko mobile. */
/* pasek zaslania stopke/przyciski — oddech na dole strony, gdy jest widoczny */
body.has-cartbar { padding-bottom: 76px; }

/* ============================================================================
   AP 01.09.2026 — MEGA MENU KATEGORII (zgloszenie klienta, pkt 2)
   Kolumna = dzial (naglowek), pod nim jego podkategorie. Wczesniej byla jedna
   plaska lista 34 kategorii alfabetycznie, gdzie dzialy staly wymieszane z dziecmi.
   Nic nie jest ucinane — grid zawija sie sam, wiec dopisanie kategorii w imporcie
   niczego nie psuje i zaden LIMIT nie musi wracac.
   ========================================================================== */
.nav__mega {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 18px; width: max-content; max-width: min(96vw, 1180px);
    padding: 18px 20px; list-style: none;
}
.nav__mega-col { break-inside: avoid; min-width: 0; }
.nav__mega-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 8px; margin-bottom: 4px;
    border-bottom: 2px solid var(--red);
    font-family: var(--font-head); font-size: 15px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase; color: var(--navy);
}
.nav__mega-head:hover { background: transparent; color: var(--red); }
.nav__mega-list { list-style: none; margin: 0; padding: 0; }
.nav__mega-list a {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 8px; border-radius: 6px; font-size: 13.5px;
}
.nav__mega-list a:hover .nav__cnt { color: var(--red); }
/* dzial bez podkategorii (np. Getriebeol) — sam naglowek nie moze wygladac na sierote */
.nav__mega-col:not(:has(.nav__mega-list)) .nav__mega-head { border-bottom-color: #e6e8ec; }
@media (max-width: 640px) {
    .nav__mega { grid-template-columns: 1fr; width: auto; max-width: 94vw; padding: 12px; }
}

/* ============================================================================
   AP 01.09.2026 — PLAKIETKA DOPASOWANIA DO POJAZDU (zgloszenie klienta, pkt 4)
   Zielona, spokojna — ma potwierdzac, a nie krzyczec jak plakietka promocji.
   Brak plakietki NIE znaczy "nie pasuje", tylko "nie wiemy", dlatego nie ma
   wariantu czerwonego ani przekreslenia.
   ========================================================================== */
.product-card__fits {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; padding: 7px 10px;
    border: 1px solid #b9e3c2; border-radius: 7px;
    background: #f1faf3; color: #1c7a3c;
    font: 600 12.5px/1.25 var(--font-body);
}
.product-card__fits svg { flex: 0 0 auto; }

/* ============================================================================
   AP 01.09.2026 — BLOK WHATSAPP NA KARCIE PRODUKTU (zgloszenie klienta, pkt 3)
   Domyslnie tylko mobile (--mobile); przelacznik "takze na komputerze" w panelu
   zdejmuje te klase. Zielen WhatsAppa uzyta oszczednie — to pomoc, nie CTA
   konkurujace z "In den Warenkorb".
   ========================================================================== */
.wabox {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid #d6e7d9; border-radius: 10px;
    background: #f6fbf7; color: var(--navy); text-decoration: none;
}
.wabox:hover { border-color: #25d366; background: #f0f9f2; }
.wabox__ico { flex: 0 0 auto; display: flex; color: #25d366; }
.wabox__txt { flex: 1 1 auto; font: 500 13px/1.35 var(--font-body); color: #5b6472; }
.wabox__txt b { display: block; font-weight: 700; font-size: 14.5px; color: var(--navy); }
.wabox__arrow { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: #9aa1ab; stroke-width: 2.4; }
.wabox--mobile { display: none; }
@media (max-width: 991px) { .wabox--mobile { display: flex; } }

/* ============================================================================
   AP 01.09.2026 — WYSZUKIWARKA 3w1 (kafelki wyboru; przebudowa 02.09 na zyczenie klienta)
   Pierwsza wersja: trzy napisy z czerwonym podkresleniem aktywnego. Klient: "aby te
   wybory byly bardziej widoczne, zeby klient wiedzial od razu o co chodzi".
   Teraz kazdy wybor to KAFELEK z ikona, nazwa i podpisem mowiacym wprost, co sie wpisuje.
   ========================================================================== */
.finder__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; border: 0; }
.finder__tab {
    display: flex; align-items: center; gap: 13px; text-align: left;
    padding: 14px 16px; cursor: pointer;
    background: rgba(255,255,255,.04); color: #c9cdd6;
    border: 1.5px solid rgba(255,255,255,.14); border-radius: 12px;
    transition: border-color .18s, background .18s, color .18s;
}
.finder__tab:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; }
.finder__tab-ico {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255,255,255,.07); color: #fff;
}
.finder__tab-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.finder__tab-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.finder__tab-txt strong {
    font: 800 14px/1.1 var(--font-head); letter-spacing: .9px; text-transform: uppercase; color: #fff;
}
.finder__tab-txt small { font: 500 12px/1.3 var(--font-body); color: #9aa0ac; }
/* aktywny wybor ma byc widoczny z drugiego konca pokoju */
.finder__tab.is-active { background: rgba(216,0,27,.14); border-color: var(--red); color: #fff; }
.finder__tab.is-active .finder__tab-ico { background: var(--red); color: #fff; }
.finder__tab.is-active .finder__tab-txt small { color: #e7b9bf; }

/* panele numeru czesci i VIN — ten sam uklad co dawne sekcje numsearch */
.finder__pane { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.finder__pane.is-hidden,
.finder__bar.is-hidden,
.finder-b__makes.is-hidden,
.finder__note.is-hidden { display: none; }

@media (max-width: 860px) {
    .finder__tabs { grid-template-columns: 1fr; gap: 10px; }
    .finder__tab { padding: 12px 14px; }
}


/* --- AP 02.09.2026 (klient): mega menu ROWNO Z KONTENEREM STRONY -------------
   Wczesniej panel wisial na pozycji <li> "Kategorien" i rozjezdzal sie w prawo,
   poza siatke strony. Teraz blokiem odniesienia jest .header__inner (kontener),
   wiec panel zaczyna sie tam, gdzie logo, i konczy tam, gdzie ikony koszyka.
   var(--pad) = wewnetrzny odstep .container — bez tego panel byl o 28 px za szeroki
   z obu stron i nie trzymal linii z trescia. */
.header__inner { position: relative; }
.nav__has-sub  { position: static; }
.nav__mega {
    left: var(--pad); right: var(--pad);
    width: auto; max-width: none;
}
/* zapas (plaska lista, gdy cats_tree puste) — tez od lewej krawedzi tresci */
.nav__sub--wide { left: var(--pad); }

/* --- AP 02.09.2026 (klient): mega menu chowalo sie w drodze do niego -------
   Panel wisial 6 px pod naglowkiem, a pozycja <li> "Kategorien" jest duzo nizsza
   niz caly pasek (logo ma 72 px), wiec miedzy dolna krawedzia linku a panelem
   bylo ~20 px martwej strefy — kursor ja przekraczal, :hover gasl i menu znikalo.
   Dwie rzeczy naraz:
   1) <li> rozciagniete na CALA wysokosc paska, wiec obszar najechania dotyka panelu,
   2) panel przyklejony do dolu paska (top:100%), zero szczeliny.
   Panel jest potomkiem <li> w DOM, wiec najechanie na niego dalej trzyma :hover. */
/* .nav MUSI byc kontenerem flex — inaczej rozciagniecie na pelna wysokosc paska
   wypycha liste na GORE naglowka (tak sie stalo 02.09).
   CALOSC w @media desktop — bez tego `display:flex` nadpisywalo
   `@media (max-width:992px){.nav{display:none}}` (moja regula jest DALEJ w pliku,
   a przy rownej wagi wygrywa pozniejsza) i pelne menu wychodzilo na telefonie. */
@media (min-width: 993px) {
    .nav { align-self: stretch; display: flex; }
    .nav__list { align-items: stretch; }
    .nav__list > li { display: flex; align-items: center; }
}
.nav__mega { top: 100%; }
/* pasek na desktopie: tresc wysrodkowana w kontenerze, nie rozciagnieta na caly ekran */
@media (min-width: 992px) {
    .cartbar { justify-content: center; gap: 20px; padding: 14px var(--pad); }
    .cartbar__txt { flex: 0 0 auto; }
}

/* pigulka "Cookie-Einstellungen" (consent.js, lewy dolny rog) kolidowala z paskiem
   koszyka — gdy pasek jest na ekranie, podnosimy ja ponad niego. */
body.has-cartbar #apcOpen { bottom: 84px; }

/* ============================================================================
   AP 02.09.2026 — MENU MOBILNE (hamburger + panel pelnoekranowy)
   Do tej pory ponizej 992 px `.nav` bylo po prostu `display:none` z komentarzem
   "mobilne menu dodamy osobno" — kategorie byly na telefonie nieosiagalne.
   Panel przewija sie SAM (overflow-y), a strona pod nim jest zablokowana —
   klient zglosil wprost, ze "scrolluje sie strona" zamiast menu.
   ========================================================================== */
.header__burger {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto; margin-right: -6px;
    background: transparent; border: 0; color: #fff; cursor: pointer;
}
.header__burger .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav__close {
    display: none; position: absolute; top: 14px; right: 14px;
    width: 42px; height: 42px; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #fff; cursor: pointer;
}
.nav__close .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

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

    /* panel na caly ekran, wlasny scroll */
    .nav {
        display: none;
        position: fixed; inset: 0; z-index: 80;
        margin: 0; padding: 64px 18px 32px;
        background: var(--dark);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    body.is-nav-open .nav { display: block; }
    body.is-nav-open .nav__close { display: inline-flex; }
    /* blokada tla: position:fixed zamiast samego overflow — iOS ignoruje overflow na body */
    body.is-nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__list > li { display: block; border-bottom: 1px solid var(--line); }
    .nav__list a { padding: 15px 4px; font-size: 17px; }

    /* rozwijane menu kategorii: na telefonie ZWINIETE (klient 02.09: "czemu od razu
       otworzone?"), rozwija je dopiero tapniecie w "Kategorien" — mobilenav.js.
       Zdejmujemy hover i pozycjonowanie, bo panel jest w normalnym przeplywie. */
    .nav__sub, .nav__mega {
        position: static; opacity: 1; visibility: visible; transform: none;
        left: auto; right: auto; width: auto; max-width: none; max-height: none;
        background: transparent; border: 0; box-shadow: none;
        padding: 0 0 10px; margin: 0;
    }
    .nav__mega { display: block; }
    .nav__has-sub > .nav__sub { display: none; }
    .nav__has-sub.is-open > .nav__sub { display: block; }
    .nav__has-sub > a .ico { margin-left: auto; transition: transform .18s; }
    .nav__has-sub.is-open > a .ico { transform: rotate(180deg); }
    .nav__mega-col { margin: 0 0 14px; }
    /* .nav__sub a (0,1,1) jest BARDZIEJ szczegolowe niz .nav__mega-head (0,1,0),
       wiec naglowki dzialow dziedziczyly granat z jasnego rozwijanego menu i na czarnym
       panelu wygladaly na niebiesko. Stad dodatkowy .nav w selektorze. */
    .nav .nav__mega-head { color: #fff; font-size: 14px; padding: 8px 4px; margin-bottom: 2px; }
    .nav .nav__mega-head:hover { background: transparent; color: #fff; }
    .nav .nav__mega-head .nav__cnt { color: #7d838f; }
    .nav__mega-list a { color: #c9cdd6; font-size: 15px; padding: 9px 4px 9px 14px; }
    .nav__mega-list a:hover { background: var(--dark-2); color: #fff; }
    .nav__sub--wide li { width: auto; }
    .nav__cnt { color: #7d838f; }
}

/* ============================================================================
   AP 02.09.2026 — NAGLOWEK NA TELEFONIE (klient: "koszyk spierdala za ekran",
   "jezyki rozpychaja"). W pasku zostaja tylko cztery rzeczy: hamburger, logo,
   lupa i koszyk. Przelacznik jezyka wedruje do panelu menu (mobilenav.js),
   serduszko chowamy — jest w koncie, a na 360 px kazda ikona to 42 px.
   ========================================================================== */
/* kopia przelacznika w panelu menu (mobilenav.js) — tylko na telefonie */
.nav > .langsw--in-nav { display: none; }

@media (max-width: 992px) {
    .header__inner { gap: 10px; flex-wrap: nowrap; min-width: 0; padding-left: 14px; padding-right: 14px; }
    /* logo NIE moze sie kurczyc — plik ma natywnie 214x81 px, wiec przy height:44px
       robil sie z niego nieczytelny znaczek (klient: "gdzie jest logo"). 54 px to
       maksimum, ktore miesci sie obok hamburgera i ikon na ekranie 360 px. */
    .brand { flex: 0 0 auto; min-width: 0; overflow: visible; }
    .brand__logo { height: 54px; }
    /* ikony mialy 6 px odstepu i wygladaly na sklejone przy samej krawedzi */
    .header__actions { gap: 12px; flex: 0 0 auto; margin-left: auto; padding-right: 2px; }
    .header__actions .ico { width: 23px; height: 23px; }
    /* 15.09.2026 klient: flagi WIDOCZNE w pasku (miedzy logo a lupa), nie tylko w menu.
       Policzone: 3 flagi po 30 px + logo 54 px + trzy ikony mieszcza sie od ~435 px.
       Ponizej 480 px zostaja dwie flagi — jezyki, na ktore mozna przelaczyc (media nizej).
       Logo NIE zmniejszamy (02.09 klient: "gdzie jest logo" przy 44 px). */
    .header__actions .langsw { display: inline-flex; gap: 3px; margin-right: 0; }
    .header__actions .langsw__btn { width: 30px; height: 24px; opacity: .7; }
    .header__actions .langsw__btn img { width: 24px; height: 16px; }
    .header__wish { display: none; }
    /* koszyk zawsze w calosci widoczny */
    .header__cart { flex: 0 0 auto; }

    /* panel musi byc NAD paskiem koszyka (z-index 60) i nad naglowkiem (50) */
    .nav { z-index: 200; }
    body.is-nav-open .cartbar { display: none; }

    /* jezyki w panelu: peine przyciski z flagami, nie ciasne ikonki */
    .nav > .langsw--in-nav {
        display: flex; gap: 10px; margin-top: 22px; padding-top: 18px;
        border-top: 1px solid var(--line);
    }
    /* w pasku flagi mialy 34x26 px — w panelu maja byc PRZYCISKAMI z nazwa jezyka,
       inaczej sa nietrafialne (klient: "nie dzialaja flagi"). Nazwa leci z atrybutu
       title, bo markupu przelacznika nie ruszamy — to ten sam wezel co na desktopie. */
    .langsw--in-nav .langsw__btn {
        display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
        padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
        color: #c9cdd6; font: 600 14px/1 var(--font-body); text-decoration: none;
    }
    .langsw--in-nav .langsw__btn::after { content: attr(title); }
    .langsw--in-nav .langsw__btn img { width: 26px; height: 18px; flex: 0 0 auto; }
    .langsw--in-nav .langsw__btn.is-active { border-color: var(--red); color: #fff; background: var(--dark-2); }
}

/* 15.09.2026 — waskie telefony (360–480 px): trzy flagi + logo 54 px + trzy ikony sie NIE
   mieszcza (policzone: potrzeba ~435 px). W pasku zostaja dwie flagi — jezyki, na ktore
   mozna przelaczyc; aktywny widac po tresci strony, a pelna trojka jest w panelu menu.
   Odstepy ciasniejsze, logo bez zmian. */
@media (max-width: 480px) {
    .header__inner { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .header__burger { width: 34px; }
    .header__actions { gap: 9px; }
    .header__actions .langsw { gap: 2px; }
    .header__actions .langsw__btn { width: 28px; height: 22px; opacity: 1; }
    .header__actions .langsw__btn.is-active { display: none; }
}

/* pigulka zgod (consent.js) ma z-index 2147482000, wiec bez tego wisiala NAD otwartym
   menu. Chowamy ja razem z paskiem koszyka na czas otwartego panelu. */
body.is-nav-open #apcOpen { display: none; }

/* Czat Smartsupp (#smartsupp-widget-container > div, position:fixed bottom:24px right:12px,
   z-index 10000000) SIEDZIAL DOKLADNIE NA przycisku "Zur Kasse" w pasku koszyka — zobaczone
   na zrzucie 02.09, nie w pomiarach. Podnosimy go nad pasek; przy otwartym menu chowamy,
   bo jego z-index bije panel. !important, bo widget ustawia pozycje sam. */
body.has-cartbar #smartsupp-widget-container > div { bottom: 92px !important; }
body.is-nav-open #smartsupp-widget-container { display: none !important; }


/* ============================================================================
   AP 02.09.2026 — BLOG, uklad magazynowy (przebudowa po uwagach klienta).
   Co bylo nie tak w pierwszej wersji: rowne kafle bez hierarchii, okruszki w stylu
   karty produktu wygladajace jak przypadkowe linki nad tytulem, zdjecia gubiace sie
   na bialym tle i brak oddechu przed stopka.
   Teraz: jasne tlo sekcji + biale karty (zdjecie ma sie ODCINAC), pierwszy wpis jako
   duzy WYROZNIONY, reszta w siatce 3, wszystko na miekkich cieniach zamiast obwodek.
   ========================================================================== */
.blog {
    /* Tlo sekcji MUSI byc wyraznie inne niz biel karty, inaczej caly zabieg nie dziala
       — przy #f5f6f8 karty zlewaly sie z tlem i wygladalo to na plaska biala strone. */
    background: #eceef3;
    padding: 64px 0 110px;
}
.blog__top { margin: 0 0 44px; }

/* okruszki: dyskretne, nie linki-krzykacze nad naglowkiem */
.blog__crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 22px;
    font-size: 12.5px; color: #9aa1ab; letter-spacing: .2px; }
.blog__crumbs a { color: #9aa1ab; }
.blog__crumbs a:hover { color: var(--red); }
.blog__crumbs svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .7; }
.blog__crumbs .is-here { color: #5b6472; }

.blog__title { font-family: var(--font-head); font-size: clamp(34px, 4vw, 50px); line-height: 1.02;
    letter-spacing: -.5px; margin: 0 0 12px; }
.blog__title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px;
    background: var(--red); border-radius: 2px; }
.blog__lead { max-width: 640px; color: #5b6472; font-size: 16.5px; line-height: 1.6; margin: 14px 0 0; }

/* ---- wpis wyrozniony -------------------------------------------------------
   Najnowszy artykul dostaje caly pas: duze zdjecie + tekst obok. Bez tego lista
   trzech identycznych kafli nie ma zadnej hierarchii i wyglada jak siatka produktow. */
.blogfeat {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 46px rgba(16, 20, 30, .10);
    margin: 0 0 40px;
}
/* ANI samo min-height, ANI samo aspect-ratio. Przy min-height zdjecie rozlazlo sie
   na 550 px (wysokosc dyktowala kolumna tekstu), a przy aspect-ratio + max-height
   kurczylo sie w SZEROKOSCI i zostawal bialy pas obok. Rozwiazanie: media wypelnia
   komorke siatki (height:100%), a rozsadna wysokosc wiersza pilnuje min/max-height. */
.blogfeat__media { position: relative; display: block; height: 100%; min-height: 320px; max-height: 430px; background: #10131a; }
.blogfeat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogfeat__tag {
    position: absolute; left: 20px; top: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    background: rgba(216, 0, 27, .95); color: #fff; border-radius: 999px;
    font: 800 11px/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase;
}
.blogfeat__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 44px; }
/* w wyroznionym kaflu link NIE moze byc dopychany do dolu (margin-top:auto z .blogcard__more)
   — kolumna tekstu jest wysoka i robila sie pusta dziura miedzy zajawka a "Weiterlesen". */
.blogfeat__body .blogcard__more { margin-top: 4px; padding-top: 0; }
.blogfeat__date { color: #9aa1ab; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.blogfeat__title { font-family: var(--font-head); font-size: clamp(24px, 2.3vw, 33px); line-height: 1.14; margin: 0; }
.blogfeat__title a { color: var(--navy); }
.blogfeat__title a:hover { color: var(--red); }
.blogfeat__intro { color: #5b6472; font-size: 15.5px; line-height: 1.68; margin: 0; }

/* ---- siatka pozostalych ---------------------------------------------------- */
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.blogcard {
    display: flex; flex-direction: column; background: #fff;
    border: 0; border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(16, 20, 30, .07);
    transition: transform .22s ease, box-shadow .22s ease;
}
.blogcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 20, 30, .13); }
/* ciemne tlo pod zdjeciem: jasne fotki z AI przestaja zlewac sie z karta */
.blogcard__media { display: block; aspect-ratio: 16 / 10; background: #10131a; overflow: hidden; }
.blogcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blogcard:hover .blogcard__media img { transform: scale(1.05); }
.blogcard__body { display: flex; flex-direction: column; flex: 1; gap: 11px; padding: 22px 24px 26px; }
.blogcard__date { display: inline-flex; align-items: center; gap: 7px; color: #9aa1ab;
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.blogcard__date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.blogcard__title { font-family: var(--font-head); font-size: 21px; line-height: 1.22; margin: 0; }
.blogcard__title a { color: var(--navy); }
.blogcard__title a:hover { color: var(--red); }
.blogcard__intro { color: #5b6472; font-size: 14.5px; line-height: 1.62; margin: 0; }
.blogcard__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px;
    color: var(--red); font: 800 12px/1 var(--font-head); letter-spacing: .9px; text-transform: uppercase; }
.blogcard__more .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6;
    transition: transform .2s ease; }
.blogcard:hover .blogcard__more .ico { transform: translateX(4px); }

.blog__pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 46px; color: #5b6472; }

/* ---- ARTYKUL --------------------------------------------------------------- */
.blogpost { padding: 0 0 110px; background: #fff; }
/* naglowek na ciemnym pasie; okladka siedzi W NIM, wiec pas konczy sie dopiero pod zdjeciem */
.blogpost__hero { background: var(--dark); color: #fff; padding: 40px 0 56px; }
.blogpost__hero .blog__crumbs { color: #7d838f; margin-bottom: 26px; }
.blogpost__hero .blog__crumbs a { color: #9aa1ab; }
.blogpost__hero .blog__crumbs .is-here { color: #c9cdd6; }
.blogpost__inner { max-width: 880px; margin: 0 auto; }
.blogpost__date { display: inline-flex; align-items: center; gap: 8px; color: #9aa1ab;
    font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.blogpost__date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.blogpost__hero h1 { font-family: var(--font-head); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06;
    letter-spacing: -.5px; margin: 14px 0 16px; color: #fff; }
.blogpost__lead { font-size: 18px; line-height: 1.62; color: #c9cdd6; margin: 0; max-width: 760px; }

/* okladka: pelna szerokosc kolumny naglowka, na ciemnym tle, bez wystawania poza pas */
.blogpost__cover { margin: 30px 0 0; }
.blogpost__cover img { width: 100%; display: block; border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }

.blogpost__body { max-width: 780px; margin: 0 auto; padding: 54px var(--pad) 0;
    font-size: 17px; line-height: 1.78; color: #23293a; }
.blogpost__body > *:first-child { margin-top: 0; }
.blogpost__body h2 { font-family: var(--font-head); font-size: 28px; line-height: 1.18; margin: 42px 0 14px; letter-spacing: -.2px; }
.blogpost__body h3 { font-family: var(--font-head); font-size: 21px; margin: 30px 0 10px; }
.blogpost__body p { margin: 0 0 18px; }
.blogpost__body ul, .blogpost__body ol { margin: 0 0 20px; padding-left: 22px; }
.blogpost__body li { margin: 0 0 9px; }
.blogpost__body li::marker { color: var(--red); }
.blogpost__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.blogpost__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0 20px; }
.blogpost__body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.blogpost__body th, .blogpost__body td { border: 1px solid #e6e8ec; padding: 10px 13px; text-align: left; font-size: 15px; }
.blogpost__body th { background: #f5f6f8; font-weight: 700; }
/* pytania w FAQ: wyrozniony blok, zeby nie zlewaly sie z reszta */
.blogpost__body h2:last-of-type ~ h3 { padding-left: 16px; border-left: 3px solid var(--red); }

/* stopka artykulu: SZERSZA niz kolumna tekstu (780 px), zeby zmiescily sie trzy kafle */
.blogpost__foot { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.blogpost__more { margin-top: 76px; padding-top: 56px; border-top: 1px solid #e6e8ec; }
.blogpost__more h2 { font-family: var(--font-head); font-size: 26px; margin: 0 0 26px; }
.blogpost__back { margin-top: 46px; }

@media (max-width: 1000px) {
    .blogfeat { grid-template-columns: 1fr; }
    .blogfeat__media { min-height: 0; aspect-ratio: 16 / 9; }
    .blogfeat__body { padding: 30px 28px 34px; }
    .blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .blog { padding: 40px 0 72px; }
    .blog__grid { grid-template-columns: 1fr; }
    .blogpost__hero { padding: 26px 0 100px; }
    .blogpost__cover { margin-top: -80px; }
    .blogpost__body { padding-top: 34px; font-size: 16.5px; }
    .blogpost { padding-bottom: 72px; }
}

/* .btn--outline jest zaprojektowany na CIEMNE tlo (bialy tekst, biala obwodka) —
   na jasnej stronie bloga przycisk "Alle Beitraege" i strzalki stronicowania byly
   NIEWIDOCZNE: bialy tekst na bialym tle. Wariant na jasne tlo. */
.blogpost__back .btn--outline,
.blog__pager .btn--outline {
    color: var(--navy); border-color: #cfd4dc; background: #fff;
}
.blogpost__back .btn--outline:hover,
.blog__pager .btn--outline:hover {
    background: var(--navy); color: #fff; border-color: var(--navy);
}


/* ============================================================================
   AP 02.09.2026 — SEKCJA BLOGA NA GLOWNEJ (przebudowa)
   Poprzednia wersja szla pod domyslny wzorzec sekcji sklepu: wysrodkowany tytul
   i trzy biale kafle — czyli wygladala jak kolejna lista produktow.
   Teraz: CIEMNY pas (jak navbar i marki), naglowek dosuniety do lewej z przyciskiem
   po prawej, i uklad ASYMETRYCZNY — najnowszy wpis duzy, dwa mniejsze obok.
   Tekst lezy NA zdjeciu pod gradientem, wiec kazde zdjecie z AI staje sie tlem,
   a nie osobnym obrazkiem doklejonym nad bialym prostokatem.
   ========================================================================== */
.hb { padding: 86px 0 96px; background: var(--black); color: #fff; }

.hb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 34px; }
.hb__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font: 800 11.5px/1 var(--font-head); letter-spacing: 1.6px; text-transform: uppercase; color: var(--red);
}
.hb__kicker::before { content: ""; width: 26px; height: 2px; background: var(--red); }
.hb__title { font-family: var(--font-head); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04;
    letter-spacing: -.4px; margin: 12px 0 0; color: #fff; text-transform: uppercase; }
.hb__all {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    color: #fff; font: 800 12px/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s;
}
.hb__all:hover { background: var(--red); border-color: var(--red); color: #fff; }
.hb__all .ico { fill: none; stroke: currentColor; stroke-width: 2.6; }

/* 1 duzy + 2 male; wysokosc wiersza stala, zeby kolumny konczyly sie rowno */
.hb__grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-auto-rows: 232px; gap: 20px; }

.hb__card {
    position: relative; display: block; overflow: hidden; border-radius: 16px;
    background: #14161b; color: #fff; isolation: isolate;
}
.hb__card--big { grid-row: span 2; }
.hb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease; }
.hb__card:hover .hb__img { transform: scale(1.06); }
/* gradient: bez niego bialy tekst gubi sie na jasnych zdjeciach z AI */
.hb__shade { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,10,14,0) 30%, rgba(8,10,14,.72) 68%, rgba(8,10,14,.94) 100%); }
.hb__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
    gap: 8px; padding: 22px 24px 24px; }
.hb__date { display: inline-flex; align-items: center; gap: 7px; color: #c9cdd6;
    font: 700 11.5px/1 var(--font-body); letter-spacing: .7px; }
.hb__date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hb__name { font-family: var(--font-head); font-size: 19px; line-height: 1.2; color: #fff; }
.hb__card--big .hb__name { font-size: 27px; }
.hb__lead { color: #c9cdd6; font-size: 14.5px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
    color: var(--red); font: 800 11.5px/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase; }
.hb__more .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8;
    transition: transform .2s ease; }
.hb__card:hover .hb__more .ico { transform: translateX(4px); }
/* male kafle: zajawka tylko w duzym, zeby nie robic sciany tekstu */
.hb__card:not(.hb__card--big) .hb__lead { display: none; }

@media (max-width: 900px) {
    .hb { padding: 60px 0 66px; }
    .hb__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .hb__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .hb__card--big { grid-row: span 1; }
    .hb__card--big .hb__name { font-size: 22px; }
}

/* Panele „Teilenummer" i „VIN" przeniesiono 01.09 z jasnych sekcji numsearch na CIEMNY
   pas findera, ale ich typografia zostala jasna: `.numsearch__label strong` dziedziczyl
   ciemny --text, a `span` mial #6b7180. Na czarnym tle byly praktycznie niewidoczne —
   po klknieciu w zakladke klient widzial pusty pas. Przemalowanie tylko w tym kontekscie,
   zeby nie ruszac stylu tych blokow, gdyby wrocily gdzie indziej. */
.finder__pane .numsearch__label strong { color: #fff; }
.finder__pane .numsearch__label span   { color: #9aa0ac; }
.finder__pane .numsearch__label .ico   { color: var(--red); }
.finder__pane .numsearch__form input {
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); color: #fff;
}
.finder__pane .numsearch__form input::placeholder { color: #7d838f; }
.finder__pane .numsearch__form input:focus { border-color: var(--red); background: rgba(255,255,255,.09); }

/* ============================================================================
   AP 29.09.2026 — MAKIETY KLIENTA: jasna wyszukiwarka 3w1, kafle Beliebte Modelle,
   buybox karty produktu. Blok na KONCU pliku celowo: nadpisuje ciemne warstwy
   findera z 07.2026 / 01.09 / 02.09 bez ruszania ich (latwy powrot = usuniecie bloku).
   Kopia sprzed zmian: ~/backups/american-parts/wizual_20260929/
   ========================================================================== */

/* ---------- 1. WYSZUKIWARKA 3w1 — jasny modul ---------- */
.finder--b {
    background: linear-gradient(180deg, #eef0f3 0%, #f7f8fa 55%, #fff 100%);
    color: var(--text); border-top: 0;
}
.finder-b__head h2 { color: var(--text); }
.finder-b__head p { color: #5d6470; }
.finder-b__badge { color: var(--red); background: #fff; border-color: rgba(216,0,27,.35); }

.finder-b__panel {
    max-width: 1180px; margin: 0 auto;
    background: #fff;
    border: 1px solid #e1e4e9; border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 50px rgba(16,20,28,.09), 0 3px 10px rgba(16,20,28,.04);
    padding: 22px 22px 18px;
}

.finder--b .finder__tabs { margin-bottom: 18px; }
.finder--b .finder__tab {
    background: #f6f7f9; border: 1.5px solid #e3e6eb; border-radius: 12px; color: var(--text);
}
.finder--b .finder__tab:hover { background: #fff; border-color: #c9ced6; color: var(--text); }
.finder--b .finder__tab-ico { background: #fff; color: var(--text); border: 1px solid #e3e6eb; }
.finder--b .finder__tab-txt strong { color: var(--text); }
.finder--b .finder__tab-txt small { color: #6b7280; }
.finder--b .finder__tab.is-active { background: var(--red); border-color: var(--red); box-shadow: 0 8px 20px rgba(216,0,27,.22); }
.finder--b .finder__tab.is-active .finder__tab-ico { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }
.finder--b .finder__tab.is-active .finder__tab-txt strong { color: #fff; }
.finder--b .finder__tab.is-active .finder__tab-txt small { color: #ffdce1; }

.finder--b .finder__bar {
    max-width: none; background: #f6f7f9; border: 1px solid #e6e8ec; box-shadow: none;
}
/* FR "Afficher les pieces compatibles" nie miescil sie w rzedzie pol (wystawal poza panel przy 1280 px) */
.finder--b .finder__submit { white-space: normal; max-width: 220px; line-height: 1.15; text-align: center; height: auto; min-height: 52px; }
@media (max-width: 860px) { .finder--b .finder__submit { max-width: none; } }
.finder--b .ss__btn { background: #fff; border-color: #d8dce2; }
.finder--b .ss__btn:hover { border-color: #b9bfc9; }
.finder--b .ss__btn.is-open { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,0,27,.12); }
.finder--b .ss__value { color: #7a808b; }
.finder--b .ss__value.has-value { color: var(--text); font-weight: 600; }
.finder--b .ss__chev { color: #6b7280; }
.finder--b .ss.is-disabled .ss__btn { background: #fbfbfc; }
.finder--b .ss.is-disabled .ss__value { color: #a4a9b2; }
.finder--b .ss.is-cta .ss__btn { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(216,0,27,.10); }
.finder--b .ss.is-cta .ss__value { color: var(--text); }
.finder--b .finder__field select { background-color: #fff; border-color: #d8dce2; color: var(--text); }
.finder--b .finder__field select:disabled { background-color: #fbfbfc; color: #a4a9b2; }

.finder--b .make-tile { border-color: #e3e6eb; box-shadow: 0 1px 2px rgba(16,20,28,.04); }
.finder-b__makes-label,
.finder--b .finder__note { color: #6b7280; }
.finder__all { color: var(--text); }

.finder__pane .numsearch__label strong { color: var(--text); }
.finder__pane .numsearch__label span   { color: #6b7280; }
.finder__pane .numsearch__form input { background: #fff; border: 1.5px solid #d8dce2; color: var(--text); }
.finder__pane .numsearch__form input::placeholder { color: #9aa0ac; }
.finder__pane .numsearch__form input:focus { background: #fff; border-color: var(--red); }
.finder--b .finder__pane { background: #f6f7f9; border: 1px solid #e6e8ec; border-radius: 14px; padding: 16px 18px; }

/* mobile: 3 zakladki W RZEDZIE (jak na makiecie), sam podpis chowamy */
@media (max-width: 860px) {
    .finder-b__panel { padding: 14px 12px 12px; border-radius: 16px; }
    .finder--b .finder__tabs { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
    .finder--b .finder__tab { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 4px; }
    .finder--b .finder__tab-ico { width: 34px; height: 34px; border-radius: 9px; }
    .finder--b .finder__tab-ico svg { width: 19px; height: 19px; }
    .finder--b .finder__tab-txt { align-items: center; }
    .finder--b .finder__tab-txt strong { font-size: 12.5px; letter-spacing: .5px; }
    .finder--b .finder__tab-txt small { display: none; }
    .finder--b .finder__bar { padding: 8px; }
    .finder--b .finder__pane { padding: 14px 12px; }
    /* min-width 300/320 z dawnych sekcji numsearch rozpychal panel poza karte na telefonie */
    .finder--b .finder__pane .numsearch__label,
    .finder--b .finder__pane .numsearch__form { min-width: 0; flex: 1 1 100%; max-width: none; }
    .finder--b .finder__pane .numsearch__form { flex-direction: column; }
    .finder--b .finder__pane .numsearch__form input, .finder--b .finder__pane .numsearch__form .btn { width: 100%; }
}

/* ---------- 2. BELIEBTE MODELLE — kafle premium ---------- */
.models__grid--pro { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.models__grid--pro .vehicle-card {
    position: relative; border: 0; border-radius: 16px;
    background: #0f1115; box-shadow: 0 10px 28px rgba(16,20,28,.14);
}
.models__grid--pro .vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,20,28,.22); }
.models__grid--pro .vehicle-card__media {
    aspect-ratio: 4 / 3.35; background-position: center 58%;
    transition: transform .35s ease;
}
.models__grid--pro .vehicle-card--photo:hover .vehicle-card__media { transform: scale(1.04); }
/* bez zdjecia (np. Escalade do czasu fotki od klienta): ciemne tlo z duzym logo marki */
.models__grid--pro .vehicle-card--nophoto .vehicle-card__media {
    background: radial-gradient(110% 90% at 70% 30%, #2a303b 0%, #15181e 55%, #0b0c0f 100%);
}
.models__grid--pro .vehicle-card__logo { top: 14px; left: 14px; height: 32px; padding: 6px 10px; z-index: 2; }
.models__grid--pro .vehicle-card__logo img { width: 70px; height: 20px; }
/* desktop: tekst i przycisk NA zdjeciu, gradient od dolu dla czytelnosci */
.models__grid--pro .vehicle-card--photo .vehicle-card__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 70px 18px 18px; gap: 2px;
    background: linear-gradient(180deg, rgba(8,10,14,0) 0%, rgba(8,10,14,.78) 45%, rgba(8,10,14,.95) 100%);
}
.models__grid--pro .vehicle-card__body h3 {
    color: #fff; font-size: 27px; line-height: 1.02; letter-spacing: .6px;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.models__grid--pro .vehicle-card__year { color: #d3d7de; font-size: 13.5px; font-weight: 500; }
.vehicle-card__btn {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 12px; border-radius: 9px;
    background: var(--red); color: #fff;
    font: 700 13.5px/1.12 var(--font-head); letter-spacing: .8px; text-transform: uppercase; text-align: center;
    /* FR "Afficher les pieces compatibles" jest ~2x dluzsze od DE — lamiemy w 2 linie zamiast ucinac */
    height: auto; min-height: 42px; padding-top: 6px; padding-bottom: 6px;
    transition: background .15s, gap .15s;
}
.vehicle-card__btn .ico { flex: none; }
.models__grid--pro .vehicle-card:hover .vehicle-card__btn { background: #b80017; gap: 12px; }
/* kafel "Alle Marken & Modelle" — ostatni w siatce */
.models__grid--pro .vehicle-card--all {
    background: linear-gradient(150deg, #1d2330 0%, #0c0d10 100%); padding: 26px 20px; gap: 8px;
}
.models__grid--pro .vehicle-card--all .ico--lg { color: #fff; opacity: .85; }
.models__grid--pro .vehicle-card--all h3 { font-size: 24px; }
.models__grid--pro .vehicle-card--all .vehicle-card__btn { align-self: stretch; margin-top: 10px; }

@media (max-width: 1100px) { .models__grid--pro { grid-template-columns: repeat(3, 1fr); } }
/* mobile: zdjecie u gory, BIALA stopka z nazwa i przyciskiem (makieta mobile) */
@media (max-width: 760px) {
    .models__grid--pro { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .models__grid--pro .vehicle-card { background: #fff; border: 1px solid #e6e8ec; box-shadow: 0 6px 18px rgba(16,20,28,.08); border-radius: 14px; }
    .models__grid--pro .vehicle-card__media { aspect-ratio: 16 / 11; }
    .models__grid--pro .vehicle-card--photo .vehicle-card__body {
        position: static; background: none; padding: 12px 12px 12px; gap: 1px;
    }
    .models__grid--pro .vehicle-card__body h3 { color: var(--text); font-size: 20px; text-shadow: none; }
    .models__grid--pro .vehicle-card--photo .vehicle-card__body { flex: 1 1 auto; }
    .models__grid--pro .vehicle-card__body h3 { min-height: 2.04em; display: flex; align-items: flex-end; }
    .models__grid--pro .vehicle-card__year { color: #6b7280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .models__grid--pro .vehicle-card--photo .vehicle-card__btn { margin-top: auto; }
    .models__grid--pro .vehicle-card--photo .vehicle-card__year { margin-bottom: 10px; }
    .models__grid--pro .vehicle-card__btn { height: auto; min-height: 38px; margin-top: 10px; font-size: 11.5px; letter-spacing: .4px; gap: 5px; padding: 5px 6px; }
    .models__grid--pro .vehicle-card__btn .ico { width: 14px; height: 14px; }
    .models__grid--pro .vehicle-card__logo { top: 8px; left: 8px; height: 26px; padding: 4px 7px; }
    .models__grid--pro .vehicle-card__logo img { width: 52px; height: 16px; }
    .models__grid--pro .vehicle-card--all { border: 0; padding: 18px 12px; background: linear-gradient(150deg, #1d2330 0%, #0c0d10 100%); }
    .models__grid--pro .vehicle-card__cnt { display: none; }
    .models__grid--pro .vehicle-card--all h3 { font-size: 19px; }
}

/* ---------- 3. KARTA PRODUKTU — galeria + buybox 1:1 wg makiet (24B3 desktop, CEC0 telefon) ----------
   Druga wersja 29.09 (pierwsza byla "podobna", klient chcial rozmieszczenie jak na makiecie).
   Kolejnosc modulow w .buybox__card sterowana `order` osobno dla desktopu i telefonu. */

/* wspolne */
.buybox__brand { display: block; font: 700 13px/1 var(--font-body); letter-spacing: .6px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.buybox__titlerow { display: flex; align-items: flex-start; gap: 14px; }
.buybox__titlerow .buybox__title { flex: 1 1 auto; min-width: 0; text-transform: none; letter-spacing: 0; line-height: 1.12; }
.buybox__makelogo { flex: none; width: 64px; height: 44px; object-fit: contain; }
.buybox__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 13px; color: #6b7280; }
.buybox__sub b { color: #4a4f59; font-weight: 600; }
.buybox__stars { color: #d1d5db; font-size: 15px; letter-spacing: 1px; }
.buybox__stars .is-on { color: #f5a623; }
.buybox__stars small { color: #4a4f59; font-size: 13px; letter-spacing: 0; }
.buybox__catline a { color: #4a4f59; }
.buybox__card { display: flex; flex-direction: column; }
.buybox__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.buybox__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.buybox__now { font-size: 40px; }
.buybox__vat { margin-top: 6px; font-size: 13px; color: #6b7280; }
.buybox__avail { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 4px 0 0; flex: none; }
.buybox__stock { font-size: 15px; }
.buybox__stock .dot { width: 10px; height: 10px; }
.buybox__stock--out { color: #b91c1c; }
.buybox__stock--out .dot { background: #b91c1c; }
.buybox__ship { font-size: 12.5px; color: #6b7280; padding-left: 17px; }
.buybox__free { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px; border-radius: 10px; font-size: 13px; color: #6b7280; font-weight: 400; background: none; border: 0; }
.buybox__free-ico { width: 30px; height: 30px; color: var(--text); flex: none; }
.buybox__free-txt strong { display: block; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 1px; }
.buybox__buy { display: flex; align-items: center; gap: 10px; margin: 0; }
.buybox__qlabel { font-size: 15px; color: var(--text); }
.qty { border: 1.5px solid #d8dce2; border-radius: 8px; }
.qty button { width: 44px; height: 50px; }
.qty input { width: 46px; height: 50px; }
.buybox__cart { flex: 1 1 auto; gap: 12px; height: 54px; font-size: 18px; letter-spacing: .6px; min-width: 0; }
.buybox__cart .ico { width: 22px; height: 22px; }
.buybox .wabox { margin: 0; background: #f4f5f7; border-color: #e8eaee; }
.buybox__trust { display: flex; flex-direction: row; gap: 0; margin: 0; padding: 0; border: 0; list-style: none; }
.buybox__trust li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px; font-size: 12px; line-height: 1.3; color: #6b7280; }
.buybox__trust li b { display: block; color: var(--text); font-weight: 700; font-size: 12.5px; }
.buybox__trust li + li { border-left: 1px solid #e6e8ec; }
.buybox__trust .ico { width: 26px; height: 26px; color: var(--text); flex: none; stroke-width: 1.6; }
.buybox__pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 14px; background: #f8f9fa; border: 1px solid #eceef1; border-radius: 10px; }
.buybox__pay span { font-size: 12.5px; color: #6b7280; margin-right: 6px; }
.buybox__pay img { height: 26px; width: auto; border-radius: 4px; }
.pdpbar { display: none; }

/* galeria: strzalki + licznik */
.gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); color: var(--text); box-shadow: 0 4px 14px rgba(16,20,28,.18);
}
.gallery__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__count { position: absolute; right: 12px; bottom: 12px; z-index: 4; padding: 5px 11px; border-radius: 8px; background: rgba(16,20,28,.72); color: #fff; font: 700 14px/1 var(--font-body); }

/* ===== DESKTOP (makieta 24B3): miniatury w pionie po lewej, buybox w ramce ===== */
@media (min-width: 992px) {
    .pdp__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
    .gallery { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
    .gallery__thumbs { order: -1; display: flex; flex-direction: column; gap: 12px; margin: 0; max-height: 620px; overflow-y: auto; scrollbar-width: thin; }
    .gallery__thumbs { overflow-x: hidden; scrollbar-width: none; }
    .gallery__thumbs::-webkit-scrollbar { display: none; }
    .gallery__thumb { flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .buybox__trust li small { display: none; }
    .buybox__trust li { gap: 8px; padding: 0 10px; }
    .gallery__nav, .gallery__count { display: none; }
    .buybox { background: #fff; border: 1.5px solid #d9dde3; border-radius: 16px; box-shadow: 0 18px 44px rgba(16,20,28,.08); padding: 24px 24px 20px; }
    .buybox__makelogo, .buybox__catline { display: none; }
    .buybox__title { font-size: 30px; }
    .buybox__sub { justify-content: space-between; }
    .buybox__sku { margin-left: auto; }
    .buybox__card { gap: 16px; margin-top: 18px; }
    .buybox__head  { order: 1; }
    .buybox__free  { order: 2; background: #f4f5f7; }
    .buybox__free-txt strong { color: #15803d; }
    .buybox__buy   { order: 3; display: grid; grid-template-columns: auto auto 1fr auto; row-gap: 14px; column-gap: 14px; }
    .buybox__buy .buybox__wish { grid-column: 4; width: 50px; height: 50px; }
    .buybox__buy .buybox__cart { grid-column: 1 / -1; }
    .buybox .wabox { order: 4; }
    .buybox__trust { order: 5; padding-top: 16px; border-top: 1px solid #eceef1; }
    .buybox__trust li:first-child { padding-left: 0; }
    .buybox__trust .t-pay { order: 2; } .buybox__trust .t-ret { order: 1; } .buybox__trust .t-ship { order: 3; } .buybox__trust .t-help { order: 4; }
    .buybox__pay   { order: 6; }
}

/* ===== TELEFON / TABLET (makieta CEC0) ===== */
@media (max-width: 991px) {
    .pdp__top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .gallery__main { aspect-ratio: 4 / 3; padding: 12px; border-radius: 12px; }
    .gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
    .gallery__thumbs::-webkit-scrollbar { display: none; }
    .gallery__thumb { flex: 0 0 calc((100% - 32px) / 5); padding: 4px; border-radius: 8px; }
    .buybox { border: 0; box-shadow: none; padding: 0; background: none; border-radius: 0; }
    .buybox__brand { display: none; }
    .buybox__title { font-size: 24px; }
    .buybox__sub { margin-top: 8px; gap: 2px 0; flex-wrap: nowrap; font-size: 12.5px; }
    .buybox__sub > span { flex: none; white-space: nowrap; }
    .buybox__sub > .buybox__catline { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .buybox__sub > span + span::before { content: "|"; margin: 0 10px; color: #c4c8cf; }
    .buybox__stars + span::before { content: none !important; }
    .buybox__card { margin-top: 16px; background: #fff; border: 1.5px solid #d4d8de; border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 8px 22px rgba(16,20,28,.06); }
    .buybox__head  { order: 1; padding-bottom: 16px; }
    .buybox__head { gap: 12px; }
    .buybox__pricecol { flex: 1 1 auto; min-width: 0; }
    .buybox__avail { flex: 0 0 auto; max-width: 122px; padding-left: 14px; border-left: 1px solid #e6e8ec; }
    .buybox__ship { padding-left: 0; }
    .buybox__now { font-size: 34px; }
    .buybox__old { font-size: 14px; }
    .buybox__save { display: none; } /* -X% jest juz na zdjeciu */
    .buybox__vat { font-size: 12px; }
    .buybox__trust li small { display: block; font-size: 11px; }
    .buybox__trust li b { font-size: 12px; }
    .buybox__trust .ico { width: 22px; height: 22px; }
    .buybox__free  { order: 2; padding: 16px 0; border-top: 1px solid #e6e8ec; border-radius: 0; }
    .buybox__buy   { order: 3; }
    .buybox__qlabel, .buybox__buy .buybox__wish { display: none; }
    .buybox__pay   { order: 4; margin-top: 14px; padding: 4px 0 14px; background: none; border: 0; border-radius: 0; justify-content: space-between; flex-wrap: nowrap; gap: 0; }
    .buybox__pay span { display: none; }
    .buybox__pay img { height: 24px; min-width: 0; flex: 0 1 auto; max-width: 15%; object-fit: contain; }
    .buybox__trust { order: 5; padding-top: 14px; border-top: 1px solid #e6e8ec; }
    .buybox__trust .t-ship { display: none; }
    .buybox__trust .t-pay { order: 1; } .buybox__trust .t-ret { order: 2; } .buybox__trust .t-help { order: 3; }
    .buybox__trust li { padding: 0 8px; gap: 8px; }
    .buybox__trust li > span { min-width: 0; }
    .buybox__trust li:first-child { padding-left: 0; }
    .buybox__trust li + li { border-left: 0; }
    .buybox .wabox { order: 6; margin-top: 14px; }

    /* przyklejony pasek: cena + "In den Warenkorb" — zastepuje pasek koszyka na karcie produktu */
    .pdpbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #e6e8ec; box-shadow: 0 -8px 24px rgba(16,20,28,.12);
    }
    .pdpbar__price { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .pdpbar__price b { font: 700 24px/1.05 var(--font-head); color: var(--red); }
    .pdpbar__price small { font-size: 11.5px; line-height: 1.3; color: #6b7280; }
    .pdpbar__cart { flex: 0 0 auto; height: 50px; gap: 10px; padding: 0 18px; font-size: 16px; }
    .pdpbar__cart .ico { width: 20px; height: 20px; }
    body:has(.pdpbar) .cartbar { display: none !important; }
    body:has(.pdpbar) { padding-bottom: 80px; }
    body:has(.pdpbar) #apcOpen { bottom: 86px; }
    body:has(.pdpbar) #smartsupp-widget-container > div { bottom: 92px !important; }
}
@media (max-width: 400px) {
    .buybox__now { font-size: 32px; }
    /* 3 kolumny na ~310 px: ikona NAD tekstem, inaczej "Rückgaberecht" wjezdza na sasiada */
    .buybox__trust li { flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 0 4px; }
    .buybox__trust li:first-child { padding-left: 4px; }
    .buybox__trust li b { font-size: 11.5px; }
    .buybox__trust li small { font-size: 10.5px; }
    .qty button { width: 38px; }
    .qty input { width: 38px; }
    .buybox__cart { font-size: 15px; gap: 8px; padding: 0 10px; }
    .pdpbar__cart { padding: 0 12px; font-size: 14.5px; }
}

/* ---------- 29.09.2026 (klient, 2. prosba): panel 3w1 NACHODZI na dol hero ----------
   Ujemny margines panelu + tyle samo dolnego zapasu w hero, zeby nie przykryc
   tekstu i ocen. Naglowek findera przeniesiony do srodka panelu (home.twig). */
.finder--b { padding-top: 0; background: linear-gradient(180deg, #eef0f3 0%, #f7f8fa 180px, #fff 100%); }
.finder-b__panel { position: relative; z-index: 3; margin-top: -56px; padding-top: 26px; }
.hero__inner { padding-bottom: 96px; }
.finder-b__panel .finder-b__head { margin-bottom: 20px; }
.finder-b__panel .finder-b__badge { margin-bottom: 8px; }
.finder-b__panel .finder-b__head h2 { font-size: 34px; }
.finder-b__panel .finder-b__head p { font-size: 15px; }
@media (max-width: 992px) {
    .finder--b { padding-top: 0; }
    .hero { padding-bottom: 28px; }
    .finder-b__panel { margin-top: -28px; padding-top: 16px; }
    .hero__inner { padding-bottom: 24px; }
    .finder-b__panel .finder-b__head { margin-bottom: 14px; }
    .finder-b__panel .finder-b__head h2 { font-size: 24px; }
    .finder-b__panel .finder-b__head p { font-size: 13px; }
}

/* ============================================================================
   AP 30.09.2026 (klient, screen 30092026084743.png) — TYLKO DESKTOP:
   menu kategorii przeniesione do DRUGIEGO rzedu pod paskiem z logo, wyszukiwarka
   szersza, napisy przy "Merkzettel" i "Warenkorb". Mobile (<993 px) bez zmian.
   Samym CSS (flex-wrap + order), bez drugiej kopii menu — obie wersje naglowka
   (common/header.twig i wlasny naglowek home.twig) maja te same klasy.
   ========================================================================== */
.header__lbl { display: none; }
@media (min-width: 993px) {
    .header__inner { height: auto; flex-wrap: wrap; row-gap: 0; column-gap: 28px; padding-top: 6px; }
    .header__inner > .brand { height: 84px; }
    .header__search { flex: 1 1 auto; max-width: none; height: 48px; }
    .header__search input { font-size: 15px; }
    .header__actions { gap: 22px; }
    .nav {
        order: 10; flex: 0 0 100%; margin-left: 0; height: 50px;
        /* linia oddzielajaca rzedy na CALA szerokosc ekranu (outset border-image nie
           rozpycha strony i nie wymaga position — mega menu dalej liczy sie od .header__inner) */
        border-top: 1px solid transparent;
        border-image: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 1 0 0 0 / 1px 0 0 0 / 0 100vw;
    }
    .nav__list { gap: 34px; }
    .nav__list a { font-size: 15.5px; letter-spacing: .6px; }
    .header__wish, .header__cart { display: flex; align-items: center; gap: 9px; color: #e7e9ee; }
    .header__wish:hover, .header__cart:hover { color: var(--red); }
    .header__lbl { display: inline; font: 600 14.5px/1 var(--font-body); white-space: nowrap; }
    /* licznik przy ikonie, nie na koncu napisu */
    .header__wish-badge, .header__cart-badge { left: 13px; right: auto; }
    /* menu jest w osobnym rzedzie, wiec pasek szukania miesci sie juz od 993 px
       (wczesniej chowany ponizej 1100 px na rzecz lupy) */
    .header__search { display: flex; }
    .header__actions .header__ico-search { display: none; }
}
/* 993–1200 px: 5 kolumn findera sie nie miescilo (FR wystawalo poza panel) — przycisk pod polami */
@media (min-width: 861px) and (max-width: 1200px) {
    .finder--b .finder__bar[data-pane="vehicle"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .finder--b .finder__bar[data-pane="vehicle"] .finder__submit { grid-column: 1 / -1; max-width: none; }
}

/* ---------- 30.09.2026 (klient): panel wyszukiwarki 3w1 CIEMNY, jak intro ----------
   Pola wyboru zostaja biale (jak na makiecie 13A2), aktywna zakladka czerwona. */
.finder-b__panel {
    background: linear-gradient(180deg, #1c1f26 0%, #121419 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 24px 60px rgba(8,10,14,.35), 0 2px 8px rgba(8,10,14,.2);
    color: #fff;
}
.finder-b__panel .finder-b__head h2 { color: #fff; }
.finder-b__panel .finder-b__head p { color: #c3c8d1; }
.finder-b__panel .finder-b__badge { color: #fff; background: rgba(216,0,27,.18); border-color: rgba(216,0,27,.55); }
.finder--b .finder__tab { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #fff; }
.finder--b .finder__tab:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
.finder--b .finder__tab-ico { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.finder--b .finder__tab-txt strong { color: #fff; }
.finder--b .finder__tab-txt small { color: #a2a8b3; }
.finder--b .finder__bar { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.finder--b .ss.is-disabled .ss__btn { background: #e8eaee; border-color: #e8eaee; }
.finder--b .ss.is-disabled .ss__value { color: #8d939e; }
.finder--b .make-tile { border-color: transparent; }
.finder-b__panel .finder-b__makes-label,
.finder-b__panel .finder__note { color: #a2a8b3; }
.finder-b__panel .finder__all { color: #fff; }
.finder--b .finder__pane { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.finder__pane .numsearch__label strong { color: #fff; }
.finder__pane .numsearch__label span { color: #a2a8b3; }
.finder__pane .numsearch__form input { border-color: #fff; }

/* ---------- 30.09.2026 (klient): wypelnienie pustego pola obok panelu 3w1 na SZEROKICH ekranach ----------
   Wariant B z podgladu (ap_podglad_tla_0930.html): z lewej delikatne gwiazdki, z prawej cienkie
   czerwone pasy — motyw flagi USA. Tylko >=1500 px (ponizej po bokach panelu nie ma wolnego miejsca).
   Pole liczone od krawedzi ekranu do panelu (1180 px), wygaszone maska ku brzegom — nie wchodzi pod panel.
   Sam CSS/SVG, zero dodatkowych plikow do ladowania. */
@media (min-width: 1500px) {
    /* position na sekcji sprawia, ze jej jasne tlo maluje sie NAD dolnym pasem intro (panel nachodzi
       na hero ujemnym marginesem, ktory przechodzi na sekcje) — intro wygladalo na uciete. Hero dostaje
       z-index 1, a tresc findera z-index 1 pozniej w DOM, wiec kolejnosc: hero nad tlem sekcji, panel nad hero. */
    .hero { z-index: 1; }
    .finder--b { position: relative; }
    .finder--b > .container { position: relative; z-index: 1; }
    .finder--b::before,
    .finder--b::after {
        content: ""; position: absolute; top: 20%; bottom: 20%; z-index: 0;
        width: calc((100% - 1180px) / 2 - 24px);
        pointer-events: none;
    }
    .finder--b::before {
        left: 0; opacity: .08;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316233d' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") 0 0 / 30px 30px space;
        -webkit-mask: linear-gradient(90deg, transparent 0, #000 30%, #000 75%, transparent 100%);
                mask: linear-gradient(90deg, transparent 0, #000 30%, #000 75%, transparent 100%);
    }
    .finder--b::after {
        right: 0;
        background: repeating-linear-gradient(180deg, rgba(216,0,27,.11) 0 10px, transparent 10px 26px);
        -webkit-mask: linear-gradient(270deg, transparent 0, #000 30%, #000 75%, transparent 100%);
                mask: linear-gradient(270deg, transparent 0, #000 30%, #000 75%, transparent 100%);
    }
}