/* ==========================================================================
   Motyw hossapucice - warstwa wlasna nad hummingbirdem
   Plik ladowany automatycznie przez PrestaShop PO theme.css motywu nadrzednego.
   Cala paleta siedzi w zmiennych ponizej - zmiana --rk-blue przemalowuje
   przycisk "Szukaj", plakietke koszyka, podkreslenie w menu i odnosniki.
   ========================================================================== */

:root {
  /* Domyślna szerokość strony. Zmiana tej jednej wartości przestawia nagłówek,
     stopkę, listingi i wszystkie sekcje strony głównej - moduły rk* czytają ją
     przez var(--rk-container). */
  --rk-container: 1640px;

  --rk-blue: #131310;
  --rk-blue-dark: #000000;
  --rk-ink: #1b2733;
  --rk-muted: #5b6875;
  --rk-icon: #8a95a3;
  --rk-line: #e6e1d9;
  --rk-topbar-bg: #f7f5f2;
  --rk-field-border: #ded8cf;

  /* grubosc kreski ikon konturowych - jedna zmienna na caly zestaw */
  --rk-icon-stroke: 1.5;
}

/* --------------------------------------------------------------------------
   0. IKONY KONTUROWE (templates/_partials/rk-icon.tpl)
   -------------------------------------------------------------------------- */

.rk-icon {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: var(--rk-icon-stroke);
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   0b. SZEROKOSC STRONY

   Bootstrap ustawia kontenerom max-width 1320 px dopiero od 1400 px szerokosci
   okna - i tylko ta regule nadpisujemy. Ponizej 1400 px kontener zachowuje
   sie jak dotad (skokowo: 540/720/960/1140), wiec nic sie nie psuje na
   mniejszych ekranach.
   -------------------------------------------------------------------------- */

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--rk-container);
  }
}

/* --------------------------------------------------------------------------
   1. GORNA BELKA - kontakt + logowanie
   -------------------------------------------------------------------------- */

/* belka ma byc cicha: mniejszy tekst, nizszy pas, mniej elementow
   (godziny otwarcia zdjete w nav.tpl modulu ps_contactinfo) */
.rk-topbar {
  background: var(--rk-topbar-bg);
  border-bottom: 1px solid var(--rk-line);
  font-size: 0.75rem;
  color: var(--rk-muted);
}

.rk-topbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 34px;
}

.rk-topbar__left,
.rk-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.rk-contactinfo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rk-contactinfo__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rk-muted);
  text-decoration: none;
  white-space: nowrap;
}

.rk-contactinfo__item:hover,
.rk-contactinfo__item:focus {
  color: var(--rk-blue);
  text-decoration: none;
}

.rk-contactinfo__item--static {
  cursor: default;
}

.rk-contactinfo__icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--rk-blue);
}

/* ikona zostaje niebieska takze przy najechaniu na caly odnosnik */
.rk-contactinfo__item:hover .rk-contactinfo__icon,
.rk-contactinfo__item:focus .rk-contactinfo__icon {
  color: var(--rk-blue);
}

.rk-topbar__account {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.rk-topbar__link {
  color: var(--rk-muted);
  text-decoration: none;
  white-space: nowrap;
}

.rk-topbar__link:hover {
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-topbar__link--accent {
  color: var(--rk-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rk-topbar__link--accent:hover {
  color: var(--rk-blue-dark);
}

/* --------------------------------------------------------------------------
   2. RZAD GLOWNY - logo, wyszukiwarka, konto, koszyk
   -------------------------------------------------------------------------- */

.rk-header {
  background: #fff;
}

.rk-header__container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 108px;
}

/* kolejnosc elementow rzedu: moduly wpadaja z hooka displayTop w swojej
   kolejnosci, a przycisk B2B jest w szablonie na koncu - ustawiamy ja tutaj,
   zeby nie zalezec od pozycji modulow w panelu */
.rk-header__logo { order: 1; }
.rk-header__search { order: 2; }
.rk-header__cta { order: 3; }
.rk-header__account { order: 4; }
.rk-header__cart { order: 5; }

.rk-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.rk-header__logo img {
  max-height: 76px;
  width: auto;
}

.rk-header__h1 {
  margin: 0;
  line-height: 0;
}

/* wyszukiwarka zabiera wolna przestrzen miedzy logo a ikonami;
   szersza i wyzsza niz reszta elementow, bo ma byc glownym punktem naglowka */
.rk-header__search {
  flex: 1 1 auto;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.rk-header__account,
.rk-header__cart {
  flex: 0 0 auto;
}

/* --- przycisk B2B ---
   Obrys, a nie wypelnienie: obok niebieskiego "Szukaj" dwa pelne przyciski
   walczylyby o uwage. Kontur czyta sie jako osobna, powazna akcja. */

.rk-header__cta {
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--rk-blue);
  border-radius: 8px;
  color: var(--rk-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rk-header__cta:hover,
.rk-header__cta:focus {
  background: var(--rk-blue);
  color: #fff;
  text-decoration: none;
}

.rk-header__cta svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.rk-header__cart {
  margin-left: 0.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--rk-line);
}

/* --- wyszukiwarka --- */

.rk-searchbar {
  width: 100%;
  position: relative;
}

.rk-searchbar .rk-searchbar__form {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 54px;
  border: 1.5px solid var(--rk-field-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* pole podswietla sie przy pisaniu - dodatkowy sygnal, ze to glowne narzedzie */
.rk-searchbar .rk-searchbar__form:focus-within {
  border-color: var(--rk-blue);
  box-shadow: 0 0 0 4px rgba(176, 138, 78, 0.16);
}

.rk-searchbar .rk-searchbar__magnifier {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--rk-icon);
  pointer-events: none;
  z-index: 2;
}

.rk-searchbar .rk-searchbar__input {
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0 0.75rem 0 3rem;
  font-size: 0.9375rem;
  color: var(--rk-ink);
  background: transparent;
}

.rk-searchbar .rk-searchbar__input:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.rk-searchbar .rk-searchbar__input::placeholder {
  color: #98a2b0;
}

.rk-searchbar .rk-searchbar__submit {
  flex: 0 0 auto;
  border: 0;
  padding: 0 2.25rem;
  background: var(--rk-blue);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.rk-searchbar .rk-searchbar__submit:hover,
.rk-searchbar .rk-searchbar__submit:focus {
  background: var(--rk-blue-dark);
}

.rk-searchbar .rk-searchbar__clear {
  position: absolute;
  right: 7.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--rk-icon);
  padding: 0 0.25rem;
  z-index: 2;
}

/* podpowiedzi wyszukiwarki maja lezec pod calym polem, nie pod przyciskiem */
.rk-searchbar .ps-searchbar__dropdown {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
}

/* --- konto i koszyk --- */

.rk-headeraction .rk-headeraction__btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  color: var(--rk-ink);
  text-decoration: none;
  background: transparent;
}

.rk-headeraction .rk-headeraction__btn:hover .rk-headeraction__label,
.rk-headeraction .rk-headeraction__btn:hover .rk-headeraction__icon {
  color: var(--rk-blue);
}

.rk-headeraction__icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  color: var(--rk-ink);
}

.rk-headeraction__label {
  font-size: 0.875rem;
  color: var(--rk-ink);
  white-space: nowrap;
}

.rk-headeraction .dropdown-toggle::after {
  display: none;
}

.rk-cart__icon-wrap {
  position: relative;
  display: inline-flex;
}

.rk-cart .rk-cart__badge {
  position: absolute;
  top: -0.375rem;
  right: -0.5rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--rk-blue);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-align: center;
  display: block;
}

.rk-cart__text {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.rk-cart__label {
  font-size: 0.875rem;
  color: var(--rk-ink);
  white-space: nowrap;
}

.rk-cart__total {
  font-size: 0.8125rem;
  color: var(--rk-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. PASEK NAWIGACJI
   -------------------------------------------------------------------------- */

.rk-nav {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  margin-bottom: 20px;
}

/* uwaga: kontener paska musi byc blokiem. Przy display:flex modul menu
   (klasy .col-auto / .col-xl z bootstrapa) kurczy sie do szerokosci
   najdluzszej pozycji i cale menu lamie sie do pionu */
.rk-nav__container {
  position: static;
  display: block;
}

/* WAZNE: regula musi celowac w .ps-mainmenu--desktop, a nie w samo
   .ps-mainmenu. Modul renderuje pod tym samym prefiksem takze mobilny panel
   .ps-mainmenu--mobile.offcanvas - nadanie mu position:static wyrywa go
   z warstwy fixed i doklada ~420 px pustego bialego pasa pod nawigacja */
.rk-nav .ps-mainmenu--desktop {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  padding: 0;
  position: static;
}

.rk-nav .ps-mainmenu__desktop {
  width: 100%;
}

.rk-nav .ps-mainmenu__tree {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 1.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* hummingbird ustawia pozycjom menu pelna szerokosc w regulach przypietych do
   swojego kontenera .header-bottom - w naszym pasku trzeba je cofnac, inaczej
   menu lamie sie do pionu */
.rk-nav .ps-mainmenu__tree-item,
.rk-nav .ps-mainmenu__tree > li {
  position: static;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
}

.rk-nav .ps-mainmenu__tree-item-wrapper {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  position: relative;
}

.rk-nav .ps-mainmenu__tree-link {
  display: flex;
  align-items: center;
  padding: 0.9375rem 0;
  color: var(--rk-ink);
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.rk-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link,
.rk-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
  color: var(--rk-blue);
  border-bottom-color: var(--rk-blue);
}

.rk-nav .ps-mainmenu__tree-dropdown-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  width: 1rem;
  color: var(--rk-muted);
}

.rk-nav .ps-mainmenu__tree-dropdown-toggle::after {
  border-top-color: currentColor;
}

/* rozwijane podmenu ma spadac spod calego paska, na pelna szerokosc */
.rk-nav .submenu {
  left: 0;
  right: 0;
  top: 100%;
  border-top: 1px solid var(--rk-line);
  box-shadow: 0 12px 24px rgba(27, 39, 51, 0.08);
}

/* ponizej XL hummingbird pokazuje tylko przycisk menu - zostawiamy mu miejsce */
.rk-nav .ps-mainmenu__mobile-toggle .menu-toggle {
  padding: 0.5rem 0;
  color: var(--rk-ink);
}

@media (max-width: 1199.98px) {
  .rk-nav__container {
    min-height: 48px;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   4. WERSJA MOBILNA GLOWNEGO RZEDU
   -------------------------------------------------------------------------- */

/* Naglowek mobilny wg makiety: trzy rzedy - (1) hamburger, logo, ikony,
   (2) wyszukiwarka, (3) przewijany pasek kategorii. Rzedy robimy zawijaniem
   tego samego kontenera flex, zeby nie duplikowac znacznikow. */
@media (max-width: 767.98px) {
  .rk-header__container {
    flex-wrap: wrap;
    min-height: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;
  }

  .rk-header__burger {
    order: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
  }

  .rk-header__burger svg {
    width: 24px;
    height: 24px;
  }

  /* logo tuż obok hamburgera, ikony konta i koszyka odpychamy na prawo */
  .rk-header__logo {
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
    margin-left: 0.25rem;
  }

  /* Sam przycisk lupy chowamy w nadpisanym szablonie ps_searchbar
     (wyszukiwarka jest widoczna na stałe rzęd niżej) - tutaj zostaje tylko
     opakowanie z offcanvasem, które nie może zajmować miejsca w rzędzie. */
  .ps-searchbar--mobile {
    flex: 0 0 auto;
    width: 0;
  }

  .rk-header__logo img {
    max-height: 44px;
  }

  .ps-searchbar--mobile { order: 2; }
  #_mobile_ps_customersignin { order: 3; }
  #_mobile_ps_shoppingcart { order: 4; }

  #_mobile_ps_customersignin,
  #_mobile_ps_shoppingcart {
    flex: 0 0 auto;
  }

  .rk-header__cart {
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
  }

  /* --- rząd 2: wyszukiwarka --- */

  .rk-msearch {
    order: 5;
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0.5rem;
  }

  .rk-msearch__input {
    width: 100%;
    height: 52px;
    padding: 0 3rem 0 1.25rem;
    border: 1px solid var(--rk-line, #e8e3da);
    border-radius: 14px;
    background: #fff;
    font-size: 1rem;
    color: var(--rk-ink);
  }

  .rk-msearch__input::placeholder {
    color: var(--rk-muted, #5b6875);
  }

  .rk-msearch__input:focus {
    outline: 0;
    border-color: var(--rk-blue);
    box-shadow: 0 0 0 3px rgba(176, 138, 78, 0.16);
  }

  .rk-msearch__btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
  }

  .rk-msearch__btn svg {
    width: 22px;
    height: 22px;
  }

  /* --- rząd 3: pasek kategorii --- */

  .rk-header__mcat {
    order: 6;
    /* min-width: 0 jest konieczne - bez niego element flex rozpycha się
       do szerokości pigułek i przewijanie w ogóle nie działa */
    flex: 0 0 auto;
    width: calc(100% + var(--bs-gutter-x, 1.5rem));
    min-width: 0;
    /* pasek dojeżdża do krawędzi ekranu mimo paddingu kontenera
       (kontener Bootstrapa ma po bokach połowę gutter) */
    margin: 0.25rem calc(-0.5 * var(--bs-gutter-x, 1.5rem)) 0;
    padding: 0 calc(0.5 * var(--bs-gutter-x, 1.5rem));
  }

  /* Hummingbird trzyma w pasku nawigacji ZARÓWNO przycisk menu, JAK I sam
     offcanvas z menu mobilnym. Ukrycie całego `.rk-nav` przez display:none
     sprawia, że menu przestaje się otwierać (offcanvas dostaje klasę .show,
     ale jest w ukrytym rodzicu) - dlatego chowamy tylko przycisk i zbieramy
     z paska wysokość oraz obramowanie. */
  .rk-nav {
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
  }

  .rk-nav .ps-mainmenu__mobile-toggle {
    display: none;
  }

  /* pasek ma niżej regułę min-height: 48px dla ekranów < 1200 px -
     tutaj już nic w nim nie zostaje, więc wysokość zerujemy */
  .rk-nav__container {
    display: flex;
    min-height: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   4c. PANEL MENU MOBILNEGO (offcanvas)

   Szkielet i skrypt zostaja hummingbirda - ponizej sam wyglad wg makiety:
   logo w naglowku, wyszukiwarka, pozycje w kartach z ikonami, przycisk B2B
   i pasek kontaktowy na dole.
   -------------------------------------------------------------------------- */

.ps-mainmenu--mobile {
  --rk-menu-karta: #fff;

  /* szerzej niż domyślne 80vw - inaczej "Okulary przeciwsłoneczne"
     łamie się na dwie linie */
  width: min(94vw, 420px);
  background: #f9f7f4;
}

.ps-mainmenu--mobile .offcanvas-header {
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.875rem 0.25rem;
}

.ps-mainmenu__logo {
  display: inline-flex;
  margin-right: auto;
}

.ps-mainmenu__logo img {
  max-height: 44px;
  width: auto;
}

.ps-mainmenu--mobile .btn-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background-color: #efece7;
  opacity: 1;
}

/* --- wyszukiwarka w panelu --- */

/* order/flex/width trzeba wyzerować: reguła nagłówka mobilnego ustawia
   `.rk-msearch { order: 5; flex: 0 0 100%; width: 100% }`, przez co
   w kolumnowym offcanvasie pole ląduje poza ekranem, a razem z marginesami
   wystaje poza prawą krawędź panelu */
.rk-msearch--menu {
  position: relative;
  order: 0;
  flex: 0 0 auto;
  width: auto;
  margin: 0.25rem 0.875rem 0.75rem;
}

.rk-msearch--menu .rk-msearch__input {
  width: 100%;
  height: 52px;
  padding: 0 1rem 0 3rem;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: #fff;
  font-size: 1rem;
}

.rk-msearch--menu .rk-msearch__input::placeholder {
  color: var(--rk-muted);
}

.rk-msearch--menu .rk-msearch__input:focus {
  outline: 0;
  border-color: var(--rk-blue);
  box-shadow: 0 0 0 3px rgba(176, 138, 78, 0.16);
}

.rk-msearch__btn--lewa {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  right: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rk-muted);
}

.rk-msearch__btn--lewa .rk-icon {
  width: 22px;
  height: 22px;
  stroke-width: var(--rk-icon-stroke);
}

/* --- lista pozycji w kartach --- */

/* hummingbird daje tej sekcji `height: 100%`, przez co lista rozpycha się
   na całą wysokość panelu i wypycha przycisk B2B pod ekran.

   Zamiast tego lista dostaje CAŁE wolne miejsce i przewija się w środku
   (`flex: 1 1 auto` + `min-height: 0` — bez zerowania minimalnej wysokości
   element flex nie kurczy się poniżej swojej zawartości i nadmiar znika pod
   krawędzią panelu, bo `.offcanvas` ma `overflow: hidden`). Dzięki temu
   długie podkategorie (Opakowania mają ich 34) da się przewinąć, a przycisk
   B2B i pasek kontaktowy zostają na dole. */
/* otoczka trzyma miejsce w kolumnie panelu i jest układem odniesienia
   dla wskaźnika „jest więcej pozycji" */
.ps-mainmenu__mobile-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.ps-mainmenu__mobile {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0 0.875rem 0.875rem;
  overflow-y: auto;
  overscroll-behavior: contain; /* koniec listy nie przewija strony pod spodem */
  -webkit-overflow-scrolling: touch;
}

/* --- wskaźnik: lista ma dalszy ciąg --- */

.rk-menu-wiecej {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateX(-50%);
  border: 1px solid var(--rk-line);
  border-radius: 50%;
  background: #fff;
  color: var(--rk-blue, #b08a4e);
  box-shadow: 0 6px 16px rgba(19, 19, 16, 0.14);
  cursor: pointer;
}

.rk-menu-wiecej svg {
  width: 20px;
  height: 20px;
}

/* poświata pod przyciskiem: pozycje listy „wchodzą" pod niego, a bez tego
   strzałka gubi się w tekście */
.rk-menu-wiecej::before {
  content: "";
  position: absolute;
  inset: -0.75rem -1.25rem;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, #f9f7f4 55%, rgba(249, 247, 244, 0) 100%);
}

/* hummingbird daje nawigacji `padding: 0 16px`, przez co karta z pozycjami
   była węższa niż pole wyszukiwarki nad nią (marginesy boczne panelu dokłada
   już `.ps-mainmenu__mobile`) */
.ps-mainmenu--mobile .menu--mobile {
  padding-left: 0;
  padding-right: 0;
}

.ps-mainmenu--mobile .menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* pozycje pierwszego poziomu siedzą w białej karcie; separator dzieli
   kategorie od stron informacyjnych */
.ps-mainmenu--mobile .menu__list--karty {
  border-radius: 16px;
  background: var(--rk-menu-karta);
  border: 1px solid var(--rk-line);
  overflow: hidden;
}

.ps-mainmenu--mobile .menu__list--karty > li:not(.menu__separator) + li:not(.menu__separator) {
  border-top: 1px solid #f2efe9;
}

.ps-mainmenu--mobile .menu__separator {
  height: 1rem;
  background: #f9f7f4;
  border: 0;
}

.ps-mainmenu--mobile .menu__list--karty > li {
  position: relative;
  display: flex;
  align-items: center;
}

.ps-mainmenu--mobile .menu__list--karty .menu__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  padding: 0.875rem 0.875rem;
  color: var(--rk-ink);
  font-size: 0.9375rem;
  text-decoration: none;
}

.menu__ikona {
  display: inline-flex;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--rk-blue);
}

.menu__ikona svg {
  width: 100%;
  height: 100%;
}

/* --- kolejne poziomy (podkategorie) --- */

.ps-mainmenu--mobile .menu__title {
  padding: 1.125rem 0.875rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rk-ink);
}

.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) {
  border-radius: 16px;
  background: var(--rk-menu-karta);
  border: 1px solid var(--rk-line);
  overflow: hidden;
}

.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) > li:not(.menu__title) {
  display: flex;
  align-items: center;
  border-top: 1px solid #f2efe9;
}

.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) > li:not(.menu__title):first-of-type {
  border-top: 0;
}

.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) .menu__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  padding: 0.875rem;
  color: var(--rk-ink);
  font-size: 0.9375rem;
  text-decoration: none;
}

