/* Nagłówek: blok zalogowanego konta (ps_customersignin).
   Chevron dropdowna (.dropdown-toggle::after) tworzył trzeci wiersz w kolumnowym
   flexie i podwyższał przycisk względem „Ulubione" i „Koszyk" — wyjmujemy go
   z układu i centrujemy pod nazwiskiem, żeby bloki nagłówka były równe. */
#_desktop_ps_customersignin .header-block__action-btn.dropdown-toggle::after {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Przycisk konta to <button>, więc łapie go theme'owe
   .header-block__action-btn:not([href]) { cursor: default } — nadpisujemy */
#_desktop_ps_customersignin .header-block__action-btn.dropdown-toggle {
  cursor: pointer;
}

/* Dropdown konta: mniejszy i w fioletach marki zamiast domyślnej
   czerni/niebieskiego Bootstrapa (nadpisujemy zmienne --bs-dropdown-*) */
#_desktop_ps_customersignin .dropdown-menu {
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-min-width: 13rem;
  --bs-dropdown-link-color: #3d2764;
  --bs-dropdown-link-hover-color: #59358c;
  --bs-dropdown-link-hover-bg: #f5f1fb;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #59358c;
}

#_desktop_ps_customersignin .dropdown-item {
  display: flex;
  align-items: center;
}

#_desktop_ps_customersignin .dropdown-item .material-icons {
  font-size: 1.125rem;
  color: #59358c;
}

/* Na aktywnym (klikniętym) fioletowym tle ikona musi być biała */
#_desktop_ps_customersignin .dropdown-item:active .material-icons {
  color: #fff;
}

/* Link do strony, na której jesteśmy — wyróżniony pogrubieniem */
#_desktop_ps_customersignin .dropdown-item[aria-current="page"] {
  font-weight: 600;
  color: #59358c;
}

/* „Moje konto": menu linków (sidebar i kafelki) — mniejsze i w fioletach
   marki, spójnie z dropdownem konta w nagłówku */
.account-menu__link {
  color: #3d2764;
}

.account-menu__link:hover {
  color: #59358c;
  background-color: #f5f1fb;
}

.account-menu__icon {
  color: #59358c;
}

.account-menu--main {
  gap: 0.75rem;
}

.account-menu--main .account-menu__link {
  font-size: 0.875rem;
}

.account-menu--main .account-menu__icon {
  font-size: 1.5rem;
}

.account-menu--sidebar .account-menu__link {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.account-menu--sidebar .account-menu__icon {
  font-size: 1.125rem;
}

.account-menu--sidebar .account-menu__link--active {
  font-weight: 600;
  color: #59358c;
  background-color: #f5f1fb;
}

/* „Wyloguj się" celowo zostaje czerwone (sygnał danger) — przywracamy
   kolor nadpisany wyżej ogólną regułą linków; ikona dziedziczy czerwień */
.account-menu__link--signout,
.account-menu__link--signout:hover {
  color: var(--bs-danger);
}

.account-menu__link--signout .account-menu__icon {
  color: inherit;
}

/* Checkout: formularz adresu — pola w siatce 2 kolumn (tylko #checkout,
   bo .js-address-form w "Moim koncie" nie ma wrapperów .address-form-field).
   Domyślnie pole zajmuje cały wiersz; pary (imię+nazwisko,
   kod pocztowy+miasto) stoją obok siebie. Odstępy pionowe daje .mb-3. */
#checkout .js-address-form .form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

#checkout .js-address-form .address-form-field {
  grid-column: span 2;
  min-width: 0;
}

#checkout .js-address-form .address-form-field--firstname,
#checkout .js-address-form .address-form-field--lastname,
#checkout .js-address-form .address-form-field--postcode,
#checkout .js-address-form .address-form-field--city {
  grid-column: span 1;
}

@media (max-width: 575.98px) {
  #checkout .js-address-form .address-form-field--firstname,
  #checkout .js-address-form .address-form-field--lastname,
  #checkout .js-address-form .address-form-field--postcode,
  #checkout .js-address-form .address-form-field--city {
    grid-column: span 2;
  }
}

/* Checkout: krok płatności — opcje płatności jako karty.
   Wybrana karta dostaje fioletową ramkę i delikatne tło. */
#checkout .payment-options__list {
  gap: 0.75rem;
}

#checkout .payment-option {
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.5rem);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#checkout .payment-option:hover {
  border-color: #59358c;
}

#checkout .payment-option:has(.payment-option__input:checked) {
  border-color: #59358c;
  box-shadow: 0 0 0 3px rgba(89, 53, 140, 0.12);
  background: #faf8fd;
}

