/**
 * Custom styles for the "czesci24" child theme (parent: hummingbird).
 *
 * Loaded automatically after the parent theme.css with priority 1000
 * (FrontController::setMedia) -> overrides the theme without rebuilding SCSS.
 *
 * Per-shop scoping via body.shop-<id> (added in layouts/layout-both-columns.tpl):
 *     shop 1  ->  e-czesci24.pl       (.shop-1)  niebieski
 *     shop 2  ->  opelczesci.com.pl   (.shop-2)  Opel  — zolty #fdbe0f
 *     shop 3  ->  fordczesci.com      (.shop-3)  Ford  — niebieski
 *
 * Uklad naglowka "Oplex" (3 wiersze) renderowany jest w
 * templates/_partials/header.tpl (override). Tutaj sa jego style.
 */

/* =====================================================================
   UKLAD NAGLOWKA "OPLEX" — wspolny dla wszystkich sklepow
   Kolory paskow biora sie ze zmiennych --oplex-* ustawianych per-sklep.
   ===================================================================== */

/* Wiersz 1 — belka promocyjna (dark theme: tło OPLEX) */
.oplex-promobar {
  background-color: #181818;
  color: #d1d5db;
  font-size: 0.85rem;
  border: 0;
}
.oplex-promobar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 1.5rem;
  padding: 0.4rem 0;
}
.oplex-promobar__item,
.oplex-promobar a.oplex-promobar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #d1d5db;
  text-decoration: none;
}
.oplex-promobar a.oplex-promobar__item:hover { color: #facc15; }

/* PS searchbar autocomplete — single line z miniaturką */
.ps-searchbar__dropdown,
.autocomplete-suggestions {
  max-width: 560px;
  font-size: .85rem;
}
.autocomplete-suggestion,
.ps-searchbar__dropdown a,
.ps-searchbar__dropdown li > a,
.ps-searchbar__dropdown .autocomplete-suggestion {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  padding: .4rem .75rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #f1f5f9;
}
.autocomplete-suggestion:last-child,
.ps-searchbar__dropdown a:last-child { border-bottom: 0; }
.autocomplete-thumbnail {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 4px;
}
.ps-searchbar__dropdown .product,
.autocomplete-suggestion .product {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .85rem;
  line-height: 1.3;
  color: #1f2937;
  text-transform: none;
  font-weight: 500;
}

/* Chip wybranego pojazdu w promobar (lewy róg) — zachowane flex-end z bazowego stylu,
   chip ma margin-right:auto żeby leciał na lewo a tekst zostawał po prawej */
.oplex-vehicle-chip {
  display: inline-flex; align-items: center;
  gap: .4rem;
  margin-right: auto;
  padding: .15rem .55rem .15rem .5rem;
  background: #f97316;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .12s;
}
.oplex-vehicle-chip:hover { background: #ea580c; }
.oplex-vehicle-chip .material-icons { font-size: 16px; }
.oplex-vehicle-chip__label { white-space: nowrap; }
.oplex-vehicle-chip__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: .1rem;
  background: rgba(0,0,0,.18);
  color: #fff;
  border: 0; border-radius: 50%;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.oplex-vehicle-chip__clear:hover { background: rgba(0,0,0,.35); }
.oplex-promobar .material-icons {
  font-size: 1.15em;
  line-height: 1;
}

/* Wiersz 2 — pasek logo + ikony zaufania + konto (dark: #1e1e1e) */
.oplex-featurebar {
  background-color: #1e1e1e;
  border: 0;
}
.oplex-featurebar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 0;
}
.oplex-featurebar__logo {
  flex: 0 0 auto;
}
.oplex-featurebar__logo img,
.oplex-featurebar__logo .logo {
  max-height: 3.5rem;
  max-width: 12rem;
  width: auto;
}
.oplex-featurebar__reassurance {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
}
.oplex-reassurance__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: color .15s ease;
}
.oplex-reassurance__item .material-icons {
  font-size: 2rem;
  color: #3b82f6;
  line-height: 1;
  transition: color .15s ease;
}
.oplex-reassurance__item:hover .material-icons,
.oplex-reassurance__item:hover .oplex-reassurance__text,
.oplex-reassurance__item:hover .oplex-reassurance__text strong {
  color: #facc15;
}
.oplex-reassurance__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 0.82rem;
  color: #d1d5db;
}
.oplex-reassurance__text strong {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  color: #f9fafb;
}
.oplex-featurebar__user {
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 0.5rem;
}
/* konto + koszyk (hook displayNav2) — biały tekst na ciemnym featurebar */
.oplex-featurebar__user .header-block,
.oplex-featurebar__user .header-block__title,
.oplex-featurebar__user .header-block__action-btn,
.oplex-featurebar__user .header-block__icon,
.oplex-featurebar__user a,
.oplex-featurebar__user .material-icons {
  color: #f9fafb;
}
.oplex-featurebar__user a:hover,
.oplex-featurebar__user .header-block__action-btn:hover {
  color: #facc15;
}
.oplex-featurebar__user .header-block__badge {
  background-color: #facc15;
  color: #111111;
}

