/* ===================================================================
   BSP – Black Steel Plate | Makieta sklepu (OpenCart-style)
   Odwzorowanie designu bsplate.de (PrestaShop) na strukturę OpenCart.
   Marka, logo, kolory i treści zachowane 1:1.
   =================================================================== */

:root {
  --bsp-red:        #c30000;  /* przyciski, akcenty, dolny pasek            */
  --bsp-red-dark:   #bc0000;  /* pasek mega-menu                            */
  --bsp-red-hover:  #a30000;  /* hover przycisków                           */
  --bsp-red-soft:   #fdecec;  /* tła sekcji / badge                         */
  --bsp-text:       #212529;  /* tekst podstawowy                           */
  --bsp-muted:      #6c757d;  /* tekst pomocniczy                           */
  --bsp-light:      #f9fbfc;  /* górny pasek, tła                           */
  --bsp-line:       #e7e9ec;  /* obramowania                                */
  --bsp-dark:       #1c2434;  /* nagłówki hero                              */
  --bsp-green:      #2bb24c;  /* dostępność / darmowa dostawa               */
  --bsp-radius:     10px;
  --bsp-shadow:     0 4px 18px rgba(20,24,40,.08);
  --bsp-shadow-sm:  0 2px 8px rgba(20,24,40,.06);
  --bsp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--bsp-font);
  color: var(--bsp-text);
  background: #fff;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  overflow-x: hidden;
}

a { color: var(--bsp-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--bsp-red); }
/* Bootstrap-Fokus (blau + Unterstrich) neutralisieren, ohne Rot zu erzwingen
   (weiße Marken-Links auf rotem Balken sollen beim Klick weiß bleiben). */
a:hover, a:focus { text-decoration: none; }
a:focus { color: inherit; }

img { max-width: 100%; height: auto; }

h1,h2,h3,h4,h5 { font-weight: 600; color: var(--bsp-text); line-height: 1.2; }

