/* ============================================================================
   Branza FASHION — nakladka wizualna. Wyrownane do Figmy (Woohoo starterpack):
   sentence case (NIE uppercase), radius 8px, przyciski OUTLINE, Poppins.
   ZERO hardcode brandu — kolory/fonty WYLACZNIE var(--wh-*) => reskin przez
   podmiane palety (Tokens Studio) nie rusza ukladu. Geometria (px/%) = uklad.
   ============================================================================ */

/* --- Typografia bazowa --- */
body {
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  color: var(--wh-color-text-primary, #40362e);
  /* Tlo strony = biel. Sekcje, ktore maja byc szare (np. blog), robia to u siebie
     przez --wh-color-bg-subtle — nie odwrotnie. */
  background: var(--wh-color-white, #fff);
  font-size: var(--wh-font-size-base, 16px);
}

h1, h2, h3, .h1, .h2, .h3,
.page-title, .product-title {
  font-family: var(--wh-font-heading, 'Poppins', sans-serif);
  color: var(--wh-color-primary, #40362e);
  font-weight: var(--wh-font-weight-semibold, 600);                 /* Poppins SemiBold (Figma) */
  letter-spacing: -0.01em;          /* Figma: tracking ciasny, NIE rozstrzelony */
  text-transform: none;             /* Figma: sentence case */
}
h1, .h1, .page-title { font-size: var(--wh-font-size-h1, 38px); line-height: 1.2; }
h2, .h2            { font-size: var(--wh-font-size-h2, 32px); line-height: 1.2; }
h3, .h3            { font-size: var(--wh-font-size-h3, 22px); line-height: 1.3; }
small, .text-muted, .small { font-size: var(--wh-font-size-small, 12px); color: var(--wh-color-text-muted, #908981); }

/* --- Linki --- */
a { color: var(--wh-color-primary, #40362e); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--wh-color-accent, #9e8264); }

/* --- Przyciski / CTA — OUTLINE, radius 8px, sentence case (Figma) --- */
.btn, .btn-primary, .button-primary, .add-to-cart, .btn.btn-primary {
  background: transparent;
  border: 1.5px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  font-weight: var(--wh-font-weight-medium, 500);                 /* Poppins Medium */
  text-transform: none;
  letter-spacing: normal;
  border-radius: 8px;
  padding: 13px 18px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* `.btn-link` to przycisk w formie LINKU (kroki checkoutu, „pokaż więcej") — z definicji
   płaski, bez wypełnienia. Bez tego wyjątku dostawał tło accent, a `_checkout.css`
   nadpisywał mu kolor tekstu też na accent (wyższa swoistość: `.checkout-steps
   .checkout-steps__btn:hover`) — wychodził brązowy tekst na brązowym tle, czyli krok
   „Sposób dostawy" znikał przy najechaniu. Zgłoszone z dev 2026-08-11. */
.btn:hover:not(.btn-link), .btn-primary:hover, .button-primary:hover, .add-to-cart:hover {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}
/* Przyciski na ciemnym/cieplym tle (hero, newsletter, stopka) = bialy outline */
.section-warm .btn, .section-warm .btn-primary,
#footer .btn, #footer .btn-primary {
  border-color: var(--wh-color-white, #fff);
  color: var(--wh-color-white, #fff);
}
.section-warm .btn:hover, #footer .btn:hover {
  background: var(--wh-color-white, #fff);
  color: var(--wh-color-primary, #40362e);
}

/* --- Naglowek --- */
.header-top, .header-nav { border-bottom: 1px solid var(--wh-color-border-subtle, #e4e0da); }
#header .header-top { background: var(--wh-color-white, #fff); }

/* Bezpiecznik full-bleed: sekcje na cala szerokosc (wh_iframemap--full itp.)
   wychodza poza kontener ujemnym marginesem calc(50% - 50vw). 50vw wlicza
   szerokosc scrollbara, wiec element wystaje ~kilka px poza widoczny obszar =
   poziomy scroll. clip na przodku pELNEJ szerokosci przycina nadmiar; clip (nie
   hidden) NIE tworzy kontekstu przewijania, wiec nie psuje position: sticky.
   To samo rozwiazanie co #footer { overflow-x: clip }. */
#wrapper { overflow-x: clip; }

/* ============================================================================
   STOPKA — Fashion (Figma): tlo F7F7F7, kolumny space-between (brand | 3x linklist
   | storeinfo) + pasek copyright (wh_footerbar @ displayFooterAfter, full-width).
   ============================================================================ */
#footer, .footer-container { background: var(--wh-color-bg-subtle, #f7f7f7); color: var(--wh-color-text-primary, #40362e); }
/* full-bleed pasek (100vw) wlicza scrollbar → przytnij nadmiar (clip nie tworzy scrolla) */
#footer { overflow-x: clip; }
#footer .footer__main {
  background: var(--wh-color-bg-subtle, #f7f7f7); /* Figma tlo stopki */
  color: var(--wh-color-text-primary, #40362e);
  padding: 5.3rem 0 0; /* top 5.3rem; "bottom 4.1" = odstep nad paskiem (margin main-top) */
}
/* kontener stopki = 1275 jak caly sklep */
/* Kontener sklepu GLOBALNIE wg Figmy: 1235 tresci + 2x20 padding = 1275.
   Hummingbird (bootstrap xxl) daje schodkowe 1140/1320 ORAZ gutter .75rem
   (7.5px) — ujednolicamy: plynny 100% az do 127.5rem + padding 2rem/20px. */
.container {
  max-width: var(--wh-container-max, 127.5rem);
  --bs-gutter-x: 4rem;                 /* bootstrap liczy padding jako gutter/2 */
  padding-left: max(20px, 2rem);
  padding-right: max(20px, 2rem);
}

#footer .footer__main .container { max-width: var(--wh-container-max, 127.5rem); }
/* kolumny: space-between, min. odstep 2rem */
#footer .footer__main-top {
  display: flex;
  justify-content: space-between;
  gap: max(2rem, 20px);
  margin: 0 0 4.1rem;
}
/* reset bootstrap .row > * { width:100% } (przy flex kazde dziecko wpadalo do wlasnego wiersza) */
#footer .footer__main-top > * {
  min-width: 0; width: auto; max-width: none;
  flex: 0 1 auto;
  padding-left: 0; padding-right: 0;
}
/* natywny copyright motywu out — zastepuje go wh_footerbar */
#footer .copyright { display: none !important; }
/* pasek copyright: full-bleed (border-top na cala szerokosc, nie tylko kontener) */
#footer .footer__main-bottom {
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--wh-color-bg-subtle, #f7f7f7); /* jak caly footer */
}
#footer .wh-footerbar__inner { padding: 2.5rem max(2rem, 20px) 2.7rem; }
#footer .wh-footerbar__text { font-size: var(--wh-font-size-body, 1.4rem); font-weight: var(--wh-font-weight-regular, 400); color: var(--wh-color-text-muted, #908981); }
#footer .wh-footerbar__payments { max-width: 28.1rem; max-height: none; width: 100%; height: auto; }

/* brand (wh_logo element stopki) — kolumna max 24.6rem (specyficznosc > reset .row>*) */
#footer .footer__main-top > .wh-footerbrand, .wh-footerbrand { max-width: 24.6rem; }
.wh-footerbrand__img {
  width: max(14.3rem, 143px);
  max-width: max(14.3rem, 143px);
  height: auto; display: block;
  margin-bottom: 2.6rem;
}
.wh-footerbrand__desc {
  margin: 0;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
  line-height: normal;
}

/* naglowki kolumn (linklist + storeinfo): 16px semibold 40362E, mb 1.9rem */
#footer .wh-linklist__title, #footer .wh-storeinfo__title {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin-bottom: 1.9rem;
}
/* elementy menu: 14px regular lh 2.14 908981 */
#footer .wh-linklist__link {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 2.14;
  color: var(--wh-color-text-muted, #908981);
}
#footer .wh-linklist__link:hover { color: var(--wh-color-accent, #9e8264); }
/* storeinfo: opis 14/2.14 908981 mb 1.9rem; kontakty semibold 14 40362E; odstep do mediow 2.5rem */
#footer .wh-storeinfo__desc {
  font-size: var(--wh-font-size-body, 1.4rem); font-weight: var(--wh-font-weight-regular, 400); line-height: 2.14;
  color: var(--wh-color-text-muted, #908981);
  margin-bottom: 1.9rem;
}
#footer .wh-storeinfo__contact a, #footer .wh-storeinfo__contact span {
  font-size: var(--wh-font-size-body, 1.4rem); font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
}
#footer .wh-storeinfo__contact a:hover { color: var(--wh-color-accent, #9e8264); }
#footer .wh-storeinfo__contacts { margin-bottom: 2.5rem; }

/* tablet: zawijanie kolumn; mobile: 1 kolumna (collapse robia moduly) */
@media (max-width: 991.98px) {
  #footer .footer__main-top { flex-wrap: wrap; gap: max(2.4rem, 24px); }
}
@media (max-width: 767.98px) {
  #footer .footer__main { padding-top: max(2.4rem, 24px); }
  #footer .footer__main-top { display: block; margin-bottom: max(2.4rem, 24px); }
  #footer .footer__main-top > .wh-footerbrand, .wh-footerbrand { max-width: none; padding-bottom: max(1.6rem, 16px); border-bottom: 1px solid var(--wh-color-border-subtle, #e4e0da); }
  /* tytuly kolumn bez dolnego marginesu (naglowek = pasek collapse) */
  #footer .wh-linklist__title, #footer .wh-storeinfo__title { margin-bottom: 0; }
}

/* --- Sekcje --- */
/* Cieple sekcje (Figma: hero, newsletter) — tan tlo + bialy tekst */
.section-warm {
  background: var(--wh-color-bg-warm, #c6a488);
  color: var(--wh-color-white, #fff);
}
.section-warm h1, .section-warm h2, .section-warm h3 { color: var(--wh-color-white, #fff); }

/* hummingbird: .page:not(body) { padding-bottom: 2rem } — odstepy nadaja sekcje */
.page:not(body) { padding-bottom: 0; }

/* --- Karta produktu (spec Alexa 2026-07-20) --- */
.product-miniature, .js-product-miniature {
  background: var(--wh-color-white, #fff);
  border: 2px solid var(--wh-color-border-subtle, #eee); /* #EEEEEE ~ token (przyblizony za zgoda) */
  border-radius: 8px;
  padding: 3.3rem 1.5rem 1.7rem;
  position: relative; /* kontekst dla flags + wishlist (odstepy od krawedzi KARTY) */
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.product-miniature .product-thumbnail img { transition: transform .4s ease; display: block; width: 100%; }
.product-miniature:hover .product-thumbnail img { transform: scale(1.04); }   /* zoom zdjecia */
.product-miniature .product-title, .product-miniature .product-name {
  font-family: var(--wh-font-heading, 'Poppins', sans-serif);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-primary, #40362e);
}
.product-price-and-shipping .price, .product-price, .price {
  color: var(--wh-color-primary, #40362e);
  font-family: var(--wh-font-heading, 'Poppins', sans-serif);
  font-weight: var(--wh-font-weight-semibold, 600);
}
.product-flag.discount, .product-flag.on-sale {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
  border-radius: 6px;
}

/* --- Formularze / pola --- */
.form-control, input[type="text"], input[type="email"] {
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: 8px;
  color: var(--wh-color-text-primary, #40362e);
}
.form-control::placeholder { color: var(--wh-color-text-muted, #908981); }
.form-control:focus { border-color: var(--wh-color-accent, #9e8264); box-shadow: none; }

#notifications:has(.alert) { padding-block-start: var(--wh-space-md, 1.6rem); }
.alert {
  --bs-alert-border-radius: var(--wh-radius-md, 0.8rem);
  --bs-alert-padding-x: var(--wh-space-md, 1.6rem);
  --bs-alert-padding-y: 1.2rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.5;
}
.alert a { color: var(--bs-alert-link-color); text-decoration: underline; text-underline-offset: 0.3rem; }
.alert-success {
  --bs-alert-color: var(--wh-color-text-primary, #40362e);
  --bs-alert-bg: var(--wh-color-bg-subtle, #f7f7f7);
  --bs-alert-border-color: var(--wh-color-border-subtle, #e4e0da);
  --bs-alert-link-color: var(--wh-color-accent, #9e8264);
  border-left: 3px solid var(--wh-color-semantic-success, #16a34a);
}
.alert-danger {
  --bs-alert-color: #791515;
  --bs-alert-color: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 55%, black);
  --bs-alert-bg: #fceeee;
  --bs-alert-bg: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 8%, white);
  --bs-alert-border-color: #f6c9c9;
  --bs-alert-border-color: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 25%, white);
  --bs-alert-link-color: #791515;
  --bs-alert-link-color: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 55%, black);
}
.alert-warning {
  --bs-alert-color: #6e4705;
  --bs-alert-color: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 45%, black);
  --bs-alert-bg: #fef5e7;
  --bs-alert-bg: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 10%, white);
  --bs-alert-border-color: #fce2b6;
  --bs-alert-border-color: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 30%, white);
  --bs-alert-link-color: #6e4705;
  --bs-alert-link-color: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 45%, black);
}
.alert-info {
  --bs-alert-color: var(--wh-color-text-primary, #40362e);
  --bs-alert-bg: var(--wh-color-bg-subtle, #f7f7f7);
  --bs-alert-border-color: var(--wh-color-border-subtle, #e4e0da);
  --bs-alert-link-color: var(--wh-color-accent, #9e8264);
  border-left: 3px solid var(--wh-color-accent, #9e8264);
}

/* ============================================================================
   MODUŁY wh_* — skiny Fashion (Track B). Kolory z tokenow (tokenizacja CI/CD);
   tu LOOK: krawedzie 8px, hover, typografia. WYLACZNIE var(--wh-*).
   Klasy dokladne = imageslider + banners + topbar; reszta look-tuning na renderze.
   ============================================================================ */

/* wh_imageslider — strzalki, radius 8px */
.wh-slider__nav-arrow { color: var(--wh-color-accent, #9e8264); }
.wh-slider__nav-bg {
  background: var(--wh-color-bg-elevated, #ffffff);
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.wh-slider__nav-bg:hover { background: var(--wh-color-accent, #9e8264); color: var(--wh-color-white, #fff); }
.wh-slider__dot--active { background: var(--wh-color-accent, #9e8264); }

/* wh_banners — tytul: kolor marki, sentence case */
#wrapper .wh-banners__title h2 {
  color: var(--wh-color-text-primary, #40362e);
  font-family: var(--wh-font-heading, 'Poppins', sans-serif);
  font-weight: var(--wh-font-weight-semibold, 600);
}

/* wh_topbar — pasek ogloszeniowy w kolorze marki (tekst wg tresci admina) */
.wh-topbar {
  background: var(--wh-color-primary, #40362e);
  color: var(--wh-color-white, #fff);
  font-size: var(--wh-font-size-small, 12px);
}
.wh-topbar a { color: var(--wh-color-white, #fff); }

/* wh_productscarousel / wh_reassurance / wh_instafeed:
   kolor = tokeny; look (layout/odstepy/ikony) dopieszczam na renderze. */

/* ============================================================================
   HEADER — Fashion (belka promo + logo + menu + natywne PS). Klasy: brief CI/CD.
   ============================================================================ */

/* Belka promo (wh_topbar @ displayBanner) — geometria kontenera/przycisku = RDZEN modulu
   (front.css: .wh-topbar__inner max-width var(--wh-container-max), .wh-topbar__close).
   Tu tylko brand: typografia tresci. */
.wh-topbar__content {
  font-size: var(--wh-font-size-small, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* Logo (wh_logo) — max(143px, 14.3rem). Na homepage owinięte w <h1> (semantyka SEO). */
.wh-logo__h1 { margin: 0; padding: 0; line-height: 1; display: inline-flex; }
.wh-logo { display: inline-flex; align-items: center; }
.wh-logo__img {
  width: var(--wh-logo-max-width, max(14.3rem, 143px));
  max-width: var(--wh-logo-max-width, max(14.3rem, 143px));
  max-height: var(--wh-logo-max-height, none);
  height: auto; display: block;
}

/* Menu (wh_mainmenu @ displayNavFullWidth) — kontener jak header + padding */
.wh-mainmenu {
  max-width: var(--wh-container-max, 127.5rem);
  margin: 0 auto;
  padding: 0 max(2rem, 20px);
}
.wh-mainmenu__list {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.wh-mainmenu__link, .wh-mainmenu__item > a {
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  font-size: var(--wh-font-size-small, 12px);
  letter-spacing: .03em;
  color: var(--wh-color-primary, #40362e);
  text-decoration: none;
  padding: 1.8rem 0;
  transition: color .15s ease;
}
.wh-mainmenu__link:hover, .wh-mainmenu__item > a:hover { color: var(--wh-color-accent, #9e8264); }
/* odstep miedzy pozycjami (modul nadpisuje gap → margines na itemach) */
.wh-mainmenu .wh-mainmenu__list { gap: 28px; }
.wh-mainmenu__item { margin-right: 28px; }
.wh-mainmenu__item:last-child { margin-right: 0; }

/* Natywny header PS — Fashion kolory + typografia */
#header { font-family: var(--wh-font-body, 'Poppins', sans-serif); }
#header .header-top, #header .header-nav { background: var(--wh-color-white, #fff); }
#header a { color: var(--wh-color-primary, #40362e); }
#header a:hover { color: var(--wh-color-accent, #9e8264); }
/* Wyjatek: topbar jest w #header, a ma ciemne tlo — linki musza byc biale.
   Rowna specyficznosc ID (1,1,1) bije #header a (1,0,1); bez tego CTA
   "Sprawdz" mial kolor identyczny z tlem belki (niewidoczny bez hovera). */
#header .wh-topbar a { color: var(--wh-color-white, #fff); }
#header .wh-topbar a:hover { color: var(--wh-color-white, #fff); }

/* --- header-bottom: tylko border 1px #EEE (padding na kontenerze) --- */
#header .header-bottom {
  border-bottom: 1px solid var(--wh-color-border-subtle, #eeeeee);
  padding: 0;
}
/* Kontener 1275px — jeden na całą stronę + padding (2.6rem / max(2rem,20px)) */
#header .header-bottom__container {
  box-sizing: border-box;        /* max-width MA obejmowac padding — inaczej content-box
                                    (1275 + 40 padding) wychodzi poza viewport = h-scroll */
  max-width: var(--wh-container-max, 127.5rem);
  width: 100%;
  margin: 0 auto;
  padding: 2.6rem max(2rem, 20px);
}
/* (Natywne logo PS usunięte w child header.tpl override — nie ma potrzeby ukrywania CSS.) */

/* --- Wiersz: czysty flex; dzieci = szerokość treści (koniec overflow bootstrap-row) --- */
#header .header-bottom__row {
  display: flex; flex-wrap: nowrap; align-items: center;
  margin: 0; --bs-gutter-x: 0; gap: 0;
}
/* konto/koszyk — tylko ikona (tekst ukryty). Motyw wymusza display:block regułą
   z ID (nie do przebicia sensownym CSS) → chowamy przez font-size:0 + width:0. */
#header .ps-customersignin .header-block__title,
#header .ps-shoppingcart .header-block__title {
  font-size: 0 !important; width: 0 !important; overflow: hidden !important;
}
#header .header-bottom__row > * {
  flex: 0 0 auto; width: auto; max-width: none;
  padding-left: 0; padding-right: 0;
}

#header .header-block__action-btn { cursor: pointer; }
#header .ps-customersignin .dropdown-toggle::after {
  content: "";
  font-family: inherit;
  border: 0;
  width: 1rem;
  height: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E") no-repeat center / 1rem 0.6rem;
  vertical-align: middle;
  margin-left: 0.4rem;
}
#header .ps-customersignin .dropdown-menu {
  min-width: 24rem;
  padding: 0.8rem;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-base, #fff);
  box-shadow: var(--wh-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}
#header .ps-customersignin .dropdown-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: var(--wh-radius-sm, 0.4rem);
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
  transition: background var(--wh-duration-fast, 150ms) ease, color var(--wh-duration-fast, 150ms) ease;
}
#header .ps-customersignin .dropdown-item:hover,
#header .ps-customersignin .dropdown-item:focus,
#header .ps-customersignin .dropdown-item.active {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-primary, #40362e);
}
#header .ps-customersignin .dropdown-item[aria-current="page"] {
  background: var(--st-accent-light, #f0e9e2);
  font-weight: var(--wh-font-weight-semibold, 600);
}
#header .ps-customersignin .dropdown-item .material-icons {
  font-size: 2rem;
  color: var(--wh-color-accent, #9e8264);
}
#header .ps-customersignin .dropdown-item:last-child,
#header .ps-customersignin .dropdown-item:last-child:hover {
  color: var(--wh-color-semantic-danger, #dc2626);
}
#header .ps-customersignin .dropdown-item:last-child .material-icons { color: inherit; }
#header .ps-customersignin .dropdown-divider {
  margin: 0.6rem 0;
  border-color: var(--wh-color-border-subtle, #e4e0da);
  opacity: 1;
}
@media (hover: hover) {
  #header .ps-customersignin .dropdown:hover > .dropdown-menu {
    display: block;
    top: 100%;
    inset-inline-end: 0;
    inset-inline-start: auto;
  }
}
@media (max-width: 991.98px) {
  .ps-customersignin .dropdown-menu.show {
    position: fixed !important;
    inset: auto !important;
    top: calc(100% + 0.8rem) !important;
    left: 50vw !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: min(calc(100vw - 3.2rem), 30rem);
    max-height: 70vh;
    overflow-y: auto;
    z-index: var(--wh-z-index-modal, 400);
  }
}

/* Logo (bez order — kolejność wynika z DOM/LM) */
#header .header-bottom__row > .wh-logo,
#header .header-bottom__row > *:has(> .wh-logo) { margin: 0; }

/* Search DESKTOP (#_desktop_ps_searchbar): wyśrodkowany, max 48.4rem. Celujemy w ID,
   NIE w :has(.js-search-input) — bo JS wrzuca input też do mobilnego offcanvas. */
#header .header-bottom__row > #_desktop_ps_searchbar {
  flex: 0 1 48.4rem; min-width: 0;
  margin-left: auto; margin-right: auto;
}
#header .ps-searchbar { width: 100%; }
/* input: tło F7F7F7, radius 8px, padding 1.5/2.2rem + miejsce na ikonę; placeholder #908981 12px */
#header .js-search-input {
  background: var(--wh-color-bg, #f7f7f7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%2340362E' d='M20 18.8217L14.7817 13.6033C16.1372 11.9455 16.8036 9.83008 16.6432 7.69464C16.4828 5.55919 15.5077 3.56711 13.9197 2.13044C12.3316 0.69376 10.2522 -0.0775884 8.11137 -0.0240619C5.97058 0.0294646 3.93225 0.903771 2.41801 2.41801C0.903771 3.93225 0.0294646 5.97058 -0.0240619 8.11137C-0.0775884 10.2522 0.69376 12.3316 2.13044 13.9197C3.56711 15.5077 5.55919 16.4828 7.69464 16.6432C9.83008 16.8036 11.9455 16.1372 13.6033 14.7817L18.8217 20L20 18.8217ZM8.33333 15C7.01479 15 5.72586 14.609 4.62953 13.8765C3.53321 13.1439 2.67872 12.1027 2.17414 10.8846C1.66955 9.66638 1.53753 8.32594 1.79477 7.03273C2.052 5.73953 2.68694 4.55164 3.61929 3.61929C4.55164 2.68694 5.73953 2.052 7.03273 1.79477C8.32594 1.53753 9.66638 1.66955 10.8846 2.17414C12.1027 2.67872 13.1439 3.53321 13.8765 4.62953C14.609 5.72586 15 7.01479 15 8.33333C14.998 10.1008 14.295 11.7954 13.0452 13.0452C11.7954 14.295 10.1008 14.998 8.33333 15Z'/%3E%3C/svg%3E") no-repeat left 2.2rem center;
  background-size: 2rem 2rem;
  border: none;
  border-radius: 8px;
  padding: 1.5rem 2.2rem;
  padding-left: calc(2.2rem + 2rem + 1.5rem);
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
  width: 100%;
}
#header .js-search-input::placeholder { color: var(--wh-color-text-muted, #908981); opacity: 1; }
/* natywna ikona lupy PS out — używamy własnej (background-image inputa) */
#header .ps-searchbar__magnifier, #header .js-search-icon { display: none !important; }

/* Lista podpowiedzi ma trzymac szerokosc paska wyszukiwania. Baseline
   hummingbirda ma .ps-searchbar__dropdown { max-width: 30rem }, co przy
   html { font-size: 62.5% } daje 300px zamiast zakladanych 480px.
   Zmierzone: input 484px, dropdown 300px, kafelek wyniku 263px.
   Bez prefiksu #header, zeby regula objela takze egzemplarz w offcanvasie. */
.ps-searchbar__dropdown { max-width: none; width: 100%; }

/* overflow-y: scroll w baseline rezerwowal pasek przewijania (~15px) na stale,
   nawet przy jednym wyniku. auto pokazuje go dopiero, gdy lista sie nie miesci. */
.ps-searchbar__results { overflow-y: auto; }

/* --- Ikony prawo: odstępy (BEZ order — kolejność ustawia LM przez ps_hook_module) --- */
#header .header-bottom__row > *:has(.ps-languageselector),
#header .header-bottom__row > .wh-wishlist,
#header .header-bottom__row > *:has(> .wh-wishlist),
#header .header-bottom__row > *:has(.ps-customersignin),
#header .header-bottom__row > *:has(.ps-currencyselector),
#header .header-bottom__row > *:has(.ps-shoppingcart) { margin-left: 2.2rem; }
/* Selektory język + waluta: bez ramki/tła, font 12 medium #40362E, własna strzałka */
#header .ps-languageselector, #header .ps-currencyselector { border: none; background: none; }
#header .ps-languageselector select, #header .ps-currencyselector select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; background-color: transparent; box-shadow: none; outline: none;
  width: auto; min-width: auto;
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  font-size: var(--wh-font-size-small, 12px); font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-primary, #40362e); line-height: normal;
  cursor: pointer; background-repeat: no-repeat;
}
/* waluta — padding T/B .7rem, L/R 1.8rem + strzałka (prawo) */
#header .ps-currencyselector select {
  padding: max(.7rem, 7px) max(1.8rem, 18px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E");
  background-position: right max(.7rem, 7px) center;
  background-size: 1rem .6rem;
}
/* język — padding T .7rem R 2.8rem B .7rem L 3.5rem (miejsce na flagę) + strzałka(prawo) + flaga(lewo) */
#header .ps-languageselector select {
  padding: max(.7rem, 7px) max(1.8rem, 18px) max(.7rem, 7px) max(3.5rem, 35px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E"),
    var(--wh-lang-flag, url("/img/l/1.jpg"));
  background-position: right max(.7rem, 7px) center, left max(.7rem, 7px) center;
  background-size: auto;
}

/* header-block: flex + center (był block → misalign w pionie); bez zbędnego paddingu */
#header .header-block { display: flex; align-items: center; }
#header .header-block__action-btn { padding: 0; }

/* --- Ikony konto / serce / koszyk: własne SVG przez mask (kolor = token) --- */
#header .ps-customersignin .header-block__icon,
#header .ps-shoppingcart .header-block__icon,
#header .wh-wishlist::before {
  display: inline-block;
  width: max(2rem, 20px); height: max(2rem, 20px);
  font-size: 0; /* ukryj ligaturę material-icons */
  background-color: var(--wh-color-primary, #40362e);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: middle;
}
/* konto (osoba) */
#header .ps-customersignin .header-block__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17.5 20H15.8333V15.7975C15.8327 15.1442 15.5728 14.5178 15.1109 14.0558C14.6489 13.5938 14.0225 13.334 13.3692 13.3333H6.63083C5.9775 13.334 5.35111 13.5938 4.88914 14.0558C4.42716 14.5178 4.16733 15.1442 4.16667 15.7975V20H2.5V15.7975C2.50132 14.7023 2.93696 13.6524 3.71135 12.878C4.48575 12.1036 5.53567 11.668 6.63083 11.6667H13.3692C14.4643 11.668 15.5143 12.1036 16.2886 12.878C17.063 13.6524 17.4987 14.7023 17.5 15.7975V20Z'/%3E%3Cpath d='M10 10C9.0111 10 8.0444 9.70676 7.22215 9.15735C6.39991 8.60794 5.75904 7.82705 5.3806 6.91342C5.00217 5.99979 4.90315 4.99446 5.09608 4.02455C5.289 3.05465 5.76521 2.16373 6.46447 1.46447C7.16373 0.765206 8.05465 0.289002 9.02455 0.0960758C9.99446 -0.0968503 10.9998 0.00216643 11.9134 0.380605C12.827 0.759043 13.6079 1.39991 14.1573 2.22215C14.7068 3.0444 15 4.0111 15 5C14.9987 6.32568 14.4715 7.59668 13.5341 8.53407C12.5967 9.47147 11.3257 9.99868 10 10ZM10 1.66667C9.34073 1.66667 8.69627 1.86217 8.1481 2.22844C7.59994 2.59471 7.1727 3.1153 6.9204 3.72439C6.66811 4.33348 6.6021 5.0037 6.73072 5.6503C6.85934 6.29691 7.1768 6.89085 7.64298 7.35703C8.10915 7.8232 8.7031 8.14067 9.3497 8.26929C9.9963 8.3979 10.6665 8.33189 11.2756 8.0796C11.8847 7.82731 12.4053 7.40007 12.7716 6.8519C13.1378 6.30374 13.3333 5.65927 13.3333 5C13.3333 4.11595 12.9821 3.2681 12.357 2.64298C11.7319 2.01786 10.8841 1.66667 10 1.66667Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17.5 20H15.8333V15.7975C15.8327 15.1442 15.5728 14.5178 15.1109 14.0558C14.6489 13.5938 14.0225 13.334 13.3692 13.3333H6.63083C5.9775 13.334 5.35111 13.5938 4.88914 14.0558C4.42716 14.5178 4.16733 15.1442 4.16667 15.7975V20H2.5V15.7975C2.50132 14.7023 2.93696 13.6524 3.71135 12.878C4.48575 12.1036 5.53567 11.668 6.63083 11.6667H13.3692C14.4643 11.668 15.5143 12.1036 16.2886 12.878C17.063 13.6524 17.4987 14.7023 17.5 15.7975V20Z'/%3E%3Cpath d='M10 10C9.0111 10 8.0444 9.70676 7.22215 9.15735C6.39991 8.60794 5.75904 7.82705 5.3806 6.91342C5.00217 5.99979 4.90315 4.99446 5.09608 4.02455C5.289 3.05465 5.76521 2.16373 6.46447 1.46447C7.16373 0.765206 8.05465 0.289002 9.02455 0.0960758C9.99446 -0.0968503 10.9998 0.00216643 11.9134 0.380605C12.827 0.759043 13.6079 1.39991 14.1573 2.22215C14.7068 3.0444 15 4.0111 15 5C14.9987 6.32568 14.4715 7.59668 13.5341 8.53407C12.5967 9.47147 11.3257 9.99868 10 10ZM10 1.66667C9.34073 1.66667 8.69627 1.86217 8.1481 2.22844C7.59994 2.59471 7.1727 3.1153 6.9204 3.72439C6.66811 4.33348 6.6021 5.0037 6.73072 5.6503C6.85934 6.29691 7.1768 6.89085 7.64298 7.35703C8.10915 7.8232 8.7031 8.14067 9.3497 8.26929C9.9963 8.3979 10.6665 8.33189 11.2756 8.0796C11.8847 7.82731 12.4053 7.40007 12.7716 6.8519C13.1378 6.30374 13.3333 5.65927 13.3333 5C13.3333 4.11595 12.9821 3.2681 12.357 2.64298C11.7319 2.01786 10.8841 1.66667 10 1.66667Z'/%3E%3C/svg%3E");
}
/* koszyk */
#header .ps-shoppingcart .header-block__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4508 6.66667C17.0349 2.9225 13.8541 0 9.99992 0C6.14575 0 2.96492 2.9225 2.54909 6.66667H-0.0175781L1.58076 17.8542C1.75576 19.0775 2.81909 20 4.05576 20H15.9441C17.1799 20 18.2441 19.0775 18.4191 17.8542L20.0174 6.66667H17.4508ZM9.99992 1.66667C12.9324 1.66667 15.3599 3.845 15.7666 6.66667H4.23325C4.63992 3.845 7.06742 1.66667 9.99992 1.66667ZM16.7683 17.6183C16.7108 18.0258 16.3558 18.3333 15.9441 18.3333H4.05576C3.64409 18.3333 3.28909 18.0258 3.23159 17.6183L1.90492 8.33333H18.0949L16.7683 17.6183ZM10.8333 16.6667H9.16659V10H10.8333V16.6667ZM14.9999 16.6667H13.3333V10H14.9999V16.6667ZM6.66659 16.6667H4.99992V10H6.66659V16.6667Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4508 6.66667C17.0349 2.9225 13.8541 0 9.99992 0C6.14575 0 2.96492 2.9225 2.54909 6.66667H-0.0175781L1.58076 17.8542C1.75576 19.0775 2.81909 20 4.05576 20H15.9441C17.1799 20 18.2441 19.0775 18.4191 17.8542L20.0174 6.66667H17.4508ZM9.99992 1.66667C12.9324 1.66667 15.3599 3.845 15.7666 6.66667H4.23325C4.63992 3.845 7.06742 1.66667 9.99992 1.66667ZM16.7683 17.6183C16.7108 18.0258 16.3558 18.3333 15.9441 18.3333H4.05576C3.64409 18.3333 3.28909 18.0258 3.23159 17.6183L1.90492 8.33333H18.0949L16.7683 17.6183ZM10.8333 16.6667H9.16659V10H10.8333V16.6667ZM14.9999 16.6667H13.3333V10H14.9999V16.6667ZM6.66659 16.6667H4.99992V10H6.66659V16.6667Z'/%3E%3C/svg%3E");
}
/* serce (wishlist) — natywne svg out, mask na ::before */
#header .wh-wishlist svg { display: none; }
#header .wh-wishlist::before {
  content: '';
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.5835 0.764168C13.6451 0.778764 12.7272 1.04071 11.9224 1.52356C11.1177 2.00641 10.4546 2.69306 10.0001 3.51417C9.54566 2.69306 8.88257 2.00641 8.07783 1.52356C7.27308 1.04071 6.35517 0.778764 5.41679 0.764168C3.92091 0.82916 2.51155 1.48355 1.49661 2.58436C0.481678 3.68518 -0.0563308 5.14294 0.000128002 6.63917C0.000128002 12.285 9.13013 18.8058 9.51846 19.0825L10.0001 19.4233L10.4818 19.0825C10.8701 18.8075 20.0001 12.285 20.0001 6.63917C20.0566 5.14294 19.5186 3.68518 18.5036 2.58436C17.4887 1.48355 16.0793 0.82916 14.5835 0.764168ZM10.0001 17.3717C7.28929 15.3467 1.66679 10.3717 1.66679 6.63917C1.60983 5.58476 1.9721 4.55061 2.6746 3.76225C3.37709 2.97389 4.36282 2.49529 5.41679 2.43083C6.47077 2.49529 7.45649 2.97389 8.15899 3.76225C8.86149 4.55061 9.22376 5.58476 9.16679 6.63917H10.8335C10.7765 5.58476 11.1388 4.55061 11.8413 3.76225C12.5438 2.97389 13.5295 2.49529 14.5835 2.43083C15.6374 2.49529 16.6232 2.97389 17.3257 3.76225C18.0282 4.55061 18.3904 5.58476 18.3335 6.63917C18.3335 10.3733 12.711 15.3467 10.0001 17.3717Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.5835 0.764168C13.6451 0.778764 12.7272 1.04071 11.9224 1.52356C11.1177 2.00641 10.4546 2.69306 10.0001 3.51417C9.54566 2.69306 8.88257 2.00641 8.07783 1.52356C7.27308 1.04071 6.35517 0.778764 5.41679 0.764168C3.92091 0.82916 2.51155 1.48355 1.49661 2.58436C0.481678 3.68518 -0.0563308 5.14294 0.000128002 6.63917C0.000128002 12.285 9.13013 18.8058 9.51846 19.0825L10.0001 19.4233L10.4818 19.0825C10.8701 18.8075 20.0001 12.285 20.0001 6.63917C20.0566 5.14294 19.5186 3.68518 18.5036 2.58436C17.4887 1.48355 16.0793 0.82916 14.5835 0.764168ZM10.0001 17.3717C7.28929 15.3467 1.66679 10.3717 1.66679 6.63917C1.60983 5.58476 1.9721 4.55061 2.6746 3.76225C3.37709 2.97389 4.36282 2.49529 5.41679 2.43083C6.47077 2.49529 7.45649 2.97389 8.15899 3.76225C8.86149 4.55061 9.22376 5.58476 9.16679 6.63917H10.8335C10.7765 5.58476 11.1388 4.55061 11.8413 3.76225C12.5438 2.97389 13.5295 2.49529 14.5835 2.43083C15.6374 2.49529 16.6232 2.97389 17.3257 3.76225C18.0282 4.55061 18.3904 5.58476 18.3335 6.63917C18.3335 10.3733 12.711 15.3467 10.0001 17.3717Z'/%3E%3C/svg%3E");
}
#header .wh-wishlist:hover::before,
#header .ps-customersignin:hover .header-block__icon,
#header .ps-shoppingcart:hover .header-block__icon { background-color: var(--wh-color-accent, #9e8264); }

/* --- Liczniki koszyk + serce: badge prawy górny róg, tło akcent --- */
#header .ps-shoppingcart .header-block,
#header .wh-wishlist { position: relative; }
#header .ps-shoppingcart .header-block__badge,
#header .wh-wishlist__count {
  position: absolute; top: max(-.6rem, -6px); right: max(-.8rem, -8px);
  display: flex; align-items: center; justify-content: center;
  min-width: max(1.5rem, 15px); height: max(1.5rem, 15px); padding: 0 .3rem;
  background: var(--wh-color-accent, #9e8264); color: var(--wh-color-white, #fff);
  font-size: max(.6rem, 6px); font-weight: var(--wh-font-weight-semibold, 600); line-height: 1.2;
  border-radius: 50%;
}

/* Strzałki hero na wąskich ekranach — ukryte.
   Makieta mobilna (`home-mobile`, 440px) pokazuje hero BEZ strzałek nawigacji;
   desktopowa je ma. Zmierzone na dev przy 440px: strzałki renderują się na wysokości
   584px, czyli w kadrze zdjęcia, między tekstem a obrazem.
   Slajdy przełącza się na mobile gestem (Swiper ma touch), więc strzałki niczego nie
   odbierają — a zabierają miejsce i wchodzą na zdjęcie.
   Próg 767.98px, nie 991.98px: powyżej 768px hero ma już układ zbliżony do desktopu. */
@media (max-width: 767.98px) {
  .wh-slider .swiper-button-next,
  .wh-slider .swiper-button-prev { display: none; }
}

/* Plakietki liczników wystają 8px poza przycisk (to zamierzone — „wychodzą" na róg
   ikony). Przy bardzo wąskich ekranach przycisk koszyka stoi już przy krawędzi
   ekranu, więc te 8px wychodzi poza viewport i strona przewija się w poziomie.
   Zmierzone na dev: przy 350px scrollWidth 338 wobec viewportu 333; po ukryciu
   plakietki 333, po przywróceniu znów 338 (test różnicowy).
   Poniżej 400px cofamy plakietkę do krawędzi przycisku — wyżej wygląd BEZ ZMIAN. */
@media (max-width: 400px) {
  #header .ps-shoppingcart .header-block__badge,
  #header .wh-wishlist__count { right: 0; }
}

/* mobilna ikona lupy (ps-searchbar--mobile) */
#header .ps-searchbar--mobile .header-block__icon { font-size: max(2rem, 20px); }

/* ============================================================================
   RESPONSIVE — mobile/tablet < 992px (przełącznik na 992px, nie 768px bootstrap)
   ============================================================================ */
@media (max-width: 991.98px) {
  /* UWAGA: przełącznik desktop↔mobile (search/konto/koszyk) steruje JS Hummingbird
     na 768px (bundlowany, nie do zmiany w CSS). Tu tylko zmiany kosmetyczne, które
     nie kolidują z tym JS. Przesunięcie na 992px = zmiana JS motywu (CI/CD). */

  /* selektor kraju — tylko flaga (tekst ukryty) */
  #header .ps-languageselector select {
    color: transparent;
    width: max(4.8rem, 48px);
    padding-left: max(3.2rem, 32px);
    padding-right: max(1.8rem, 18px);
  }

  /* tablet: search input (desktop) z marginesem 2.2rem od logo (nie wyśrodkowany) */
  #header .header-bottom__row > #_desktop_ps_searchbar { margin-left: 2.2rem; }
}

/* Komórki < 768px: mobilna ikona lupy dołącza do prawej grupy ikon (po prawej) */
@media (max-width: 767.98px) {
  #header .header-bottom__row > .ps-searchbar--mobile { margin-left: auto !important; }
}

/* Wąskie telefony < 520px: zmniejsz wszystko, zostaje KOMPLET elementów (komplet
   selektorów+ikon ma ~482px, więc overflow do ~482 — próg 520 z zapasem).
   PLAIN PX (nie max(rem,px)) — pewne dopasowanie niezależnie od root font-size. */
@media (max-width: 519.98px) {
  #header .header-bottom__container { padding-left: 12px; padding-right: 12px; }
  #header .wh-logo__img { max-width: 95px; }
  /* mniejsze odstępy w prawej grupie ikon */
  #header .header-bottom__row > *:has(.ps-languageselector),
  #header .header-bottom__row > *:has(.ps-currencyselector),
  #header .header-bottom__row > .wh-wishlist,
  #header .header-bottom__row > *:has(> .wh-wishlist),
  #header .header-bottom__row > *:has(.ps-customersignin),
  #header .header-bottom__row > *:has(.ps-shoppingcart) { margin-left: 8px; }
  /* selektory język/waluta — bez lewego paddingu, prawy na strzałkę */
  #header .ps-currencyselector select,
  #header .ps-languageselector select { padding-left: 0; padding-right: max(2rem, 20px); }
}

/* ============================================================================
   Header „headroom" — scroll w dół chowa górę (banner+bottom), zostaje menu
   (header-nav-full-width); scroll w górę pokazuje wszystko. #header jest sticky
   (js-sticky-header) → przesuwamy go w górę o wysokość części nad menu
   (--wh-header-shift ustawiane przez JS w header.tpl, dynamiczne = topbar moze byc zamkniety).
   ============================================================================ */
#header.js-sticky-header { transition: transform .32s ease; will-change: transform; }
#header.wh-header--compact { transform: translateY(calc(-1 * var(--wh-header-shift, 16.1rem))); }
#header .header-nav-full-width { background: var(--wh-color-white, #fff); }
/* --- wh_textblocks: sekcja tekstowa (Figma: "Nowosci, ktore odswiezaja garderobe...") ---
   Kazda sekcja w .container (tpl modulu), odstepy miedzysekcyjne wg Figmy. */
.wh-textblock { margin-top: 4.3rem; margin-bottom: 5.3rem; }
/* h1 ORAZ h2 — ta sama reguła świadomie. Nagłówek tej sekcji jest na stronie
   głównej JEDYNYM h1 (logo renderuje się jako div, patrz nadpisanie wh_logo),
   a na pozostałych stronach ten sam blok bywa użyty jako h2. Rozmiar był już
   wcześniej h1-owy, więc zmiana znacznika NIE zmienia wyglądu — zmienia wyłącznie
   semantykę. Nie rozdzielaj tych selektorów bez sprawdzenia obu stron. */
.wh-textblock h1,
.wh-textblock h2 {
  font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
  /* Token --wh-font-size-h1 jest fluid (flaga wh.fluid, generator v1.14.25) —
     komponent = czyste var(), plynnosc z tokena. Zero clampow, brand-agnostyczne. */
  font-size: var(--wh-font-size-h1, 3.8rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--wh-color-text-primary, #40362e);
  margin: 0 0 var(--wh-space-lg, 3.2rem); /* 32px = najblizszy token skali space */
}
.wh-textblock p {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 1.61;
  color: var(--wh-color-text-muted, #908981);
  margin: 0;
}
.wh-textblock p + p { margin-top: max(1rem, 10px); }

/* --- wh_productscarousel: rytm + tytul sekcji jak reszta home (Figma:
   Popularne produkty / Nasze bestsellery). Sterowane klasa wh-carousel-home
   (pole "Klasa CSS sekcji" w panelu modulu). --- */
.wh-carousel-home { margin-top: 5rem; margin-bottom: 4.7rem; }
#wrapper .wh-carousel-home .wh-carousel-title {
  font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
  font-size: var(--wh-font-size-h1, 3.8rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--wh-color-text-primary, #40362e);
  margin: 0;
}

/* Bestsellery (Figma Rectangle 29): sekcja na SZARYM tle full-bleed, jak blog.
   Full-bleed przez calc(50% - 50vw) — nadmiar scrollbara tnie #wrapper overflow-x: clip. */
#wrapper .wh-carousel-section.wh-carousel-bestsellery { /* podwojna klasa + #wrapper: front.css modulu jest pozniejszy w kaskadzie */
  background: var(--wh-color-bg-subtle, #f7f7f7);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: 7.4rem 0;           /* oddech sekcji z tlem (spec Alexa 2026-07-20) */
  margin-top: 5.4rem;          /* Figma: 54px od tekstu intro */
  margin-bottom: 4.7rem;       /* Figma: 47px do sekcji Kategorie */
}

/* Rytm sekcji karuzeli: front.css modulu daje domyslne padding 30px 0 i
   header margin-bottom 20px — w Fashion odstepy nadaja marginesy sekcji.
   #wrapper w selektorze: front.css modulu laduje sie PO motywie, wiec przy
   rownej specyficznosci wygrywalby modul. */
#wrapper .wh-carousel-section { padding: 0; }
#wrapper .wh-carousel-header { margin-bottom: 2.8rem; }

/* Strzalki karuzeli wg SVG Figmy: kolo 52px bg-subtle + znak accent (maska).
   Pozycja: 4.5rem POZA kontenerem (prev -4.5rem / next -4.5rem od krawedzi). */
/* ZALEZNOSC OD TLA SEKCJI (Figma daje 2 warianty kola):
     - sekcja na bialym tle  -> kolo bg-subtle (#f7f7f7)
     - sekcja z tlem (szare/kolorowe) -> kolo biale
   Przelacznik = zmienna --wh-arrow-bg dziedziczona z sekcji. Sekcje wlasne
   ustawiaja ja nizej; dla dowolnej nowej sekcji admin wpisuje klase
   wh-section--tinted w polu "Klasa CSS sekcji" (Layout Manager). */
.wh-carousel-home { --wh-arrow-bg: var(--wh-color-bg-subtle, #f7f7f7); }
.wh-carousel-bestsellery,
.wh-section--tinted,
.section-warm { --wh-arrow-bg: var(--wh-color-white, #fff); }

.wh-carousel-home .wh-carousel-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wh-arrow-bg, var(--wh-color-bg-subtle, #f7f7f7));
  border: 0;
  transition: background .15s ease;
}
.wh-carousel-home .wh-carousel-arrow svg { display: none; } /* SVG modulu out — maska nizej */
.wh-carousel-home .wh-carousel-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--wh-color-accent, #9e8264);
}
.wh-carousel-home .wh-carousel-prev::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M27.1833 33.542L28.8093 31.9126L22.7144 25.8131L28.8093 19.7136L27.1787 18.0841L21.0884 24.1836C20.6563 24.6158 20.4136 25.2019 20.4136 25.8131C20.4136 26.4242 20.6563 27.0103 21.0884 27.4425L27.1833 33.542Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M27.1833 33.542L28.8093 31.9126L22.7144 25.8131L28.8093 19.7136L27.1787 18.0841L21.0884 24.1836C20.6563 24.6158 20.4136 25.2019 20.4136 25.8131C20.4136 26.4242 20.6563 27.0103 21.0884 27.4425L27.1833 33.542Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wh-carousel-home .wh-carousel-next::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M24.4429 33.542L22.8169 31.9126L28.9118 25.8131L22.8169 19.7136L24.4475 18.0841L30.5378 24.1836C30.9699 24.6158 31.2126 25.2019 31.2126 25.8131C31.2126 26.4242 30.9699 27.0103 30.5378 27.4425L24.4429 33.542Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M24.4429 33.542L22.8169 31.9126L28.9118 25.8131L22.8169 19.7136L24.4475 18.0841L30.5378 24.1836C30.9699 24.6158 31.2126 25.2019 31.2126 25.8131C31.2126 26.4242 30.9699 27.0103 30.5378 27.4425L24.4429 33.542Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* hover: przyciemnienie wariantu (dziala dla obu tel bez dublowania regul) */
.wh-carousel-home .wh-carousel-arrow:hover {
  background: #e5e4e3;
  background: color-mix(in srgb, var(--wh-arrow-bg, #f7f7f7) 90%, var(--wh-color-text-primary, #40362e));
}
/* #wrapper: front.css modulu ma wlasne pozycje strzalek (.swiper-button-prev
   .wh-carousel-prev) o tej samej specyficznosci i laduje sie PO motywie —
   bez podbicia wygrywa modul. */
#wrapper .wh-carousel-home .wh-carousel-prev { left: calc(-52px - 4.5rem); right: auto; }
#wrapper .wh-carousel-home .wh-carousel-next { right: calc(-52px - 4.5rem); left: auto; }
/* Waski ekran: brak miejsca poza kontenerem -> strzalki do srodka
   (#wrapper ma overflow-x: clip, wiec inaczej zostalyby uciete) */
@media (max-width: 1475px) {
  #wrapper .wh-carousel-home .wh-carousel-prev { left: 0; }
  #wrapper .wh-carousel-home .wh-carousel-next { right: 0; }
}
/* Komorki: strzalka wychodzi poza kontener i nachodzi na karte tylko 12px
   (spec Alexa). Karta startuje 1.5rem od krawedzi ekranu, kolo ma 52px,
   wiec 1.5rem - 52px + 12px = -2.5rem. */
@media (max-width: 767px) {
  #wrapper .wh-carousel-home .wh-carousel-prev { left: -2.5rem; }
  #wrapper .wh-carousel-home .wh-carousel-next { right: -2.5rem; }
}
/* strzalki Swipera: schowaj domyslne strzalki biblioteki, zostaw nasze SVG */
.wh-carousel-home .swiper-button-prev::after,
.wh-carousel-home .swiper-button-next::after { content: none; }

/* ============================================================================
   MINIATURA PRODUKTU (hummingbird .product-miniature) — Figma karta 290x479.
   Wspolna dla karuzel home ORAZ listingow kategorii — stylizujemy globalnie.
   ============================================================================ */
.product-miniature__inner {
  background: transparent; /* karta stylowana na article (border+padding) */
  border-radius: 0;
  overflow: visible;
}
/* __top zostaje kontekstem absolutnych dzieci (quickview MUSI sie pozycjonowac
   wzgledem zdjecia — inaczej przy hover wjezdza na przyciski karty).
   Flags/wishlist licza wiec od __top; offsety nizej przeliczaja to na odstep
   od krawedzi KARTY (karta ma padding 3.3rem gora / 1.5rem boki). */
.product-miniature__top {
  position: relative;
  padding: 0 1.2rem;      /* obrazek: dodatkowy L/R 1.2rem */
  overflow: visible;      /* hummingbird chowa tu quickview (overflow:hidden) — to
                             przycinalo badge/wishlist wystajace nad zdjecie;
                             quickview ukrywamy zamiast tego przez opacity (nizej) */
}
.product-miniature .product-miniature__image-container { position: static; overflow: hidden; }
.product-miniature__bottom {
  margin-top: 2.1rem;
  padding: 0 1.2rem; /* obrazek->opinie 2.1rem; teksty L/R 1.2rem */
  gap: 0;            /* hummingbird daje .5rem — odstepy nadaja marginesy elementow */
}
/* hummingbird: @media(hover){.product-miniature__inner:hover{box-shadow}} — out */
.product-miniature__inner:hover { box-shadow: none; }

/* nazwa produktu: 16 semibold primary (Figma 9:964) */
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a {
  font-family: var(--wh-font-body, sans-serif);
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5; /* spec: "auto" = 1.5 (Alex 2026-07-20) */
  color: var(--wh-color-text-primary, #40362e);
}
.product-miniature .product-miniature__title {
  display: block;
  margin-bottom: max(7px, .7rem);
}
.product-miniature .product-miniature__title a:hover { color: var(--wh-color-accent, #9e8264); }

/* cena: 22 semibold accent (Figma 9:974); stara cena 14 muted przekreslona.
   Klasy hummingbird: __price (aktualna) / __regular-price (stara). */
.product-miniature .product-miniature__prices {
  display: flex;
  align-items: center; /* ceny wysrodkowane PIONOWO wzgledem siebie */
  gap: 1.5rem;         /* przekreslona po prawej, odstep 1.5rem */
  margin-bottom: max(7px, .7rem);
}
.product-miniature .product-miniature__price {
  font-size: var(--wh-font-size-h3, 22px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-accent, #9e8264);
}
.product-miniature .product-miniature__regular-price {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-text-muted, #908981);
  text-decoration: line-through;
}

/* flagi wg Figmy (9:970): rabat na --wh-color-sale (#ff4b4b — NOWY token,
   Figma; brak w palecie brand/semantic), radius 5, padding 2/6, 12 semibold.
   "Nowy" (brak w Figmie) spojnie na accencie.
   Hummingbird trzyma niebieski w @layer bs-base z !important
   (.product-flags .badge:not(.discount)) — dla !important wygrywa WARSTWA,
   wiec nadpisujemy W TEJ SAMEJ warstwie wyzsza specyficznoscia. */
@layer bs-base {
  .product-miniature .product-flags .badge:not(.discount),
  .quickview .product-flags .badge:not(.discount) {
    background: var(--wh-color-accent, #9e8264) !important;
  }
  .product-miniature .product-flags .badge,
  .quickview .product-flags .badge {
    border: 0 !important; /* border 1px var(--bs-primary) z hummingbird — out */
  }
  /* "(Znizka 20%)" — bootstrapowa .text-primary-emphasis (niebieski) */
  .quickview .product__discount-percentage {
    color: var(--wh-color-sale, #ff4b4b) !important;
  }
}
.product-miniature .product-flags {
  /* 1.5rem od gory/lewej KARTY: __top startuje 3.3rem ponizej gornej krawedzi */
  top: -1.8rem;
  left: 0;
  padding: 0 4rem 0 0;
  gap: .5rem;
}
.product-miniature .product-flags .product-flag,
.product-miniature .product-flags .badge {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5; /* bez tego badge jest za niski */
  border: 0; /* hummingbird daje border 1px var(--bs-primary) — out */
  border-radius: 5px;
  padding: max(2px, .2rem) max(6px, .6rem);
  text-transform: none;
}
.product-miniature .product-flags .product-flag.discount,
.product-miniature .product-flags .badge.discount {
  background: var(--wh-color-sale, #ff4b4b);
}

/* akcje miniatury wg Figmy (9:974): qty +/- ZOSTAJE + pelny przycisk
   "Dodaj do koszyka" (outline accent). CSS-only — tpl hummingbird ma juz
   tekst w .product-miniature__add-text (btn-square-icon go chowal).
   Dziala tez na listingu kategorii (wspolna miniatura). */
.product-miniature__actions { width: 100%; }
.product-miniature .product-miniature__form {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* waska karta (mobile 2 kolumny): przycisk schodzi pod qty */
  align-items: stretch;
  gap: max(10px, 1rem);
}
/* qty ukryte w miniaturze — wybor ilosci/atrybutow robi sie w szybkim podgladzie
   lub na stronie produktu (decyzja Alexa 2026-07-21). Zostaje sam przycisk. */
.product-miniature .quantity-button { display: none; }
.product-miniature .product-miniature__add.btn { flex: 1 1 auto; width: 100%; }
/* (blok stylowania qty usuniety — qty ukryte w miniaturze) */
.product-miniature .product-miniature__add.btn,
.product-miniature .product-miniature__details.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(10px, 1rem); /* ikona (po lewej) -> tekst */
  height: auto;
  line-height: 1.5;
  white-space: nowrap;
  background: transparent;
  border: 1.5px solid var(--wh-color-accent, #9e8264);
  border-radius: 8px;
  padding: max(15px, 1.5rem) max(8px, 0.8rem); /* poziomo ciasniej — rzad z qty w karcie 290 */
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-accent, #9e8264);
  transition: background .15s ease, color .15s ease;
}
.product-miniature .product-miniature__add.btn .product-miniature__add-text {
  display: inline; /* btn-square-icon chowal tekst */
  position: static;
  width: auto; height: auto;
  overflow: visible;
  clip: auto; clip-path: none;
}

/* TELEFON: JEDEN kafelek w rzedzie ponizej 420px.
   Hummingbird przelacza na 2 kolumny juz od 360px, a przy 375px daje to
   kafelek 160px — za ciasno na te karte (ikona 20px + odstep + napis
   "Dodaj do koszyka" 123px potrzebuja 153px, przycisk ma 102px, wiec tresc
   wychodzila POZA ramke: ikona w lewo, napis w prawo).
   Zmierzone po zmianie: kafelek 335px, przepelnienie 27px -> 0, napis
   zostaje w jednej linii przy 14px. */
@media (max-width: 419px) {
  .layout-left-column .products,
  .layout-right-column .products,
  .layout-full-width .products {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* WASKI KAFELEK (2 kolumny w zakresie ~420-500px): tam nadal brakuje miejsca —
   przy 440px kafelek ma 193px i napis wychodzil o 10px. Zawijamy zamiast
   chowac, bo to glowne CTA kafelka; przycisk rosnie z 53px do 58px.
   ⚠️ PROG W PIKSELACH, NIE W rem. Hummingbird pisze `13.5rem` zakladajac
   podstawe 16px (216px), ale nasz motyw ma `html { font-size: 62.5% }`, wiec
   13.5rem = 135px — zapytanie NIE lapie kafelka 160px i regula bazy (ani nasza
   pierwsza wersja) nigdy sie nie uruchamiala. Zmierzone na dev. */
@container product-miniature (width < 216px) {
  .product-miniature .product-miniature__add.btn {
    white-space: normal;
    line-height: 1.25;
    font-size: var(--wh-font-size-small, 1.2rem);
    gap: max(6px, 0.6rem);
    padding: max(10px, 1rem) max(6px, 0.6rem);
  }
}
/* ikona koszyka: SVG z Figmy jako maska (glif material-icons out) */
.product-miniature .product-miniature__add.btn .material-icons {
  width: 20px;
  height: 20px;
  font-size: 0;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.4509 6.66667C17.035 2.9225 13.8542 0 10 0C6.14588 0 2.96504 2.9225 2.54921 6.66667H-0.0174561L1.58088 17.8542C1.75588 19.0775 2.81921 20 4.05588 20H15.9442C17.18 20 18.2442 19.0775 18.4192 17.8542L20.0175 6.66667H17.4509ZM10 1.66667C12.9325 1.66667 15.36 3.845 15.7667 6.66667H4.23338C4.64004 3.845 7.06754 1.66667 10 1.66667ZM16.7684 17.6183C16.7109 18.0258 16.3559 18.3333 15.9442 18.3333H4.05588C3.64421 18.3333 3.28921 18.0258 3.23171 17.6183L1.90504 8.33333H18.095L16.7684 17.6183ZM10.8334 16.6667H9.16671V10H10.8334V16.6667ZM15 16.6667H13.3334V10H15V16.6667ZM6.66671 16.6667H5.00004V10H6.66671V16.6667Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.4509 6.66667C17.035 2.9225 13.8542 0 10 0C6.14588 0 2.96504 2.9225 2.54921 6.66667H-0.0174561L1.58088 17.8542C1.75588 19.0775 2.81921 20 4.05588 20H15.9442C17.18 20 18.2442 19.0775 18.4192 17.8542L20.0175 6.66667H17.4509ZM10 1.66667C12.9325 1.66667 15.36 3.845 15.7667 6.66667H4.23338C4.64004 3.845 7.06754 1.66667 10 1.66667ZM16.7684 17.6183C16.7109 18.0258 16.3559 18.3333 15.9442 18.3333H4.05588C3.64421 18.3333 3.28921 18.0258 3.23171 17.6183L1.90504 8.33333H18.095L16.7684 17.6183ZM10.8334 16.6667H9.16671V10H10.8334V16.6667ZM15 16.6667H13.3334V10H15V16.6667ZM6.66671 16.6667H5.00004V10H6.66671V16.6667Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.product-miniature .product-miniature__add.btn:hover,
.product-miniature .product-miniature__details.btn:hover {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}

/* omnibus pod cena (Figma 9:965): 12 regular muted + cena BOLD przekreslona
   w tej samej linii (dlatego osobna przekreslona cena obok glownej jest
   usunieta w override tpl miniatury) */
.product-miniature__omnibus {
  margin: 0 0 1.9rem;
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 1.41;
  color: var(--wh-color-text-muted, #908981);
}
.product-miniature__omnibus-price {
  font-weight: var(--wh-font-weight-bold, 700);
  text-decoration: line-through;
}
.product__omnibus {
  margin: 0.6rem 0 0;
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 1.41;
  color: var(--wh-color-text-muted, #908981);
}
.product__omnibus-price {
  font-weight: var(--wh-font-weight-bold, 700);
  text-decoration: line-through;
}

/* gwiazdki opinii (productcomments) wg Figmy 9:932: 15.5px zolte
   (--wh-color-star — NOWY token, brak w palecie), nad tytulem */
.product-miniature .product-list-review,
.quickview .product__reviews .product-list-review {
  align-items: center; /* wysrodkowane PIONOWO w linii */
  gap: 9px;            /* gwiazdki -> tekst */
  margin-bottom: max(7px, .7rem);
}
/* tekst "x opinie": 12 regular primary — wprost na elemencie (hummingbird
   nadaje mu wlasne style, dziedziczenie z kontenera nie wystarcza) */
.product-miniature .product-list-review .product-list-comments-number,
.quickview .product__reviews .product-list-comments-number {
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}
/* warianty kolorow: ukryte (spec 2026-07-20) */
.product-miniature .product-miniature__variants { display: none; }
/* gwiazdki: SVG z Figmy (path jako mask), max(16px,1.6rem), gap ~5px.
   Pelna = --wh-color-star (#FFC633 — NOWY token, brak w palecie), pusta =
   border-subtle. Zastepuje sprite hummingbird (bg wylaczone). JS hummingbird
   ZAOKRAGLA srednia (Math.round), wiec w miniaturze czastkowych nie widac;
   maska jest jednak PRZYCINAJACA (left + staly rozmiar), wiec gdyby JS podal
   ulamek, polowka gwiazdki wyswietli sie poprawnie (contain by ja scisnal). */
.product-miniature .grade-stars .star,
.product-miniature .grade-stars .star-on,
.quickview .product__reviews .grade-stars .star,
.quickview .product__reviews .grade-stars .star-on {
  width: max(16px, 1.6rem);
  height: max(16px, 1.6rem);
  margin: 0 5px 0 0;
  flex: 0 0 auto;
  background-image: none;
  background-color: var(--wh-color-border-subtle, #e4e0da);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.47 14'%3E%3Cpath d='M7.73375 0L9.92481 4.718L15.089 5.34389L11.279 8.88566L12.2795 13.9905L7.73375 11.4614L3.18796 13.9905L4.18853 8.88566L0.378517 5.34389L5.54268 4.718L7.73375 0Z'/%3E%3C/svg%3E") no-repeat left center / max(16px, 1.6rem) max(16px, 1.6rem);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.47 14'%3E%3Cpath d='M7.73375 0L9.92481 4.718L15.089 5.34389L11.279 8.88566L12.2795 13.9905L7.73375 11.4614L3.18796 13.9905L4.18853 8.88566L0.378517 5.34389L5.54268 4.718L7.73375 0Z'/%3E%3C/svg%3E") no-repeat left center / max(16px, 1.6rem) max(16px, 1.6rem);
}
.product-miniature .grade-stars .star-on,
.quickview .product__reviews .grade-stars .star-on {
  background-color: var(--wh-color-star, #FFC633);
}
/* hummingbird daje sztywne width 62.5px (sprite), a star-content jest absolute
   — kontener musi pomiescic 5 gwiazdek z odstepami, inaczej tekst nachodzi */
.product-miniature .grade-stars,
.quickview .product__reviews .grade-stars {
  width: calc(5 * max(16px, 1.6rem) + 4 * 5px);
  height: max(16px, 1.6rem);
}
.product-miniature .grade-stars .star:last-child,
.product-miniature .grade-stars .star-on:last-child,
.quickview .product__reviews .grade-stars .star:last-child,
.quickview .product__reviews .grade-stars .star-on:last-child { margin-right: 0; }


/* wishlist wg Figmy (SVG od Alexa): kolko 48px na --wh-color-text-primary,
   biale serce-outline. Glif = maska z dokladnego path Figmy (clip 20x20). */
/* hummingbird styluje wishlist w @layer ps-modules Z !important
   (bg/height/radius/color) — dla !important wygrywa WARSTWA (kanon, wariant 2),
   wiec nadpisujemy W TEJ SAMEJ warstwie wyzsza specyficznoscia. */
@layer ps-modules {
  .product-miniature .wishlist-button-add {
    /* 2rem od gory/prawej KARTY (kontekst = __top, ktory startuje 3.3rem
       ponizej i 1.5rem od boku karty) */
    top: -1.3rem !important;
    right: .5rem !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--wh-color-text-primary, #40362e) !important;
    color: var(--wh-color-white, #fff) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    padding: 0 !important;
  }
  .product-miniature .wishlist-button-add:hover {
    background: var(--wh-color-accent, #9e8264) !important;
    color: var(--wh-color-white, #fff) !important;
  }
  .product-miniature .wishlist-button-add i,
  .product-miniature .wishlist-button-add .material-icons {
    color: var(--wh-color-white, #fff) !important;
    font-size: 20px; /* rozmiar GLIFU ikony (geometria) */
  }
}

/* Szybki podglad: pasek wjezdzajacy na dol ZDJECIA (hummingbird trzyma go pod
   spodem i podnosi translateY przy hover .product-miniature__inner). */
.product-miniature .product-miniature__quickview-button {
  /* fade na dole zdjecia zamiast wysuwania spod spodu (wysuwanie wymagaloby
     overflow:hidden na __top, ktory przycinal badge i wishlist) */
  top: auto;
  bottom: 0;
  transform: none;
  opacity: 0;
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(10px, 1rem);
  width: auto;
  left: 1.2rem;
  right: 1.2rem;
  margin: 0;
  padding: max(10px, 1rem) max(15px, 1.5rem);
  background: var(--wh-color-text-primary, #40362e);
  color: var(--wh-color-white, #fff);
  border: 0;
  border-radius: 0 0 8px 8px;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  line-height: 1.5;
  transition: background .15s ease, opacity .2s ease, visibility .2s ease;
}
.product-miniature .product-miniature__quickview-button:hover {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}
.product-miniature .product-miniature__quickview-button .material-icons { font-size: 20px; }
.product-miniature__inner:hover .product-miniature__quickview-button,
.product-miniature__inner:has(:focus-visible) .product-miniature__quickview-button {
  transform: none;
  opacity: 1;
  visibility: visible;
}

/* Na DOTYKU pasek ma zniknac — zastepuje go okragly przycisk nizej.
   Hummingbird robi to regula `.product-miniature__quickview-button{display:none}`
   wewnatrz @media (hover:none), ale nasza regula wyzej ma DWIE klasy, a media
   query NIE dodaje specyficznosci — wiec baza przegrywala i na telefonie
   zostawal pasek nad zdjeciem (zgloszenie Olafa, kategoria /4-men).
   Powtarzamy ukrycie na naszym poziomie specyficznosci. */
@media (hover: none) and (pointer: coarse) {
  .product-miniature .product-miniature__quickview-button {
    display: none;
  }
}

/* Wariant DOTYKOWY. Hummingbird renderuje go jako `btn-tertiary`, czyli sam
   obrys w kolorze akcentu — na jasnym zdjeciu ikona #9e8264 na bieli daje
   3.6:1. Formalnie przechodzi prog 3:1 dla elementu UI (WCAG 1.4.11), ale w
   praktyce ginie. Dajemy mu te sama palete co pasek desktopowy: pelne ciemne
   tlo + biala ikona (11.76:1), czytelne nad KAZDYM zdjeciem. */
.product-miniature .product-miniature__quickview-touch {
  background: var(--wh-color-text-primary, #40362e);
  color: var(--wh-color-white, #fff);
  border: 0;
  border-radius: 50%;
  /* Cel dotykowy: 44px to komfortowe minimum (WCAG 2.5.8 wymaga 24px). */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Delikatny cien odcina przycisk od jasnych i ciemnych zdjec jednakowo. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.product-miniature .product-miniature__quickview-touch:hover,
.product-miniature .product-miniature__quickview-touch:focus-visible {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}

.product-miniature .product-miniature__quickview-touch .material-icons {
  font-size: 20px;
}

/* Przycisk dotykowy TYLKO na dotyku. Bez tego renderuje sie takze na desktopie
   i obok paska "Szybki podglad" siedzi drugie, okragle oko — zgloszenie Alexa
   2026-08-03, widoczne na listingu kategorii.
   Symetryczne do reguly wyzej, ktora chowa PASEK na dotyku: intencja jest taka,
   ze pasek nalezy do desktopu (jest hover), a oko do komorek.
   Zmierzone na dev w Chrome: przed regula 8 paskow I 8 przyciskow dotykowych
   naraz, po regule 8 paskow i 0 dotykowych, po cofnieciu znowu 8/8. */
@media (hover: hover) and (pointer: fine) {
  .product-miniature .product-miniature__quickview-touch {
    display: none;
  }
}



/* ============================================================================
   MODALE (wspolne) — quickview, wishlist, koszyk. Tokeny zamiast bootstrapa.
   ============================================================================ */
.modal .modal-content {
  border: 0;
  border-radius: 8px;
}
.modal .modal-header { border-bottom: 0; }
.modal .modal-footer { border-top: 0; }
.modal .modal-title,
.modal h1, .modal h2, .modal h3, .modal h4 {
  font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
  font-size: var(--wh-font-size-h3, 22px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}
.modal .btn-primary,
.modal .btn-secondary,
.modal .btn-tertiary {
  border-radius: 8px;
  padding: max(15px, 1.5rem) max(18px, 1.8rem);
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  line-height: 1.5;
}
.modal .btn-primary {
  background: var(--wh-color-accent, #9e8264);
  border: 1.5px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}
.modal .btn-primary:hover {
  background: var(--wh-color-text-primary, #40362e);
  border-color: var(--wh-color-text-primary, #40362e);
}
.modal .btn-secondary,
.modal .btn-tertiary {
  background: transparent;
  border: 1.5px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
}
.modal .btn-secondary:hover,
.modal .btn-tertiary:hover {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}

/* Quickview: ceny/tytul/flagi jak na karcie produktu */
.quickview .product__name,
.quickview .h1 {
  font-size: var(--wh-font-size-h2, 32px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}
.quickview .product__price,
.quickview .current-price-value {
  font-size: var(--wh-font-size-h3, 22px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-accent, #9e8264);
}
.quickview .regular-price {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-muted, #908981);
  text-decoration: line-through;
}
.quickview .product-flags .badge,
.quickview .product-flags .product-flag {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  border: 0;
  border-radius: 5px;
  padding: max(2px, .2rem) max(6px, .6rem);
}
.quickview .product-flags .badge.discount { background: var(--wh-color-sale, #ff4b4b); }

/* Quickview — reszta typografii (bootstrapowe fs-* daja tu 8-10px) */
.quickview .product__regular-price {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-muted, #908981);
  text-decoration: line-through;
}
.quickview .product__discount-percentage {
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-sale, #ff4b4b);
}
.quickview .product__tax-infos,
.quickview .product__tax-label,
.quickview .product__description {
  font-size: var(--wh-font-size-small, 12px);
  line-height: 1.5;
  color: var(--wh-color-text-muted, #908981);
}

/* Quickview — PODSTAWY formularza (bootstrapowe fs-* i padding daja tu 10px).
   UWAGA: docelowo scalimy to ze stylami atrybutow ze strony produktu
   (praca programisty) — wtedy czesc tych regul zastapi wspolny komponent. */
.quickview .product__manufacturer {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.5;
  color: var(--wh-color-text-muted, #908981);
}
.quickview .form-label,
.quickview .product-variant__legend {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
  margin-bottom: max(8px, .8rem);
}
.quickview select.form-select,
.quickview .form-control {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
  padding: max(12px, 1.2rem) max(15px, 1.5rem);
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: 8px;
  background-color: var(--wh-color-white, #fff);
}
.quickview select.form-select:focus,
.quickview .form-control:focus {
  border-color: var(--wh-color-accent, #9e8264);
  box-shadow: none;
}

/* Bazowy rozmiar i wysokosc pol formularzy.
   Hummingbird ustawia .form-control { font-size: 1rem }, a theme-tokens.css
   ustawia html { font-size: 62.5% }, wiec 1rem daje 10px i wszystkie pola
   renderowaly sie w 10px. Pierwsza poprawka rownala do tokenu tresci (14px),
   ale to nadal za malo — zgloszone w przegladzie przed wdrozeniem (kontakt
   i kod karty podarunkowej). Bierzemy token bazowy (16px):
   - to rozmiar tekstu strony, wiec pola przestaja odstawac,
   - ponizej 16px Safari na iOS przybliza strone przy wejsciu w pole.
   ⚠️ Ta sama przyczyna dotyczy WYSOKOSCI: Bootstrap ma padding .375rem/.75rem,
   co przy korzeniu 10px daje 3,75px i pola wysokie na 31px. Podajemy odstepy
   z tokenow, wiec pole wychodzi ok. 42px — sensowny cel dotyku na telefonie. */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea.form-control {
  font-size: var(--wh-font-size-base, 1.6rem);
  padding: var(--wh-space-sm, 0.8rem) var(--wh-space-md, 1.6rem);
}
/* kafelki wariantow (kolory) */
.quickview .color {
  width: max(24px, 2.4rem);
  height: max(24px, 2.4rem);
  border-radius: 4px;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
}
.quickview .input-color__label--active .color,
.quickview .color.active {
  outline: 1.5px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}
/* stopka modala */
.quickview .quickview__footer {
  border-radius: 0 0 8px 8px;
  padding: max(15px, 1.5rem) max(18px, 1.8rem);
}
.quickview .quickview__footer a,
.quickview .quickview__footer span {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}

/* Wishlist: modul dodaje klase .show (API Bootstrap 4), ale motyw ma CSS
   Bootstrap 5 — bez display/backdrop modal zostaje niewidoczny (klik "nie
   dziala"). Dopelniamy brakujace zachowanie. */
.wishlist-modal.modal.show {
  display: block;
  background: rgba(0, 0, 0, .5);
}
.wishlist-modal .modal-dialog {
  margin-left: auto;
  margin-right: auto;
}
.wishlist-modal .modal-body,
.wishlist-modal p {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}
/* Modul ma w public/wishlist.css regule .wishlist-modal .modal-text
   { font-size: .875rem } o specyficznosci 0-2-0, ktora przebija regule wyzej
   (0-1-1). Przy html { font-size: 62.5% } daje to 8,75px zamiast 14px, jakie
   moduł zakladal przy rootcie 16px. Tekst potwierdzenia usuniecia z listy
   zyczen byl przez to nieczytelny. Prefiks body podnosi specyficznosc,
   zgodnie z konwencja pozostalych nadpisan tego modulu w tym pliku. */
/* Przeglad przed wdrozeniem: „popup Usun produkt z listy zyczen ma za maly font
   tresci". Po poprawce specyficznosci (komentarz wyzej) bylo 14px, ale w oknie
   dialogowym przy tekscie strony 16px nadal odstawalo — rownamy do tokenu
   bazowego. Przyciski mialy 12px (regula modulu) — token tresci daje 14px. */
body .wishlist-modal .modal-text {
  font-size: var(--wh-font-size-base, 1.6rem);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}

/* USP: lista rozciagnieta (space-between) na desktopie (spec Alexa 2026-07-21) */
#wrapper .wh-reassurance.wh-usp-home .wh-reassurance__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 767px) {
  #wrapper .wh-reassurance.wh-usp-home .wh-reassurance__list {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}

/* Blog: obcinanie do 2 linii ma dzialac na LINKU (h2 z -webkit-box gubil
   czesc tekstu), padding zostaje na naglowku */
#wrapper .wh-blog-block--home .wh-blog-card__title {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
#wrapper .wh-blog-block--home .wh-blog-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit;
}

/* Paginacja karuzeli: bullety nie moga sie zlewac */
.wh-carousel-home .swiper-pagination-bullet {
  width: max(10px, 1rem);
  height: max(10px, 1rem);
  margin: 0 max(6px, .6rem) !important;   /* swiper ustawia margin inline */
  background: var(--wh-color-border-subtle, #e4e0da);
  opacity: 1;
}
.wh-carousel-home .swiper-pagination-bullet-active {
  background: var(--wh-color-accent, #9e8264);
}

/* Ikony social w stopce: cel dotykowy 44px */
#footer .wh-storeinfo__social {
  width: max(44px, 4.4rem);
  height: max(44px, 4.4rem);
}

/* Sekcja bloga: rytm jak sasiednie sekcje (front.css modulu daje 48px auto).
   #wrapper — CSS modulu laduje sie PO motywie. */
#wrapper .wh-blog-block {
  margin-top: 4.7rem;
  margin-bottom: 3.4rem;
}

/* Pasek logotypow: rytm sekcji */
#wrapper .wh-logos-home {   /* #wrapper: front.css modulu jest pozniejszy w kaskadzie */
  margin-top: 4.7rem;
  margin-bottom: 4.7rem;
}

/* blockwishlist renderuje modale przez displayFooter, a hummingbird wstawia ten
   hook do `.footer__main-top row` — ukryte okna staja sie wtedy elementami
   grida stopki (puste kolumny/odstepy). Wyjmujemy je z ukladu; same modale maja
   position: fixed, wiec otwieraja sie normalnie. */
#footer .wishlist-add-to,
#footer .wishlist-delete,
#footer .wishlist-create,
#footer .wishlist-login,
#footer .wishlist-toast {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* --- wh_banners: rytm sekcji + tytul jak w sekcjach Figmy (Kategorie itd.) --- */
#wrapper .wh-banners {
  padding: 0;              /* front.css modulu daje 15px 0 */
  margin-top: 4.7rem;
  margin-bottom: 4.3rem;
}
#wrapper .wh-banners__title h2 {
  font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
  /* Token fluid (patrz .wh-textblock h2) — czyste var(). */
  font-size: var(--wh-font-size-h1, 3.8rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--wh-color-text-primary, #40362e);
  margin: 0 0 var(--wh-space-lg, 3.2rem); /* 32px = najblizszy token skali space */
}

/* --- home: normalny flow zamiast grida ---
   _hummingbird.css daje `.page-content--home { display: grid; gap: 2.5rem;
   grid-template-columns: minmax(0,1fr) }`. Dwa problemy:
   1) `gap` dubluje sie z marginesami sekcji,
   2) GRID BLOKUJE KOLAPSOWANIE MARGINESOW — marginesy sasiadujacych sekcji
      SUMUJA sie (np. mb 5.3rem + mt 4.3rem = 9.6rem) zamiast zlac do wiekszego.
   Odstepy miedzysekcyjne reguluja WYLACZNIE marginesy sekcji ustawiane TUTAJ,
   celujac w klase sekcji (pole "Klasa CSS sekcji" w panelu modulu), wiec
   potrzebny jest zwykly przeplyw blokowy, w ktorym marginesy kolapsuja. --- */
.page-content--home {
  display: block;
  gap: 0; /* nieistotne przy display:block — zostawione na wypadek nadpisania display */
}

/* --- wh_reassurance: pasek logotypow na home ---
   Rytm sekcji jak u sasiadow (.wh-textblock / .wh-banners): w rem, po stronie
   motywu. Modul od 1.5.0 nie trzyma juz marginesow w px w bazie — wstrzykiwal je
   jako inline style, ktory BIL te klase (inline > klasa). --- */
.wh-logos-home { margin-top: 6.2rem; margin-bottom: 6.2rem; }

/* ============================================================================
   wh_reassurance — pasek USP na home (dostawa / gwarancja / zwroty)
   Sterowany klasa sekcji "wh-usp-home" (pole "Klasa CSS sekcji" w panelu modulu).
   ============================================================================ */
.wh-usp-home { margin-top: 3.4rem; margin-bottom: 3.4rem; }

/* UWAGA na kaskade: front.css modulu laduje sie PO CSS motywu, wiec przy rownej
   specyficznosci wygrywa modul. Stad podwojna klasa (.wh-reassurance.wh-usp-home)
   — bez tego .wh-reassurance--row wymusza justify-content: center i flex: 1 1 0. */
.wh-reassurance.wh-usp-home .wh-reassurance__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

/* Kafelek: ikona + kolumna tekstu. Padding z ogolnego kafelka zerujemy —
   odstepy sekcji nadaje motyw, nie modul. flex: 0 1 auto (nie 1 1 0 z modulu),
   inaczej kafelki rozciagaja sie na rowno i space-between nie ma czego rozkladac. */
.wh-reassurance.wh-usp-home .wh-reassurance__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(15px, 1.5rem);
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* Ramka ikony 79x79 */
.wh-reassurance.wh-usp-home .wh-reassurance__icon {
  display: block;
  flex: 0 0 auto;
  width: max(79px, 7.9rem);
  height: max(79px, 7.9rem);
}

/* Sam SVG ma wypelnic ramke. Modul trzyma obrazek w naturalnym rozmiarze
   (width: auto; max-width: 100%), przez co ikony o mniejszym viewBox (38/39)
   zostawaly male — te reguly musza go przebic. */
.wh-reassurance.wh-usp-home .wh-reassurance__icon img,
.wh-reassurance.wh-usp-home .wh-reassurance__icon img.wh-reassurance-icon-img,
.wh-reassurance.wh-usp-home .wh-reassurance__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.wh-usp-home .wh-reassurance__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wh-usp-home .wh-reassurance__title {
  font-size: var(--wh-font-size-lg, max(18px, 1.8rem));
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.53;
  color: var(--wh-color-text-primary, #40362e);
}

.wh-usp-home .wh-reassurance__subtitle {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-primary, #40362e);
}

/* Tablet/mobile: zawijanie zamiast sciskania (4 kafelki nie mieszcza sie w rzedzie) */
@media (max-width: 991px) {
  .wh-usp-home .wh-reassurance__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: max(2.4rem, 24px);
  }
}

/* ============================================================================
   wh_blog — sekcja "Najnowsze wpisy na blogu" (home)
   ============================================================================ */

/* Tlo na CALA szerokosc, mimo ze sekcja jest .container (ograniczona max-width).
   box-shadow rozlewa kolor poza kontener, clip-path przycina go do poziomu, zeby
   nie wylal sie w pionie. Bez zmian w markupie modulu i bez wychodzenia z ukladu. */
.wh-blog-block--home {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  box-shadow: 0 0 0 100vmax var(--wh-color-bg-subtle, #f7f7f7);
  clip-path: inset(0 -100vmax);
  padding-top: 5.8rem;
  padding-bottom: 5.8rem;
  margin-top: 6.2rem;
}

#wrapper .wh-blog-block--home .wh-blog-block__title {
  font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
  font-size: var(--wh-font-size-h1, 3.8rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wh-color-text-primary, #40362e);
  margin: 0 0 4.8rem;
}

.wh-blog-block--home .wh-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.wh-blog-block--home .wh-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--wh-color-white, #fff);
  border-radius: max(8px, 0.8rem);
  overflow: hidden; /* zeby obrazek nie wystawal poza zaokraglenie */
}

/* Modul podnosi CALA karte (translateY(-2px)) — zbyt ruchliwe jak na te sekcje.
   Zostaje sam cien jako subtelna informacja zwrotna, bez ruchu. */
.wh-blog-block--home .wh-blog-card:hover {
  transform: none;
}

/* Feature img: pelna szerokosc, bez odstepu u gory.
   Modul daje .wh-blog-card__media staly aspect-ratio 16/9 + gradient jako tlo
   placeholdera. Przy naszym max-height 18.3rem kontener zostawal wyzszy od
   obrazka i gradient przeswitywal pod nim paskiem (52px). Kasujemy oba —
   wysokosc ma wynikac z obrazka. */
.wh-blog-block--home .wh-blog-card__media {
  display: block;
  margin: 0;
  aspect-ratio: auto;
  background: none;
  line-height: 0; /* zero szpary pod obrazkiem (inline baseline) */
}
.wh-blog-block--home .wh-blog-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18.3rem;
  object-fit: cover;
}

/* Autor i data — w tym projekcie karta ich nie pokazuje */
.wh-blog-block--home .wh-blog-card__meta { display: none; }

.wh-blog-block--home .wh-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0; /* odstepy nadaja poszczegolne elementy wg projektu */
}

.wh-blog-block--home .wh-blog-card__title {
  font-size: var(--wh-font-size-lg, max(18px, 1.8rem));
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.33;
  color: var(--wh-color-text-primary, #40362e);
  padding: 3.1rem 2.6rem max(13px, 1.3rem) 2.6rem;
  margin: 0;
  /* maks. 2 linijki — rowna wysokosc kart niezaleznie od dlugosci tytulu */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Tytul = glowny link karty. Modul daje hover w --wh-color-primary, ale w naszej
   palecie to ten sam kolor co tytul (#40362e) => hover byl NIEWIDOCZNY.
   Akcent, jak w przycisku "Czytaj wiecej" — spojna informacja "to jest klikalne". */
.wh-blog-block--home .wh-blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.wh-blog-block--home .wh-blog-card__title a:hover,
.wh-blog-block--home .wh-blog-card__title a:focus-visible {
  color: var(--wh-color-accent, #9e8264);
}

.wh-blog-block--home .wh-blog-card__excerpt {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.61;
  color: var(--wh-color-text-muted, #908981);
  padding: 0 2.6rem;
  margin: 0;
  flex: 1 1 auto; /* przycisk rowno na dole niezaleznie od dlugosci opisu */
  /* 3 widoczne linijki (modul klamruje do 2) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Przycisk "Czytaj wiecej" — wysrodkowany, outline, strzalka SVG obok tekstu */
.wh-blog-block--home .wh-blog-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2.3rem 2.6rem;
  padding: max(15px, 1.5rem) max(10px, 1rem);
  border: 2px solid var(--wh-color-accent, #9e8264);
  border-radius: max(8px, 0.8rem);
  color: var(--wh-color-accent, #9e8264);
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  line-height: normal;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.wh-blog-block--home .wh-blog-card__more:hover,
.wh-blog-block--home .wh-blog-card__more:focus-visible {
  background: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}
.wh-blog-block--home .wh-blog-card__more-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

@media (max-width: 991px) {
  .wh-blog-block--home .wh-blog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ROZWIAZANA ANOMALIA (2026-07-19): hummingbird uzywa CASCADE LAYERS
   (@layer vendors, bs-base, ..., utilities). Dla !important hierarchia sie
   ODWRACA: important z warstwy bije nie-warstwowy important NIEZALEZNIE od
   specyficznosci. Dlatego blok newslettera musi siedziec w @layer utilities
   (ta sama warstwa co utilities Bootstrapa; w obrebie warstwy wygrywa
   pozniejszy source-order = my). Pozycja w pliku NIE byla przyczyna. */

/* ============================================================================
   NEWSLETTER — ps_emailsubscription @ displayFooterBefore.
   Markup: override w child theme (modules/ps_emailsubscription/.../hook/...tpl)
   — tresc po lewej, obrazek po prawej (pojawia sie po wgraniu
   assets/img/newsletter.jpg), przycisk <button> ze strzalka SVG,
   checkbox zgody = natywny hook displayGDPRConsent.
   UWAGA paleta: Figma daje tlo #c6a488, ktorego NIE MA w tokenach — uzywamy
   najblizszego --wh-color-bg-warm; korekta odcienia = theme-tokens.json.
   Cascade layers (kanon: Pulapka - hummingbird cascade layers): do @layer
   utilities ida WYLACZNIE deklaracje !important bijace utility-important
   (bg-body-tertiary, py-*). Cala reszta MUSI byc nie-warstwowa — normal
   w warstwie przegrywa z nie-warstwowym bundlem motywu.
   ============================================================================ */
@layer utilities {
  .wh-newsletter {
    background: var(--wh-color-bg-warm, #c6a488) !important; /* utility bg-* ma !important w warstwie */
    padding: 0 !important;                                   /* utility py-* jw. */
  }
}

/* Kontener sklepu: 1235 + 2x20 padding = 1275 (jak stopka i reszta) */
.wh-newsletter .container {
  max-width: var(--wh-container-max, 127.5rem); /* padding z globalnej .container */
}

/* Tresc | obrazek: space-between + gap 2rem; obrazek na CALA wysokosc sekcji */
.wh-newsletter__inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
}

/* Tresc po lewej: oddech 7.8rem gora/dol */
.wh-newsletter__content {
  padding: 7.8rem 0;
  min-width: 0;
  flex: 1 1 auto; /* tresc rosnie; bez tego flex liczy bazie 0 i lamie tekst co slowo */
}

/* Tytul: 32px (h2 z palety) semibold 1.2, bialy, mb 2.4rem.
   max-width lamie po "informacje" jak w Figmie — bez hardcode <br> (multilang). */
.wh-newsletter__title {
  font-family: var(--wh-font-heading, var(--wh-font-body, sans-serif));
  font-size: var(--wh-font-size-h2, 32px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wh-color-text-inverse, #fff);
  margin: 0 0 2.4rem;
  max-width: 47rem;
}

/* Rzad: input + przycisk, odstep max(10px, 1rem) */
.wh-newsletter__row {
  display: flex;
  align-items: stretch;
  gap: max(10px, 1rem);
  flex-wrap: wrap;
}

/* Input: padding 1.5rem 1.8rem, 14 regular #908981, radius 8, border 2px white */
.wh-newsletter .wh-newsletter__input {
  background: var(--wh-color-white, #fff);
  border: 2px solid var(--wh-color-white, #fff);
  border-radius: 8px;
  padding: 1.5rem 1.8rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
  max-width: 37.1rem;
  flex: 1 1 26rem;
  min-width: 0;
}
.wh-newsletter .wh-newsletter__input::placeholder { color: var(--wh-color-text-muted, #908981); }
.wh-newsletter .wh-newsletter__input:focus {
  outline: none;
  color: var(--wh-color-text-primary, #40362e);
}

/* Przycisk: border 2px white, radius 8, padding 1.5rem 1.8rem, 14 medium bialy,
   strzalka SVG w odstepie max(10px, 1rem) */
.wh-newsletter__submit {
  display: inline-flex;
  align-items: center;
  gap: max(10px, 1rem);
  background: transparent;
  border: 2px solid var(--wh-color-white, #fff);
  border-radius: 8px;
  padding: 1.5rem 1.8rem;
  font-family: var(--wh-font-body, sans-serif);
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-white, #fff);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wh-newsletter__submit svg { flex: 0 0 auto; }
.wh-newsletter__submit:hover {
  background: var(--wh-color-white, #fff);
  color: var(--wh-color-text-primary, #40362e);
}
.wh-newsletter__submit:hover svg path { fill: var(--wh-color-text-primary, #40362e); }

/* Zgody pod inputami: odstep max(18px, 1.8rem); tekst 12 regular bialy */
.wh-newsletter__legal { margin-top: max(18px, 1.8rem); }
.wh-newsletter__legal,
.wh-newsletter__conditions,
.wh-newsletter__gdpr,
.wh-newsletter__gdpr label {
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-inverse, #fff);
}
.wh-newsletter__conditions { margin: 0; }
.wh-newsletter__gdpr a { color: var(--wh-color-text-inverse, #fff); text-decoration: underline; }
/* checkbox zgody (psgdpr) — domyslny wyglad kontrolki, poprawiamy tylko odstep
   i wyrownanie do pierwszej linii tekstu */
.wh-newsletter__gdpr label,
.wh-newsletter__gdpr .psgdpr_consent_message {
  display: flex;
  align-items: flex-start;
  gap: max(8px, .8rem);
  margin: 0;
}
.wh-newsletter__gdpr input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: .3rem;
  accent-color: var(--wh-color-text-primary, #40362e);
}

/* psgdpr renderuje input i label jako RODZENSTWO wewnatrz <span class="form-check">,
   a nie input w srodku label. Reguly wyzej ustawiaja flex na label, wiec do odstepu
   miedzy kontrolka a tekstem nigdy sie nie stosowaly. Kontenerem flex musi byc
   .form-check. Dodatkowo .form-check jest tu elementem <span>, czyli inline, co
   rozjezdza uklad na waskich ekranach. */
.wh-newsletter__gdpr .form-check {
  display: flex;
  align-items: flex-start;
  gap: max(8px, .8rem);
  padding-left: 0;
  margin: 0;
}
.wh-newsletter__gdpr .form-check .form-check-input {
  flex: 0 0 auto;
  float: none;
  margin: .3rem 0 0;
}

/* Odstep zgody od informacji prawnej, ktora idzie zaraz pod nia.
   Bylo 10px — w przegladzie przed wdrozeniem zgloszono, ze zgoda i zdanie
   "Mozesz zrezygnowac w kazdej chwili..." zlewaja sie w jeden blok tekstu.
   Token odstepu sredniego (16px) rozdziela je czytelnie. */
.wh-newsletter__conditions { margin-top: var(--wh-space-md, 1.6rem); }

/* Etykieta zgody jest teraz klikalna w calosci (atrybut `for` dopinany
   w szablonie) — kursor ma to pokazywac. */
.wh-newsletter__gdpr .psgdpr_consent_message { cursor: pointer; }

/* Blok newslettera siedzi w .footer__before, wiec styka sie bezposrednio z
   sekcja tresci: zmierzony odstep to 0px. Na stronach ogolnych (kontakt, CMS)
   tresc konczy sie bez wlasnego tla i paddingu, wiec formularz dotyka
   newslettera. Strona glowna celowo pominieta: tam ostatnia sekcja ma wlasny
   uklad i odstep wymaga oceny wizualnej. */
.page-content--general { margin-bottom: max(40px, 4rem); }

/* Ponizej 474px: input i przycisk w kolumnie, przycisk na cala szerokosc
   kontenera, tresc wysrodkowana zgodnie z projektem. */
@media (max-width: 473.98px) {
  .wh-newsletter__row { flex-direction: column; align-items: stretch; }
  .wh-newsletter .wh-newsletter__input { max-width: none; flex: 1 1 auto; }
  .wh-newsletter__submit { width: 100%; justify-content: center; }
  .wh-newsletter__content { text-align: center; }
}

/* Komunikaty stanu — czytelne na cieplym tle */
.wh-newsletter .alert { margin-bottom: max(10px, 1rem); }

/* Obrazek po prawej: max 51rem (41.3%), cala wysokosc sekcji */
.wh-newsletter__media {
  flex: 0 1 51rem;
  max-width: 41.3%;
  align-self: stretch;
  min-width: 0;
}
.wh-newsletter__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: kolumna, obrazek pod trescia (naturalna wysokosc) */
@media (max-width: 991px) {
  .wh-newsletter__inner { flex-direction: column; }
  .wh-newsletter__content { padding: max(4rem, 40px) 0; }
  .wh-newsletter__media { max-width: none; flex: 0 0 auto; }
  .wh-newsletter__media img { height: auto; }
}

/* ============================================================================
   GLOBALNE reguly promowane od Olafa (single-produkt, proj 180 develop 2026-07-21):
   home gap, CTA .btn-primary, alerty #notifications. Uzywaja --wh-* (brand).
   ============================================================================ */
/* --- home: zeruj grid-gap page-content--home ---
   _hummingbird.css daje .page-content--home { gap: 2.5rem } — dublowaloby sie
   z marginesami sekcji (wh-textblock/wh-banners: mt 4.3rem / mb 5.3rem).
   Odstepy miedzysekcyjne reguluja WYLACZNIE marginesy sekcji. --- */
.page-content--home { gap: 0; }

/* --- CTA wg makiety (Dodaj do koszyka): outline 2px w akcencie, wieksze
   zaokraglenie i padding, odstep ikona-tekst. Ikona SVG w przycisku ma
   fill=currentColor, wiec kolory ponizej barwia tez ikone. --- */
.btn-primary,
.btn.btn-primary {
  width: fit-content;
  background: transparent;
  border: 2px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: var(--wh-space-md, 1.6rem) var(--wh-space-big, 2.7rem);
  font-weight: var(--wh-font-weight-medium, 500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wh-space-small, 1.2rem);
  font-size: var(--wh-font-size-body, 1.4rem);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--wh-color-accent, #9e8264);
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-white, #fff);
}

/* Wyjatek jak w sekcji "Przyciski / CTA": na cieplym/ciemnym tle bialy
   outline — musi byc PO bloku wyzej, zeby odzyskac pierwszenstwo kaskady. */
.section-warm .btn.btn-primary,
#footer .btn.btn-primary {
  border-color: var(--wh-color-white, #fff);
  color: var(--wh-color-white, #fff);
}

.section-warm .btn.btn-primary:hover,
#footer .btn.btn-primary:hover {
  background: var(--wh-color-white, #fff);
  color: var(--wh-color-primary, #40362e);
}

/* --- Alerty / powiadomienia (#notifications, np. "Twoj koszyk zawiera...") ---
   Bootstrap maluje alerty przez zmienne --bs-alert-* (bg/color/border) —
   podmieniamy ZMIENNE na tokeny zamiast nadpisywac reguly (zero walki
   z kaskada/@layer). Bazowa geometria wspolna dla wszystkich wariantow. */
#notifications .alert {
  border-radius: var(--wh-radius-md, 0.8rem);
  font-size: var(--wh-font-size-body, 1.4rem);
  border-left: 3px solid var(--wh-color-accent, #9e8264);
  margin-top: var(--wh-space-md, 1.6rem);
}

/* alert-info (niebieski bootstrap) → cieple neutralne + akcent brandu */
#notifications .alert-info {
  --bs-alert-bg: var(--wh-color-bg-subtle, #f7f7f7);
  --bs-alert-color: var(--wh-color-text-primary, #40362e);
  --bs-alert-border-color: var(--wh-color-border-subtle, #e4e0da);
  --bs-alert-link-color: var(--wh-color-accent, #9e8264);
}

/* alert ma tabindex=0 (fokus po akcji) — obrys w akcencie, spojnie z galeria */
#notifications .alert:focus-visible {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .col-lg-3 > .account-menu--sidebar {
    position: sticky;
    top: 24rem;
    transition: top 0.32s ease;
  }
  body:has(#header.wh-header--compact) .col-lg-3 > .account-menu--sidebar { top: 6rem; }
}
.row:has(> .col-lg-3 > .account-menu--sidebar) {
  padding-block-end: var(--wh-space-xl, 6.4rem);
}
.row:has(.account-menu--sidebar) .page-title-section { font-size: var(--wh-font-size-h2, 3.2rem); }
.page-content--customer { font-size: var(--wh-font-size-body, 1.4rem); }

.account-menu__title {
  font-size: var(--wh-font-size-h3, 2.2rem);
  margin-bottom: var(--wh-space-md, 1.6rem);
}
.account-menu--sidebar { gap: 0.4rem; }
.account-menu--sidebar .account-menu__link {
  color: var(--wh-color-text-primary, #40362e);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1.1rem 1.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  gap: 1rem;
}
.account-menu--sidebar .account-menu__link:hover {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-primary, #40362e);
}
.account-menu--sidebar .account-menu__link--active {
  background: var(--st-accent-light, #f0e9e2);
  color: var(--wh-color-primary, #40362e);
  font-weight: var(--wh-font-weight-semibold, 600);
}
.account-menu__icon { color: var(--wh-color-accent, #9e8264); }
.account-menu--sidebar .account-menu__icon { font-size: 2rem; }
.account-menu--sidebar .account-menu__link--signout,
.account-menu--sidebar .account-menu__link--signout:hover { color: var(--wh-color-semantic-danger, #dc2626); }
.account-menu__link--signout .account-menu__icon { color: inherit; }

.account-menu--main { gap: var(--wh-space-md, 1.6rem); }
.account-menu--main .account-menu__link {
  background: var(--wh-color-bg-base, #fff);
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 2.4rem 2rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  transition: border-color var(--wh-duration-fast, 150ms) ease, box-shadow var(--wh-duration-fast, 150ms) ease;
}
.account-menu--main .account-menu__link:hover {
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-primary, #40362e);
  box-shadow: var(--wh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}
.account-menu--main .account-menu__icon { font-size: 3.2rem; }
.account-menu--main .account-menu__link--signout,
.account-menu--main .account-menu__link--signout:hover { color: var(--wh-color-semantic-danger, #dc2626); }

.account-menu__back {
  border: 0;
  background: transparent;
  color: var(--wh-color-text-muted, #908981);
  font-size: var(--wh-font-size-body, 1.4rem);
  gap: 0.6rem;
  align-items: center;
  padding-inline: 0;
}
.account-menu__back:hover,
.account-menu__back:focus-visible {
  background: transparent;
  color: var(--wh-color-accent, #9e8264);
}

.order-history__status.badge,
.order-status__table .badge {
  background-color: var(--wh-color-bg-subtle, #f7f7f7) !important;
  color: var(--wh-color-text-primary, #40362e) !important;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-pill, 99.9rem);
  padding: 0.5rem 1.2rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  font-weight: var(--wh-font-weight-medium, 500);
}

.order-history__cell--actions .btn,
.order-infos__actions .btn,
#exportDataToCsv,
#exportDataToPdf {
  font-size: var(--wh-font-size-small, 1.2rem);
}
.order-history__cell--actions .btn .material-icons,
.order-infos__actions .btn .material-icons,
#exportDataToCsv .material-icons,
#exportDataToPdf .material-icons {
  font-size: 1.6rem;
  vertical-align: text-bottom;
}

.wishlist-container-header,
.wishlist-products-container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wh-space-md, 1.6rem);
  margin-block-end: var(--wh-space-mid, 2rem);
}
.wishlist-container-header h1,
.wishlist-products-container-header h1 {
  font-size: var(--wh-font-size-h2, 3.2rem);
  margin: 0;
}
@layer utilities {
  .wishlist-add-to-new.text-primary,
  .wishlist-add-to-new.text-primary-emphasis,
  .wishlist-footer-links a.text-primary { color: var(--wh-color-accent, #9e8264) !important; }
  .wishlist-add-to-new.text-primary:hover,
  .wishlist-add-to-new.text-primary-emphasis:hover,
  .wishlist-footer-links a.text-primary:hover { color: var(--wh-color-primary, #40362e) !important; }
}
body .wishlist-add-to-new {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  font-weight: var(--wh-font-weight-medium, 500);
  cursor: pointer;
}
body .wishlist-add-to-new .material-icons {
  font-size: 1.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

#module-blockwishlist-lists .page-content.card,
body#view .page-content.card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
body#view .wishlist-footer-links a:last-child:not(:first-child) { display: none; }
.wishlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wh-space-md, 1.6rem);
}
body .wishlist-list-item {
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-base, #fff);
  transition: border-color var(--wh-duration-fast, 150ms) ease, box-shadow var(--wh-duration-fast, 150ms) ease;
}
body .wishlist-list-item:hover {
  border-color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-bg-base, #fff);
  box-shadow: var(--wh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}
body .wishlist-list-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wh-space-md, 1.6rem);
  padding: 1.8rem 2rem;
  cursor: pointer;
}
body .wishlist-list-item-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
}
body .wishlist-list-item-title span {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
}
body .wishlist-list-item-right { display: flex; gap: 0.4rem; }
body .wishlist-list-item-right button {
  border: 0;
  background: transparent;
  color: var(--wh-color-text-muted, #908981);
  padding: 0.8rem;
  border-radius: var(--wh-radius-sm, 0.4rem);
  line-height: 1;
}
body .wishlist-list-item-right button:hover,
body .wishlist-list-item-right button:focus-visible {
  color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-bg-subtle, #f7f7f7);
}
body .wishlist-list-item-right .material-icons { font-size: 2rem; }
.wishlist-list-empty {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
body .wishlist-footer-links {
  display: flex;
  gap: var(--wh-space-big, 2.7rem);
  margin-block-start: var(--wh-space-mid, 2rem);
}
body .wishlist-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--wh-font-size-small, 1.2rem);
}
body .wishlist-footer-links .material-icons { font-size: 1.8rem; }
#module-blockwishlist-view .wishlist-footer-links,
#module-blockwishlist-lists .wishlist-footer-links { margin-block-end: var(--wh-space-xl, 6.4rem); }

body .wishlist-products-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: var(--wh-space-mid, 2rem);
}
body .wishlist-products-item {
  margin: 0;
  min-width: 0;
  width: auto;
}
body .wishlist-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wh-color-white, #fff);
  border: 2px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: 8px;
  padding: 3.3rem 1.5rem 1.7rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
body .wishlist-product:hover { box-shadow: var(--wh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1)); }
body .wishlist-product { max-width: 100%; }
body .wishlist-product-link { display: block; color: inherit; }
body .wishlist-product-image {
  overflow: hidden;
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 2rem;
}
body .wishlist-product-image img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  transform: none;
  transition: transform 0.4s ease;
}
body .wishlist-product:hover .wishlist-product-image img,
body .wishlist-product .wishlist-product-link:hover img { transform: scale(1.04); }
body .wishlist-product-image .wishlist-product-unavailable { opacity: 0.5; }
body .wishlist-product-right { padding: 0 1.2rem; }
body .wishlist-product-title {
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
  margin: 0 0 max(7px, 0.7rem);
}
body .wishlist-product-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1rem;
  font-family: var(--wh-font-body, 'Poppins', sans-serif);
  font-size: var(--wh-font-size-h3, 2.2rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-accent, #9e8264);
  margin: 0 0 max(7px, 0.7rem);
}
body .wishlist-product-price-promo {
  order: 2;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-muted, #908981);
  text-decoration: line-through;
}
body .wishlist-product-availability {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-muted, #908981);
  margin: 0;
}
body .wishlist-product-availability .material-icons { font-size: 1.6rem; }
body .wishlist-product-combinations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
/* Linia atrybutow („Rozmiar : S - Kolor : Bialy - Ilosc : 1").
   Zgloszenie z przegladu przed wdrozeniem: „informacje o produkcie sa slabo
   czytelne — przydalyby sie wieksze odstepy lub uklad vertical".
   Zmierzone bylo 12px przy interlinii 12,5px, do tego bez zawijania — tekst
   zlewal sie w jedna kreske. Podnosimy do tokenu tresci i dajemy oddech.
   ⚠️ Ukladu pionowego NIE da sie tu zrobic czystym CSS: modul rozdziela
   atrybuty golymi znakami „-" miedzy <span>-ami (to zwykle wezly tekstowe,
   nie elementy), wiec `display:block` zostawilby myslniki w osobnych liniach. */
body .wishlist-product-combinations-text {
  font-size: var(--wh-font-size-body, 1.4rem);
  line-height: 1.6;
  white-space: normal;
  color: var(--wh-color-text-muted, #908981);
  margin: var(--wh-space-sm, 0.8rem) 0 0;
}
body .wishlist-product-combinations button {
  border: 0;
  background: transparent;
  color: var(--wh-color-text-muted, #908981);
  padding: 0.6rem;
  border-radius: var(--wh-radius-sm, 0.4rem);
  line-height: 1;
}
body .wishlist-product-combinations button:hover {
  color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-bg-subtle, #f7f7f7);
}
body .wishlist-product-combinations button .material-icons { font-size: 1.8rem; }
body .wishlist-product-bottom {
  margin-block-start: auto;
  padding: var(--wh-space-small, 1.2rem) 1.2rem 0;
}
body .wishlist-product-bottom .wishlist-product-addtocart {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
/* Ikona koszyka na przycisku w liscie zyczen.
   ⚠️ Bylo `content: "\e8cc"` z Material Icons, a blockwishlist renderuje w tym
   przycisku WLASNA ligature <i class="material-icons">shopping_cart</i> — wychodzily
   DWIE ikony obok siebie, do tego inne niz w naglowku (zgloszenie z przegladu przed
   wdrozeniem: „wyswietla dwie ikonki koszyka, sama ikonka jest inna niz w nawigacji").
   Teraz: ligatura modulu schowana, a ::before dostaje TEN SAM rysunek SVG co koszyk
   w naglowku (ta sama maska), wiec caly sklep ma jedna ikone koszyka.
   Kolor z currentColor — idzie za kolorem przycisku, wiec zmiana brandu dziala. */
body .wishlist-product-addtocart .material-icons { display: none; }
body .wishlist-product-addtocart::before {
  content: '';
  display: inline-block;
  width: max(1.8rem, 18px);
  height: max(1.8rem, 18px);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4508 6.66667C17.0349 2.9225 13.8541 0 9.99992 0C6.14575 0 2.96492 2.9225 2.54909 6.66667H-0.0175781L1.58076 17.8542C1.75576 19.0775 2.81909 20 4.05576 20H15.9441C17.1799 20 18.2441 19.0775 18.4191 17.8542L20.0174 6.66667H17.4508ZM9.99992 1.66667C12.9324 1.66667 15.3599 3.845 15.7666 6.66667H4.23325C4.63992 3.845 7.06742 1.66667 9.99992 1.66667ZM16.7683 17.6183C16.7108 18.0258 16.3558 18.3333 15.9441 18.3333H4.05576C3.64409 18.3333 3.28909 18.0258 3.23159 17.6183L1.90492 8.33333H18.0949L16.7683 17.6183ZM10.8333 16.6667H9.16659V10H10.8333V16.6667ZM14.9999 16.6667H13.3333V10H14.9999V16.6667ZM6.66659 16.6667H4.99992V10H6.66659V16.6667Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4508 6.66667C17.0349 2.9225 13.8541 0 9.99992 0C6.14575 0 2.96492 2.9225 2.54909 6.66667H-0.0175781L1.58076 17.8542C1.75576 19.0775 2.81909 20 4.05576 20H15.9441C17.1799 20 18.2441 19.0775 18.4191 17.8542L20.0174 6.66667H17.4508ZM9.99992 1.66667C12.9324 1.66667 15.3599 3.845 15.7666 6.66667H4.23325C4.63992 3.845 7.06742 1.66667 9.99992 1.66667ZM16.7683 17.6183C16.7108 18.0258 16.3558 18.3333 15.9441 18.3333H4.05576C3.64409 18.3333 3.28909 18.0258 3.23159 17.6183L1.90492 8.33333H18.0949L16.7683 17.6183ZM10.8333 16.6667H9.16659V10H10.8333V16.6667ZM14.9999 16.6667H13.3333V10H14.9999V16.6667ZM6.66659 16.6667H4.99992V10H6.66659V16.6667Z'/%3E%3C/svg%3E");
}
@layer ps-modules {
  .wishlist-product .wishlist-button-add {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--wh-color-text-primary, #40362e) !important;
    color: var(--wh-color-white, #fff) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    z-index: 2;
  }
  .wishlist-product .wishlist-button-add:hover {
    background: var(--wh-color-accent, #9e8264) !important;
    color: var(--wh-color-white, #fff) !important;
  }
  .wishlist-product .wishlist-button-add i,
  .wishlist-product .wishlist-button-add .material-icons {
    color: var(--wh-color-white, #fff) !important;
    font-size: 20px;
  }
}

body .wishlist-products-count {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
}
body .wishlist-products-container-header .sort-by-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}
body .wishlist-products-container-header .sort-by {
  width: auto;
  padding: 0;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-muted, #908981);
  white-space: nowrap;
}
body .wishlist-products-container-header .products-sort-order {
  width: auto;
  padding: 0;
  position: relative;
}
body .wishlist-products-container-header .select-title {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 0.9rem 1.4rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-primary, #40362e);
  background: var(--wh-color-bg-base, #fff);
  cursor: pointer;
  white-space: nowrap;
}
body .wishlist-products-container-header .select-title:hover,
body .wishlist-products-container-header .show .select-title { border-color: var(--wh-color-accent, #9e8264); }
body .wishlist-products-container-header .select-title .material-icons {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--wh-color-text-muted, #908981);
}
body .wishlist-products-container-header .products-sort-order .dropdown-menu {
  min-width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-base, #fff);
  box-shadow: var(--wh-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  inset-inline-start: auto;
  margin-block-start: 0.4rem;
  z-index: var(--wh-z-index-dropdown, 300);
}
body .products-sort-order.show .dropdown-menu { display: block; }
body .wishlist-products-container-header .dropdown-menu .select-list {
  display: block;
  padding: 0.8rem 1.2rem;
  border-radius: var(--wh-radius-sm, 0.4rem);
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-primary, #40362e);
  cursor: pointer;
  white-space: nowrap;
}
body .wishlist-products-container-header .dropdown-menu .select-list:hover {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-primary, #40362e);
}

body .wishlist-add-to .wishlist-modal:not(.show),
body .wishlist-login .wishlist-modal:not(.show),
body .wishlist-create .wishlist-modal:not(.show),
body .wishlist-rename .wishlist-modal:not(.show),
body .wishlist-delete .wishlist-modal:not(.show),
body .wishlist-share .wishlist-modal:not(.show) {
  display: none !important;
}
body .wishlist-add-to .modal-backdrop:not(.show),
body .wishlist-login .modal-backdrop:not(.show),
body .wishlist-create .modal-backdrop:not(.show),
body .wishlist-rename .modal-backdrop:not(.show),
body .wishlist-delete .modal-backdrop:not(.show),
body .wishlist-share .modal-backdrop:not(.show) {
  display: none !important;
  pointer-events: none !important;
}
body .wishlist-modal .modal-content {
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  box-shadow: var(--wh-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}
body .wishlist-modal .modal-header { border-bottom-color: var(--wh-color-border-subtle, #e4e0da); }
body .wishlist-modal .modal-footer { border-top-color: var(--wh-color-border-subtle, #e4e0da); }
body .wishlist-modal .modal-title {
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-primary, #40362e);
}
body .wishlist-modal .form-label {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-text-primary, #40362e);
}
body .wishlist-modal .form-control,
body .wishlist-modal .modal-body .form-group .form-control {
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1.1rem 1.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
  background: var(--wh-color-bg-base, #fff);
  box-shadow: none;
  height: auto;
}
body .wishlist-modal .form-control:focus,
body .wishlist-modal .modal-body .form-group .form-control:focus {
  border-color: var(--wh-color-accent, #9e8264);
  outline: none;
}
/* Bylo --wh-font-size-small (12px) — razem z trescia popupu odbieralo mu
   czytelnosc (zgloszenie z przegladu przed wdrozeniem). Token tresci = 14px. */
body .wishlist-modal .modal-footer .btn.btn-secondary,
body .wishlist-modal .modal-footer .btn.btn-primary { font-size: var(--wh-font-size-body, 1.4rem); }
body .wishlist-modal .modal-footer .modal-cancel.btn.btn-secondary {
  background: transparent;
  border: 0;
  color: var(--wh-color-primary, #40362e);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
body .wishlist-modal .modal-footer .modal-cancel.btn.btn-secondary:hover { color: var(--wh-color-accent, #9e8264); }
body .wishlist-modal .modal-footer .btn.btn-primary {
  background: var(--wh-color-accent, #9e8264);
  border: 2px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-inverse, #fff);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1rem 1.8rem;
}
body .wishlist-modal .modal-footer .btn.btn-primary:hover,
body .wishlist-modal .modal-footer .btn.btn-primary:focus-visible {
  background: var(--wh-color-primary, #40362e);
  border-color: var(--wh-color-primary, #40362e);
  color: var(--wh-color-text-inverse, #fff);
}
#footer .wishlist-modal .modal-cancel.btn {
  color: var(--wh-color-primary, #40362e);
  border-color: transparent;
  background: transparent;
}
#footer .wishlist-modal .modal-cancel.btn:hover,
#footer .wishlist-modal .modal-cancel.btn:focus-visible {
  color: var(--wh-color-accent, #9e8264);
  background: transparent;
}
#footer .wishlist-modal .modal-footer .btn.btn-primary {
  color: var(--wh-color-text-inverse, #fff);
  border-color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-accent, #9e8264);
}
#footer .wishlist-modal .modal-footer .btn.btn-primary:hover,
#footer .wishlist-modal .modal-footer .btn.btn-primary:focus-visible {
  background: var(--wh-color-primary, #40362e);
  border-color: var(--wh-color-primary, #40362e);
  color: var(--wh-color-text-inverse, #fff);
}
#footer .wishlist-modal .form-label { color: var(--wh-color-text-primary, #40362e); }

body .wishlist-add-to .modal-header { padding: 1.8rem 2rem 1.2rem; }
body .wishlist-add-to .modal-body { padding: 1.6rem 2rem 0.4rem; }
body .wishlist-add-to .modal-footer { padding: 1.2rem 2rem 1.6rem; }
body .wishlist-add-to .modal-dialog { max-width: 40rem; }
body .wishlist-add-to .wishlist-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .wishlist-add-to .wishlist-list-item {
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1.2rem 1.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-text-primary, #40362e);
  cursor: pointer;
  transition: border-color var(--wh-duration-fast, 150ms) ease, background var(--wh-duration-fast, 150ms) ease;
}
body .wishlist-add-to .wishlist-list-item:hover {
  border-color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-bg-subtle, #f7f7f7);
  box-shadow: none;
}
body .wishlist-add-to .wishlist-list-empty {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
body .wishlist-add-to .modal-footer { border-top: 1px solid var(--wh-color-border-subtle, #e4e0da); }
body .wishlist-add-to .wishlist-add-to-new {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-accent, #9e8264);
}
body .wishlist-add-to .wishlist-add-to-new:hover {
  color: var(--wh-color-primary, #40362e);
  opacity: 1;
}
body .wishlist-add-to .wishlist-add-to-new i,
body .wishlist-add-to .wishlist-add-to-new .material-icons {
  color: var(--wh-color-accent, #9e8264);
  font-size: 1.8rem;
  margin: 0;
  line-height: 1;
}
body .wishlist-add-to .wishlist-list-item p,
#footer .wishlist-add-to .wishlist-list-item p {
  font-size: var(--wh-font-size-body, 1.4rem);
  margin: 0;
  line-height: 1.4;
}
@layer bs-base {
  .wishlist-add-to-new.text-primary-emphasis,
  .wishlist-add-to-new .text-primary-emphasis {
    color: var(--wh-color-accent, #9e8264) !important;
  }
  .wishlist-add-to-new.text-primary-emphasis:hover,
  .wishlist-add-to-new:hover .text-primary-emphasis {
    color: var(--wh-color-primary, #40362e) !important;
  }
}

body .wishlist-toast:not(.isActive) { display: none !important; }
body .wishlist-toast {
  background: var(--wh-color-bg-base, #fff);
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-left: 3px solid var(--wh-color-accent, #9e8264);
  border-radius: var(--wh-radius-md, 0.8rem);
  box-shadow: var(--wh-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  z-index: var(--wh-z-index-toast, 500);
}
body .wishlist-toast.success {
  background: var(--wh-color-bg-base, #fff);
  border-color: var(--wh-color-border-subtle, #e4e0da);
  border-left-color: var(--wh-color-semantic-success, #16a34a);
}
body .wishlist-toast.error {
  background: var(--wh-color-bg-base, #fff);
  border-color: var(--wh-color-border-subtle, #e4e0da);
  border-left-color: var(--wh-color-semantic-danger, #dc2626);
}
body .wishlist-toast .wishlist-toast-text,
body .wishlist-toast.success .wishlist-toast-text,
body .wishlist-toast.error .wishlist-toast-text {
  color: var(--wh-color-text-primary, #40362e);
  font-size: var(--wh-font-size-body, 1.4rem);
}

.wh-withdrawal { font-size: var(--wh-font-size-body, 1.4rem); }
.wh-withdrawal-form,
.wh-withdrawal-guest { margin-block-end: var(--wh-space-xl, 6.4rem); }
.wh-withdrawal h4 {
  font-size: var(--wh-font-size-h3, 2.2rem);
  margin: var(--wh-space-lg, 3.2rem) 0 var(--wh-space-md, 1.6rem);
}
.wh-withdrawal legend {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-primary, #40362e);
  border: 0;
  margin-block-end: var(--wh-space-small, 1.2rem);
}
.wh-withdrawal__intro,
.wh-withdrawal__outro {
  color: var(--wh-color-text-muted, #908981);
  line-height: 1.6;
  margin-block-end: var(--wh-space-mid, 2rem);
}
.wh-withdrawal__order-meta {
  font-size: var(--wh-font-size-base, 1.6rem);
  margin-block-end: var(--wh-space-mid, 2rem);
}
.wh-withdrawal .table {
  border-color: var(--wh-color-border-subtle, #e4e0da);
  font-size: var(--wh-font-size-body, 1.4rem);
}
.wh-withdrawal .table th {
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
}
.wh-withdrawal .table th,
.wh-withdrawal .table td {
  padding: 1.2rem 1.4rem;
  vertical-align: middle;
  border-color: var(--wh-color-border-subtle, #e4e0da);
}
.wh-withdrawal .badge {
  border-radius: var(--wh-radius-pill, 99.9rem);
  padding: 0.5rem 1.2rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  font-weight: var(--wh-font-weight-medium, 500);
  background-color: var(--wh-color-secondary, #908981);
}
.wh-withdrawal__product--excluded { color: var(--wh-color-text-muted, #908981); }
.wh-withdrawal .form-group { margin-block-end: var(--wh-space-mid, 2rem); }
.wh-withdrawal .form-group label {
  display: block;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  color: var(--wh-color-text-primary, #40362e);
  margin-block-end: 0.6rem;
}
.wh-withdrawal .form-control {
  padding: 1.1rem 1.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  box-shadow: none;
  height: auto;
}
.wh-withdrawal .form-control:focus { border-color: var(--wh-color-accent, #9e8264); outline: none; }
.wh-withdrawal .wh-qty { max-width: 9rem; }
.wh-withdrawal__submit.btn-primary {
  background: var(--wh-color-accent, #9e8264);
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-inverse, #fff);
  padding: 1.3rem 2.8rem;
}
.wh-withdrawal__submit.btn-primary:hover,
.wh-withdrawal__submit.btn-primary:focus-visible {
  background: var(--wh-color-primary, #40362e);
  border-color: var(--wh-color-primary, #40362e);
  color: var(--wh-color-text-inverse, #fff);
}
.wishlist-list .wishlist-list-item:hover .wishlist-list-item-title {
  color: var(--wh-color-accent, #9e8264);
}

body .page-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  margin: var(--wh-space-lg, 3.2rem) 0 0;
  padding: 0;
}
body .page-list > li { margin: 0; }
body .page-list > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  border-radius: var(--wh-radius-md, 0.8rem);
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}
body .page-list > li > a:hover,
body .page-list > li > a:focus-visible {
  color: var(--wh-color-accent, #9e8264);
  background: transparent;
  text-decoration: none;
}
body .page-list > li.current > a,
body .page-list > li > a.disabled {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-text-primary, #40362e);
  font-weight: var(--wh-font-weight-medium, 500);
  cursor: default;
}
body .page-list > li > a.next span,
body .page-list > li > a.previous span {
  font-size: 0;
  display: inline-flex;
  align-items: center;
}
body .page-list > li > a.next .material-icons,
body .page-list > li > a.previous .material-icons { font-size: 2rem; }

#blockcart-modal .modal-dialog { max-width: 72rem; }
#blockcart-modal .modal-content {
  border: 0;
  border-radius: var(--wh-radius-lg, 1.2rem);
  box-shadow: var(--wh-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.12));
}
#blockcart-modal .modal-header {
  border-bottom: 1px solid var(--wh-color-border-subtle, #e4e0da);
  padding: 1.8rem 2.4rem 1.4rem;
  align-items: center;
}
#blockcart-modal .blockcart-modal__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
}
#blockcart-modal .blockcart-modal__title-icon {
  font-size: 2.2rem;
  color: var(--wh-color-semantic-success, #16a34a);
}
#blockcart-modal .modal-body { padding: 2.4rem; }
#blockcart-modal .blockcart-modal__image {
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-subtle, #f7f7f7);
}
#blockcart-modal .blockcart-modal__name {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin-bottom: 0.6rem;
}
#blockcart-modal .blockcart-modal__price {
  font-size: var(--wh-font-size-h3, 2.2rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-accent, #9e8264);
  margin-bottom: 0.6rem;
}
#blockcart-modal .blockcart-modal__property,
#blockcart-modal .blockcart-modal__quantity {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
#blockcart-modal .blockcart-modal__summary {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 2rem;
}
#blockcart-modal .blockcart-modal__nb-products {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--wh-color-border-subtle, #e4e0da);
}
#blockcart-modal .blockcart-modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
  margin-bottom: 0.6rem;
}
#blockcart-modal .blockcart-modal__total--bold {
  font-weight: var(--wh-font-weight-semibold, 600);
  font-size: var(--wh-font-size-base, 1.6rem);
}
#blockcart-modal .blockcart-modal__total--bold .value { color: var(--wh-color-accent, #9e8264); }
#blockcart-modal .modal-footer {
  border-top: 1px solid var(--wh-color-border-subtle, #e4e0da);
  padding: 1.6rem 2.4rem 2rem;
  gap: 1.2rem;
}
#blockcart-modal .modal-footer .btn {
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1.2rem 2.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-medium, 500);
  box-shadow: none;
}
#blockcart-modal .modal-footer .btn-outline-primary {
  background: transparent;
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  color: var(--wh-color-text-primary, #40362e);
}
#blockcart-modal .modal-footer .btn-outline-primary:hover,
#blockcart-modal .modal-footer .btn-outline-primary:focus-visible {
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
  background: transparent;
}
#blockcart-modal .modal-footer .btn-primary {
  background: var(--wh-color-accent, #9e8264);
  border: 1.5px solid var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-inverse, #fff);
}
#blockcart-modal .modal-footer .btn-primary:hover,
#blockcart-modal .modal-footer .btn-primary:focus-visible {
  background: var(--wh-color-primary, #40362e);
  border-color: var(--wh-color-primary, #40362e);
  color: var(--wh-color-text-inverse, #fff);
}
.wishlist-pagination .page-list { justify-content: flex-end; }
.wishlist-pagination.pagination .js-wishlist-search-link:not([href]):not([tabindex]):hover {
  color: var(--wh-color-accent, #9e8264);
}
.wishlist-pagination.pagination .previous {
  margin-right: 0;
}


/* --- 404: oddech miedzy elementami --------------------------------------
   Zastane: <main class="wrapper"> ma padding-top 30px i padding-bottom 0,
   a elementy bloku maja tylko margin-bottom 10px — komunikat kleil sie do
   menu u gory i do newslettera na dole.

   ⚠️ UWAGA NA UKLAD: liczba "404" NIE jest w <section class="page-content--
   not-found">, tylko w osobnym <div class="page-header"> POWYZEJ niej.
   Dlatego gorny odstep nalezy dac naglowkowi strony, a nie sekcji — inaczej
   64px ladowalo MIEDZY "404" a zdaniem, zamiast nad calym blokiem.

   Rytm: 64 nad blokiem / 16 pod "404" / 16 pod naglowkiem / 32 nad
   przyciskiem / 64 pod blokiem. Skala z tokenow, wiec branza moze ja
   przestawic bez ruszania tego pliku. */
#pagenotfound .page-header {
  padding-top: var(--wh-space-xl, 6.4rem);
  margin-bottom: var(--wh-space-md, 1.6rem);
}
#pagenotfound .page-header .display-1 {
  margin-bottom: 0;
}
#pagenotfound .page-content--not-found {
  padding-top: 0;
  padding-bottom: var(--wh-space-xl, 6.4rem);
}
#pagenotfound .page-content--not-found h1,
#pagenotfound .page-content--not-found .h2 {
  margin-bottom: var(--wh-space-md, 1.6rem);
}
#pagenotfound .page-content--not-found p {
  margin-bottom: var(--wh-space-lg, 3.2rem);
}

/* ==========================================================================
   WNIESIONE Z KOPII SKLEPU (starterpack-demo) — 2026-08-14
   Guard `guard_arkusze_branzy_nadazaja` zglaszal, ze branza tych regul NIE WOZI,
   czyli sklep stawiany z manifestu dostawal ubozszy arkusz niz demo.
   Tresc wniesiona BEZ ZMIAN — wylacznie bloki bedace czystym dodaniem.
   ========================================================================== */

.quickview .quickview__dialog {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .quickview .quickview__dialog {
    max-width: 96rem;
  }
}

.quickview .quickview__content {
  background: var(--wh-color-bg-elevated, #fff);
  border: 0;
  border-radius: var(--wh-radius-lg, 1.6rem);
  box-shadow: var(--wh-shadow-lg, 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05));
  overflow: hidden;
}

.quickview .quickview__header {
  border-bottom: 0;
  padding: var(--wh-space-md, 1.6rem) var(--wh-space-md, 1.6rem) 0;
  min-height: 0;
}

.quickview .quickview__header .btn-close {
  margin: 0 0 0 auto;
  padding: var(--wh-space-sm, .8rem);
  border-radius: var(--wh-radius-pill, 99.9rem);
  opacity: .55;
  transition: opacity var(--wh-duration-fast, 150ms) ease,
              background-color var(--wh-duration-fast, 150ms) ease;
}

.quickview .quickview__header .btn-close:hover,
.quickview .quickview__header .btn-close:focus-visible {
  opacity: 1;
  background-color: var(--wh-color-bg-subtle, #f7f7f7);
}

.quickview .quickview__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wh-space-lg, 3.2rem);
  padding: var(--wh-space-md, 1.6rem) var(--wh-space-lg, 3.2rem) var(--wh-space-lg, 3.2rem);
}

@media (min-width: 992px) {
  .quickview .quickview__body {
    grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
    align-items: start;
  }
}

.quickview .product__left,
.quickview .product__right {
  min-width: 0;
}

.quickview .product__right {
  display: flex;
  flex-direction: column;
  gap: var(--wh-space-md, 1.6rem);
}

.quickview .product__right > * {
  margin-bottom: 0;
}

.quickview .product__carousel,
.quickview .product__images img {
  border-radius: var(--wh-radius-md, .8rem);
}

.quickview .product__images img {
  display: block;
  width: 100%;
  height: auto;
}

.quickview .product__thumbnails-list {
  display: flex;
  gap: var(--wh-space-sm, .8rem);
  margin: var(--wh-space-sm, .8rem) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.quickview .product__thumbnail {
  flex: 0 0 auto;
  width: 6.4rem;
  padding: 0;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, .8rem);
  overflow: hidden;
  background: none;
  opacity: .35;
  transition: opacity var(--wh-duration-fast, 150ms) ease,
              border-color var(--wh-duration-fast, 150ms) ease;
}

.quickview .product__thumbnail.active,
.quickview .product__thumbnail:hover {
  border-color: var(--wh-color-primary, #40362e);
  opacity: 1;
}

.quickview .product__thumbnail:focus-visible {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}

.quickview .product-variant__label {
  display: flex;
  align-items: center;
  margin-bottom: var(--wh-space-sm, .8rem);
}

.quickview .product-variant__legend {
  float: none;
  width: auto;
  margin-bottom: 0;
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-regular, 400);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}

.quickview .product-variant__selected {
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-semibold, 600);
  line-height: 1.5;
  color: var(--wh-color-text-primary, #40362e);
}

.quickview .product-variant__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wh-space-small, 1.2rem) var(--wh-space-md, 1.6rem);
  margin-bottom: var(--wh-space-sm, .8rem);
}

.quickview .product-variant__radio {
  position: relative;
  padding: var(--wh-space-xs, .4rem) var(--wh-space-md, 1.6rem);
  border: 1px solid var(--wh-color-border-light, #eee);
  border-radius: var(--wh-radius-sm, .4rem);
  background: transparent;
  color: var(--wh-color-text-muted, #908981);
  cursor: pointer;
  transition: border-color var(--wh-duration-fast, 150ms) ease,
              background-color var(--wh-duration-fast, 150ms) ease,
              color var(--wh-duration-fast, 150ms) ease;
}

.quickview .product-variant__radio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.quickview .product-variant__radio .form-check-label {
  display: inline;
  padding: 0;
  border: 0;
  font-size: var(--wh-font-size-base, 16px);
  font-weight: var(--wh-font-weight-medium, 500);
  color: inherit;
  cursor: pointer;
}

.quickview .product-variant__radio:hover {
  border-color: var(--wh-color-accent, #9e8264);
}

.quickview .product-variant__radio:has(input:checked) {
  background: var(--wh-color-accent, #9e8264);
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-inverse, #fff);
}

.quickview .product-variant__radio:has(input:focus-visible) {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}

.quickview .product-variant__colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wh-space-sm, .8rem);
}

.quickview .input-color__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.quickview .input-color__label {
  display: block;
  padding: var(--wh-space-xs, .4rem);
  border: 1px solid transparent;
  border-radius: var(--wh-radius-sm, .4rem);
  cursor: pointer;
  transition: border-color var(--wh-duration-fast, 150ms) ease;
}

.quickview .input-color__label--photo {
  width: 6rem;
}

.quickview .input-color__label--photo img,
.quickview .input-color__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wh-radius-sm, .4rem);
}

.quickview .input-color__label:hover {
  border-color: var(--wh-color-accent, #9e8264);
}

.quickview .input-color__label--active,
.quickview .input-color:has(.input-color__input:checked) .input-color__label {
  border-color: var(--wh-color-primary, #40362e);
  box-shadow: inset 0 0 0 1px var(--wh-color-primary, #40362e);
}

.quickview .input-color__input:focus-visible + .input-color__label {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}

.quickview .product__actions-qty-add {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--wh-space-sm, .8rem);
}

.quickview .quantity-button__group {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

.quickview .quantity-button__group .btn,
.quickview .quantity-button__group .form-control {
  border: 0;
  background: var(--wh-color-bg-base, #fff);
  color: var(--wh-color-text-primary, #40362e);
  box-shadow: none;
  font-size: var(--wh-font-size-body, 14px);
}

.quickview .quantity-button__group .btn {
  padding: var(--wh-space-md, 1.6rem) var(--wh-space-sm, .8rem);
  background: var(--wh-color-light, #eee);
  transition: background-color var(--wh-duration-fast, 150ms) ease;
}

.quickview .quantity-button__group .btn.decrement {
  border-radius: var(--wh-radius-md, .8rem) 0 0 var(--wh-radius-md, .8rem);
}

.quickview .quantity-button__group .btn.increment {
  border-radius: 0 var(--wh-radius-md, .8rem) var(--wh-radius-md, .8rem) 0;
}

.quickview .quantity-button__group .form-control {
  border: 1px solid var(--wh-color-light, #eee);
  border-radius: 0;
  font-weight: var(--wh-font-weight-semibold, 600);
  min-width: 6rem;
  width: 6rem;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.quickview .quantity-button__group .btn:hover {
  background: var(--wh-color-border-subtle, #e4e0da);
}

.quickview .product__add-to-cart {
  flex: 1 1 20rem;
}

.quickview .product__add-to-cart-button {
  flex: 1 1 auto;
  width: auto;
  min-height: 5.7rem;
  padding: var(--wh-space-md, 1.6rem) 2.7rem;
  border-width: 2px;
  border-radius: var(--wh-radius-md, .8rem);
  font-size: var(--wh-font-size-body, 14px);
  font-weight: var(--wh-font-weight-medium, 500);
}

.quickview .quickview__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wh-space-md, 1.6rem);
  border-top: 1px solid var(--wh-color-border-subtle, #e4e0da);
  background: var(--wh-color-bg-subtle, #f7f7f7);
  border-radius: 0 0 var(--wh-radius-lg, 1.6rem) var(--wh-radius-lg, 1.6rem);
}

.quickview .quickview__footer:has(.ps-sharebuttons) {
  justify-content: space-between;
}

.quickview .quickview__details-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wh-space-xs, .4rem);
}

.quickview .quickview__footer .quickview__details-link {
  font-weight: var(--wh-font-weight-medium, 500);
  text-decoration: none;
  transition: color var(--wh-duration-fast, 150ms) ease;
}

.quickview .quickview__footer .quickview__details-link:hover,
.quickview .quickview__footer .quickview__details-link:focus-visible {
  color: var(--wh-color-accent, #9e8264);
}

@media (max-width: 991px) {
  .quickview .quickview__body {
    padding: var(--wh-space-sm, .8rem) var(--wh-space-md, 1.6rem) var(--wh-space-md, 1.6rem);
  }

  .quickview .quickview__header {
    padding: var(--wh-space-md, 1.6rem) var(--wh-space-md, 1.6rem) 0;
  }

  .quickview .quickview__footer {
    justify-content: center;
    padding: var(--wh-space-md, 1.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quickview .product__thumbnail,
  .quickview .input-color__label,
  .quickview .product-variant__radio .form-check-label,
  .quickview .quickview__header .btn-close {
    transition: none;
  }
}

.quickview.modal.show .quickview__dialog,
.quickview.modal.in .quickview__dialog {
  transform: none;
}

.quickview.modal.fade .quickview__dialog {
  transition: transform var(--wh-duration-base, 250ms) ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .quickview.modal.fade .quickview__dialog {
    transition: none;
  }
}

.product-miniature .grade-stars .star-content.star-empty .star,
.quickview .product__reviews .grade-stars .star-content.star-empty .star {
  visibility: visible !important;
  width: max(16px, 1.6rem) !important;
  margin-left: 0 !important;
  background-position: 0 0 !important;
}

.product-miniature .grade-stars .star-content.star-empty .star:nth-child(n + 6),
.quickview .product__reviews .grade-stars .star-content.star-empty .star:nth-child(n + 6) {
  display: none !important;
}

.product-miniature .grade-stars .star-content.star-full,
.quickview .product__reviews .grade-stars .star-content.star-full {
  z-index: 1;
}

.quickview .product__reviews {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wh-space-sm, .8rem);
}

.quickview .product__reviews .product-list-review {
  display: flex;
  width: auto;
  margin-bottom: 0;
}

/* ============================================================
   Odstep tresci pod szarym blokiem naglowka (breadcrumbsy).
   Kategoria, produkt, logowanie (.st-auth) i kontakt wnosza wlasny
   odstep w sekcjach; koszyk, strony CMS i strony konta klienta NIE -
   tresc kleila sie z blokiem breadcrumbsow (zgloszenie 2026-08-17).
   Rytm jak .st-auth / kontakt: 3.2rem. Selektory scoped po body id,
   wiec nic nie wycieka na inne typy stron (test z theme.yml zbedny).
   UWAGA: #authentication / #password NIE dodawac - maja odstep
   z .st-auth (custom/_customer.css), wyszloby podwojne 6.4rem.
   ============================================================ */
#cart .columns-container,
#cms .columns-container,
#my-account .columns-container,
#identity .columns-container,
#addresses .columns-container,
#address .columns-container,
#history .columns-container,
#order-detail .columns-container,
#order-slip .columns-container,
#discount .columns-container,
#order-follow .columns-container {
  padding-top: var(--wh-space-32, 3.2rem);
}