/* Wiersz 3 — pasek menu (dark: tło OPLEX) */
.oplex-menubar {
  background-color: #181818;
  border: 0;
  position: relative;
}
.oplex-menubar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--oplex-accent, #f97316);
  pointer-events: none;
}
.oplex-menubar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--oplex-accent, #f97316);
  pointer-events: none;
}
.oplex-menubar__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.oplex-menubar__model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 16rem;
  padding: 0.85rem 1.25rem;
  background-color: var(--oplex-dark, #2a2a2a);
  color: var(--oplex-dark-text, #ffffff);
  border: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.oplex-menubar__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  min-width: 0;
}
/* menu poziome na pasku marki */
.oplex-menubar__nav .ps-mainmenu__tree-link,
.oplex-menubar__nav .ps-mainmenu__tree-dropdown-toggle {
  color: var(--oplex-bar-text, #ffffff);
}
.oplex-menubar__nav .ps-mainmenu__tree-link:hover,
.oplex-menubar__nav .ps-mainmenu__tree-dropdown-toggle:hover {
  color: var(--oplex-bar-text-hover, rgba(255, 255, 255, 0.75));
}
/* wyszukiwarka po prawej — zaokraglony "pill" z lupa + przyciskiem "Szukaj" */
.oplex-menubar__nav .ps-searchbar {
  margin-left: auto;
  position: relative;
  width: 100%;
  max-width: 380px;
}
/* Górna szukajka — input biały (rounded) + osobny pomarańczowy button z odstępem */
.oplex-menubar__nav .ps-searchbar__form {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  height: 42px;
  padding: 0;
}
.oplex-menubar__nav .ps-searchbar__form:focus-within { box-shadow: none !important; }
.oplex-menubar__nav .ps-searchbar__container {
  flex: 1 1 auto;
  position: relative;
  background: #ffffff !important;
  border-radius: 6px;
  height: 42px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.oplex-menubar__nav .ps-searchbar__magnifier {
  color: #6b7280;
  left: .85rem;
  font-size: 20px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.oplex-menubar__nav .ps-searchbar__input,
.oplex-menubar__nav .js-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  width: 100%;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  color: #1a1a1a !important;
  padding: 0 .6rem 0 2.5rem;
  font-size: .9rem;
}
.oplex-menubar__nav .ps-searchbar__submit {
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  height: 42px;
  padding: 0 1.5rem;
  background: var(--oplex-accent, #f97316);
  color: var(--oplex-on-accent, #ffffff);
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.oplex-menubar__nav .ps-searchbar__submit:hover {
  background: var(--oplex-accent-hover, #ea580c);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  filter: none;
}
.oplex-menubar__nav .ps-searchbar__submit:active { transform: translateY(1px); }
.oplex-menubar__nav .ps-searchbar__submit:focus { outline: none; }
.oplex-menubar__nav .ps-searchbar__clear {
  position: static;
  transform: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #9ca3af;
  padding: 0 .35rem;
  margin: 0;
  box-shadow: none;
  outline: none;
}
.oplex-menubar__nav .ps-searchbar__clear:hover { background: transparent; color: #6b7280; }

/* na desktopie box "szukaj po modelu" ma szerokosc lewej kolumny (col-lg-3),
   zeby siedzial dokladnie nad lista modeli */
@media (min-width: 992px) {
  .oplex-menubar__model {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
  }
}
/* na mobile chowamy box "szukaj po modelu" (menu przechodzi do offcanvas) */
@media (max-width: 991.98px) {
  .oplex-menubar__model { display: none; }
  .oplex-promobar__inner { justify-content: center; }
}

/* =====================================================================
   LEWA KOLUMNA (uklad "Oplex") — bloki z ciemnym naglowkiem + biala lista
   ===================================================================== */
#left-column { padding-top: 1.25rem; }

#left-column .left-block,
#left-column .oplex-info {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* ciemny naglowek bloku (jak "SZUKAJ PO MODELU" / "INFORMACJE") */
#left-column .left-block__title,
#left-column .oplex-info .left-block__title {
  display: block;
  margin: 0;
  padding: 0.8rem 1.1rem;
  background-color: var(--oplex-dark, #2a2a2a);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 0;
}
/* tekst ORAZ link w naglowku zawsze bialy ("Strona glowna" to zagniezdzony <a>) */
#left-column .left-block__title a,
#left-column .left-block__title-link,
#left-column .left-block__title a:hover,
#left-column .left-block__title-link:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Wiersze listy kategorii / modeli.
   Border-bottom siedzi na RODZICU (.category-tree__item-header), nie na linku/przycisku,
   zeby kreska byla jedna ciagla, a nie skladana z dwoch (rozjazd na styku link/strzalka). */
#left-column .category-tree__item-header {
  display: flex;
  align-items: stretch;        /* link i przycisk maja te sama wysokosc */
  border-bottom: 1px solid #eeeeee;
}
#left-column .category-tree__item:last-child > .category-tree__item-header {
  border-bottom: 0;
}

#left-column .category-tree__item-link,
#left-column .category-tree .accordion-button {
  display: flex;
  align-items: center;          /* tekst/strzalka pionowo na srodku komorki */
  gap: 0.35rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 0;             /* zostawiamy border tylko na header */
  color: #333333;
  font-size: 0.9rem;
  text-decoration: none;
  background: transparent;
}
#left-column .category-tree__item-link {
  flex: 1 1 auto;
  min-width: 0;
}
#left-column .category-tree .accordion-button {
  flex: 0 0 auto;               /* przycisk strzalki: tylko ile potrzeba */
}
#left-column .category-tree__item-link::before {
  content: "\203A"; /* › */
  color: var(--bs-primary);
  font-weight: 700;
  line-height: 1;
}
#left-column .category-tree__item-link:hover {
  color: var(--bs-primary);
  background: #fafafa;
}

/* blok INFORMACJE */
.oplex-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.oplex-info__list li { margin: 0; }
.oplex-info__list a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid #eeeeee;
  color: #333333;
  font-size: 0.9rem;
  text-decoration: none;
}
.oplex-info__list a::before {
  content: "\203A";
  color: var(--bs-primary);
  font-weight: 700;
  line-height: 1;
}
.oplex-info__list a:hover { color: var(--bs-primary); background: #fafafa; }
.oplex-info__list li:last-child a { border-bottom: 0; }


/* =====================================================================
   TRESC STRONY GLOWNEJ (uklad "Oplex") — banner + 3 kafelki
   ===================================================================== */
/* demo-slider zastapiony naszym bannerem -> ukryty na stronie glownej */
.page-content--home .ps-imageslider { display: none; }
/* hero photo: styling w themes/czesci24/assets/css/oplex-hero.css (module-registered) */

/* Kafelki (4 na desktopie, 2 na mobile — auto-fit zapobiega blow-outowi) */
.oplex-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* mobile: 2 kol */
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
  .oplex-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.oplex-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem 1rem;
  min-width: 0;                /* pozwala kolumnie grid sie kurczyc */
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  text-decoration: none;
  color: #1a1a1a;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.oplex-tile:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  color: var(--bs-primary);
}
.oplex-tile__img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oplex-tile__img .material-icons {
  font-size: 42px;
  color: #3a3a3a;
}
/* gdy w kafelku jest ZDJECIE/BANER zamiast ikony -> pelna szerokosc kafelka */
.oplex-tile__img:has(img) {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: transparent;
}
.oplex-tile__img img,
.oplex-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* mozna tez wstawic <img> bezposrednio w <a class="oplex-tile"> (bez __img) */
.oplex-tile > img { margin-bottom: 0.2rem; }
.oplex-tile__label {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
  /* twardo zabezpieczamy przed wyjsciem poza kafelek przy dlugim tekscie */
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 575.98px) {
  .oplex-tile { padding: 1.25rem 0.75rem; }
  .oplex-tile__label { font-size: 0.85rem; }
}