#checkout .payment-option__form-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  min-height: 0;
}

#checkout .payment-option__label {
  flex: 1;
  font-weight: 600;
  cursor: pointer;
}

#checkout .payment-option__input {
  cursor: pointer;
  flex-shrink: 0;
  float: none;
  margin: 0;
}

/* Przyciski .btn-basic (Anuluj, „Adres do faktury różni się…", powroty
   do logowania): w Bootstrapie to tekstowe linki z zerowym poziomym
   paddingiem, ale motyw robi z każdego .btn fioletowy solid — bez
   paddingu tekst klei się do krawędzi. Przywracamy odstępy. */
.btn-basic {
  --bs-btn-padding-x: 1rem;
}

/* Radio i checkbox w checkoucie w kolorze motywu zamiast niebieskiego */
#checkout .form-check-input:checked {
  background-color: #59358c;
  border-color: #59358c;
}

/* Opis metody płatności wewnątrz karty, oddzielony delikatną linią */
#checkout .payment-option__additional-information {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--bs-border-color, #dee2e6);
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
}

#checkout .payment-option__additional-information :last-child {
  margin-bottom: 0;
}

/* ── Strona potwierdzenia zamówienia ─────────────────────────────── */

/* Hero: ikona + tytuł + numer zamówienia + e-mail.
   Kolory marki (fiolet #59358c + biel) zamiast zieleni alert-success. */
#order-confirmation .order-confirmation__hero {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid #e2d9f0;
  border-radius: 0.75rem;
  background: #f5f1fb;
  color: #3d2764;
}

@media(max-width:767px){
  #order-confirmation .order-confirmation__hero{
    flex-direction: column;
  }
}

#order-confirmation .order-confirmation__hero-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: #fff;
  background: #59358c;
  border-radius: 50%;
}

#order-confirmation .order-confirmation__hero-icon svg {
  width: 2rem;
  height: 2rem;
}

#order-confirmation .order-confirmation__hero-icon svg circle {
  display: none;
}

#order-confirmation .order-confirmation__hero .alert-link {
  color: #59358c;
}

#order-confirmation .order-confirmation__hero .page-title-section {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  color: inherit;
}

#order-confirmation .order-confirmation__hero-reference {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Karty (informacje o płatności, szczegóły zamówienia) */
#order-confirmation .card {
  border-radius: 0.75rem;
  border-color: var(--bs-border-color, #dee2e6);
}

#order-confirmation .card .card-body {
  padding: 1.5rem 1.75rem;
}

#order-confirmation .card .h2 {
  margin-bottom: 1rem;
  font-size: 1.375rem;
}

#order-confirmation .card .h3.card-subtitle {
  font-size: 1rem;
}

/* Tabelka danych do przelewu: etykieta przygaszona, wartość pogrubiona */
#order-confirmation .dl-list {
  overflow: hidden;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

#order-confirmation .dl-list dt {
  padding: 0.875rem 1.25rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
}

#order-confirmation .dl-list dd {
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  text-align: right;
}

/* Szczegóły zamówienia: numer / płatność / dostawa jako kafelki */
#order-confirmation .order-confirmation__details-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding-left: 0;
  list-style: none;
}

#order-confirmation .order-confirmation__details-list li {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
}

/* Wartość (strong) schodzi pod etykietę jako druga, mocniejsza linia */
#order-confirmation .order-confirmation__details-list li strong {
  display: block;
  margin-top: 0.125rem;
  font-size: 1rem;
  color: var(--bs-body-color, #212529);
}

#order-confirmation .order-confirmation__details-delay {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
  #order-confirmation .order-confirmation__details-list {
    grid-template-columns: 1fr;
  }
}

/* Produkty: separator między wierszami, suma wyrównana z nazwą */
#order-confirmation .order-confirmation__product {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#order-confirmation .order-confirmation__product:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#order-confirmation .order-confirmation__product-total {
  font-size: 1.0625rem;
}

/* Ilość × cena jednostkowa pod nazwą — przygaszona */
#order-confirmation .order-confirmation__product-price {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Lewa kolumna: baner „Darmowa dostawa" (da_freeshipping_info) ───── */

.da-freeshipping {
  padding: 1rem 1.25rem;
  margin-block-end: 1rem;
  color: #212529;
  background: #eece4b;
  border-radius: 0.75rem;
}

.da-freeshipping__title {
  margin-bottom: 0.375rem;
  font-weight: 700;
}