/* Strzałka przy pozycji - taka sama jak w liście pierwszego poziomu.
   Pomijamy pozycje, które mają własny przycisk rozwijania (`menu__toggle-child`),
   bo tam chevron już jest - inaczej byłyby dwa. */
.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) > li:not(:has(.menu__toggle-child)) > .menu__link::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid #98a2b0;
  border-top: 1.5px solid #98a2b0;
  transform: rotate(45deg);
}

/* pozycja z podpoziomami: link nie ma rozpychać przycisku strzałki */
.ps-mainmenu--mobile .menu__list:not(.menu__list--karty) > li:has(.menu__toggle-child) > .menu__link {
  min-width: 0;
}

.ps-mainmenu--mobile .menu__list > .menu__title {
  display: block;
  margin: 0;
  border: 0;
  background: transparent;
}

/* strony informacyjne (Outlet, O firmie, Kontakt) mają ikony wyciszone */
.ps-mainmenu--mobile .menu__list--karty > li:not(.type-category) .menu__ikona {
  color: var(--rk-muted);
}

/* przycisk rozwijania podpoziomu udaje strzałkę z makiety */
.ps-mainmenu--mobile .menu__toggle-child {
  flex: 0 0 auto;
  padding: 0 0.625rem 0 0;
  color: #98a2b0;
  text-decoration: none;
}

.ps-mainmenu--mobile .menu__toggle-child .material-icons {
  font-size: 1.5rem;
}

/* --- pasek kontaktowy na dole --- */

/* to jest `offcanvas-body`, więc domyślnie rośnie na całą wolną wysokość */
.ps-mainmenu__additionnals {
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 0.875rem 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rk-line);
  border-radius: 16px;
  background: #fff;
}

.ps-mainmenu__additionnals .rk-icon {
  stroke-width: var(--rk-icon-stroke);
}

/* moduł owija kontakt w bezklasowy <div>, który jako element flex kurczy się
   do szerokości treści i przez `justify-content: center` karty stawał na jej
   środku - stąd „schodek" między numerem a adresem */
.ps-mainmenu__additionnals > div:not(.ps-mainmenu__selects) {
  flex: 1 1 100%;
  width: 100%;
}

/* Telefon i e-mail jeden pod drugim, wyrównane do lewej krawędzi karty.
   Obok siebie się nie mieszczą (`sklep@hossaopakowania.pl`), a wyśrodkowane
   w dwóch wierszach dawały poszarpany, przypadkowy układ. */
.ps-mainmenu__additionnals .rk-contactinfo {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  font-size: 0.875rem;
}

/* w belce kontaktowej nagłówka tekst jest biały (czarne tło); tutaj karta jest
   biała, więc numer i e-mail trzeba przemalować na kolor tekstu */
.ps-mainmenu__additionnals .rk-contactinfo__item {
  gap: 0.75rem;
  justify-content: flex-start;
  padding: 0.5rem 0;
  color: var(--rk-ink, #1b2733);
  /* w belce nagłówka pozycje mają `white-space: nowrap`; tutaj adres ma prawo
     się złamać, bo panel bywa węższy */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Kreska rozdzielająca - ten sam rytm co lista kategorii wyżej.
   Zerujemy przy tym pionowy separator z belki nagłówka (`border-left`
   + `padding-left`/`margin-left: 1.5rem`) - w układzie kolumnowym wcinał on
   drugą pozycję o 3 rem w prawo. */
.ps-mainmenu__additionnals .rk-contactinfo__item + .rk-contactinfo__item {
  border-left: 0;
  border-top: 1px solid #f2efe9;
  padding-left: 0;
  margin-left: 0;
}

.ps-mainmenu__additionnals .rk-contactinfo__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}

/* wybór języka i waluty jest pusty (sklep jednojęzyczny, jedna waluta),
   a jego `me-auto` spychało kontakt do prawej krawędzi */
.ps-mainmenu__selects {
  margin-right: 0 !important;
}

.ps-mainmenu__selects:not(:has(select)):not(:has(a)) {
  display: none;
}

/* --------------------------------------------------------------------------
   4d. LISTA PRODUKTÓW W KATEGORII

   Układ wg makiety: wąska lewa kolumna (miejsce na filtry + boks pomocy),
   pasek narzędzi nad siatką, kafelki w kartach, paginacja na środku.
   -------------------------------------------------------------------------- */

#products {
  margin-bottom: 2.5rem;
}

/* --- okruszki i tytuł strony --- */

/* hummingbird daje okruszkom szary pas na pełną szerokość; w makiecie
   siedzą na białym tle, tuż nad tytułem */
.breadcrumb__wrapper {
  padding: 1.5rem 0 0;
  background: transparent;
  border: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin-right: 0.5rem;
  color: #98a2b0;
}

.breadcrumb-link,
.breadcrumb-item a {
  color: var(--rk-blue);
  text-decoration: none;
}

.breadcrumb-item:last-child span {
  color: var(--rk-muted);
}

/* --- nagłówek kategorii (okruszki + tytuł + opis + zdjęcie) --- */

.rk-hero {
  position: relative;
  margin: 0 0 2rem;
  padding: 1.5rem 0 2rem;
  border-radius: 20px;
  background: linear-gradient(120deg, #ffffff 0%, #f3f8ff 55%, #e8f1fd 100%);
  overflow: hidden;
}

/* miejsce na zdjęcie po prawej - tylko wtedy, gdy kategoria je ma */
.rk-hero--zdjecie .rk-hero__tresc {
  max-width: 60%;
}

.rk-hero__tresc {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
}

.rk-hero .breadcrumb__wrapper {
  padding: 0 0 0.75rem;
}

.rk-hero__tytul {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-hero__opis {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rk-muted);
}

.rk-hero__opis p {
  margin: 0 0 0.625rem;
}

.rk-hero__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
}

/* `display: block` na <picture> jest konieczne - jako element liniowy
   nie rozciąga się i zdjęcie nie dochodzi do krawędzi sekcji */
.rk-hero__foto picture {
  display: block;
  width: 100%;
  height: 100%;
}

.rk-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* kadrujemy do środka - przy prawej krawędzi wchodziła w kadr
     pionowa granica jasnego tła ze zdjęcia */
  object-position: center;
  /* lewa krawędź przenika w tło, zamiast urywać się pionową linią */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* --- pasek atutów (lista `ul.rk-atuty` w opisie kategorii) --- */

.rk-atuty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.rk-atuty li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  color: var(--rk-ink);
  white-space: nowrap;
}

/* ikony z arkusza - w treści zostaje sama klasa */
.rk-atuty li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rk-atut--salony::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 20.4V9.6l8.4-6 8.4 6v10.8'/%3E%3Cpath d='M9.4 20.4v-6.2h5.2v6.2'/%3E%3C/svg%3E");
}

.rk-atut--wybor::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3.2'/%3E%3Ccircle cx='17' cy='7' r='3.2'/%3E%3Ccircle cx='12' cy='16.6' r='3.2'/%3E%3Cpath d='M9.4 8.8 10.8 14M14.6 8.8 13.2 14'/%3E%3C/svg%3E");
}

.rk-atut--b2b::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 16.4v-4.8M12 8.2v.1' stroke-width='2'/%3E%3C/svg%3E");
}

.rk-atut--dostepnosc::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.6 12.2 2.4 2.4 4.4-4.8'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
  .rk-hero--zdjecie .rk-hero__tresc {
    max-width: 100%;
  }

  .rk-hero__foto {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .rk-hero {
    padding: 1.25rem 0 1.5rem;
    border-radius: 16px;
  }

  .rk-hero__tresc {
    padding: 0 1.25rem;
  }

  .rk-hero__tytul {
    font-size: 1.5rem;
  }

  .rk-atuty li {
    white-space: normal;
  }
}

/* --- lewa kolumna --- */

.rk-kolumna {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* kolumna filtrów jest wąska - siatka produktów ma dostać resztę miejsca
   (Bootstrap dawałby jej 25% szerokości strony) */
@media (min-width: 992px) {
  #left-column.rk-kolumna {
    flex: 0 0 290px;
    width: 290px;
    max-width: 290px;
  }

  /* `flex-basis: 0` i `min-width: 0` są tu konieczne - przy `auto` kolumna
     bierze szerokość swojej zawartości, nie mieści się obok filtrów
     i zawija się pod nie */
  .columns-container #center-column {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* każdy moduł kolumny (filtry, kategorie) dostaje wygląd karty */
.rk-kolumna > div,
.rk-kolumna > section,
.rk-kolumna .block-categories,
.rk-kolumna #search_filters {
  padding: 1.25rem;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: #fff;
}

/* na wąskich ekranach kolumna schodzi POD listę - inaczej trzeba przewinąć
   całe drzewo kategorii i boks pomocy, zanim zobaczy się produkty */
@media (max-width: 991.98px) {
  .columns-container .row {
    flex-wrap: wrap;
  }

  #left-column.rk-kolumna {
    order: 2;
    margin-top: 1.5rem;
  }

  #center-column {
    order: 1;
  }
}

/* --- filtry (ps_facetedsearch) --- */

/* Każdy filtr to osobna karta, więc opakowanie modułu nie może mieć własnej.
   `:not(.offcanvas)` jest istotne - inaczej reguła zdejmuje tło także
   panelowi filtrów na telefonie i widać przez niego stronę. */
.rk-kolumna #search_filters_wrapper,
.rk-kolumna .ps-facetedsearch:not(.offcanvas) {
  padding: 0;
  border: 0;
  background: transparent;
}

.rk-filtry {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rk-filtry .left-block__title {
  display: none;
}

.rk-filtry__wyczysc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--rk-line);
  border-radius: 10px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--rk-ink);
}

.rk-filtry__wyczysc-btn svg {
  width: 14px;
  height: 14px;
}

.rk-filtr {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: #fff;
}

.rk-filtr__tytul {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-filtr__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-filtr__pozycja.is-ukryta {
  display: none;
}

.rk-filtr__wiersz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0;
}

.rk-filtr__wiersz .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.rk-filtr__wiersz .form-check-input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--rk-field-border);
  border-radius: 4px;
}

.rk-filtr__wiersz .form-check-input:checked {
  background-color: var(--rk-blue);
  border-color: var(--rk-blue);
}

.rk-filtr__etykieta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.rk-filtr__kropka {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(27, 39, 51, 0.15);
  border-radius: 50%;
}

.rk-filtr__nazwa {
  font-size: 0.875rem;
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-filtr__nazwa:hover {
  color: var(--rk-blue);
  text-decoration: none;
}

.rk-filtr__wiersz.active .rk-filtr__nazwa {
  color: var(--rk-blue);
  font-weight: 600;
}

/* liczba wyników w szarej pigułce po prawej */
.rk-filtr__licznik {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: #f3f1ec;
  font-size: 0.75rem;
  color: var(--rk-muted);
  text-align: center;
}

.rk-filtr__wiecej {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rk-blue);
}

.rk-filtr__wiecej svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease-in-out;
}

.rk-filtr__wiecej.is-otwarty svg {
  transform: rotate(90deg);
}

/* suwak ceny */
.rk-filtr .search-filters__slider-container {
  padding-top: 0.5rem;
}

/* panel filtrów na telefonie - offcanvas hummingbirda nie ma własnego tła,
   więc bez tego widać przez niego stronę */
.ps-facetedsearch--mobile {
  /* tło ustawiamy zmienną Bootstrapa - zwykła deklaracja przegrywa
     z regułą motywu `.ps-facetedsearch--mobile.offcanvas` */
  --bs-offcanvas-bg: #f9f7f4;
  --bs-offcanvas-width: min(94vw, 420px);
}

.ps-facetedsearch--mobile .offcanvas-header {
  align-items: center;
  padding: 1rem 0.875rem 0.5rem;
}

.ps-facetedsearch--mobile .offcanvas-body {
  padding: 0 0.875rem 1.5rem;
}

.ps-facetedsearch--mobile .btn-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #efece7;
  opacity: 1;
}

/* --- boks pomocy --- */

.rk-pomoc {
  padding: 1.25rem;
  border: 1px solid #ece3d5;
  border-radius: 14px;
  background: #faf7f2;
}

/* Boks pomocy jedzie z użytkownikiem przy przewijaniu listy - filtry zostają
   zwykłe, przewijają się razem ze stroną.

   `top` omija przyklejony nagłówek (`header.js-sticky-header` ma 236 px razem
   z belką kontaktową i paskiem menu) - wartość w zmiennej, żeby przy zmianie
   wysokości nagłówka poprawiać w jednym miejscu.

   Zasięg jazdy wyznacza lewa kolumna (element `sticky` nie wychodzi poza
   rodzica), a ta sięga tak głęboko jak najwyższa kolumna wiersza - czyli
   zwykle do końca listy produktów. */
@media (min-width: 768px) {
  .rk-pomoc {
    --rk-sticky-top: 252px;

    position: sticky;
    top: var(--rk-sticky-top);
  }
}

/* przy niskim oknie boks nie zmieściłby się pod nagłówkiem w całości */
@media (min-width: 768px) and (max-height: 700px) {
  .rk-pomoc {
    position: static;
  }
}

.rk-pomoc__tytul {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-pomoc__tekst {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted);
}

.rk-pomoc__pozycja {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-pomoc__pozycja:hover {
  text-decoration: none;
}

.rk-pomoc__pozycja--statyczna {
  cursor: default;
}

.rk-pomoc__ikona {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--rk-blue);
}

.rk-pomoc__tresc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rk-pomoc__etykieta {
  font-size: 0.75rem;
  color: var(--rk-muted);
}

.rk-pomoc__wartosc {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rk-blue);
  overflow-wrap: anywhere;
}

.rk-pomoc__wartosc--zwykla {
  font-weight: 400;
  color: var(--rk-muted);
}

/* adres `sklep@hossaopakowania.pl` przy 14 px nie mieścił się w kolumnie
   i łamał się po kropce - mniejszy stopień trzyma go w jednej linii */
.rk-pomoc__wartosc--mail {
  font-size: 0.8125rem;
}

/* dwa numery jeden pod drugim, imię osoby jako dopisek */
.rk-pomoc__telefon {
  margin-top: 0.125rem;
  text-decoration: none;
}

.rk-pomoc__telefon:hover,
.rk-pomoc__telefon:focus {
  color: var(--rk-blue-dark, #96733f);
  text-decoration: none;
}

.rk-pomoc__osoba {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--rk-muted);
}

.rk-pomoc__przycisk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rk-blue);
  border-radius: 10px;
  background: #fff;
  color: var(--rk-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.rk-pomoc__przycisk:hover {
  background: var(--rk-blue);
  color: #fff;
  text-decoration: none;
}

.rk-pomoc__przycisk svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* --- pasek narzędzi nad listą --- */

.rk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rk-toolbar__licznik {
  font-size: 0.875rem;
  color: var(--rk-muted);
}

.rk-toolbar__narzedzia {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.rk-toolbar__pole {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rk-toolbar__etykieta {
  font-size: 0.875rem;
  color: var(--rk-muted);
  white-space: nowrap;
}

.rk-toolbar__select,
.rk-sort__btn {
  height: 42px;
  width: auto;
  padding: 0 0.875rem;
  border: 1px solid var(--rk-field-border);
  border-radius: 10px;
  background: #fff;
  font-size: 0.875rem;
  color: var(--rk-ink);
}

/* stała szerokość - inaczej globalna reguła `select { width: 100% }`
   rozpycha pole na całą szerokość paska */
.rk-toolbar__select {
  flex: 0 0 auto;
  width: 5.5rem;
  padding-right: 1.5rem;
}

.rk-sort {
  position: relative;
}

.rk-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
  justify-content: space-between;
  white-space: nowrap;
}

.rk-sort__menu {
  border: 1px solid var(--rk-line);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(27, 39, 51, 0.1);
}

.rk-sort__menu .dropdown-item.current {
  color: var(--rk-blue);
  font-weight: 600;
}

/* pasek trzyma się jednej linii, dopóki jest na to miejsce */
@media (min-width: 992px) {
  .rk-toolbar__narzedzia {
    flex-wrap: nowrap;
  }
}

.rk-widok {
  display: inline-flex;
  border: 1px solid var(--rk-field-border);
  border-radius: 10px;
  overflow: hidden;
}

.rk-widok__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: #fff;
  color: var(--rk-muted);
}

.rk-widok__btn + .rk-widok__btn {
  border-left: 1px solid var(--rk-field-border);
}

.rk-widok__btn.is-active {
  background: var(--rk-blue);
  color: #fff;
}

.rk-widok__btn svg {
  width: 18px;
  height: 18px;
}

/* --- siatka kafelków --- */

#js-product-list .products {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 1599.98px) {
  #js-product-list .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  #js-product-list .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.rk-produkt {
  height: 100%;
}