/* =====================================================================
   WSPOLNE: bialy chevron w listach wyboru na ciemnym/markowym pasku
   ===================================================================== */
body.shop-1 .oplex-menubar .form-select,
body.shop-3 .oplex-menubar .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* ===================== e-czesci24.pl  (shop 1) — pomaranczowy ===================== */
body.shop-1 {
  --oplex-bar-bg: #f97316;
  --oplex-bar-text: #ffffff;
  --oplex-bar-text-hover: #ffe6d2;
  --oplex-dark: #2a2a2a;
  --oplex-dark-text: #ffffff;

  --oplex-accent: #f97316;
  --oplex-accent-hover: #ea580c;
  --oplex-on-accent: #ffffff;

  --bs-primary: #f97316;
  --bs-primary-rgb: 249, 115, 22;
  --bs-link-color: #f97316;
  --bs-link-color-rgb: 249, 115, 22;
  --bs-link-hover-color: #c2410c;
  --bs-link-hover-color-rgb: 194, 65, 12;
}
body.shop-1 .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #f97316;
  --bs-btn-border-color: #f97316;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #ea580c;
  --bs-btn-hover-border-color: #ea580c;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #c2410c;
  --bs-btn-active-border-color: #c2410c;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #f97316;
  --bs-btn-disabled-border-color: #f97316;
}


/* ===================== Opel - opelczesci.com.pl  (shop 2) — zolty #fdbe0f ===================== */
body.shop-2 {
  --oplex-bar-bg: #fdbe0f;
  --oplex-bar-text: #1a1a1a;
  --oplex-bar-text-hover: #000000;
  --oplex-dark: #2a2a2a;
  --oplex-dark-text: #ffffff;

  --oplex-accent: #fdbe0f;
  --oplex-accent-hover: #e9ab00;
  --oplex-on-accent: #1a1a1a;

  --bs-primary: #fdbe0f;
  --bs-primary-rgb: 253, 190, 15;
  /* linki na bialych podstronach: czytelne ciemne zloto */
  --bs-link-color: #8a6d00;
  --bs-link-color-rgb: 138, 109, 0;
  --bs-link-hover-color: #6b5400;
  --bs-link-hover-color-rgb: 107, 84, 0;
}
/* Badge koszyka: zolte tlo -> czarny tekst */
body.shop-2 .header-block__badge { color: #1a1a1a; }
body.shop-2 .btn-primary {
  --bs-btn-color: #1a1a1a;
  --bs-btn-bg: #fdbe0f;
  --bs-btn-border-color: #fdbe0f;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-bg: #e9ab00;
  --bs-btn-hover-border-color: #e9ab00;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-bg: #cc9700;
  --bs-btn-active-border-color: #cc9700;
  --bs-btn-disabled-color: #1a1a1a;
  --bs-btn-disabled-bg: #fdbe0f;
  --bs-btn-disabled-border-color: #fdbe0f;
}


/* ===================== Ford - fordczesci.com  (shop 3) — Ford Blue ===================== */
body.shop-3 {
  --oplex-bar-bg: #1c66c9;
  --oplex-bar-text: #ffffff;
  --oplex-bar-text-hover: #d7e6ff;
  --oplex-dark: #2a2a2a;
  --oplex-dark-text: #ffffff;

  --oplex-accent: #1c66c9;
  --oplex-accent-hover: #17529f;
  --oplex-on-accent: #ffffff;

  --bs-primary: #1c66c9;
  --bs-primary-rgb: 28, 102, 201;
  --bs-link-color: #1c66c9;
  --bs-link-color-rgb: 28, 102, 201;
  --bs-link-hover-color: #003478;
  --bs-link-hover-color-rgb: 0, 52, 120;
}
body.shop-3 .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #1c66c9;
  --bs-btn-border-color: #1c66c9;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #17529f;
  --bs-btn-hover-border-color: #134485;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #134485;
  --bs-btn-active-border-color: #0f3568;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #1c66c9;
  --bs-btn-disabled-border-color: #1c66c9;
}


/* =====================================================================
   POLISH / JAKOSC — spojne odstepy, rytm pionowy, czytelnosc
   (sekcja na koncu: nadpisuje wartosci bazowe powyzej)
   ===================================================================== */

/* ---- Naglowek: oddech ---- */
.oplex-promobar__inner { padding: 0.5rem 0; }
.oplex-featurebar__inner { padding: 1rem 0; gap: 2rem; }

/* pionowe separatory miedzy ikonami zaufania (jak na makiecie) — desktop */
@media (min-width: 992px) {
  .oplex-featurebar__reassurance { gap: 0; }
  .oplex-reassurance__item { padding: 0 1.5rem; position: relative; }
  /* subtelny separator: krótki, wyśrodkowany, delikatna biel (zamiast twardego #e6e6e6 na pełną wysokość) */
  .oplex-reassurance__item + .oplex-reassurance__item::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 28px; background: rgba(255,255,255,.30);
  }
}

/* pasek menu: oddech + lzejsza waga linkow */
.oplex-menubar__nav { padding-left: 1.25rem; gap: 0.25rem; }
.oplex-menubar__nav .ps-searchbar { padding: 0.4rem 0; }
.oplex-menubar__nav .ps-mainmenu__tree-link { font-weight: 500; }

/* ---- Strona glowna: marginesy + rytm sekcji ---- */
/* hero photo full-bleed -> ZERO padding-top. Padding-top dla content pod hero. */
.oplex-home { padding-top: 0; padding-bottom: 2.5rem; }
.oplex-home__content { padding-top: 2.5rem; }
@media (min-width: 992px) {
  .oplex-home > .row { --bs-gutter-x: 2.25rem; }
}
/* rowny odstep miedzy sekcjami tresci (banner, kafelki, produkty...) */
.page-content--home > * { margin-bottom: 2.5rem; }
.page-content--home > *:last-child { margin-bottom: 0; }

/* FIX: modul ma wewnetrzny .container -> niech wypelnia kolumne (kafelki na pelna szer.) */
.center-column .ps-customtext > .container,
.center-column .ps-banner > .container,
.center-column .ps-newproducts > .container,
.center-column .featured-products > .container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ---- Kafelki ---- */
.oplex-tiles { gap: 1.25rem; margin: 0; }
.oplex-tile { padding: 1.5rem 1.25rem; gap: 0.85rem; }