.da-freeshipping__row {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.da-freeshipping__icon {
  flex-shrink: 0;
  color: #59358c;
}

.da-freeshipping__text {
  font-size: 0.875rem;
  line-height: 1.35;
}

/* ── Listing: pasek filtrów nad produktami ──────────────────────────────
   Markup facetów (ps_facetedsearch) to nadal akordeon Bootstrapa, ale
   w #search_filters_wrapper (pasek) każdy facet działa jak dropdown:
   przycisk = pigułka, panel collapse = absolutnie pozycjonowana karta.
   Po przeniesieniu do offcanvasu na mobile (responsive-toggler swapuje
   #_desktop_faceted) te reguły przestają łapać i wraca pionowy akordeon. */

.products-toolbar__all-filters {
  display: none;
}

@media (min-width: 768px) {
  .products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
  }

  .products-toolbar #js-product-list-top {
    flex: 0 0 auto;
  }

  .products-toolbar .products__selection {
    display: flex;
    align-items: center;
    margin-block-end: 0;
  }

  /* Licznik produktów nie mieści się w pasku (makieta go nie pokazuje) */
  .products-toolbar .products__count {
    display: none;
  }

  .products-toolbar__facets {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Nagłówek „Filtruj według" i „Wyczyść wszystko" należą do układu
     pionowego — w pasku zbędne. Nie da się ich schować display:none
     !important: nagłówek ma d-md-block z @layer utilities, a przy
     !important deklaracja z warstwy wygrywa z niewarstwową. Chowamy
     więc wizualnie (wzorzec visually-hidden). */
  .products-toolbar__facets .left-block__title,
  .products-toolbar__facets .search-filters__clear {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .products-toolbar__facets .accordion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  .products-toolbar__facets .accordion-item {
    position: relative;
    background: transparent;
    border: 0;
  }

  /* Pokazujemy 4 pierwsze facety; resztę odsłania „Wszystkie filtry" */
  .products-toolbar__facets .accordion-item:nth-child(n + 5) {
    display: none;
  }

  #search_filters_wrapper.filters-expanded .accordion-item {
    display: block;
  }

  .products-toolbar:has(.accordion-item:nth-child(5)) .products-toolbar__all-filters {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-inline-start: auto;
    white-space: nowrap;
  }

  /* Wygląd jak pigułki facetów — bazowy .btn motywu jest fioletowy
     z białym tekstem, a :hover zmienia tekst na fioletowy */
  .products-toolbar__all-filters,
  .products-toolbar__all-filters:hover,
  .products-toolbar__all-filters:focus,
  .products-toolbar__all-filters:active {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
    background-color: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: none;
  }

  .products-toolbar__all-filters:hover {
    border-color: #59358c;
  }

  .products-toolbar__all-filters[aria-expanded="true"],
  .products-toolbar__all-filters[aria-expanded="true"]:hover,
  .products-toolbar__all-filters[aria-expanded="true"]:focus {
    color: #fff;
    background-color: #59358c;
    border-color: #59358c;
  }

  /* Przycisk facetu jako pigułka */
  .products-toolbar__facets .accordion-button {
    width: auto;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: none;
  }

  .products-toolbar__facets .accordion-button::after {
    margin-inline-start: 0.625rem;
  }

  .products-toolbar__facets .accordion-button:hover {
    border-color: #59358c;
  }

  .products-toolbar__facets .accordion-button:not(.collapsed) {
    color: #59358c;
    background: #fff;
    border-color: #59358c;
  }

  .products-toolbar__facets .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(89, 53, 140, 0.12);
  }

  /* Panel facetu jako dropdown */
  .products-toolbar__facets .accordion-collapse {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 1030;
    min-width: 17rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  }

  /* Animacja wysokości collapse nie ma sensu przy dropdownie —
     zerowy czas przejścia Bootstrap obsługuje natychmiastowo */
  .products-toolbar__facets .accordion-collapse.collapsing {
    height: auto !important;
    transition: none !important;
  }

  .products-toolbar__facets .accordion-collapse .accordion-body {
    max-height: 19rem;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow: auto;
  }

  /* Suwak ceny potrzebuje stałej szerokości i oddechu */
  .products-toolbar__facets .accordion-collapse .js-faceted-filter-slider {
    min-width: 16rem;
    padding: 1.5rem 1.5rem 1rem;
  }
}

/* Pigułka facetu z aktywnymi opcjami — fioletowa, z licznikiem
   w nawiasie renderowanym w facets.tpl (klasa has-active-filters) */