.rk-produkt__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.875rem;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.rk-produkt__inner:hover {
  border-color: #e0d6c4;
  box-shadow: 0 10px 24px rgba(27, 39, 51, 0.08);
}

/* Plakietki produktu ("Nowość") w grafitie ze stopki.
   Motyw liczy tło jako `RGBA(var(--bs-primary-rgb), …)` i robi to
   z `!important` w warstwie `bs-base` - nadpisanie samego
   `background-color` przegrywa, więc podmieniamy źródłową zmienną. */
.product-flags .badge:not(.discount),
.text-bg-primary {
  --bs-primary-rgb: 20, 26, 31;
}

.rk-produkt__top {
  position: relative;
  margin-bottom: 0.5rem;
}

/* Zdjęcia z hurtowni są kwadratowe i mają szerokie białe marginesy nad
   i pod produktem - przez to między zdjęciem a opisem robiła się duża dziura.
   Kadrujemy je do kwadratu; produkt jest wyśrodkowany, więc nic nie tracimy. */
.rk-produkt__top img {
  aspect-ratio: 4 / 4;
  object-fit: cover;
}

/* hummingbird powiększa zdjęcie przy najechaniu (scale 1.1) - z podmianą
   na drugie ujęcie to już za dużo ruchu, więc powiększenie wyłączamy.
   Reguła spoza @layer wygrywa z warstwą `ps-components` motywu. */
.rk-produkt__inner:hover .product-miniature__image,
.rk-produkt__inner:focus-within .product-miniature__image {
  transform: none;
}

/* drugie zdjęcie po najechaniu - leży na pierwszym i wchodzi przenikaniem */
.rk-produkt__hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.rk-produkt__inner:hover .rk-produkt__hover,
.rk-produkt__inner:focus-within .rk-produkt__hover {
  opacity: 1;
}

.rk-produkt__top img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.rk-produkt__bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.rk-produkt__infos {
  flex: 1 1 auto;
}

/* motyw daje tej sekcji siatkę z odstępem - zerujemy go, bo marginesy
   ustawiają już poszczególne elementy (logo, nazwa, parametry) */
@layer ps-components {
  .product-miniature__infos {
    display: grid;
    gap: 0;
  }
}

.rk-produkt__marka {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rk-ink);
}

/* Logo marki na karcie produktu - ukryte na życzenie klienta.
   Reszta reguł zostaje: przywrócenie to skasowanie `display: none`. */
.rk-produkt__logo {
  display: none;
  width: auto;
  max-width: 120px;
  height: 36px;
  margin-bottom: 0;
  object-fit: contain;
  object-position: left center;
}

.rk-produkt__nazwa {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-muted);
  text-decoration: none;
}

.rk-produkt__nazwa:hover {
  color: var(--rk-blue);
  text-decoration: none;
}

/* parametry pod nazwą (kolor, rozmiar) */
.rk-produkt__parametry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.rk-produkt__parametr {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--rk-ink);
}

.rk-produkt__kropka {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(27, 39, 51, 0.15);
  border-radius: 50%;
}

/* płeć - ikona zamiast kropki, dobierana po wartości cechy */
.rk-produkt__parametr--plec::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rk-plec--damska::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.4' r='5.2'/%3E%3Cpath d='M12 13.6V21M8.6 18h6.8'/%3E%3C/svg%3E");
}

.rk-plec--meska::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='14' r='5.2'/%3E%3Cpath d='M14.4 9.6 20 4M15 4h5v5'/%3E%3C/svg%3E");
}

.rk-plec--unisex::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12.4' r='4.6'/%3E%3Cpath d='M12 17v4.2M9.6 19.4h4.8M15.6 9 20 4.6M15.4 4.4H20v4.6'/%3E%3C/svg%3E");
}

.rk-produkt__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.rk-produkt__cena {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-produkt__cena-stara {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  color: var(--rk-muted);
  text-decoration: line-through;
}

.rk-produkt__akcje {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rk-produkt__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rk-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rk-muted);
}

.rk-produkt__ikona svg {
  width: 18px;
  height: 18px;
}

.rk-produkt__ikona:hover {
  border-color: var(--rk-blue);
  color: var(--rk-blue);
}

.rk-produkt__ikona--kosz {
  border-color: var(--rk-blue);
  background: var(--rk-blue);
  color: #fff;
}

.rk-produkt__ikona--kosz:hover {
  background: var(--rk-blue-dark);
  border-color: var(--rk-blue-dark);
  color: #fff;
}

/* --- ilość na kafelku ---

   Domyślnie schowana (zero szerokości, bez animowania `display`, żeby dało się
   ją płynnie wysunąć), pokazuje się po najechaniu na kartę albo gdy coś w niej
   ma focus - klawiatura ma działać tak samo jak mysz. */

.rk-produkt__form {
  display: flex;
  /* hummingbird ustawia formularzowi kolumnę na wąskich ekranach - wtedy
     koszyk lądował pod polem ilości zamiast obok niego */
  flex-direction: row;
  align-items: center;
  gap: 0.375rem;
}

.rk-ilosc {
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  border: 1px solid var(--rk-line);
  border-radius: 8px;
  opacity: 0;
  transition: width 0.18s ease-in-out, opacity 0.18s ease-in-out;
}

.rk-produkt:hover .rk-ilosc,
.rk-produkt:focus-within .rk-ilosc {
  width: 84px;
  opacity: 1;
}

.rk-ilosc__btn {
  flex: 0 0 auto;
  width: 26px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rk-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.rk-ilosc__btn:hover {
  color: var(--rk-blue);
}

.rk-ilosc__pole {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rk-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  /* strzałki przeglądarki są za małe na dotyk i psują wyrównanie */
  -moz-appearance: textfield;
}

.rk-ilosc__pole::-webkit-outer-spin-button,
.rk-ilosc__pole::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.rk-ilosc__pole:focus {
  outline: 0;
}

/* na dotyku nie ma najechania - pole ilości jest widoczne od razu */
@media (hover: none) {
  .rk-ilosc {
    width: 84px;
    opacity: 1;
  }
}

/* Wąska karta (dwie w rzędzie na telefonie): cena idzie do własnego wiersza,
   a ilość i koszyk stają obok siebie pod nią - w jednej linii wszystkie trzy
   elementy się nie mieszczą i koszyk spadał sam pod ilość. */
@media (max-width: 575.98px) {
  .rk-produkt__stopka {
    flex-wrap: wrap;
    row-gap: 0.625rem;
  }

  .rk-produkt__ceny {
    flex: 1 1 100%;
  }

  .rk-produkt__akcje {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .rk-ilosc,
  .rk-produkt:hover .rk-ilosc {
    width: 76px;
  }
}

/* --- widok listy --- */

#js-product-list.rk-lista .products {
  grid-template-columns: minmax(0, 1fr);
}

#js-product-list.rk-lista .rk-produkt__inner {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

#js-product-list.rk-lista .rk-produkt__top {
  flex: 0 0 180px;
  margin-bottom: 0;
}

#js-product-list.rk-lista .rk-produkt__bottom {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

#js-product-list.rk-lista .rk-produkt__stopka {
  flex: 0 0 auto;
  margin-top: 0;
}

/* na telefonie widok listy nie ma sensu (kafelek robi się nieczytelny),
   więc przełącznik chowamy i zawsze pokazujemy siatkę */
.rk-widok {
  display: none;
}

@media (min-width: 768px) {
  .rk-widok {
    display: inline-flex;
  }
}

@media (max-width: 767.98px) {
  #js-product-list.rk-lista .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #js-product-list.rk-lista .rk-produkt__inner,
  #js-product-list.rk-lista .rk-produkt__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #js-product-list.rk-lista .rk-produkt__top {
    flex: 0 0 auto;
    margin-bottom: 0.875rem;
  }

  #js-product-list.rk-lista .rk-produkt__stopka {
    margin-top: auto;
  }
}

/* --------------------------------------------------------------------------
   Opis dodatkowy kategorii (pod listą produktów)

   Treść wpisuje klient w panelu - prostymi znacznikami (h2, `.rk-porady`
   z kartami, `<details>` na pytania). Cały wygląd robi ten arkusz.
   -------------------------------------------------------------------------- */

.category__additional-description {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem 2rem;
  border-radius: 16px;
  background: #f9f7f4;
}

.category__additional-description h2 {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.category__additional-description h2:not(:first-child) {
  margin-top: 2rem;
}

/* --- karty z poradami --- */

.rk-porady {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .rk-porady {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rk-porada {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 5.5rem;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: #fff;
}

/* ikona wstawiana z arkusza - klient nie musi wklejać SVG do treści */
.rk-porada::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ikony z arkusza klienta (oprawy-ikony.png), pocięte na osobne pliki */
.rk-porada--material::before {
  background-image: url("../img/porady/material.png");
}

.rk-porada--styl::before {
  background-image: url("../img/porady/styl.png");
}

.rk-porada--komfort::before {
  background-image: url("../img/porady/komfort.png");
}

.rk-porada h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-porada p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--rk-muted);
}

/* --- pytania i odpowiedzi --- */

/* Pytania układają się w dwie kolumny. Nagłówki i karty porad zajmują
   całą szerokość - dzięki temu nie trzeba zmieniać treści wpisanej
   przez klienta, wystarczy siatka na wspólnym rodzicu. */
.category__additional-description {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-content: start;
}

.category__additional-description > h2,
.category__additional-description > .rk-porady,
.category__additional-description > p {
  grid-column: 1 / -1;
}

@media (max-width: 991.98px) {
  .category__additional-description {
    grid-template-columns: minmax(0, 1fr);
  }
}

.category__additional-description details,
.category__additional-description .rk-faq {
  align-self: start;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  background: #fff;
}

/* Wariant bez rozwijania: PrestaShop czyści opisy HTMLPurifierem, który nie zna
   `<details>`/`<summary>` (elementy HTML5) i wycina je razem z treścią.
   Pytanie i odpowiedź stoją więc na wierzchu, w takiej samej karcie. */
.category__additional-description .rk-faq {
  padding: 0.9375rem 1.25rem;
}

.category__additional-description .rk-faq h3 {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rk-ink);
}

.category__additional-description .rk-faq p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rk-muted);
}

.category__additional-description summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--rk-ink);
  cursor: pointer;
  list-style: none;
}

.category__additional-description summary::-webkit-details-marker {
  display: none;
}

/* strzałka po prawej, obracana po rozwinięciu */
.category__additional-description summary::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.15s ease-in-out;
}

.category__additional-description details[open] summary::after {
  transform: rotate(180deg);
}

.category__additional-description details p {
  margin: 0;
  padding: 0 1.25rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--rk-muted);
}

/* Rozwijanie animuje skrypt (custom.js): opakowuje treść w tę warstwę
   i przechodzi między wysokością 0 a wysokością zawartości. Samego
   <details> nie da się animować - przeglądarka przełącza je skokowo. */
.rk-faq__tresc {
  overflow: hidden;
}

.rk-faq__tresc.is-animowana {
  transition: height 0.25s ease, opacity 0.25s ease;
}

.rk-faq__tresc.is-zwinieta {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Pasek zaufania nad stopką (listing kategorii)
   -------------------------------------------------------------------------- */

.rk-zaufanie {
  margin: 2.5rem 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rk-line);
  background: #f9f7f4;
}

.rk-zaufanie__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-zaufanie__pozycja {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 1.25rem 0.25rem 3.25rem;
  position: relative;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-ink);
}

/* kreski rozdzielające, bez linii przy pierwszej pozycji */
.rk-zaufanie__pozycja + .rk-zaufanie__pozycja {
  border-left: 1px solid var(--rk-line);
}

.rk-zaufanie__pozycja::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rk-zaufanie--oryginalne::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 5.8v5.4c0 4 2.9 7.7 7 9.6 4.1-1.9 7-5.6 7-9.6V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E");
}

.rk-zaufanie--dostawa::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.8h9.2v9.4H4z'/%3E%3Cpath d='M13.2 9.8h3.4l2.8 2.9v3.5h-6.2z'/%3E%3Ccircle cx='7.6' cy='17.8' r='1.7'/%3E%3Ccircle cx='16.6' cy='17.8' r='1.7'/%3E%3C/svg%3E");
}

.rk-zaufanie--zwrot::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 9.6a8 8 0 0 1 14-2.4'/%3E%3Cpath d='M19.6 14.4a8 8 0 0 1-14 2.4'/%3E%3Cpath d='M4.4 5.2v4.4h4.4M19.6 18.8v-4.4h-4.4'/%3E%3C/svg%3E");
}

.rk-zaufanie--doradztwo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 15.2a2 2 0 0 1-2 2H8.6L4.6 21V6.4a2 2 0 0 1 2-2h11.8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M9 9.4h7M9 12.6h4.6'/%3E%3C/svg%3E");
}

.rk-zaufanie--platnosci::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.4' width='16' height='9.6' rx='2'/%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8'/%3E%3Ccircle cx='12' cy='15.2' r='1.4'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
  .rk-zaufanie__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0;
  }

  .rk-zaufanie__pozycja + .rk-zaufanie__pozycja {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .rk-zaufanie__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- paginacja --- */

.products__pagination {
  margin-top: 2rem;
}

.pagination__container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.75rem;
}

.pagination__number {
  font-size: 0.8125rem;
  color: var(--rk-muted);
}

.pagination__container .pagination {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__container .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.625rem;
  border: 1px solid var(--rk-line);
  border-radius: 10px;
  background: #fff;
  color: var(--rk-ink);
  font-size: 0.875rem;
}

.pagination__container .page-item.active .page-link {
  border-color: var(--rk-blue);
  background: var(--rk-blue);
  color: #fff;
}

.pagination__container .page-link.disabled,
.pagination__container .page-link[disabled] {
  color: #bdb4a6;
}

/* --------------------------------------------------------------------------
   4b. STOPKA

   Tresc kolumn pochodzi z modulow (ps_contactinfo, ps_linklist,
   ps_customeraccountlinks, ps_emailsubscription, ps_socialfollow) - tutaj
   sa wylacznie style.
   -------------------------------------------------------------------------- */

.rk-footer {
  --rk-footer-bg: #0a52ad;
  --rk-footer-dim: rgba(255, 255, 255, 0.72);

  margin-top: 64px;
  background: var(--rk-footer-bg);
  color: #fff;
}

.rk-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 22fr) minmax(0, 56fr) minmax(0, 22fr);
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* --- kolumna z logo i danymi firmy --- */

.rk-footer__logo {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.rk-footer__logo img {
  max-width: 170px;
  height: auto;
}

.rk-fcontact__company,
.rk-fcontact__address {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-footer-dim);
}

.rk-fcontact__address {
  margin-bottom: 1.125rem;
}

.rk-fcontact__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-fcontact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #fff;
  text-decoration: none;
}

.rk-fcontact__item:hover {
  color: #fff;
  text-decoration: underline;
}

.rk-fcontact__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #fff;
}

.rk-fcontact__icon svg {
  width: 100%;
  height: 100%;
}

/* --- kolumny odnosnikow (moduly) --- */

.rk-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.rk-fcol__title {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.rk-fcol__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-fcol__link {
  position: relative;
  display: inline-block;
  padding-left: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--rk-footer-dim);
  text-decoration: none;
}

/* strzalka zamiast kropki listy, jak w projekcie */
.rk-fcol__link::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--rk-footer-dim);
}

.rk-fcol__link:hover {
  color: #fff;
  text-decoration: none;
}

/* --- newsletter --- */

.rk-footer__news {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 2rem;
}

.rk-fnews__text {
  margin: 0 0 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-footer-dim);
}

.rk-fnews__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}

.rk-fnews__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
}

.rk-fnews__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.rk-fnews__input:focus {
  outline: none;
}

.rk-fnews__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.rk-fnews__submit:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rk-fnews__submit svg {
  width: 1.125rem;
  height: 1.125rem;
}

.rk-fnews__msg,
.rk-fnews__conditions {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--rk-footer-dim);
}

.rk-fnews__msg--error {
  color: #ffd3d3;
}

.rk-fnews__gdpr {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--rk-footer-dim);
}

/* --- ikony spolecznosciowe --- */

.rk-fsocial {
  display: flex;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.rk-fsocial__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.15s ease-in-out;
}

.rk-fsocial__link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* --- dolny pasek --- */

.rk-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rk-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  font-size: 0.75rem;
  color: var(--rk-footer-dim);
}

.rk-footer__policy {
  color: var(--rk-footer-dim);
  text-decoration: none;
}

.rk-footer__policy:hover {
  color: #fff;
}

/* --- mniejsze ekrany --- */