/* ---- Lewa kolumna ---- */
/* padding-top: 0, zeby lewa kolumna startowala dokladnie na linii bannera */
#left-column { padding-top: 0; }
#left-column .left-block,
#left-column .oplex-info {
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* podkategorie (zagniezdzone) — wciecie + lzejszy kolor */
#left-column .category-tree__child .category-tree__item-link {
  padding-left: 2rem;
  font-size: 0.85rem;
  color: #666666;
}
#left-column .accordion-body { padding: 0; }

/* ---- Mobile: banner i odstepy ---- */
@media (max-width: 991.98px) {
  .oplex-hero { padding: 1.75rem; min-height: 200px; }
  .oplex-hero__text { max-width: 100%; }
  .oplex-hero__title { font-size: 1.55rem; }
  .oplex-home { padding-top: 0; }
  .page-content--home > * { margin-bottom: 1.75rem; }
}


/* =====================================================================
   FIX (po obejrzeniu): ikony zaufania w jednym rzedzie + ukrycie demo-banera
   ===================================================================== */
/* kompaktniejsze ikony zaufania -> 4 w rownym rzedzie, bez zawijania */
.oplex-featurebar__inner { gap: 1.25rem; }
.oplex-featurebar__logo img,
.oplex-featurebar__logo .logo { max-height: 3rem; max-width: 10rem; }
.oplex-reassurance__item .material-icons { font-size: 1.65rem; }
.oplex-reassurance__item .material-icons { margin-right: 0; }
.oplex-reassurance__text { font-size: 0.76rem; }
.oplex-reassurance__text strong { font-size: 0.75rem; letter-spacing: 0.2px; }
@media (min-width: 992px) {
  .oplex-featurebar__reassurance { flex-wrap: nowrap; gap: 0; }
  .oplex-reassurance__item { padding: 0 0.9rem; }
  .oplex-reassurance__item:first-child { padding-left: 0; }
}

/* ukryj demo-baner "20% OFF ON CLOTHES" (ps_banner) na stronie glownej */
.page-content--home .ps-banner { display: none; }


/* =====================================================================
   FAZA 1 — UX QUICK WINS
   ===================================================================== */

/* ---- Klikalne ikony zaufania: jednolity hover dla wszystkich 4 ---- */
.oplex-reassurance__item {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}
.oplex-reassurance__item:hover { color: var(--bs-primary); }
.oplex-reassurance__item:hover .material-icons { color: var(--bs-primary); }

/* ---- Mobilny dolny pasek (sticky) ---- */
.oplex-mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: #ffffff;
  border-top: 1px solid #e2e2e2;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.oplex-mbar__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: transparent;
  color: #3a3a3a;
  text-decoration: none;
  font-size: 0.7rem;
  line-height: 1.2;
  position: relative;
}
.oplex-mbar__btn .material-icons { font-size: 22px; line-height: 1; }
.oplex-mbar__btn:hover,
.oplex-mbar__btn:active,
.oplex-mbar__btn:focus { color: var(--bs-primary); outline: 0; }
.oplex-mbar__badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 4px);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--bs-primary);
  color: #ffffff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* dla shop-2 (Opel) badge na zoltym -> czarny tekst */
body.shop-2 .oplex-mbar__badge { color: #1a1a1a; }
/* odstep pod body, zeby tresc nie chowala sie pod paskiem (mobile) */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
}