@media (min-width: 768px) {
  .products-toolbar__facets .accordion-button.has-active-filters {
    font-weight: 600;
    color: #59358c;
    border-color: #59358c;
  }
}

/* Checkboxy/radio filtrów w fiolecie marki — bez media query,
   żeby łapały też offcanvas na mobile */
.search-filters .form-check-input:checked {
  background-color: #59358c;
  border-color: #59358c;
}

.search-filters .form-check-input:focus {
  border-color: #59358c;
  box-shadow: 0 0 0 0.25rem rgba(89, 53, 140, 0.25);
}

/* Suwak ceny (noUiSlider) w fiolecie marki zamiast --bs-primary —
   bez media query, żeby łapał też offcanvas na mobile */
.search-filters .noUi-connect {
  background: #59358c;
}

.search-filters .noUi-handle:hover,
.search-filters .noUi-active,
.search-filters .noUi-active:hover {
  background: #59358c;
  border-color: #59358c;
}

.search-filters .noUi-handle:focus-visible {
  outline: 0.125rem solid #59358c;
}

/* Pusta kategoria — odstęp między komunikatem "brak produktów" a opisem kategorii */
#js-product-list .page-content--not-found {
  margin-bottom: 3rem;
}

/* Wypożyczalnia — tabela gier na stronie CMS */
.rental-table {
  margin-bottom: 1.5rem;
  font-size: 15px;
  vertical-align: middle;
}

.rental-table thead th {
  background: #59358c;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  border: 0;
}

.rental-table thead th small {
  font-weight: 400;
}

.rental-table tbody tr:nth-child(even) td {
  background: #f4f0f9;
}

.rental-table__no {
  width: 3rem;
  font-weight: 700;
}

.rental-table__num {
  text-align: center;
  white-space: nowrap;
}

/* Kalendarze — osadzone kalendarze Google na stronie CMS */
.calendar-embed {
  margin-bottom: 3rem;
  border: 1px solid #00000014;
  border-radius: 8px;
  overflow: hidden;
}

.calendar-embed iframe {
  display: block;
  width: 100%;
  height: 800px;
  border: 0;
}

@media (max-width: 767.98px) {
  .calendar-embed iframe {
    height: 600px;
  }
}

/* Strony CMS — obrazki w treści (np. baner płatności) nie wychodzą poza ekran */
#cms .page-content img {
  max-width: 100%;
  height: auto;
}

/* Strona Kontakt — lewa kolumna z danymi kontaktowymi */
.contact-details__block {
  margin-bottom: 1.75rem;
}

.contact-details__title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #59358c;
}

.contact-details p,
.contact-details address {
  margin-bottom: 0;
  line-height: 1.6;
}

.contact-details__phone {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.contact-details__links li + li {
  margin-top: 0.25rem;
}

/* Linki w kolorze marki zamiast domyślnego niebieskiego Bootstrapa
   (a { color: rgba(var(--bs-link-color-rgb), …) } — trzeba nadpisać też warianty -rgb) */
:root {
  --bs-link-color: #59358c;
  --bs-link-color-rgb: 89, 53, 140;
  --bs-link-hover-color: #3d2764;
  --bs-link-hover-color-rgb: 61, 39, 100;
}

/* Znacznik „Brak na stanie" — grafitowy, żeby nie mylił się z żółtym „Nowy"
   (żółty = nowość, czerwony = promocja, fioletowy = przedsprzedaż) */
.product-flags .badge.out_of_stock {
  border-color: #2d2d2d;
  background-color: #2d2d2d;
  color: #fff;
}

/* Drzewko kategorii — gałąź z breadcrumbów rozwinięta (ps_categorytree.tpl),
   rodzice pogrubieni, bieżąca kategoria w fiolecie marki */
.category-tree__item-link--parent {
  font-weight: 600;
}

.category-tree__item-link--current {
  font-weight: 700;
  color: #59358c;
}

/* Przełącznik sklepów PL / DE w nagłówku (moduł da_hreflang) —
   same flagi, bieżący sklep wyróżniony obwódką, drugi przygaszony */
.da-shopswitch__list {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.da-shopswitch__item {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 0.375rem;
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.da-shopswitch__item:hover,
.da-shopswitch__item:focus-visible {
  color: #59358c;
  background-color: #f5f1fb;
  opacity: 1;
}

.da-shopswitch__item--current {
  color: #59358c;
  opacity: 1;
}

.da-shopswitch__flag {
  display: block;
  width: 26px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.da-shopswitch__item--current .da-shopswitch__flag {
  box-shadow: 0 0 0 2px #59358c;
}