@media (max-width: 1199.98px) {
  .rk-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rk-footer__cols {
    grid-column: 1 / -1;
    order: 3;
  }

  .rk-footer__news {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .rk-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .rk-footer__cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .rk-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. AKCENT MARKI POZA NAGLOWKIEM
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-primary:disabled {
  --bs-btn-bg: var(--rk-blue);
  --bs-btn-border-color: var(--rk-blue);
  --bs-btn-hover-bg: var(--rk-blue-dark);
  --bs-btn-hover-border-color: var(--rk-blue-dark);
  --bs-btn-active-bg: var(--rk-blue-dark);
  --bs-btn-active-border-color: var(--rk-blue-dark);
  /* Bez tego przycisk-odnośnik (np. „Przejdź do realizacji zamówienia"
     w oknie po dodaniu do koszyka) bierze kolor z reguły `a` niżej i napis
     wychodzi złoty na złotym tle - czyli niewidoczny. */
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  color: #fff;
}

a {
  color: var(--rk-blue);
}

a:hover {
  color: var(--rk-blue-dark);
}

/* ==========================================================================
   MAKIETA HOSSA (2026-09-06) - naglowek i pasek nawigacji
   Blok trzymany na koncu pliku celowo: nadpisuje wczesniejsze reguly bez
   ruszania oryginalnych sekcji, wiec cofniecie zmian to skasowanie tego bloku.
   ========================================================================== */

:root {
  --rk-blue: #b08a4e;        /* akcent z makiety - zloto */
  --rk-blue-dark: #96733f;   /* ciemniejszy wariant do hover */
  --rk-topbar-bg: #131310;   /* czarna belka kontaktowa */
  --rk-nav-line: #ececec;
}

/* --- gorna belka: czarna, ikony w zlotych kolkach --- */

.rk-topbar {
  background: var(--rk-topbar-bg);
  border-bottom: 0;
  color: #fff;
  font-size: 0.8125rem;
}

.rk-topbar__container {
  min-height: 48px;
}

.rk-contactinfo {
  gap: 0;
}

.rk-contactinfo__item,
.rk-topbar__link,
.rk-topbar__link--accent {
  color: #fff;
  text-decoration: none;
}

.rk-contactinfo__item:hover,
.rk-contactinfo__item:focus,
.rk-topbar__link:hover,
.rk-topbar__link--accent:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

/* pionowe kreski rozdzielajace pozycje - jak na makiecie */
.rk-contactinfo__item + .rk-contactinfo__item,
.rk-topbar__account .rk-topbar__link + .rk-topbar__link {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 1.5rem;
  margin-left: 1.5rem;
}

.rk-contactinfo__item {
  gap: 0.75rem;
}

/* ikona siedzi w zlotym kolku, sama jest biala */
.rk-contactinfo__icon,
.rk-contactinfo__item:hover .rk-contactinfo__icon,
.rk-contactinfo__item:focus .rk-contactinfo__icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.375rem;
  border-radius: 999px;
  background: var(--rk-blue);
  color: #fff;
}

/* --- wyszukiwarka: pelna pigulka ze zlotym przyciskiem --- */

.rk-searchbar .rk-searchbar__form {
  height: 56px;
  border-color: #ececec;
  border-radius: 999px;
  padding: 4px;
  background: #fbfbfb;
}

.rk-searchbar .rk-searchbar__form:focus-within {
  border-color: var(--rk-blue);
  box-shadow: 0 0 0 4px rgba(176, 138, 78, 0.14);
}

.rk-searchbar .rk-searchbar__magnifier {
  left: 1.375rem;
  color: var(--rk-blue);
}

.rk-searchbar .rk-searchbar__input {
  padding-left: 3.25rem;
  background: transparent;
}

.rk-searchbar .rk-searchbar__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 999px;
  padding: 0 2rem;
}

/* strzalka przy etykiecie "Szukaj" - z makiety */
.rk-searchbar .rk-searchbar__submit::after {
  content: "\2192";
  font-size: 1.125rem;
  line-height: 1;
}

.rk-searchbar .rk-searchbar__clear {
  right: 9.5rem;
}

/* --- pasek nawigacji: karty z ikona nad podpisem --- */

.rk-nav {
  border-top: 1px solid var(--rk-nav-line);
  border-bottom: 1px solid var(--rk-nav-line);
}

.rk-nav .ps-mainmenu__tree {
  flex-wrap: nowrap;
  gap: 0;
}

/* flex-basis: auto (a nie 0) - karty dziela pasek proporcjonalnie do dlugosci
   nazwy, dzieki czemu dluzsze podpisy mieszcza sie w dwoch wierszach jak
   w makiecie, zamiast lamac sie na trzy w rownej, za waskiej karcie */
.rk-nav .ps-mainmenu__tree-item,
.rk-nav .ps-mainmenu__tree > li {
  flex: 1 1 auto;
  min-width: 0;
}

/* Karty maja rowna wysokosc, a ich zawartosc jest wysrodkowana w pionie.
   Wczesniej bylo `space-between` (chevron przy dolnej krawedzi, strzalki
   w jednej linii) - po wylaczeniu ikon podpis wisial u gory karty, wiec
   centrowanie wyglada lepiej. */
.rk-nav .ps-mainmenu__tree-item-wrapper {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  height: 100%;
  padding: 0.875rem 0.75rem 0.625rem;
  border-radius: 0;
  border-left: 1px solid var(--rk-nav-line);
  transition: background-color 0.15s ease-in-out;
}


.rk-nav .ps-mainmenu__tree > li:first-child .ps-mainmenu__tree-item-wrapper {
  border-left: 0;
}

.rk-nav .ps-mainmenu__tree-link {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border-bottom: 0;
  text-align: center;
  white-space: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* podpis lamie sie na rowne wiersze zamiast zostawiac sierote w ostatnim */
.rk-navitem__label {
  display: block;
  max-width: 17rem;
  margin: 0 auto;
  text-wrap: balance;
}

/* Ikony pozycji menu wyłączone na życzenie użytkownika 2026-09-06.
   Zestaw ikon zostaje w rkmegamenu (korzysta z niego pasek mobilny i panel
   podmenu), więc przywrócenie to zamiana `none` na `inline-flex`. */
.rk-navitem__ikona {
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--rk-blue);
}

.rk-navitem__ikona svg {
  width: 100%;
  height: 100%;
}

/* Chevron pod podpisem zdjęty - karty zostają samym tekstem.
   Reguła musi stać PO stylu chevronu niżej (`display: flex`), bo obie mają
   tę samą szczegółowość i decyduje kolejność w pliku. */
.rk-nav .ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu__tree-dropdown-toggle.dropdown-toggle {
  display: none;
}

/* wlasny chevron pod podpisem zamiast trojkata bootstrapa (nieużywany,
   zostaje na wypadek przywrócenia strzałek) */
.rk-nav .ps-mainmenu__tree-dropdown-toggle {
  width: 100%;
  height: 0.875rem;
  align-items: center;
  justify-content: center;
  color: var(--rk-blue);
}

.rk-nav .ps-mainmenu__tree-dropdown-toggle::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.2rem 0 0;
  border: 0;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

/* karta aktywna i pod kursorem - wypelniona zlotem, tresc biala */
.rk-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-item-wrapper,
.rk-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-item-wrapper {
  background: var(--rk-blue);
  border-left-color: transparent;
}

.rk-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link,
.rk-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.rk-nav .ps-mainmenu__tree-item:hover .rk-navitem__ikona,
.rk-nav .ps-mainmenu__tree-item.current .rk-navitem__ikona,
.rk-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle,
.rk-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-dropdown-toggle {
  color: #fff;
  border-bottom-color: transparent;
}

/* przy ciasnym ekranie karty moga sie zawijac, zeby nie zgniatac napisow */
@media (max-width: 1399.98px) {
  .rk-nav .ps-mainmenu__tree {
    flex-wrap: wrap;
  }

  .rk-nav .ps-mainmenu__tree-item,
  .rk-nav .ps-mainmenu__tree > li {
    flex: 1 1 14%;
  }
}

/* ==========================================================================
   STOPKA wg makiety HOSSA Pucice (2026-09-06)
   Nadpisuje wczesniejsza sekcje stopki (niebieska, po rakoserwisie).
   ========================================================================== */

.rk-footer {
  --rk-footer-bg: #141a1f;
  --rk-footer-bg2: #10151a;
  --rk-footer-dim: rgba(255, 255, 255, 0.62);
  --rk-footer-line: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  background: var(--rk-footer-bg);
  color: #fff;
}

/* Dekoracyjne liscie wzdluz calej prawej krawedzi - tak jak na makiecie:
   u gory sucha galaz, u dolu zielone liscie wchodzace na pasek platnosci.
   Grafika jest tlem, wiec nie moze lapac kliknięć ani zaznaczenia. */
.rk-footer__liscie {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 22%;
  object-fit: cover;
  object-position: right top;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.rk-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 22fr) minmax(0, 15fr) minmax(0, 15fr) minmax(0, 15fr) minmax(0, 25fr);
  gap: 2.5rem;
  padding: 3.5rem 12px 2.75rem;
}

.rk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rk-footer__logo img {
  width: 260px;
  max-width: 100%;
  height: auto;
}

.rk-footer__opis {
  margin: 0;
  max-width: 22rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rk-footer-dim);
}

/* kolumny odnosnikow wpadaja z hooka jako rodzenstwo - siatka nadrzedna
   ustawia je obok siebie, wiec ten kontener nie moze narzucac wlasnej */
.rk-footer__cols {
  display: contents;
}

.rk-fcol__title,
.rk-fnews .rk-fcol__title {
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}

/* krotka zlota kreska pod naglowkiem kolumny */
.rk-fcol__title::after,
.rk-fnews .rk-fcol__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--rk-blue, #b08a4e);
}

.rk-fcol__list {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-fcol__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  text-decoration: none;
}

.rk-fcol__link::before {
  content: none;
}

/* chevron po prawej stronie pozycji, jak w makiecie */
.rk-fcol__link::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.rk-fcol__link:hover,
.rk-fcol__link:focus {
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

/* --- newsletter --- */

.rk-footer__news {
  position: relative;
  z-index: 1;
}

.rk-fnews__text {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rk-footer-dim);
}

.rk-fnews__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 56px;
  padding: 4px 4px 4px 1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
}

.rk-fnews__ikona {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: #9aa3ad;
}

.rk-fnews__ikona svg {
  width: 100%;
  height: 100%;
}

.rk-fnews__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--rk-ink, #1b2733);
  font-size: 0.9375rem;
}

.rk-fnews__input:focus {
  outline: none;
  box-shadow: none;
}