/* ---- Wyszukiwarka: autocomplete dropdown (ladniejszy widok) ---- */
.ps-searchbar__dropdown {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1050;
}
.ps-searchbar__results { padding: 0.25rem 0; }
.ps-searchbar__result-link {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f1f1f1;
  transition: background 0.1s ease;
}
.ps-searchbar__result-link:last-child { border-bottom: 0; }
.ps-searchbar__result-link:hover,
.ps-searchbar__result-link:focus { background: #fafafa; color: var(--bs-primary); }
.ps-searchbar__result-image {
  width: 42px; height: 42px;
  object-fit: contain;
  flex: 0 0 42px;
  background: #f6f6f6;
  border-radius: 4px;
}
.ps-searchbar__result-name {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* upewnij sie, ze searchbar (rodzic) jest pozycjonowany, zeby dropdown trzymal sie po nim */
.oplex-menubar__nav .ps-searchbar { position: relative; }

/* ---- Podglad koszyka po hover (desktop) ---- */
@media (min-width: 992px) {
  /* trigger: wskazanie na header-block koszyka pokazuje dropdown */
  .header-block:has(.blockcart):hover > .dropdown-menu,
  .blockcart:hover .cart-preview,
  .blockcart:hover .dropdown-menu,
  .header-block:hover .cart-preview {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* drobny "pas reagujacy" pod ikonka, zeby kursor nie psul hovera schodzac do dropdownu */
  .header-block:has(.blockcart),
  .blockcart { position: relative; }
}

/* ---- Sticky header: mobile - chowamy belke promo by zaoszczedzic miejsce ---- */
@media (max-width: 575.98px) {
  .oplex-promobar { display: none; }
}

/* ---- Subtelny cien pod stickym naglowkiem ---- */
.header.js-sticky-header { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }


/* =====================================================================
   OPLEX FREE SHIPPING — pasek "ile brakuje do darmowej wysylki"
   ===================================================================== */
.oplex-fs {
  background: #fff8e1;
  border: 1px solid #ffe6a0;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  color: #5a4a00;
}
.oplex-fs--reached {
  background: #e9f8ed;
  border-color: #a7e0b8;
  color: #1e6b34;
}
.oplex-fs__inner { display: flex; flex-direction: column; gap: 0.6rem; }
.oplex-fs__msg {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; line-height: 1.35;
}
.oplex-fs__icon { font-size: 1.4rem; color: inherit; }
.oplex-fs__bar {
  width: 100%; height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.oplex-fs__bar-fill {
  height: 100%;
  background: var(--bs-primary, #0b69f6);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.oplex-fs--reached .oplex-fs__bar-fill { background: #4cbb6c; }

/* Sticky wariant (na dole ekranu, opcjonalny) */
.oplex-fs--sticky {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1035;
  margin: 0;
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.12);
  max-width: 480px;
  margin-left: auto;
}
@media (max-width: 575.98px) {
  .oplex-fs--sticky { left: .5rem; right: .5rem; bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
}

/* ---- Banner styka sie z kafelkami / kolejna sekcja (bez gapu) ---- */
.page-content--home > .oplex-hero { margin-bottom: 0; }
.page-content--home > .ps-customtext { margin-top: 0; }
.page-content--home > .ps-customtext > .container { padding-top: 0; }
#custom-text { margin: 0; padding: 0; }
/* gdy ps_customtext jest pusty -> calkowicie chowamy sekcje (nie zostawia luki) */
.page-content--home > .ps-customtext:empty,
.page-content--home > .ps-customtext > .container > #custom-text:empty,
.page-content--home #custom-text:has(:not(*)),
.page-content--home #custom-text:not(:has(> *)) { display: none; }
.page-content--home > .ps-customtext:has(#custom-text:empty) { display: none; }

/* ---- Grid 4-kolumnowy dla produktow na home (layout-left-column).
   Hummingbird ma reguly tylko dla .layout-full-width / right-column / both-columns,
   wiec dla naszego left-column musimy zdefiniowac jawnie. ---- */
@media (min-width: 992px) {
  .layout-left-column .products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .layout-left-column .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Karta produktu w karuzeli/listach: bezpieczne dlugie nazwy ---- */
.product-miniature__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 2.6em;  /* rownamy wysokosc kart przy roznych dlugosciach */
  line-height: 1.3;
}
.product-miniature__inner { min-width: 0; }  /* prevent flex/grid blow-out */


/* =====================================================================
   STOPKA 5-KOLUMNOWA (CSS grid) — uklad zerzniety z test.oplex.pl
   ===================================================================== */
.oplex-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) {
  .oplex-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .oplex-footer__cols {
    grid-template-columns: 1.4fr 1.3fr 1fr 1.3fr;
    gap: 1.5rem 2rem;
  }
}

/* kazdy blok w stopce: brak wewnetrznego paddingu (nadpisuje col-*) */
.oplex-footer .footer-block {
  padding: 0;
  margin: 0;
}

/* logo + opis */
.oplex-footer__about .oplex-footer__logo img {
  max-height: 3rem;
  max-width: 9rem;
}
.oplex-footer__desc {
  font-size: 0.85rem;
  color: #6b6b6b;
  line-height: 1.55;
  margin: 0;
}

/* kolumna kontaktowa: adres + email + telefon */
.oplex-footer__addr {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #555555;
  margin: 0 0 0.6rem;
}
.oplex-footer__addr strong {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.95rem;
}
.oplex-footer__contact-line {
  font-size: 0.88rem;
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
.oplex-footer__contact-line a { color: #5a5a5a; }
.oplex-footer__contact-line a:hover { color: var(--bs-primary, #0b69f6); }


/* ---- Przycisk "Dodaj do koszyka": stan loading + "Dodano!" ---- */
.add-to-cart.is-loading,
[data-button-action="add-to-cart"].is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
}
.add-to-cart.is-loading > *,
[data-button-action="add-to-cart"].is-loading > * { visibility: hidden; }
.add-to-cart.is-loading::after,
[data-button-action="add-to-cart"].is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--bs-btn-color, #ffffff);
  animation: oplex-spin 0.75s linear infinite;
}
/* dla Opla (zolty przycisk + ciemny tekst) spinner ciemny dla kontrastu */
body.shop-2 .add-to-cart.is-loading::after,
body.shop-2 [data-button-action="add-to-cart"].is-loading::after { color: #1a1a1a; }

@keyframes oplex-spin { to { transform: rotate(360deg); } }

.add-to-cart.is-added,
[data-button-action="add-to-cart"].is-added {
  background: #4cbb6c !important;
  border-color: #4cbb6c !important;
  color: #ffffff !important;
  pointer-events: none;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.add-to-cart.is-added .material-icons,
[data-button-action="add-to-cart"].is-added .material-icons {
  font-size: 18px;
  line-height: 1;
}


/* =====================================================================
   FIX 2: spojnosc paska menu <-> lewa kolumna (wyrownanie + nizszy pasek)
   ===================================================================== */
/* Nizszy pasek menu: mniej paddingu pionowego w pozycjach menu i w boxie */
.oplex-menubar__nav .ps-mainmenu__tree-link,
.oplex-menubar__nav .ps-mainmenu__tree-dropdown-toggle {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.oplex-menubar__model {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

@media (min-width: 992px) {
  /* Lewa kolumna i tresc BEZ guttera -> kolumna jest flush 25%,
     dokladnie pod boxem "SZUKAJ PO MODELU" (tez 25%). Odstep miedzy
     kolumna a trescia robimy paddingiem center-column. */
  .oplex-home > .row { --bs-gutter-x: 0; }
  #left-column { padding-left: 0; padding-right: 0; }
  #center-column { padding-left: 2rem; }
}


/* =====================================================================
   STOPKA (uklad "Oplex") — jasna, kolumnowa (jak test.oplex.pl)
   ===================================================================== */
.oplex-footer {
  background: #f6f6f6;
  border-top: 3px solid var(--bs-primary, #0b69f6);
  margin-top: 2.5rem;
  padding-top: 2.75rem;
  color: #5a5a5a;
  font-size: 0.9rem;
}
.oplex-footer__cols { row-gap: 2rem; }
/* ukryj zmienny ps_linklist w stopce (zastapiony stala kolumna "Informacje") */
.oplex-footer .ps-linklist { display: none; }

/* tytuly kolumn (konto / informacje / kontakt) */
.oplex-footer .footer-block__title,
.oplex-footer .footer-block__title a {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
}
/* linki w stopce: szare -> hover kolor marki */
.oplex-footer a { color: #6b6b6b; text-decoration: none; }
.oplex-footer a:hover { color: var(--bs-primary, #0b69f6); }
.oplex-footer .footer-block__list { list-style: none; margin: 0; padding: 0; }
.oplex-footer .footer-block__list li { margin-bottom: 0.45rem; }
.oplex-footer .footer-block__content { padding: 0; }

/* kolumna: logo + opis + social */
.oplex-footer__logo { display: inline-block; margin-bottom: 1rem; }
.oplex-footer__logo img { max-height: 3rem; max-width: 11rem; width: auto; }
.oplex-footer__desc { font-size: 0.86rem; line-height: 1.65; color: #6b6b6b; margin-bottom: 1.25rem; }

/* social — ciemne kolka, hover w kolorze marki */
.oplex-footer__social ul,
.oplex-footer__social .social-icons {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0;
}
.oplex-footer__social li { margin: 0; }
.oplex-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #333333; color: #ffffff;
  transition: background-color 0.15s ease;
}
.oplex-footer__social a:hover { background: var(--bs-primary, #0b69f6); color: #ffffff; }
.oplex-footer__social i { font-size: 18px; }

/* pasek metod platnosci */
.oplex-footer__payments {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.75rem;
  margin-top: 2rem; padding: 1.5rem 0;
  border-top: 1px solid #e2e2e2;
}
.oplex-footer__payments-title {
  font-size: 0.8rem; color: #8a8a8a;
  text-transform: uppercase; letter-spacing: 0.3px; margin-right: 0.5rem;
}
.oplex-pay {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 34px; background: #ffffff;
  border: 1px solid #e2e2e2; border-radius: 4px;
}
.oplex-pay .material-icons { font-size: 20px; color: #3a3a3a; }

/* Mapa Google (pelna szerokosc) w stopce */
.oplex-footer__map {
  width: 100%;
  height: 220px;
  line-height: 0;
  margin-top: 1.5rem;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  background: #f0f0f0;
}
.oplex-footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767.98px) { .oplex-footer__map { height: 180px; margin-top: 1rem; } }

/* copyright */
.oplex-footer .copyright,
.oplex-footer .footer__copyright {
  text-align: center; padding: 1.25rem 0; margin: 0;
  color: #777777; font-size: 0.85rem;
  border-top: 1px solid #e2e2e2;
}
.oplex-footer .copyright a { color: #555555; }
.oplex-footer .copyright a:hover { color: var(--bs-primary, #0b69f6); }

@media (max-width: 767.98px) {
  .oplex-footer { text-align: center; }
  .oplex-footer__social ul { justify-content: center; }
}

/* ===== Checkout: przełącznik "Zakup na firmę" ===== */
.oplex-firma-toggle {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .85rem; margin-bottom: 1rem;
  background: #f6f7f9; border: 1px solid #e2e5ea; border-radius: 6px;
}
.oplex-firma-toggle .form-check-input { margin: 0; cursor: pointer; flex: 0 0 auto; }
.oplex-firma-toggle .form-check-label { margin: 0; cursor: pointer; font-weight: 600; }

/* ===== Selektor pojazdu (placeholder na home; docelowo moduł kompatybilności) ===== */
.oplex-vsel {
  background: #f3f4f6;
  border: 1px solid #e2e5ea;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.oplex-vsel__head {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; color: #111827; white-space: nowrap;
}
.oplex-vsel__head .material-icons { color: var(--bs-primary, #0b69f6); }
.oplex-vsel__title { font-size: 1rem; }
.oplex-vsel__fields {
  display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: .5rem; align-items: center;
}
.oplex-vsel__select { flex: 1 1 0; min-width: 0; }
.oplex-vsel__btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767.98px) {
  .oplex-vsel { flex-direction: column; align-items: stretch; }
  .oplex-vsel__fields { flex-wrap: wrap; }
  .oplex-vsel__select { flex: 1 1 100%; }
  .oplex-vsel__btn { width: 100%; }
}

/* =====================================================================
   PS native placeholdery — puste #main-content i #notifications
   tworzyły biały pasek między headerem a hero.
   ===================================================================== */
.page-home #main-content:empty { display: none; }
.page-home #notifications:not(:has(.alert)) { display: none; }

/* Strona kategorii/wyniki: puste left column → full-width content */
.page-category #left-column:empty,
.page-search #left-column:empty,
.page-manufacturer #left-column:empty,
.page-supplier #left-column:empty,
.page-prices-drop #left-column:empty,
.page-new-products #left-column:empty,
.page-best-sales #left-column:empty { display: none !important; }

.page-category #content-wrapper,
.page-search #content-wrapper,
.page-manufacturer #content-wrapper,
.page-supplier #content-wrapper,
.page-prices-drop #content-wrapper,
.page-new-products #content-wrapper,
.page-best-sales #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* =====================================================================
   OPLEX vehicle filter — banner listy + banner produktu + mismatch
   ===================================================================== */
.oplex-list-banner {
  background: linear-gradient(90deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.oplex-list-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
}
.oplex-list-banner .material-icons { color: #f97316; font-size: 28px; }
.oplex-list-banner__text { flex: 1 1 auto; min-width: 0; font-size: .95rem; color: #1f2937; }
.oplex-list-banner__text strong { color: #9a3412; }
.oplex-list-banner__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: #1f2937; cursor: pointer;
}
.oplex-list-banner__toggle input { accent-color: #f97316; }
.oplex-list-banner__change,
.oplex-list-banner__clear {
  background: transparent; border: 1px solid #f97316;
  color: #f97316; font-weight: 600; font-size: .85rem;
  padding: .35rem .75rem; border-radius: 6px; cursor: pointer;
}
.oplex-list-banner__change:hover { background: #f97316; color: #fff; }
.oplex-list-banner__clear {
  border-color: #6b7280; color: #6b7280;
}
.oplex-list-banner__clear:hover { background: #6b7280; color: #fff; }

.product-miniature.oplex-mismatch { opacity: .35; transition: opacity .2s; }
.product-miniature.oplex-mismatch:hover { opacity: .65; }
.product-miniature.oplex-match { position: relative; }
.product-miniature.oplex-match::before {
  content: "✓ Pasuje";
  position: absolute; top: 8px; left: 8px; z-index: 5;
  background: #16a34a; color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 4px;
  pointer-events: none;
}
body.oplex-only-matches .product-miniature.oplex-mismatch { display: none !important; }

/* Banner na stronie produktu */
.oplex-prod-banner {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
  border: 1px solid;
}
.oplex-prod-banner.is-match    { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.oplex-prod-banner.is-mismatch { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.oplex-prod-banner .material-icons { font-size: 32px; flex: 0 0 auto; }
.oplex-prod-banner.is-match    .material-icons { color: #16a34a; }
.oplex-prod-banner.is-mismatch .material-icons { color: #dc2626; }
.oplex-prod-banner__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.oplex-prod-banner__text strong { font-size: 1rem; }
.oplex-prod-banner__text span { font-size: .85rem; opacity: .85; }
.oplex-prod-banner__change {
  background: transparent; border: 1px solid currentColor;
  font-weight: 600; font-size: .85rem;
  padding: .35rem .75rem; border-radius: 6px; cursor: pointer;
  color: inherit;
}
.oplex-prod-banner__change:hover { background: rgba(0,0,0,.06); }
.oplex-prod-banner__clear {
  background: transparent; border: 1px solid currentColor;
  font-weight: 600; font-size: .85rem;
  padding: .35rem .75rem; border-radius: 6px; cursor: pointer;
  color: inherit; opacity: .7; margin-left: .4rem;
}
.oplex-prod-banner__clear:hover { background: rgba(220,38,38,.12); opacity: 1; }

/* Header przewija sie razem ze strona (NIE sticky) — pelny widok tresci. */
#header.header {
  position: static;
  background: #fff;
}

/* =====================================================================
   STOPKA — ciemne tlo (#181818) jak menubar, jasny tekst
   ===================================================================== */
.oplex-footer {
  background: #1e1e1e;
  color: #cfcfcf;
}
.oplex-footer .footer-block__title,
.oplex-footer .footer-block__title a { color: #ffffff; }
.oplex-footer a { color: #cbcbcb; }
.oplex-footer a:hover { color: var(--oplex-accent, var(--bs-primary, #f97316)); }
.oplex-footer__desc,
.oplex-footer__addr,
.oplex-footer__contact-line { color: #b9b9b9; }
.oplex-footer__addr strong { color: #ffffff; }
.oplex-footer__contact-line a { color: #cbcbcb; }
.oplex-footer__contact-line a:hover { color: var(--oplex-accent, var(--bs-primary, #f97316)); }
.oplex-copyright {
  text-align: center;
  padding: 1.15rem 0 1.4rem;
  margin-top: 1.25rem;
  font-size: .85rem;
  color: #9a9a9a;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =====================================================================
   MOBILE — kompaktowy header (logo) + responsywne hero
   (belki zaufania i konto/koszyk są w dolnym pasku .oplex-mbar)
   ===================================================================== */
@media (max-width: 991.98px) {
  .oplex-featurebar__reassurance,
  .oplex-featurebar__user { display: none !important; }
  .oplex-featurebar__inner { justify-content: center; gap: .5rem; padding: .5rem 0; }
  .oplex-featurebar__logo { margin: 0 auto; }
  .oplex-featurebar__logo img,
  .oplex-featurebar__logo .logo { max-height: 2.5rem; max-width: 9.5rem; }

  /* menubar: jeden rząd (hamburger + szukajka), bez zawijania */
  .oplex-menubar__inner { flex-wrap: nowrap; align-items: center; }
  .oplex-menubar__nav { padding-left: .5rem; gap: .5rem; }
  /* desktopowe menu kategorii nie pokazuje się poza xl */
  .ps-mainmenu__desktop { display: none !important; }
}

/* hero: responsywny tytuł/podtytuł — nadpisuje inline px ustawione w panelu */
@media (max-width: 767.98px) {
  .oplex-hero__title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .oplex-hero__subtitle { font-size: clamp(.95rem, 3.8vw, 1.05rem) !important; }
  .oplex-hero__textband { padding: 1rem 0; }
  .oplex-hero__inner { padding: 2rem 1rem 2.25rem; }
  .oplex-picker { max-width: 100%; }
}

/* MOBILE: picker nie wychodzi poza ekran + wyśrodkowany */
@media (max-width: 991.98px) {
  .oplex-hero__inner { display: block; }
  .oplex-picker {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .oplex-picker__search { flex-wrap: nowrap; }
  .oplex-picker__search-input { min-width: 0; }
}

/* =====================================================================
   STOPKA — kompaktowa (niższa) + mobile 2 kolumny
   ===================================================================== */
.oplex-footer { margin-top: 1.75rem; padding-top: 1.6rem; }
.oplex-footer__cols { gap: 1.1rem 1.75rem; }
@media (min-width: 992px) { .oplex-footer__cols { gap: 1.1rem 1.75rem; } }
.oplex-footer .footer-block__title { margin-bottom: .55rem; font-size: .9rem; }
.oplex-footer .footer-block__list li { margin-bottom: .28rem; }
.oplex-footer__desc { margin-bottom: .4rem; line-height: 1.5; }
.oplex-footer__addr { line-height: 1.5; margin-bottom: .35rem; }
.oplex-footer__map { height: 170px; margin-top: 1rem; }
.oplex-copyright { padding: .75rem 0 .95rem; margin-top: .7rem; }

@media (max-width: 575.98px) {
  .oplex-footer { padding-top: 1.25rem; }
  .oplex-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
  .oplex-footer__about { grid-column: 1 / -1; }      /* logo + opis na całą szerokość */
  .oplex-footer__about .oplex-footer__logo img { max-height: 2.6rem; }
  .oplex-footer__map { height: 130px; margin-top: .75rem; }
}

/* Stopka — „Mapa dojazdu": button + rozwijana mapka (desktop) / link do Maps (mobile) */
.oplex-footer__maparea { padding: .25rem 0 1.1rem; }
.oplex-footer__map-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
  color: #fff !important; font-weight: 600; font-size: .9rem;
  background: transparent; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.oplex-footer__map-btn:hover {
  background: var(--oplex-accent, #f97316);
  border-color: var(--oplex-accent, #f97316);
  color: var(--oplex-on-accent, #fff) !important;
}
.oplex-footer__map-btn .material-icons { font-size: 20px; }
.oplex-footer__map[hidden] { display: none; }
.oplex-footer__map { height: 320px; margin-top: 1rem; border: 0; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
@media (max-width: 767.98px) { .oplex-footer__map { height: 0; } }

/* mniejsze logo w stopce + przy górze (bez marginesu) */
.oplex-footer__logo img,
.oplex-footer__about .oplex-footer__logo img {
  max-height: 1.25rem !important;
  max-width: 4.4rem !important;
  width: auto !important;
  height: auto !important;
}
.oplex-footer__about { align-self: start; }
.oplex-footer__logo { display: block; margin: 0 0 .6rem !important; line-height: 0; }
.oplex-footer__logo .navbar-brand { margin: 0; padding: 0; }

/* grupa social + ocena po prawej w dolnym rzędzie stopki */
.oplex-footer__endgroup { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.oplex-footer__endgroup .oplex-footer__social { margin: 0; }
@media (max-width: 575.98px) { .oplex-footer__endgroup { justify-content: center; } }

/* Stopka — social (FB + Google) + ocena Google */
.oplex-footer__social { display: flex; gap: .5rem; margin: .15rem 0 .55rem; }
.oplex-footer__social a svg { display: block; }
.oplex-footer__rating {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: #cbcbcb !important; text-decoration: none;
}
.oplex-footer__rating:hover { color: #ffffff !important; }
.oplex-footer__rating strong { color: #ffffff; font-weight: 700; }
.oplex-footer__stars { color: #fbbf24; letter-spacing: 1px; font-size: .85rem; }

/* Mapa dojazdu + ocena Google w jednym rzędzie wzdłuż dołu stopki */
.oplex-footer__maparea {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem;
  margin-top: 1rem;
  padding: 1rem 0 .25rem !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
.oplex-footer__maparea .oplex-footer__map { flex: 1 0 100%; margin-top: .75rem; }
@media (max-width: 575.98px) {
  .oplex-footer__maparea { justify-content: center; text-align: center; }
}

/* copyright w środku paska maparea */
.oplex-footer__maparea .oplex-copyright {
  flex: 1 1 auto; text-align: center;
  margin: 0; padding: 0; border: 0;
}
@media (max-width: 575.98px) {
  .oplex-footer__maparea .oplex-copyright { flex-basis: 100%; order: 3; margin-top: .5rem; }
}

/* =====================================================================
   Empty-state listingu (brak produktów w kategorii) — z SVG
   ===================================================================== */
.oplex-empty {
  max-width: 600px;
  margin: 3rem auto 4rem;
  padding: 1rem;
  text-align: center;
}
.oplex-empty__icon {
  width: 116px; height: 116px;
  color: var(--oplex-accent, #f97316);
  margin: 0 auto 1.25rem;
  display: block;
}
.oplex-empty__title {
  font-size: 1.5rem; font-weight: 800; color: #1f2937;
  margin: 0 0 .5rem;
}
.oplex-empty__text {
  color: #6b7280; font-size: 1rem; line-height: 1.6;
  margin: 0 auto 1.6rem; max-width: 46ch;
}
.oplex-empty__actions {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
}
.oplex-empty__btn { display: inline-flex; align-items: center; gap: .4rem; }
.oplex-empty__btn .material-icons { font-size: 20px; line-height: 1; }

/* Opel (shop-2): ikony zaufania w topbarze w kolorze marki (żółty) zamiast niebieskiego + hover na biały (czytelny na ciemnym pasku) */
body.shop-2 .oplex-reassurance__item .material-icons { color: var(--oplex-accent, #fdbe0f); }
body.shop-2 .oplex-reassurance__item:hover .material-icons,
body.shop-2 .oplex-reassurance__item:hover .oplex-reassurance__text,
body.shop-2 .oplex-reassurance__item:hover .oplex-reassurance__text strong { color: #ffffff; }

/* ===== Logo nagłówka — poprawne skalowanie na KAŻDEJ stronie (fix motywu) ===== */
.oplex-featurebar__logo img,
.oplex-featurebar__logo .logo { height: auto; width: auto; object-fit: contain; }

/* Opel + Ford (shop-2/3): większy logotyp (desktop) — oba logo 4.26:1, jednolity rozmiar */
@media (min-width: 768px) {
  body.shop-2 .oplex-featurebar__logo img,
  body.shop-2 .oplex-featurebar__logo .logo,
  body.shop-3 .oplex-featurebar__logo img,
  body.shop-3 .oplex-featurebar__logo .logo { max-height: 4.25rem; max-width: 17rem; }
}

/* Cień pod paskiem pojazdu (promobar) — oddziela header od treści */
.oplex-promobar--vehicle { position: relative; z-index: 5; box-shadow: 0 6px 14px rgba(0,0,0,.18); }

/* =====================================================================
   MOBILE TOPBAR / UX — domknięcie (logo, ikony, jedno menu, cookie, pasek pojazdu)
   ===================================================================== */
@media (max-width: 991.98px) {
  /* jedno menu — chowamy PS-owe ps-mainmenu (zostaje oplex-megamenu drawer) */
  .ps-mainmenu__mobile-toggle,
  .ps-mainmenu__mobile { display: none !important; }

  /* logo wyśrodkowane — ikony konto/koszyk absolutnie po prawej */
  .oplex-featurebar__inner { position: relative; }
  .oplex-featurebar__logo { margin: 0 auto; }
  #_mobile_ps_customersignin { position: absolute; right: 2.9rem; top: 50%; transform: translateY(-50%); margin: 0; }
  #_mobile_ps_shoppingcart  { position: absolute; right: .4rem;  top: 50%; transform: translateY(-50%); margin: 0; }

  /* kolory ikon konto/koszyk na ciemnym pasku — białe */
  #_mobile_ps_customersignin .header-block__icon,
  #_mobile_ps_shoppingcart .header-block__icon { color: #fff; }

  /* cookie bar (Klaro) nad dolnym paskiem (.oplex-mbar ~56px) — da się kliknąć */
  .klaro .cookie-notice,
  .klaro .cn-body { bottom: 4.5rem !important; }
}

/* pasek pojazdu (promobar) WIDOCZNY na mobile — tylko config auta (adres/tel ukryte) */
@media (max-width: 575.98px) {
  .oplex-promobar.oplex-promobar--vehicle { display: block !important; }
  .oplex-promobar__inner { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .3rem .6rem; padding: .5rem .6rem; }
  .oplex-promobar__spacer,
  .oplex-promobar .oplex-promobar__item { display: none !important; }
}

/* MOBILE: g\00f3rna szukajka off (jest w dolnym pasku) + Moje pojazdy w wierszu Kategorie */
@media (max-width: 991.98px) {
  /* szukajka u g\00f3ry off \2014 ca\0142y kontener mobilny (col-auto zostawia\0142 pusty slot) */
  .ps-searchbar--mobile { display: none !important; }
  .oplex-menubar .ps-searchbar,
  .oplex-menubar a.header-block__action-btn[data-bs-target="#searchCanvas"] { display: none !important; }
  /* wiersz Kategorie zaczyna od lewej: [Kategorie] ......... [Moje pojazdy] */
  .oplex-menubar__nav { display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: .5rem; padding-left: 0 !important; }
  .oplex-menubar__nav #oplex-garage { margin-left: auto; }
  /* \0142 ikona Kategorie przy samej kraw\0119dzi (mniejszy wci\0119cie przycisku) */
  .oplex-menubar__nav .oplex-megamenu__toggle { padding-left: .5rem !important; }
  .oplex-menubar__nav .oplex-megamenu { flex: 0 0 auto; }
  .oplex-megamenu__toggle { width: auto !important; }
  .oplex-menubar__nav #oplex-garage .oplex-garage__toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 0; color: #f9fafb; cursor: pointer;
    padding: .75rem 1rem; font-weight: 700; font-size: .95rem;
  }
  .oplex-menubar__nav #oplex-garage .oplex-garage__toggle .material-icons { font-size: 22px; }
}