.container-bsp { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

.text-red   { color: var(--bsp-red) !important; }
.bg-red     { background: var(--bsp-red) !important; }
.fw-700     { font-weight: 700; }

/* ---------- Buttons ------------------------------------------------ */
.btn-bsp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bsp-red); color: #fff; border: 0;
  font-family: var(--bsp-font); font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: var(--bsp-radius); cursor: pointer;
  transition: background .15s, transform .05s; white-space: nowrap;
}
.btn-bsp:hover, .btn-bsp:focus { background: var(--bsp-red-hover); color: #fff; text-decoration: none; }
.btn-bsp:active { transform: translateY(1px); }
.btn-bsp--lg { padding: 14px 34px; font-size: 16px; }
.btn-bsp--block { width: 100%; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--bsp-text); border: 1.5px solid var(--bsp-line);
  font-weight: 600; padding: 11px 24px; border-radius: var(--bsp-radius); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover, .btn-ghost:focus { border-color: var(--bsp-red); color: var(--bsp-red); text-decoration: none; }

.btn-outline-red {
  background: #fff; color: var(--bsp-red); border: 1.5px solid var(--bsp-red);
  font-weight: 600; padding: 11px 26px; border-radius: var(--bsp-radius); cursor: pointer;
  display: inline-flex; align-items:center; gap:8px; transition: all .15s; text-decoration: none;
}
.btn-outline-red:hover, .btn-outline-red:focus { background: var(--bsp-red); color:#fff; text-decoration: none; }

/* ===================================================================
   HEADER
   =================================================================== */

/* górny pasek */
.topbar { background: var(--bsp-light); border-bottom: 1px solid var(--bsp-line); font-size: 13.5px; }
.topbar .container-bsp { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.topbar__claim { font-weight: 600; color: var(--bsp-text); }
.topbar__right { display: flex; align-items: center; gap: 26px; }
.topbar__phone { display: flex; align-items: center; gap: 8px; }
.topbar__phone .wa { width: 20px; height: 20px; }
.topbar__phone b { font-weight: 600; }
.topbar__phone .muted { color: var(--bsp-muted); }
.topbar__wish { display: flex; align-items: center; gap: 6px; color: var(--bsp-text); }

/* główny nagłówek */
.header { background: #fff; border-bottom: 1px solid var(--bsp-line); }
.header .container-bsp { display: flex; align-items: center; gap: 28px; height: 92px; }
.header__logo img { width: 180px; height: auto; display: block; }
.header__search { flex: 1; max-width: 430px; position: relative; }
.header__search input {
  width: 100%; height: 46px; border: 1.5px solid var(--bsp-line); border-radius: 24px;
  padding: 0 52px 0 22px; font-family: var(--bsp-font); font-size: 14px; outline: none;
  transition: border-color .15s;
}
.header__search input:focus { border-color: var(--bsp-red); }
.header__search button {
  position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0;
  background: transparent; cursor: pointer; color: var(--bsp-text);
  display: flex; align-items: center; justify-content: center;
}
/* Produkt-Live-Suche (Autovervollständigung der Kopfzeilen-Suche) */
.bsp-ac { position:absolute; top:calc(100% + 8px); left:0; width:100%; min-width:520px; background:#fff; border:1px solid var(--bsp-line); border-radius:14px; box-shadow:0 16px 40px rgba(20,30,50,.18); overflow:hidden auto; max-height:72vh; z-index:70; }
.bsp-ac[hidden] { display:none; }
.bsp-ac-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--bsp-line); background:#fafbfd; }
.bsp-ac-head .lbl { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bsp-muted); }
.bsp-ac-head .hint { font-size:11px; color:var(--bsp-muted); }
.bsp-ac-head .hint kbd { background:#fff; border:1px solid var(--bsp-line); border-radius:3px; padding:1px 5px; font-family:inherit; font-size:10px; color:#495057; }
.bsp-ac-item { display:flex; align-items:center; gap:14px; padding:11px 16px; border-left:3px solid transparent; border-bottom:1px solid #f1f4f9; color:var(--bsp-text); }
.bsp-ac-item:hover, .bsp-ac-item.active, .bsp-ac-foot.active { background:var(--bsp-red-soft); border-left-color:var(--bsp-red); }
.bsp-ac-thumb { width:46px; height:46px; flex-shrink:0; border:1px solid var(--bsp-line); border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--bsp-muted); }
.bsp-ac-thumb img { width:100%; height:100%; object-fit:contain; }
.bsp-ac-thumb svg { width:28px; height:28px; }
.bsp-ac-bd { flex:1; min-width:0; }
.bsp-ac-bd .nm { display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bsp-ac-bd .nm em { font-style:normal; background:#ffe9a8; border-radius:2px; padding:0 1px; }
.bsp-ac-bd .mt { display:block; font-size:12px; color:var(--bsp-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bsp-ac-bd .mt .sku { color:#495057; font-weight:600; }
.bsp-ac-bd .mt .sku em { font-style:normal; background:#ffe9a8; border-radius:2px; padding:0 1px; }
.bsp-ac-pr { text-align:right; flex-shrink:0; padding-left:10px; }
.bsp-ac-pr b { display:block; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--bsp-text); }
.bsp-ac-pr span { font-size:11px; color:var(--bsp-muted); white-space:nowrap; }
.bsp-ac-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:#fafbfd; color:var(--bsp-red); font-weight:700; font-size:13px; border-left:3px solid transparent; cursor:pointer; }
.bsp-ac-foot:hover { background:var(--bsp-red-soft); }
.bsp-ac-foot .l { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.bsp-ac-foot .l svg { width:16px; height:16px; flex-shrink:0; }
.bsp-ac-foot .cnt { background:var(--bsp-red); color:#fff; border-radius:999px; font-size:11px; font-weight:800; padding:2px 9px; white-space:nowrap; }
.bsp-ac-empty { padding:18px 16px; color:#495057; font-size:13px; }
.header__nav { display: flex; align-items: center; gap: 26px; font-weight: 500; }
.header__nav a { white-space: nowrap; }
.header__nav .has-caret { display: inline-flex; align-items: center; gap: 5px; }
.nav-finder { color: var(--bsp-red, #e2001a); font-weight: 700; }
.nav-finder::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13l2-5a2 2 0 0 1 1.9-1.3h10.2A2 2 0 0 1 19 8l2 5v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/><circle cx='7' cy='14' r='1.4' fill='white'/><circle cx='17' cy='14' r='1.4' fill='white'/></svg>"); mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13l2-5a2 2 0 0 1 1.9-1.3h10.2A2 2 0 0 1 19 8l2 5v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/></svg>"); }
.header__actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.header__action { display: flex; align-items: center; gap: 10px; color: var(--bsp-text); }
.header__action .ico { width: 26px; height: 26px; color: var(--bsp-text); position: relative; }
.header__action .lbl { line-height: 1.15; }

/* Badge koszyka — czerwone kółko z białą liczbą */
.cart-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--bsp-red); color: #fff;
  border: 2px solid #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(195,0,0,.4);
}
.cart-badge[hidden] { display: none; }
.stickybar__cart { position: relative; }
.stickybar__cart .cart-badge { top: -5px; left: 50%; border-color: var(--bsp-red-dark); }
.header__action .lbl b { display: block; font-weight: 600; font-size: 14px; }
.header__action .lbl span { font-size: 12.5px; color: var(--bsp-muted); }
.header__burger { display: none; }

/* ===================================================================
   MEGA MENU (marki samochodów)
   =================================================================== */
.megamenu { background: var(--bsp-red-dark); }
.megamenu__list {
  list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap;
  gap: 2px 4px; justify-content: space-between;
}
.megamenu__item { position: relative; }
.megamenu__item > a {
  color: #fff; font-weight: 600; font-size: 14px; padding: 8px 12px; display: inline-flex;
  align-items: center; gap: 6px; border-radius: 6px; white-space: nowrap;
}
.megamenu__item > a .caret { font-size: 10px; opacity: .9; }
.megamenu__item:hover > a { background: rgba(0,0,0,.18); color: #fff; }
.megamenu__dropdown {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 230px;
  background: #fff; border: 1px solid var(--bsp-line); border-radius: 0 0 10px 10px;
  box-shadow: var(--bsp-shadow); padding: 8px; display: none;
  max-height: 70vh; overflow-y: auto;
}
.megamenu__item:hover .megamenu__dropdown { display: block; }
.megamenu__dropdown a {
  display: block; padding: 7px 12px; font-size: 13.5px; border-radius: 6px; color: var(--bsp-text);
}
.megamenu__dropdown a::before { content: "•"; color: var(--bsp-red); margin-right: 8px; }
.megamenu__dropdown a:hover { background: var(--bsp-red-soft); color: var(--bsp-red); }

/* ===================================================================
   STICKY MINI-BAR (pojawia się przy scrollu – jak na bsplate.de)
   =================================================================== */
.stickybar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 200; background: var(--bsp-red);
  transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .container-bsp { display: flex; align-items: center; gap: 26px; height: 54px; }
.stickybar a { color: #fff; font-weight: 600; font-size: 14.5px; display:inline-flex; align-items:center; gap:6px; }
.stickybar a:hover { color: #fff; opacity: .85; }
.stickybar__cart { margin-left: auto; }

/* ===================================================================
   VEHICLE FINDER (Wählen Sie eine Abdeckung für Ihr Auto)
   =================================================================== */
.finder { padding: 22px 0 6px; }
.finder__title { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.finder__box {
  background: #fff; border: 1px solid var(--bsp-line); border-radius: 14px; box-shadow: var(--bsp-shadow-sm);
  padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 8px; align-items: stretch;
}
.finder__step {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: #f6f7f9; border: 1px solid var(--bsp-line); border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s, background .15s;
}
.finder__step--active { background: #fff; border-color: var(--bsp-red); }
.finder__num {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: #e3e7ec; color: var(--bsp-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px;
}
.finder__step--active .finder__num { background: var(--bsp-red); color: #fff; }
.finder__select { flex: 1; min-width: 0; }
.finder__select small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--bsp-muted); line-height: 1.5; }
.finder__select select { /* fallback bez JS */
  width: 100%; border: 0; background: transparent; font-family: var(--bsp-font); font-weight: 600;
  font-size: 13px; padding: 0; outline: none; color: var(--bsp-text); appearance: none; cursor: pointer;
}
.finder__box .btn-bsp { align-self: stretch; padding: 0 26px; font-size: 14px; }

/* Custom dropdown — zastępuje natywny <select> (brandowa, czytelna lista) */
.bsel { position: relative; }
.bsel__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: transparent; border: 0; padding: 0; margin: 0; font-family: var(--bsp-font);
  font-weight: 600; font-size: 13.5px; color: var(--bsp-text); cursor: pointer; text-align: left; line-height: 1.3;
}
.bsel__trigger:disabled { cursor: default; color: var(--bsp-muted); }
.bsel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel__chev { flex: none; width: 12px; height: 12px; color: var(--bsp-muted); transition: transform .15s; }
.bsel.open .bsel__chev { transform: rotate(180deg); }
.bsel__menu {
  position: absolute; top: calc(100% + 9px); left: -13px; right: -13px; z-index: 70;
  background: #fff; border: 1px solid var(--bsp-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.14);
  max-height: 300px; overflow-y: auto; padding: 6px; display: none;
}
.bsel.open .bsel__menu { display: block; }
.bsel__opt {
  padding: 8px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--bsp-text);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsel__opt:hover { background: var(--bsp-red-soft); color: var(--bsp-red); }
.bsel__opt.is-sel { background: var(--bsp-red); color: #fff; font-weight: 600; }
.bsel__opt--ph { color: var(--bsp-muted); }

/* ===================================================================
   HERO SLIDER
   =================================================================== */
.hero { padding: 18px 0 8px; }
.hero__slide {
  position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(90deg,#f4f6f8 0%, #eef1f4 45%, transparent 70%);
  min-height: 420px; display: flex; align-items: center;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 18%, rgba(255,255,255,.85) 38%, rgba(255,255,255,0) 62%); z-index: 1; }
.hero__content { position: relative; z-index: 2; padding: 0 8% ; max-width: 640px; }
.hero__eyebrow { color: var(--bsp-muted); font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.hero__title { font-size: 46px; font-weight: 700; color: var(--bsp-dark); margin: 0 0 22px; line-height: 1.08; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px;
  border: 0; background: transparent; color: var(--bsp-red); font-size: 30px; cursor: pointer; opacity: .8;
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: 6px; } .hero__arrow--next { right: 6px; }
.hero__dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hero__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bsp-red); background: transparent; cursor: pointer; }
.hero__dot.is-active { background: var(--bsp-red); }

/* ===================================================================
   USP STRIP
   =================================================================== */
.usp { padding: 20px 0; border-bottom: 1px solid var(--bsp-line); }
.usp__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; }
.usp__item { text-align: center; padding: 12px 16px; border-radius: var(--bsp-radius); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.usp__item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--bsp-shadow); background: #fff; }
.usp__ico { width: 42px; height: 42px; margin: 0 auto 9px; color: var(--bsp-red); }
.usp__ico svg { width: 100%; height: 100%; }
.usp__ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.usp__txt { font-size: 12px; color: var(--bsp-text); line-height: 1.3; }

/* ===================================================================
   SECTION TITLES
   =================================================================== */
.section { padding: 42px 0; }
.section--tight { padding: 28px 0; }
.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.section__title { font-size: 26px; font-weight: 700; position: relative; padding-bottom: 10px; margin: 0; }
.section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--bsp-red); border-radius: 2px; }
.section__link { font-weight: 600; color: var(--bsp-red); display: inline-flex; align-items: center; gap: 6px; }
/* Reiter Bestseller / Neuheiten auf der Startseite — als große Titel:
   aktiv = rot + roter Unterstrich, inaktiv = schwarz. */
.section__head--tabs { align-items: flex-end; }
.tabs-bsp { display: inline-flex; gap: 32px; align-items: flex-end; }
.tabs-bsp__btn { border: 0; background: transparent; cursor: pointer; font-family: var(--bsp-font); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--bsp-text); padding: 0 0 9px; position: relative; transition: color .15s; }
/* Startseite: einheitlicher, kompakterer Titel-Rhythmus (21 px) — Cart/Produkt bleiben unberührt */
body[data-page="common/home"] .section__title { font-size: 21px; }
.tabs-bsp__btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--bsp-red); border-radius: 2px; opacity: 0; transition: opacity .15s; }
.tabs-bsp__btn:hover { color: var(--bsp-red); }
.tabs-bsp__btn.is-active { color: var(--bsp-red); }
.tabs-bsp__btn.is-active::after { opacity: 1; }
.tabpane-bsp { display: none; }
.tabpane-bsp.is-active { display: block; animation: bspFade .25s ease; }
@keyframes bspFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   PRODUCT CARD
   =================================================================== */
.products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.products-grid--3 { grid-template-columns: repeat(3,1fr); }

.pcard {
  background: #fff; border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .18s, transform .18s;
}
.pcard:hover { box-shadow: var(--bsp-shadow); transform: translateY(-3px); }
.pcard__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: #8a9099; color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 5px;
}
.pcard__wish {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid var(--bsp-line); display: flex; align-items: center; justify-content: center;
  color: var(--bsp-muted); cursor: pointer;
}
.pcard__wish:hover { color: var(--bsp-red); border-color: var(--bsp-red); }
.pcard__img { aspect-ratio: 16/10; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; min-height: 38px; }
.pcard__title a { color: var(--bsp-text); }
.pcard__title a:hover { color: var(--bsp-red); }
.pcard__meta { font-size: 13px; color: #000; margin-bottom: 6px; }
.pcard__spec { font-size: 13px; color: #000; line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 5px; }
.pcard__spec b { font-weight: 700; }
.pcard__spec .ic { color: var(--bsp-red); flex: none; margin-top: 1px; }
.pcard__spec .ic svg { width: 16px; height: 16px; }
.pcard__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard__price { font-size: 19px; font-weight: 700; }
.pcard__price small { display: block; font-size: 10.5px; font-weight: 500; color: var(--bsp-muted); }
.pcard__add { padding: 9px 14px; font-size: 13px; }

/* ===================================================================
   CATEGORY SHOWCASE (für PKW)
   =================================================================== */
.showcase { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: stretch; }
.showcase__intro {
  background: linear-gradient(160deg,#fff, #f4f6f8); border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius);
  padding: 26px; display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.showcase__intro h3 { font-size: 22px; margin: 0 0 6px; }
.showcase__intro h3 b { color: var(--bsp-red); }

/* ===================================================================
   ABOUT (home)
   =================================================================== */
.about { background: var(--bsp-light); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.about h3 { font-size: 17px; color: var(--bsp-text); margin: 0 0 10px; }
.about p { color: var(--bsp-muted); margin: 0 0 18px; font-size: 14.5px; }
.about__center { text-align: center; margin-top: 6px; }
.about em { color: var(--bsp-red); font-style: italic; }

/* ===================================================================
   BANNER B2B / VERSAND
   =================================================================== */
/* B2B-Banner „Großhandelsangebot" — Hintergrundbild (Foto + Europakarte von bsplate.de),
   Text mittig überlagert. Mobil: Bild ausblenden, sauberer Verlauf + fließender Text. */
.cta-banner {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--bsp-line); background: #fff;
}
.cta-banner__bg { display: block; width: 100%; height: auto; }
.cta-banner__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 16px 24px;
}
.cta-banner h2 { font-size: clamp(20px, 2.3vw, 32px); margin: 0 0 6px; color: var(--bsp-text); }
.cta-banner p { color: var(--bsp-muted); font-size: clamp(13px, 1.25vw, 17px); margin: 0 0 clamp(10px, 1.4vw, 20px); }
@media (max-width: 900px) {
  .cta-banner { background: linear-gradient(120deg,#fff,#f6e9e9); }
  .cta-banner__bg { display: none; }
  .cta-banner__inner { position: static; padding: 36px 20px; }
  .cta-banner h2 { font-size: 26px; }
  .cta-banner p { font-size: 15px; }
}

.versand-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.versand-map img { width: 100%; height: auto; display: block; }
.versand-countries { margin-top: 44px; }
.versand-countries h3 { margin: 0 0 22px; font-size: 21px; font-weight: 700; color: var(--bsp-text); }
/* 6 Spalten über die volle Breite, spaltenweise (wie bsplate.de), bündig zur linken Kante */
.country-list { columns: 6; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.country-list li { list-style: none; display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: var(--bsp-text); break-inside: avoid; }
.country-flag { width: 20px; height: 15px; flex: none; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.10); }

/* ===================================================================
   TRUST BAR (rynek DE)
   =================================================================== */
.trust { border-top: 1px solid var(--bsp-line); border-bottom: 1px solid var(--bsp-line); background: #fff; padding: 18px 0; }
.trust__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.trust__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--bsp-text); }
.trust__item .ic { color: var(--bsp-green); flex: none; }
.pay-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-badge { height: 26px; border: 1px solid var(--bsp-line); border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; background: #fff; color: #333; }

/* ===================================================================
   NEWSLETTER
   =================================================================== */
/* ===================================================================
   FOOTER (dunkel) — Newsletter + Links + Symbole in EINEM Block (wie bsplate.de)
   =================================================================== */
.footer { background: #050b20; color: rgba(255,255,255,.9); }

/* Newsletter-Zeile: Logo | Text | Formular */
.footer__top { border-bottom: 1px solid rgba(255,255,255,.10); }
.footer__top-in { display: grid; grid-template-columns: auto 1fr 1.15fr; gap: 44px; align-items: center; padding: 40px 0; }
.footer__logo img { width: 180px; height: auto; display: block; }
.footer__nl-txt h3 { color: #fff; font-size: 26px; margin: 0 0 6px; }
.footer__nl-txt p { color: rgba(255,255,255,.7); margin: 0; font-size: 14px; }
.newsletter__form { display: flex; gap: 10px; }
.newsletter__form input { height: 48px; border: 2px solid transparent; border-radius: var(--bsp-radius); padding: 0 18px; flex: 1; min-width: 0; font-family: var(--bsp-font); background: #fff; color: var(--bsp-text); font-size: 14px; outline: none; }
.newsletter__form input::placeholder { color: #8a939c; }
.newsletter__form.is-err input { border-color: var(--bsp-red); background: #fff7f7; }
.newsletter__form .btn-bsp { white-space: nowrap; }
.footer__nl-note { color: rgba(255,255,255,.5); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }
.footer__nl-check { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.footer__nl-check input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.footer__nl-check label { line-height: 16px; cursor: pointer; }

/* Link-Spalten */
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: 30px; padding: 46px 0; }
.footer h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; padding-left: 14px; position: relative; }
.footer li::before { content: "›"; position: absolute; left: 0; color: rgba(255,255,255,.55); }
.footer a { color: #fff; font-size: 13px; }
.footer a:hover { color: #ff6b6b; }
.footer__contact p { color: #fff; font-size: 13px; margin: 0 0 9px; display: flex; gap: 9px; align-items: flex-start; }
.footer__contact .ic { color: var(--bsp-red); flex: none; margin-top: 2px; }
/* Feine Trennlinien zwischen Kontaktzeilen (wie bsplate.de: <hr>) — ab Adresse→Telefon */
.footer__contact p:nth-of-type(n+3) { border-top: 1px solid rgba(160,160,160,.25); padding-top: 10px; margin-top: 10px; }
.footer__brand { font-weight: 600; color: #fff !important; font-size: 13px; }

/* Zahlungs-/Versandsymbole */
.footer__icons { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.10); }
.footer__pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paycard { height: 32px; width: auto; display: block; border-radius: 5px; background: #fff; }
.paytag { height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 5px; background: #fff; color: #222834; font-size: 12px; font-weight: 700; white-space: nowrap; }
.paytag--klarna { background: #ffb3c7; color: #17120f; }
.footer__ship { display: flex; align-items: center; gap: 12px; }
.footer__ship-txt { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; white-space: nowrap; }
.paytag--hermes { height: 34px; padding: 0 14px; color: #0a7ea4; font-size: 17px; font-weight: 800; font-style: italic; letter-spacing: .3px; }

/* Social */
.footer__social { display: flex; justify-content: center; padding: 8px 0 2px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.footer__social a:hover { background: var(--bsp-red); color: #fff; }

/* Copyright */
.footer__bottom { border-top: 1px solid rgba(255,255,255,.10); margin-top: 6px; padding: 18px 0; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; }

/* ===================================================================
   BREADCRUMBS
   =================================================================== */
.breadcrumb-bsp { padding: 14px 0; font-size: 13.5px; color: var(--bsp-muted); }
.breadcrumb-bsp a { color: var(--bsp-muted); }
.breadcrumb-bsp a:hover { color: var(--bsp-red); }
.breadcrumb-bsp .sep { margin: 0 8px; opacity: .6; }
.breadcrumb-bsp .cur { color: var(--bsp-text); }

/* ===================================================================
   CATEGORY PAGE
   =================================================================== */
/* minmax(0,1fr) — nie 1fr — żeby kolumna listingu nie rozciągała się do min-content kart
   (większe proporcjonalne zdjęcia rozpychały 1fr → kafle robiły się za duże, jak nie na home) */
.catlayout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 26px; align-items: start; }
.sidebar { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 20px; }
.sidebar h3 { font-size: 19px; margin: 0 0 14px; }
.sidebar__nav { list-style: none; margin: 0; padding: 0; }
.sidebar__nav li { margin-bottom: 2px; }
.sidebar__nav a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--bsp-text); }
.sidebar__nav a::before { content: "•"; color: var(--bsp-red); margin-right: 8px; }
.sidebar__nav a:hover, .sidebar__nav a.active { background: var(--bsp-red-soft); color: var(--bsp-red); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar__view { display: flex; gap: 6px; }
.toolbar__view button { width: 38px; height: 38px; border: 1px solid var(--bsp-line); background: #fff; border-radius: 8px; cursor: pointer; color: var(--bsp-muted); display:flex;align-items:center;justify-content:center; }
.toolbar__view button.active { border-color: var(--bsp-red); color: var(--bsp-red); }
.toolbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.select-pill { border: 1px solid var(--bsp-line); border-radius: 22px; padding: 9px 16px; font-family: var(--bsp-font); font-weight: 600; font-size: 13.5px; background:#fff; cursor: pointer; outline: none; }
.filters { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.filters .select-pill { min-width: 150px; }

/* === Suche (product/search) === */
.search-form { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 18px 20px; margin: 4px 0 26px; background: #fff; }
.search-form__legend { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bsp-muted); margin: 0 0 12px; }
.search-form__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search-form__input { flex: 1 1 300px; min-width: 200px; border: 1px solid var(--bsp-line); border-radius: 22px; padding: 10px 18px; font-family: var(--bsp-font); font-size: 14px; color: var(--bsp-text); background: #fff; outline: none; transition: border-color .15s; }
.search-form__input:focus { border-color: var(--bsp-red); }
.search-form__cat { min-width: 210px; }
.search-form__row .btn-bsp { flex: 0 0 auto; }
.search-form__opts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.search-form__opts label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--bsp-text); cursor: pointer; margin: 0; font-weight: 500; }
.search-form__opts input[type=checkbox] { accent-color: var(--bsp-red); width: 16px; height: 16px; cursor: pointer; }
.search-sub { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.cat-results { color: var(--bsp-muted); font-size: 13px; }

.pagination-bsp { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 32px; }
.pagination-bsp a, .pagination-bsp span { min-width: 40px; height: 40px; border: 1px solid var(--bsp-line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--bsp-text); }
.pagination-bsp .active { background: #fff; border-color: var(--bsp-red); color: var(--bsp-red); }
.pagination-bsp a:hover { border-color: var(--bsp-red); color: var(--bsp-red); }
/* OC bootstrap-Markup (<ul class="pagination">) -> Pills im BSP-Stil */
.pagination-bsp .pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
.pagination-bsp .pagination > li { margin: 0; }
.pagination-bsp .pagination > li > a, .pagination-bsp .pagination > li > span { position: static; float: none; min-width: 40px; height: 40px; padding: 0 12px; margin: 0; border: 1px solid var(--bsp-line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; line-height: 1; color: var(--bsp-text); background: #fff; text-decoration: none; }
.pagination-bsp .pagination > li.active > span, .pagination-bsp .pagination > li.active > a { border-color: var(--bsp-red); color: var(--bsp-red); background: #fff; }
.pagination-bsp .pagination > li > a:hover { border-color: var(--bsp-red); color: var(--bsp-red); background: #fff; }
.pagination-bsp .pagination > li.disabled > span { opacity: .45; }

/* ===================================================================
   KONTO-TYP UMSCHALTER (Privat / Geschäftskunde) — Registrierung
   =================================================================== */
.bsp-acctype { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.bsp-acctype__opt { position: relative; margin: 0; cursor: pointer; border: 1.5px solid var(--bsp-line); border-radius: 10px; padding: 11px 20px; font-weight: 600; font-size: 14px; color: var(--bsp-text); background: #fff; display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, color .15s, background .15s; }
.bsp-acctype__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bsp-acctype__opt:hover { border-color: var(--bsp-red); }
.bsp-acctype__opt.is-active { border-color: var(--bsp-red); color: var(--bsp-red); background: rgba(195,0,0,.05); }
.bsp-acctype__opt.is-active::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bsp-red); }

/* Zgoda/AGB-Popup (#modal-agree) — o 50% szerszy niż domyślne 600px Bootstrap */
#modal-agree .modal-dialog { width: 900px; max-width: 94%; }

/* ===================================================================
   ONE-PAGE CHECKOUT (BSP)
   =================================================================== */
.bsp-checkout-wrap { background: var(--bsp-light); padding: 30px 0 60px; min-height: 60vh; }
.bsp-checkout-title { font-size: 26px; margin: 0 0 22px; }
.bsp-checkout { display: grid; grid-template-columns: 1fr 400px; gap: 26px; align-items: start; }
.bsp-checkout__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.bsp-card { background: #fff; border: 1px solid var(--bsp-line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--bsp-shadow-sm); }
.bsp-card__head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.bsp-card__head h3 { margin: 0; font-size: 18px; }
.bsp-step { width: 28px; height: 28px; border-radius: 50%; background: var(--bsp-red); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.bsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bsp-field { margin-bottom: 14px; display: flex; flex-direction: column; }
.bsp-grid2 .bsp-field { margin-bottom: 0; }
.bsp-field--sm { max-width: 170px; }
.bsp-field label { font-size: 13px; font-weight: 600; color: var(--bsp-text); margin-bottom: 6px; }
.bsp-field input { height: 46px; border: 1.5px solid var(--bsp-line); border-radius: 10px; padding: 0 14px; font-family: var(--bsp-font); font-size: 14.5px; outline: none; transition: border-color .15s; background: #fff; }
.bsp-field input:focus { border-color: var(--bsp-red); }
.bsp-field input:disabled { background: #f4f6f8; color: var(--bsp-muted); }
.bsp-field.has-error input { border-color: var(--bsp-red); background: #fff7f7; }
.bsp-err { color: var(--bsp-red); font-size: 12.5px; margin-top: 5px; }

.bsp-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin: 6px 0 4px; cursor: pointer; }
.bsp-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.bsp-hint { font-size: 13.5px; color: var(--bsp-muted); margin: 8px 0 0; }
.bsp-hint a, .bsp-agree a { color: var(--bsp-red); font-weight: 600; }
#bsp-company-fields { margin: 14px 0 4px; }
.bsp-acctype { margin-bottom: 18px; }

.bsp-checkout__aside { position: sticky; top: 18px; }
.bsp-summary h3 { font-size: 18px; margin: 0 0 16px; }
.bsp-summary__items { display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
.bsp-summary__item { display: flex; gap: 12px; align-items: center; }
.bsp-summary__thumb { position: relative; width: 52px; height: 52px; border: 1px solid var(--bsp-line); border-radius: 8px; flex: none; background: #fff; display: flex; align-items: center; justify-content: center; }
.bsp-summary__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bsp-summary__qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bsp-red); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bsp-summary__info { flex: 1; min-width: 0; line-height: 1.3; }
.bsp-summary__name { display: block; font-size: 13.5px; font-weight: 600; }
.bsp-summary__model { display: block; font-size: 12px; color: var(--bsp-muted); }
.bsp-summary__price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.bsp-summary__totals { border-top: 1px solid var(--bsp-line); padding-top: 14px; margin-bottom: 14px; }
.bsp-summary__row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--bsp-muted); }
.bsp-summary__row--grand { border-top: 1px solid var(--bsp-line); margin-top: 6px; padding-top: 12px; font-size: 19px; font-weight: 700; color: var(--bsp-text); }
.bsp-summary__row--muted { color: var(--bsp-muted); font-size: 13px; }
.bsp-free { color: var(--bsp-green); font-weight: 700; }
.bsp-summary__pay { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 14px 0 2px; }
.pay-badge { height: 26px; border: 1px solid var(--bsp-line); border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; background: #fff; }
.bsp-summary__meta { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--bsp-muted); border-top: 1px dashed var(--bsp-line); padding-top: 14px; margin-bottom: 14px; }
.bsp-summary__meta div { display: flex; align-items: center; gap: 8px; }
.bsp-summary__meta strong { color: var(--bsp-text); }
.bsp-summary__meta svg { color: var(--bsp-red); flex: none; }
.bsp-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--bsp-text); margin-bottom: 14px; cursor: pointer; line-height: 1.4; }
.bsp-agree input { margin-top: 2px; width: 17px; height: 17px; flex: none; }
#bsp-place-order.is-loading { opacity: .75; cursor: progress; }
.bsp-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--bsp-muted); margin: 12px 0 0; }
.bsp-secure svg { color: var(--bsp-green); }
.bsp-alert { background: #fff7f7; border: 1.5px solid var(--bsp-red); color: #a30000; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; font-weight: 500; }

@media (max-width: 900px) {
  .bsp-checkout { grid-template-columns: 1fr; }
  .bsp-checkout__aside { position: static; order: 2; }
  .bsp-grid2 { grid-template-columns: 1fr; gap: 0; }
  .bsp-grid2 .bsp-field { margin-bottom: 14px; }
  .bsp-field--sm { max-width: none; }
}

/* ===================================================================
   PRODUCT PAGE
   =================================================================== */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.gallery__main { position: relative; border: 1px solid var(--bsp-line); border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background: #fff; padding: 14px; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; cursor: zoom-in; }
/* Lightbox galerii (magnific-popup) — ponad sticky-headerem */
.bsp-mfp.mfp-bg { z-index: 9998; opacity: .9; }
.bsp-mfp.mfp-wrap { z-index: 9999; }
.bsp-mfp .mfp-close { cursor: pointer; }
.bsp-mfp img.mfp-img { background: #fff; border-radius: 6px; }
.gallery__badge { position: absolute; top: 14px; left: 14px; background: #8a9099; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 6px; }
.gallery__zoom { position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 8px; background: #fff; border: 1px solid var(--bsp-line); display: flex; align-items: center; justify-content: center; color: var(--bsp-text); cursor: pointer; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-top: 12px; }
.gallery__thumb { border: 1.5px solid var(--bsp-line); border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; cursor: pointer; padding: 4px; background:#fff; }
.gallery__thumb.active { border-color: var(--bsp-red); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.pdp__title { font-size: 27px; font-weight: 700; line-height: 1.18; margin: 0 0 16px; }
.pdp__spec { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; margin-bottom: 7px; }
.pdp__spec .ic { color: var(--bsp-red); flex: none; margin-top: 2px; }
.pdp__maker { font-size: 14px; color: var(--bsp-muted); margin: 8px 0 2px; }
.pdp__maker b { color: var(--bsp-red); }
.pdp__art { font-size: 14px; color: var(--bsp-muted); margin-bottom: 16px; }
.pdp__price { font-size: 34px; font-weight: 700; margin: 6px 0 2px; }
.pdp__price span { font-size: 14px; font-weight: 500; color: var(--bsp-muted); }
.pdp__vat { font-size: 13px; color: var(--bsp-muted); margin-bottom: 18px; }
.pdp__buy { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--bsp-line); border-radius: 9px; overflow: hidden; background: #fff; }
.qty button { width: 30px; height: 38px; border: 0; background: #fff; font-size: 16px; line-height: 1; cursor: pointer; color: var(--bsp-muted); transition: background .15s, color .15s; }
.qty button:hover { background: var(--bsp-red-soft); color: var(--bsp-red); }
.qty input { width: 40px; height: 38px; border: 0; border-left: 1px solid var(--bsp-line); border-right: 1px solid var(--bsp-line); text-align: center; font-family: var(--bsp-font); font-weight: 600; font-size: 14px; outline: none; color: var(--bsp-text); }
.pdp__paypal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bsp-muted); margin-bottom: 22px; }
.pdp__delivery { border-top: 1px solid var(--bsp-line); padding-top: 16px; font-size: 14px; }
.pdp__delivery .row { display: flex; gap: 14px; margin-bottom: 10px; }
.pdp__delivery .row .k { width: 130px; color: var(--bsp-muted); flex: none; }
.avail-dots { display: inline-flex; gap: 4px; }
.avail-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--bsp-green); display: inline-block; }
.service-box { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 18px; display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.service-box .ico { width: 54px; height: 54px; color: var(--bsp-red); flex: none; }
.service-box b { display:block; margin-bottom: 4px; }
.service-box a { color: var(--bsp-red); }
.service-box .small { font-size: 13px; color: var(--bsp-muted); }

/* tabs */
.tabs { margin-top: 46px; margin-bottom: 46px; }
.tabs__nav { display: flex; gap: 26px; border-bottom: 1px solid var(--bsp-line); margin-bottom: 24px; }
.tabs__btn { background: none; border: 0; padding: 12px 2px; font-family: var(--bsp-font); font-weight: 600; font-size: 17px; color: var(--bsp-muted); cursor: pointer; position: relative; }
.tabs__btn.active { color: var(--bsp-text); }
.tabs__btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bsp-red); border-radius: 2px; }
.tabs__panel { display: none; max-width: 880px; }
.tabs__panel.active { display: block; }
.tabs__panel p, .tabs__panel li { font-size: 14.5px; }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li { padding: 9px 0; border-bottom: 1px solid var(--bsp-line); display: flex; gap: 16px; }
.spec-list li b { width: 280px; flex: none; }

/* Zakładka Lieferung — box partnera Hermes */
.ship-box { display: flex; align-items: flex-start; gap: 26px; }
.ship-box__carrier { flex: none; border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 18px 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hermes-badge { color: #0a7ea4; font-size: 28px; font-weight: 800; font-style: italic; letter-spacing: .3px; line-height: 1; }
.ship-box__carrier small { font-size: 11.5px; color: var(--bsp-muted); white-space: nowrap; }
.ship-box__info p:first-child { margin-top: 0; }

/* Zakładka Zahlungen — lista metod z logotypami */
.pay-list { list-style: none; padding: 0; margin: 0 0 20px; }
.pay-list li { display: flex; align-items: center; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--bsp-line); }
.pay-list__logos { flex: none; width: 180px; display: flex; align-items: center; gap: 6px; }
.pay-list__logos img { height: 34px; width: auto; border: 1px solid var(--bsp-line); border-radius: 5px; background: #fff; }
.pay-badge { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--bsp-line); border-radius: 5px; background: #fff; color: #222834; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pay-badge--klarna { background: #ffb3c7; border-color: #ffb3c7; color: #17120f; }
.pay-badge--sepa { color: #10298e; font-style: italic; letter-spacing: .5px; }
.pay-note { color: var(--bsp-muted); }

/* Zakładka Geschäftskunde — sekcja B2B */
.b2b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 22px; }
.b2b-tile { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 16px 18px; }
.b2b-tile .ico { width: 38px; height: 38px; border-radius: 50%; background: var(--bsp-red-soft); color: var(--bsp-red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.b2b-tile .ico svg { width: 20px; height: 20px; }
.b2b-tile b { display: block; font-size: 15px; margin-bottom: 3px; }
.b2b-tile .txt { font-size: 13.5px; color: var(--bsp-muted); line-height: 1.5; }
.b2b-tile .txt a { color: var(--bsp-red); font-weight: 600; }
.b2b-steps { display: flex; gap: 18px; margin: 12px 0 24px; }
.b2b-step { flex: 1; display: flex; gap: 12px; }
.b2b-step .num { width: 28px; height: 28px; border-radius: 50%; background: var(--bsp-red); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.b2b-step b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.b2b-step .s { font-size: 13px; color: var(--bsp-muted); line-height: 1.5; }
.b2b-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.b2b-cta .q { font-size: 13.5px; color: var(--bsp-muted); }
.b2b-cta .q a { color: var(--bsp-red); font-weight: 600; }

/* ===================================================================
   FORMS / CART / ACCOUNT
   =================================================================== */
.page-title { font-size: 30px; font-weight: 700; margin: 8px 0 6px; }
.page-lead { color: var(--bsp-muted); margin: 0 0 26px; font-size: 15px; }
.card-bsp { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 26px; background: #fff; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; border: 1.5px solid var(--bsp-line); border-radius: 8px; padding: 11px 14px;
  font-family: var(--bsp-font); font-size: 14px; outline: none; transition: border-color .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--bsp-red); }
.form-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--bsp-muted); margin-bottom: 16px; }

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--bsp-muted); padding: 12px; border-bottom: 2px solid var(--bsp-line); }
.cart-table td { padding: 16px 12px; border-bottom: 1px solid var(--bsp-line); vertical-align: middle; }
.cart-prod { display: flex; gap: 14px; align-items: center; }
.cart-prod img { width: 76px; height: 58px; object-fit: contain; border: 1px solid var(--bsp-line); border-radius: 8px; padding: 4px; mix-blend-mode: multiply; }
.cart-summary { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 24px; background: var(--bsp-light); }
.cart-summary .line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; }
.cart-summary .total { border-top: 1px solid var(--bsp-line); margin-top: 10px; padding-top: 14px; font-size: 20px; font-weight: 700; }
.qty--cart input { width: 46px; }
.qty--busy { opacity: .55; pointer-events: none; }
.cart-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.cart-coupon { display: flex; flex-direction: column; gap: 6px; }
.cart-coupon__label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bsp-muted); }
.cart-coupon__field { display: flex; gap: 8px; }
.cart-coupon__field input { height: 44px; width: 260px; border: 1.5px solid var(--bsp-line); border-radius: var(--bsp-radius); padding: 0 14px; background: #fff; font-family: var(--bsp-font); font-size: 14px; color: var(--bsp-text); outline: none; transition: border-color .15s; }
.cart-coupon__field input:focus { border-color: var(--bsp-red); }
.cart-coupon__field .btn-bsp { padding: 0 20px; height: 44px; font-size: 14px; }
.cart-coupon__error { font-size: 13px; color: var(--bsp-red); }
.cart-coupon__applied { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px dashed var(--bsp-green); border-radius: var(--bsp-radius); background: #f2fbf4; font-size: 14px; }
.cart-coupon__applied button { border: 0; background: none; padding: 0; font-family: var(--bsp-font); font-size: 13px; color: var(--bsp-muted); text-decoration: underline; cursor: pointer; }
.cart-coupon__applied button:hover { color: var(--bsp-red); }

/* ===================================================================
   TOAST
   =================================================================== */
.toast-bsp {
  position: fixed; right: 22px; bottom: 22px; z-index: 500; background: #fff; border: 1px solid var(--bsp-line);
  border-left: 4px solid var(--bsp-green); border-radius: 10px; box-shadow: var(--bsp-shadow); padding: 14px 18px;
  display: flex; gap: 12px; align-items: center; transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: all .25s; max-width: 340px; font-size: 14px;
}
.toast-bsp.show { transform: translateY(0); opacity: 1; }
.toast-bsp .ic { color: var(--bsp-green); flex: none; }

/* cookie note */
.cookie-note {
  position: fixed; left: 18px; bottom: 18px; z-index: 400; max-width: 380px; background: #fff;
  border: 1px solid var(--bsp-line); border-radius: 14px; box-shadow: var(--bsp-shadow); padding: 18px 20px;
}
.cookie-note h5 { margin: 0 0 8px; font-size: 15px; }
.cookie-note p { font-size: 12.5px; color: var(--bsp-muted); margin: 0 0 14px; }
.cookie-note__row { display: flex; gap: 10px; align-items: center; }
.cookie-note a { color: var(--bsp-text); text-decoration: underline; font-size: 12.5px; }

/* ===================================================================
   MOBILE OFFCANVAS
   =================================================================== */
.mobile-nav { position: fixed; inset: 0 30% 0 0; background: #fff; z-index: 320; transform: translateX(-100%); transition: transform .25s; overflow-y: auto; box-shadow: var(--bsp-shadow); }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav__head { background: var(--bsp-red-dark); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.mobile-nav__head button { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.mobile-nav li a { display: block; padding: 11px 18px; border-bottom: 1px solid var(--bsp-line); font-weight: 500; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 310; display: none; }
.backdrop.open { display: block; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3,1fr); }
  .usp__grid { grid-template-columns: repeat(3,1fr); row-gap: 26px; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .country-list { columns: 4; }
  .header__nav { display: none; }
}
@media (max-width: 900px) {
  .header .container-bsp { height: 70px; gap: 14px; }
  .header__logo img { width: 140px; }
  .megamenu { display: none; }
  .header__burger { display: inline-flex; align-items:center; justify-content:center; width: 44px; height: 44px; border: 1px solid var(--bsp-line); border-radius: 8px; background: #fff; cursor: pointer; }
  .header__actions { gap: 14px; }
  .header__action .lbl { display: none; }
  .topbar__claim { font-size: 12px; }
  .topbar__right .muted, .topbar__wish { display: none; }
  /* Finder zostaje w stickybarze i menu mobilnym — w topbarze zabrakłoby miejsca */
  .topbar__finder { display: none; }
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .catlayout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .finder__box { grid-template-columns: 1fr; }
  .about__grid, .versand-grid, .showcase { grid-template-columns: 1fr; gap: 22px; }
  .hero__title { font-size: 32px; }
  .country-list { columns: 3; }
  .footer__top-in { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 26px; }
  .footer__logo img { width: 160px; }
  .footer__icons { flex-direction: column; align-items: center; gap: 16px; }
  .products-grid, .products-grid--3 { grid-template-columns: repeat(2,1fr); }
  .cart-hide-sm { display: none; }
}
/* ===================================================================
   BRAND-MENÜ VARIANTEN (A / B / C)
   =================================================================== */
/* gemeinsame Kachel */
.mmtile { display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--bsp-line); border-radius:10px; background:#fff; transition:.15s; }
.mmtile:hover { border-color:var(--bsp-red); background:var(--bsp-red-soft); transform:translateY(-2px); }
.mmtile__mono { width:38px; height:38px; flex:none; border-radius:9px; background:var(--bsp-red); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; letter-spacing:.3px; }
.mmtile__t b { font-size:13.5px; font-weight:600; line-height:1.12; display:block; color:var(--bsp-text); }
.mmtile__t small { font-size:11.5px; color:var(--bsp-muted); }
.mmtile:hover .mmtile__t b { color:var(--bsp-red); }
.mmtile.hide { display:none; }

/* Variante A – Bar + Mega-Panel mit Suche & A–Z */
.mma { background:var(--bsp-red-dark); position:relative; }
.mma__bar { display:flex; align-items:center; gap:6px; height:52px; color:#fff; font-size:13.5px; font-weight:600; }
.mma__all { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.18); border:0; color:#fff; font-family:var(--bsp-font); font-weight:600; font-size:13.5px; padding:9px 14px; border-radius:8px; cursor:pointer; }
.mma__all:hover, .mma.open .mma__all { background:rgba(0,0,0,.32); }
.mma__bicon { width:18px; height:18px; display:inline-flex; }
.mma__b { color:#fff; padding:8px 11px; border-radius:7px; white-space:nowrap; }
.mma__b:hover { background:rgba(0,0,0,.18); color:#fff; }
.mma__more { margin-left:auto; color:#fff; opacity:.92; cursor:pointer; white-space:nowrap; }
.mma__more:hover { opacity:1; color:#fff; }
.mma__panelwrap { position:relative; }
.mma__panel { position:absolute; top:6px; left:0; right:0; z-index:120; background:#fff; border:1px solid var(--bsp-line); border-radius:0 0 14px 14px; box-shadow:var(--bsp-shadow); padding:18px; display:none; }
.mma.open .mma__panel { display:block; }
.mma__top { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.mma__search { position:relative; flex:1; max-width:340px; }
.mma__search input { width:100%; height:42px; border:1.5px solid var(--bsp-line); border-radius:22px; padding:0 16px 0 42px; font-family:var(--bsp-font); font-size:14px; outline:none; }
.mma__search input:focus { border-color:var(--bsp-red); }
.mma__search .ic { position:absolute; left:15px; top:11px; width:18px; height:18px; color:var(--bsp-muted); }
.mma__az { display:flex; flex-wrap:wrap; gap:4px; }
.mma__az span { min-width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--bsp-muted); cursor:pointer; padding:0 6px; }
.mma__az span.on { background:var(--bsp-red); color:#fff; }
.mma__az span:hover { background:var(--bsp-red-soft); color:var(--bsp-red); }
.mma__az span.on:hover { color:#fff; }
.mma__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-height:360px; overflow:auto; }
.mma__empty { color:var(--bsp-muted); font-size:14px; padding:14px 4px; display:none; }

/* Variante B – roter Kopf + Kachel-Wand */
.mmb { background:#fff; border-bottom:1px solid var(--bsp-line); }
.mmb__head { background:var(--bsp-red-dark); color:#fff; font-weight:600; font-size:15px; }
.mmb__head .container-bsp { display:flex; align-items:center; gap:9px; padding-top:13px; padding-bottom:13px; }
.mmb__ico { width:20px; height:20px; }
.mmb__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:18px 0; }

/* Variante C – eleganter Chip-Balken */
.mmc { background:var(--bsp-red-dark); }
.mmc__row { list-style:none; margin:0; padding:9px 0; display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.mmc__item { position:relative; }
.mmc__chip { display:flex; align-items:center; gap:7px; color:#fff; font-size:13.5px; font-weight:600; padding:8px 13px; border-radius:8px; white-space:nowrap; }
.mmc__dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); }
.mmc__item:hover .mmc__chip { background:#fff; color:var(--bsp-red); }
.mmc__item:hover .mmc__dot { display:none; }
.mmc__dd { position:absolute; top:100%; left:0; z-index:120; min-width:220px; background:#fff; border:1px solid var(--bsp-line); border-radius:0 0 10px 10px; box-shadow:var(--bsp-shadow); padding:8px; display:none; max-height:70vh; overflow:auto; }
.mmc__item:hover .mmc__dd { display:block; }
.mmc__dd a { display:block; padding:7px 12px; font-size:13.5px; border-radius:6px; color:var(--bsp-text); }
.mmc__dd a::before { content:"•"; color:var(--bsp-red); margin-right:8px; }
.mmc__dd a:hover { background:var(--bsp-red-soft); color:var(--bsp-red); }

/* Demo-Umschalter Menü-Variante */
.menu-switch { position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:350; background:#fff; border:1px solid var(--bsp-line); border-radius:30px; box-shadow:var(--bsp-shadow); padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.menu-switch b { font-weight:600; color:var(--bsp-muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; writing-mode:vertical-rl; transform:rotate(180deg); margin-bottom:2px; }
.menu-switch a { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--bsp-text); border:1px solid var(--bsp-line); }
.menu-switch a.on, .menu-switch a:hover { background:var(--bsp-red); color:#fff; border-color:var(--bsp-red); }

/* Variante A – zwei Spalten: Marke → Modell */
.mma__cols { display:grid; grid-template-columns:300px 1fr; gap:18px; min-height:300px; }
.mma__brands { max-height:360px; overflow:auto; border-right:1px solid var(--bsp-line); padding-right:8px; display:flex; flex-direction:column; gap:2px; }
.mma__brand { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; font-family:var(--bsp-font); font-weight:600; font-size:13.5px; color:var(--bsp-text); padding:7px 10px; border-radius:8px; cursor:pointer; }
.mma__brand:hover, .mma__brand.active { background:var(--bsp-red-soft); color:var(--bsp-red); }
.mma__brand .mmtile__mono { width:30px; height:30px; font-size:11px; border-radius:7px; }
.mma__bn { flex:1; }
.mma__cnt { font-size:11px; font-weight:600; color:#fff; background:#c9ced4; min-width:22px; height:20px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.mma__brand.active .mma__cnt { background:var(--bsp-red); }
.mma__brand.hide { display:none; }
.mma__models { padding:6px 4px; }
.mma__mhead { font-size:17px; font-weight:700; margin-bottom:14px; }
.mma__mhead span { font-size:12px; font-weight:500; color:var(--bsp-muted); margin-left:8px; }
.mma__mwrap { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.mma__mwrap a { border:1px solid var(--bsp-line); border-radius:8px; padding:7px 13px; font-size:13px; font-weight:500; color:var(--bsp-text); }
.mma__mwrap a:hover { border-color:var(--bsp-red); background:var(--bsp-red-soft); color:var(--bsp-red); }

/* Variante B – Modell-Flyout beim Hover */
.mmb__hint { font-weight:400; opacity:.85; font-size:13px; }
.mmtile { position:relative; }
.mmtile__fly { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:#fff; border:1px solid var(--bsp-line); border-radius:10px; box-shadow:var(--bsp-shadow); padding:12px; display:none; }
.mmtile:hover .mmtile__fly { display:block; }
.mmtile__flyhead { font-size:11.5px; font-weight:600; color:var(--bsp-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.mmtile__flywrap { display:flex; flex-wrap:wrap; gap:6px; max-height:180px; overflow:auto; }
.mmtile__flywrap a { font-size:12.5px; padding:5px 10px; border:1px solid var(--bsp-line); border-radius:7px; color:var(--bsp-text); }
.mmtile__flywrap a:hover { border-color:var(--bsp-red); color:var(--bsp-red); background:var(--bsp-red-soft); }

/* Variante C – Dropdown-Kopf */
.mmc__ddhead { font-size:11.5px; font-weight:600; color:var(--bsp-muted); text-transform:uppercase; letter-spacing:.03em; padding:4px 12px 8px; }

/* Marken-Logo-Karussell (Wariant A: pas tła, nagłówek jak Bestseller, kafle z podpisem) */
.brands-band { background:var(--bsp-light); border-top:1px solid #eef1f4; border-bottom:1px solid #eef1f4; padding:44px 0 40px; }
.brands-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.brands-sub { color:var(--bsp-muted); font-size:13.5px; margin:8px 0 0; }
.brands-count { background:var(--bsp-red-soft); color:var(--bsp-red); font-weight:700; font-size:12px; border-radius:999px; padding:3px 10px; margin-left:10px; vertical-align:2px; }
.brands-all { color:var(--bsp-red); font-weight:700; font-size:13.5px; white-space:nowrap; }
.brands-all:hover { color:var(--bsp-red); text-decoration:underline; }
.brandcar { position:relative; }
.brandcar__vp { overflow:hidden; padding:4px 2px 10px; }
.brandcar__track { display:flex; align-items:stretch; gap:12px; width:max-content; transition:transform .4s ease; will-change:transform; }
.brandcar__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%; border:1px solid var(--bsp-line); background:#fff; color:var(--bsp-text); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(20,30,50,.10); transition:border-color .15s, color .15s, opacity .15s; }
.brandcar__arrow:hover:not(:disabled) { border-color:var(--bsp-red); color:var(--bsp-red); }
.brandcar__arrow:disabled { opacity:0; pointer-events:none; }
.brandcar__arrow--prev { left:-16px; }
.brandcar__arrow--next { right:-16px; }
.brandlogo { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:138px; padding:16px 10px 12px; background:#fff; border:1px solid var(--bsp-line); border-radius:12px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.brandlogo__ic { display:block; width:100px; height:42px; background:#9aa3ad; transition:background .18s ease, transform .18s ease;
  transform:scale(var(--lsc,1)); /* --lsc: optyczna normalizacja wielkości per marka (bsp.js BRAND_LOGO_SCALE) */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.brandlogo__name { font-size:12.5px; font-weight:600; color:var(--bsp-text); white-space:nowrap; transition:color .18s ease; }
.brandlogo__mono { font-weight:800; font-size:22px; letter-spacing:.5px; color:#9aa3ad; white-space:nowrap; height:42px; display:flex; align-items:center; transition:color .18s ease; }
.brandlogo:hover { border-color:var(--bsp-red); box-shadow:0 10px 24px rgba(20,30,50,.12); transform:translateY(-3px); }
.brandlogo:hover .brandlogo__ic { background:var(--bsp-red); transform:scale(calc(var(--lsc,1) * 1.05)); }
.brandlogo:hover .brandlogo__name, .brandlogo:hover .brandlogo__mono { color:var(--bsp-red); }

@media (max-width: 1100px) {
  .mmb__grid { grid-template-columns:repeat(4,1fr); }
  .mma__cols { grid-template-columns:240px 1fr; }
}
@media (max-width: 900px) {
  .mma, .mmb, .mmc { display:none; }
  .menu-switch { top:auto; bottom:14px; right:14px; transform:none; flex-direction:row; }
  .menu-switch b { writing-mode:horizontal-tb; transform:none; margin:0 2px 0 0; }
}

@media (max-width: 560px) {
  .usp__grid { grid-template-columns: repeat(2,1fr); }
  .products-grid, .products-grid--3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcard__title { font-size: 12.5px; }
  .hero__title { font-size: 26px; }
  .hero__slide { min-height: 320px; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form input { min-width: 0; width: 100%; }
  .country-list { columns: 2; }
  .footer__grid { grid-template-columns: 1fr; row-gap: 26px; }
  .section__title { font-size: 21px; }
  .section__head--tabs { flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
  .tabs-bsp { gap: 20px; }
  .tabs-bsp__btn { font-size: 20px; padding: 0 0 8px; }
  .brandlogo { width: 112px; padding: 12px 8px 10px; gap: 8px; }
  .brandlogo__ic { width: 88px; height: 36px; }
  .brandlogo__name { font-size: 11.5px; }
  .brands-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .brandcar__arrow--prev { left: -8px; }
  .brandcar__arrow--next { right: -8px; }
  .bsp-ac { min-width: 0; }
  .bsp-ac-head .hint { display: none; }
}

/* ===================================================================
   NATYWNE STRONY OPENCART — skóra BSP
   Konto, Checkout, Suche, Error itd. używają markupu Bootstrap OC
   (.container / #content / .breadcrumb / .list-group / .btn-primary /
   .panel / .table / .form-control). Makieta NIE używa tych klas
   (ma własne *-bsp), więc override jest bezpieczny globalnie.
   =================================================================== */

/* Wyrównanie szerokości do headera (container-bsp = 1280) */
.container { width: 100%; max-width: 1280px; padding-left: 16px; padding-right: 16px; }
#content { padding-bottom: 46px; }

/* Breadcrumb OC -> lekki, bez szarego boxa (jak breadcrumb-bsp) */
.breadcrumb { background: transparent; border: 0; padding: 16px 0; margin: 0 0 20px; font-size: 13px; border-radius: 0; }
.breadcrumb > li { display: inline; }
.breadcrumb > li + li::before { content: "›"; padding: 0 9px; color: var(--bsp-muted); }
.breadcrumb > li > a { color: var(--bsp-muted); }
.breadcrumb > li > a:hover { color: var(--bsp-red); }

/* Nagłówki treści */
#content h1, #content h2, #content h3 { color: var(--bsp-text); font-weight: 600; }
#content h1 { font-size: 30px; margin: 4px 0 22px; }
#content h2 { font-size: 20px; margin: 28px 0 14px; }
#content h2:first-of-type { margin-top: 6px; }

/* Sidebar konta (list-group) -> karta BSP */
.list-group { border-radius: var(--bsp-radius); overflow: hidden; border: 1px solid var(--bsp-line); box-shadow: var(--bsp-shadow-sm); background: #fff; }
.list-group-item { border: 0; border-bottom: 1px solid var(--bsp-line); padding: 13px 18px; font-weight: 500; font-size: 14px; color: var(--bsp-text); background: #fff; transition: background .12s, color .12s; }
.list-group-item:last-child { border-bottom: 0; }
.list-group-item:hover, .list-group-item:focus { background: var(--bsp-red-soft); color: var(--bsp-red); text-decoration: none; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background: var(--bsp-red); border-color: var(--bsp-red); color: #fff; }

/* Dashboard konta — grupy linków jako karty */
#account-account #content .list-unstyled { background: #fff; border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); box-shadow: var(--bsp-shadow-sm); padding: 4px 18px; margin-bottom: 8px; }
#account-account #content .list-unstyled > li { border-bottom: 1px solid var(--bsp-line); }
#account-account #content .list-unstyled > li:last-child { border-bottom: 0; }
#account-account #content .list-unstyled > li > a { display: block; padding: 11px 0; color: var(--bsp-text); font-size: 14.5px; }
#account-account #content .list-unstyled > li > a:hover { color: var(--bsp-red); padding-left: 4px; transition: padding .12s, color .12s; }

/* Przyciski OC -> BSP */
.btn { border-radius: var(--bsp-radius); font-weight: 600; }
.btn-primary, .btn-primary.focus, .btn-primary:focus { background: var(--bsp-red); border-color: var(--bsp-red); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:active:hover { background: var(--bsp-red-hover); border-color: var(--bsp-red-hover); color: #fff; }
.btn-default { background: #fff; border: 1.5px solid var(--bsp-line); color: var(--bsp-text); }
.btn-default:hover, .btn-default:focus, .btn-default:active { border-color: var(--bsp-red); color: var(--bsp-red); background: #fff; }
.buttons { margin-top: 22px; }
.buttons::after { content: ''; display: table; clear: both; }

/* Panele / well -> karta BSP */
.panel { border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); box-shadow: var(--bsp-shadow-sm); overflow: hidden; }
.panel-heading { background: var(--bsp-light); border-bottom: 1px solid var(--bsp-line); font-weight: 600; color: var(--bsp-text); padding: 14px 18px; }
.panel-title { font-size: 16px; }
.panel-body { padding: 18px; }
.well { background: #fff; border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); box-shadow: var(--bsp-shadow-sm); }

/* Tabele */
.table { background: #fff; }
.table > thead > tr > th { border-bottom: 2px solid var(--bsp-line); color: var(--bsp-text); font-weight: 600; background: var(--bsp-light); }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > thead > tr > th { border-color: var(--bsp-line); }
.table > tbody > tr > td { vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--bsp-red-soft); }

/* Formularze */
.form-control { border: 1.5px solid var(--bsp-line); border-radius: 8px; box-shadow: none; height: 42px; }
.form-control:focus { border-color: var(--bsp-red); box-shadow: none; }
select.form-control { height: 42px; }
textarea.form-control { height: auto; }
.control-label { font-weight: 500; }

/* input-group (Datepicker, Coupon, Menge…) — input + Button bündig, kein Versatz */
.input-group .form-control { height: 42px; }
.input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-btn > .btn { height: 42px; }
.input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.input-group-btn:first-child > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }
.input-group-addon { border: 1.5px solid var(--bsp-line); background: var(--bsp-light); border-radius: 8px; }
.input-group-addon:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Alerty */
.alert { border-radius: var(--bsp-radius); border: 0; }
.alert-success { background: #e7f6ec; color: #1c6b34; }
.alert-danger { background: var(--bsp-red-soft); color: var(--bsp-red); }
.alert-info { background: #eef4fb; color: #2a5b8f; }

/* Paginacja natywna OC (np. Bestellverlauf) */
.pagination { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pagination > li > a, .pagination > li > span { position: static; float: none; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--bsp-line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--bsp-text); background: #fff; margin: 0; }
.pagination > li.active > span, .pagination > li.active > a, .pagination > li > a:hover { border-color: var(--bsp-red); color: var(--bsp-red); background: #fff; }

/* ===================================================================
   MOBILE — poprawki po audycie layoutu na 390 px
   (stickybar, header-search, PDP, koszyk/kasa, siatka produktów)
   =================================================================== */
@media (max-width: 900px) {
  /* Sticky bar: 5 linków + koszyk nie mieszczą się w jednym rzędzie.
     Na mobile zostaje CTA (Finder) i koszyk — reszta jest w drawerze. */
  .stickybar .container-bsp { height: 50px; gap: 12px; }
  .stickybar .container-bsp > a:not(.nav-finder):not(.stickybar__cart) { display: none; }
  .stickybar .nav-finder { white-space: nowrap; font-size: 14.5px; }

  /* Search: przy burgerze, logo i akcjach zostawało mu ~76 px.
     Dostaje własny wiersz pod nagłówkiem. */
  .header .container-bsp { flex-wrap: wrap; height: auto; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .header__search { order: 9; flex: 1 0 100%; max-width: none; }

  /* Karta produktu: kolumny gridu muszą móc się skurczyć poniżej
     swojej min-content, inaczej cała strona rozpycha się do 835 px. */
  .pdp > * { min-width: 0; }
  .tabs__nav { overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .tabs__nav::-webkit-scrollbar { display: none; }
  .tabs__btn { flex: none; white-space: nowrap; }
  .pdp__delivery .row { flex-wrap: wrap; }
  .pdp__delivery .row .k { width: 100%; }
  .spec-list li { flex-wrap: wrap; }
  .spec-list li b { width: 100%; }
  .service-box { flex-wrap: wrap; }
  .ship-box { flex-direction: column; gap: 16px; }
  .pay-list li { flex-wrap: wrap; gap: 10px 20px; }
  .pay-list__logos { width: 100%; }
  .b2b-grid { grid-template-columns: 1fr; }
  .b2b-steps { flex-direction: column; gap: 12px; }

  /* Koszyk: podsumowanie ląduje pod listą pozycji */
  .cart-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Siatka produktów: jeden kafel pod drugim */
  .products-grid, .products-grid--3 { grid-template-columns: 1fr; gap: 14px; }
  .pcard__title { font-size: 14.5px; }

  /* Tabela koszyka/kasy (549 px) → karty */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: auto; }
  .cart-table tr { position: relative; border: 1px solid var(--bsp-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
  .cart-table td { border: 0; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .cart-table td:first-child { display: block; padding: 0 30px 10px 0; }
  .cart-table td[data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bsp-muted); }
  .cart-table td:last-child { position: absolute; top: 6px; right: 8px; padding: 0; }
  /* po rozłożeniu tabeli na bloki trzeba ponowić ukrycie kolumny „Modell” */
  .cart-table .cart-hide-sm { display: none; }
  .cart-prod img { width: 64px; height: 50px; }
  .cart-actions { flex-direction: column; align-items: stretch; }
  .cart-actions .btn-ghost { justify-content: center; }
  .cart-coupon__field input { flex: 1; width: auto; min-width: 0; }
}

/* ===================================================================
   MOBILE-PAKET (Startseite): Finder-Button, Karussells, „Mehr anzeigen",
   Footer — nur ≤768px, Desktop unverändert.
   =================================================================== */
.bsp-more { display: none; margin: 16px auto 0; background: #fff; border: 1.5px solid var(--bsp-red); color: var(--bsp-red); font-family: var(--bsp-font); font-weight: 600; font-size: 14px; padding: 9px 24px; border-radius: var(--bsp-radius); cursor: pointer; transition: background .15s, color .15s; }
.bsp-more:hover, .bsp-more:focus { background: var(--bsp-red); color: #fff; }
.about__more, .versand-more { text-align: center; }

@media (max-width: 768px) {
  .bsp-more { display: inline-block; }

  /* (1) Finder: „Suchen" so hoch wie die Schritte */
  .finder__box .btn-bsp { min-height: 56px; width: 100%; justify-content: center; }

  /* (2) Produkte als horizontales Wisch-Karussell */
  .tabpane-bsp .products-grid {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 12px; scrollbar-width: none;
  }
  .tabpane-bsp .products-grid::-webkit-scrollbar { display: none; }
  .tabpane-bsp .products-grid .pcard { flex: 0 0 80%; scroll-snap-align: start; }

  /* (3) USP als Karussell + ~25 % kleiner */
  .usp__grid {
    display: flex; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .usp__grid::-webkit-scrollbar { display: none; }
  .usp__item { flex: 0 0 44%; scroll-snap-align: start; padding: 4px; }
  .usp__ico { width: 48px; height: 48px; margin-bottom: 9px; }
  .usp__txt { font-size: 11.5px; line-height: 1.3; }

  /* (4) „Über uns" nach ~650 Zeichen einklappen */
  #aboutGrid.is-collapsed { max-height: 340px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg,#000 74%,transparent); mask-image: linear-gradient(180deg,#000 74%,transparent); }

  /* (5) Länderliste nach ~5 Reihen einklappen */
  #countryList.is-collapsed { max-height: 150px; overflow: hidden; }

  /* (6) Footer aufgeräumt: zentriert, Formular volle Breite */
  .footer__top-in { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; padding: 32px 0; }
  .footer__logo img { width: 150px; }
  .footer__nl-txt h3 { font-size: 24px; }
  .footer__nl-form { width: 100%; max-width: 420px; }
  .footer__nl-form .newsletter__form { flex-direction: column; }
  .footer__nl-form .newsletter__form input { width: 100%; }
  .footer__nl-form .newsletter__form .btn-bsp { width: 100%; justify-content: center; }
  .footer__nl-note, .footer__nl-check { justify-content: center; text-align: center; }
  .footer__icons { flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
  .footer__pay { justify-content: center; }
  .footer__ship { justify-content: center; flex-wrap: wrap; }
}

/* ===================================================================
   BSP TRUST — Bewertungen (karuzela opinii w stylu Trusted Shops)
   Dane: bsp/data/bsp_trust.json, szablon: extension/module/bsp_trust.twig
   =================================================================== */
:root {
  --bsp-star:       #ffb400;  /* gwiazdki ocen                  */
  --bsp-star-off:   #dfe3e8;  /* gwiazdki puste                 */
  --bsp-verified:   #1f6fd6;  /* znaczek zweryfikowanego zakupu */
}
.reviews { border-top:1px solid var(--bsp-line); }
.rev__head { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.rev__head .rev-stars { --star:19px; }
.rev__avg  { font-size:20px; font-weight:700; }
.rev__word { font-size:16px; font-weight:500; }
.rev__count{ color:var(--bsp-muted); font-size:15px; }
.rev__mark { display:flex; }
.rev__mark svg { width:30px; height:30px; }
.rev-stars { display:inline-flex; gap:2px; --star:16px; }
.rev-stars svg { width:var(--star); height:var(--star); color:var(--bsp-star); }
.rev-stars svg.off { color:var(--bsp-star-off); }
.rev__body { display:flex; align-items:stretch; gap:12px; }
.rev__summary { flex:none; width:172px; border:1px solid var(--bsp-line); border-radius:var(--bsp-radius);
  background:#fff; box-shadow:var(--bsp-shadow-sm); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:20px 14px; text-align:center; }
.rev__summary .rev-stars { --star:20px; }
.rev__summary b { font-size:22px; }
.rev__summary span { font-size:15px; }
.rev__summary svg.mark { width:38px; height:38px; margin-top:4px; }
.rev__arrow { flex:none; align-self:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--bsp-line);
  background:#fff; color:var(--bsp-text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s; }
.rev__arrow:hover:not(:disabled) { border-color:var(--bsp-red); color:var(--bsp-red); }
.rev__arrow:disabled { opacity:.3; cursor:default; }
.rev__vp { flex:1; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; scroll-snap-type:x mandatory; }
.rev__vp::-webkit-scrollbar { display:none; }
.rev__track { display:flex; gap:14px; width:max-content; }
.rcard { flex:none; width:272px; scroll-snap-align:start; border:1px solid var(--bsp-line);
  border-radius:var(--bsp-radius); background:#fff; box-shadow:var(--bsp-shadow-sm);
  padding:16px 18px; display:flex; flex-direction:column; gap:7px; box-sizing:border-box; }
.rcard__top { display:flex; align-items:center; justify-content:space-between; }
.rcard__verified { display:flex; color:var(--bsp-verified); cursor:help; }
.rcard__verified svg { width:17px; height:17px; }
.rcard__time { color:var(--bsp-muted); font-size:12.5px; }
.rcard__meta { display:flex; align-items:center; gap:7px; font-size:13px; }
.rcard__meta img { width:17px; height:13px; border-radius:2px; box-shadow:0 0 0 1px rgba(20,24,40,.12); }
.rcard__title { margin:0; font-size:14px; font-weight:700; }
.rcard__text { margin:0; font-size:13px; color:var(--bsp-text); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rcard.is-open .rcard__text { display:block; -webkit-line-clamp:unset; }
.rcard__more { margin-top:auto; padding-top:4px; font-size:13px; color:var(--bsp-verified); cursor:pointer; }
.rcard__more:hover { color:var(--bsp-verified); text-decoration:underline; }
.rev__foot { margin-top:18px; text-align:center; color:var(--bsp-muted); font-size:12.5px; }
.rev__foot b { color:var(--bsp-text); }
@media (max-width: 900px) {
  .rev__summary { display:none; }
  .rev__arrow { display:none; }
}
/* PDP: karuzela opinii jest ostatnią sekcją przed stopką — mniejszy dolny odstęp
   (main#product-product dokłada inline 30px padding-bottom) */
#product-product .reviews { padding-bottom: 8px; }
/* Kategoria: opinie są ostatnią sekcją nad stopką — mniejszy dolny odstęp
   (main#product-category ma inline 12px padding-bottom) */
#product-category .reviews { padding-bottom: 8px; }

/* ===================================================================
   KATEGORIE — Sidebar-Boxen (Zuletzt angesehen + WhatsApp),
   FAQ-Akkordeon, USP-Zeile, Händler-Banner (1:1 bsplate.de)
   =================================================================== */
.sidebar__sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bsp-line); }
.sidebar__sec h3 { font-size: 17px; margin: 0 0 10px; }

/* Zuletzt angesehene Artikel */
.sb-viewed__item { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bsp-line); }
.sb-viewed__item:last-child { border-bottom: 0; padding-bottom: 2px; }
.sb-viewed__img { display: flex; align-items: center; justify-content: center; width: 84px; height: 64px; border: 1px solid var(--bsp-line); border-radius: 6px; background: #fff; overflow: hidden; }
.sb-viewed__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sb-viewed__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--bsp-text); }
.sb-viewed__item:hover .sb-viewed__name { color: var(--bsp-red); }
.sb-viewed__price { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--bsp-text); }

/* WhatsApp-Box */
.sb-wa__link { display: flex; align-items: center; gap: 10px; }
.sb-wa__link img { width: 30px; height: 30px; flex: 0 0 auto; }
.sb-wa__link b { font-size: 20px; font-weight: 900; color: var(--bsp-text); letter-spacing: .01em; }
.sb-wa__link:hover b { color: var(--bsp-red); }
.sb-wa__hours { margin: 10px 0 0; font-size: 13.5px; color: var(--bsp-text); }
.sb-wa__hours b { font-weight: 800; }

/* FAQ-Akkordeon (pod paginacją, nad opiniami) */
.cat-faq { margin: 26px 0 6px; border: 1px solid var(--bsp-line); border-radius: var(--bsp-radius); background: #fff; overflow: hidden; }
.cat-faq__item + .cat-faq__item { border-top: 1px solid var(--bsp-line); }
.cat-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 15px 20px; font-size: 15px; font-weight: 700; color: var(--bsp-text); }
.cat-faq__item summary::-webkit-details-marker { display: none; }
.cat-faq__item summary::before { content: "+"; font-size: 18px; font-weight: 700; line-height: 1; flex: 0 0 auto; transform: translateY(1px); }
.cat-faq__item summary:hover { color: var(--bsp-red); }
.cat-faq__item[open] summary { color: var(--bsp-red); }
.cat-faq__item[open] summary::before { content: "\2212"; }
.cat-faq__body { padding: 14px 20px 16px; border-top: 1px solid var(--bsp-line); font-size: 14px; line-height: 1.65; color: var(--bsp-muted); }
.cat-faq__body p { margin: 0 0 10px; }
.cat-faq__body p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .cat-faq__item summary { padding: 13px 14px; font-size: 14px; }
  .cat-faq__body { padding: 12px 14px 14px; }
}

/* Sekcje pod listingiem kategorii = 100% szerokości kontenera.
   .cat-rev: moduł opinii renderuje własny .container-bsp — wewnątrz strony
   kategorii neutralizujemy go, żeby krawędzie zrównały się z FAQ/USP/banerem. */
.cat-rev .container-bsp { max-width: none; padding: 0; }


/* === PRZELACZNIK JEZYKOW (topbar, 10 flag) === */
.topbar__lang { position: relative; }
.topbar__lang-btn { display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--bsp-text); padding: 4px 2px; }
.topbar__lang-btn img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: block; }
.topbar__lang-code { font-weight: 600; font-size: 12.5px; }
.topbar__lang-caret { font-size: 9px; color: var(--bsp-muted); }
.topbar__lang-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 320; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--bsp-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); min-width: 176px; max-height: 72vh; overflow: auto; }
.topbar__lang-list li { margin: 0; }
.topbar__lang-list a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; color: var(--bsp-text); font-size: 13px; white-space: nowrap; text-decoration: none; }
.topbar__lang-list a:hover { background: #f4f6f8; }
.topbar__lang-list a.is-active { font-weight: 700; color: var(--bsp-red); }
.topbar__lang-list img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }