/** Shopify CDN: Minification failed

Line 2881:106 Unexpected "*"

**/
/* 
-----------------------------------------------------------------------------------------------------------
 Plik jest podłączony na wszytkie strony w layout/theme.liquid, tak samo jak app.css
 ----------------------------------------------------------------------------------------------------------
*/


/*
------------------------------------------------------------------------------------------------------------
   !! GLOBAL — rezerwacja miejsca na pionowy pasek przewijania (scrollbar-gutter) !!
   Zapobiega skokowi treści w lewo (CLS) na desktopie: gdy pasek pojawia sie po doczytaniu strony
   (okno > ~1360px), wysrodkowane kontenery jada w lewo o ~7px. Overlay/mobile = bez efektu.
------------------------------------------------------------------------------------------------------------
*/
html {
  scrollbar-gutter: stable;
}


/*
------------------------------------------------------------------------------------------------------------

                                     !! TEXT WITH ICONS - defoltowy initial css do widżetu !!

------------------------------------------------------------------------------------------------------------
*/

   


/*
------------------------------------------------------------------------------------------------------------
                                            !! HEADER !!
------------------------------------------------------------------------------------------------------------
*/ 

/* 
  HOMEPAGE HEADER: górny czarny pasek 
  -----------------------------------
*/
/* ukryć na mobile */
@media (max-width: 768px) {
  .header_black_pass.text-with-icons {
    display: none;
  }
}

.header_black_pass .text-with-icons__inner {
  padding-left: 12.5px;
  padding-right: 12.5px;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}
  @media only screen and (min-width: 768px) {
    .header_black_pass .text-with-icons__inner {
      padding-left: 40px;
      padding-right: 40px;
    }
  }


.header_black_pass.text-with-icons {
  background: var(--color-bg);
}
.header_black_pass.text-with-icons.text-left {
  text-align: left;
}
.header_black_pass.text-with-icons.text-center {
  text-align: center; }
.header_black_pass.text-with-icons.text-right {
  text-align: right;
}

.header_black_pass .text-with-icons__inner {
  display: grid;
  grid-gap: 9px 20px;
  justify-content: center;
  grid-auto-columns: minmax(250px, 300px);
}
@media only screen and (min-width: 768px) {
  .header_black_pass .text-with-icons__inner {
    grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
  }
}
@media only screen and (min-width: 768px) {
  .header_black_pass.text-with-icons.icon-columns-2 .text-with-icons__inner {
    grid-gap: 40px 60px;
    grid-template-columns: repeat(2, minmax(200px, 300px)); 
  } 
}
@media only screen and (min-width: 768px) {
  .header_black_pass.text-with-icons.icon-columns-3 .text-with-icons__inner {
    grid-gap: 40px 60px;
    grid-template-columns: repeat(3, minmax(200px, 300px));
  }
}
@media (max-width: 890px ){
  .header_black_pass.text-with-icons.icon-columns-3 .text-with-icons__inner {
    column-gap: 10px;
  }
}
.header_black_pass.text-with-icons.icon-columns-4 .text-with-icons__inner {
    grid-template-columns: repeat(4, minmax(auto, 300px));
}
@media (max-width: 900px ){
    .header_black_pass.text-with-icons.icon-columns-4 .text-with-icons__inner {
        justify-content: start;
        grid-gap: 40px 0px;
        white-space: nowrap;
    }
}
@media only screen and (max-width: 767px) {
  .header_black_pass.text-with-icons.swipe-on-mobile .text-with-icons__inner {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    grid-template-columns: repeat(auto-fill, 300px);
    scrollbar-width: none;
  }
  .header_black_pass.text-with-icons.swipe-on-mobile .text-with-icons__inner::-webkit-scrollbar {
    display: none;
  }
}

.header_black_pass .text-with-icons__block {
  display: flex;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (max-width: 900px ){
  .header_black_pass.text-with-icons__block {
      margin-right: 50px;
  }
}
.header_black_pass .text-with-icons__block-content {
  font-size: 0.9375rem;
}
.header_black_pass .text-with-icons__block-content h6 {
  line-height: 1;
  margin-bottom: 14px;
  color: var(--color-heading, --color-accent);
}
.header_black_pass .text-with-icons__block-content p {
  font-size: 12px;
  line-height: 32px;
  letter-spacing: 0.2px;
  color: rgb(204,204,204);
  margin-bottom: 0;
}
/* .header_black_pass .text-with-icons__block-content > *:last-child {
  margin-bottom: 0;
} */
.header_black_pass.text-with-icons .text-with-icons__icon {
  flex-shrink: 0;
  height: 16px;
  margin-right: 8px;
}
.header_black_pass .text-with-icons__icon svg {
  width: 100%;
  height: auto;
  fill: var(--color-text, --color-accent);
}
.header_black_pass .text-with-icons__icon img {
  display: inline;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header_black_pass.text-with-icons.icon-top .text-with-icons__block {
  flex-direction: column;
}
.header_black_pass.text-with-icons.icon-top .text-with-icons__icon {
  margin-bottom: 30px;
}
.header_black_pass.text-with-icons.icon-top.text-left .text-with-icons__block {
  align-items: flex-start;
}
.header_black_pass.text-with-icons.icon-top.text-center .text-with-icons__block {
  align-items: center;
}
.header_black_pass.text-with-icons.icon-top.text-right .text-with-icons__block {
  align-items: flex-end;
}
.header_black_pass.text-with-icons.icon-right .text-with-icons__block {
  flex-direction: row-reverse;
}
.header_black_pass.text-with-icons.icon-right .text-with-icons__icon {
  margin-left: 25px;
}
.header_black_pass.text-with-icons.icon-medium .text-with-icons__icon {
  width: 48px;
}
.header_black_pass.text-with-icons.icon-large .text-with-icons__icon {
  width: 64px;
}
.header_black_pass.text-with-icons.icon-xlarge .text-with-icons__icon {
  width: 96px;
}
.header_black_pass.text-with-icons.heading-large h6 {
  font-size: 20px; 
}
.header_black_pass.text-with-icons.heading-small h6 {
  font-size: 14px;
}






/* 
  HOMEPAGE HEADER: górny różowy pasek B2B
  ----------------------------------------------------------
*/
.header_pink_pass .text-with-icons__inner {
  padding-left: 12.5px;
  padding-right: 12.5px;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}
  @media only screen and (min-width: 768px) {
    .header_pink_pass .text-with-icons__inner {
      padding-left: 40px;
      padding-right: 40px;
    }
  }

.header_pink_pass.text-with-icons {
  background: var(--color-bg);
}
.header_pink_pass.text-with-icons.text-left {
  text-align: left;
}
.header_pink_pass.text-with-icons.text-center {
  text-align: center; 
}
.header_pink_pass.text-with-icons.text-right {
  text-align: right;
}
.header_pink_pass .text-with-icons__inner {
  display: grid;
  grid-gap: 40px 20px;
  justify-content: center;
  grid-auto-columns: minmax(250px, 300px);
}
@media only screen and (min-width: 768px) {
  .header_pink_pass .text-with-icons__inner {
    grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
  }
}
@media only screen and (min-width: 1068px) {
  .header_pink_pass.text-with-icons.icon-columns-2 .text-with-icons__inner {
    grid-gap: 40px 60px;
    grid-template-columns: repeat(2, minmax(200px, 300px)); 
  } 
}
@media only screen and (min-width: 768px) {
  .header_pink_pass.text-with-icons.icon-columns-3 .text-with-icons__inner {
    grid-gap: 40px 60px;
    grid-template-columns: repeat(3, minmax(200px, 300px));
  }
}
@media only screen and (min-width: 768px) {
  .header_pink_pass.text-with-icons.icon-columns-4 .text-with-icons__inner {
    grid-template-columns: repeat(2, minmax(200px, 300px));
  }
}
@media only screen and (min-width: 1068px) {
  .header_pink_pass.text-with-icons.icon-columns-4 .text-with-icons__inner {
    grid-template-columns: repeat(4, minmax(200px, 300px));
  }
}
@media only screen and (max-width: 767px) {
  .header_pink_pass.text-with-icons.swipe-on-mobile .text-with-icons__inner {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    grid-template-columns: repeat(auto-fill, 100%);
    scrollbar-width: none;
  }
  .header_pink_pass.text-with-icons.swipe-on-mobile .text-with-icons__inner::-webkit-scrollbar {
    display: none;
  }
}
.header_pink_pass .text-with-icons__block {
  display: flex;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.header_pink_pass .text-with-icons__block-content {
  font-size: 0.9375rem;
}
.header_pink_pass .text-with-icons__block-content h6 {
  line-height: 1;
  margin-bottom: 14px;
  color: var(--color-heading, --color-accent);
}
.header_pink_pass .text-with-icons__block-content p {
  color: var(--color-text, --color-accent);
}
.header_pink_pass.text-with-icons .text-with-icons__icon {
  height: 16px;
  margin-right: 8px;
  margin-top: 6px;
  flex-shrink: 0;
}
.header_pink_pass .text-with-icons__icon svg {
  width: 100%;
  height: auto;
  fill: var(--color-text, --color-accent);
  color: #292d32;
}
.header_pink_pass .text-with-icons__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header_pink_pass.text-with-icons.icon-top .text-with-icons__block {
  flex-direction: column;
}
.header_pink_pass.text-with-icons.icon-top .text-with-icons__icon {
  margin-bottom: 30px;
}
.header_pink_pass.text-with-icons.icon-top.text-left .text-with-icons__block {
  align-items: flex-start;
}
.header_pink_pass.text-with-icons.icon-top.text-center .text-with-icons__block {
  align-items: center;
}
.header_pink_pass.text-with-icons.icon-top.text-right .text-with-icons__block {
  align-items: flex-end;
}
.header_pink_pass.text-with-icons.icon-right .text-with-icons__block {
  flex-direction: row-reverse;
}
.header_pink_pass.text-with-icons.icon-right .text-with-icons__icon {
  margin-left: 25px;
}
.header_pink_pass.text-with-icons.icon-medium .text-with-icons__icon {
  height: 48px;
  width: 48px;
}
.header_pink_pass.text-with-icons.icon-large .text-with-icons__icon {
  height: 64px;
  width: 64px;
}
.header_pink_pass.text-with-icons.icon-xlarge .text-with-icons__icon {
  height: 96px;
  width: 96px;
}
.header_pink_pass.text-with-icons.heading-large h6 {
  font-size: 20px; }
.header_pink_pass.text-with-icons.heading-small h6 {
  font-size: 14px;
}


.shopify-section:has(.header_pink_pass) {
  z-index: 63;
}
.header_pink_pass.text-with-icons {
  font-weight: normal;
}
.header_pink_pass .text-with-icons__inner {
  row-gap: 10px;
  justify-content: start;
}
@media (min-width: 768px) {
  .header_pink_pass .text-with-icons__block:last-child {
    width: max-content;
  }
}
@media (min-width: 1068px) {
  .header_pink_pass .text-with-icons__block:last-child {
    justify-content: end;
    width: 500px;
  }
}
@media (max-width: 1068px) {
  .header_pink_pass .text-with-icons__block:first-child {
    display: none;
  }
  .header_pink_pass .text-with-icons__block {
    justify-content: center;
  }

  .header_pink_pass .text-with-icons__inner {
    justify-content: center;
    grid-template-columns: auto;
  }
}
.header_pink_pass .text-with-icons__block-content p {
  font-size: 12px;
  line-height: 32px;
  letter-spacing: 0.2px;
  min-height: 32px;
  height: auto;
  margin-bottom: 0;
}

@media (max-width: 425px) {
  .header_pink_pass .text-with-icons__block-content p {
    line-height: 16px;
  }
}

.header_pink_pass .text-with-icons__icon img {
  display: inline;
}
.header_pink_pass a {
  color: black !important;
}
.header_pink_pass a:hover {
  color: black;
  text-decoration: underline;
}

  /*
    Task 5.1 — stabilizacja różowego paska (anti-CLS, desktop-only)
    white-space:nowrap = 1 linia (stała wysokość 32px, brak skoku 64->32).
    width:16px = rezerwacja miejsca ikony (brak skoku poziomego 255->16).
  */
  .header_pink_pass.text-with-icons {
    overflow: hidden;
  }
  .header_pink_pass .text-with-icons__block-content,
  .header_pink_pass .text-with-icons__block-content p {
    white-space: nowrap;
  }
  .header_pink_pass .text-with-icons__icon {
    width: 16px;
    flex-shrink: 0;
  }












/* 
        HEADER - sticky dla 'Strona dla klientów B2B'
  -------------------------------------------------------------------
*/
/* czarny pasek  - widoczny po 768px*/
[id*="text_with_icons_custom"]:has(.header_black_pass),
[id*="text_with_icons_new_custom"] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 63;
}
/* różowy pasek */
[id*="text_with_icons_custom"]:has(.header_pink_pass) {
    position: sticky;
    top: 32px;
    left: 0;
}
/* menu */
[id*="__header"] {
    position: sticky;
    top: 64px;
    left: 0;
    z-index: 62;
}

/* ukrycie czarnego paska na mobile */
@media (max-width: 768px) {
  /* różowy pasek */
  [id*="text_with_icons_custom"]:has(.header_pink_pass) {
      position: sticky;
      top: 0px;
      left: 0;
      display: none;
  }

  /* === MOBILE: czarny pas TEZ odklejony (2026-08-05) ===
     Decyzja uzytkowniczki, ZMIANA wczesniejszej ("czarna ma zostac na stale razem
     z headerem"): skoro rozowy pas kampanii chowa sie przy przewijaniu i to sie podoba,
     czarna karuzela ma robic to samo. Po przewinieciu zostaje TYLKO naglowek:
     96px zamiast 133px. */
  [id*="text_with_icons_custom"]:has(.header_black_pass),
  [id*="text_with_icons_new_custom"] {
      position: static;
      top: auto;
  }

  /* menu: top 36px -> 0. Te 36px byly odsunieciem o wysokosc PRZYKLEJONEJ czarnej
     karuzeli; bez niej naglowek musi lgnac do samej gory, inaczej po przewinieciu
     zostawalaby nad nim 36px dziury. */
  [id*="__header"] {
      position: sticky;
      top: 0;
  }

  /* Szuflada liczy wysokosc jako (100dvh - wysokosc naglowka - --header-offset),
     a --header-offset ustawia header.js:94 na wysokosc pasa nad naglowkiem (36px).
     Po odklejeniu czarnego pasa ten skladnik jest bledny: przy przewinietej stronie
     naglowek stoi na top:0, wiec szuflada bylaby o 36px za krotka i na dole zostawalaby
     dziura. Liczymy wprost od dolu naglowka. Gdy strona jest na samej gorze, szuflada
     wychodzi 36px pod ekran — ma wlasne przewijanie, wiec to nieszkodliwe; odwrotny
     blad (widoczna dziura) byl gorszy.
     NIE nadpisujemy --header-offset: header.js ustawia ja stylem inline, wiec CSS
     przegralby bez !important, a zmienna uzywaja tez inne miejsca. */
  .mobile-menu-drawer {
      height: calc(100vh - 100%);
  }
}
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .mobile-menu-drawer {
        height: calc(100dvh - 100%);
    }
  }
}







/* 
  HEADER MENU  - link do Loyalty
  -------------------------------------------------------------------
*/
#loyalty-program {
  padding: 0;
}
#cart-drawer-toggle {
  padding-left: 5px;
}
#header-my-account {
  padding-right: 5px;
}
 /* różowy domyślnie (render-blocking, od 1. klatki). Bylo body.no_video (klasa
     dodawana pozno przez JS) -> ikona migala biala->rozowa na stronach != homepage.
     Homepage wideo-gora: #header.not_scrolled #loyalty-program path (2 id, bardziej
     specyficzna, styles-HOMEPAGE.css) nadal nadpisuje na biala. */
#loyalty-program path {
  stroke-width: 0 !important;
  stroke: #f0bfc9 !important;
  fill: #f0bfc9 !important;
}





/* 
  HEADER MENU ---------- DESKTOP
  -------------------------------------------------------------------
*/

/* CLS: rezerwacja finalnej szerokosci strefy ikon (search/konto/loyalty/koszyk/flaga),
   zeby ikony dochodzace po kolei (stream HTML na 3G + flaga z .no-js-hidden po JS)
   nie rozpychaly strefy i nie zsuwaly menu (desktop) / logo (mobile).
   justify-content: flex-start -> ikony dochodza od lewej i nie pchaja sie wzajemnie
   (flaga z .no-js-hidden dokleja sie bez przesuwania reszty); koniec "pociagu". */
.thb-secondary-area {
    justify-content: flex-start;
}
@media only screen and (min-width: 768px) {
    .thb-secondary-area {
        min-width: 215px;
    }
}
@media only screen and (max-width: 767px) {
    /* min-width 205px NIEAKTUALNE od 2026-08-05: strefa ikon dostala wlasny obszar siatki
       w drugiej kolumnie, wiec nie ma czego rezerwowac. Po zdjeciu lupy i skroceniu
       przelacznika do flagi jej naturalna szerokosc to ~160px.
    .thb-secondary-area {
        min-width: 205px;
    } */

    /* MOBILNY NAGLOWEK: dwa rzedy (2026-08-05). Rzad 1 = logo + 3 ikony + flaga (48px),
   rzad 2 = hamburger + pole szukania (48px). Na starcie 168px, po przewinieciu 96px.
   TRZY kolumny, nie dwie: przy dwoch pierwsza byla sizowana szerokoscia LOGO (144px)
   i miedzy hamburgerem a polem zostawalo 122px pustki. Logo rozciaga sie na kolumny 1-2.
   Poprzednio: `grid-template-columns: auto 1fr 205px !important` (chronilo logo przed
   skakaniem w jednym rzedzie; w dwoch rzedach zbedne). Kolejnosc w DOM nietknieta —
   szuflada jest dzieckiem hamburgera i jest pozycjonowana absolutnie. */
    .header > .row > .columns {
        display: grid;
        /* TRZY kolumny, nie dwie. Przy dwoch kolumnach pierwsza byla sizowana slowem "auto",
           czyli szerokoscia LOGO (144px), a hamburger tylko w niej siedzial — miedzy nim
           a polem zostawalo 122px pustki. Teraz logo ROZCIAGA sie na kolumny 1-2, wiec
           szerokosc kolumny 1 wyznacza hamburger (32px), a pole rozciaga sie na 2-3. */
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 48px 48px;
        grid-template-areas:
            "logo   logo   ikony"
            "burger szukaj szukaj";
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
    }
    .header > .row > .columns > .mobile-toggle-wrapper { grid-area: burger; }
    .header > .row > .columns > .menu-logo-container   { grid-area: logo; }
    .header > .row > .columns > .thb-secondary-area    { grid-area: ikony; justify-self: end; }
    .header > .row > .columns > .thb-mobile-search     { grid-area: szukaj; }

    /* lupa schodzi do drugiego rzedu jako pole, wiec ikona w rzedzie 1 jest zbedna.
       display:none, a nie usuniecie z Liquida — desktop nadal jej uzywa.
       Ukryty element wciaz ma podpiety nasluch z predictive-search.js, i to jest OK. */
    .thb-secondary-area > a#quick-search { display: none; }

    /* ODRZUCONE 2026-08-05: zerowanie marginesow logo nic nie zmienialo — svg 25px stoi
   wysrodkowany tak samo (y 47..72), a 55px kontenera bierze sie z jawnej wysokosci
   ustawianej gdzie indziej. Pudelko nachodzi 2px na hamburgera, ale on jest na wierzchu
   (elementFromPoint) i pozostaje klikalny. */
    .menu-logo-container {
      min-width: 0 !important;
    }
    .logolink {
      min-width: 0 !important; max-width: 100% !important;
    }
    .logolink .logoimg {
      min-width: 0 !important; max-width: 100% !important;
    }
    .logolink .logoimg svg {
      width: auto !important; height: 25px !important; max-width: 100% !important;
    }

}

/* CLS/wizual: rezerwacja kolumny strefy ikon na DESKTOPIE (>=1068px). Theme:
   .header.style2 > .row > .columns { grid-template-columns: auto 1fr } (app.css).
   Pusty 1fr (gdy strefa ikon jeszcze nie dotarla w streamingu HTML / nie istnieje
   w DOM) ZWIJA sie -> menu (kolumna auto) rozpycha sie na pelna szerokosc (1119px);
   gdy ikony wchodza, menu zweza sie o ~215px i 2 zakladki spadaja do 2. rzedu.
   minmax(215px,1fr) rezerwuje 215px nawet gdy kolumna pusta -> menu ma stala
   szerokosc 904px od 1. klatki -> brak przestawienia. (Analogiczne do mobilnego
   'auto 1fr 205px' wyzej; stan koncowy bez zmian.) */
@media only screen and (min-width: 1068px) {
  .header.style2 > .row > .columns {
    grid-template-columns: auto minmax(215px, 1fr);
  }
}

/* Logo zbyt blisko burgera na szerszym mobile -> odsuwamy je. */
@media only screen and (min-width: 425px) and (max-width: 767px) {
    /* NIEAKTUALNE od 2026-08-05: ten padding odsuwal logo od hamburgera, ktory stal
       obok niego w jednym rzedzie. Hamburger jest teraz w drugim rzedzie, wiec zostalaby
       tu tylko dziura po lewej stronie logo.
    .header > .row > .columns .menu-logo-container {
        padding-left: 30px;
    } */
}
@media only screen and (min-width: 410px) and (max-width: 424px) {
    .header > .row > .columns .menu-logo-container {
        padding-left: 20px;
    }
}


[id*="__header"] #header {
  background-color: #f5f5f5;
}

[id*="__header"] .thb-full-menu > li > a {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  color: rgb(51, 51, 51);
  letter-spacing: 0.24px;
  text-transform: uppercase;
}


/* CLS: rezerwacja wysokosci 2 rzedow menu. Podczas streamingu HTML menu maluje sie
    najpierw jako 1 rzad (czesc zakladek), potem 2 rzedy => naglowek rosnie ~34px i
    spycha CALA tresc w dol (~0,03 CLS, globalnie na kazdej stronie). Rezerwujemy
    2-rzedowa wysokosc od 1. klatki (app-CUSTOM = render-blocking) => 1. rzad od razu
    na docelowej (gornej) pozycji, doczytane zakladki wypelniaja zarezerwowany 2. rzad.
    Menu na desktopie ZAWSZE 2 rzedy (szerokosc menu capnieta ~904px nawet @1920). */
[id*="__header"] .thb-full-menu {
  min-height: 68px;
}


@media (min-width: 990px) and (max-width: 1439px) {
  [id*="__header"] .thb-full-menu > li > a {
    font-size: 12px;
    line-height: 12px;
  }

  [id*="__header"] .thb-full-menu {
    min-height: 64px;
  }

}

[id*="__header"] .thb-full-menu li.menu-item-has-children > a:after {
  display: none;
}

/* kolor dla "sklep hurtowy" */
[id*="__header"] .thb-full-menu > li:last-child a {
  color: #5f6c79;
}
[id*="__header"] .thb-full-menu > li > a:hover {
  color: #b88aa6;
}

[id*="__header"] .thb-full-menu > li {
  padding: 0 10px;
}
[id*="__header"] .thb-full-menu li.menu-item-has-children>a {
  padding-right: 0;
}

[id*="__header"] .logolink {
  margin-bottom: 20px;
}

/* wysokość menu do 768 px  - 55px */
@media (max-width: 768px) {
  [id*="__header"] .menu-logo-container {
    height: 55px;
    padding-right: 10px;
  }
}

/*
  Logo mobile/tablet (<1068px): pin do lewej od pierwszej klatki.
  Regula bazowa .header.style2 .logolink (app.css) centruje logo (margin:auto)
  ponizej 1068px; w kontenerze flex z menu auto-marginesy przeliczaly sie gdy
  menu ukladalo sie wieloetapowo przy ladowaniu -> logo skakalo poziomo
  (start wysrodkowane left~179 -> finalnie left~49). Stan ustalony (produkt +
  homepage) = margin 0, logo po lewej. Ustawiamy to render-blocking -> brak skoku.
*/
@media (max-width: 1067px) {
  .header.style2 .logolink {
    margin-left: 0;
    margin-right: 0;
  }
}

/* SERCH na mobile - widoczność kiedy menu jest otwarte */
[id*="__header"].shopify-section.shopify-section-group-header-group.header-section.search-open .thb-quick-search {
  z-index: 31;
}

/* szerokość menu jako 1360, a nie full width */
[id*="__header"] .row.expanded {
  max-width: 1360px;
}




/* 
wypadające menu DESKTOP
-----------------------
*/
/* nagłówek */
.sub-menu.mega-menu-container a.mega-menu-columns__heading {
  font-size: 15px;
  color: #797d89;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 14px;
}
.sub-menu.mega-menu-container a.mega-menu-columns__heading:hover {
  color: #d22122;
}

/* zakładki menu */
.sub-menu.mega-menu-container .mega-menu-columns li ul li {
  padding: 8px 0;
}
.sub-menu.mega-menu-container .mega-menu-columns li ul li a {
  font-size: 15px;
  color: #797d89;
  letter-spacing: 0.2px;
  font-weight: 400;
  line-height: 14px;
}
.sub-menu.mega-menu-container .mega-menu-columns li ul li:hover {
  background: #ffe8ef;
}
.sub-menu.mega-menu-container .mega-menu-columns li:hover ul li a {
  color: black;
}
.sub-menu.mega-menu-container .mega-menu-columns li:hover ul li {
  padding-left: 4px;
}

/* napis pod onrazkiem */
.mega-menu-promotion--content {
  color: #797d89;
}
.mega-menu-promotion:hover .mega-menu-promotion--content {
  color: black;
}
@media(max-width: 768px) {
  .mega-menu-promotion--content {
    color: black;
  }
  .mega-menu-promotion:hover .mega-menu-promotion--content {
    color: #e7c0c7;
  }
}
@media(max-width: 1067px) {
  .mega-menu-promotion {
    display: none;
  }
}






/* 
  HEADER MENU ---------- MOBILE
  -------------------------------------------------------------------
*/

#mobile-menu .mobile-menu-content {
  background: #ffe8ef;
}
#mobile-menu {
  border-top-color: black !important;
}
.mobile-menu-content .mobile-menu li > .link-container > a,
.mobile-menu-content .mobile-menu li > .link-container > summary,
.mobile-menu-content .mobile-menu li > .link-container > ul {
  border-color: black;
}
.mobile-menu-content .mobile-menu li > .link-container.submenu-open > summary {
  border: 0;
   background: #f2c6cf9c;
}
.thb-mobile-menu-footer {
  border-color: black;
}


/* footer */
.mobile-menu-drawer .thb-mobile-menu-footer {
  display: none !important;
}


/* nagłówek 1 */
.mobile-menu-content .mobile-menu li > .link-container > a,
.mobile-menu-content .mobile-menu li > .link-container > summary {
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 18.6px;
  font-weight: 500;
  color: black;
}
.mobile-menu-content .mobile-menu li > .link-container > summary > .link-forward{
  cursor: pointer;
}
.mobile-menu-content .mobile-menu li > .link-container > summary > a {
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 18.6px;
  font-weight: 500;
  color: black;
  padding: 0;
  width: fit-content;
  text-decoration: none;
  border: 0;
}
.mobile-menu-content .mobile-menu li > .link-container > summary > a:hover {
  text-decoration: none;
}
.mobile-menu-content .mobile-menu > li:hover > .link-container .parent-link {
  background: #f5c7ce;
}
.mobile-menu-content .mobile-menu > li:hover > .link-container > a {
  background: #f5c7ce;
}

/*nagłówek 2*/
.mobile-menu-content .mobile-menu li > .link-container .sub-menu > li > .link-container > summary {
  width: 30%;
}
@media (max-width: 540px) {
  .mobile-menu-content .mobile-menu li > .link-container .sub-menu > li > .link-container > summary {
    width: 50%;
  }
}


/* zakładki 3 */
.mobile-menu-content .mobile-menu .sub-menu .sub-menu a {
  border-color: grey !important;
}

.mobile-menu li .submenu-open>.parent-link {
  background: #f2c6cf9c;
}
.mobile-menu-content .mobile-menu .sub-menu .sub-menu a:hover {
  /* #e7c0c7 dawal 1.41:1 na rozowym tle szuflady — jasny roz na jasnym rozu, tekst
     praktycznie znikal pod palcem. WCAG 1.4.3 dotyczy tez stanu :hover.
     Blizniacza regula w styles-CATEGORY.css zostala poprawiona 2026-08-03, ta zostala
     przeoczona. Akcent #9c5f6d ma na rozu tylko 4.22:1, wiec tu ciemniejszy odcien
     tego samego koloru: #8e5461 = 5.02:1 na rozu (i 5.85:1 na bialym). 2026-08-04. */
  color: #8e5461;
}


/* widoczność linka do konta */
@media (max-width: 768px) {
  .thb-secondary-area .thb-secondary-item.thb-secondary-myaccount {
    display: inline-flex;
  }
  /* Siatka jednego rzedu — NIEAKTUALNA od 2026-08-05. Naglowek mobilny ma dwa rzedy;
     obowiazuje blok "MOBILNY NAGLOWEK: DWA RZEDY" w zapytaniu max-width:767px wyzej.
     Zostawiona zakomentowana jako slad, skad wzielo sie 1fr 3fr auto.
  [id*="__header"] .header>.row>.columns {
    grid-template-columns: 1fr 3fr auto;
  } */
}

/* jeśli nie ma sub-menu jak na b2b */
.mobile-menu-content .mobile-menu > li > details > ul > li > a {
  font-size: 14px;
}








/* 
  LABELS na listingach 
  -------------------------------------------------------------------
*/
.badge.onsale{
  background: #f2c6cf;
  font-weight: bold;
  color: black;
}
@media (min-width: 768px) {
  /* .badge {
   line-height: 18.6px;
  } */
}

.badge.nowosc {
  background: #f2c6cf !important;
  color: black;
  font-weight: bold;
}

/*
------------------------------------------------------------------------------------------------------------
                          !! SEARCH - DRAWER (wysuwana wyszukiwarka) !!
------------------------------------------------------------------------------------------------------------
Wysuwana wyszukiwarka (drawer z prawej) zamiast domyślnego dropdownu.
Otwieranie/zamykanie: klasa .search-open na .header-section (dodaje ją predictive-search.js motywu).
Overlay + blokada scrolla: skrypt na końcu sections/header.liquid (tworzy .search-overlay-backdrop,
  synchronizuje body.overflow-hidden, obsługuje klik w tło).
Zamykanie: krzyżyk (.thb-search-close) + Esc — obsługiwane przez JS motywu; klik w tło — przez nasz skrypt.

!! WARSTWY (stacking context) !!                                                                                                                                           
Backdrop jest doklejany JS-em do WNĘTRZA sekcji headera (nie do body), bo sekcja                                                                                           
[id*="__header"] ma własny stacking context (z-index 62 niżej w tym pliku) — dzieci                                                                                        
sekcji nie mogą przebić elementów z body niezależnie od własnego z-indexu.                                                                                                 
Wewnątrz sekcji: belka headera (.header, z-index 30) < backdrop (100000) < panel (100002),                                                                                 
więc backdrop przyciemnia belkę, a panel zostaje na wierzchu.                                                                                                              
Na czas otwarcia cała sekcja dostaje z-index 100001 (reguła niżej) — przykrywa                                                                                             
czarny/różowy pasek (63) i cookie banner Pandectes (100000).                                                                                                               
                                                                                                                                                                            
Desktop: panel 600px z prawej + overlay na cały ekran (panel przykrywa go z wierzchu,                                                                                      
  klik w panel NIE trafia w overlay — szerokości nie trzeba już synchronizować).                                                                                           
Mobile (<=768px): panel pełnoekranowy, overlay ukryty (display:none). 
------------------------------------------------------------------------------------------------------------
*/

/* === PANEL — stan zamknięty (schowany za prawą krawędzią) === */
.thb-quick-search {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(600px, 100%);
  height: 100%;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  z-index: 100001;
  background: #fff;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
}

/* === PANEL — stan otwarty (wjeżdża); podwójny selektor bije regułę motywu z ID === */
.header-section.search-open .thb-quick-search,
#shopify-section-sections--18128967598234__header.search-open .thb-quick-search {
  transform: translateX(0) !important;
  background: #fff !important;
  position: fixed !important;
  z-index: 100002 !important;
}

/* === OVERLAY (przyciemnione tło z lewej) === */
.search-overlay-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* cały ekran; panel jest wyżej (100002), więc kliki w panel nie trafiają w backdrop */  
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 100000;
}
body.overflow-hidden .search-overlay-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* === Na czas otwarcia: cała sekcja nad resztą strony (paski 63, cookie banner 100000).                                                                                   
    Belka headera i tak jest przyciemniona, bo backdrop siedzi WEWNĄTRZ sekcji nad nią. === */                                                                              
.header-section.search-open {                                                                                                                                              
  z-index: 100001;                                                                                                                                                         
} 

/* === Gorne belki pod przyciemnieniem, ale NAD trescia listingu (poprawione 2026-08-05) ===
   BYLO z-index: 1 — i to byl blad: zawartosc kafelkow jest pozycjonowana WYZEJ, wiec ceny,
   przyciski "Dodaj do koszyka" i lupka szybkiego podgladu rysowaly sie NA belkach.
   Zgloszone przez uzytkowniczke: "kafelki produktowe przebijaja sie przez headera",
   widoczne tam, gdzie panel szukania nie zajmuje pelnej szerokosci (desktop, 2 kolumny).

   Zmierzone warstwy: zawartosc listingu do 40 (product-card-quickview), przyciemnienie
   szuflad koszyka/filtrow 51, przyciemnienie panelu szukania 100000.
   Wartosc musi wpasc w okno miedzy 40 i 51 — 45 spelnia oba warunki naraz:
   nad kafelkami, ale pod kazdym przyciemnieniem, wiec belki nadal sie przygaszaja.

   NIE ruszamy `.header-section.search-open { z-index: 100001 }` (~1035): panel szukania
   jest DZIECKIEM sekcji naglowka (sections/header.liquid, po </theme-header>), wiec obnizenie
   sekcji wciagnelo by panel pod przyciemnienie i zepsulo cala nakladke. Nieprzygaszony
   naglowek jest konsekwencja tej struktury, nie usterka. */
body.overflow-hidden [id*="__text_with_icons"],
body.overflow-hidden [id*="__announcement-bar"] {
  z-index: 45 !important;
}

/* === NAGŁÓWEK panelu: tytuł po lewej, ZAMKNIJ po prawej (jak koszyk) === */
.thb-quick-search--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5rem;
}
.thb-quick-search--title {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* === ZAMKNIJ (dawny krzyżyk, teraz napis w nagłówku) === */
.thb-quick-search .thb-search-close {
  position: static;
  cursor: pointer;
  text-transform: uppercase;
  font-size: .8125rem;
  font-weight: 500;
}
.thb-quick-search .thb-search-close:hover {
  color: #e7c0c7;
}

/* === POLE WYSZUKIWANIA === */
.thb-quick-search--form {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  border-top: 0;
}
.thb-quick-search .searchform fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;   /* kotwica dla X czyszczenia */
}
.thb-quick-search .search-field {
  font-size: 1.25rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-right: 2.5rem;   /* miejsce na X czyszczenia */
}
.thb-quick-search .search-field::placeholder {
  font-size: 1.25rem;
  opacity: .5;
}

/* === X w polu — czyści tekst (nie zamyka drawera) === */
.thb-search-clear {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: .25rem;
  opacity: .5;
}
.thb-search-clear:hover {
  opacity: 1;
}

/* === POPULARNE WYSZUKIWANIA (chipy) === */
.thb-quick-search--popular {
  margin-top: 1.5rem;
}
.thb-quick-search--popular scroll-shadow > div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.thb-quick-search--popular .button.pill {
  font-size: .8125rem;
  padding: .4rem .9rem;
}

/* === POLECANE PRODUKTY (stan pusty) === */
.thb-quick-search--recommended {
  margin-top: 1.5rem;
}
.thb-quick-search--recommended .thb-quick-search--label {
  display: block;
  margin-bottom: 1rem;
}
.thb-quick-search--recommended-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* === WYNIKI — bez własnego okienka/scrolla, płyną w przewijaniu całego panelu === */
.thb-quick-search--results-container {
  margin-top: 1.5rem;
}
.thb-quick-search--results-container,
.thb-quick-search--results,
.thb-quick-search .search-results-container,
.thb-quick-search scroll-shadow {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* === Po wpisaniu frazy: schowaj cały stan pusty (pigułki + polecane) === */
.thb-quick-search:has(.thb-quick-search--results.active) .thb-quick-search--popular,
.thb-quick-search:has(.thb-quick-search--results.active) .thb-quick-search--recommended {
  display: none;
}

/* === MOBILE — pełna szerokość, bez overlaya i cienia === */
@media (max-width: 768px) {
  .thb-quick-search {
    width: 100%;
    padding: 1.25rem;
    box-shadow: none;
  }
  .search-overlay-backdrop {
    display: none;
  }
}








/* 
  CUSTOM section-header - kastomowy nagłówek do sekcji, z wyróznieniem subheading, heading i description
                         w tym wyróznienie mobile i desktop 
  --------------------------------------------------------------------------------------------------------
*/
.custom-section-header {
  max-width: 1360px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .subheading.custom-section-subheading.desktop-head,
  .h3.custom-section-heading.desktop-head,
  .rte.custom-section-description.desktop-head {
    display: none;
  }
}
@media (min-width: 769px) {
  .subheading.custom-section-subheading.mobile-head,
  .h3.custom-section-heading.mobile-head,
  .rte.custom-section-description.mobile-head {
    display: none;
  }
}


/* STYLE ogólne dla tych nagłówków - typowe jak na HomePage */

/* SUBHEADING */
/* desktop*/
.subheading.custom-section-subheading {
  color: #554f4b;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.6px;
  line-height: 12px;
  margin-bottom: 8px;
  opacity: unset;
}
/* mobile*/
@media (max-width: 768px) {
  .subheading.custom-section-subheading {
    font-size: 12px;
  }
}


/* HEADING */
/* desktop*/
.custom-section-header h2 {
  font-size: 30px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: 0.2px;
  border-bottom: 2px solid #f5c6ce;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
/* mobile*/
@media (max-width: 768px) {
  .custom-section-header h2 {
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 15px;
  }
}

/* HEADING H1 dla homepage*/
/* desktop*/
.homepage_custom_collection_main .custom-section-header {
  padding: 0;
}
.homepage_custom_collection_main .custom-section-header h1 {
  font-size: 30px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: 0.2px;
  border-bottom: 2px solid #f5c6ce;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
/* mobile*/
@media (max-width: 768px) {
  .homepage_custom_collection_main .custom-section-header h1 {
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 15px;
  }
}


/* DESCRIPTION */
/* desktop*/
.section-header .rte.custom-section-description {
  margin: 0 0 25px 0;
  padding: 0 !important;
}
.rte.custom-section-description p {
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.2px;
  color: black;
}
/* mobile*/
@media (max-width: 768px) {
  .rte.custom-section-description p {
    font-size: 16px;
    line-height: 1.3;
  }
}

/* DESCRIPTION H2 dla Homepage*/
/* desktop*/
.homepage_custom_collection_main .custom-section-header h2 {
  border-bottom: none;
}
.homepage_custom_collection_main .custom-section-header h2 {
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.2px;
  color: black;
  margin-bottom: 20px;
  padding-bottom: 0;
}
/* mobile*/
@media (max-width: 768px) {
  .homepage_custom_collection_main .custom-section-header h2 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 20px;
    padding-bottom: 0;
  }
}















/*
------------------------------------------------------------------------------------------------------------
                                            !! CART DRAWER !!
------------------------------------------------------------------------------------------------------------
*/ 
.cart-drawer .side-panel-inner {
  height: 100%;
}


/** HEADER **/
.cart-drawer .side-panel-header .h4,
.cart-drawer .side-panel-header .side-panel-close {
  text-transform: uppercase;
}
.cart-drawer .side-panel-header .side-panel-close:hover {
  color: #e7c0c7;
}


/** LISTA **/
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item {
  align-items: flex-start;
  margin-bottom: 30px;
}
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item .cart-product-link {
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: 22px;
}
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item .price {
  line-height: 13px;
}
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item .price ins {
  line-height: 17.5px;
}
@media (max-width: 768px) {
  .cart-drawer .side-panel-content .product-cart-item--container .product-cart-item .cart-product-link {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 16px;
    max-height: 33px;
  }
  .cart-drawer .side-panel-content .product-cart-item--container .product-cart-item {
    margin-bottom: 22px;
  }
}
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item .cart-product-link:hover {
  color: #e7c0c7;
}


/* unit-price */
.cart-drawer .side-panel-content .product-cart-item--container .unit-price {
  font-size: 10px;
  color: black;
  opacity: 0.55;
}

/* omnibus */
.cart-drawer .side-panel-content .product-cart-item--container .product-omnibus {
  font-size: 10px;
  line-height: 11px;
  color: black;
  opacity: 0.55;
  /* margin-top: -3px; */
  /* min-height: 17px; */
}

/* opcje */
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item-options {
  /* text-transform: lowercase;
  font-weight: 500; */
}

/* cena przekreślona */
.cart-drawer .side-panel-content .product-cart-item--container del {
  color: #D32F2F;
  font-size: 12px;
}
.cart-drawer .side-panel-content .product-cart-item--container del span {
  opacity: 1;
}

/* obrazek powiększony */
.cart-drawer .side-panel-content .product-cart-item--container .product-cart-item img, .product-cart-item .thb-placeholder {
  max-width: 90px;
}

/* discount */
.cart-drawer .side-panel-content .product-cart-item--container .discounts__discount {
  color: #ec93a2;
}

/* ilość */
.template-product .product-section .product-add-to-cart-container .add_to_cart_holder>div input.qty {
    background-color: transparent;
    border: none;
    width: 50px;
    height: 40px;
    font-size: 15px;
    line-height: 23.25px;
    margin: 0 8px;
    border-bottom: 1px solid black;
    font-weight: 400;
}
.cart-drawer .side-panel-content .product-cart-item--container .quantity {
  border: 0;
}
.cart-drawer .side-panel-content .product-cart-item--container input {
  margin: 0 17px;
  border-bottom: 1px solid black;
  font-weight: 400;
}
.cart-drawer .side-panel-content .product-cart-item--container button {
    background: #d0d0d0;
    opacity: .5;
    font-size: 1.6rem;
    background: #f5c7ce;
    border-radius: 50%;
    border: 0;
    color: #000;
    width: 25px;
    height: 25px;
    padding: 0;
    vertical-align: top;
    opacity: 1;
}
.cart-drawer .side-panel-content .product-cart-item--container button.minus {
    background: #d0d0d0;
}

/* rekomendacje nagłówek */
.cart-drawer .side-panel-content .product-recommendations-drawer__heading {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 26.25px;
}
.cart-drawer .product-recommendations-drawer {
  display: block;
}


/** FOOTER **/
/* podsumowanie */
.cart-drawer .side-panel-footer .cart-summary {
  text-transform: uppercase;
  font-weight: 500;
}
.cart-drawer .side-panel-footer .amount {
  font-weight: 600;
  padding-left: 7px;
  min-width: max-content;
}
@media (min-width: 769px) {
  .cart-drawer .side-panel-footer .amount {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .cart-drawer .side-panel-footer .cart-policy-text {
    font-size: 11px;
    line-height: 11px;
  }
}
/* link */
.cart-drawer .side-panel-footer .cart-policy-text a {
  text-decoration: underline;
}
.cart-drawer .side-panel-footer .cart-policy-text a:hover {
  color: #e7c0c7;
}



/* zgody */
.cart-drawer--terms {
  padding-top: 5px;
}
.cart-checkbox.privacy-info {
  font-size: 11px;
  padding-bottom: 0px;
  opacity: 0.55;
}
@media (min-width: 769px) {
  .cart-checkbox.privacy-info {
    font-size: 12px;
  }
}
/* cart-drawer .cart-checkbox.privacy-info {
  font-size: 11px;
} */
 
[id*="__main-cart"] .cart-checkbox.privacy-info {
  padding-bottom: 5px;
  opacity: 0.55;
}
.cart-checkbox label {
  font-size: 12px;
}
.cart-checkbox.privacy {
  /* margin-bottom: 5px; */
}
.required-star {
  color: red;
}

.cart-checkbox.terms, 
.cart-checkbox.privacy, 
.cart-checkbox.returns {
  line-height: 1.3;
  margin-bottom: 12px;
}
.cart-checkbox input {
  width: 23px;
  height: 23px;
}



/* style przycisków */
/* do koszyka */
.cart-drawer .side-panel-footer .cart-drawer-buttons a {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 17px 32px;
  background: white;
}
.cart-drawer .side-panel-footer .cart-drawer-buttons a:hover {
  color: black;
}
/* na checkout */
.cart-drawer .side-panel-footer .checkout-button {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 17px 32px;

  background-color: #F5C6CE;
  border-bottom: 4px solid black;
  color: black;
}
.cart-drawer .side-panel-footer .checkout-button:hover {
  /* background: #9f7e82;
  border: 1px solid #9f7e82;
  color: white; */
}
.cart-drawer .side-panel-footer .checkout-button:hover:before {
  transform: translateY(100%);
}


/* cart-drawer */
.cart-drawer .mini-cart__row .cart-policy-text {
  opacity: 0.55;
  margin-top: 0;
}



/* options do karty podarunkowej */
.product-cart-item .product-cart-item-options {
  margin-top: 0;
  line-height: 1.6;
}
.product-cart-item-options.custom-color {
  margin-top: 5px;
}









/*
------------------------------------------------------------------------------------------------------------
                                            !! MINI SMALL(!) KARTKA PRODUKTU !!

stworzono nowy product-card-small-CUSTOM.liquid
gdzie pojawia się: add-to-cart-pop-up (cart-drawer-CUSTOM.liquid), search-bar
------------------------------------------------------------------------------------------------------------
*/
/* szerokości */
.product-cart-item.small-cart-custom  {
  padding-right: 15px;
  align-items: start;
  
}
.product-cart-item.small-cart-custom .product-cart-item-image {
  margin-right: 5px;
}

/* napisy */
.product-cart-item.small-cart-custom .cart-product-link {
  font-size: 12px;
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  min-height: 29px;
}
.product-cart-item.small-cart-custom .cart-product-link:hover {
  color: #e7c0c7;
}
.product-cart-item.small-cart-custom .small-cart-tax-omnibus-container {
  font-size: 10px;
  line-height: 10px;
  color: black;
  opacity: 0.55;
}
.product-cart-item.small-cart-custom .unit-price {
  margin-bottom: 2px;
}
.product-cart-item.small-cart-custom .unit-price.hidden {
  visibility: hidden;
}
.product-cart-item.small-cart-custom .product__tax.caption {
  margin-bottom: 2px;
}


/* obrazek */
.product-cart-item.small-cart-custom img {
  max-width: 85px;
}

/* ceny */
.product-cart-item.small-cart-custom ins .amount {
  color: black;
}
.product-cart-item.small-cart-custom del {
  color: #E93636;
}
.product-cart-item.small-cart-custom del .amount {
  opacity: 1;
}






/*
------------------------------------------------------------------------------------------------------------
                                            !! SEARCH - search BAR !!

predictive-search.liquid
------------------------------------------------------------------------------------------------------------
*/
#predictive-search-results .search-categories a {
  color: #b88aa6;
}








/*
------------------------------------------------------------------------------------------------------------
                                            !! POLICIES!!

nie ma templatki, renderuje sie automatem do id="main-content"
------------------------------------------------------------------------------------------------------------
*/
#main-content:has(.shopify-policy__container) {
  display: block;
}
#main-content:has(.shopify-policy__container) a:hover{
  color: #f5c6ce;
}
#main-content .shopify-policy__container {
    text-align: left;
    max-width: 1360px;
}

.shopify-policy__body {
  font-size: 15px;
  letter-spacing: 0.2px;
  font-weight: 400;
  line-height: 23.25px;
}


/* nagłówek */
#main-content .shopify-policy__title {
  justify-content: left;
  padding-left: 0;
  padding-bottom: 0;
  border-bottom: 1px solid black;
  margin-bottom: 60px;
  min-height: unset;
  text-align: start;
}
#main-content .shopify-policy__title h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 64.8px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  #main-content .shopify-policy__title h1 {
    font-size: 25px;
    font-weight: 700;
    line-height: 35px;
  }
}




/******************
    REGULAMIN
*******************/

/* ── Intro box ── */
 .regulamin_2 .intro-box {
    border: 1pt solid #ccc;
    padding: 16px 20px;
    margin-bottom: 20px;
    text-align: justify;
  }

  .regulamin_2 .contact-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }

  .regulamin_2 .contact-table td {
    padding: 3px 6px;
    font-size: 10pt;
    vertical-align: top;
  }

  .regulamin_2 .contact-table td:first-child {
    width: 26%;
  }

  /* ── Headings ── */
  .regulamin_2 h1 {
    text-align: center;
    font-size: 14pt;
    text-decoration: underline;
    margin-bottom: 4px;
  }

  .regulamin_2 h2 {
    text-align: center;
    font-size: 12pt;
    text-decoration: underline;
    margin-top: 4px;
    margin-bottom: 6px;
  }

  .regulamin_2 .version-note {
    font-weight: bold;
    margin-bottom: 16px;
  }

  /* ── Main numbered sections ── */
  .regulamin_2 .regulamin-list {
    counter-reset: section;
    list-style-type: none;
    padding-left: 0;
  }

  .regulamin_2 .regulamin-list > li {
    counter-increment: section;
    margin-bottom: 22px;
  }

  .regulamin_2 .regulamin-list > li > .section-heading {
    font-weight: bold;
    text-align: center;
    display: block;
    margin-bottom: 6px;
  }

  .regulamin_2 .regulamin-list > li > .section-heading::before {
    content: counter(section) ". ";
  }

  .regulamin_2 .section-lead {
    font-weight: bold;
    margin: 8px 0 10px 0;
    text-align: justify;
  }

  /* ── Sub-section centre headings ── */
  .regulamin_2 .sub-heading {
    font-weight: bold;
    text-align: center;
    margin: 14px 0 6px 0;
  }

  /* ── Numbered sub-list (1. 2. 3.) ── */
  .regulamin_2 .sub-list-1 {
    counter-reset: subitem1;
    list-style-type: none;
    padding-left: 20px;
  }

  .regulamin_2 .sub-list-1 > li {
    counter-increment: subitem1;
    margin-top: 8px;
    text-align: justify;
    hyphens: auto;
  }

  .regulamin_2 .sub-list-1 > li::before {
    content: counter(subitem1) ". ";
  }

  .regulamin_2 .sub-list-1 > li > p {
    margin: 5px 0;
    text-align: justify;
    hyphens: auto;
  }

  /* ── Alpha list (a. b. c.) ── */
  .regulamin_2 .sub-list-alpha {
    list-style-type: lower-alpha;
    padding-left: 30px;
    margin: 6px 0;
  }

  .regulamin_2 .sub-list-alpha > li {
    margin: 5px 0;
    text-align: justify;
    hyphens: auto;
  }

  /* ── Roman list (i. ii.) ── */
  .regulamin_2 .sub-list-roman {
    list-style-type: lower-roman;
    padding-left: 30px;
    margin: 6px 0;
  }

  .regulamin_2 .sub-list-roman > li {
    margin: 5px 0;
    text-align: justify;
    hyphens: auto;
  }

  /* ── Inline numbered continuation (used inside alpha items) ── */
  .regulamin_2 .sub-list-num {
    counter-reset: numitem;
    list-style-type: none;
    padding-left: 0;
    margin: 6px 0;
  }

  .regulamin_2 .sub-list-num > li {
    counter-increment: numitem;
    margin-top: 6px;
    text-align: justify;
    hyphens: auto;
  }

  .regulamin_2 .sub-list-num > li::before {
    content: counter(numitem) ". ";
  }

  /* ── Definitions (§1 pkt 8) – compact indent ── */
  .regulamin_2 .def-list {
    list-style-type: lower-alpha;
    padding-left: 30px;
    margin: 6px 0;
  }

  .regulamin_2 .def-list > li {
    margin: 6px 0;
    text-align: justify;
    hyphens: auto;
  }

  /* ── Footer ── */
  .regulamin_2 .footer-note {
    margin-top: 30px;
    text-align: left;
    font-size: 10pt;
  }

  .regulamin_2 .footer-note p {
    margin: 6px 0;
  }

  .regulamin_2 a {
    color: #000;
  }

  #karta-podarunkowa {
    scroll-margin-top: 200px;
  }

@media (max-width: 768px){
  #karta-podarunkowa {
    scroll-margin-top: 150px;
  }
}

/*************************
    polityka prywatności
**************************/
.privacy_policy_2 h1 {
    text-align: center;
    font-size: 14pt;
    text-decoration: underline;
    margin-bottom: 4px;
  }

  .privacy_policy_2 h2 {
    text-align: center;
    font-size: 12pt;
    text-decoration: underline;
    margin-top: 4px;
    margin-bottom: 6px;
  }

  .privacy_policy_2 .version-note {
    text-align: center;
    font-weight: bold;
    margin-bottom: 24px;
  }

  .privacy_policy_2 .regulamin-list {
    counter-reset: section;
    list-style-type: none;
    padding-left: 0;
  }

  .privacy_policy_2 .regulamin-list > li {
    counter-increment: section;
    margin-bottom: 20px;
  }

  .privacy_policy_2 .regulamin-list > li > .section-heading {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
  }

  .privacy_policy_2 .regulamin-list > li > .section-heading::before {
    content: "§ " counter(section) " ";
  }

  .privacy_policy_2 .sub-list-1 {
    counter-reset: subitem1;
    list-style-type: none;
    padding-left: 20px;
  }

  .privacy_policy_2 .sub-list-1 > li {
    counter-increment: subitem1;
    margin-top: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .privacy_policy_2 .sub-list-1 > li::before {
    content: counter(subitem1) ". ";
    font-weight: normal;
  }

  .privacy_policy_2 .sub-list-1 > li > p {
    margin: 6px 0;
    text-align: justify;
    hyphens: auto;
  }

  .privacy_policy_2 .sub-list-alpha {
    list-style-type: lower-alpha;
    padding-left: 30px;
    margin: 8px 0;
  }

  .privacy_policy_2 .sub-list-alpha > li {
    margin: 6px 0;
    text-align: justify;
    hyphens: auto;
  }

  /* Section § 7 uses running prose with inline alpha lists */
  .privacy_policy_2 .prose-section {
    padding-left: 20px;
    text-align: justify;
    hyphens: auto;
  }

  .privacy_policy_2 .prose-section p {
    margin: 8px 0;
  }

  /* Tables */
  .privacy_policy_2 .data-table-container {
    width: 100%;
    margin: 12px 0;
  }

  .privacy_policy_2 .data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1pt solid #000;
  }

  .privacy_policy_2 .data-table th {
    background: #f5c6ce;
    border: 1pt solid #000;
    padding: 8px 10px;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
  }

  .privacy_policy_2 .data-table td {
    border: 1pt solid #000;
    padding: 8px 10px;
    font-size: 9pt;
    text-align: left;
    vertical-align: top;
  }

  .privacy_policy_2 .data-table td:first-child {
    width: 28%;
  }

  .privacy_policy_2 .data-table td:nth-child(2) {
    width: 44%;
  }

  .privacy_policy_2 .data-table td:nth-child(3) {
    width: 28%;
  }

  .privacy_policy_2 .storage-table {
    width: 100%;
    border-collapse: collapse;
    border: 1pt solid #000;
    margin: 12px 0;
  }

  .privacy_policy_2 .storage-table td {
    border: 1pt solid #000;
    padding: 8px 10px;
    font-size: 9pt;
    text-align: left;
    vertical-align: top;
  }

  .privacy_policy_2 .storage-table td:first-child {
    width: 45%;
    font-weight: bold;
    background: #f5c6ce;
  }

  .privacy_policy_2 .footer-note {
    margin-top: 30px;
    text-align: left;
  }













/*
------------------------------------------------------------------------------------------------------------

                                            !! cookie banner Pandektes !!

------------------------------------------------------------------------------------------------------------
*/

#pandectes-banner .cc-btn-decision {
  font-weight: 400;
  letter-spacing: normal;
  border-radius: 6px;
}
#pandectes-banner .cc-btn-decision:hover {
   background-color: rgba(245, 198, 206, 1);
}
#pandectes-banner .pd-cookie-banner-window {
  border-radius: 10px;
}
#pandectes-banner .cc-btn-decision.cc-allow {
   order: 1
}


/* zasłonka cookie baner Pandectes */
#pandectes-banner ~ .private-shadow {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  transition: opacity 0.2s;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
}
#pandectes-banner ~ .private-shadow.active {
  display: block;
  opacity: 1;
  pointer-events: auto;

}
body:has(.private-shadow.active) {
  overflow: hidden;
}












/*
------------------------------------------------------------------------------------------------------------

                                     !! HEADER:  nie pokazywać białe logo jesli nie ma video !!

------------------------------------------------------------------------------------------------------------
*/
.no_video .logolink.not_scrolled {
  display: none !important;
}
.no_video .header_pink_pass .text-with-icons__icon img.not_scrolled {
  display: none;
}

/*
  Flash fix: białe (not_scrolled) logo domyślnie ukryte na WSZYSTKICH stronach
  (render-blocking). Bez tego białe logo migało, bo body.no_video dodaje dopiero
  scroll-zależny JS (theme.liquid) — przed scrollem nic go nie chowało.
  Homepage-wideo: reguła pokazująca (.template-index #header.not_scrolled ...)
  jest bardziej specyficzna + !important → tam białe logo nadal się pokaże.
*/
.logolink.not_scrolled {
  display: none !important;
}

/*
  Logo inline (jedno SVG, kolor sterowany CSS) — zastepuje dwa <img> (czarne/biale).
*/
.logolink .logoimg {
  display: inline-flex;
  line-height: 0;
  margin-top: -10px;
  height: auto;
}
.logolink .logoimg svg {
  width: auto;
  height: var(--logo-height-mobile, 25px);
  display: block;
}
@media (min-width: 768px) {
  .logolink .logoimg svg {
    height: var(--logo-height, 30px);
  }
}
.logolink .logoimg svg path {
  fill: #000;
}
[id*="__header"] #header.not_scrolled .logolink .logoimg svg path {
  fill: #fff;
}
/* burger otwarty (menu mobile) na homepage-wideo → logo czarne (overlay menu ma jasne tlo) */
[id*="__header"] #header.not_scrolled .mobile-toggle-wrapper.active ~ .menu-logo-container .logolink .logoimg svg path {
  fill: #000 !important;
}

/*
  Przelacznik sklepu/jezyka (flagi PL/EU/DE) — CSS przeniesiony z inline <style>
  w snippets/localization-CUSTOM-header.liquid (ladowany PO <ul> w zrodle ->
  lista EU/DE renderowala sie w przeplywie i migala + reflowowala naglowek).
  Render-blocking (head) -> dropdown display:none + position:absolute od 1. klatki.
*/
.thb-shop-switcher {
  position: relative;
}
.thb-secondary-area .thb-secondary-item.thb-shop-switcher {
  padding-left: 11px;
  padding-right: 0;
}
.thb-shop-switcher__toggle {
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;
  background: #f5f5f5;
  padding: 2px;
  border-radius: 3px;
  margin-bottom: 3px;
}
.thb-shop-switcher__toggle .thb-shop-flag {
  border-radius: 2px;
  display: block;
}
.thb-shop-switcher__dropdown {
  display: none;
  position: absolute;
  top: calc(80%);
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 80px;
  z-index: 200;
}
.thb-shop-switcher__dropdown.is-open {
  display: block;
}
.thb-shop-switcher__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.15s;
}
.thb-shop-switcher__option:hover {
  background: rgba(0,0,0,0.05);
}
.thb-shop-switcher__option .thb-shop-flag {
  border-radius: 2px;
  flex-shrink: 0;
}
.thb-shop-switcher__arrow {
  margin-left: 4px;
  display: block;
  flex-shrink: 0;
}
.thb-shop-switcher__toggle[aria-expanded="true"] .thb-shop-switcher__arrow {
  transform: rotate(180deg);
}
.thb-shop-switcher__label {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 1;
}














/*
------------------------------------------------------------------------------------------------------------

                                     !! Wpisanie kodu w koszyku !!

------------------------------------------------------------------------------------------------------------
*/
.scDiscount {
  margin-bottom: 8px;
  margin-top: 0 !important;
}
 
.sc-cube-text::placeholder {
  color: grey !important;
  font-size: 12px;
}

#sc-discount__submit {
  font-size: 13px;
  font-size-adjust: none;
  line-height: 18px;
  letter-spacing: 0.2px;
  font-weight: 500;
  border-radius: 0;
}
.sc-cube-text.sc-cube-code {
  border-radius: 0;
  border-color: #dedede;
}

.cart-drawer-buttons {
  grid-template-columns: none;
  grid-gap: 7px;
}
.sc_simple-info__row:last-child {
  display: none !important;
}
.sc_simple-info:has(.sc_simple-info__row.sc_code-info:nth-child(3)) .sc_simple-info__row.sc_code-info:nth-child(2) {
  margin-bottom: 0;
}
.sc_simple-info .sc-tag {
  margin-bottom: 0;
}
.sc_simple-info .sc_simple-info__row div strong {
    font-size: 15px !important;
    line-height: 24px;
    font-weight: 500 !important;
    letter-spacing: .2px;
    text-transform: uppercase;
}
.sc_simple-info .sc_simple-info__row div:last-child {
  font-size: 15px;
  font-weight: 900;
}
@media (max-width: 768px) {
  .sc_simple-info .sc_simple-info__row div:last-child {
    font-weight: 600;
    padding-left: 7px;
    min-width: max-content;
    font-size: .9375rem;
  }
}
.scDiscount input[type=text] {
  border-radius: 0;
}


/* mniejszy odstepy */
.required-star-text {
  margin-bottom: 5px !important;
}
cart-drawer .cart-drawer-buttons {
  margin-top: 0;
}
cart-drawer .cart-drawer--terms {
  margin-bottom: 5px;
}
cart-drawer .cart-checkbox.privacy-info.cart-drawer-custom {
  line-height: 1;
}
cart-drawer .cart-checkbox.terms {
  margin-bottom: 8px;
}
cart-drawer .sc_simple-info .sc_simple-info__tag {
  margin-bottom: 0;
}


/* przesunięcie elementów */
.cart-drawer .side-panel-footer .cart-drawer-buttons a {
  /* position: absolute;
  bottom: 138px;
  width: -webkit-fill-available; */
  margin-right: 40px;
}
.cart-drawer .scDiscount__container {
  /* margin-bottom: 70px; */
}
.cart-drawer .sc_simple-info .sc_simple-info__row.sc_code-info:nth-child(2) {
  position: absolute;
  top: 5px;
  width: -webkit-fill-available;
  margin-right: 40px;
  display: flex !important;
}
.cart-drawer .sc_simple-info .sc_simple-info__row.sc_code-info:nth-child(3) {
  position: absolute;
  top: 27px;
  width: -webkit-fill-available;
  margin-right: 40px;
  display: flex !important;
}
.cart-drawer .sc_simple-info .sc_simple-info__row.sc_code-info:first-child {
  margin-bottom: 0;
}
.cart-drawer:has(.sc_simple-info .sc_simple-info__row div strong) .mini-cart__row.total {
  margin-top: 25px;
}
.cart-drawer:has(.sc_simple-info__row.sc_code-info:nth-child(3)) .mini-cart__row.total {
  margin-top: 40px;
}

.cart-drawer .side-panel-footer {
  padding-top: 8px;
  padding-bottom: 0px;
}
@media (max-width: 768px) {
  .cart-drawer .side-panel-footer .cart-drawer-buttons a {
    margin-right: 20px;
  }
  .cart-drawer .sc_simple-info .sc_simple-info__row.sc_code-info:nth-child(2) {
    margin-right: 20px;
  }
  .cart-drawer .sc_simple-info .sc_simple-info__row.sc_code-info:nth-child(3) {
    margin-right: 20px;
  }
  .cart-drawer:has(.sc_simple-info .sc_simple-info__row div strong) .mini-cart__row.total {
    margin-top: 20px;
  }
  .cart-drawer:has(.sc_simple-info__row.sc_code-info:nth-child(3)) .mini-cart__row.total {
    margin-top: 40px;
  }
}

/* miejsce dla kodu LOVE na całe zamówienie */
.cart-drawer .mini-cart__row.mini-cart__discount {
  position: relative;
  top: 25px;
}












/*
------------------------------------------------------------------------------------------------------------

                                     !! Poprawka label Bestseller z TM !!

------------------------------------------------------------------------------------------------------------
*/
/* produkt */
.tm-hornet-container .tm-bestseller-badge__text {
  font-size: 0 !important;
  position: relative;
}
.tm-hornet-container .tm-bestseller-badge__text:after {
  content: "Najlepiej oceniany";
  font-size: 0.7rem !important;  
  line-height: 1 !important;
  font-weight: 400 !important;
  position: relative !important;
  color: white !important;
}

.tm-multihornet .tm-bestseller-badge__text {
  font-size: 0 !important;
  position: relative;
}

/* produkt  - side-panel podglądu */
@media (max-width: 540px) {
  .side-panel-inner .tm-hornet-wrapper {
    flex-wrap: wrap;
  }
}




/* listing */
.tm-multihornet .tm-bestseller-badge__text:after {
  content: "Najlepiej oceniany";
  font-size: 0.6875rem !important;  
  line-height: 1 !important;
  font-weight: 400 !important;
  position: relative !important;
  color: white !important;
}
.tm-multihornet .tm-bestseller-badge {
  /* margin-left: -5px; */
}

product-card .opinions-wrapper.container-for-trustmate {
  /* CLS: rezerwacja miejsca na gwiazdki TrustMate. Skrypt TrustMate wstrzykuje
     widget pozno (JS) -> kontener rosnie 0->29,7px -> spycha tytul/cene/przycisk
     (widoczny skok na kolekcji/homepage/sliderach). Zmierzone na LIVE (TrustMate
     renderuje sie tylko tam, nie na sandboxie): uklad wierszowy = 29,7px wszedzie,
     niezaleznie od szer. karty (kolekcja 259 == homepage 267). Rezerwujemy ZAWSZE
     (tez gdy brak opinii) -> rowne karty. TrustMate nietkniety. border-box. */
  min-height: 30px;
}