.rk-fnews__submit {
  flex: 0 0 auto;
  /* width: auto jest konieczne - wczesniejsza sekcja stopki ustawia 56 px pod
     przycisk z sama strzalka, przez co napis "Zapisz sie" wychodzil poza pole */
  width: auto;
  height: 100%;
  padding: 0 1.75rem;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.rk-fnews__submit:hover,
.rk-fnews__submit:focus {
  background: var(--rk-blue-dark, #96733f);
}

.rk-fnews__zgoda {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-footer-dim);
  cursor: pointer;
}

.rk-fnews__zgoda input {
  margin-top: 0.15rem;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--rk-blue, #b08a4e);
}

.rk-fnews__zgoda a {
  color: var(--rk-footer-dim);
  text-decoration: underline;
}

/* --- ikony spolecznosciowe --- */

.rk-fsocial {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-fsocial__link {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  transition: transform 0.15s ease-in-out;
}

.rk-fsocial__link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-fsocial__link:hover {
  transform: translateY(-2px);
}

/* suwak ceny w filtrach (noUiSlider) - domyslnie niebieski z bootstrapa */
.search-filters__slider .noUi-connect {
  background: var(--rk-blue, #b08a4e);
}

.search-filters__slider .noUi-handle {
  border-color: var(--rk-blue, #b08a4e);
}

/* serwis bez wpisanego adresu - ikona widoczna, ale nieklikalna */
.rk-fsocial__link--pusty {
  cursor: default;
}

.rk-fsocial__link--pusty:hover {
  transform: none;
}

/* --- pasek kontaktowy --- */

.rk-footer__kontakt {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 12px;
  border-top: 1px solid var(--rk-footer-line);
}

.rk-fkontakt {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  text-decoration: none;
}

.rk-fkontakt:hover {
  color: #fff;
  text-decoration: none;
}

.rk-fkontakt__ikona {
  flex: 0 0 auto;
  display: inline-flex;
  width: 46px;
  height: 46px;
}

.rk-fkontakt__ikona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-fkontakt__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.rk-fkontakt__glowny {
  font-size: 1rem;
  font-weight: 600;
}

.rk-fkontakt__drugi {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-footer-dim);
}

/* dwa numery kontaktowe jeden pod drugim, z imieniem osoby obok */
.rk-fkontakt--telefony .rk-fkontakt__tekst {
  gap: 0.25rem;
}

.rk-fkontakt__numer {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
}

.rk-fkontakt__numer:hover {
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

.rk-fkontakt__osoba {
  font-size: 0.8125rem;
  color: var(--rk-footer-dim);
}

/* dane rejestrowe pod ikonami spolecznosciowymi */
.rk-footer__firma {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--rk-footer-dim);
}

.rk-footer__firma-nazwa {
  display: block;
  color: rgba(255, 255, 255, 0.82);
}

/* wezwanie do kontaktu - jasniejsza plytka po prawej */
.rk-foferta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rk-footer-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.rk-foferta:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.rk-foferta__ikona {
  flex: 0 0 auto;
  display: inline-flex;
  width: 42px;
  height: 42px;
}

.rk-foferta__ikona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-foferta__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.rk-foferta__tytul {
  font-size: 0.9375rem;
  font-weight: 600;
}

.rk-foferta__opis {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-footer-dim);
}

.rk-foferta__strzalka {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
}

.rk-foferta__strzalka svg {
  width: 18px;
  height: 18px;
}

/* --- platnosci, dostawa, nota ekologiczna --- */

.rk-footer__paski {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2rem;
  padding: 1.75rem 12px;
  border-top: 1px solid var(--rk-footer-line);
}

.rk-fpasek + .rk-fpasek,
.rk-feko {
  padding-left: 2rem;
  border-left: 1px solid var(--rk-footer-line);
}

.rk-fpasek__tytul {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.rk-fpasek__loga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* logotypy stoja na bialych plytkach, tak jak w makiecie; wysokosc stala,
   szerokosc wynika z proporcji pliku */
.rk-fpasek__loga img {
  height: 38px;
  width: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: #fff;
}

.rk-feko {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rk-feko__ikona {
  flex: 0 0 auto;
  display: inline-flex;
  width: 46px;
  height: 46px;
}

.rk-feko__ikona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-feko__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.rk-feko__tytul {
  font-size: 0.9375rem;
  font-weight: 600;
}

.rk-feko__opis {
  font-size: 0.8125rem;
  color: var(--rk-footer-dim);
}

/* --- pasek dolny --- */

.rk-footer__bottom {
  position: relative;
  z-index: 1;
  background: var(--rk-footer-bg2);
  border-top: 1px solid var(--rk-footer-line);
}

.rk-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.125rem 12px;
  font-size: 0.8125rem;
  color: var(--rk-footer-dim);
}

.rk-footer__copy,
.rk-footer__autor {
  margin: 0;
}

.rk-footer__prawne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-footer__prawne a,
.rk-footer__autor a {
  color: var(--rk-footer-dim);
  text-decoration: none;
}

.rk-footer__prawne a:hover,
.rk-footer__autor a:hover {
  color: var(--rk-blue, #b08a4e);
}

/* pionowe kreski miedzy odnosnikami prawnymi */
.rk-footer__prawne li + li {
  position: relative;
}

.rk-footer__prawne li + li::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.2em;
  bottom: 0.2em;
  width: 1px;
  background: var(--rk-footer-line);
}

@media (max-width: 1399.98px) {
  .rk-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rk-footer__brand,
  .rk-footer__news {
    grid-column: 1 / -1;
  }

  .rk-footer__kontakt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rk-footer__paski {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-fpasek + .rk-fpasek,
  .rk-feko {
    padding-left: 0;
    border-left: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rk-footer-line);
  }
}

@media (max-width: 767.98px) {
  /* odstęp treść → stopka: 64 px marginesu + 32 px dolnego paddingu kolumny
     dawały na telefonie prawie ćwierć ekranu pustki pod ostatnią sekcją */
  .rk-footer {
    margin-top: 24px;
  }

  #center-column {
    padding-bottom: 12px;
  }

  .rk-footer__liscie {
    display: none;
  }

  .rk-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .rk-footer__kontakt {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-footer__bottom-inner {
    justify-content: flex-start;
  }
}

/* --- stopka: kolumny odnosnikow zwijane na telefonie ---
   Kolumny to <details class="rk-fcol"> z atrybutem `open`. Powyzej 768 px
   zostaja otwarte i wygladaja jak dotad (naglowek nie jest klikalny),
   ponizej zamyka je custom.js i dziala natywne rozwijanie. */

details.rk-fcol > .rk-fcol__title {
  list-style: none; /* trojkat przegladarki - Firefox */
}

details.rk-fcol > .rk-fcol__title::-webkit-details-marker {
  display: none; /* trojkat przegladarki - Safari/starszy Chrome */
}

@media (min-width: 768px) {
  /* na desktopie naglowek jest tylko podpisem, nie przelacznikiem */
  details.rk-fcol > .rk-fcol__title {
    pointer-events: none;
  }
}

@media (max-width: 767.98px) {
  details.rk-fcol {
    border-bottom: 1px solid var(--rk-footer-line);
  }

  details.rk-fcol > .rk-fcol__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 1rem 0;
    cursor: pointer;
  }

  /* zlota kreska pod naglowkiem ma sens tylko przy stalej kolumnie */
  details.rk-fcol > .rk-fcol__title::after {
    content: none;
  }

  /* chevron po prawej - w dol gdy zwiniete, w gore gdy rozwiniete */
  details.rk-fcol > .rk-fcol__title::before {
    content: "";
    order: 2;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    opacity: 0.65;
    transition: transform 0.15s ease-in-out;
  }

  details.rk-fcol[open] > .rk-fcol__title::before {
    transform: translateY(0.1em) rotate(-135deg);
  }

  details.rk-fcol > .rk-fcol__list {
    padding-bottom: 1rem;
  }
}

/* ==========================================================================
   RESZTKI NIEBIESKIEGO (2026-09-06)
   Plakietki produktów i tło nagłówka kategorii zostały po rakoserwisie -
   granat #024c9b i bootstrapowy #0b69f6 nie mają nic wspólnego z paletą
   HOSSA (złoto + grafit).
   ========================================================================== */

/* Źródłem większości niebieskiego jest bootstrapowy `--bs-primary` (#0b69f6),
   którego hummingbird używa w plakietkach, przyciskach i obramowaniach.
   Przestawiamy go raz na złoto marki - to sprząta też przyciski typu
   „Filtruj" czy „Kontynuuj zakupy". */
:root {
  --bs-primary: #b08a4e;
  --bs-primary-rgb: 176, 138, 78;
  /* pochodne Bootstrapa 5.3: klasy `text-primary-emphasis`, `bg-primary-subtle`
     itd. mają `!important`, więc jedyne wyjście to podmiana zmiennej */
  --bs-primary-text-emphasis: #96733f;
  --bs-primary-bg-subtle: #faf7f2;
  --bs-primary-border-subtle: #ece3d5;
  --bs-link-color: #b08a4e;
  --bs-link-hover-color: #96733f;
  --bs-link-color-rgb: 176, 138, 78;
  --bs-link-hover-color-rgb: 150, 115, 63;
}

/* „Nowość" - grafit jak w stopce, żeby plakietka nie konkurowała ze złotem
   rabatów. Samo tło ustawia zmienna `--bs-primary-rgb` wyżej w tym pliku
   (rdzeń motywu liczy tło plakietki z niej i to z `!important`); tutaj
   zostaje już tylko obwódka. */
.product-flags .badge.new,
.product-flags .badge.online-only,
.product-flags .badge.pack {
  border-color: #141a1f;
}

/* rabat - złoto marki; to on ma przyciągać wzrok na kafelku */
.product-flags .badge.discount,
.product-flags .badge.on-sale {
  border: 1px solid var(--rk-blue, #b08a4e);
  background-color: var(--rk-blue, #b08a4e);
  color: #fff;
}

/* „Wyprzedane" zostaje neutralne, ale bez niebieskiej obwódki */
.product-flags .badge.out_of_stock {
  border-color: var(--rk-line, #e6e1d9);
  background: #fff;
  color: var(--rk-muted, #5b6875);
}

/* tło nagłówka kategorii: z błękitnego na ciepłe, zgodne z logo */
.rk-hero {
  background: linear-gradient(120deg, #ffffff 0%, #faf7f2 55%, #f3ebdd 100%);
}

/* ==========================================================================
   NAGŁÓWEK KATEGORII wg makiety (2026-09-06)
   Hierarchia: tytuł → jedno mocne zdanie → opis → pasek zastosowań.
   Treść (poza tytułem) pochodzi z pola „Opis" kategorii, więc klient może
   ją zmienić w panelu; wygląd robi ten arkusz.
   ========================================================================== */

.rk-hero {
  padding: 1.75rem 0 2.25rem;
}

/* Podkategorie mają zwykle sam tytuł, więc sekcja robi się bardzo niska,
   a zdjęcie ścina się do paska. Minimalna wysokość daje kadrowi sens. */
.rk-hero--zdjecie {
  display: flex;
  align-items: center;
  min-height: 260px;
}

.rk-hero--zdjecie .rk-hero__tresc {
  width: 100%;
}

.rk-hero__tytul {
  font-size: 2.5rem;
  letter-spacing: -0.01em;
}

.rk-hero__opis {
  max-width: 46rem;
  margin-top: 0.75rem;
}

/* pierwsze zdanie - zapowiedź oferty, mocniejsza niż reszta opisu */
.rk-hero__opis .rk-hero__lead {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rk-ink, #1b2733);
}

.rk-hero__opis p {
  font-size: 0.9375rem;
}

/* --- pasek zastosowań --- */

.rk-hero__uses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.rk-hero__use {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid #ece3d5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rk-ink, #1b2733);
}

/* ikona z arkusza - klient wpisuje w panelu samą klasę, bez SVG w treści */
.rk-hero__use::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rk-hero__use--gastro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2.5 2.5 0 0 0 5 0V3M8.5 10v11'/%3E%3Cpath d='M17.5 3c-1.4 1.6-2 3.4-2 5.4 0 1.6.7 2.6 2 3.1V21'/%3E%3C/svg%3E");
}

.rk-hero__use--handel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8h13.2l1 12H4.4z'/%3E%3Cpath d='M9 10.4V7a3 3 0 0 1 6 0v3.4'/%3E%3C/svg%3E");
}

.rk-hero__use--firmy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5V6.2l8-2.7v17M12 20.5h8V9.5h-8'/%3E%3Cpath d='M7.4 9.2v.1M7.4 13v.1M15.6 13v.1M15.6 16.4v.1'/%3E%3C/svg%3E");
}

.rk-hero__use--eko::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.4c-7.6-.6-13 2.2-13 8 0 2.2 1.1 4.2 2.8 5.4 4.6.5 10.2-4.2 10.2-13.4Z'/%3E%3Cpath d='M17 7.4C12.6 9.2 9 13.4 7.4 19.6'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {
  .rk-hero__tytul {
    font-size: 1.875rem;
  }

  .rk-hero__uses {
    gap: 0.5rem;
  }

  .rk-hero__use {
    font-size: 0.75rem;
  }
}

/* Przyciski obrysowane („Kontynuuj zakupy" w koszyku i w oknie po dodaniu do
   koszyka) mają kolor wpisany w motywie na sztywno (`--bs-btn-border-color:
   #0b69f6`), więc nie łapią zmiany `--bs-primary` - trzeba przestawić im
   zmienne po nazwie. */
.btn-outline-primary {
  --bs-btn-color: var(--rk-blue, #b08a4e);
  --bs-btn-border-color: var(--rk-blue, #b08a4e);
  --bs-btn-hover-bg: var(--rk-blue, #b08a4e);
  --bs-btn-hover-border-color: var(--rk-blue, #b08a4e);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rk-blue-dark, #96733f);
  --bs-btn-active-border-color: var(--rk-blue-dark, #96733f);
  --bs-btn-active-color: #fff;
  border-color: var(--rk-blue, #b08a4e);
}

/* Komunikaty informacyjne (np. „Twój koszyk zawiera 3 tych produktów")
   - bootstrapowy błękit zamieniony na beż marki. Ostrzeżenia i błędy
   zostają w swoich kolorach, bo tam kolor niesie znaczenie. */
.alert-info {
  --bs-alert-color: var(--rk-ink, #1b2733);
  --bs-alert-bg: #faf7f2;
  --bs-alert-border-color: #ece3d5;
  --bs-alert-link-color: var(--rk-blue-dark, #96733f);
}

/* --- karta produktu --- */

/* „5 innych produktów w tej samej kategorii" (moduł ps_categoryproducts):
   liczbę pozycji ustawia `CATEGORYPRODUCTS_DISPLAY_PRODUCTS` w konfiguracji,
   ale siatka motywu ma na sztywno cztery kolumny - piąty kafelek spadał
   do drugiego rzędu. */
/* ==========================================================================
   KARTA PRODUKTU - górna część wg makiety (2026-09-06)
   Szablony: catalog/product.tpl (bloki), _partials/product-cover-thumbnails.tpl
   (galeria), _partials/rk-produkt-kup.tpl (ramka zakupu).
   ========================================================================== */

/* --- galeria: miniatury w pionie po lewej, duże zdjęcie po prawej --- */

.rk-galeria {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.rk-miniaturki {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.rk-miniaturki__lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 440px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
}

.rk-miniaturki__lista::-webkit-scrollbar {
  display: none;
}

.rk-miniaturki__pozycja {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.rk-miniaturki__przycisk {
  display: block;
  width: 84px;
  height: 84px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #f9f7f4;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out;
}

.rk-miniaturki__przycisk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rk-miniaturki__przycisk:hover,
.rk-miniaturki__przycisk.active {
  border-color: var(--rk-blue, #b08a4e);
}

.rk-miniaturki__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 10px;
  background: #fff;
  color: var(--rk-ink, #1b2733);
  cursor: pointer;
}

.rk-miniaturki__btn:hover {
  border-color: var(--rk-blue, #b08a4e);
  color: var(--rk-blue, #b08a4e);
}

.rk-miniaturki__btn svg {
  width: 1rem;
  height: 1rem;
}

.rk-galeria__glowne {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #f9f7f4;
}

.rk-galeria__glowne .product-flags {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

/* zdjęcia przełącza się miniaturami - strzałki karuzeli tylko zasłaniały kadr */
.rk-galeria__glowne .carousel-control-prev,
.rk-galeria__glowne .carousel-control-next {
  display: none;
}

.rk-galeria__lupa {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(19, 19, 16, 0.18);
}

.rk-galeria__lupa:hover {
  background: var(--rk-blue-dark, #96733f);
}

.rk-galeria__lupa svg {
  width: 20px;
  height: 20px;
}

/* --- prawa kolumna: marka, tytuł, kod --- */

.rk-marka {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.rk-marka__logo {
  flex: 0 0 auto;
  width: auto;
  max-width: 96px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

.rk-marka__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.rk-marka__nazwa {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

.rk-marka__nazwa:hover {
  color: var(--rk-blue-dark, #96733f);
  text-decoration: none;
}

.rk-marka__opis {
  font-size: 0.75rem;
  color: var(--rk-muted, #5b6875);
}

.page-product .rk-karta__tytul {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rk-ink, #1b2733);
}

.rk-karta__meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--rk-muted, #5b6875);
}

.rk-karta__kod strong {
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
}

.page-product .rk-karta__opis {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rk-muted, #5b6875);
}

.page-product .rk-karta__opis p:last-child {
  margin-bottom: 0;
}

/* --- atuty produktu: punkty ze złotym „ptaszkiem" --- */

.rk-karta__atuty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.rk-karta__atut {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-karta__atut strong {
  font-weight: 600;
}

.rk-karta__atut::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rk-blue, #b08a4e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 12px;
}

/* --- ramka zakupu: cena + dostępność --- */

.rk-kup__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.125rem 1.375rem;
  border-radius: 14px;
  background: #f9f7f4;
}

.page-product .rk-kup__cena .product__prices {
  margin: 0;
}

.page-product .rk-kup__cena .product__price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rk-ink, #1b2733);
}

.page-product .rk-kup__cena .product__regular-price {
  font-size: 0.9375rem;
  color: var(--rk-muted, #5b6875);
  text-decoration: line-through;
}

.page-product .rk-kup__cena .product__tax-label {
  font-size: 0.8125rem;
  color: var(--rk-muted, #5b6875);
}

.rk-kup__dostepnosc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.875rem;
}

.rk-kup__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
}

/* zielona kropka zamiast ikony materiałowej; kolor bierze się z klas
   text-success / text-warning / text-danger, które ustawia szablon */
.rk-kup__kropka {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.rk-kup__status.text-success {
  color: #1f9d55 !important;
}

.rk-kup__status.text-warning {
  color: #c9932b !important;
}

.rk-kup__status.text-danger {
  color: #c2473b !important;
}

.rk-kup__dostawa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rk-muted, #5b6875);
}

.rk-kup__dostawa svg {
  width: 18px;
  height: 18px;
  color: var(--rk-ink, #1b2733);
}

/* --- ilość + przycisk --- */

.rk-kup__akcje {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.rk-kup__ilosc {
  flex: 0 0 auto;
}

.rk-kup__ilosc .quantity-button__group {
  display: flex;
  align-items: stretch;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 10px;
  background: #fff;
}

.rk-kup__ilosc .quantity-button__group .btn {
  width: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rk-ink, #1b2733);
  box-shadow: none;
}

.rk-kup__ilosc .quantity-button__group .btn:hover {
  background: #f9f7f4;
}

.rk-kup__ilosc .quantity-button__group .form-control {
  width: 56px;
  border: 0;
  border-left: 1px solid var(--rk-line, #e6e1d9);
  border-right: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 0;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
}

.rk-kup__dodaj {
  flex: 1 1 auto;
}

.page-product .rk-kup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

.page-product .rk-kup__btn .rk-icon,
.page-product .rk-kup__btn svg {
  width: 20px;
  height: 20px;
}

.rk-kup__minimum {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--rk-muted, #5b6875);
}

/* --- cztery atuty sklepu pod przyciskiem --- */

.rk-produkt-atuty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rk-line, #e6e1d9);
  list-style: none;
}

.rk-produkt-atut {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--rk-muted, #5b6875);
}

/* ikona z tych samych reguł co pasek zaufania (rk-zaufanie--*::before) */
.rk-produkt-atut::before {
  content: "";
  width: 32px;
  height: 32px;
  margin-bottom: 0.375rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rk-produkt-atut__tytul {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
}

/* --- dolna część: opis w dwóch kartach (product.tpl, blok product_tabs) --- */

.rk-opis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.5rem;
  /* obie karty zawsze tej samej wysokości - krótszy opis nie zostawia
     dziury pod lewą kartą przy długiej liście cech (i odwrotnie) */
  align-items: stretch;
  margin-top: 2.5rem;
}

.rk-opis__karta {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 16px;
  background: #fff;
}

.rk-opis__karta--cechy {
  background: #f9f7f4;
}

.rk-opis__tytul,
.rk-opis__tresc h2 {
  margin: 0 0 0.875rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-opis__tresc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rk-muted, #5b6875);
}

.rk-opis__tresc p:last-child {
  margin-bottom: 0;
}

/* --- kafelki atutów (lista <ul class="rk-usp"> w opisie) --- */

.rk-opis__usp .rk-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rk-line, #e6e1d9);
  list-style: none;
}

.rk-opis__usp .rk-usp > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-left: 1px solid var(--rk-line, #e6e1d9);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  color: var(--rk-muted, #5b6875);
}

.rk-opis__usp .rk-usp > li:first-child {
  border-left: 0;
}

/* Ikona - konturowa, złota; dobierana klasą pozycji. Reguły z klasą ikony
   celują w `li.rk-usp--x`, żeby były bardziej szczegółowe niż domyślna
   gwiazdka z `> li::before` - inaczej gwiazdka wygrywała ze wszystkimi. */
.rk-opis__usp .rk-usp > li::before {
  content: "";
  width: 34px;
  height: 34px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.5 5.1 5.6.8-4 3.9 1 5.6-5.1-2.7-5.1 2.7 1-5.6-4-3.9 5.6-.8z'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--leaf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.4c-7.6-.6-13 2.2-13 8 0 2.2 1.1 4.2 2.8 5.4 4.6.5 10.2-4.2 10.2-13.4Z'/%3E%3Cpath d='M17 7.4C12.6 9.2 9 13.4 7.4 19.6'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--cup::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16M7.5 3.5c0 1.2 1 1.4 1 2.6M11 3.5c0 1.2 1 1.4 1 2.6'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--chef::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14.2V20h10v-5.8M7 14.2a3.6 3.6 0 1 1 1.2-7 4.2 4.2 0 0 1 7.6 0 3.6 3.6 0 1 1 1.2 7'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--diamond::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10l4 5.4L12 20 3 9.4z'/%3E%3Cpath d='M3 9.4h18M9.4 4 12 9.4 14.6 4M9.4 9.4 12 20l2.6-10.6'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--box::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 20.4 7v10L12 20.6 3.6 17V7z'/%3E%3Cpath d='M3.6 7 12 10.6 20.4 7M12 10.6v10'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--shield::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 5.8v5.4c0 4 2.9 7.7 7 9.6 4.1-1.9 7-5.6 7-9.6V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E");
}

.rk-opis__usp .rk-usp > li.rk-usp--sparkle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.6 4.4 2.6 6.4 7 7-4.4.6-6.4 2.6-7 7-.6-4.4-2.6-6.4-7-7 4.4-.6 6.4-2.6 7-7Z'/%3E%3Cpath d='M18.5 15.5c.3 1.6 1 2.3 2.5 2.5-1.5.2-2.2.9-2.5 2.5-.3-1.6-1-2.3-2.5-2.5 1.5-.2 2.2-.9 2.5-2.5Z'/%3E%3C/svg%3E");
}

/* --- prawa karta: lista cech --- */

.rk-opis__cechy ul,
.rk-opis__cechy-dodatkowe {
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc; /* motyw zdejmuje kropki z list w opisach */
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rk-ink, #1b2733);
}

.rk-opis__cechy li,
.rk-opis__cechy-dodatkowe li {
  margin-bottom: 0.5rem;
}

.rk-opis__cechy li::marker,
.rk-opis__cechy-dodatkowe li::marker {
  color: var(--rk-blue, #b08a4e);
}

.rk-opis__cechy + .rk-opis__cechy-dodatkowe {
  margin-top: -0.5rem;
}

.rk-opis__reszta {
  margin-top: 1.5rem;
}

@media (max-width: 991.98px) {
  .rk-opis {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-opis__usp .rk-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }

  .rk-opis__usp .rk-usp > li:nth-child(odd) {
    border-left: 0;
  }
}

/* --- dolna część: blockreassurance zdjęty, opis idzie na całą szerokość ---
   Rodzic układa `.product__bottom` w dwie kolumny (opis | reassurance);
   po ukryciu prawej lewa nadal siedziała w swojej wąskiej kolumnie,
   stąd `display: block` na kontenerze. */

.page-product .product__bottom {
  display: block;
}

.page-product .product__bottom-right {
  display: none;
}

.page-product .product__bottom-left {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

/* --- mniejsze ekrany --- */

@media (max-width: 991.98px) {
  .rk-produkt-atuty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  /* miniatury pod zdjęciem, w poziomym pasku; strzałki gora/dol znikają */
  .rk-galeria {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-miniaturki {
    order: 2;
    flex-direction: row;
  }

  .rk-miniaturki__btn {
    display: none;
  }

  .rk-miniaturki__lista {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .rk-miniaturki__przycisk {
    width: 68px;
    height: 68px;
  }

  .rk-kup__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  /* hummingbird rozciąga pole ilości na całą szerokość i spycha przycisk
     pod nie; stepper + przycisk mieszczą się obok siebie nawet na 360 px */
  .page-product .rk-kup__akcje {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .page-product .rk-kup__ilosc,
  .page-product .rk-kup__ilosc .quantity-button__group {
    flex: 0 0 auto;
    width: auto;
  }

  .page-product .rk-kup__dodaj {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page-product .rk-karta__tytul {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   STRONY CMS - "centrum pomocy" wg makiety (2026-09-06)
   Szablon: templates/cms/page.tpl. Treść z panelu używa klas: rk-cms-hero,
   rk-metody / rk-metoda, rk-bezpieczne, rk-cms-faq + rk-akordeon.
   ========================================================================== */

.rk-cms {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 1.5rem 0 3rem;
}

/* --- lewa kolumna: menu pomocy --- */

.rk-cms-menu {
  padding: 1.25rem 1rem;
  border-radius: 16px;
  background: #f9f7f4;
}

.rk-cms-menu__tytul {
  margin: 0 0 0.75rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-cms-menu__lista {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-cms-menu__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--rk-ink, #1b2733);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rk-cms-menu__link:hover {
  background: #fff;
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

.rk-cms-menu__link.is-aktywna {
  background: #fff;
  color: var(--rk-blue, #b08a4e);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #ece3d5;
}

.rk-cms-menu__link::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain;
}

.rk-cms-menu__link--user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 20.2c0-3.7 3.3-5.7 7.4-5.7s7.4 2 7.4 5.7'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 14.5h4'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--return::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4v5h5'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--doc::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 12h6M10 16h6'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--lock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.8a3.5 3.5 0 0 1 7 0v2.7'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--faq::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.6 9.4a2.4 2.4 0 1 1 3.4 2.2c-.7.4-1 .9-1 1.6M12 16.6v.1'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--leaf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.4c-7.6-.6-13 2.2-13 8 0 2.2 1.1 4.2 2.8 5.4 4.6.5 10.2-4.2 10.2-13.4Z'/%3E%3Cpath d='M17 7.4C12.6 9.2 9 13.4 7.4 19.6'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--blog::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a3 3 0 0 1 3 3v11H7a3 3 0 0 1-3-3z'/%3E%3Cpath d='M18 8h2v11a2 2 0 0 1-2 2M8 9h6M8 13h6'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--people::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.4' r='3'/%3E%3Cpath d='M3.4 19.4c0-3 2.5-4.8 5.6-4.8s5.6 1.8 5.6 4.8'/%3E%3Cpath d='M15.4 6.2a3 3 0 0 1 0 5.8M17 14.8c2.1.5 3.6 2 3.6 4.6'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--b2b::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V6.2l8-2.7v17M11 20.5h10V9.5h-10'/%3E%3Cpath d='M6.4 9.2v.1M6.4 13v.1M14.6 13v.1M14.6 16.4v.1'/%3E%3C/svg%3E");
}

.rk-cms-menu__link--contact::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H9l-5 4z'/%3E%3C/svg%3E");
}

/* --- lewa kolumna: "Masz pytania?" --- */

.rk-cms-pytania {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: #faf7f2;
}

.rk-cms-pytania__glowa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.rk-cms-pytania__ikona {
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0.625rem;
  border-radius: 12px;
  background: #fff;
  color: var(--rk-blue, #b08a4e);
}

.rk-cms-pytania__ikona svg {
  width: 100%;
  height: 100%;
}

.rk-cms-pytania__tytul {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-cms-pytania__opis {
  margin: 0;
  font-size: 0.75rem;
  color: var(--rk-muted, #5b6875);
}

.rk-cms-pytania__kontakt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.rk-cms-pytania__kontakt .rk-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--rk-blue, #b08a4e);
}

.rk-cms-pytania__kontakt:hover {
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

.rk-cms-pytania__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.rk-cms-pytania__btn:hover {
  background: var(--rk-blue-dark, #96733f);
  color: #fff;
  text-decoration: none;
}

/* --- prawa kolumna: nagłówek strony --- */

.rk-cms-hero-sekcja {
  position: relative;
  margin-bottom: 2rem;
  padding: 1.25rem 2rem 1.75rem;
  border-radius: 20px;
  background: linear-gradient(120deg, #ffffff 0%, #faf7f2 55%, #f3ebdd 100%);
  overflow: hidden;
}

.rk-cms-hero-sekcja .breadcrumb__wrapper {
  padding: 0 0 0.75rem;
}

.rk-cms-hero-sekcja__tresc {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.rk-cms-hero-sekcja__tytul {
  margin: 0 0 0.5rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--rk-ink, #1b2733);
}

.rk-cms-hero__podtytul {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
}

.rk-cms-hero-sekcja p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rk-muted, #5b6875);
}

/* Zdjęcie nagłówka: w treści siedzi jako <img class="rk-cms-hero__foto">,
   szablon wyciąga je do własnego kontenera po prawej. Tekst dostaje wtedy
   ograniczoną szerokość, a sekcja minimalną wysokość, żeby kadr miał sens. */
.rk-cms-hero-sekcja--zdjecie {
  min-height: 250px;
}

.rk-cms-hero-sekcja--zdjecie .rk-cms-hero-sekcja__tresc {
  max-width: 54%;
}

.rk-cms-hero-sekcja__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
}

.rk-cms-hero-sekcja__foto .rk-cms-hero__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%);
  mask-image: linear-gradient(to right, transparent 0, #000 25%);
}

@media (max-width: 767.98px) {
  .rk-cms-hero-sekcja__foto {
    display: none;
  }

  .rk-cms-hero-sekcja--zdjecie {
    min-height: 0;
  }

  .rk-cms-hero-sekcja--zdjecie .rk-cms-hero-sekcja__tresc {
    max-width: none;
  }
}

/* --- treść: kontener jako "przezroczysta" siatka ---
   `display: contents` sprawia, że sekcje treści i dołożony przez szablon boks
   pomocy są rodzeństwem w jednej siatce; FAQ i boks stają obok siebie. */

.rk-cms__tresc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem 1.5rem;
  align-items: start;
}

.rk-cms__tresc > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.rk-cms__tresc > h2 {
  margin: 0.5rem 0 -0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-cms__tresc > .rk-cms-faq {
  grid-column: 1;
}

.rk-cms__tresc > .rk-cms-pomoc {
  grid-column: 2;
}

/* --- karty metod płatności --- */

.rk-cms__tresc .rk-metody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-metoda {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1.25rem 1.375rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
}

.rk-metoda strong {
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-metoda__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 48px;
  margin-bottom: 0.5rem;
}

.rk-metoda__logo img {
  width: auto;
  max-width: 96px;
  height: 36px;
  object-fit: contain;
}

/* przelew tradycyjny nie ma loga - złota ikona banku */
.rk-metoda__logo--ikona::before {
  content: "";
  width: 44px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5H3z'/%3E%3Cpath d='M5 9.5v8M9.5 9.5v8M14.5 9.5v8M19 9.5v8M3 17.5h18v2.5H3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- pasek "Twoje płatności są bezpieczne" --- */

.rk-cms__tresc .rk-bezpieczne {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  background: #faf7f2;
}

.rk-bezpieczne__ikona {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 5.8v5.4c0 4 2.9 7.7 7 9.6 4.1-1.9 7-5.6 7-9.6V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rk-bezpieczne__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
}

.rk-bezpieczne__tekst strong {
  font-size: 1rem;
  color: var(--rk-ink, #1b2733);
}

.rk-bezpieczne__odznaki {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.rk-bezpieczne__odznaki img {
  height: 30px;
  width: auto;
  padding: 0.375rem 0.625rem;
  border-radius: 8px;
  background: #fff;
}

.rk-odznaka {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rk-ink, #1b2733);
}

.rk-odznaka::before {
  content: "";
  width: 16px;
  height: 16px;
  background: no-repeat center / contain;
}

.rk-odznaka--ssl::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.8a3.5 3.5 0 0 1 7 0v2.7'/%3E%3C/svg%3E");
}

.rk-odznaka--pci::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* --- akapit pod nagłówkiem sekcji (np. "Sprawdź, jak to działa:") --- */

.rk-cms__tresc > .rk-cms-lead {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--rk-muted, #5b6875);
}

.rk-cms__tresc > h2 + .rk-cms-lead {
  margin-top: 0.25rem;
}

/* --- "Jak zamawiać": pięć kroków w rzędzie --- */

.rk-cms__tresc .rk-kroki {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.rk-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 1.375rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
  counter-increment: krok;
}

.rk-krok strong {
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

/* numer kroku - złote kółko na górnej krawędzi karty */
.rk-krok::before {
  content: counter(krok);
  position: absolute;
  top: -14px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px #fff;
}

/* ikona w jasnym kółku */
.rk-krok::after {
  content: "";
  order: -1;
  width: 64px;
  height: 64px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: #f7efe3 no-repeat center / 30px;
}

.rk-krok--cart::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 4.4h2.4l2.2 10.4h9.4l2-7.2H6.6'/%3E%3Ccircle cx='9.4' cy='19' r='1.4'/%3E%3Ccircle cx='16.6' cy='19' r='1.4'/%3E%3C/svg%3E");
}

.rk-krok--list::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

.rk-krok--user::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 20.2c0-3.7 3.3-5.7 7.4-5.7s7.4 2 7.4 5.7'/%3E%3C/svg%3E");
}

.rk-krok--card::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 14.5h4'/%3E%3C/svg%3E");
}

.rk-krok--truck::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

/* strzałka w przerwie między kartami */
.rk-krok + .rk-krok strong::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  width: 1.5rem;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px;
}

.rk-cms__tresc .rk-kroki--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rk-krok--box::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 20.4 7v10L12 20.6 3.6 17V7z'/%3E%3Cpath d='M3.6 7 12 10.6 20.4 7M12 10.6v10'/%3E%3C/svg%3E");
}

/* --- "Koszty i czas dostawy": karty informacyjne pod nagłówkiem --- */

.rk-cms__tresc .rk-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-info__karta {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
}

.rk-info__karta::before {
  content: "";
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f7efe3 no-repeat center / 28px;
}

.rk-info__karta strong {
  align-self: end;
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-info__karta span {
  align-self: start;
}

.rk-info--truck::before,
.rk-koszt--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

.rk-info--coins::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='2.8'/%3E%3Cpath d='M5 6.5v4c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-4M5 10.5v4c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-4M5 14.5v3c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-3'/%3E%3C/svg%3E");
}

.rk-info--shield::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 5.8v5.4c0 4 2.9 7.7 7 9.6 4.1-1.9 7-5.6 7-9.6V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E");
}

/* --- karty przewoźników --- */

.rk-cms__tresc .rk-kurierzy {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-kurier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: center;
  color: var(--rk-muted, #5b6875);
}

.rk-kurier img {
  width: auto;
  max-width: 120px;
  height: 40px;
  object-fit: contain;
}

/* --- karty kosztów --- */

.rk-cms__tresc .rk-koszty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-koszt {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-muted, #5b6875);
}

.rk-koszt::before {
  content: "";
  grid-row: 1 / 4;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f7efe3 no-repeat center / 28px;
}

.rk-koszt strong {
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-koszt em {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

/* ikona ciężarówki powtórzona tutaj, PO regule bazowej `.rk-koszt::before`
   (jej skrót `background:` zeruje obrazek) - wspólna reguła z rk-info--truck
   stoi wyżej w pliku i przegrywała kolejnością */
.rk-koszt--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

.rk-koszt--locker::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

.rk-koszt--pin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6 6.5-11a6.5 6.5 0 0 0-13 0c0 5 6.5 11 6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}

.rk-koszt--gift::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4.5'/%3E%3Cpath d='M5 12.5V20h14v-7.5M12 8v12M12 8c-1.5-2.4-4-3.6-5.2-2.4S7.4 8 12 8Zm0 0c1.5-2.4 4-3.6 5.2-2.4S16.6 8 12 8Z'/%3E%3C/svg%3E");
}

@media (max-width: 1199.98px) {
  .rk-cms__tresc .rk-kurierzy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rk-cms__tresc .rk-koszty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .rk-cms__tresc .rk-info,
  .rk-cms__tresc .rk-koszty,
  .rk-cms__tresc .rk-kroki--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-cms__tresc .rk-kurierzy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- "Dlaczego warto zamawiać" --- */

.rk-cms__tresc .rk-dlaczego {
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 20px;
  background: #faf7f2;
}

.rk-dlaczego > h2 {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  color: var(--rk-ink, #1b2733);
}

.rk-dlaczego__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-dlaczego__pozycja {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
}

.rk-dlaczego__pozycja img {
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  padding: 0.875rem;
  border-radius: 50%;
  background: #f7efe3;
  object-fit: contain;
}

.rk-dlaczego__pozycja strong {
  align-self: end;
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-dlaczego__pozycja span {
  align-self: start;
}

@media (max-width: 1199.98px) {
  .rk-cms__tresc .rk-kroki {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .rk-krok:nth-child(3n + 1) strong::before {
    display: none;
  }

  .rk-dlaczego__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .rk-cms__tresc .rk-kroki {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-krok strong::before {
    display: none;
  }

  .rk-dlaczego__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- "Kim jesteśmy?": motto w hero, tekst + zdjęcie, liczby, wartości, branże, pasek CTA --- */

.rk-cms-hero-sekcja .rk-cms-hero__motto {
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 600;
  color: var(--rk-blue, #b08a4e);
}

.rk-cms__tresc .rk-poznaj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.5rem;
  align-items: stretch;
}

.rk-poznaj__tekst h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-poznaj__tekst p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rk-muted, #5b6875);
}

.rk-poznaj__foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  border-radius: 16px;
}

/* liczby / atuty firmy */
.rk-cms__tresc .rk-liczby {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-liczba {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.875rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 14px;
  background: #faf7f2;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rk-muted, #5b6875);
}

.rk-liczba::before {
  content: "";
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff no-repeat center / 26px;
}

.rk-liczba strong {
  align-self: end;
  font-size: 1rem;
  color: var(--rk-ink, #1b2733);
}

.rk-liczba span {
  align-self: start;
}

.rk-liczba--box::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 20.4 7v10L12 20.6 3.6 17V7z'/%3E%3Cpath d='M3.6 7 12 10.6 20.4 7M12 10.6v10'/%3E%3C/svg%3E");
}

.rk-liczba--grid::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
}

.rk-liczba--people::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.4' r='3'/%3E%3Cpath d='M3.4 19.4c0-3 2.5-4.8 5.6-4.8s5.6 1.8 5.6 4.8'/%3E%3Cpath d='M15.4 6.2a3 3 0 0 1 0 5.8M17 14.8c2.1.5 3.6 2 3.6 4.6'/%3E%3C/svg%3E");
}

.rk-liczba--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

/* wartości */
.rk-cms__tresc .rk-wartosci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-wartosc {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 14px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted, #5b6875);
}

.rk-wartosc::before {
  content: "";
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f7efe3 no-repeat center / 28px;
}

.rk-wartosc strong {
  align-self: end;
  font-size: 0.9375rem;
  color: var(--rk-ink, #1b2733);
}

.rk-wartosc span {
  align-self: start;
}

.rk-wartosc--diamond::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10l4 5.4L12 20 3 9.4z'/%3E%3Cpath d='M3 9.4h18M9.4 4 12 9.4 14.6 4M9.4 9.4 12 20l2.6-10.6'/%3E%3C/svg%3E");
}

.rk-wartosc--handshake::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 6 6.5h4l3 2.5-2.6 2.6a1.5 1.5 0 0 0 2.1 2.1L15 11.3l3.5 3.2M21.5 9.5 18 6.5h-4M6 14.5l3 3M8.5 17l2.5 2.3M2.5 9.5v6h2l4 4a1.6 1.6 0 0 0 2.4-.2l.9-1M21.5 9.5v6h-2l-3 3'/%3E%3C/svg%3E");
}

.rk-wartosc--leaf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.4c-7.6-.6-13 2.2-13 8 0 2.2 1.1 4.2 2.8 5.4 4.6.5 10.2-4.2 10.2-13.4Z'/%3E%3Cpath d='M17 7.4C12.6 9.2 9 13.4 7.4 19.6'/%3E%3C/svg%3E");
}

/* kafle branż ze zdjęciem */
.rk-cms__tresc .rk-branze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kafel: zdjęcie absolutnie w tle, nad nim ciemny gradient (z-index 1),
   a tytuł i opis jako zwykły przepływ przyklejony do dołu (z-index 2) -
   dzięki temu dwuwierszowy opis nie nachodzi na tytuł. */
.rk-branza {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  aspect-ratio: 16 / 9;
  padding: 1rem 3.75rem 1rem 1.125rem;
  overflow: hidden;
  border-radius: 14px;
  background: #1b2733;
  color: #fff;
  text-decoration: none;
}

.rk-branza img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform 0.25s ease-in-out;
}

.rk-branza:hover img {
  transform: scale(1.04);
}

.rk-branza::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(19, 19, 16, 0.88) 0%, rgba(19, 19, 16, 0.45) 45%, rgba(19, 19, 16, 0.05) 100%);
}

.rk-branza strong,
.rk-branza span {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.rk-branza strong {
  font-size: 1rem;
}

.rk-branza span {
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}

/* strzałka w złotym kółku */
.rk-branza::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rk-blue, #b08a4e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px;
}

.rk-branza:hover {
  color: #fff;
  text-decoration: none;
}

/* pasek CTA na dole */
.rk-cms__tresc .rk-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  background: #faf7f2;
}

.rk-cta__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  font-size: 0.8125rem;
  color: var(--rk-muted, #5b6875);
}

.rk-cta__tekst strong {
  font-size: 1rem;
  color: var(--rk-ink, #1b2733);
}

.rk-cta__kontakt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rk-ink, #1b2733);
  text-decoration: none;
  white-space: nowrap;
}

.rk-cta__kontakt::before {
  content: "";
  width: 18px;
  height: 18px;
  background: no-repeat center / contain;
}

.rk-cta__kontakt--tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.rk-cta__kontakt--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7 8.4 6 8.4-6'/%3E%3C/svg%3E");
}

.rk-cta__kontakt:hover {
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
}

.rk-cta__btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  background: var(--rk-blue, #b08a4e);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.rk-cta__btn:hover {
  background: var(--rk-blue-dark, #96733f);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .rk-cms__tresc .rk-liczby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .rk-cms__tresc .rk-poznaj {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-poznaj__foto {
    height: 220px;
  }

  .rk-cms__tresc .rk-wartosci,
  .rk-cms__tresc .rk-branze {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-cms__tresc .rk-cta {
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .rk-cms__tresc .rk-liczby {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- FAQ (akordeon bez <details>) --- */

.rk-cms__tresc .rk-cms-faq > h2 {
  margin: 0.5rem 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-akordeon {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rk-akordeon__pozycja {
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.rk-akordeon__pozycja > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9375rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rk-ink, #1b2733);
  cursor: pointer;
  user-select: none;
}

.rk-akordeon__pozycja > h3::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.15s ease-in-out;
}

.rk-akordeon__pozycja.is-otwarta > h3::after {
  transform: rotate(180deg);
}

.rk-akordeon__pozycja > div {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rk-muted, #5b6875);
}

.rk-akordeon__pozycja.is-otwarta > div {
  display: block;
}

.rk-akordeon__pozycja > div p:last-child {
  margin-bottom: 0;
}

/* --- strona FAQ: grupy pytań w kartach z ikoną --- */

.rk-cms__tresc .rk-faq-grupa {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--rk-line, #e6e1d9);
  border-radius: 16px;
  background: #fff;
}

.rk-faq-grupa::before {
  content: "";
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f7efe3 no-repeat center / 26px;
}

.rk-cms__tresc .rk-faq-grupa__tytul {
  margin: 0;
  align-self: end;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rk-ink, #1b2733);
}

.rk-faq-grupa__opis {
  margin: 0.125rem 0 1rem;
  align-self: start;
  font-size: 0.8125rem;
  color: var(--rk-muted, #5b6875);
}

.rk-faq-grupa .rk-akordeon {
  grid-column: 1 / -1;
}

.rk-faq-grupa--cart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 4.4h2.4l2.2 10.4h9.4l2-7.2H6.6'/%3E%3Ccircle cx='9.4' cy='19' r='1.4'/%3E%3Ccircle cx='16.6' cy='19' r='1.4'/%3E%3C/svg%3E");
}

.rk-faq-grupa--card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 14.5h4'/%3E%3C/svg%3E");
}

.rk-faq-grupa--truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.6h10.2v9.8H3.4z'/%3E%3Cpath d='M13.6 9.8h3.6l3 3v3.6h-6.6z'/%3E%3Ccircle cx='7.4' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}

.rk-faq-grupa--return::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08a4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4v5h5'/%3E%3C/svg%3E");
}

/* boks pomocy obok FAQ - ten sam wygląd co w kolumnie listingu, bez sticky */
.rk-cms-pomoc .rk-pomoc {
  position: static;
}

/* --- mniejsze ekrany --- */

@media (max-width: 991.98px) {
  .rk-cms {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-cms__bok {
    order: 2;
  }

  .rk-cms__tresc {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-cms__tresc > .rk-cms-faq,
  .rk-cms__tresc > .rk-cms-pomoc {
    grid-column: 1;
  }

  .rk-cms__tresc .rk-metody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rk-cms__tresc .rk-bezpieczne {
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .rk-cms__tresc .rk-metody {
    grid-template-columns: minmax(0, 1fr);
  }

  .rk-cms-hero-sekcja {
    padding: 1rem 1.25rem 1.5rem;
  }

  .rk-cms-hero-sekcja__tytul {
    font-size: 1.75rem;
  }
}

/* Obie sekcje po sześć pozycji: CATEGORYPRODUCTS_DISPLAY_PRODUCTS = 6
   i PRODUCTS_VIEWED_NBR = 6 (skrypty/historia-przegladania.php). */
@media (min-width: 1200px) {
  .ps-categoryproducts .products,
  .ps-viewedproduct .products {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Nagłówek sekcji z odnośnikiem „Zobacz wszystkie" po prawej - ten sam układ
   co `.rk-carousel__head` na stronie głównej, ale jako klasa ogólna, żeby
   dało się go użyć w nadpisanych szablonach modułów (ps_categoryproducts). */
.rk-sekcja__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rk-sekcja__head .rk-sekcja__title {
  margin: 0;
}

.rk-sekcja__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rk-blue, #b08a4e);
  text-decoration: none;
  white-space: nowrap;
}

.rk-sekcja__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease-in-out;
}

.rk-sekcja__more:hover,
.rk-sekcja__more:focus {
  color: var(--rk-blue-dark, #96733f);
  text-decoration: none;
}

.rk-sekcja__more:hover svg {
  transform: translateX(3px);
}

/* „(Zniżka 15%)" przy cenie - selektor musi być tak samo szczegółowy jak
   w motywie (`.page-product .product__discount-percentage`) */
.page-product .product__discount-percentage,
.page-product .product__discount-amount {
  color: var(--rk-blue, #b08a4e);
}

/* zakładki opisu i szczegółów - otwarta miała niebieski napis i podświetlenie */
.accordion-button:not(.collapsed) {
  --bs-accordion-active-color: var(--rk-ink, #1b2733);
  --bs-accordion-active-bg: #faf7f2;
  color: var(--rk-ink, #1b2733);
  background-color: #faf7f2;
  box-shadow: none;
}

.accordion-button:focus {
  border-color: var(--rk-blue, #b08a4e);
  box-shadow: 0 0 0 0.2rem rgba(176, 138, 78, 0.16);
}


/* === MAKIETA HOSSA: One Page Checkout (ets_onepagecheckout) - przeniesione z mamynarzedzia.pl, paleta zlota === */
.mn-checkout-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto 28px; padding: 0 15px; }
.mn-checkout-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.mn-step-circle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; border: 2px solid #d9d9d9; color: #9a9a9a; font-weight: 800; font-size: 14px; }
.mn-step-label { font-size: 13px; font-weight: 700; color: #9a9a9a; white-space: nowrap; }
.mn-checkout-step.is-active .mn-step-circle { background: #b08a4e; border-color: #b08a4e; color: #ffffff; }
.mn-checkout-step.is-active .mn-step-label { color: #1f1f1f; }
.mn-checkout-line { flex: 1 1 40px; height: 2px; background: #e2e2e2; margin: 15px 8px 0; min-width: 24px; }

#ets_onepagecheckout .block-onepagecheckout { background: #ffffff; border: 1px solid #eeeeee; border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.035); }
#ets_onepagecheckout .block-onepagecheckout .title-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 18px !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 17px; font-weight: 800; color: #1f1f1f; }
#ets_onepagecheckout .block-onepagecheckout .title-heading .ets_icon_svg { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: #f4f4f4; border-radius: 10px; }
#ets_onepagecheckout .block-onepagecheckout .title-heading .ets_icon_svg svg { width: 18px; height: 18px; fill: #1f1f1f; }
#ets_onepagecheckout .block-onepagecheckout .title-heading .mn-title-text { display: flex; flex-direction: column; gap: 2px; }
#ets_onepagecheckout .block-onepagecheckout .title-heading .mn-title-main { font-size: 17px; font-weight: 800; color: #1f1f1f; }
#ets_onepagecheckout .block-onepagecheckout .title-heading .mn-title-sub { font-size: 12.5px; font-weight: 500; color: #9a9a9a; }
#ets_onepagecheckout .block-top { background: transparent; }
#ets_onepagecheckout .block-top .block-onepagecheckout { margin-bottom: 20px; }

/* Wybor typu konta - karty */
#ets_onepagecheckout .type-checkout-options { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 18px; padding: 0; }
#ets_onepagecheckout .type-checkout-options li { flex: 1 1 200px; margin: 0; }
#ets_onepagecheckout .type-checkout-options label { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 14px 16px; border: 1.5px solid #e2e2e2; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; color: #444444; background: #ffffff; transition: border-color .15s, background .15s; }
#ets_onepagecheckout .type-checkout-options li:has(input:checked) label { border-color: #b08a4e; background: #f8f3ea; color: #1f1f1f; }
#ets_onepagecheckout .type-checkout-options input[type="radio"] { width: 18px; height: 18px; accent-color: #b08a4e; margin: 0; flex: none; }

/* Pola formularzy */
#ets_onepagecheckout .block-content, #ets_onepagecheckout #customer-login, #ets_onepagecheckout .address-selector { display: block; }
#ets_onepagecheckout .form-group.row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 16px; }
#ets_onepagecheckout .block-content > div.form-group.row,
#ets_onepagecheckout #customer-login > div.form-group.row,
#ets_onepagecheckout .address-selector .form-group.row { display: grid; grid-template-columns: 1fr; }
#ets_onepagecheckout .form-control-label { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 0 6px !important; text-align: left !important; font-size: 13.5px; font-weight: 700; color: #1f1f1f; }
#ets_onepagecheckout .form-group.row > div[class*="col-md-8"],
#ets_onepagecheckout .form-group.row > div[class*="col-md-12"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }
#ets_onepagecheckout .form-control,
#ets_onepagecheckout input[type="text"],
#ets_onepagecheckout input[type="email"],
#ets_onepagecheckout input[type="password"],
#ets_onepagecheckout input[type="tel"],
#ets_onepagecheckout select,
#ets_onepagecheckout textarea { width: 100%; padding: 11px 14px; border: 1px solid #e2e2e2; border-radius: 8px; font-size: 14px; color: #1f1f1f; background: #fafafa; }
#ets_onepagecheckout .form-control:focus,
#ets_onepagecheckout input:focus,
#ets_onepagecheckout select:focus,
#ets_onepagecheckout textarea:focus { outline: none; border-color: #b08a4e; background: #ffffff; }

/* Ukladanie pol logowania w siatce 2 kolumn na desktopie */
@media (min-width: 768px) {
  #ets_onepagecheckout #customer-login { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  #ets_onepagecheckout #customer-login > .form-group.row { grid-column: span 1; }
  #ets_onepagecheckout #customer-login .form-group.row.login,
  #ets_onepagecheckout .type-checkout-option.opc_hasaccount { grid-column: 1 / -1; }
}
/* Ukladanie pol adresu w siatce 3 kolumn, wszystkie pola tej samej szerokosci */
@media (min-width: 768px) {
  #ets_onepagecheckout .address-selector .js-address-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }
  #ets_onepagecheckout .address-selector .form-group.row { grid-column: span 1; }
}

/* Checkboxy niestandardowe */
#ets_onepagecheckout .ets_checkinput { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #444444; cursor: pointer; }
#ets_onepagecheckout .ets_checkbox { display: none; }

/* Dostawa i platnosc - karty wyboru */
#ets_onepagecheckout .delivery-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
#ets_onepagecheckout .delivery-option { margin: 0 !important; }
#ets_onepagecheckout .delivery-option-2 { display: block; width: 100%; height: 100%; margin: 0; padding: 14px 16px; border: 1.5px solid #e2e2e2; border-radius: 10px; cursor: pointer; background: #ffffff; transition: border-color .15s, background .15s; }
#ets_onepagecheckout .delivery-option:has(input:checked) .delivery-option-2 { border-color: #b08a4e; background: #f8f3ea; }
#ets_onepagecheckout .delivery-option-2 .row { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
#ets_onepagecheckout .delivery-option-2 .left_content { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; }
#ets_onepagecheckout .delivery-option-2 .right_content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0 0 0 28px; margin-top: 6px; }
#ets_onepagecheckout .delivery-option-2 .right_content .col-xs-12 { padding: 0; width: 100%; }
#ets_onepagecheckout .delivery-option-2 .right_content .col-xs-12:has(.carrier-delay) { order: 1; }
#ets_onepagecheckout .delivery-option-2 .right_content .col-xs-12:has(.carrier-price) { order: 2; }
#ets_onepagecheckout .custom-radio input[type="radio"] { width: 18px; height: 18px; accent-color: #b08a4e; margin: 0; flex: none; }
#ets_onepagecheckout .custom-radio span { display: none; }
#ets_onepagecheckout .carrier-name-img { min-width: 0; }
#ets_onepagecheckout .carrier-name { font-size: 14px; font-weight: 700; color: #1f1f1f; display: flex; align-items: center; gap: 8px; line-height: 1.3; }
#ets_onepagecheckout .carrier-price { font-size: 14px; font-weight: 700; color: #1f1f1f; }
#ets_onepagecheckout .carrier-delay { font-size: 12.5px; color: #888888; }

@media (max-width: 767px) {
  #ets_onepagecheckout .delivery-options { grid-template-columns: 1fr; }
}

#ets_onepagecheckout .ets_payment_method { margin: 0 0 10px; }
#ets_onepagecheckout .payment-option { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid #e2e2e2; border-radius: 10px; cursor: pointer; background: #ffffff; transition: border-color .15s, background .15s; }
#ets_onepagecheckout .ets_payment_method:has(input:checked) .payment-option { border-color: #b08a4e; background: #f8f3ea; }
#ets_onepagecheckout .payment-option label { margin: 0; font-size: 14px; font-weight: 700; color: #1f1f1f; cursor: pointer; }
#ets_onepagecheckout .payment-option label span { display: flex; align-items: center; gap: 8px; }
#ets_onepagecheckout .js-additional-information, #ets_onepagecheckout .js-payment-option-form { margin-top: 10px; }

/* Warunki i przycisk zamowienia */
#ets_onepagecheckout #conditions-to-approve ul { list-style: none; margin: 4px 0 18px; padding: 0; }
#ets_onepagecheckout #conditions-to-approve li { display: flex; align-items: flex-start; gap: 8px; }
#ets_onepagecheckout #conditions-to-approve .condition-label { font-size: 13px; color: #555555; }
.mn-checkout-form .checkout.card-block,
#form_ets_onepagecheckout .checkout.card-block { margin-top: 4px; }
#form_ets_onepagecheckout button[name="submitCompleteMyOrder"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 480px; padding: 16px 28px; background: #b08a4e; color: #ffffff; border: 0; border-radius: 999px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
#form_ets_onepagecheckout button[name="submitCompleteMyOrder"]:hover { background: #96733f; }
#form_ets_onepagecheckout button[name="submitCompleteMyOrder"] .la-arrow-right { margin-left: 2px; }

/* Sidebar - koszyk */
#ets_onepagecheckout .onepagecheckout-left.col-lg-4 .block-onepagecheckout { position: sticky; top: 16px; }
#ets_onepagecheckout .block-shopping-cart .cart-items { list-style: none; margin: 0; padding: 0; }
#ets_onepagecheckout .block-shopping-cart .cart-item { padding: 14px 0; border-bottom: 1px solid #eeeeee; }
#ets_onepagecheckout .block-shopping-cart .cart-item:first-child { padding-top: 0; }
#ets_onepagecheckout .block-shopping-cart .cart-item:last-child { border-bottom: 0; }
#ets_onepagecheckout .product-line-grid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#ets_onepagecheckout .product-line-grid-left { width: 60px; flex: none; padding: 0; }
#ets_onepagecheckout .product-line-grid-left .product-image { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 1px solid #eeeeee; border-radius: 10px; overflow: hidden; }
#ets_onepagecheckout .product-line-grid-left img { max-width: 100%; max-height: 100%; object-fit: contain; }
#ets_onepagecheckout .product-line-grid-body { flex: 1 1 auto; width: auto; padding: 0; min-width: 140px; }
#ets_onepagecheckout .product_info_name { font-size: 13.5px !important; font-weight: 700 !important; color: #1f1f1f !important; line-height: 1.35; margin: 0 0 4px; }
#ets_onepagecheckout .product-line-info.attribute { font-size: 12px; color: #888888; }
#ets_onepagecheckout .product-line-info.attribute .label { font-weight: 600; }
#ets_onepagecheckout .product-line-grid-right { width: 100%; flex: none; padding: 4px 0 0; }
#ets_onepagecheckout .product-line-grid-right .row { align-items: center; margin: 0; }
#ets_onepagecheckout .product-line-grid-right .row > div { padding-left: 0; padding-right: 8px; }
#ets_onepagecheckout .qty { width: auto !important; flex: none; padding: 0; }
#ets_onepagecheckout .qty .input-group.bootstrap-touchspin { display: inline-flex; align-items: center; width: auto; float: none; }
#ets_onepagecheckout .qty .input-group-btn { display: inline-flex; width: auto; }
#ets_onepagecheckout .qty .btn-touchspin { padding: 6px 10px; }
#ets_onepagecheckout .form_total_price .product-price { font-size: 14px; font-weight: 800; color: #b08a4e; }
#ets_onepagecheckout .ets_remove_cart .ets_icon_svg svg { width: 16px; height: 16px; fill: #aaaaaa; }
#ets_onepagecheckout .ets_remove_cart .ets_icon_svg:hover svg { fill: #e02b2b; }

/* Kod rabatowy */
#ets_onepagecheckout .cart-voucher .promo-code form { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
#ets_onepagecheckout .cart-voucher .promo-code form .ets_icon_svg { display: none; }
#ets_onepagecheckout .cart-voucher .promo-input { flex: 1 1 auto; padding: 10px 14px; border: 1px solid #e2e2e2; border-radius: 8px; font-size: 13.5px; background: #fafafa; }
#ets_onepagecheckout .cart-voucher .promo-code .btn.btn-primary { flex: none; padding: 10px 18px; background: #f2f2f2; color: #1f1f1f; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
#ets_onepagecheckout .cart-voucher .promo-code .btn.btn-primary:hover { background: #e6e6e6; }
#ets_onepagecheckout .promo-name.card-block { list-style: none; margin: 0 0 8px; padding: 0; }

/* Podsumowanie kwot */
#ets_onepagecheckout .cart-detailed-totals { margin-top: 6px; }
#ets_onepagecheckout .cart-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; color: #444444; }
#ets_onepagecheckout .cart-summary-line .value { color: #1f1f1f; font-weight: 600; }
#ets_onepagecheckout .cart-summary-line.cart-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid #eeeeee; }
#ets_onepagecheckout .cart-summary-line.cart-total .label { font-size: 15px; font-weight: 800; color: #1f1f1f; }
#ets_onepagecheckout .cart-summary-line.cart-total .value { font-size: 21px !important; font-weight: 800 !important; color: #b08a4e !important; }

/* Uwagi do zamowienia */
#ets_onepagecheckout .block-comment textarea { min-height: 90px; resize: vertical; }
#ets_onepagecheckout #label_delivery_message { display: block; margin-bottom: 8px; font-size: 13.5px; color: #444444; font-weight: 600; }

/* Rekomendacje / zaufanie klientow */
#ets_onepagecheckout .block-displayReassurance { background: #ffffff; border: 1px solid #eeeeee; border-radius: 14px; padding: 20px 22px; }
#ets_onepagecheckout .block-displayReassurance ul { list-style: none; margin: 0; padding: 0; }
#ets_onepagecheckout .block-displayReassurance li { padding: 6px 0; font-size: 13.5px; color: #444444; }

@media (max-width: 991px) {
  .mn-checkout-steps { flex-wrap: wrap; }
  .mn-step-label { font-size: 11.5px; }
  #ets_onepagecheckout .onepagecheckout-left.col-lg-4 .block-onepagecheckout { position: static; }
}
@media (max-width: 575px) {
  .mn-checkout-line { min-width: 14px; flex: 1 1 14px; }
  #ets_onepagecheckout .block-onepagecheckout { padding: 18px 16px; }
}

/* Rozwijane listy wyboru adresu */
#ets_onepagecheckout .ets_opc_select {
  position: relative;
}
#ets_onepagecheckout .ets_opc_select select#use_shipping_address,
#ets_onepagecheckout .ets_opc_select select#use_invoice_address {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #1f1f1f;
  cursor: pointer;
  transition: border-color .15s ease;
}
#ets_onepagecheckout .ets_opc_select select#use_shipping_address:hover,
#ets_onepagecheckout .ets_opc_select select#use_invoice_address:hover {
  border-color: #b08a4e;
}
#ets_onepagecheckout .ets_opc_select select#use_shipping_address:focus,
#ets_onepagecheckout .ets_opc_select select#use_invoice_address:focus {
  border-color: #b08a4e;
  background: #fff;
  outline: none;
}
#ets_onepagecheckout .ets_opc_select_arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  pointer-events: none;
  color: #b08a4e;
}
#ets_onepagecheckout .ets_opc_select_arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* MAKIETA HOSSA: stepper ilosci w koszyku OPC (custom.js opakowuje input w .rk-qty) */
#ets_onepagecheckout .rk-qty { display: inline-flex; align-items: center; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; background: #ffffff; }
#ets_onepagecheckout .rk-qty__btn { width: 30px; height: 32px; border: 0; background: #f4f4f4; color: #1f1f1f; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; }
#ets_onepagecheckout .rk-qty__btn:hover { background: #b08a4e; color: #ffffff; }
#ets_onepagecheckout .rk-qty input[name="product-quantity-spin"] { width: 44px; height: 32px; padding: 0; border: 0; border-radius: 0; background: #ffffff; text-align: center; font-size: 14px; font-weight: 700; -moz-appearance: textfield; }
#ets_onepagecheckout .rk-qty input::-webkit-outer-spin-button, #ets_onepagecheckout .rk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#ets_onepagecheckout .product-line-grid-right .row { display: flex; align-items: center; justify-content: space-between; }
#ets_onepagecheckout .product-line-grid-right .form_info_price_mobile { flex: 1 1 auto; }
#ets_onepagecheckout .product-line-grid-right .form_info_price_mobile .row { justify-content: space-between; }
#ets_onepagecheckout .form_total_price { text-align: right; }

/* kosz w linii koszyka OPC nie nachodzi na cene */
#ets_onepagecheckout .product-line-grid { position: relative; }
#ets_onepagecheckout .product-line-grid-right { width: 100% !important; float: none !important; padding-right: 44px !important; }
#ets_onepagecheckout .ets_remove_cart { position: absolute; right: 0; bottom: 4px; width: 32px; padding: 0; text-align: right; }
#ets_onepagecheckout .form_total_price { padding-right: 40px !important; }
#ets_onepagecheckout .ets_remove_cart { bottom: 10px; }

/* hover kart wyboru typu konta w OPC: modul daje ciemne tlo z bialym tekstem, u nas jasne zloto */
#ets_onepagecheckout .type-checkout-options label:hover { background: #f8f3ea; border-color: #b08a4e; color: #1f1f1f; }
#ets_onepagecheckout .type-checkout-options label:hover span { color: #1f1f1f !important; } /* modul ma tu !important (bialy tekst) */
#ets_onepagecheckout .delivery-option-2:hover, #ets_onepagecheckout .payment-option:hover { border-color: #b08a4e; }

/* pola logowania/rejestracji w OPC obok siebie (u mn wiersze .login mialy pelna szerokosc) */
@media (min-width: 768px) {
  #ets_onepagecheckout #customer-login > .form-group.row.login { grid-column: span 1; }
  #ets_onepagecheckout #customer-login > .opc_forgot_submit,
  #ets_onepagecheckout #customer-login > .opc_hasaccount,
  #ets_onepagecheckout #customer-login > .field-password-policy { grid-column: span 1; }
  #ets_onepagecheckout #customer-login > .clearfix,
  #ets_onepagecheckout #customer-login > .form-group.row:has(input[type=checkbox]) { grid-column: 1 / -1; }
}

/* Dokumenty prawne (regulamin, polityka prywatnosci): numeracja ustepow i kotwice pod przyklejonym naglowkiem */
.rk-dokument ol { list-style: decimal; padding-left: 1.6em; margin-bottom: 1rem; }
.rk-dokument ul { list-style: disc; padding-left: 1.4em; margin: .3rem 0 .5rem; }
.rk-dokument li { margin-bottom: .35rem; }
.rk-dokument h2 { margin-top: 2rem; scroll-margin-top: 220px; }
.rk-dokument table { min-width: 560px; font-size: .95em; }
.rk-dokument td, .rk-dokument th { vertical-align: top; }
@media (max-width: 767px) { .rk-dokument h2 { scroll-margin-top: 170px; } }
/* Mega menu kompaktowe: rozwinięty panel nie może zasłaniać większości ekranu */
.rk-mega.rk-mega--kol1 .rk-mega__col--kategorie { column-count: 3; column-gap: 2.5rem; }
.rk-mega .rk-mega__item { padding-top: 5px; padding-bottom: 5px; }
.rk-mega.rk-mega--grupy .rk-mega__item { padding: 3px 0.5rem; }
.rk-mega .rk-mega__item-icon { width: 24px; height: 24px; flex-basis: 24px; }
.rk-mega .rk-mega__item-icon svg { width: 22px; height: 22px; }
.rk-mega .rk-mega__item-name { font-size: 14px; }
.rk-mega.rk-mega--lista { padding-top: 20px; padding-bottom: 16px; }
.rk-mega.rk-mega--grupy { padding-top: 1.25rem; }
.rk-mega .rk-mega__kol-head { margin-bottom: 0.625rem; gap: 0.625rem; }
.rk-mega .rk-mega__kol-ikona { width: 42px; height: 42px; padding: 0.6rem; }
.rk-mega .rk-mega__atuty { margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
.rk-mega .rk-mega__atut-ikona { width: 28px; height: 28px; }
.submenu--mega { max-height: calc(100vh - 230px); overflow-y: auto; }
@media (max-width: 1399.98px) {
  /* moduł wymusza tu 4-kolumnową siatkę także dla list bez kolumn redakcyjnych — lista dostawała 1/4 szerokości */
  .rk-mega.rk-mega--kol1 .rk-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .rk-mega.rk-mega--grupy .rk-mega__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; }
  .rk-mega.rk-mega--grupy .rk-mega__kol--grupa { padding: 0 0.75rem; }
  .rk-mega.rk-mega--grupy .rk-mega__kol--grupa:nth-child(3n) { border-right: 1px solid var(--rk-line, #ececec); }
  .rk-mega.rk-mega--grupy .rk-mega__kol--grupa:last-child { border-right: 0; }
  .rk-mega .rk-mega__kol-sub, .rk-mega .rk-mega__atut-sub { display: none; }
  .rk-mega .rk-mega__atuty { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 900px) {
  .rk-mega .rk-mega__atuty { display: none; }
}

/* Galeria z jednym zdjeciem (albo bez zdjec): bez kolumny miniatur, zdjecie na cala szerokosc */
.rk-galeria.rk-galeria--jedno { grid-template-columns: minmax(0, 1fr); }

/* Cena netto pod cena brutto na karcie produktu */
.rk-kup__cena .rk-cena-netto { display: block; margin-top: 0.25rem; font-size: 0.9375rem; color: var(--rk-muted, #5b6875); }
.rk-kup__cena .rk-cena-netto strong { font-weight: 600; color: var(--rk-ink, #1b2733); }

/* Widok listy: dwie pozycje w rzedzie + krotki opis (w siatce ukryty) */
.rk-produkt__opis { display: none; }
@media (min-width: 768px) {
  #js-product-list.rk-lista .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #js-product-list.rk-lista .rk-produkt__inner { align-items: stretch; }
  #js-product-list.rk-lista .rk-produkt__top { flex: 0 0 150px; }
  #js-product-list.rk-lista .rk-produkt__bottom { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  #js-product-list.rk-lista .rk-produkt__stopka { margin-top: auto; }
  #js-product-list.rk-lista .rk-produkt__opis {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--rk-muted, #5b6875);
  }
}
/* Widok listy: flagi (Nowosc, 24 godziny) nad nazwa produktu zamiast na malym zdjeciu */
@media (min-width: 768px) {
  #js-product-list.rk-lista .rk-produkt__inner { position: relative; }
  #js-product-list.rk-lista .rk-produkt__top { position: static; }
  #js-product-list.rk-lista .rk-produkt__top .product-flags {
    top: 14px; left: calc(14px + 150px + 1.25rem); right: 14px; width: auto;
    flex-direction: row; flex-wrap: wrap; gap: 0.375rem;
  }
  #js-product-list.rk-lista .rk-produkt__top .product-flags .badge { font-size: 12px; padding: 2px 8px; margin: 0; }
  #js-product-list.rk-lista .rk-produkt__inner:has(.product-flags .badge) .rk-produkt__bottom { padding-top: 40px; }
}
/* Parametry na kafelku jako plakietki - przy kilku cechach (pojemnosc, sztuk, material...) wartosci sie nie zlewaja */
.rk-produkt__parametry { gap: 0.375rem; }
.rk-produkt__parametr {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f5f1ea;
  line-height: 1.5;
}
/* Karta produktu: zdjecie nie wyzsze niz blok zakupu (kwadrat na cala kolumne zostawial pusta przestrzen pod cena);
   biale tlo ramki, bo zdjecia produktow maja biale tlo */
.rk-galeria__glowne .carousel-item img,
.rk-galeria .product__no-image img { max-height: 560px; width: 100%; object-fit: contain; }
.rk-galeria .rk-galeria__glowne { background: #fff; border: 1px solid #efece7; }
/* Stopka: kafelki z napisem (przelew tradycyjny, InPost kurier / paczkomaty) w stylu bialych plytek z logotypami */
.rk-fpasek__loga .rk-fpasek__kafel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 38px; padding: 0 0.875rem; border-radius: 8px;
  background: #fff; color: #1b2733; font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.rk-fpasek__loga .rk-fpasek__kafel img { height: 26px; padding: 0; border-radius: 0; background: none; }
.rk-fpasek__loga .rk-fpasek__kafel svg { width: 22px; height: 22px; color: var(--rk-blue, #b08a4e); flex: 0 0 auto; }
/* ==========================================================================
   STRONA KONTAKTU (2026-10-13) - templates/contact.tpl
   + modules/contactform/views/templates/widget/contactform.tpl
   ========================================================================== */

.rk-kontakt {
  --rk-k-krem: #f8f2e9;
  --rk-k-zloto: var(--rk-blue);
  padding: 0.5rem 0 0;
}

.rk-kontakt__naglowek {
  margin-bottom: 1.75rem;
}

.rk-kontakt__tytul {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-kontakt__podtytul {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--rk-ink);
}

.rk-kontakt__siatka {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .rk-kontakt__siatka {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rk-kontakt__boczna {
  display: grid;
  gap: 1rem;
}

/* --- karty po lewej --- */

.rk-kkarta {
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 12px;
  background: var(--rk-k-krem);
}

.rk-kkarta__tytul {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-kkarta__opis {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rk-ink);
}

.rk-kdane {
  display: grid;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-kkarta__tytul + .rk-kdane {
  margin-top: 1rem;
}

.rk-kdane__poz {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rk-kdane__ikona {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rk-k-zloto);
  color: #fff;
}

.rk-kdane__ikona svg {
  width: 20px;
  height: 20px;
}

.rk-kdane__tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rk-kdane__glowny {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--rk-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.rk-kdane__glowny:hover {
  color: var(--rk-blue-dark);
}

.rk-kdane__drugi {
  font-size: 0.875rem;
  color: var(--rk-muted);
}

.rk-kdane__tekst--adres {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rk-ink);
}

.rk-ktrasa {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--rk-k-zloto);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rk-k-zloto);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.rk-ktrasa svg {
  width: 20px;
  height: 20px;
}

.rk-ktrasa .rk-ktrasa__strzalka {
  width: 16px;
  height: 16px;
}

.rk-ktrasa:hover {
  background: var(--rk-k-zloto);
  color: #fff;
}

/* --- formularz w karcie --- */

.rk-kform {
  padding: 1.75rem 2rem 2rem;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 575.98px) {
  .rk-kform {
    padding: 1.25rem 1rem 1.5rem;
  }
}

.rk-kform__naglowek {
  margin-bottom: 1.25rem;
}

.rk-kform__tytul {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-kform__opis {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--rk-ink);
}

.rk-kform .form-label {
  font-weight: 600;
  color: var(--rk-ink);
}

.rk-kform .form-control,
.rk-kform .form-select {
  border-color: var(--rk-field-border);
  border-radius: 6px;
}

.rk-kform .form-control:focus,
.rk-kform .form-select:focus {
  border-color: var(--rk-k-zloto);
  box-shadow: 0 0 0 0.2rem rgba(176, 138, 78, 0.18);
}

.rk-kform__opcja {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  text-align: right;
  color: var(--rk-muted);
}

.rk-kform__etykieta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rk-kform__etykieta .rk-kform__opcja {
  margin: 0;
}

/* strefa zalacznika: label z ukrytym inputem, upuszczanie obsluguje custom.js */
.rk-kplik {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--rk-k-zloto);
  border-radius: 6px;
  background: #fffdf9;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.rk-kplik:hover,
.rk-kplik.is-nad {
  background: #f8f2e9;
  border-style: solid;
}

.rk-kplik.is-blad {
  border-color: #c0392b;
}

.rk-kplik__ikona {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--rk-k-zloto);
}

.rk-kplik__tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rk-kplik__glowny {
  font-size: 0.9375rem;
  color: var(--rk-ink);
  overflow-wrap: anywhere;
}

.rk-kplik__drugi {
  font-size: 0.75rem;
  color: var(--rk-muted);
}

.rk-kplik.is-blad .rk-kplik__drugi {
  color: #c0392b;
}

.rk-kplik__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* zgoda + przycisk w jednym rzedzie */
.rk-kform__stopka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

@media (max-width: 767.98px) {
  .rk-kform__stopka {
    flex-direction: column;
    align-items: stretch;
  }
}

.rk-kform__zgoda {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rk-muted);
}

.rk-kform__zgoda .form-check-label {
  font-size: 0.8125rem;
  color: var(--rk-ink);
}

.rk-kform__zgoda .form-check-label small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--rk-muted);
}

.rk-kform__zgoda a {
  color: var(--rk-ink);
  text-decoration: underline;
}

.rk-kform__wyslij {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
}

.rk-kform__wyslij svg {
  width: 18px;
  height: 18px;
}

/* --- pasek skrotow nad stopka (tlo na pelna szerokosc bez przewijania w poziomie) --- */

.rk-kskroty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
  margin-bottom: -36px; /* domyka odstep wrappera nad stopka (telefon) */
  padding: 1.5rem 0;
  background: var(--rk-k-krem);
  box-shadow: 0 0 0 100vmax var(--rk-k-krem);
  clip-path: inset(0 -100vmax);
}

@media (max-width: 767.98px) {
  .rk-kskroty {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.rk-kskroty__link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.25rem 1.5rem;
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-kskroty__link:first-child {
  padding-left: 0;
}

.rk-kskroty__link + .rk-kskroty__link {
  border-left: 1px solid var(--rk-line);
}

@media (max-width: 767.98px) {
  .rk-kskroty__link {
    padding: 0.25rem 0;
  }

  .rk-kskroty__link + .rk-kskroty__link {
    border-left: 0;
  }
}

.rk-kskroty__ikona {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--rk-k-zloto);
}

.rk-kskroty__ikona svg {
  width: 100%;
  height: 100%;
}

.rk-kskroty__tekst {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.rk-kskroty__tytul {
  font-weight: 600;
}

.rk-kskroty__opis {
  font-size: 0.8125rem;
  color: var(--rk-muted);
}

.rk-kskroty__strzalka {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--rk-ink);
  transition: transform 0.15s;
}

.rk-kskroty__link:hover .rk-kskroty__tytul {
  color: var(--rk-blue-dark);
}

.rk-kskroty__link:hover .rk-kskroty__strzalka {
  transform: translateX(3px);
}

/* przycisk zablokowany do czasu zaznaczenia zgody (psgdpr) - zloty zamiast domyslnego niebieskiego */
.rk-kform__wyslij:disabled,
.rk-kform__wyslij.disabled {
  border-color: var(--rk-blue);
  background: var(--rk-blue);
  color: #fff;
  opacity: 0.55;
}

.rk-kform__zgoda .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border-color: var(--rk-field-border);
}

.rk-kform__zgoda .form-check-input:checked {
  border-color: var(--rk-blue);
  background-color: var(--rk-blue);
}

.rk-kform__zgoda .form-check {
  display: block;
  padding-left: 1.75rem;
}

.rk-kform__zgoda .form-check .form-check-input {
  margin-left: -1.75rem;
}

/* rk-kskroty-md: od 768 px wrapper ma wiekszy odstep od stopki */
@media (min-width: 768px) {
  .rk-kskroty {
    margin-bottom: -96px;
  }
}