product-card .tm-multihornet__wrapper.size-1.size-mobile-4 {
  height: 18.3281px;
}
.tm-multihornet .tm-multihornet__wrapper .tm-grade-label {
  margin-bottom: 3px;
}

/* column dla mniej niz 410px */
@media (max-width: 540px), (min-width: 1145px) and (max-width: 1250px) {
  
  /* CLS: w ukladzie kolumnowym (plakietka pod gwiazdkami) widget jest wyzszy
     -> wyzsza rezerwacja. Zmierzone na LIVE = 40,31px. */
  product-card .opinions-wrapper.container-for-trustmate {
    min-height: 41px;
  }
  
  .tm-multihornet .tm-grade-label {
      justify-content: center;
  }
  .tm-multihornet .tm-multihornet__wrapper {
    flex-direction: column;
    justify-content: start;
    margin-bottom: 12px;
  }
  .tm-multihornet .tm-bestseller-badge {
    margin: 0 auto;
    width: unset;
  }
  .tm-multihornet__wrapper .tm-bestseller-badge__text {
    padding: 3px;
  }
  .tm-multihornet .tm-multihornet__wrapper .tm-grade-label {
    margin-bottom: 0;
  }
}













.hss_container iframe html {
  background: #f0f0f0;
}
.epozytywnaopinia-body {
  background-color: #f0f0f0;
}











/*
------------------------------------------------------------------------------------------------------------

                                     !! Dodatkowa różowa belka !!

------------------------------------------------------------------------------------------------------------
*/
[id*="__announcement-bar"] {
  /* background-color: black; */
  position: sticky;
  /* top = suma wysokosci PRZYKLEJONYCH sekcji nad belka. Zmierzone 2026-07-31 (desktop):
     ticker1 32 + ticker2 32 + naglowek 81 = 145. Bylo 145.416px — ulamek ze starego pomiaru
     naglowka (81.416); przegladarka nie renderuje 0,4px, wiec zaokraglala go do WIDOCZNEJ
     wloskowej linii tla miedzy naglowkiem a belka. Przy zmianie wysokosci naglowka albo
     liczby tickerow te wartosci trzeba przeliczyc (patrz --header-height z header.js:96). */
  /* 2026-08-04: --sticky-stack-above-bar usunieta razem ze skryptem, ktory ja liczyl.
     Zostaje wartosc desktopowa wpisana wprost: ticker1 32 + ticker2 32 + naglowek 81 = 145.
     Na mobile pas nie jest juz przyklejony (patrz zapytanie max-width:768px nizej), wiec ta
     wartosc dotyczy WYLACZNIE desktopu. Przy zmianie wysokosci naglowka albo liczby
     tickerow trzeba ja przeliczyc — patrz --header-height z header.js:96. */
  top: 145px;
  left: 0;
  z-index: 61;
}

body.is_video [id*="__announcement-bar"] {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
}
@media (max-width: 1067.999px) {
  [id*="__announcement-bar"] {
    top: 125px;
  }
}
/* MOBILE: pas kampanii NIE jest przyklejony (2026-08-04) — odjezdza przy przewijaniu.
   body.is_video wymienione osobno, bo ustawia position:fixed z wyzsza specyficznoscia
   (0,2,0 vs 0,1,0) i bez tego na stronach z filmem pas nadal by sie przyklejal. */
@media (max-width: 768px) {
  [id*="__announcement-bar"],
  body.is_video [id*="__announcement-bar"] {
    position: static;
    top: auto;
  }
}


[id*="__announcement-bar"] .announcement-bar {
  background-color: #f2c6cf !important;
  color: black !important;
  padding: 0;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  min-height: 36px;
  height: auto;
  display: flex;
}
/* [id*="__announcement-bar"] .announcement-bar {
  max-width: 2000px;
} */
[id*="__announcement-bar"] .announcement-bar--inner {
  margin: auto;
  /* max-width: 2000px; */
  width: 100%;
  background: #f2c6cf !important;
}
[id*="__announcement-bar"] .announcement-bar.not_scrolled {
  background-color: transparent !important;
  color: white;
}
[id*="__announcement-bar"] .announcement-bar.not_scrolled .announcement-bar--inner {
  background-color: transparent !important;
  color: white;
}
[id*="__announcement-bar"] .announcement-bar--text {
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight:400;
  height:32px;
  letter-spacing:0.2px;
  line-height:32px;
  overflow: hidden;

  min-height: 32px;
  height: auto;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;

  display: flex;
}
[id*="__announcement-bar"] .not_scrolled .announcement-bar--text {
  /* color: white; */
  font-weight: 900;
}
[id*="__announcement-bar"] .announcement-bar .announcement-bar--text p{
  font-size: 12px;
  font-style: normal;
  font-weight:400;
  height:32px;
  letter-spacing:0.2px;
  line-height: 1.2;
  line-height: 1.2;
  padding: 0px;
  margin: auto;

  font-weight: bold;
  font-size: 16px;

}


/* Przy otwartej wyszukiwarce belka NIE jest już ukrywana (dawne display:none /                                                                                            
    visibility:hidden) — backdrop na cały ekran przyciemnia ją jak pozostałe paski. */
body.overflow-hidden [id*="__announcement-bar"] {
  /* display: none; */
}

/* ukrycie belki, jeśli otwarta wyszukiwarka */
[id*="__header"].search-open + [id*="__announcement-bar"] {
  /* visibility: hidden; */
}



/* stock na tej belce */
.product-inventory-notice {
  font-size: 0.8125rem;
  line-height: 1;
  margin-bottom: 20px;
  color: var(--color-inventory-instock, #279a4b); 
}
.product-inventory-notice--text {
    margin-bottom: 13px;
    display: flex;
    align-items: center; 
}
.product-inventory-notice--pulse {
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin: 4px 12px 4px 4px;
    position: relative;
    border-radius: 50%;
    background: var(--color-inventory-instock, #279a4b);
    vertical-align: middle; 
}
.product-inventory-notice--pulse:after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background: var(--color-inventory-instock, #279a4b);
      animation: inventory-pulse 2s ease-out infinite; 
}
.product-inventory-notice--bar {
    display: block;
    position: relative;
    height: 4px;
    width: 100%;
    background: var(--color-border); 
}
.product-inventory-notice--bar span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-inventory-instock, #279a4b);
      transform-origin: top left;
      animation: inventory-bar 1s ease-out forwards; 
}
.product-inventory-notice--low .product-inventory-notice--pulse {
      background: var(--color-inventory-lowstock, #279a4b); 
}
.product-inventory-notice--low .product-inventory-notice--pulse:after {
      background: var(--color-inventory-lowstock, #279a4b); 
}

@keyframes inventory-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.5); 
  }
  to {
    opacity: 0;
    transform: scale(1); } 
  }

@keyframes inventory-bar {
  0% {
    transform: scale(1, 1); 
  }
  to {
    transform: scale(calc(var(--inventory-scale)), 1); 
  } 
  }











/*
------------------------------------------------------------------------------------------------------------

                                     !! SM sidebar !!

------------------------------------------------------------------------------------------------------------
*/
#contentWrapper > div {
  top: 55px !important;
}






/*
------------------------------------------------------------------------------------------------------------

                                     !! tracking page !!

------------------------------------------------------------------------------------------------------------
*/
#track123-powered-by {
 display: none !important; 
}

/* === KARTA: ocena TrustMate (multihornet) === */
/* gwiazdki mniejsze - wszedzie */
.tm-multihornet .tm-multihornet__wrapper.size-1{ font-size:9px !important; }
/* wysokosc ikony gwiazdki: TrustMate wstrzykuje height:1.9em wlasnym CSS (nie ma tego w motywie) -> nadpisujemy na 1.5em.
   Selektor 1:1 jak ich + !important, bo ich arkusz doklada sie w runtime i kolejnosc ladowania nie jest pewna.
   .tm-multihornet dotyczy listingu/reco/HP; PDP uzywa .tm-hornet i zostaje nietkniete. */
.tm-multihornet__wrapper .tm-grade-label__star .trustmate-star__icon{ height:1.5em !important; }
/* ocena + liczba opinii dopasowane do mniejszych gwiazdek. Baza = font-size wrappera (u nas 9px).
   TrustMate: .tm-grade-label__text = 1.6em (14,4px) -> bylo WYZSZE niz gwiazdka 1.5em (13,5px);
   span "(N)" = .8em liczone od tekstu. Zostajemy w em, bo widzet skaluje baze klasami size-*/size-mobile-*. */
.tm-multihornet__wrapper .tm-grade-label__text{ font-size:1.3em !important; font-weight:400 !important; }   /* "4.9" -> 11,7px, bez bolda (TrustMate daje 500) */
.tm-multihornet__wrapper .tm-grade-label__text span{ font-size:.9em !important; }     /* "(53)" -> 10,5px */
/* tekst badge zawsze w 1 linii */
.tm-bestseller-badge, .tm-bestseller-badge__text, .tm-bestseller-badge__text:after{ white-space:nowrap !important; }
/* badge TYLKO na listingu kolekcji (ukryty w reco/homepage; PDP=tm-hornet nietkniety) */
.tm-multihornet .tm-bestseller-badge{ display:none !important; }
/* listing: badge pod gwiazdkami (wrapper column) - zawezone, nie rusza reco/homepage */
body.template-collection [id*="__product-grid"] .tm-multihornet .tm-bestseller-badge{ display:inline-flex !important; flex-direction:row !important; align-items:center !important; gap:4px !important; width:auto !important; max-width:none !important; white-space:nowrap !important; position:static !important; float:none !important; margin:2px auto 0 !important; }
body.template-collection [id*="__product-grid"] .tm-multihornet .tm-bestseller-badge *{ white-space:nowrap !important; }
body.template-collection [id*="__product-grid"] .tm-multihornet .tm-multihornet__wrapper{ flex-direction:column !important; align-items:center !important; height:auto !important; width:100% !important; }


/* Pigułka pojemności: domyślnie ukryta (reco/strona główna/PDP); pokazywana tylko na listingu kolekcji przez product-grid-CUSTOM.css */
.product-capacity-slot{display:none;}


/* Brak ceny jednostkowej -> kropka "·" przed "w tym VAT" zbędna (globalnie: listing, reco, HP, PDP) */
.unit-price-wrapper .unit-price.hidden ~ .tax-sep{ display:none !important; }

/* pusta marka rezerwuje slot (nie kurczy sie w kolumnie flex) - listing/reco/HP */
.product-card-brand{ flex:0 0 auto; }

/* opinie na reco/HP w tym samym rozmiarze co listing (9px) niezależnie od klasy size-N */
.product-recommendations .tm-multihornet__wrapper,
.homepage_custom_collection_main .tm-multihornet__wrapper{ font-size:9px !important; }

/* opinie na reco/HP: slot jak na listingu — inner wrapper margin-bottom 12px->8px + height:auto (globalny 12px robil za wysoki slot) */
.product-recommendations .tm-multihornet .tm-multihornet__wrapper,
.homepage_custom_collection_main .tm-multihornet .tm-multihornet__wrapper{ margin-bottom:8px !important; height:auto !important; }

/* reco/HP: slot opinii = 18px jak listing (nadpisuje CLS-owe min-height:41px, ktore ma wyzsza specyficznosc niz reguly reco/HP) */
.product-recommendations product-card .opinions-wrapper.container-for-trustmate,
.homepage_custom_collection_main product-card .opinions-wrapper.container-for-trustmate{ min-height:18px !important; }

/* padding poziomy karty info = 5px (wszystkie widżety); pion (rezerwa dołu) bez zmian */
.product-card .product-card-info{ padding-inline: 5px !important; }

/* przycisk dodaj do koszyka: 5px od krawędzi (wyrównany z padding-inline:5px karty info) */
.product-card .product-card--add-to-cart-button{ left:5px !important; right:5px !important; }

/* MENU MOBILNE: odchudzenie (2026-08-04). Skala 15/14/13, waga 400, bez wersalikow.
   Ciezkosc robily: czarne linie pod wierszami, wersaliki i niespojna hierarchia —
   regula z ~802 uzywa POTOMKA `li`, wiec styl poziomu 1 wyciekal na podgrupy z podmenu.
   WSZYSTKO zawezone do .mobile-menu-drawer: klasa .mobile-menu zasila tez boczna
   kolumne listingu. 4 klasy w selektorach, zeby pobic ~791/802/858 bez !important. */

/* poziom 1: 15px, waga 400, bez wersalikow.
   Struktura: li > details.link-container > summary.parent-link > a  (gdy ma podmenu)
              li > div.link-container > a                            (gdy nie ma)
   line-height 18.6px z ~linii 795 bylo sztywno ustawione pod 12px — przy 15px dusi
   tekst, wiec 1.35. Wiersz urosnie z ~57px do ~58px.
   Prog WCAG 2.5.8 (AA) to 24x24 px, nie 44 — mamy dwukrotny zapas. 44x44 to 2.5.5,
   poziom AAA, oraz wytyczne Apple/Androida, nie wymog AA. */
.mobile-menu-drawer .mobile-menu > li > .link-container > a,
.mobile-menu-drawer .mobile-menu > li > .link-container > summary.parent-link > a{
  font-size:15px; font-weight:400;
  text-transform:none; letter-spacing:.01em; line-height:1.35;
}

/* poziom 2: 14px — wyrownuje oba przypadki (z podmenu i bez) do jednej wartosci.
   W tym menu kazdy poziom 2 ma podmenu, wiec drugi selektor to siatka bezpieczenstwa
   na wypadek dodania w panelu podpozycji bez wlasnej zawartosci. */
.mobile-menu-drawer .mobile-menu .sub-menu > li > a,
.mobile-menu-drawer .mobile-menu .sub-menu > li > .link-container > summary.parent-link > a{
  font-size:14px; font-weight:400;
  text-transform:none; letter-spacing:.01em; line-height:1.35;
}

/* poziom 3: 13px */
.mobile-menu-drawer .mobile-menu .sub-menu .sub-menu > li > a{
  font-size:13px; font-weight:400;
  text-transform:none; letter-spacing:.01em; line-height:1.35;
}

/* czarne linie pod wierszami — usuniete. Zrodlo obramowania: mobile-menu.css:126 i :171,
   pomalowane na czarno w app-CUSTOM.css ~770-773.
   Strukture trzyma swiatlo (padding bez zmian) i istniejacy ciemniejszy pasek rozwinietej
   pozycji — .link-container.submenu-open > summary, app-CUSTOM.css ~775. */
.mobile-menu-drawer .mobile-menu > li > .link-container > a,
.mobile-menu-drawer .mobile-menu > li > .link-container > summary,
.mobile-menu-drawer .mobile-menu > li > .link-container > ul,
.mobile-menu-drawer .mobile-menu .sub-menu{
  border-bottom:0;
}

/* sekcja uzytkowa: pozycje poziomu 1, ktore nie sa kolekcja.
   KOLOR #6f6a65 = 4.60:1 na rozowym #ffe8ef. UWAGA: kolor sekcji uzytkowej z bocznej
   kolumny (#79746f) ma tu tylko 3.97:1, a akcent #9c5f6d 4.22:1 — rozowe tlo zjada zapas
   kontrastu, wiec kolorow sprawdzonych na bialym tle NIE przenosimy tutaj. */
.mobile-menu-drawer .mobile-menu > li.is-secondary > .link-container > a,
.mobile-menu-drawer .mobile-menu > li.is-secondary > .link-container > summary.parent-link > a{
  font-size:13px; font-weight:400; color:#6f6a65;
}
/* kreska nad PIERWSZA pozycja uzytkowa — selektor rodzenstwa, wiec odporny na zmiane
   kolejnosci menu w panelu. Nie zaklada, ze jest ich piec ani ze stoja na koncu. */
.mobile-menu-drawer .mobile-menu > li:not(.is-secondary) + li.is-secondary{
  margin-top:10px; padding-top:8px; border-top:1px solid rgba(23,19,15,.12);
}

/* ODSTEPY zmniejszone (2026-08-04): poziom 1 padding 19px -> 14px (wiersz 58 -> 48px),
   swiatlo rozwinietej grupy 15px -> 8px. Zwiniete menu 926 -> 766px.
   Poziomy 2 i 3 NIETKNIETE — maja 30px i 28px przy progu WCAG 2.5.8 (AA) = 24px. */
.mobile-menu-drawer .mobile-menu > li > .link-container > a,
.mobile-menu-drawer .mobile-menu > li > .link-container > summary{
  padding-top:14px; padding-bottom:14px;
}

/* swiatlo rozwinietej grupy: 15px -> 8px gora i dol. Grupa i tak jest odcieta wizualnie
   ciemniejszym paskiem naglowka (.submenu-open), wiec 15px bylo nadmiarem. */
.mobile-menu-drawer .mobile-menu .sub-menu{
  padding-top:8px; padding-bottom:8px;
}

/* POZIOM 3: naprawa wystawania (2026-08-04). Zagniezdzone .sub-menu ma margin-left 15px
   (od 768px: 40px) ORAZ width:100% — prawa krawedz wypadala poza ekran i byla obcinana
   przez overflow:hidden. Skutek: szerokosc tekstu zawyzona, dluga nazwa nie zawijala sie,
   tylko tracila ogon. width:auto. Blad byl na KAZDEJ szerokosci, nie tylko waskiej. */
.mobile-menu-drawer .mobile-menu .sub-menu .sub-menu{
  width:auto;
}

/* Przelacznik sklepu skrocony do flagi (2026-08-04): chowamy napis "PL", strzalka ZOSTAJE
   (bez wskaznika flaga wyglada na oznaczenie kraju, nie kontrolke). 80px -> 53px.
   CSS-em, NIE w localization-CUSTOM-header.liquid — tam jest logika przeskoku na
   odpowiednik strony (metapola adres_url_w_eu/de + /policies/); nie tykac.
   min-height 44px: dotyk mial 26px. top:100% na liscie: przy 80% wchodzila w przycisk. */
@media (max-width: 768px) {
  #shop-switcher .thb-shop-switcher__label {
    display: none;
  }
  #shop-switcher .thb-shop-switcher__toggle > .thb-shop-flag {
    width: 24px;
    height: 16px;
  }
  #shop-switcher .thb-shop-switcher__toggle {
    min-height: 44px;
  }
  #shop-switcher .thb-shop-switcher__dropdown {
    top: 100%;
  }
}

/* === MOBILNY NAGLOWEK: pole wyszukiwania (2026-08-05) ===
   Domyslnie ukryte — pokazuje sie tylko ponizej 767px, gdzie naglowek ma dwa rzedy.
   Prog 767, nie 768: tak jest w istniejacych regulach naglowka (app-CUSTOM.css ~547),
   a mieszanie progow zostawialo szczeline dokladnie przy 768px.
   Kolor tekstu #5c5651 jest PROPOZYCJA do sprawdzenia pomiarem — jesli nie wyjdzie
   4.5:1 na tle #f0efee, zamieniamy na #4a4340. */
.thb-mobile-search { display: none; }

@media only screen and (max-width: 767px) {
  .thb-mobile-search {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 44px, nie 40: to obszar dotyku, a w ograniczeniach planu przyjelismy 44px
       (wytyczna Apple). Prog WCAG 2.5.8 na poziomie AA to 24px, wiec 40px tez by
       przeszlo — ale skoro rzad ma 48px, nie ma powodu schodzic ponizej wlasnego celu. */
    height: 44px;
    padding: 0 14px;
    background: #f0efee;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.3;
    color: #5c5651;
    text-decoration: none;
  }
  .thb-mobile-search:hover,
  .thb-mobile-search:focus-visible { color: #17130f; text-decoration: none; }
  .thb-mobile-search svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .thb-mobile-search__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Polecane w wyszukiwarce: nie pobieraj obrazkow, dopoki nakladka zamknieta (2026-08-05).
   Bylo 6 zbednych zadan na kazdej stronie: nakladka jest odsunieta `transform`, nie
   `display:none`, a lazysizes ma loadMode 3 (pobiera niezaleznie od widoku).
   display:none na samym bloku (nakladka musi zostac — trzyma pole i wyniki), obrazki
   maja data-src (header.liquid: defer_image), a po otwarciu predictive-search.js wola
   lazySizes.loader.checkElems(). Efekt: 0 zadan przed otwarciem. */
.thb-quick-search--recommended {
  display: none;
}
.header-section.search-open .thb-quick-search--recommended {
  display: block;
}

/* === MOBILNY NAGLOWEK: KOSZYK W DRUGIM RZEDZIE (2026-08-05, prosba uzytkowniczki) ===
   Koszyk przenosimy z rzedu logo do rzedu z wyszukiwarka, po prawej.
   Robimy to POZYCJONOWANIEM, nie siatka: koszyk jest wnukiem siatki (siedzi w
   .thb-secondary-area), a grid-area dziala tylko na bezposrednich dzieciach. Alternatywy
   byly gorsze: wyjecie go w Liquidzie psuje uklad desktopowy, a zdublowanie markupu
   dawaloby dwa razy id="cart-drawer-toggle", z ktorym wiaze sie JS motywu.
   Skutek uboczny: koszyk wypada z przeplywu, wiec grupa ikon w rzedzie 1 zweza sie
   o jego szerokosc — logo dostaje wiecej miejsca.
   `top: 48px` to wysokosc rzedu 1; jesli kiedys zmienimy grid-template-rows, trzeba
   przeliczyc te wartosc. */
@media only screen and (max-width: 767px) {
  .header > .row > .columns {
    position: relative;
  }
  .thb-secondary-area > a#cart-drawer-toggle {
    position: absolute;
    top: 48px;
    /* 7.5px = padding-right kontenera .columns. `right` przy pozycjonowaniu absolutnym
       liczy sie od krawedzi PADDING BOXa bloku zawierajacego, a nie od tresci siatki,
       wiec przy right:0 koszyk wystawal 7,5px dalej w prawo niz ikony nad nim.
       Jesli padding .columns kiedys sie zmieni, te wartosc trzeba przeliczyc. */
    right: 7.5px;
    height: 48px;
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* miejsce na koszyk, zeby nie nachodzil na pole */
  .thb-mobile-search {
    margin-right: 42px;
  }
}