/* ==========================================================================
   TRUE DROP — VAULT
   Warstwa stylu motywu potomnego dla v1_kkillur_3.

   Zasady, których trzyma się ten plik:
   1. Celuje wyłącznie w klasy zweryfikowane w kodzie sklepu (tvcms*, tvproduct*)
      oraz w standardowe klasy rdzenia PrestaShop (product-miniature, facet,
      form-control, #checkout, .page-my-account) — te są niezależne od motywu.
   2. Nie zmienia struktury. Żaden element nie jest przenoszony ani ukrywany,
      jeśli nie jest to jawnie opisane.
   3. Ścieżki zakupowe (koszyk, kasa, konto) dostają wyłącznie kolory i kontrast,
      bez ingerencji w układ — tam każdy błąd kosztuje zamówienie.
   ========================================================================== */

/* Kroje pisma NIE są ładowane przez @import.
   @import na początku arkusza blokuje jego parsowanie do czasu odpowiedzi
   z fonts.googleapis.com i opóźnia pierwsze wyrenderowanie strony — czyli
   dokładnie ten problem, który wytknęliśmy w audycie wydajności.
   Rejestracja fontów jako zasobu zdalnego jest w config/theme.yml. */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root {
  --td-ink-900: #0a0a0b;
  --td-ink-850: #0f0f11;
  --td-ink-800: #141417;
  --td-ink-750: #1a1a1e;
  --td-ink-700: #212126;
  --td-ink-600: #2c2c33;
  --td-ink-500: #3d3d46;

  --td-bone: #f2f1ec;
  --td-bone-dark: #e6e4dc;
  --td-paper: #ffffff;

  /* Kontrasty policzone wzorem WCAG względem --td-ink-900 (#0a0a0b).
     text-low był wcześniej #74747e = 4,28:1, czyli poniżej progu AA (4,5:1)
     — a używamy go m.in. na 11-pikselowym komunikacie Omnibus. */
  --td-text-hi: #f6f5f2;   /* 18,15:1 — AAA */
  --td-text-mid: #a8a8b0;  /*  8,38:1 — AAA */
  --td-text-low: #84848e;  /*  5,35:1 — AA  */

  --td-volt: #d6ff3f;      /* 17,2:1 */
  --td-volt-dim: #b4d92f;
  --td-flame: #ff3b30;     /*  5,6:1 */
  --td-mint: #34d399;

  --td-line: rgba(255, 255, 255, .10);
  --td-line-strong: rgba(255, 255, 255, .18);

  --td-f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --td-f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --td-f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --td-r-sm: 10px;
  --td-r-md: 14px;
  --td-r-lg: 20px;
  --td-r-pill: 999px;

  --td-ease: cubic-bezier(.16, 1, .3, 1);
  --td-fast: 140ms;
  --td-base: 240ms;

  --td-tabbar: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   2. BAZA
   Tekst bazowy podnosimy z 14 px na 16 px. Poniżej 16 px iOS automatycznie
   przybliża stronę przy kliknięciu w pole formularza — to najczęstsza przyczyna
   „skaczącego” checkoutu na iPhonie.
   -------------------------------------------------------------------------- */
body {
  background: var(--td-ink-900) !important;
  color: var(--td-text-hi);
  font-family: var(--td-f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Kontenery motywu rodzica z własnym jasnym tłem.
   Lista powstała z przeglądu wyrenderowanej strony, nie z domysłów — motyw
   ustawia tło na kilku poziomach zagnieżdżenia i pominięcie choćby jednego
   zostawia biały prostokąt na środku ciemnej strony. */
#wrapper,
#content-wrapper,
.container,
.container-fluid,
#main,
section#main,
.tv-main-div,
.tv-box-layout,
#left-column,
#right-column,
.block-categories,
.tv-category-main-div,
.tv-sub-category-inner,
.products-selection,
#js-product-list-top,
#js-product-list-bottom,
.footer-container,
.tvcmsfooter-background-image,
.tvfooter-copy-payment-icon-wrapper,
.tvcmsfooter-top-wrapper {
  background: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   MODUŁY STRONY GŁÓWNEJ
   Ta sekcja powstała z pomiarów na DZIAŁAJĄCYM sklepie po aktywacji motywu.
   Żadnego z tych bloków nie było w statycznym zrzucie, na którym pracowaliśmy
   wcześniej — renderują je moduły tvcms* dopiero na żywo.
   ========================================================================== */

/* --- Nagłówki sekcji ------------------------------------------------------
   Najpoważniejszy problem: motyw ustawia <h2> wewnątrz .tvmain-title na #111,
   czyli prawie czarny na prawie czarnym tle. Napisy „TRUE DROP COLLECTION”,
   „OPINIE KLIENTÓW” czy „NASI PARTNERZY” były fizycznie na stronie, ale
   niewidoczne. Ogólna reguła h1–h6 przegrywała z bardziej szczegółową regułą
   motywu, dlatego celujemy dokładnie w te selektory. */
.tvmain-title,
.tvmain-title h1, .tvmain-title h2, .tvmain-title h3,
.tvmain-title a, .tvmain-title span,
.tvcategory-slider-main-title-wrapper h2,
.tvcategory-chain-slider-main-title-wrapper h2,
.tvtabcategory-main-title-wrapper h2,
.tvtestimonial-main-title-wrapper h2,
.tvcmsproduct-main-title-wrapper h2 {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-display);
  text-transform: uppercase;
  letter-spacing: -.02em;
  word-spacing: .1em;
}
.tvmain-sub-title,
.tvmain-title-des,
.tvcategory-slider-sub-title { color: var(--td-text-mid) !important; }

/* --- Opinie klientów ------------------------------------------------------
   Karta miała jasnoszare tło #f1f1f1, a tekst w niej dziedziczył już nasz
   jasny kolor — czyli biały na jasnym. Nieczytelne w całości. */
.tvtestimonial-wrapper-info,
.item.tvtestimonial-wrapper-info,
.tvtestimonial-wrapper,
.tvtestimonial-content {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
  color: var(--td-text-hi) !important;
}
.tvtestimonial-title { color: var(--td-text-hi) !important; font-weight: 700; }
.tvtestimonial-designation,
.tvtestimonial-title-des { color: var(--td-text-mid) !important; }
.tvtestimonial-des,
.tvtestimonial-description { color: var(--td-text-hi) !important; }
.tvtestimonial-wrapper-info .material-icons,
.tvtestimonial-wrapper-info .star_content i { color: var(--td-volt) !important; }

/* --- Stopka ---------------------------------------------------------------
   Tytuły kolumn i nagłówek sklepu stacjonarnego miały kolor rgb(0,0,0)
   na ciemnym tle stopki. */
.tvfooter-title,
.tvfooter-store-title,
.tvfooter-title-wrapper .tvfooter-title,
#footer .tvfooter-title {
  color: var(--td-text-hi) !important;
}
.tvfooter-store-time,
.tvfooter-store-address { color: var(--td-text-mid) !important; }

/* --- Karuzela marek / łańcuch kategorii ---------------------------------- */
.tvcategory-chain-title,
.tvcategory-chain-title a,
.tvcategory-chain-content-wrapper { color: var(--td-text-hi) !important; }
.tvcategory-chain-slider-wrapper,
.tvcategory-chain-slider-info-wrapper {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
}
/* Logotypy marek to pliki na białym tle — kafel w kolorze kości plus
   mieszanie `multiply` sprawia, że biel znika bez widocznej krawędzi. */
.tvcategory-chin-img-block,
.tvcategory-chain-img-block { background: var(--td-bone) !important; border-radius: var(--td-r-sm); overflow: hidden; }
.tvcategory-chin-img-block img,
.tvcategory-chain-img-block img { mix-blend-mode: multiply; }

/* --- Fioletowe akcenty motywu --------------------------------------------
   Motyw rysuje ozdobne kreski i znaczniki pseudoelementami w kolorze akcentu
   z panelu (#71009d / #520091). Na ciemnym tle wyglądają jak resztka starej
   kolorystyki, więc zamieniamy je na limonkowy akcent motywu.
   Kolor akcentu w opcjach motywu ZOSTAJE bez zmian — nadpisujemy tylko te
   miejsca, w których się pojawia. */
.tvmain-slider-content-inner.active::after,
.tvcategory-slider-info-box::after,
.tvfooter-title::before,
.tvfooter-store-title::before,
.tvmain-title::after,
.tvmain-title::before {
  background-color: var(--td-volt) !important;
}

/* --- Zakładki kategorii („Męskie / Damskie / Wyprzedaż”) ------------------ */
.tvtabcategory-tab-sub-title,
.tvtabcategory-product-li a,
.tvtabcategory-product-li span { color: var(--td-text-mid) !important; }
.tvtabcategory-product-li.active .tvtabcategory-tab-sub-title,
.tvtabcategory-product-li.active a,
.tvtabcategory-product-li.active span { color: var(--td-ink-900) !important; }

/* Bloki modułów strony głównej, które renderują się dopiero na żywym sklepie
   (karuzele kategorii, zakładki produktów, wysuwane menu mobilne). Wykryte
   po aktywacji motywu — nie było ich w zrzucie, na którym pracowaliśmy. */
.tvmobile-slidebar,
.tvsingle-block,
.tvtabcategory-product-li,
.tvtabcategory-product-li.active,
.tvcategory-chain-slider-wrapper,
.tvcategory-slider-wrapper,
.tvtabcategory-tab-sub-title {
  background: var(--td-ink-850) !important;
  color: var(--td-text-hi);
}
.tvmobile-slidebar { border-right: 1px solid var(--td-line); }
.tvmobile-slidebar a { color: var(--td-text-hi); }

.tvtabcategory-product-li {
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-pill);
  color: var(--td-text-mid) !important;
}
.tvtabcategory-product-li.active {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
.tvtabcategory-product-li.active a,
.tvtabcategory-product-li.active span { color: var(--td-ink-900) !important; }

/* --------------------------------------------------------------------------
   REGUŁY PRZEGRYWAJĄCE Z WŁASNYM CSS-em SKLEPU

   Sklep wstrzykuje inline blok własnego CSS (moduł tvcmscustomcssjs / pole
   „własny CSS” w opcjach motywu) — ok. 4 kB, 20 z 21 reguł z `!important`.
   Inline <style> ląduje po naszym arkuszu, więc przy równej specyficzności
   i równym `!important` wygrywa kolejnością.

   Dokładamy więc jeden element (`html` albo `body`) do selektora, co daje
   wyższą specyficzność i rozstrzyga na naszą korzyść.

   DOCELOWO te reguły należy usunąć z własnego CSS sklepu — stylowały stary
   wygląd (czarne tło, żółte przyciski) i teraz tylko z nim walczą.
   Lista do usunięcia jest w panel/07-wlasny-css.md.
   -------------------------------------------------------------------------- */
html body {
  background: var(--td-ink-900) !important;
}

html body .tvcategory-slider-info,
html body .tvcategory-slider-info-box,
html body .tvcategory-slider-info-box {
  background-color: var(--td-ink-850) !important;
  color: var(--td-text-hi) !important;
}
html body .tvcategory-slider-info a,
html body .tvcategory-slider-info-box a { color: var(--td-text-hi) !important; }
html body .tvcategory-slider-info-box:hover {
  background-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
html body .tvcategory-slider-info-box:hover a { color: var(--td-ink-900) !important; }

html body .products-selection {
  background-color: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
}

/* Powierzchnie, które mają pozostać wyodrębnione — dostają ciemny odcień
   zamiast przezroczystości, żeby zachować hierarchię. */
#left-column .block-categories,
.tv-sub-category-inner,
.products-selection {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
}

.footer-container,
.tvfooter-copy-payment-icon-wrapper {
  background: var(--td-ink-850) !important;
}

p, li, td, dd, span, div, label { color: inherit; }

a { color: var(--td-text-hi); transition: color var(--td-fast) linear; }
a:hover, a:focus { color: var(--td-volt); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--td-f-display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  color: var(--td-text-hi);
  /* Archivo w wersalikach ma ciasny tracking — bez tego „DROP RADAR”
     czyta się jak jedno słowo. */
  word-spacing: .1em;
}

hr { border-color: var(--td-line); }

::selection { background: var(--td-volt); color: #000; }

:focus-visible {
  outline: 3px solid var(--td-volt);
  outline-offset: 2px;
}

/* Pasek przewijania w tonacji strony */
html { scrollbar-color: var(--td-ink-600) var(--td-ink-900); }

/* --------------------------------------------------------------------------
   3. NAGŁÓWEK
   -------------------------------------------------------------------------- */
/* Motyw rodzica ma w nagłówku cztery zagnieżdżone kontenery z własnym jasnym
   tłem (#eee na pasku logo, #fff na pasku menu i na formularzu wyszukiwania).
   Wszystkie są wymienione jawnie — inaczej nagłówek zostaje biały. */
#header,
.tvcmsdesktop-top-header-wrapper,
.tvcmsdesktop-top-header,
.tvcmsdesktop-top-second,
.tvcmsdesktop-main-menu-wrapper,
.tvcms-header-menu-offer-wrapper,
.tvcmsheader-sticky,
.tvcmsmobile-header-wrapper,
.tvcmssticky-header,
.tvcmsdesktop-top-wrapper {
  background: var(--td-ink-900) !important;
  color: var(--td-text-hi);
  border-color: var(--td-line);
}

/* Formularz wyszukiwarki ma białe tło i jasną ramkę 2px #e5e5e5 od motywu
   rodzica — na ciemnym nagłówku ta ramka świeciła białym prostokątem. */
.search-widget form,
.tvcmssearch-wrapper form {
  background: transparent !important;
  border: 0 !important;
}

/* Logo to plik JPG z czarnym napisem na białym tle. Na ciemnym nagłówku
   odwracamy je, przez co napis staje się biały, a tło zlewa się z paskiem. */
#_desktop_logo img,
.tvcmsdesktop-logo img,
#header .logo,
.tvcmsmobile-logo img {
  filter: invert(1) brightness(1.08);
  mix-blend-mode: screen;
}

#header a,
.tvcmsmega-menu a,
.tvcms-menu a { color: var(--td-text-hi); }

#header a:hover { color: var(--td-volt); }

/* Pasek ofertowy u góry — zamiast szarego prostokąta pas w kolorze marki.
   Uwaga: treść tego paska jest wstawiona inline w panelu (moduł nagłówka),
   dlatego neutralizujemy jego własne tło i kolor. */
.tvheader-nav-offer-text > div {
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  font-family: var(--td-f-mono) !important;
  letter-spacing: .08em !important;
}
.tvheader-nav-offer-text > div a { color: var(--td-ink-900) !important; }
.tvheader-nav-offer-text > div span { border-color: var(--td-ink-900) !important; }

/* Wyszukiwarka */
.search-widget input[type="text"],
.tvcmssearch-wrapper input[type="text"],
#_desktop_search input[type="text"] {
  background: var(--td-ink-800);
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-pill);
  color: var(--td-text-hi);
  height: 46px;
  padding-left: 18px;
  font-size: 15px;
}
.search-widget input::placeholder { color: var(--td-text-low); }
.search-widget input:focus {
  border-color: var(--td-volt);
  box-shadow: 0 0 0 3px rgba(214, 255, 63, .16);
  outline: none;
}

/* Blok nagłówka H1 na stronie głównej (wklejany w panelu — patrz
   panel/02-seo-strona-glowna.md). Nagłówek zostaje widoczny, ale stonowany:
   ukrywanie go przez `display:none` byłoby sygnałem negatywnym dla Google. */
.td-home-intro {
  max-width: 900px;
  margin: 0 auto;
  /* Wartość literalna, nie --td-r-lg: ten token opisuje promień zaokrąglenia
     i użycie go tutaj wiązałoby odstęp bloku z decyzją o narożnikach. */
  padding: 28px 20px 8px;
  text-align: center;
}
.td-home-intro h1 {
  font-family: var(--td-f-display);
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
}
.td-home-intro p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--td-text-low);
}

/* --------------------------------------------------------------------------
   4. KARTA PRODUKTU NA LISTACH
   Zdjęcia w tym sklepie mają białe tło. Na ciemnej stronie wyglądałyby jak
   jasne prostokąty, dlatego zdjęcie kładziemy na jasnym kaflu i mieszamy je
   trybem `multiply` — biel mnoży się do koloru kafla i znika bez widocznej
   krawędzi. `isolation` zamyka mieszanie wewnątrz kafla.
   -------------------------------------------------------------------------- */
.product-miniature,
.tvall-product-wrapper-info-box {
  background: transparent !important;
  border: 0 !important;
}

.product-miniature .thumbnail-container,
.product-miniature .tvproduct-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.product-miniature .tvproduct-image {
  position: relative;
  background: var(--td-bone);
  border-radius: var(--td-r-md);
  overflow: hidden;
  isolation: isolate;
}

.product-miniature .tvproduct-image img,
.product-miniature .product-thumbnail img {
  mix-blend-mode: multiply;
  transition: transform 420ms var(--td-ease), opacity var(--td-base) linear;
}

.product-miniature:hover .tvproduct-image img { transform: scale(1.05); }

.product-miniature .tvproduct-info-box-wrapper,
.product-miniature .product-description {
  background: transparent !important;
  padding-top: 12px;
  text-align: left;
}

/* Nazwa produktu.
   Motyw renderuje kilka wariantów układu karty (siatka, lista, podgląd),
   każdy z własnym opakowaniem — dlatego celujemy w sam nagłówek `h6`,
   który jest wspólny dla wszystkich. */
.product-miniature h6,
.product-miniature .tvproduct-name a,
.product-miniature .product-title a,
.product-miniature .product-title a h6 {
  font-family: var(--td-f-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--td-text-hi);
  text-transform: none;
}
.product-miniature:hover .product-title a,
.product-miniature:hover .product-title a h6 { color: var(--td-volt); }

/* Cena */
.product-miniature .price,
.product-price-and-shipping .price {
  font-family: var(--td-f-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--td-text-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.product-miniature .regular-price,
.regular-price {
  color: var(--td-text-low) !important;
  text-decoration: line-through;
  font-family: var(--td-f-mono);
  font-size: 13px;
}
.product-miniature .discount-percentage,
.discount-percentage,
.discount-amount {
  background: var(--td-flame) !important;
  color: #fff !important;
  border-radius: 6px;
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}

/* Komunikat Omnibus (moduł prestasafe-omnibus) — sklep ma dla niego własne
   style ustawione w panelu; tu tylko dopasowanie do ciemnego tła. */
.prestasafe-omnibus {
  color: var(--td-text-low) !important;
  font-size: 11px !important;
  border-color: var(--td-line) !important;
}

/* Plakietki */
.product-flags .product-flag,
.product-flag {
  font-family: var(--td-f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 5px 9px;
  line-height: 1;
}
.product-flag.new,
.product-flag.online-only { background: var(--td-volt); color: #000; }
.product-flag.discount,
.product-flag.on-sale { background: var(--td-flame); color: #fff; }
.product-flag.out_of_stock { background: var(--td-ink-700); color: var(--td-text-mid); }

/* Gwiazdki ocen */
.star_content .star .material-icons,
.tvall-product-star-icon .material-icons { color: var(--td-volt) !important; }

/* Zdjęcie „hover” bywa renderowane poza kaflem i zostaje białym kwadratem. */
.tvproduct-hover-img,
.tvproduct-defult-img { background: var(--td-bone) !important; }

/* Karta w wyskakującym podglądzie / powiadomieniu o sprzedaży */
.tvproduct-wrapper.bottom-to-top,
.tvcms-prod-popup,
.tvcms-prod-popup .tvproduct-wrapper {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md);
  color: var(--td-text-hi);
}

/* Wysuwany panel filtrów (mobile / boczny) */
.tvleft-right-penal-all-block,
.tvserach-filter-wrapper,
.tvleft-right-penal-wrapper {
  background: var(--td-ink-850) !important;
  color: var(--td-text-hi);
}

/* Przycisk „Filtry” — motyw ma tu własny żółty (#ffdb00). */
/* `body` w selektorze podnosi specyficzność ponad regułę z własnego CSS sklepu,
   która ustawia tu żółty #ffdb00 z !important. */
html body .tv-left-pannal-btn-wrapper,
html body .tv-left-pannal-btn {
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  border-radius: var(--td-r-pill);
  min-height: 44px;
}
html body .tv-left-pannal-btn-wrapper * { color: var(--td-ink-900) !important; }
html body .tv-left-pannal-btn-wrapper svg rect { fill: var(--td-ink-900) !important; }
html body .tv-left-pannal-btn-wrapper:hover { background-color: var(--td-ink-900) !important; }
html body .tv-left-pannal-btn-wrapper:hover *,
html body .tv-left-pannal-btn-wrapper:hover::after { color: var(--td-volt) !important; }
html body .tv-left-pannal-btn-wrapper:hover svg rect { fill: var(--td-volt) !important; }

/* Przełączniki widoku siatka / lista — w oryginale #7a7a7a na ciemnym tle
   dają ok. 3,5:1, poniżej progu WCAG AA dla elementów interfejsu. */
.tvgrid-list-view-product,
.tvgrid-list-view-product a,
.tvproduct-view-mode a { color: var(--td-text-mid) !important; }
.tvgrid-list-view-product a.active,
.tvgrid-list-view-product .active { color: var(--td-volt) !important; }

/* --------------------------------------------------------------------------
   5. PRZYCISKI
   -------------------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary,
.tvproduct-cart-btn .btn,
button.add-to-cart,
.add-to-cart {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  border-radius: var(--td-r-pill) !important;
  font-weight: 700;
  letter-spacing: .01em;
  min-height: 48px;
  padding: 12px 26px;
  transition: transform var(--td-fast) var(--td-ease), box-shadow var(--td-base) var(--td-ease);
}
.btn-primary:hover,
.add-to-cart:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(214, 255, 63, .35), 0 8px 28px rgba(214, 255, 63, .16);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary[disabled],
.add-to-cart[disabled] { opacity: .42; transform: none; box-shadow: none; }

.btn-secondary,
.btn-outline-secondary,
.btn.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--td-line-strong) !important;
  color: var(--td-text-hi) !important;
  border-radius: var(--td-r-pill) !important;
  min-height: 48px;
}
.btn-secondary:hover { border-color: var(--td-volt) !important; color: var(--td-volt) !important; }

/* --------------------------------------------------------------------------
   6. STRONA KATEGORII
   -------------------------------------------------------------------------- */
#left-column,
#right-column { background: transparent; }

#js-product-list-top,
#js-product-list-bottom,
.products-selection {
  background: transparent;
  border-color: var(--td-line);
}

/* Filtry — najmocniejsze narzędzie konwersji w tym sklepie.
   Na desktopie przyklejamy je, żeby były dostępne przy przewijaniu listy.

   RAMKA: rysuje ją WYŁĄCZNIE #search_filters (blok „panel filtrów” niżej
   w pliku, przy komentarzu RUNDA CZWARTA — ma tło, obwódkę, promień 14 px
   i nagłówek „Filtry”). #search_filters_wrapper jest tylko kontenerem
   pozycjonującym (sticky) i NIE dostaje własnego tła/obwódki/promienia —
   wcześniej oba elementy rysowały osobne, lekko przesunięte ramki jedna
   w drugiej (promień 20 vs 14, padding 20 vs 18/16), co dawało efekt
   podwójnej, „nadpisanej” ramki w rogach i na krawędziach. */
#search_filters_wrapper {
  /* celowo bez background/border/border-radius/padding — patrz wyżej */
}
#search_filters .facet-title,
#search_filters .h6 {
  font-family: var(--td-f-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--td-text-hi);
  text-transform: none;
  letter-spacing: -.005em;
}
#search_filters .facet-label a,
#search_filters li a { color: var(--td-text-mid); font-size: 14px; }
#search_filters .facet-label a:hover { color: var(--td-volt); }

@media (min-width: 992px) {
  #left-column #search_filters_wrapper {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

/* Aktywne filtry */
#js-active-search-filters {
  background: var(--td-ink-800);
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
  padding: 14px 16px;
}
#js-active-search-filters .filter-block {
  background: var(--td-volt);
  color: #000;
  border-radius: var(--td-r-pill);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#js-active-search-filters .filter-block .close { color: #000; opacity: .7; }

/* Sortowanie
   Obwódka potrzebuje !important: motyw rodzica ma własną regułę na
   `.select-title` z jasnoszarą krawędzią (#ededed, pomyślaną pod jasne tło)
   i bez !important ta reguła wygrywała mimo poprawnego, ciemnego tła —
   zmierzone na żywo: tło ink-800 (poprawne), obwódka rgb(237,237,237)
   (parenta). Efekt: jasna, prawie biała ramka wokół ciemnego pola. */
.products-sort-order .select-title,
.products-sort-order .dropdown-menu {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-sm) !important;
  color: var(--td-text-hi) !important;
  min-height: 44px;
}
/* POZYCJE listy sortowania. Motyw NIE używa tu bootstrapowego
   `.dropdown-item` (mimo klasy `.dropdown-menu` na kontenerze) — każda
   pozycja to `<a class="select-list">`. Reguła na `.dropdown-item` nie
   miała więc czego stylować, a pozycje zostawały przy kolorze rodzica:
   rgb(35,35,35) na tle rgb(20,20,23) — kontrast ~1,15:1, tekst praktycznie
   niewidoczny (zmierzone na otwartej liście). Stąd styl celuje w
   `.select-list`; `.dropdown-item` zostaje na wypadek innego szablonu. */
.products-sort-order .select-list,
.products-sort-order .dropdown-item {
  display: block;
  padding: 9px 14px;
  color: var(--td-text-mid) !important;
  font-size: 14px;
  line-height: 1.35;
}
.products-sort-order .select-list:hover,
.products-sort-order .dropdown-item:hover {
  background: var(--td-ink-700) !important;
  color: var(--td-volt) !important;
}
/* Aktualnie wybrany porządek — od razu widać, co jest ustawione. */
.products-sort-order .select-list.current {
  color: var(--td-text-hi) !important;
  font-weight: 700;
}
/* Etykieta „Sortuj wg:” obok pola — nieustylowana dziedziczyła szarość
   motywu rodzica (~3,9:1 na ciemnym tle, poniżej progu AA 4,5:1). */
.sort-by { color: var(--td-text-mid) !important; }

/* Paginacja */
.pagination { color: var(--td-text-mid); }
.pagination .page-list li a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--td-r-sm);
  color: var(--td-text-mid);
}
.pagination .current a { background: var(--td-volt); color: #000; font-weight: 700; }

/* Nagłówek i opis kategorii.
   Uwaga: w tym motywie tytuł kategorii nie jest nagłówkiem — cała strona
   kategorii nie zawiera ani jednego h1/h2/h3 (są tylko h6 z nazwami
   produktów). Stylujemy więc kontener po klasie. Naprawa samej struktury
   nagłówków wymaga nadpisania szablonu, czyli dostępu FTP. */
#js-product-list-header,
.block-category,
#category-description,
.category-cover + div { color: var(--td-text-mid); background: transparent; }

#js-product-list-header .tvcategory-name,
.block-category .h1,
.block-category .category-name {
  font-family: var(--td-f-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  color: var(--td-text-hi);
  display: block;
}
#category-description p,
.block-category p { color: var(--td-text-mid); }

/* --------------------------------------------------------------------------
   7. KARTA PRODUKTU
   -------------------------------------------------------------------------- */
.page-product .product-cover,
.page-product .images-container .product-cover,
.page-product .js-qv-product-cover,
.page-product .product-images img,
.page-product .thumb-container img {
  background: var(--td-bone);
  border-radius: var(--td-r-md);
}
.page-product .product-cover img,
.page-product .easyzoom img { mix-blend-mode: multiply; }

.page-product h1,
.page-product .product-detail-name,
.page-product .h1 {
  font-family: var(--td-f-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

/* Cena na karcie produktu.
   Regułę rodzica ustaliliśmy dokładnie — to `.product-price .current-price
   .price` z pliku assets/css/all_theme_custom_1_1.css, generowanego z koloru
   akcentu wybranego w panelu (#71009d). Ma specyficzność 0,3,0.
   Zamiast eskalować do !important dokładamy `body` i klasę strony, co daje
   0,4,1 i wygrywa niezależnie od kolejności ładowania arkuszy — a ta bywa
   zmienna, bo plik rodzica rejestruje moduł, nie motyw. */
body.page-product .product-price .current-price .price,
body.page-product .product-price .current-price,
body.page-product .current-price .price,
body.page-product .current-price {
  font-family: var(--td-f-display);
  /* 2.2rem jak w makiecie (.buy__price .now); wcześniej 2rem. */
  font-size: 2.2rem;
  font-weight: 900;
  /* Rozstrzygnięte w ŹRÓDLE wizualizacji (produkt.html:578): cena zwykła
     jest biała, a przeceniona dostaje `price--sale` = czerwień. */
  color: var(--td-text-hi);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
body.page-product .has-discount .current-price .price,
body.page-product .has-discount .current-price { color: var(--td-flame); }

/* Liczba produktów przy nazwie kategorii (td-category-count.tpl) */
.td-category-count {
  display: block;
  margin-top: 8px;
  font-family: var(--td-f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-mid);
}

/* Warianty / rozmiary — najważniejszy element decyzyjny na tej stronie.
   Powiększamy pola do wymiarów wygodnych na telefonie. */
.product-variants .form-control-select,
.product-variants select {
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
  border-radius: var(--td-r-sm);
  color: var(--td-text-hi);
  min-height: 52px;
  font-size: 16px;
}
.product-variants .input-container .radio-label {
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
  border-radius: var(--td-r-sm);
  color: var(--td-text-hi);
  min-width: 56px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--td-f-mono);
  font-size: 14px;
  transition: all var(--td-fast) linear;
}
.product-variants input:checked + .radio-label {
  background: var(--td-volt);
  border-color: var(--td-volt);
  color: #000;
  font-weight: 700;
}
.product-variants input:focus-visible + .radio-label { outline: 3px solid var(--td-volt); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   SIATKA ROZMIARÓW
   Współpracuje z nadpiską templates/catalog/_partials/product-variants.tpl.
   Dotyczy wyłącznie grup typu `radio` — listy rozwijane i próbniki kolorów
   zostają nietknięte.
   -------------------------------------------------------------------------- */
.td-variants-item .control-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--td-text-hi);
}

ul.td-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Bez ograniczenia szerokości siatka rozciąga się na całą kolumnę treści
     (na 1400 px wychodziło 17 kolumn) i rozmiarówka rozjeżdża się w jedną
     długą linię. Ograniczenie trzyma ją przy 6–7 kolumnach na desktopie. */
  max-width: 560px;
}
/* Motyw rodzica ustawia na `.input-container` float — w siatce psułby układ. */
ul.td-size-grid > li.td-size {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
ul.td-size-grid > li.td-size label {
  display: block;
  margin: 0;
  cursor: pointer;
}
ul.td-size-grid .input-radio {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
.td-size__box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 56 px — wygodny cel dotykowy, z zapasem ponad wymagane 44 px */
  min-height: 56px;
  padding: 8px 6px;
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
  border-radius: var(--td-r-sm);
  font-family: var(--td-f-mono);
  font-size: 14px;
  color: var(--td-text-hi);
  text-align: center;
  transition: background var(--td-fast) linear, border-color var(--td-fast) linear,
              color var(--td-fast) linear;
}
.td-size__box:hover { border-color: var(--td-line-strong); background: var(--td-ink-750); }
.td-size .input-radio:checked + .td-size__box {
  background: var(--td-volt);
  border-color: var(--td-volt);
  color: var(--td-ink-900);
  font-weight: 700;
}
/* Obrys ogniskowania na etykiecie — sam input jest przezroczysty. */
.td-size .input-radio:focus-visible + .td-size__box {
  outline: 3px solid var(--td-volt);
  outline-offset: 2px;
}

/* Komunikaty o stanie magazynowym zostają te, które daje motyw i moduł —
   sklep pokazuje je już w trzech miejscach i dokładanie czwartego tylko
   zaszumiałoby ekran decyzji. Tu wyrównujemy jedynie ich kolory do palety. */
.product-quantities .label,
#product-availability,
.tvproduct-stock-social .label {
  color: var(--td-text-mid) !important;
  font-size: 13px;
}
#product-availability .product-last-items,
.product-last-items { color: #ffb4ae !important; }
#product-availability .product-available,
.product-available { color: var(--td-mint) !important; }
#product-availability .product-unavailable,
.product-unavailable { color: var(--td-text-low) !important; }

.product-quantity .qty input,
#quantity_wanted {
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
  color: var(--td-text-hi);
  min-height: 48px;
  border-radius: var(--td-r-sm);
}

/* Zakładki opisu */
.product-tabs .nav-tabs { border-bottom-color: var(--td-line); }
.product-tabs .nav-tabs .nav-link {
  color: var(--td-text-mid);
  border: 0;
  font-weight: 600;
  min-height: 48px;
}
.product-tabs .nav-tabs .nav-link.active {
  color: var(--td-volt);
  border-bottom: 2px solid var(--td-volt);
  background: transparent;
}
.product-description,
.product-description p { color: var(--td-text-mid); }

/* Bloki informacyjne (dostawa, zwroty) */
.product-additional-info,
.blockreassurance_product { border-top: 1px solid var(--td-line); }
.blockreassurance_product .block-title { color: var(--td-text-hi) !important; }
.blockreassurance_product span { color: var(--td-text-mid) !important; }
.blockreassurance_product img,
.blockreassurance_product svg { filter: brightness(0) saturate(100%) invert(89%) sepia(38%) saturate(1000%) hue-rotate(21deg) brightness(105%) contrast(101%); }

/* --------------------------------------------------------------------------
   8. STOPKA
   -------------------------------------------------------------------------- */
#footer,
.tvcmsfooter-wrapper,
.tvfooter-top-wrapper,
.tvcmsfooter-copyright-wrapper {
  background: var(--td-ink-850) !important;
  border-top: 1px solid var(--td-line);
  color: var(--td-text-mid);
}
.tvfooter-title,
#footer .h3,
#footer h3 {
  font-family: var(--td-f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-text-hi);
}
#footer a,
.tvfooter-account-link a { color: var(--td-text-mid); }
#footer a:hover { color: var(--td-volt); }

/* Cele dotykowe w stopce — w oryginale linki mają ok. 30 px wysokości. */
#footer li a,
.tvfooter-account-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   9. FORMULARZE, KOSZYK, KASA, KONTO
   Tu wyłącznie kolor i kontrast. Układ zostaje nietknięty — każda zmiana
   w tym miejscu może kosztować zamówienie.
   -------------------------------------------------------------------------- */
.form-control,
.form-control-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
  color: var(--td-text-hi);
  border-radius: var(--td-r-sm);
  /* 16 px — poniżej tej wartości iOS przybliża stronę przy wejściu w pole. */
  font-size: 16px;
  min-height: 48px;
}
/* Lista rozwijana <select> dziedziczy tło z systemu, a nie z reguły powyżej.
   Bez tego na Windowsie (Chrome, Firefox) opcje rysują się jasnym tłem
   systemowym z naszym jasnym tekstem — biały na białym. Dotyczy sortowania
   na kategoriach oraz wyboru kraju i przewoźnika w kasie. */
option,
select option {
  background-color: var(--td-ink-800);
  color: var(--td-text-hi);
}

.form-control::placeholder { color: var(--td-text-low); }
.form-control:focus {
  background: var(--td-ink-750);
  border-color: var(--td-volt);
  box-shadow: 0 0 0 3px rgba(214, 255, 63, .16);
  color: var(--td-text-hi);
}
.form-control-label,
label { color: var(--td-text-mid); }

.custom-checkbox input[type="checkbox"] + span,
.custom-radio { border-color: var(--td-line-strong); }
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span { background: var(--td-volt); border-color: var(--td-volt); }
.custom-checkbox input[type="checkbox"] + span .checkbox-checked { color: #000; }

.card,
.card-block,
.card-body,
#checkout .card,
#authentication .card,
#order-confirmation .card,
.cart-summary,
.cart-item,
.block-promo,
#notifications .alert {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  color: var(--td-text-hi);
  border-radius: var(--td-r-md);
}
.card-header { background: var(--td-ink-800) !important; border-bottom-color: var(--td-line) !important; }
.card-header .h1, .card-header .h2, .card-header .h3 { color: var(--td-text-hi); }

/* Kafelki „Moje konto”. Biały prostokąt motyw nadrzędny maluje na
   WEWNĘTRZNYM `span.link-item`, nie na odnośniku — pomalowanie samego <a>
   zostawiało białą płytkę z prawie białym napisem (zmierzone 1,09:1,
   napisy były niewidoczne). Kartą musi być span. */
.page-my-account .links a { background: transparent !important; border: 0 !important; padding: 0 8px !important; }
.page-my-account .links a span.link-item {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  padding: 24px 16px !important;
  transition: border-color 140ms linear, background 140ms linear;
}
.page-my-account .links a:hover span.link-item {
  background: var(--td-ink-800) !important;
  border-color: var(--td-volt) !important;
}
/* Motyw nadrzędny odsuwał ikonę od podpisu o 3,4rem — stąd nienaturalnie
   wysokie kafelki z dziurą w środku. */
.page-my-account .links a i {
  color: var(--td-text-mid) !important;
  font-size: 30px !important;
  padding-bottom: 14px !important;
}
.page-my-account .links a,
.page-my-account .links a span { color: var(--td-text-hi) !important; }
.page-my-account .links a:hover i,
.page-my-account .links a:hover span { color: var(--td-volt) !important; }

table, .table { color: var(--td-text-hi); }
.table thead th { border-bottom-color: var(--td-line); color: var(--td-text-mid); }
.table td, .table th { border-top-color: var(--td-line); }

.alert-success { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .4); color: var(--td-mint); }
.alert-danger  { background: rgba(255, 59, 48, .12);  border-color: rgba(255, 59, 48, .4);  color: #ffb4ae; }
.alert-warning { background: rgba(214, 255, 63, .12); border-color: rgba(214, 255, 63, .4); color: var(--td-volt); }
.alert-info    { background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .4); color: #9ec5fe; }

/* Modale i okna podglądu */
.modal-content,
.tvcms-prod-popup,
.quickview .modal-content {
  background: var(--td-ink-850);
  border: 1px solid var(--td-line-strong);
  color: var(--td-text-hi);
}
.modal-header, .modal-footer { border-color: var(--td-line); }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: .72; }

/* Rozwijany koszyk w nagłówku */
.ttvcmscart-show-dropdown-right,
.tvcmscart-dropdown,
.blockcart .cart-dropdown {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line);
  color: var(--td-text-hi);
}

/* --------------------------------------------------------------------------
   10. CELE DOTYKOWE
   W obecnym sklepie 64 elementy klikalne są mniejsze niż 44 × 44 px.
   -------------------------------------------------------------------------- */
.tvcms-header-myaccount button,
.tv-myaccount-btn,
.tvheader-search-display-ic,
.blockcart a,
#header .btn-unstyle,
.tvcmsmobile-menu-icon,
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   11. POWŁOKA MOBILNA — elementy wstrzykiwane przez vault.js
   -------------------------------------------------------------------------- */
.td-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1035;              /* nad treścią, pod modalami Bootstrapa (1050) */
  display: none;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(15, 15, 17, .94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--td-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.td-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 8px 4px 6px;
  color: var(--td-text-low);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
}
.td-tabbar__item:hover { color: var(--td-text-hi); }
.td-tabbar__item svg { width: 22px; height: 22px; transition: transform var(--td-base) cubic-bezier(.34,1.56,.64,1); }
.td-tabbar__item:active svg { transform: scale(.85); }
.td-tabbar__item.is-active { color: var(--td-volt); }
.td-tabbar__item.is-active::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  background: var(--td-volt);
  border-radius: 0 0 3px 3px;
}
.td-tabbar__badge {
  position: absolute; top: 6px; right: calc(50% - 22px);
  min-width: 18px; height: 18px; padding: 0 5px;
  display: none;
  place-items: center;
  background: var(--td-volt); color: #000;
  border-radius: var(--td-r-pill);
  font-family: var(--td-f-mono); font-size: 10px; font-weight: 700; line-height: 18px;
}
.td-tabbar__badge.is-on { display: grid; }

/* Przyklejony pasek zakupu na karcie produktu */
.td-stickybuy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: rgba(15, 15, 17, .95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--td-line-strong);
  padding: 12px 16px;
  /* Na desktopie pasek stoi przy krawędzi ekranu, więc sam rezerwuje miejsce
     na pasek gestów. Na mobile robi to za niego offset --td-tabbar (patrz
     media query niżej) — dlatego tam ten padding jest zerowany, inaczej
     odstęp liczyłby się dwa razy i na iPhonie zostawiał 34 px pustki. */
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateY(120%);
  transition: transform 420ms var(--td-ease);
}
.td-stickybuy.is-on { transform: translateY(0); }

/* Wyłączony przycisk w pasku — stan odzwierciedla oryginalny przycisk
   „Dodaj do koszyka”. Bez tego pasek zachęca do kliknięcia w coś, co przy
   niewybranym rozmiarze albo braku towaru i tak nie zadziała. */
.td-stickybuy__btn.is-disabled {
  background: var(--td-ink-700);
  color: var(--td-text-low);
  cursor: not-allowed;
}
.td-stickybuy__inner {
  max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
}
.td-stickybuy__img {
  width: 50px; height: 50px; flex: none;
  background: var(--td-bone); border-radius: var(--td-r-sm); overflow: hidden;
}
.td-stickybuy__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.td-stickybuy__meta { min-width: 0; flex: 1; }
.td-stickybuy__meta b {
  display: block; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-stickybuy__meta span {
  font-family: var(--td-f-mono); font-size: 14px; font-weight: 700;
  color: var(--td-volt);
  /* Dopóki z ceny nie zniknie sufiks „(brutto).”, łamie się ona na dwie linie
     i rozpycha pasek. Nadmiar ucinamy zamiast rozciągać pasek w górę. */
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-stickybuy__btn {
  background: var(--td-volt); color: #000;
  border: 0; border-radius: var(--td-r-pill);
  min-height: 48px; padding: 12px 24px;
  font-weight: 700; font-size: 14px; white-space: nowrap;
}

/* Pełnoekranowa wyszukiwarka.
   Style trzymamy tutaj, a nie w vault.js: markup tworzy skrypt, ale tak samo
   jest z tab barem i paskiem zakupu. Wcześniej ten blok był wstrzykiwany
   z JS-a i miał zaszyte wartości hex zamiast tokenów, więc zmiana palety
   w tym pliku po cichu go omijała. */
.td-search {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* zamiast `inset` — Safari < 14.1 */
  z-index: 1060;
  background: rgba(5, 5, 6, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--td-base) var(--td-ease), visibility var(--td-base);
}
.td-search.is-open { opacity: 1; visibility: visible; }

.td-search__panel {
  background: var(--td-ink-850);
  border-bottom: 1px solid var(--td-line);
  padding: 20px 16px 24px;
  transform: translateY(-16px);
  transition: transform 320ms var(--td-ease);
}
.td-search.is-open .td-search__panel { transform: translateY(0); }

.td-search__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.td-search__head strong {
  font-family: var(--td-f-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
}
.td-search__close {
  width: 44px; height: 44px;
  background: none; border: 0;
  color: var(--td-text-hi);
  font-size: 28px; line-height: 1;
}
.td-search__form input[type="text"],
.td-search__form input[type="search"] {
  width: 100% !important;
  font-size: 16px !important;
}
.td-search__hints {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 16px;
}
.td-search__hints > span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--td-text-low);
}
.td-search__chip {
  min-height: 44px; padding: 8px 15px;
  background: var(--td-ink-750);
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-pill);
  color: var(--td-text-hi);
  font-size: 13px;
}
.td-search__chip:hover { border-color: var(--td-volt); color: var(--td-volt); }

/* Skrót do filtrów na telefonie */
.td-filter-fab {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--td-tabbar) + 14px);
  z-index: 1029;
  display: none;
  align-items: center; gap: 9px;
  padding: 13px 24px;
  background: var(--td-volt); color: #000;
  border: 0; border-radius: var(--td-r-pill);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: 14px; font-weight: 700;
}
.td-filter-fab svg { width: 17px; height: 17px; }

@media (max-width: 991px) {
  body { padding-bottom: var(--td-tabbar); }
  .td-tabbar { display: grid; }

  /* Baner cookies siedzi przy samej krawędzi okna z z-indexem 100, a tab bar
     ma 1035 — zasłaniał więc dolne 60 px banera razem z przyciskiem zamknięcia
     i klient nie mógł go zamknąć. Podnosimy baner nad pasek zamiast podbijać
     mu z-index: pasek to główna nawigacja na telefonie i nie może chować się
     pod komunikatem. */
  html body .tvcmscookies-notice { bottom: var(--td-tabbar) !important; }
  .page-category .td-filter-fab,
  .page-search .td-filter-fab { display: inline-flex; }

  .td-stickybuy {
    bottom: var(--td-tabbar);
    /* Odstęp na pasek gestów jest już w --td-tabbar — tu byłby policzony
       drugi raz. */
    padding-bottom: 12px;
    /* Ukryty pasek musi zjechać o własną wysokość ORAZ o wysokość tab bara.
       Samo 120% zostawiało ok. 45 px paska w widoku; było to niewidoczne
       wyłącznie dlatego, że tab bar przypadkiem go zasłaniał wyższym
       z-indexem. Każda zmiana wysokości paska ujawniłaby pasek-widmo. */
    transform: translateY(calc(100% + var(--td-tabbar)));
  }
  .td-stickybuy.is-on { transform: translateY(0); }

  /* Wyszukiwarkę w nagłówku ukrywamy TYLKO wtedy, gdy vault.js faktycznie
     zbudował dolny pasek i dodał klasę `td-has-tabbar` na <html>.
     Bezwarunkowe ukrycie zostawiłoby telefon bez wyszukiwarki w ogóle,
     gdyby skrypt się nie wczytał. */
  .td-has-tabbar .tvcmsheader-search-wrapper { display: none; }
}

/* --------------------------------------------------------------------------
   12. RUCH
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .product-miniature:hover .tvproduct-image img { transform: none; }
}

/* --------------------------------------------------------------------------
   13. DRUK
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .td-tabbar, .td-stickybuy, .td-filter-fab, #header, #footer { display: none !important; }
}

/* ==========================================================================
   STRONA KATEGORII — dokończenie
   Plakietki, przycisk doładowania listy i blok tekstowy pod produktami.
   Selektory pochodzą z DOM-u DZIAŁAJĄCEGO sklepu, nie ze zrzutu statycznego:
   motyw używa `.tvproduct-flags`, nie `.product-flags` z motywu domyślnego.
   ========================================================================== */

html body .tvproduct-flags li,
html body .product-flags li {
  padding: 5px 9px !important;
  border-radius: 5px !important;
  font-family: var(--td-f-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
/* Przecena i „ostatnie sztuki” mają ciemniejszą czerwień: jasna dawałaby
   z białym tekstem 3,55:1, czyli poniżej progu czytelności. */
html body .tvproduct-sale-pack-wrapper li,
html body .product-flags li.on-sale,
html body .product-flags li.discount {
  background: #c81e14 !important;
  color: #fff !important;
}

/* --------------------------------------------------- licznik na karcie listy */
.tds-listsold {
  display: inline-block; margin-top: 6px;
  font-family: var(--td-f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--td-volt);
}

/* ------------------------------------------------- „Pokaż kolejne” zamiast stron
   Stronicowanie zostaje w kodzie strony — chowamy je dopiero wtedy, gdy skrypt
   faktycznie przejmie sterowanie. Bez JavaScriptu i dla robotów wyszukiwarek
   lista dalej ma normalne odnośniki do kolejnych stron. */
.td-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 0 8px; }
.td-more-progress { width: min(320px, 60%); height: 3px; border-radius: 3px; background: var(--td-line); overflow: hidden; }
.td-more-progress i { display: block; height: 100%; background: var(--td-volt); transition: width 320ms ease; }
.td-more-count { font-family: var(--td-f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--td-text-low); }
.td-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 16px 40px; cursor: pointer;
  background: none; border: 1.5px solid var(--td-line-strong); border-radius: 999px;
  font-family: var(--td-f-ui); font-size: 16px; font-weight: 700; color: var(--td-text-hi);
  transition: border-color 140ms linear, color 140ms linear;
}
.td-more-btn:hover { border-color: var(--td-volt); color: var(--td-volt); }
.td-more-btn[disabled] { opacity: .5; cursor: default; }
/* Klasa siedzi na SAMYM <body>, więc bez kropki przy `body` byłby to
   selektor potomka i nigdy by nie trafił. */
html body.td-js-more .pagination { display: none !important; }

/* ------------------------------------------------------- blok tekstowy pod listą */
.tds-catseo { padding-block: clamp(32px, 4vw, 64px); border-top: 1px solid var(--td-line); margin-top: 32px; }
.tds-catseo__text { margin-top: 16px; max-width: 76ch; font-size: 15px; line-height: 1.7; color: var(--td-text-mid); }

/* ==========================================================================
   NAGŁÓWEK I STOPKA — DOKOŃCZENIE
   Reguły powstały z pomiarów żywego sklepu, nie ze zrzutu. Każda naprawia
   konkretną wartość odczytaną z `getComputedStyle`.
   ========================================================================== */

/* --- 1. Pole wyszukiwania: tekst był NIEWIDOCZNY -------------------------
   Motyw ustawiał `color: #222` na tle `#141417` — kontrast 1,16:1. Klient
   wpisywał zapytanie i nie widział, co pisze. To była najpoważniejsza usterka
   w całym nagłówku, bo wyszukiwarka to główna droga do produktu. */
html body .tvcmssearch-words,
html body input.tvcmssearch-words,
html body #search_widget input[type="text"],
html body .search_query {
  background-color: var(--td-ink-800) !important;
  color: var(--td-text-hi) !important;
  border: 1px solid var(--td-line-strong) !important;
  border-radius: 999px !important;
  padding-inline: 20px !important;
  min-height: 48px !important;
}
html body .tvcmssearch-words::placeholder,
html body #search_widget input[type="text"]::placeholder {
  color: var(--td-text-low) !important;
  opacity: 1 !important;
}
html body .tvcmssearch-words:focus-visible {
  outline: 2px solid var(--td-volt) !important;
  outline-offset: 2px !important;
}

/* --- 2. Jasny pas nad nagłówkiem na telefonie ----------------------------
   `.tvcmsmobile-top-wrapper` miał #eeeeee — biały pas na czarnej stronie. */
html body .tvcmsmobile-top-wrapper,
html body .tvmobileheader-offer-wrapper,
html body .tvmobileheader-social {
  background-color: var(--td-ink-900) !important;
  background-image: none !important;
}

/* --- 3. Pasek ofertowy jako pełne pasmo, nie pudełko --------------------- */
html body .tvheader-nav-offer-text,
html body .tvmobileheader-offer-wrapper .tvheader-nav-offer-text {
  width: 100%;
  padding: 10px 16px;
  border-radius: 0;
  font-family: var(--td-f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.45;
}
html body .tvheader-nav-offer-text a { text-decoration: underline; }

/* --- 4. Logo: JPG 300×150 renderował się w natywnym rozmiarze -----------
   Plik ma białe tło, dlatego odwracamy go i mieszamy trybem `screen`
   (biel staje się czarna i znika na ciemnym nagłówku). Wysokość ograniczona,
   proporcje zachowane. */
html body .tv-header-logo img,
html body .tvcms-header-logo img,
html body .tvcmsmobile-header-logo img,
html body #_desktop_logo img,
html body #tvcmsdesktop-logo img {
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain;
  filter: invert(1) brightness(1.08);
  mix-blend-mode: screen;
}

/* --- 5. Przycisk „do góry” był białym kołem ------------------------------ */
html body .tvbottom-to-top,
html body .tvbottom-to-top-icon {
  background-color: var(--td-ink-800) !important;
  border: 1px solid var(--td-line-strong) !important;
  color: var(--td-volt) !important;
  border-radius: 999px !important;
}
html body .tvbottom-to-top i,
html body .tvbottom-to-top span { color: var(--td-volt) !important; }

/* --- 6. Stopka: kolumny i pasek dolny ------------------------------------ */
html body #footer .tvfooter-title,
html body #footer .tvfooter-title span,
html body #footer h3 {
  font-family: var(--td-f-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--td-text-hi) !important;
}
html body #footer a { color: var(--td-text-mid); }
html body #footer a:hover { color: var(--td-volt); }
html body .tvfooter-copy-payment-icon-wrapper {
  border-top: 1px solid var(--td-line) !important;
}
/* Ikony płatności to grafiki na białym tle — na ciemnym pasku potrzebują
   jasnego kafelka, inaczej zlewają się w szare prostokąty. */
html body .tvfooter-copy-payment-icon-wrapper img {
  background: #fff;
  border-radius: 4px;
  padding: 3px 5px;
}

/* ==========================================================================
   NAGŁÓWEK W UKŁADZIE Z WIZUALIZACJI
   Współpracuje z nadpisanym szablonem _partials/desk-header-7.tpl:
   pasmo ofertowe na całą szerokość + jeden rząd logo | menu | narzędzia.
   ========================================================================== */

/* --- pasmo ofertowe ------------------------------------------------------ */
html body .td-head__marquee {
  background: var(--td-volt) !important;
  padding: 0 !important;
  border: 0 !important;
}
html body .td-head__marquee .tvheader-offer-wrapper {
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
}
html body .td-head__marquee .tvheader-nav-offer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 34px;
  padding: 5px 20px;
  margin: 0;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--td-ink-900) !important;
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
}
html body .td-head__marquee .tvheader-nav-offer-text *,
html body .td-head__marquee .tvheader-nav-offer-text a { color: var(--td-ink-900) !important; }
html body .td-head__marquee .tvheader-nav-offer-text a { text-decoration: underline; }

/* --- główny rząd --------------------------------------------------------- */
html body .td-head__bar {
  background: var(--td-ink-900) !important;
  border-bottom: 1px solid var(--td-line);
}
html body .td-head__in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 70px;
  width: 100%;
  max-width: 1480px;
  padding-inline: clamp(16px, 3vw, 40px);
}
html body .td-head__logo { flex: 0 0 auto; display: flex; align-items: center; }
html body .td-head__logo .tvcms-header-logo,
html body .td-head__logo .tv-header-logo { margin: 0; padding: 0; }
html body .td-head__logo img { max-height: 40px !important; max-width: 190px !important; }

/* Menu zajmuje środek i to ono oddaje wolne miejsce, gdy zabraknie szerokości. */
html body .td-head__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
html body .td-head__nav #tvdesktop-megamenu { width: 100%; display: flex; justify-content: center; }
html body .td-head__nav .tvcmsmain-menu-wrapper { width: auto; padding: 0; }

html body .td-head__tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
html body .td-head__search { width: clamp(180px, 22vw, 300px); }
html body .td-head__search .tvcmssearch-words { min-height: 44px !important; font-size: 14px !important; }
html body .td-head__acc,
html body .td-head__cart { display: flex; align-items: center; }
html body .td-head__acc .tv-myaccount-btn,
html body .td-head__cart .tvcms-header-cart-wrapper {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
html body .td-head__acc svg { color: var(--td-text-hi); }
html body .td-head__acc:hover svg { color: var(--td-volt); }

/* Zachowane w kodzie, niewidoczne w układzie — patrz komentarz w szablonie. */
html body .td-head__stash { display: none !important; }

/* Pod 1200 px menu przenosi się pod logo, żeby nie ściskać narzędzi. */
@media (max-width: 1199px) {
  html body .td-head__in { flex-wrap: wrap; gap: 12px 16px; padding-block: 12px; min-height: 0; }
  html body .td-head__nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  html body .td-head__search { width: clamp(160px, 30vw, 260px); }
}

/* --- dopasowanie wysokości rzędu ----------------------------------------
   Menu i koszyk wnoszą własne odstępy z motywu (119 px i 90 px zmierzone
   na żywym sklepie). Bez tego nagłówek byłby o połowę wyższy niż w makiecie. */
html body .td-head__logo .tv-header-logo img { max-height: 44px !important; }
html body .td-head__nav .container { width: auto; max-width: none; padding: 0; }
html body .td-head__nav .tvcmsmain-menu-wrapper { width: auto; max-width: none; }
html body .td-head__nav #tvdesktop-megamenu > ul > li > a,
html body .td-head__nav .tvcmsmega-menu > li > a,
html body .td-head__nav ul.tvmenu-content > li > a {
  padding-block: 0 !important;
  line-height: 70px !important;
  font-family: var(--td-f-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}
html body .td-head__cart .tvcms-header-cart-wrapper,
html body .td-head__cart .tvcmscart-wrapper,
html body .td-head__cart .blockcart { padding-block: 0 !important; }
html body .td-head__tools > * { max-height: 48px; }

/* --- dwie poprawki wykryte pomiarem na żywym sklepie ---------------------

   1. Logo nie reagowało na ograniczenie wysokości, bo wcześniejsza reguła
      w tym pliku celuje w #tvcmsdesktop-logo — selektor z identyfikatorem
      bije każdy zapis klasowy, niezależnie od kolejności i `!important`.
      Dlatego tutaj też musi paść identyfikator.

   2. Menu zawijało się do DWÓCH rzędów (2 × 59 px), przez co nagłówek miał
      119 px zamiast ~78. Winna była szerokość: szukajka zabierała 300 px.
      Zwężamy ją i zabraniamy zawijania listy pozycji.                       */

html body .td-head__logo #tvcmsdesktop-logo img {
  max-height: 44px !important;
  max-width: 190px !important;
}

/* Szukajka szeroka jak w makiecie — miejsce oddał koszyk zwinięty do ikony
   (patrz sekcja „zgodność 1:1" na końcu pliku). Zawijaniu menu dalej
   zapobiega nowrap na liście pozycji poniżej. */
html body .td-head__search { width: clamp(170px, 19vw, 300px); }

html body .td-head__nav ul.menu-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}
html body .td-head__nav ul.menu-content > li.level-1 { flex: 0 0 auto; }
html body .td-head__nav ul.menu-content > li.level-1 > a {
  padding-inline: 12px !important;
  font-size: 13.5px;
}
/* UWAGA: tu wcześniej stało `overflow-x: auto` jako wentyl na nadmiar
   pozycji. Okazało się zabójcze: overflow inny niż visible robi z kontenera
   pudło przycinające, a rozwijane panele mega menu pozycjonują się względem
   listy W ŚRODKU tego pudła — każdy panel był ścinany na wysokości rzędu
   i menu „nie rozwijało się" po najechaniu. Zawijaniu wystarcza nowrap
   wyżej; nadmiar pozycji po prostu wystaje, ale panele działają. */
html body .td-head__nav { overflow: visible !important; }

/* ==========================================================================
   OPIS PRODUKTU — JASNE BLOKI Z TREŚCI
   W opisach produktów siedzą bloki z INLINE'owym tłem (#f9f9f9, #eee, #fff)
   wpisanym w HTML przy dodawaniu towaru. Na ciemnej stronie wychodzą z tego
   białe prostokąty. Styl inline da się pokonać wyłącznie `!important`,
   dlatego neutralizujemy je punktowo — w obrębie opisu, nie globalnie.
   ========================================================================== */
html body #description [style*="background"],
html body .product-description [style*="background"],
html body .tab-content [style*="background"],
html body #description table tr,
html body .product-description table tr,
html body #description .features-section,
html body #description .usage-instruction,
html body .product-description .features-section,
html body .product-description .usage-instruction {
  background: var(--td-ink-850) !important;
  background-color: var(--td-ink-850) !important;
  border-color: var(--td-line) !important;
  color: var(--td-text-mid) !important;
}
html body #description [style*="color"],
html body .product-description [style*="color"] { color: var(--td-text-mid) !important; }
html body #description h1, html body #description h2, html body #description h3,
html body #description h4, html body #description strong, html body #description b,
html body .product-description h2, html body .product-description h3,
html body .product-description h4, html body .product-description strong {
  color: var(--td-text-hi) !important;
}
html body #description table,
html body .product-description table { width: 100%; border-collapse: collapse; }
html body #description table td,
html body .product-description table td {
  padding: 10px 14px !important;
  border: 1px solid var(--td-line) !important;
  color: var(--td-text-mid) !important;
}

/* ==========================================================================
   KATEGORIA — WIDOK LISTY
   Sklep ma przełącznik siatka/lista i część klientów ogląda listę. Wcześniejsze
   reguły stylowały wyłącznie kafle siatki, więc lista zostawała w kolorystyce
   motywu rodzica razem z fioletowym przyciskiem przełącznika.
   ========================================================================== */
html body .tv-grid-list-wrapper .tv-grid-view.active,
html body .tv-grid-list-wrapper .tv-list-view.active,
html body .tvproduct-grid-list-btn.active,
html body .tv-view-mode .active {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
html body .tv-view-mode a,
html body .tvproduct-grid-list-btn { color: var(--td-text-mid) !important; }
html body .product-list-view .product-miniature,
html body .tvproduct-list-view-wrapper {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-lg) !important;
}

/* ==========================================================================
   STOPKA — UKŁAD KOLUMN
   Pomiar na żywym sklepie: `.tvfooter-links-wrapper` ma `display:block`, więc
   siedzące w nim kolumny bootstrapa (`col-xl-2`) nie ustawiają się obok siebie
   — każda rozciągała się na pełne 800 px i stopka rosła do 1015 px wysokości.
   ========================================================================== */
html body .tvfooter-storelogo-imformation {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) 3fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
html body .tvfooter-links-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px 32px;
  align-items: start;
  width: 100% !important;
  max-width: none !important;
}
/* Szerokości z bootstrapa muszą ustąpić siatce, inaczej kolumny dalej
   biorą 800 px z klasy col-*. */
html body .tvfooter-links-wrapper > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}
/* Pusta kolumna (zmierzona 800×1) nie ma zajmować miejsca w siatce. `:empty`
   jej nie łapie, bo zawiera białe znaki — stąd `:not(:has(*))`. */
html body .tvfooter-links-wrapper > [class*="col-"]:empty,
html body .tvfooter-links-wrapper > [class*="col-"]:not(:has(*)) { display: none; }

/* Dzieci siatki z klasami col-* liczą procentową szerokość WEWNĄTRZ toru —
   kolumna marki miała 102 px w torze 300 px i ścinała logotyp tekstowy.
   Ten sam reset, który dostała prawa część stopki, należy się i lewej. */
html body .tvfooter-storelogo-imformation > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
}
html body .tvfooter-storelogo-weapper { max-width: 340px; }
html body #footer ul { list-style: none; padding: 0; margin: 0; }
html body #footer li { margin-bottom: 8px; }
html body #footer li a { font-size: 14px; line-height: 1.5; }

/* Ikony płatności to JEDNA grafika 1920×980 na białym tle — bez ograniczenia
   rozlewała się na 570×292 i była największym jasnym prostokątem na stronie. */
html body .tvfooter-copy-payment-icon-wrapper img,
html body .tvcmspaymenticon img {
  max-width: 320px !important;
  max-height: 150px !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}

/* Boczne przyciski przyklejone do krawędzi okna były białe. */
html body .tvright-sticky-account,
html body .tvsticky-up-arrow,
html body .cart-preview.tvright-sticky-cart,
html body .tvblock-social-content {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  color: var(--td-text-hi) !important;
}
html body .tvright-sticky-account *,
html body .tvsticky-up-arrow *,
html body .cart-preview.tvright-sticky-cart * { color: var(--td-text-hi) !important; }

/* ==========================================================================
   KOSZYK, KASA I KONTO
   Zmierzone na pobranych stronach sklepu. To tutaj traci się zamówienia,
   więc każda pozycja niżej ma podany kontrast SPRZED poprawki.
   ========================================================================== */

/* --- 1. Suma koszyka miała kontrast 1,01:1 — była NIEWIDZIALNA ------------
   Klient nie widział, ile ma do zapłaty. Razem z nagłówkiem „Koszyk” (1,22:1)
   to była najpoważniejsza usterka w całej ścieżce zakupowej. */
html body .cart-summary .value,
html body .cart-summary-line .value,
html body .cart-total .value,
html body #cart-subtotal-products .value,
html body .cart-summary-totals .value,
html body .cart-detailed-totals .value {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-mono);
  font-weight: 700;
}
html body .cart-summary-line .label,
html body .cart-summary label,
html body .cart-detailed-totals .label { color: var(--td-text-mid) !important; }
html body .cart-total .value,
html body .cart-summary-totals .value { color: var(--td-volt) !important; font-size: 1.15em; }

/* --- 2. Nagłówki stron ścieżki zakupowej (1,10–1,22:1) ------------------- */
html body #main > h1,
html body #content-wrapper > h1,
html body .page-header h1,
html body #js-checkout-summary h1,
html body .cart-grid h1,
html body .card-block h1,
html body .card-block h4,
html body .checkout-step .step-title,
html body .cart-summary .h4,
html body aside h4,
html body .blockcart h4 {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-display);
  letter-spacing: -.02em;
}

/* --- 3. Tytuły bloków bocznych i stopki (1,09–1,24:1) -------------------- */
html body .block-title,
html body .block-title span,
html body #footer .block-title,
html body .tvfooter-opentime-lable,
html body .tvfooter-opentime-value,
html body .tvcmsfooter-link-title,
html body .tvfooter-store-link-title {
  color: var(--td-text-hi) !important;
}

/* --- 4. Teksty stopki były na 4,28:1, tuż pod progiem 4,5 --------------- */
html body .tvfooter-logo-desc,
html body .tvfooter-addresses,
html body .tvfooter-store-link-content,
html body .tvfooter-copy-payment-icon-wrapper p,
html body #footer p { color: var(--td-text-mid) !important; }

/* --- 5. Jasne bloki na ciemnych stronach --------------------------------- */
html body .block-reassurance,
html body .block-reassurance-item,
html body .blockreassurance_product,
html body .oneall_social_login_providers,
html body .oneall_social_login {
  background: var(--td-ink-850) !important;
  border-color: var(--td-line) !important;
  color: var(--td-text-mid) !important;
}
html body .block-reassurance-item span,
html body .block-reassurance-item p { color: var(--td-text-mid) !important; }
/* Ikonki gwarancji to czarne piktogramy na przezroczystym tle — na ciemnym
   trzeba je odwrócić, inaczej są niewidoczne. */
html body .block-reassurance-item img { filter: invert(1) brightness(1.6); opacity: .9; }

/* --- 6. Formularze kasy i konta ------------------------------------------
   Pola tekstowe naprawione wcześniej (16,86:1). Tu reszta kontrolek. */
html body .form-control-label,
html body .checkout-step label,
html body .form-group label { color: var(--td-text-hi) !important; }
html body .form-control-comment,
html body .help-block { color: var(--td-text-low) !important; }
html body .custom-radio input[type="radio"] + span,
html body .custom-checkbox input[type="checkbox"] + span {
  border-color: var(--td-line-strong) !important;
  background: var(--td-ink-800) !important;
}
html body .custom-radio input[type="radio"]:checked + span,
html body .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
}
html body select.form-control,
html body .form-control select { color: var(--td-text-hi) !important; background: var(--td-ink-800) !important; }
html body select.form-control option { background: var(--td-ink-800); color: var(--td-text-hi); }

/* --- 7. Kroki kasy i podsumowanie ---------------------------------------- */
html body .checkout-step,
html body #js-checkout-summary,
html body .cart-grid-body .card,
html body .cart-grid-right .card,
html body .card {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
}
html body .cart-item,
html body .checkout-step .delivery-option {
  border-bottom: 1px solid var(--td-line) !important;
  background: transparent !important;
}
html body .delivery-option.selected,
html body .payment-option.selected { border-color: var(--td-volt) !important; }

/* --- 8. Tekst menu głównego miał kontrast 1,24:1 -------------------------
   Motyw ustawiał `rgb(34,34,34)` na pozycjach mega menu — ciemny szary na
   ciemnym nagłówku. Główna nawigacja sklepu była praktycznie niewidoczna
   i to na KAŻDEJ stronie. */
html body .tv-menu-horizontal ul.menu-content > li > a,
html body .tv-menu-horizontal ul.menu-content > li > a span,
html body #tvdesktop-megamenu a,
html body #tvdesktop-megamenu a span,
html body .tvcmsmega-menu a {
  color: var(--td-text-hi) !important;
}
html body .tv-menu-horizontal ul.menu-content > li > a:hover,
html body .tv-menu-horizontal ul.menu-content > li > a:hover span,
html body #tvdesktop-megamenu a:hover,
html body #tvdesktop-megamenu a:hover span { color: var(--td-volt) !important; }
/* Rozwijane panele mega menu — żeby po najechaniu nie było białego pudła. */
html body .tv-menu-horizontal .tvmegamenu-content-ul,
html body .tv-menu-horizontal ul.menu-dropdown,
html body #tvdesktop-megamenu .dropdown-menu {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
}

/* --- 9. Boczne przyciski przyklejone do krawędzi okna -------------------- */
html body .cart-preview.tvright-sticky-add-to-cart,
html body .tvright-sticky-add-to-cart {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  color: var(--td-text-hi) !important;
}
html body .tvright-sticky-add-to-cart * { color: var(--td-text-hi) !important; }

/* --- 10. Ostatnie dwa elementy z pomiaru --------------------------------
   Pozycje w rozwijanych poziomach menu miały własny ciemny kolor (1,26:1),
   a godziny otwarcia w stopce 3,33:1. Dziedziczenie po odnośniku załatwia
   wszystkie poziomy naraz, bez wyliczania każdego z osobna. */
html body .tvcms-header-menu span,
html body .tv-menu-horizontal span,
html body #tvdesktop-megamenu span { color: inherit !important; }
html body .tvfooter-opentime-content,
html body .tvfooter-opentime-wrapper span { color: var(--td-text-mid) !important; }

/* --- 11. Okruszki nawigacyjne miały rgb(35,35,35) — 1,26:1 --------------
   Ścieżka „Strona główna › Kategoria › Produkt” była nieczytelna na KAŻDEJ
   podstronie sklepu. Znalezione dopiero przy audycie koszyka. */
html body .breadcrumb a,
html body .breadcrumb a span,
html body .breadcrumb li,
html body .breadcrumb li span,
html body nav.breadcrumb ol li a span { color: var(--td-text-mid) !important; }
html body .breadcrumb a:hover,
html body .breadcrumb a:hover span { color: var(--td-volt) !important; }
html body .breadcrumb li:last-child span { color: var(--td-text-hi) !important; }

/* --- 12. Plakietka „TYLKO HANDLOWA” — szary na czerwonym, 2,2:1 --------- */
html body .tvfooter-opentime-closed,
html body .tvfooter-opentime-content.tvfooter-opentime-closed { color: #fff !important; }

/* --- 13. Rejestracja: blok logowania społecznościowego i drobiazgi -------
   Zmierzone na stronie rejestracji: odnośnik w bloku „Register with” miał
   1,52:1, a trzy inne elementy siedziały tuż pod progiem (4,29–4,46). */
html body .oneall_social_login *,
html body .oneall_social_login_providers * { color: var(--td-text-mid) !important; }
html body .oneall_social_login a,
html body .oneall_social_login_providers a { color: var(--td-volt) !important; text-decoration: underline; }
html body .title_block,
html body .no-account p,
html body .register-form p,
html body .form-informations p { color: var(--td-text-mid) !important; }
/* Przycisk „Pokaż” przy haśle. */
html body .input-group .btn,
html body button[data-action="show-password"] {
  background: var(--td-ink-750) !important;
  border: 1px solid var(--td-line-strong) !important;
  color: var(--td-text-hi) !important;
}

/* ==========================================================================
   KARTA PRODUKTU — GŁÓWNY PANEL
   Zmierzone na żywym sklepie i to najpoważniejsze, co zostało:
   cały blok ze zdjęciem i informacjami (1170×1088) miał jasne tło, cena
   kontrast 1,09:1, przycisk „Do Koszyka” 1,15:1, punkty opisu 1,10:1.
   Stąd wrażenie, że karta produktu w ogóle się nie zmieniła.
   ========================================================================== */
html body .tvprduct-image-info-wrapper,
html body .tvproduct-image-info-inner,
html body .tvproduct-information,
html body .product-information,
html body .tvproduct-detail-wrapper,
html body .product-container {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--td-text-mid) !important;
}

/* Zdjęcia produktu zostają na JASNYM kaflu — mają białe tło, więc ciemny
   kafel dałby biały prostokąt. Ale kolor bierzemy z palety, nie czystą biel. */
html body .product-cover,
html body .js-qv-product-cover,
html body .tvproduct-image-block,
html body .product-images li img,
html body .thumb-container {
  background: var(--td-bone) !important;
  border-radius: var(--td-r-md) !important;
}
html body .product-cover img,
html body .js-qv-product-cover img { mix-blend-mode: multiply; }

/* --- cena: 1,09:1 ------------------------------------------------------- */
html body .product-prices .price,
html body .current-price .price,
html body .product-price,
html body span.price,
html body .tvproduct-price {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-display) !important;
  font-weight: 800 !important;
}
html body .product-prices .regular-price,
html body .regular-price { color: var(--td-text-low) !important; text-decoration: line-through; }
html body .product-discount .discount,
html body .discount-percentage { background: #c81e14 !important; color: #fff !important; }

/* --- etykiety i teksty karty (1,09–1,15:1) ------------------------------ */
html body .control-label,
html body .product-variants label,
html body .product-variants .form-control-label,
html body .product-quantity label,
html body .product-actions label { color: var(--td-text-hi) !important; }
html body .product-description li,
html body .product-description p,
html body #description li,
html body .rte li { color: var(--td-text-mid) !important; }
html body .tvall-product-review,
html body .tvall-product-review a { color: var(--td-text-mid) !important; }

/* --- przycisk zakupu: tekst mial 1,15:1 --------------------------------- */
html body .add-to-cart,
html body .tvall-inner-btn.add-to-cart,
html body button.add-to-cart {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
html body .add-to-cart span,
html body .tvall-inner-btn.add-to-cart span,
html body button.add-to-cart span,
html body .add-to-cart i { color: var(--td-ink-900) !important; }
html body .add-to-cart:hover { filter: brightness(1.08); }

/* --- zakladki opisu: aktywna miala 2,19:1 ------------------------------- */
html body .tabs .nav-link,
html body .product-tabs .nav-link { color: var(--td-text-mid) !important; }
html body .tabs .nav-link.active,
html body .product-tabs .nav-link.active {
  color: var(--td-text-hi) !important;
  border-bottom: 2px solid var(--td-volt) !important;
  background: transparent !important;
}

/* --- dolny pasek zakupu motywu (1425×155, jasny) ------------------------ */
html body .tvfooter-product-sticky-bottom,
html body .tvproduct-sticky-bottom-wrapper {
  background: var(--td-ink-850) !important;
  border-top: 1px solid var(--td-line) !important;
}
html body .tvfooter-product-sticky-bottom * { color: var(--td-text-hi) !important; }
html body .tvfooter-product-sticky-bottom .add-to-cart,
html body .tvfooter-product-sticky-bottom .add-to-cart * { color: var(--td-ink-900) !important; }

/* --- ostatnie cztery z pomiaru karty produktu ---------------------------
   Tytuł produktu miał 1,11:1, „Tabela Rozmiarów” 1,00:1 (kolor identyczny
   z tłem), „Zaloguj się” w nagłówku 1,06:1, ostrzeżenie o stanie 3,83:1. */
html body.page-product h1,
html body #main h1.h1,
html body h1.product-detail-name,
html body .tvproduct-name h1 {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-display) !important;
}
html body .tvcms-manage-events,
html body .tvmyaccount-link span,
html body .tvcms_customer_name { color: var(--td-text-hi) !important; }
html body .tvsize-chart span,
html body .tvsize-chart a,
html body a[href*="size"] span,
html body .tvproduct-size-chart * { color: var(--td-text-mid) !important; }
html body .tvlowqty,
html body .product-quantities span,
html body .product-availability { color: var(--td-flame) !important; }
/* „Tabela Rozmiarów” miała kontrast dokładnie 1,00 — kolor tekstu identyczny
   z tłem. Selektor po klasie modułu, bo odnośnik nie ma własnej. */
html body .tvcmssizechart span,
html body .tvcmssizechart a,
html body [class*="sizechart"] span,
html body [class*="size-chart"] span,
html body [data-target*="size"] span { color: var(--td-text-mid) !important; }

/* ==========================================================================
   NAGŁÓWEK — DOCIĄGNIĘCIE DO WIZUALIZACJI
   Logo tekstowe, akcenty kolorystyczne w menu, plakietka Ctrl K w szukajce
   i separatory w paśmie ofertowym.
   ========================================================================== */

/* --- logo tekstowe ------------------------------------------------------- */
html body .td-logotype a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
html body .td-logotype__name {
  font-family: var(--td-f-display);
  font-size: 24px; font-weight: 900; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--td-text-hi) !important;
  white-space: nowrap;
}
html body .td-logotype__tag {
  font-family: var(--td-f-mono);
  font-size: 8.5px; font-weight: 500; line-height: 1;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--td-text-low) !important;
  white-space: nowrap;
}
html body .td-logotype a:hover .td-logotype__name { color: var(--td-volt) !important; }

/* --- akcenty w menu: Dropy limonkowe, Outlet czerwony --------------------
   Po adresie odnośnika, więc działa niezależnie od tego, jak pozycja
   nazywa się w panelu menu. */
html body .td-head__nav a[href*="dropy" i],
html body .td-head__nav a[href*="dropy" i] span,
html body .td-head__nav a[href*="limitowane" i],
html body .td-head__nav a[href*="limitowane" i] span { color: var(--td-volt) !important; }
html body .td-head__nav a[href*="outlet" i],
html body .td-head__nav a[href*="outlet" i] span,
html body .td-head__nav a[href*="wyprzeda" i],
html body .td-head__nav a[href*="wyprzeda" i] span { color: #ff5b52 !important; }

/* Plakietka „Ctrl K” w polu wyszukiwania została usunięta na życzenie.
   Sam skrót klawiszowy nadal działa — patrz koniec vault.js. */

/* --- pasmo ofertowe: separatory między pozycjami -------------------------
   Treść paska pochodzi z panelu. Gdy jest w niej kilka fraz, każda w swoim
   elemencie, rozdzielamy je kropką jak w wizualizacji. */
html body .td-head__marquee .tvheader-nav-offer-text > *:not(:last-child)::after,
html body .td-head__marquee .td-ticker__track > *:not(:last-child)::after {
  content: '·'; margin-inline: 14px; opacity: .55;
}

/* ==========================================================================
   RESZTA STRON — okna modalne, komunikaty, treści CMS, tabele
   Wspólne komponenty PrestaShop, które wyskakują na różnych stronach
   (tabela rozmiarów, komunikaty po dodaniu do koszyka, regulamin,
   historia zamówień) i dotąd miały jasne tła motywu domyślnego.
   ========================================================================== */
html body .modal-content {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line-strong) !important;
  color: var(--td-text-mid) !important;
  border-radius: var(--td-r-md) !important;
}
html body .modal-header { border-bottom: 1px solid var(--td-line) !important; }
html body .modal-footer { border-top: 1px solid var(--td-line) !important; }
html body .modal-title,
html body .modal-header h1, html body .modal-header h2,
html body .modal-content h4, html body .modal-content strong { color: var(--td-text-hi) !important; }
html body .modal-content .close,
html body .modal-content button.close {
  color: var(--td-text-hi) !important; opacity: .8; text-shadow: none;
}
html body .modal-content table th { color: var(--td-text-hi) !important; }
html body .modal-content table td,
html body .modal-content table th {
  background: transparent !important;
  border-color: var(--td-line) !important;
}

html body .alert { border: 1px solid var(--td-line); border-left-width: 3px; border-radius: var(--td-r-sm); background: var(--td-ink-850) !important; color: var(--td-text-mid) !important; }
html body .alert a { color: var(--td-text-hi); text-decoration: underline; }
html body .alert-success { border-left-color: var(--td-volt) !important; }
html body .alert-danger { border-left-color: var(--td-flame) !important; }
html body .alert-warning { border-left-color: #e8b73a !important; }

html body .page-cms,
html body #content.page-content { background: transparent !important; color: var(--td-text-mid) !important; }
html body .page-cms h1, html body .page-cms h2, html body .page-cms h3,
html body .page-cms strong { color: var(--td-text-hi) !important; }

html body table.table,
html body .table td, html body .table th {
  background: transparent !important;
  border-color: var(--td-line) !important;
  color: var(--td-text-mid) !important;
}
html body .table thead th { color: var(--td-text-hi) !important; }
html body .table a { color: var(--td-volt); }

/* ==========================================================================
   NEUTRALIZACJA NAKŁADEK PANELU ThemeVolty
   Trzy źródła nadpisań zmierzone na żywym sklepie:

   1) themes/v1_kkillur_3/assets/css/all_theme_custom_1_1.css — plik
      generowany przez opcje motywu z „koloru akcentu" (fiolet #71009d
      i #520091). Moduł opcji wpina go surowym <link> na KOŃCU <head>,
      czyli ZA skompilowanym arkuszem motywu — wygrywa więc każdy remis
      specyficzności. Paczka wdrożeniowa zawiera pustą wersję tego pliku,
      ale każdy zapis opcji motywu w panelu generuje go od nowa; poniższe
      reguły trzymają wygląd także wtedy. Kontrujemy tylko miejsca stale
      widoczne — globalne `a:hover` zostawiamy pustemu plikowi, bo kontra
      o tej szerokości psułaby własne kolory akcentów menu.

   2) Opcja „box layout" — .tv-main-div.container zaciska cały sklep do
      szerokości kontenera i odsłania tło po bokach. Wizualizacja jest
      pełnoekranowa, a sekcje mają własne wewnętrzne kontenery.

   3) Snackbar z losowym produktem (biała karta z gwiazdkami w rogu
      ekranu) — nie ma go w wizualizacji.
   ========================================================================== */

/* pełna szerokość zamiast box layout */
html body .tv-main-div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* snackbar z losowym produktem */
html body .tvcms-snackbar { display: none !important; }

/* fioletowy suwak przewijania */
html ::-webkit-scrollbar-thumb { background-color: var(--td-ink-500) !important; }

/* mega menu: kreska pod rozwiniętym panelem */
html body #tvdesktop-megamenu .tv-menu-horizontal .menu-dropdown { border-bottom-color: var(--td-volt) !important; }

/* okno „produkt dodany do koszyka" */
html body #blockcart-modal .modal-header { background: var(--td-ink-850) !important; }
html body #blockcart-modal .modal-title,
html body #blockcart-modal .modal-header .close { color: var(--td-text-hi) !important; }
html body #blockcart-modal .product-name { color: var(--td-text-hi) !important; }
html body .cart-content-btn a.tvall-inner-btn { background: var(--td-volt) !important; }
html body .cart-content-btn a.tvall-inner-btn span,
html body .cart-content-btn a.tvall-inner-btn i { color: var(--td-ink-900) !important; }

/* rozwijany podgląd koszyka w nagłówku */
html body .ttvcart-product-value,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-label-value.total .ttvcart-product-value,
html body .ttvcmscart-show-dropdown-right .tvcart-product-content .product-price { color: var(--td-text-hi) !important; }
html body .ttvcart-product-list-checkout,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-checkout,
html body .tvcart-product-list-checkout { background: var(--td-volt) !important; color: var(--td-ink-900) !important; }
html body .ttvcart-product-list-checkout a,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-checkout a,
html body .tvcart-product-list-checkout a,
html body #header .tvcart-product-list-checkout:hover a { color: var(--td-ink-900) !important; }
html body .tvcart-product-list-viewcart:hover,
html body .tvcart-product-list-viewcart:hover:after,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-viewcart:hover:after { background: var(--td-ink-750) !important; }
html body .tvcart-product-list-viewcart:hover a,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-viewcart:hover a { color: var(--td-text-hi) !important; }

/* pola wyboru */
html body .custom-checkbox input[type=checkbox]+span .checkbox-checked { color: var(--td-volt) !important; }
html body .custom-radio input[type=radio]:checked+span { background-color: var(--td-volt) !important; }

/* pasek cookies: przycisk zamknięcia */
html body button.close-cookie.tvclose-icon { background: var(--td-ink-800) !important; }
html body .tvcmscookies-notice .tvclose-icon span { color: var(--td-text-hi) !important; }

/* najechania: menu, stopka, karty, zakładki, okruszki */
html body #header .tv-menu-horizontal ul li.level-1:hover>a,
html body #header .tv-menu-horizontal ul li.level-1:hover>a span,
html body .tv-menu-horizontal .cat-drop-menu li:hover>a span,
html body #header .tv-menu-horizontal ul li.level-1 ul li.item-header a:hover,
html body #header .tv-menu-horizontal ul li.level-1 ul li.item-line a:hover { color: var(--td-volt) !important; }
html body .footer-container li a:hover,
html body .tvfooter-store-link a:hover,
html body .tvfooter-store-link-content a:hover,
html body .tvfooter-view-link a:hover,
html body .tvcopylink p:hover { color: var(--td-volt) !important; }
html body .tvproduct-wrapper:hover .tvproduct-name h6 { color: var(--td-text-hi) !important; }
html body .tabs .nav-tabs .nav-link.active,
html body .tabs .nav-tabs .nav-link:hover { color: var(--td-volt) !important; }
html body #wrapper .breadcrumb li:last-child a,
html body #wrapper .breadcrumb li:hover a { color: var(--td-text-hi) !important; }
html body .page-content.page-cms a { color: var(--td-volt) !important; }

/* konto w nagłówku: ikona i nazwisko przy najechaniu */
html body .tv-account-wrapper:hover .tv-myaccount-btn-desktop span,
html body .tv-account-wrapper:hover .tv-myaccount-btn-desktop span a,
html body .tv-header-account.tv-account-wrapper:hover .tv-myaccount-btn-desktop span a { color: var(--td-volt) !important; }
html body .tv-account-wrapper:hover .tv-myaccount-btn-desktop svg path { stroke: var(--td-volt) !important; }
html body .tv-account-wrapper:hover .tv-myaccount-btn-desktop svg g g path,
html body #tvcmsdesktop-currency-selector:hover .tv-currency-btn svg g path { fill: var(--td-volt) !important; }

/* etykiety promocji na kartach */
html body .product-flags.tvproduct-sale-pack-wrapper li { color: var(--td-volt) !important; }
html body .tvproduct-timer-wrapper .seconds,
html body .tvproduct-wrapper .tvproduct-timer-wrapper .seconds { color: var(--td-volt) !important; }

/* paginacja i przełącznik widoku listy */
html body .pagination .current a,
html body .page-item.active .page-link { background: var(--td-volt) !important; border-color: var(--td-volt) !important; color: var(--td-ink-900) !important; }
html body #products .tvproduct-view.tvproduct-list-2,
html body #products .tvproduct-view.tvproduct-catelog,
html body #products.list-2 .tvproduct-view.tvproduct-list-2,
html body #products.catelog .tvproduct-view.tvproduct-catelog { background: var(--td-ink-750) !important; }

/* przyciski motywu: wypełnienie najechania było fioletowe */
html body .tvall-inner-btn:hover,
html body .tvall-inner-btn:hover:after,
html body .tvall-inner-btn:hover:before,
html body .tvproduct-add-to-cart:hover:after,
html body .tvproduct-add-to-cart:after,
html body .tvproduct-add-to-cart.tvproduct-out-of-stock:hover:after { background: var(--td-volt) !important; }
html body .tvall-inner-btn:hover span,
html body .tvall-inner-btn:hover i,
html body .tvproduct-wrapper .tvproduct-cart-btn:hover .tvproduct-add-to-cart span { color: var(--td-ink-900) !important; }

/* szukajka: ikona przy aktywnym polu */
html body .search-widget form input[type=text]:focus+button .search,
html body .search-widget form button[type=submit] .search:hover { color: var(--td-volt) !important; }

/* koszyk: pole ilości i przyciski +/- były białe */
html body #cart .js-cart-line-product-quantity,
html body #cart input[name*="quantity"],
html body #cart .bootstrap-touchspin input,
html body #cart .bootstrap-touchspin .btn-touchspin {
  background: var(--td-ink-800) !important;
  border-color: var(--td-line) !important;
  color: var(--td-text-hi) !important;
}

/* ==========================================================================
   ZGODNOŚĆ 1:1 Z WIZUALIZACJĄ — nagłówek, menu, stopka
   Runda po oględzinach żywego sklepu obok makiety (obie w 1351 px):

   • rozwijane menu miało BIAŁE tło przy jasnym tekście — wcześniejsza
     poprawka celowała w `ul.menu-dropdown`, a panele bywają DIV-ami
     (`.tv-sub-menu.menu-dropdown`), więc kwalifikator tagu je omijał;
   • koszyk w nagłówku to było pudło 150 px z ceną — w makiecie jest ikona
     z plakietką liczby sztuk;
   • nad hero wisiał blok H1 (td-home-intro), którego w makiecie nie ma —
     w makiecie H1 to napis hero; blok zostaje dla wyszukiwarek, znika z oczu;
   • pasmo ofertowe w makiecie PŁYNIE — animacja rusza, gdy vault.js zdąży
     powielić treść (klasa .td-ticker), bez skryptu pasmo stoi wyśrodkowane;
   • stopka: logo-obrazek (biały JPG) zastępuje logotyp tekstowy, kropki
     material-icons przy linkach znikają, pasek płatności dostaje ramkę.
   ========================================================================== */

/* --- mega menu: każdy wariant panelu na ciemno --------------------------- */
html body .tv-menu-horizontal .menu-dropdown,
html body #tvdesktop-megamenu .menu-dropdown,
html body #tvdesktop-megamenu .dropdown-menu {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-bottom: 2px solid var(--td-volt) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5) !important;
}
html body .menu-dropdown .tv-sub-menu,
html body .menu-dropdown ul,
html body .menu-dropdown li { background: transparent !important; }
html body .menu-dropdown a,
html body .menu-dropdown span { color: var(--td-text-mid) !important; }
html body .menu-dropdown .item-header a,
html body .menu-dropdown .item-header span { color: var(--td-text-hi) !important; }

/* --- koszyk w nagłówku: ikona + plakietka --------------------------------
   Szerokość 150 px składały trzy warstwy zmierzone na żywo: min-width 120 px
   i padding 10 px na .tvcart-icon-text-wrapper, padding-left 30 px na
   .tvheader-cart-wrapper oraz sztywne 96 px na samej ikonie. */
html body .td-head__cart .tvheader-cart-wrapper { padding: 0 !important; }
html body .td-head__cart .tvcart-icon-text-wrapper {
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}
html body .td-head__cart .tv-cart-icon {
  width: 26px !important; height: 26px !important;
  min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
html body .td-head__cart .tv-cart-icon svg { width: 26px !important; height: 26px !important; }
html body .td-head__cart svg path { fill: var(--td-text-hi) !important; }
html body .td-head__cart svg path[style*="FFD741" i] { fill: var(--td-volt) !important; }
html body .td-head__cart .tv-cart-cart-inner {
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1;
  margin-left: 4px;
}
html body .td-head__cart .tv-cart-cart-inner * { color: var(--td-ink-900) !important; }

/* --- H1 strony głównej: zostaje dla robotów, znika z układu -------------- */
html body .td-home-intro {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- pasmo ofertowe: taśma jak w makiecie -------------------------------- */
html body .tvheader-nav-offer-text.td-ticker {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
  padding-inline: 0;
}
html body .td-ticker .td-ticker__track {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 14px;
  padding-inline: 24px;
  animation: td-ticker 26s linear infinite;
}
/* Kropka także na szwie między kopiami taśmy — wzór biegnie bez dziury. */
html body .td-ticker .td-ticker__track::after { content: '·'; opacity: .55; margin-left: 14px; }
html body .td-head__marquee:hover .td-ticker__track { animation-play-state: paused; }
@keyframes td-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  html body .td-ticker .td-ticker__track { animation: none; }
}

/* --- stopka: logotyp tekstowy zamiast obrazka ---------------------------- */
html body .tvfooter-img-block img { display: none !important; }
html body .tvfooter-img-block::before {
  content: 'TRUE·DROP';
  display: block;
  font-family: var(--td-f-display);
  font-size: 24px; font-weight: 900;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
}
html body .tvfooter-img-block::after {
  content: 'Sport. Styl. Oryginał.';
  display: block;
  margin-top: 4px;
  font-family: var(--td-f-mono);
  font-size: 8.5px; font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--td-volt);
}

/* --- stopka: porządki --------------------------------------------------- */
html body #footer li .material-icons { display: none !important; }
html body #footer .tvfooter-logo-desc { max-width: 300px; }
html body footer.page-footer:empty { display: none; }
html body .tvfooter-copy-payment-icon-wrapper {
  border-top: 1px solid var(--td-line);
  padding-top: 20px;
}
html body .tvcopylink p,
html body .tvcopylink {
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--td-text-low) !important;
}

/* ==========================================================================
   AUDYT 1:1 — RUNDA TRZECIA
   Cztery znaleziska z oględzin żywego sklepu (pomiar, nie zgadywanie):

   1. Stały pasek zakupu ThemeVolty na karcie produktu: fixed, 156 px,
      widoczny OD WEJŚCIA i zasłaniający dół ekranu. W makiecie pasek zakupu
      wsuwa się dopiero, gdy przycisk „Do koszyka" zniknie za górną krawędzią
      — dokładnie tak działa nasz .td-stickybuy. Duplikat motywu znika.

   2. Prawy panel rozwijanych skrótów (koszyk/konto/do góry) i okrągły
      przycisk „na górę" — nie ma ich w makiecie; na życzenie zostają tylko
      ikony Facebooka i Instagrama przy lewej krawędzi.

   3. Ikona koszyka to wielowarstwowy SVG motywu (żółte wypełnienie wpisane
      inline) — po przemalowaniu wyglądał jak plama. Zamiast niego czysta
      ikona konturowa jak w makiecie, wpięta tłem, więc żaden inline-styl
      jej nie dotknie. To samo z lupą szukajki (pusta ligatura ikony).

   4. Boczny pasek social zostaje, ale w skórze VAULT.
   ========================================================================== */

/* --- 1. pasek zakupu motywu ---------------------------------------------- */
html body .tvfooter-product-sticky-bottom { display: none !important; }

/* --- 2. prawy panel skrótów i „na górę" ---------------------------------- */
html body .tvcmsright-sticky,
html body .tvbottom-to-top { display: none !important; }

/* --- 3a. ikona koszyka --------------------------------------------------- */
html body .td-head__cart .tv-cart-icon svg { display: none !important; }
html body .td-head__cart .tv-cart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f5f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
html body .td-head__cart:hover .tv-cart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ff3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* --- 3b. lupa szukajki --------------------------------------------------- */
html body .td-head__search button .material-icons { font-size: 0 !important; }
html body .td-head__search button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f5f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-color: transparent !important;
  border: 0 !important;
  min-width: 40px;
}

/* --- 4. pasek social (zostaje: Facebook + Instagram) --------------------- */
html body .block-social.tv-footer-social-icon {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-sm);
  padding: 6px !important;
}
html body .block-social.tv-footer-social-icon li { background: transparent !important; }
html body .block-social.tv-footer-social-icon a { color: var(--td-text-mid) !important; }
html body .block-social.tv-footer-social-icon a:hover { color: var(--td-volt) !important; }

/* ==========================================================================
   AUDYT 1:1 — RUNDA CZWARTA: karta produktu, kategoria, stopka
   Wszystko poniżej to odpowiedzi na pomiary z żywego sklepu, nie domysły.
   ========================================================================== */

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

/* Pole ilości było jedynym białym elementem kolumny zakupu. */
html body #quantity_wanted,
html body .product-quantity input,
html body .product-quantity .bootstrap-touchspin input {
  background: var(--td-ink-800) !important;
  border-color: var(--td-line) !important;
  color: var(--td-text-hi) !important;
}

/* „Ostatnie sztuki w magazynie” jako chip dostępności, jak w makiecie. */
html body #product-availability,
html body .product-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--td-volt-dim);
  border-radius: var(--td-r-pill);
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--td-volt) !important;
}
html body #product-availability .material-icons { display: none; }

/* Gwiazdki oceny — w makiecie limonkowe, były białe. */
html body .tvall-product-star-icon i,
html body .star_content i,
html body .tvproduct-comment-block i,
html body .grade-stars i { color: var(--td-volt) !important; }

/* Blok „Polityka prywatności / Dostawy / Zwroty” (ps_reassurance) dubluje
   trzy zapewnienia modułu pod przyciskiem zakupu — makieta ma jedno źródło. */
html body #block-reassurance { display: none !important; }

/* Nagłówek siatki rozmiarów — „Wybierz rozmiar” jak sekcja w makiecie. */
html body .td-variants-item .control-label,
html body .td-size-head {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--td-text-hi) !important;
}

/* Przycisk „Do koszyka” — na ekranie wizualizacji to limonkowa PIGUŁKA
   na pełną szerokość kolumny. */
html body .product-add-to-cart .add-to-cart {
  width: 100%;
  min-height: 56px;
  padding-inline: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--td-r-pill) !important;
}

/* Taby opisu w typografii makiety (mono, wersaliki, limonkowy spód). */
html body .tabs .nav-tabs { border-bottom: 1px solid var(--td-line) !important; }
html body .tabs .nav-tabs .nav-link {
  font-family: var(--td-f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent !important;
  border: 0 !important;
}
html body .tabs .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--td-volt); }
html body .tabs .tab-content,
html body .tabs .tab-content p,
html body .product-description,
html body .product-description p { color: var(--td-text-mid) !important; }
html body .tabs .tab-content h2, html body .tabs .tab-content h3,
html body .tabs .tab-content strong { color: var(--td-text-hi) !important; }

/* --- kategoria (archiwum) ------------------------------------------------ */

/* Tytuły filtrów były rgb(17,17,17), linki rgb(55,55,55) — niewidoczne na
   ciemnym panelu. Do tego trzy BIAŁE pudła rozwijanych fasetek. */
/* Tytuły sekcji filtrów — 1:1 z wizualizacją (.fgroup__btn): 14 px, waga
   700, NORMALNA wielkość liter. Wcześniej stało tu mono 11 px WERSALIKAMI,
   przez co panel wyglądał zupełnie inaczej niż wzorzec. */
html body #search_filters .facet .facet-title,
html body .facet .facet-title,
html body #search_filters .tvfilter-search-types-title {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
}
html body #search_filters .facet-label a,
html body #search_filters a,
html body .facet-label a { color: var(--td-text-mid) !important; }
html body #search_filters .facet-label a:hover,
html body .facet-label a:hover { color: var(--td-volt) !important; }
html body #search_filters .magnitude { color: var(--td-text-low) !important; }
/* Białe było samo pudło .facet-dropdown, nie tylko tytuł w środku. */
html body .facet-dropdown { background: transparent !important; }
html body .facet-dropdown .select-title {
  background: var(--td-ink-800) !important;
  color: var(--td-text-hi) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-sm);
}
html body .facet-dropdown .dropdown-menu,
html body .facet-dropdown .select-list {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  color: var(--td-text-mid) !important;
}
html body .facet-dropdown .select-list:hover { color: var(--td-ink-900) !important; }

/* Nagłówek kategorii — w makiecie duży, wystawowy. */
html body#category #js-product-list-header h1,
html body#category .tvcategory-header h1,
html body#category h1 {
  font-family: var(--td-f-display);
  /* 64 px na desktopie — zmierzone w makiecie (runda dziewiąta). */
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4rem);
  font-weight: 900;
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
}

/* --- stopka -------------------------------------------------------------- */

/* Strzałki zwijania sekcji mają sens tylko na telefonie. */
@media (min-width: 992px) {
  html body #footer .tvfooter-toggle-icon-wrapper { display: none !important; }
}
html body #footer li a { color: var(--td-text-mid) !important; }
html body #footer li a:hover { color: var(--td-volt) !important; }
/* Etykieta „Telefon” bez numeru pod spodem — sama etykieta to szum. */
html body #footer .tvfooter-store-link-content { display: none !important; }

/* ==========================================================================
   AUDYT 1:1 — RUNDA PIĄTA: siatka produktów, stała kolumna filtrów,
   galeria produktu, stopka. Wszystko z pomiarów na żywym sklepie:

   • #products miał klasę `catelog` — KAŻDA miniatura niesie w sobie cztery
     warianty szablonu (grid/grid-2/list/catelog) i widoczny był wariant
     WIERSZOWY na 1170 px. Stąd „karty różnią się od wizualizacji" — to nie
     były karty, tylko wiersze. Wymuszamy wariant grid niezależnie od
     ustawień modułu i ciasteczka przełącznika widoku.

   • #left-column stał na x=-500 — ThemeVolty trzyma filtry w wysuwanej
     szufladzie za lewą krawędzią. W makiecie to zwykła stała kolumna.
     Od 992 px wraca do dokumentu; poniżej zostaje szuflada (tak działa
     mobilna wersja makiety).

   • Galeria: miniatury to karuzela slick POD zdjęciem; w makiecie na
     desktopie stoją pionowo Z LEWEJ (84 px). Neutralizujemy transformy
     slicka i układamy siatką; podmiana zdjęcia po kliknięciu działa dalej,
     bo wisi na miniaturze, nie na karuzeli.

   • Logo tekstowe stopki renderowało się w bloku o szerokości 72 px
     po ukrytym obrazku — było ścięte. Stąd „stopka bez zmian".
   ========================================================================== */

/* --- siatka produktów zamiast widoku wierszowego ------------------------- */
@media (min-width: 768px) {
  html body #products .tvproduct-wrapper.grid { display: block !important; }
  html body #products .tvproduct-wrapper.grid-2,
  html body #products .tvproduct-wrapper.list,
  html body #products .tvproduct-wrapper.catelog { display: none !important; }
  html body #products .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 26px 14px;
  }
  html body #products .product-miniature {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Przełącznik widoków traci sens, skoro widok jest jeden — jak w makiecie. */
  html body .tvcmsproduct-grid-list { display: none !important; }
}
html body .tvgrid-list-view-product,
html body .tvall-block-box-shadows { box-shadow: none !important; background: transparent !important; }

/* Typografia karty wg makiety. */
html body #products .tvproduct-name h6,
html body #products .tvproduct-name h6 a,
html body .tvproduct-wrapper .tvproduct-name h6 {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.005em;
  color: var(--td-text-hi);
}
html body #products .tv-product-price .price,
html body .tvproduct-wrapper .tv-product-price .price {
  font-family: var(--td-f-mono);
  font-size: 16px;
  font-weight: 700;
}
html body #products .regular-price,
html body .tvproduct-wrapper .regular-price {
  font-family: var(--td-f-mono);
  font-size: 11.5px;
  color: var(--td-text-low) !important;
  text-decoration: line-through;
  font-weight: 500;
}

/* --- filtry jako stała lewa kolumna od 768 px ----------------------------
   Wcześniej próg stał na 992 px, ale na tabletach (768–991) zostawała
   wysuwana szuflada motywu, która otwierała się jako pływające pudło na
   środku treści. Makieta na tej szerokości też pokazuje panel na stałe —
   węższy, żeby siatka utrzymała dwie kolumny. */
@media (min-width: 768px) {
  html body #left-column {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: clamp(218px, 23vw, 272px) !important;
    min-width: 218px;
    max-width: 272px;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 clamp(218px, 23vw, 272px);
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Górny margines przez zmienną: vault.js wpisuje w --td-hero-h wysokość
       hero kategorii (wyciągniętego nad obie kolumny), żeby filtry zaczynały
       się pod nim. Twarde `margin: 0` blokowałoby ten zapis. */
    margin: var(--td-hero-h, 0px) 0 0 !important;
    z-index: 1;
  }
  /* Klasa .td-row-filtry to fallback nadawany skryptem — przeglądarki bez
     obsługi :has() (starsze Firefox/Safari) dostają ten sam układ. */
  html body .row:has(> #left-column),
  html body .row.td-row-filtry {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 28px;
  }
  html body .row:has(> #left-column) > #content-wrapper,
  html body .row.td-row-filtry > #content-wrapper {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
  }
  /* KOLEJNOŚĆ KOLUMN. W kodzie HTML #content-wrapper stoi PRZED
     #left-column — motyw rodzica odwraca je wizualnie bootstrapowymi
     klasami push/pull (position:relative + przesunięcie), które działają
     tylko na dużych ekranach. Po włączeniu flexa układ idzie za kolejnością
     w kodzie, więc na tablecie (768–991) filtry lądowały PO PRAWEJ.
     `order: -1` ustawia je z lewej niezależnie od kodu i breakpointów,
     a wyzerowane przesunięcia zapobiegają podwójnemu odsunięciu. */
  html body .row:has(> #left-column) > #left-column,
  html body .row.td-row-filtry > #left-column {
    order: -1;
    left: auto !important;
    right: auto !important;
  }
  html body .row:has(> #left-column) > #content-wrapper,
  html body .row.td-row-filtry > #content-wrapper {
    order: 0;
    left: auto !important;
    right: auto !important;
  }
  /* Przycisk otwierania szuflady i jej przycisk zamykania — zbędne. */
  html body .tv-left-pannal-btn-wrapper,
  html body .tvcms-left-column-wrapper .tv-left-pannal-btn-wrapper,
  html body #left-column .tvleft-column-close-btn { display: none !important; }
  html body #search_filters_wrapper { width: 100% !important; padding: 0 !important; }
  html body #search_filters { width: 100% !important; }
}

/* --- galeria produktu: miniatury pionowo z lewej ------------------------- */
@media (min-width: 992px) {
  html body.page-product .images-container {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    align-items: start;
  }
  html body.page-product .images-container .product-cover { grid-column: 2; grid-row: 1; margin: 0; }
  html body.page-product .tvvertical-slider { grid-column: 1; grid-row: 1; width: 84px; }
  html body.page-product .tvvertical-slider .slick-list {
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body.page-product .tvvertical-slider .slick-track {
    transform: none !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  html body.page-product .tvvertical-slider .slick-slide {
    width: 84px !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  html body.page-product .tvvertical-slider .slick-cloned { display: none !important; }
  html body.page-product .tvvertical-slider .slick-arrow,
  html body.page-product .tvvertical-slider .arrows { display: none !important; }
}
html body.page-product .thumb-container img,
html body.page-product .product-images img { cursor: pointer; }
html body.page-product .product-images .thumb.selected,
html body.page-product .product-images > li.thumb-container > .thumb.selected,
html body.page-product .slick-current img { border-color: var(--td-volt) !important; }

/* --- kolumna zakupu: liczby z makiety ------------------------------------ */
html body.page-product h1 { line-height: 1.05; }
html body.page-product .regular-price {
  font-family: var(--td-f-mono);
  font-size: 15px;
  color: var(--td-text-low) !important;
  text-decoration: line-through;
  font-weight: 500;
}
html body .tabs .tab-content,
html body .tabs .tab-content p,
html body .product-description,
html body .product-description p { font-size: 14px; line-height: 1.7; }

/* --- oznaczenia produktów: chipy jak na ekranach ------------------------- */
html body .product-flag.new,
html body .tvproduct-flags .product-flag.new {
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  font-family: var(--td-f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
}
html body .product-flag.discount,
html body .product-flag.on-sale,
html body .product-flag.discount-percentage,
html body .tvproduct-flags .product-flag.discount {
  background: var(--td-flame) !important;
  color: #fff !important;
  font-family: var(--td-f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 3px 8px;
}

/* ==========================================================================
   AUDYT 1:1 — RUNDA SZÓSTA: kolumna zakupu i filtry jak na ekranach
   ========================================================================== */

/* Ilość znika z karty produktu — w wizualizacji jej nie ma (jedna para).
   Pole zostaje w formularzu z wartością 1, więc dodawanie działa bez zmian. */
html body.page-product .product-quantity { display: none !important; }

/* ==========================================================================
   KAFELKI ROZMIARÓW — BLOK NAPRAWCZY (runda siódma)
   Zmierzony fakt: na tym sklepie kontener wariantów ma KLASĘ
   `product-variants`, a wcześniejsze reguły celowały w NIEISTNIEJĄCE
   `#product-variants` — kafelki renderował rodzic jako białe mini-kwadraty
   z niewidocznym numerem (biały na białym). Wszystkie stare selektory
   zostały przepisane na klasę, a ten blok dokłada twarde wartości
   z `!important`, żeby żadna reguła rodzica nie wygrała remisu.
   ========================================================================== */
html body .product-variants .td-size-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html body .product-variants .td-size {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* KAFLEM jest LABEL, tłem — jego pseudoelement. Powód (zmierzony, nie
   teoretyczny): motyw rodzica maluje SAM INPUT jako biały prostokąt NAD
   spanem, a tła spana nie dało się przebić nawet stylem inline z
   !important. Do pseudoelementu żadna reguła rodzica nie sięga — test na
   żywym sklepie: kafel ciemny, zaznaczony limonkowy. Input rozciąga się
   niewidzialny na wierzchu, więc klik działa jak dotąd. */
html body .product-variants .td-size label {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 6px 4px;
  border: 1.5px solid var(--td-line) !important;
  border-radius: var(--td-r-sm) !important;
  cursor: pointer;
}
html body .product-variants .td-size label::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--td-ink-800);
}
html body .product-variants .td-size label:hover { border-color: var(--td-line-strong) !important; }
html body .product-variants .td-size label:hover::before { background: var(--td-ink-750); }
/* .td-wybrany = fallback nadawany skryptem dla przeglądarek bez :has(). */
html body .product-variants .td-size label:has(input:checked),
html body .product-variants .td-size label.td-wybrany { border-color: var(--td-volt) !important; }
html body .product-variants .td-size label:has(input:checked)::before,
html body .product-variants .td-size label.td-wybrany::before { background: var(--td-volt); }
html body .product-variants .td-size label:has(input:focus-visible) {
  outline: 3px solid var(--td-volt);
  outline-offset: 2px;
}
html body .product-variants .td-size .input-radio {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  z-index: 2;
}
html body .product-variants .td-size__box {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-mono);
  font-size: 14px;
  line-height: 1.1;
}
html body .product-variants .td-size label:has(input:checked) .td-size__box,
html body .product-variants .td-size label.td-wybrany .td-size__box {
  color: #000 !important;
  font-weight: 700;
}
html body .product-variants .td-size label:has(input:checked) .td-size__box em,
html body .product-variants .td-size label.td-wybrany .td-size__box em { color: rgba(0, 0, 0, .6); }
html body .td-size--brak label { opacity: .32; cursor: not-allowed !important; }
html body .td-size--brak .td-size__box { text-decoration: line-through; }

/* Pasek „UWAGA! Zostało tylko N na stanie” z progress-barem — wizualizacja
   go nie ma; o niskim stanie mówi chip dostępności nad rozmiarami. */
html body .tvproduct-stock-social { display: none !important; }

/* Motyw rodzica renderuje przy tytule ZAWSZE pięć pełnych gwiazdek — na
   sztywno, niezależnie od ocen. Atrapa znika; zostaje odnośnik „Opinie (N)”,
   a cały wiersz chowa skrypt, gdy N = 0. */
html body .tvall-product-star-icon .star_content { display: none !important; }
html body .tvall-product-star-icon .tvall-product-review {
  font-size: 13px;
  color: var(--td-text-mid);
  text-decoration: underline;
  cursor: pointer;
}

/* Marka i kod nad tytułem (kopiowane skryptem z zakładki Szczegóły). */
html body .td-buybrand { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
html body .td-buybrand__marka {
  font-family: var(--td-f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-volt) !important;
}
html body .td-buybrand__marka:hover { text-decoration: underline; }
html body .td-buybrand__kod {
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--td-text-low);
}

/* Rząd „Wybierz rozmiar | Tabela rozmiarów”. */
html body .td-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
html body .td-size-row .td-size-head { margin-bottom: 0 !important; }
html body .td-size-row .tvproduct-size-custom { margin: 0 !important; }
html body .td-size-row .tvcustomize-btn {
  font-size: 12.5px;
  color: var(--td-text-mid) !important;
  text-decoration: underline;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html body .td-size-row .tvcustomize-btn:hover { color: var(--td-volt) !important; }
html body .td-size-row .tvcustomize-btn * { color: inherit !important; }

/* Kafelek rozmiaru: numer + podpis dostępności, stan „brak” wygaszony. */
html body .product-variants .input-container .td-size__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body .td-size__box em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--td-text-low);
}
html body .product-variants input:checked + .td-size__box em { color: rgba(0, 0, 0, .6); }
html body .td-size--brak .td-size__box {
  opacity: .32;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Galeria: chip autentyczności i podpowiedź powiększenia. Chip siada pod
   flagami motywu (nowość/rabat), podpowiedź nie łapie kliknięć — klik
   przechodzi na zdjęcie i otwiera powiększenie jak dotąd. */
html body.page-product .product-cover { position: relative; }
html body.page-product .product-cover::before {
  content: 'ORYGINAŁ 100%';
  position: absolute;
  top: 44px;
  left: 12px;
  z-index: 3;
  background: var(--td-ink-900);
  color: var(--td-text-hi);
  font-family: var(--td-f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 4px;
}
html body.page-product .product-cover::after {
  content: 'KLIKNIJ, ABY POWIĘKSZYĆ';
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  pointer-events: none;
  background: rgba(10, 10, 11, .82);
  color: var(--td-text-hi);
  font-family: var(--td-f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 8px 14px;
  border-radius: var(--td-r-pill);
}

/* Filtry: przycisk czyszczenia i fasetka Rozmiar jako kafelki. */
html body .js-search-filters-clear-all {
  background: transparent !important;
  border: 0 !important;
  color: var(--td-volt) !important;
  font-size: 12.5px;
  text-decoration: underline;
  padding: 0 !important;
}
html body .td-facet--rozmiar ul {
  display: grid;
  /* minmax(0, 1fr), NIE 1fr: samo `1fr` to `minmax(auto, 1fr)`, więc
     najdłuższa etykieta („35,5”) rozpychała swoją kolumnę i kafelki
     wychodziły nierówne — zmierzone na żywo: 84,9 / 93,6 / 76,2 px.
     Z minmax(0,…) trzy kolumny mają identyczną szerokość. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  /* Okno na dokładnie TRZY rzędy kafelków; reszta rozmiarów dostępna
     przewijaniem. Kafelek ma 48 px wysokości, odstęp 8 px:
     3 × 48 + 2 × 8 = 160 px. Bez ogranicznika fasetka rosła do 1300–2400 px
     (ta kategoria ma 55 rozmiarów) i rozpychała cały panel. */
  max-height: calc(48px * 3 + 8px * 2);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
/* Dopisek pod tytułem fasetki Rozmiar — jak w makiecie.
   Wstawia go vault.js jako PRAWDZIWY element (.td-facet-hint), nie
   pseudoelement: `::after` na tytule jest teraz zajęty przez chevron
   zwijania sekcji, a jeden element nie może mieć dwóch `::after`. */
html body .td-facet-hint {
  display: block;
  margin: 0 0 8px;
  font-family: var(--td-f-ui);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--td-text-low);
}
html body .td-facet--rozmiar .facet-label { margin: 0 !important; }
/* Po przełączeniu typu fasetki w panelu PrestaShop wstawia RADIO albo
   CHECKBOX — chowamy oba warianty wskaźnika; wybór pokazuje limonkowy
   kafelek. Ten sklep ma dziś checkbox (zmierzone na kategorii 52). */
html body .td-facet--rozmiar .facet-label .custom-checkbox,
html body .td-facet--rozmiar .facet-label .custom-radio { display: none !important; }
html body .td-facet--rozmiar .magnitude { display: none !important; }
html body .td-facet--rozmiar .facet-label { display: flex; }

/* KAFELEK ROZMIARU — CAŁA geometria w JEDNEJ regule z identyfikatorem.
   Powód (zmierzone na żywym sklepie): motyw rodzica ma
   `#search_filters .facet .facet-label a { display: inline-block }`,
   czyli specyficzność (1,2,1). Mój wcześniejszy zapis klasowy
   `html body .td-facet--rozmiar .facet-label a` to (0,2,3) — przegrywał,
   bo identyfikator bije dowolną liczbę klas i elementów. Efekt: tło,
   `min-height` i kolor się stosowały (nikt ich nie nadpisywał), ale
   `display:flex` i `width:100%` nie — kafelek zostawał wąskim,
   niedopasowanym prostokątem w komórce siatki. Stąd wszystko, co dotyczy
   układu kafelka, musi stać w łańcuchu z `#search_filters`. */
html body #search_filters .td-facet--rozmiar .facet-label a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 48px;
  padding: 4px 6px;
  background: var(--td-ink-800) !important;
  border: 1.5px solid var(--td-line) !important;
  border-radius: var(--td-r-sm);
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-mono);
  font-size: 14px;
  text-align: center;
}
html body #search_filters .td-facet--rozmiar .facet-label a:hover {
  border-color: var(--td-line-strong) !important;
  color: var(--td-volt) !important;
}
html body #search_filters .td-facet--rozmiar .facet-label:has(input:checked) a,
html body .td-facet--rozmiar .facet-label:has(input:checked) a,
html body #search_filters .td-facet--rozmiar .facet-label.td-wybrany a,
html body .td-facet--rozmiar .facet-label.td-wybrany a {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}

/* Pasek nad siatką: licznik wyników w rytmie makiety. */
html body .total-products,
html body .total-products p {
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-low) !important;
  margin: 0;
}

/* Rząd meta pod tytułem kategorii: licznik + plakietki (buduje vault.js). */
html body .td-kat-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}
html body .td-kat-meta__count {
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-low);
}
html body .td-kat-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-pill);
  font-family: var(--td-f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--td-text-mid);
}
html body .td-kat-meta__chip--volt {
  border-color: var(--td-volt-dim);
  color: var(--td-volt);
}
html body .td-kat-meta__chip--volt::before { content: '✓ '; }

/* Ramka promo na dole kolumny filtrów (buduje vault.js). */
/* JEDYNE obramowane pudło w kolumnie filtrów — jak `.freeship`
   w wizualizacji (padding 20 px, tło ink-800, promień 14 px). */
html body .td-filtry-promo {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
  background: var(--td-ink-800);
}
html body .td-filtry-promo p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--td-text-mid);
}
html body .td-filtry-promo b { color: var(--td-volt); }

/* ==========================================================================
   RUNDA DZIEWIĄTA — kategoria 1:1 z makietą (pomiar obu stron w 1366 px):
   hero na pełną szerokość NAD kolumnami (H1 64 px), płaskie karty (kafel
   1:1 o promieniu 14 px + tekst bez pudła), siatka gap 20 px.
   ========================================================================== */

@media (min-width: 768px) {
  /* Hero kategorii wyciągnięte nad obie kolumny: ujemny margines o
     szerokość kolumny filtrów + odstęp rzędu (te same wartości co w
     regułach kolumny). Kolumnę filtrów spycha w dół vault.js — wysokość
     hero zależy od długości opisu, więc musi być zmierzona. */
  html body .row.td-row-filtry #content-wrapper .block-category,
  html body .row:has(> #left-column) #content-wrapper .block-category {
    margin-left: calc(-1 * (clamp(218px, 23vw, 272px) + 28px)) !important;
    width: calc(100% + clamp(218px, 23vw, 272px) + 28px) !important;
    max-width: none !important;
  }
}

/* Opis kategorii w hero — rytm makiety. */
html body #category-description {
  font-size: 15px !important;
  line-height: 1.65;
  color: var(--td-text-mid) !important;
  max-width: 72ch;
}

/* WYGLĄD KARTY NIE JEST TU DEFINIOWANY — jedynym źródłem jest arkusz
   modułu (.tds-card w modules/truedropsections/views/css). Wcześniej stała
   tu płaska wersja tylko dla listingu, a moduł rysował na stronie głównej
   ciemne pudło z obwódką: te same produkty wyglądały inaczej w kategorii
   i na stronie głównej. Płaska forma z wizualizacji przeniesiona została
   do modułu, więc obowiązuje wszędzie naraz. */

/* Siatka i pasek nad nią — wymiary makiety. */
html body #products .products { gap: 24px 20px !important; }
html body #js-product-list-top {
  border-bottom: 1px solid var(--td-line);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* Nagłówek kategorii: dywiz-etykieta nad tytułem jak w makiecie. */
html body#category h1::before,
html body .td-list-title::before {
  content: '— Katalog';
  display: block;
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-volt);
  margin-bottom: 8px;
}

/* Tytuł listingów spoza kategorii (Nowe produkty, Promocje, Bestsellery,
   wyniki wyszukiwania) — ta sama forma co nagłówek kategorii, żeby te
   strony nie odstawały. Wcześniej nie miały żadnego nagłówka. */
html body .td-list-head { padding-block: 8px 20px; }
html body .td-list-title {
  margin: 0;
  font-family: var(--td-f-display);
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
}

/* ==========================================================================
   AUDYT 1:1 — RUNDA ÓSMA: siatka kart i panel filtrów w archiwum
   Fakt zmierzony: zdjęcia w wariancie `grid` mają loading="lazy" i pudło
   0×0 — nigdy nie przecinają viewportu, więc się nie ładują (wariant był
   ukryty przy starcie strony w trybie „catelog”). Sztywny kwadrat 1:1 daje
   im pudło, a vault.js dodatkowo przestawia je na ładowanie natychmiastowe.
   ========================================================================== */

/* --- miniatury z nadpiski szablonu: karta 1:1 ze stroną główną -----------
   templates/catalog/_partials/miniatures/product.tpl renderuje kartę
   tds-card modułu; tu tylko spięcie z siatką listingu i kolor przeceny. */
html body #products .product-miniature.td-mini {
  display: block;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .td-mini__in,
html body .td-mini .tds-card { height: 100%; }
html body .td-mini .tds-price--sale { color: var(--td-flame) !important; }

/* --- kafel zdjęcia jak w makiecie: kość, 1:1, multiply, podmiana na hover
   UWAGA — BLOK ZAPASOWY. Na listingach renderuje dziś kartę nadpiska
   templates/catalog/_partials/miniatures/product.tpl (tds-card), więc
   selektory .tvproduct-wrapper.grid nie mają czego stylować. Blok zostaje
   ŚWIADOMIE: wycofanie nadpiski miniatury (skasowanie jednego pliku przez
   FTP) przywraca karty ThemeVolty i wtedy te reguły znów trzymają wygląd.
   To samo dotyczy funkcji obudzZdjecia() w vault.js. */
html body #products .tvproduct-wrapper.grid .tvproduct-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--td-bone) !important;
  border-radius: var(--td-r-md);
  overflow: hidden;
  isolation: isolate;
}
html body #products .tvproduct-wrapper.grid .tvproduct-image .thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}
html body #products .tvproduct-wrapper.grid .tvproduct-image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;
  transition: opacity .2s linear, transform .35s ease;
}
html body #products .tvproduct-wrapper.grid .tvproduct-hover-img { opacity: 0; }
html body #products .tvproduct-wrapper.grid:hover .tvproduct-hover-img { opacity: 1; }
html body #products .tvproduct-wrapper.grid:hover .tvproduct-defult-img { opacity: 0; }
html body #products .tvproduct-wrapper.grid:hover .tvproduct-image img { transform: scale(1.05); }

/* --- przyciski na najechaniu: bez plus/minus ilości ---------------------- */
html body #products .tvproduct-wrapper.grid .tv-product-quentityplus { display: none !important; }

/* --- ciało karty --------------------------------------------------------- */
html body #products .tvproduct-wrapper.grid .tvproduct-info-box-wrapper {
  padding-top: 12px;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}
html body #products .tvproduct-wrapper.grid .tvproduct-name,
html body #products .tvproduct-wrapper.grid .tvproduct-name a { text-align: left !important; }
html body #products .tvproduct-wrapper.grid .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 8px;
  flex-wrap: wrap;
}
/* Linia „N osób kupiło w 24 h” z modułu — łososiowa jak w makiecie. */
html body .tds-listsold {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #ffb4ae !important;
}

/* --- elementy kategorii spoza wizualizacji ------------------------------- */
/* Banner kategorii (biała grafika nad tytułem) — makieta go nie ma. */
html body .tv-category-cover { display: none !important; }
/* Kafle „PODKATEGORIA” (białe owale) — nawigację po podkategoriach niesie
   mega menu i fasetka Kategorie; makieta nie pokazuje tego bloku. */
html body .tv-category-main-div { display: none !important; }
/* Pudło „FILTR” nad fasetkami — dubluje nagłówek panelu. */
html body #search_filters .tvleft-right-title-wrapper { display: none !important; }

/* --- panel filtrów -------------------------------------------------------
   Jedyne miejsce w pliku, które rysuje ramkę i tło panelu — patrz komentarz
   przy #search_filters_wrapper wyżej.

   POD FILTRAMI MA BYĆ TYLKO RAMKA PROMO. Motyw rodzica wstawia w lewą
   kolumnę drugi, osobno oramowany blok `.block-categories` (drzewo
   kategorii: Strona główna / SNEAKERSY / Męskie / …). Dwa obramowane
   pudła jedno pod drugim czytały się jak „podwójna ramka wokół filtrów”,
   a wizualizacja nie ma tam żadnej nawigacji — po kategoriach prowadzi
   mega menu i fasetka Kategorie. Blok znika z każdej strony z listingiem.
   Trwalej: Wygląd → Pozycje → odepnij moduł drzewa kategorii z
   displayLeftColumn (wtedy nie renderuje się w ogóle). */
html body #left-column .block-categories,
html body #left-column .tv-category-tree-block { display: none !important; }

/* PANEL FILTRÓW BEZ WŁASNEJ RAMKI — tak jest w wizualizacji (`aside.filters`
   nie ma tam ani tła, ani obwódki; sekcje rozdzielają same kreski, a jedyne
   obramowane pudło w kolumnie to ramka promo na dole). Wcześniej panel miał
   własną ramkę i tło, więc razem z ramką promo dawał wrażenie „podwójnej
   ramki wokół filtrów”. */
html body #search_filters {
  background: transparent !important;
  padding: 0 4px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* ŹRÓDŁO „PODWÓJNEJ RAMKI”: wewnątrz #search_filters motyw rodzica trzyma
   jeszcze DWA zagnieżdżone kontenery, każdy z własną obwódką 2 px
   (zmierzone: .tvleft-right-penal-all-block 258 px i .tvserach-filter-wrapper
   254 px — stąd wrażenie ramki w ramce wokół wszystkich filtrów).
   Wizualizacja nie ma tam żadnego obramowania. */
html body #search_filters .tvleft-right-penal-all-block,
html body #search_filters .tvserach-filter-wrapper,
html body #left-column .tvleft-right-penal-all-block,
html body #left-column .tvserach-filter-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Nagłówek panelu „Filtry | Wyczyść” buduje vault.js (funkcja
   buildFiltryNaglowek) — wcześniej stało tu `::before` z samym napisem,
   ale wizualizacja ma w tym rzędzie także odnośnik czyszczący, a treści
   z pseudoelementu nie da się kliknąć. */
html body .td-filtry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--td-line);
}
html body .td-filtry-head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--td-text-hi);
}
html body .td-filtry-head a,
html body .td-filtry-head__czysc {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--td-volt) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* Zwijane sekcje filtrów — odpowiednik .fgroup__btn z wizualizacji.
   Tytuł staje się przyciskiem (rolę i obsługę nadaje vault.js), a chevron
   obraca się przy rozwinięciu.

   TYLKO OD 992 px. Poniżej tej szerokości motyw pokazuje własny, zwijany
   tytuł mobilny (.tvfilter-search-types-title) z własną strzałką, a tytuł
   desktopowy jest ukryty klasą hidden-md-down. Bez tego ograniczenia mój
   chevron dokładał się do strzałki motywu i przy każdej sekcji filtrów
   widać było DWIE strzałki (zmierzone przy 768 px: 5 sztuk). */
@media (min-width: 992px) {
  html body #search_filters .facet .facet-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    user-select: none;
  }
  html body #search_filters .facet .facet-title::after {
    content: '';
    flex: none;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384848e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .18s ease;
  }
  html body #search_filters .facet.td-zwinieta .facet-title::after { transform: rotate(-90deg); }
  html body #search_filters .facet.td-zwinieta > *:not(.facet-title):not(.tvfilter-dropdown-wrapper),
  html body #search_filters .facet.td-zwinieta .tvfilter-dropdown-wrapper > *:not(.facet-title) { display: none !important; }
}
/* Separator MIĘDZY sekcjami: tylko border-top, zerowany na pozostałych
   krawędziach — motyw rodzica potrafi dać .facet własną obwódkę na całym
   obwodzie (zmierzone na żywo: sekcja miała jednocześnie górną i dolną
   linię, co przy dwóch sąsiadujących fasetach dawało PODWÓJNĄ kreskę
   między nimi). Pierwsza sekcja nie potrzebuje linii nad sobą — panel już
   ma swoją ramkę. */
html body #search_filters .facet {
  border: 0 !important;
  border-top: 1px solid var(--td-line) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
}
html body #search_filters .facet:first-child { border-top: 0 !important; }
/* Pola wyboru fasetek: ciemny kwadracik/kółko, wartość po lewej, licznik
   po prawej. Rzeczywisty stan na tym sklepie (zmierzony na żywo, wbrew
   wcześniejszemu założeniu z 1-panel/19): moduł fasetek renderuje WSZYSTKIE
   sekcje — Kategorie, Marka, Płeć — jako `.custom-radio`, nie
   `.custom-checkbox`. Sam wskaźnik to `<input>` + `<span class=
   "ps-shown-by-js">` bez żadnego rozmiaru z parenta w tym kontekście —
   pusty inline span zapada się do szerokości 0 i jest całkowicie
   niewidoczny (potwierdzone pomiarem: 0×17 px). Stylujemy więc oba typy
   kontrolki jawnie, żeby wygląd nie zależał od tego, który akurat
   renderuje moduł. */
/* UWAGA: `inline-flex` na wrapperze (próbowane najpierw) kurczyło span do
   ~3 px — wrapper staje się kontekstem flex, a jego dzieci (input + span)
   dostają domyślnie `flex-shrink: 1`, więc pusty span był ściskany mimo
   jawnej szerokości. `inline-block` + `vertical-align` daje ten sam efekt
   wizualny (wyśrodkowanie w wierszu `.facet-label`) bez tego zapadania się —
   potwierdzone pomiarem na żywym elemencie: 18×18 zamiast 3×18. */
html body #search_filters .custom-radio,
html body #search_filters .custom-checkbox {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
html body #search_filters .custom-checkbox input[type=checkbox] + span,
html body #search_filters .custom-radio input[type=radio] + span {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  background: var(--td-ink-800);
  border: 1.5px solid var(--td-line);
}
html body #search_filters .custom-checkbox input[type=checkbox] + span { border-radius: 4px; }
html body #search_filters .custom-radio input[type=radio] + span { border-radius: 50%; }
html body #search_filters .custom-checkbox input[type=checkbox]:checked + span,
html body #search_filters .custom-radio input[type=radio]:checked + span {
  background: var(--td-volt);
  border-color: var(--td-volt);
}
html body #search_filters .custom-radio input[type=radio]:checked + span::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--td-ink-900);
}
html body #search_filters .facet:not(.td-facet--rozmiar) .facet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
html body #search_filters .facet:not(.td-facet--rozmiar) .facet-label a {
  flex: 1;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
html body #search_filters .facet:not(.td-facet--rozmiar) .facet-label .magnitude {
  margin-left: auto;
  font-size: 12px;
  color: var(--td-text-low) !important;
}

/* ==========================================================================
   STOPKA VAULT (.td-foot) — własna nadpiska templates/_partials/footer.tpl
   Układ 1:1 z ekranu wizualizacji: marka + SKLEP/POMOC/O NAS/KONTAKT,
   chipy „Popularne wyszukiwania”, dolny pasek z chipami płatności.
   Stare haki stopki renderują się w .td-foot__stash (ukryte).
   ========================================================================== */
html body .td-foot {
  background: var(--td-ink-850);
  border-top: 1px solid var(--td-line);
  margin-top: 64px;
}
html body .td-foot__wrap {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}
html body .td-foot__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-block: 72px 48px;
}
html body .td-foot .td-logotype__name {
  font-family: var(--td-f-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
  display: block;
}
html body .td-foot .td-logotype__tag {
  display: block;
  margin-top: 4px;
  font-family: var(--td-f-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--td-volt);
}
html body .td-foot__desc {
  margin-top: 18px;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--td-text-mid);
}
html body .td-foot__social { display: flex; gap: 10px; margin-top: 20px; }
html body .td-foot__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-sm);
  color: var(--td-text-mid);
  transition: color .15s linear, border-color .15s linear;
}
html body .td-foot__social a:hover { color: var(--td-volt); border-color: var(--td-line-strong); }
html body .td-foot__social svg { width: 18px; height: 18px; }
html body .td-foot__col h3 {
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-text-hi);
  margin: 0 0 18px;
}
html body .td-foot__col ul { list-style: none; margin: 0; padding: 0; }
html body .td-foot__col li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: var(--td-text-mid);
  transition: color .12s linear;
}
html body .td-foot__col li a:hover { color: var(--td-volt); }
html body .td-foot__contact address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
  color: var(--td-text-mid);
}
html body .td-foot__contact address a { color: var(--td-text-mid); }
html body .td-foot__contact address a:hover { color: var(--td-volt); }
html body .td-foot__hours { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--td-text-low); }
html body .td-foot__seo { padding-block: 32px; border-top: 1px solid var(--td-line); }
html body .td-foot__seo h4 {
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-text-low);
  margin: 0 0 14px;
}
html body .td-foot__chips { display: flex; flex-wrap: wrap; gap: 10px; }
html body .td-foot__chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 18px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-pill);
  font-size: 13px;
  color: var(--td-text-mid);
  transition: color .12s linear, border-color .12s linear;
}
html body .td-foot__chip:hover { color: var(--td-volt); border-color: var(--td-line-strong); }
html body .td-foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-block: 22px;
  border-top: 1px solid var(--td-line);
}
html body .td-foot__bar p { margin: 0; font-size: 12px; color: var(--td-text-low); }
html body .td-foot__bar a { color: var(--td-text-low); text-decoration: underline; }
html body .td-foot__bar a:hover { color: var(--td-volt); }
html body .td-foot__pay { display: flex; flex-wrap: wrap; gap: 8px; }
html body .td-foot__pay span {
  padding: 5px 12px;
  border: 1px solid var(--td-line);
  border-radius: 4px;
  font-family: var(--td-f-mono);
  font-size: 11px;
  color: var(--td-text-mid);
}
html body .td-foot__legal {
  margin: 0;
  padding-bottom: 26px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--td-text-low);
}
html body .td-foot__stash { display: none !important; }
@media (max-width: 1100px) {
  html body .td-foot__main { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 700px) {
  html body .td-foot__main { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 44px 28px; }
  html body .td-foot__brand { grid-column: 1 / -1; }
}

/* --- stopka: odcięte logo i rytm z makiety ------------------------------- */
html body .tvfooter-img-block,
html body .tvfooter-logo-block {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}
html body .tvfooter-logo-link-wrapper { padding-block: 56px 40px; }
html body .tvfooter-storelogo-imformation { gap: 40px !important; }
html body #footer .tvfooter-title { margin-bottom: 16px; }
html body #footer li { margin-bottom: 0; }
html body #footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  font-size: 14px;
}

/* ==========================================================================
   RUNDA PIĄTA — STRONA KATEGORII BLIŻEJ WIZUALIZACJI

   Wszystko poniżej dotyczy listy produktów i jej filtrów. Kolejność bloków
   odpowiada temu, co klient widzi od góry: pasek nad listą, pigułki aktywnych
   filtrów, szkielety w czasie przeliczania, siatka kart, arkusz filtrów
   na telefonie.
   ========================================================================== */

/* --- 1. PASEK NAD LISTĄ ---------------------------------------------------
   ThemeVolty stawia tu trzy rzeczy: przycisk „Pokaż Lewą Kolumnę”, przełącznik
   pięciu widoków i sortowanie. Wizualizacja ma w tym miejscu dwie: licznik
   „Pokazano 24 z 68” i sortowanie.

   Przełącznik widoków nie ma tu czego przełączać — nadpiska miniatury
   renderuje JEDNĄ anatomię karty, a arkusz i tak wymusza siatkę. Zostawiony
   udawałby działanie: klient klika „Lista” i nic się nie zmienia.
   Przycisk lewej kolumny jest zbędny z tego samego powodu — kolumna stoi
   na stałe od 768 px, a niżej otwiera ją przycisk „Filtry”. */
html body .tvcmsproduct-grid-list,
html body .tv-grid-list-all-wrapper,
html body .tvcms-left-column-wrapper { display: none !important; }

html body #js-product-list-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 14px !important;
  margin: 0 0 18px !important;
  border-bottom: 1px solid var(--td-line);
  background: transparent !important;
}
html body #js-product-list-top > div {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body #js-product-list-top .tv-total-product { margin: 0 !important; }
html body .tv-total-product-number {
  margin: 0 !important;
  font-family: var(--td-f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-mid) !important;
}

/* --- 2. PIGUŁKI AKTYWNYCH FILTRÓW ----------------------------------------
   Moduł fasetek renderuje listę <li class="filter-block"> z ikoną „×”.
   Wizualizacja pokazuje je jako limonkowe pigułki w jednym rzędzie,
   z akcją „Wyczyść wszystko” na końcu. Zmieniamy wyłącznie wygląd —
   odnośniki zdejmujące filtr zostają te, które wystawia moduł. */
html body #js-active-search-filters.hide { display: none !important; }
html body #js-active-search-filters {
  margin-bottom: 18px;
  padding: 12px 14px;
}
html body #js-active-search-filters .active-filter-title {
  margin: 0 0 10px;
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-low);
}
html body #js-active-search-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body #js-active-search-filters .filter-block {
  margin: 0;
  /* Ikona „×” motywu to font materialowy o rozmiarze tekstu — bez własnego
     pola dotykowego ma ~14 px. Minimum WCAG 2.2 to 24 px, a wizualizacja
     trzyma większe pole w całej pigułce. */
  min-height: 34px;
  padding: 6px 8px 6px 14px;
}
html body #js-active-search-filters .filter-block a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #000 !important;
  transition: background-color .12s linear;
}
html body #js-active-search-filters .filter-block a:hover { background: rgba(0, 0, 0, .14); }
html body #js-active-search-filters .filter-block .close { font-size: 16px; opacity: .75; }
html body #js-active-search-filters .td-filter-clear { display: inline-flex; }
html body #js-active-search-filters .td-filter-clear a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--td-text-mid) !important;
  text-decoration: none;
  transition: color .12s linear, border-color .12s linear;
}
html body #js-active-search-filters .td-filter-clear a:hover {
  color: var(--td-volt) !important;
  border-color: var(--td-volt-dim);
}

/* --- 3. SZKIELETY W CZASIE PRZELICZANIA FILTRÓW ---------------------------
   Nakładka nad listą, nie podmiana kart — patrz komentarz przy
   `pokazSzkielety` w vault.js. */
html body #js-product-list { position: relative; }
html body #js-product-list.td-lista-laduje > .tvgrid-list-view-product { opacity: .25; }
html body .td-szkielet {
  position: absolute;
  /* Bez `bottom` — nakładka ma być wysoka na osiem kafelków, a nie na całą
     listę (przy 24 kartach to ponad 3 000 px pustego, przechwytującego
     nic obszaru). */
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 26px 14px;
  align-content: start;
  pointer-events: none;
}
html body .td-szkielet__karta { display: flex; flex-direction: column; gap: 10px; }
html body .td-szkielet__media { aspect-ratio: 1 / 1; border-radius: var(--td-r-md); }
html body .td-szkielet__l1 { height: 12px; width: 62%; border-radius: 4px; }
html body .td-szkielet__l2 { height: 12px; width: 38%; border-radius: 4px; }
html body .td-szkielet span {
  display: block;
  background: linear-gradient(90deg, var(--td-ink-800) 0%, var(--td-ink-700) 50%, var(--td-ink-800) 100%);
  background-size: 200% 100%;
  animation: td-puls 1.2s linear infinite;
}
@keyframes td-puls {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* --- 4. LICZNIK PRZY NAGŁÓWKU W RZĘDZIE Z PLAKIETKAMI ---------------------
   `.td-category-count` renderuje szablon jako blok pod tytułem; vault.js
   przenosi ten element do rzędu meta, gdzie musi zachowywać się jak pigułki
   obok. Marginesu bloku nie da się zostawić — rozjeżdżałby linię bazową. */
html body .td-kat-meta > .td-category-count {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 11px;
  color: var(--td-text-low);
}

/* --- 5. OPIS KATEGORII: TRZY LINIE I „CZYTAJ DALEJ” ----------------------- */
html body #category-description.td-opis--zwiniety {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html body .td-opis-wiecej {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--td-f-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--td-volt);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- 6. PODPOWIEDŹ POD FASETKĄ „ROZMIAR” ---------------------------------
   Styl przeniesiony wyżej, do `.td-facet-hint` — treść wstawia dziś
   vault.js jako prawdziwy element (i odtwarza po każdej przebudowie
   filtrów), bo `::after` na tytule zajął chevron zwijania sekcji. */

/* --- 7. SIATKA KART NA TELEFONIE: DWIE KOLUMNY ---------------------------
   Wizualizacja pokazuje na 375 px dwie karty w rzędzie. Motyw rodzica dawał
   jedną na całą szerokość — przy karcie wysokiej na ~460 px oznacza to jeden
   produkt na pierwszym ekranie. */
@media (max-width: 767.98px) {
  html body #products .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
  }
  html body #products .product-miniature {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #products .tvproduct-wrapper.grid { display: block !important; }
  html body #products .tvproduct-wrapper.grid-2,
  html body #products .tvproduct-wrapper.list,
  html body #products .tvproduct-wrapper.catelog { display: none !important; }
  html body .tds-card__name { font-size: 13px; }
  html body .tds-price { font-size: 14px; }
  html body .td-szkielet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
}

/* --- 8. ARKUSZ FILTRÓW NA TELEFONIE --------------------------------------
   Zmierzone przed zmianą: na `/46-sneakersy` przy 375 px kolumna filtrów
   zaczynała się na 12 169 px — ~11 300 px PONIŻEJ pierwszej karty. Przycisk
   „Filtry” tam przewijał, więc klient lądował poza listą wyników.

   Arkuszem jest sam `#left-column`. Nie przenosimy węzłów, bo moduł fasetek
   po każdym kliknięciu renderuje `#search_filters_wrapper` od nowa w jego
   pierwotnym miejscu w drzewie. */
html body .td-sheet__grab,
html body .td-sheet__head,
html body .td-sheet__foot { display: none; }

@media (max-width: 767.98px) {
  html body.td-filtry-arkusz #left-column {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 1055;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 88dvh;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--td-ink-900) !important;
    border-top: 1px solid var(--td-line);
    border-radius: var(--td-r-lg) var(--td-r-lg) 0 0;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, .55) !important;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 240ms;
    overflow: hidden !important;
  }
  html body.td-filtry-arkusz.td-filtry-otwarte #left-column {
    visibility: visible;
    transform: translateY(0);
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s;
  }

  /* Uchwyt, nagłówek i stopka — dokłada je vault.js. */
  html body .td-sheet__grab {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex: 0 0 auto;
  }
  html body .td-sheet__grab i {
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--td-line-strong);
  }
  html body .td-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 18px 12px;
    border-bottom: 1px solid var(--td-line);
    flex: 0 0 auto;
  }
  html body .td-sheet__head h2 {
    margin: 0;
    font-family: var(--td-f-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--td-text-hi);
    text-transform: none;
  }
  html body .td-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--td-line);
    border-radius: 50%;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--td-text-hi);
    cursor: pointer;
  }

  /* Przewija się TYLKO środek — uchwyt i stopka zostają na miejscu. */
  html body.td-filtry-arkusz #left-column #search_filters_wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 18px !important;
    width: 100% !important;
  }
  html body.td-filtry-arkusz #left-column .block-categories { display: none !important; }

  html body .td-sheet__foot {
    display: grid;
    gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--td-line);
    background: var(--td-ink-800);
    flex: 0 0 auto;
  }
  html body .td-sheet__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--td-r-sm);
    background: var(--td-volt);
    font-family: var(--td-f-ui);
    font-size: 15px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
  }
  html body .td-sheet__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--td-r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--td-text-mid) !important;
    text-decoration: none;
  }
  html body .td-sheet__clear:hover { color: var(--td-volt) !important; }

  /* Przyciemnienie tła. Pod arkuszem, nad wszystkim innym — także nad dolnym
     paskiem nawigacji (1035), który przy otwartym arkuszu nie ma prawa
     przyjmować kliknięć. */
  html body .td-scrim {
    position: fixed;
    inset: 0;
    z-index: 1054;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms linear, visibility 0s linear 200ms;
  }
  html body.td-filtry-otwarte .td-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms linear, visibility 0s;
  }

  /* Przy otwartym arkuszu strona pod spodem nie przewija się — inaczej gest
     na liście filtrów „przebija” na listę produktów. */
  html.td-blokada,
  html.td-blokada body { overflow: hidden !important; }

  /* Przycisk otwierający chowa się, gdy arkusz jest już otwarty. */
  html body.td-filtry-otwarte .td-filter-fab { opacity: 0; pointer-events: none; }
}

/* --- 9. KOLUMNA FILTRÓW NA DESKTOPIE: PRZYKLEJONA -------------------------
   Wizualizacja trzyma panel filtrów w polu widzenia przez całą długość listy
   (`position: sticky`). Reguła istniała tylko od 992 px — na 768–991 px panel
   uciekał z ekranu po kilku przewinięciach, a to jest szerokość tabletu,
   na której lista ma jeszcze dwie kolumny i filtr jest najbardziej potrzebny. */
@media (min-width: 768px) {
  html body #left-column #search_filters_wrapper {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  html body #left-column #search_filters_wrapper::-webkit-scrollbar { width: 4px; }
  html body #left-column #search_filters_wrapper::-webkit-scrollbar-thumb {
    background: var(--td-line-strong);
    border-radius: 4px;
  }
}

/* --- 10. WYŁĄCZONE ANIMACJE ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body #left-column,
  html body .td-scrim { transition: none !important; }
  html body .td-szkielet span { animation: none !important; }
}

/* ==========================================================================
   AUDYT KONTRASTU I RESPONSYWNOŚCI — RUNDA DZIESIĄTA
   Wszystko poniżej wynika z pomiarów na żywym sklepie: chodzikiem po DOM
   liczącym rzeczywisty kontrast WCAG (z nakładaniem półprzezroczystych teł)
   oraz sondą geometrii przy 375 / 768 / 1366 px.
   ========================================================================== */

/* --- 1. IKONY MATERIAL W NAGŁÓWKU ----------------------------------------
   Lupa szukajki i ikony paska ofertowego miały rgb(119,119,119) na ciemnym
   tle = 4,42:1, tuż pod progiem AA (4,5:1). W pasku mobilnym jedna ikona
   była wręcz CZARNA na ciemnym tle = 1,06:1, czyli niewidoczna. */
html body .tvheader-search-btn .material-icons,
html body .tvheader-top-search-wrapper .material-icons,
html body #header .material-icons,
html body .tvcmsmobile-top-wrapper .material-icons,
html body .tvmobile-sliderbar-btn .material-icons,
html body #search_filters .tvdropdown-btn .material-icons {
  color: var(--td-text-mid) !important;
}

/* --- 2. OPIS KATEGORII ---------------------------------------------------
   Sam #category-description miał już poprawny kolor, ale akapity w środku
   przynosiły własny rgb(35,35,35) z motywu rodzica = 1,22:1. */
html body #category-description,
html body #category-description p,
html body #category-description span,
html body #category-description li { color: var(--td-text-mid) !important; }
html body #category-description strong,
html body #category-description b,
html body #category-description h2,
html body #category-description h3 { color: var(--td-text-hi) !important; }
html body #category-description a { color: var(--td-volt) !important; }

/* --- 3. PASEK OFERTOWY W NAGŁÓWKU MOBILNYM -------------------------------
   Wersja mobilna motywu nie używa mojego szablonu nagłówka, tylko tekstu
   z panelu — a ten niesie własne, wpisane w HTML tło i kolory. Efekt na
   375 px: ciemny prostokąt wystający 5 px poza ekran, z czarną ikoną
   w środku. Sprowadzamy go do wyglądu pasma z wizualizacji. */
html body .tvmobileheader-offer-wrapper,
html body .tvcmsmobile-top-wrapper .tvheader-offer-wrapper {
  max-width: 100%;
  overflow: hidden;
  background: var(--td-volt) !important;
}
html body .tvmobileheader-offer-wrapper .tvheader-nav-offer-text,
html body .tvmobileheader-offer-wrapper .tvheader-nav-offer-text * {
  max-width: 100%;
  background: transparent !important;
  border: 0 !important;
  color: var(--td-ink-900) !important;
  font-family: var(--td-f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Odnośnik w pasku ofertowym: pełne 44 px rozsadziłoby wąskie pasmo, więc
   powiększamy pole kliknięcia pionowym odstępem (14 → ~30 px). Ten sam
   odnośnik jest w stopce w pełnowymiarowej formie. */
html body .tvmobileheader-offer-wrapper a {
  text-decoration: underline;
  display: inline-block;
  padding-block: 8px;
}
/* Ikony W ŚRODKU limonkowego pasma muszą być ciemne — reguła wyżej
   ustawia im szarość dobraną pod ciemne tło, a tu tło jest jasne
   (szary na limonce dawał 2,05:1).
   UWAGA na specyficzność: tamta lista zawiera `#header .material-icons`,
   czyli selektor z IDENTYFIKATOREM. Zapis czysto klasowy przegrywał z nim
   mimo `!important` po obu stronach — dlatego tutaj też musi paść `#header`. */
html body #header .tvmobileheader-offer-wrapper .material-icons,
html body #header .tvheader-nav-offer-text .material-icons {
  color: var(--td-ink-900) !important;
}

/* --- 4. CELE DOTYKOWE ----------------------------------------------------
   WCAG 2.5.5 i wytyczne mobilne mówią o ~44 px. Zmierzone na 375 px:
   okruszki 20 px, e-mail w stopce 17 px, odnośniki dolnego paska 15 px,
   ikona konta 20×30, uchwyty suwaka ceny 11×24. Powiększamy pole
   klikalne, nie sam tekst — układ zostaje bez zmian. */
@media (max-width: 991px) {
  html body .breadcrumb li a,
  html body .td-foot__bar a,
  html body .td-foot__contact address a,
  html body .tvcopylink a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html body .tvmyaccount-link,
  html body .tv-myaccount-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Ikony społecznościowe (stopka i pasek) miały 15–16 px. */
  html body .tvheader-social a,
  html body .block-social a,
  html body .tvfooter-social-icon-wrapper a,
  html body .tvcmsmobile-top-wrapper .block-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  /* Elementy karty produktu: marka nad tytułem, „Tabela rozmiarów”
     i „Dodaj opinię” miały 18–20 px wysokości. */
  html body .td-buybrand__marka,
  html body .tvcustomize-btn,
  html body .open-comment-form {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  /* Kropki galerii zdjęć (slick) — 20×20 px. Powiększamy pole dotyku,
     zostawiając kropkę w tym samym rozmiarze wizualnym. */
  html body .slick-dots li,
  html body .slick-dots li button {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* --- 5. SUWAK CENY -------------------------------------------------------
   Uchwyty 11×24 px są nie do trafienia kciukiem. Powiększamy sam uchwyt
   i podnosimy pasek, żeby dało się nim sterować na telefonie. */
html body #search_filters .ui-slider-handle {
  width: 24px !important;
  height: 24px !important;
  top: -9px !important;
  margin-left: -12px !important;
  background: var(--td-volt) !important;
  border: 0 !important;
  border-radius: 50% !important;
  cursor: grab;
}
html body #search_filters .ui-slider-handle:active { cursor: grabbing; }
html body #search_filters .ui-slider {
  height: 6px !important;
  background: var(--td-ink-700) !important;
  border: 0 !important;
  border-radius: 3px;
  margin-block: 14px 8px;
}
html body #search_filters .ui-slider .ui-slider-range {
  background: var(--td-volt-dim) !important;
  border-radius: 3px;
}

/* ==========================================================================
   TABELA ROZMIARÓW (okno „Tabela Rozmiarów”)
   Treść pochodzi ze strony CMS i ma 10 sekcji markowych. Problemy zmierzone
   na żywo: nagłówkiem sekcji był WYŁĄCZNIE obrazek logo linkowany z obcych
   serwerów — 8 z 10 nie ładowało się wcale, a te działające rozciągały się
   do 770×409 px. Nagłówki tekstowe dokłada vault.js z atrybutu `alt`
   (funkcja ulepszTabeleRozmiarow) i on też chowa obrazki, które padły.
   ========================================================================== */

/* Nazwa marki jako prawdziwy nagłówek sekcji. */
html body .size-guide-container .td-brand-name {
  margin: 28px 0 10px;
  font-family: var(--td-f-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--td-text-hi);
}
html body .size-guide-container .brand-header:first-child .td-brand-name { margin-top: 0; }

/* Logo obok nazwy: małe i na jasnym kafelku, bo to czarne znaki graficzne —
   na ciemnym tle okna byłyby niewidoczne nawet po poprawnym wczytaniu. */
html body .size-guide-container .brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
html body .size-guide-container .brand-logo,
html body .size-guide-container .brand-header img {
  max-height: 26px !important;
  max-width: 96px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  background: var(--td-bone);
  border-radius: 6px;
  padding: 4px 8px;
  order: -1;
}

/* Tabele: wiersz nagłówkowy musi odróżniać się od danych — wcześniej miał
   dokładnie ten sam kolor i wagę co zwykłe komórki. */
html body .size-guide-container table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
html body .size-guide-container th {
  color: var(--td-text-hi) !important;
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--td-line-strong) !important;
  white-space: nowrap;
}
html body .size-guide-container td {
  padding: 9px 12px !important;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--td-line) !important;
}
html body .size-guide-container tr:hover td { background: var(--td-ink-800); }

/* Szeroka tabela ma się przewijać w swoim pudle, a nie rozpychać okna. */
html body .size-guide-container {
  max-width: 100%;
  overflow-x: auto;
}

/* Przycisk zamknięcia okna z tabelą rozmiarów przypięty do ekranu.
   Zmierzone: startował na y = -18 (ucięty u góry), a po przewinięciu
   dwutysięcznopikselowej treści lądował na y = -1340, czyli poza zasięgiem
   — przy `body{overflow:hidden}` klient nie miał czym zamknąć okna poza
   klawiszem Esc. Klasę `td-modal-rozmiary` nadaje vault.js tylko temu
   oknu, więc pozostałe okna (np. „dodano do koszyka”) zostają bez zmian. */
html body .td-modal-rozmiary .tvmodel-close,
html body .td-modal-rozmiary .close {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 1060;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line-strong) !important;
  border-radius: 50%;
  color: var(--td-text-hi) !important;
  opacity: 1 !important;
  font-size: 20px;
  line-height: 1;
}
html body .td-modal-rozmiary .tvmodel-close:hover,
html body .td-modal-rozmiary .close:hover {
  background: var(--td-volt) !important;
  border-color: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
}
/* Zapas miejsca, żeby przypięty przycisk nie zasłaniał pierwszego wiersza. */
html body .td-modal-rozmiary .modal-content { padding-top: 12px; }

/* ==========================================================================
   STRONA KONTAKT I STRONA ZAMÓWIENIA
   Pomiary na żywym sklepie — patrz uzasadnienia przy regułach.
   ========================================================================== */

/* --- 1. KONTAKT: białe pudło formularza ----------------------------------
   `.contact-form` miał tło rgb(255,255,255) i szary tekst — na ciemnym
   sklepie wielki biały prostokąt 810×384. */
html body .contact-form {
  background: var(--td-ink-850) !important;
  color: var(--td-text-mid) !important;
  border: 1px solid var(--td-line);
  border-radius: var(--td-r-md);
  padding: clamp(18px, 3vw, 32px) !important;
}
html body .contact-form .form-control-label,
html body .contact-form label { color: var(--td-text-hi) !important; }

/* Pole z nazwą wybranego pliku: tło rgb(246,246,246) przy białym tekście —
   kontrast 1,0:1, napis był zupełnie niewidoczny.
   Pole jest WYŁĄCZONE (`disabled`), nie „tylko do odczytu” — sam selektor
   `[readonly]` go nie łapał. Przy wyłączonych polach potrzebny jest też
   `-webkit-text-fill-color`, bo silniki WebKit nadpisują `color` własnym
   przygaszeniem i tekst dalej byłby nieczytelny. */
html body .form-control[readonly],
html body .form-control[disabled],
html body .form-control:disabled,
html body .bootstrap-filestyle .form-control {
  background: var(--td-ink-800) !important;
  color: var(--td-text-hi) !important;
  -webkit-text-fill-color: var(--td-text-hi);
  border-color: var(--td-line) !important;
  opacity: 1;
}
/* Przycisk „Wybierz plik” dosunięty do pola i tej samej wysokości. */
html body .contact-form .bootstrap-filestyle .btn,
html body .contact-form .input-group-btn .btn {
  min-height: 48px;
  border-radius: 0 var(--td-r-sm) var(--td-sm, 10px) 0;
  background: var(--td-ink-700) !important;
  color: var(--td-text-hi) !important;
  border: 1px solid var(--td-line) !important;
}

/* Nagłówek strony kontaktu — motyw daje tu <h3> 22 px, przez co strona
   wygląda jak fragment, nie jak osobna podstrona. */
html body#contact .page-header h3,
html body#contact #main h3:first-of-type {
  font-family: var(--td-f-display);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--td-text-hi);
  margin-bottom: 18px;
}

/* --- 2. ZAMÓWIENIE: główny przycisk „Dalej” -------------------------------
   Zmierzone: czarne tło, 105×36 px, promień 3 px — najważniejszy przycisk
   całej kasy wyglądał jak niestylowany element formularza i był poniżej
   progu wygodnego dotyku. */
html body#checkout .continue,
html body#checkout button[name="confirm-addresses"],
html body#checkout .checkout-step .btn-primary {
  background: var(--td-volt) !important;
  color: var(--td-ink-900) !important;
  border: 0 !important;
  border-radius: var(--td-r-pill) !important;
  min-height: 48px;
  padding-inline: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
html body#checkout .continue:hover,
html body#checkout .checkout-step .btn-primary:hover { filter: brightness(1.08); }
html body#checkout .continue *,
html body#checkout .checkout-step .btn-primary * { color: var(--td-ink-900) !important; }

/* Przycisk „Pokaż” przy haśle: wyrównany z polem (było 39 px przy polu 48). */
html body#checkout .input-group-btn .btn {
  min-height: 48px;
  border-radius: 0 var(--td-r-sm) var(--td-r-sm) 0;
  border: 1px solid var(--td-line) !important;
  background: var(--td-ink-700) !important;
  color: var(--td-text-hi) !important;
}

/* --- 3. ZAMÓWIENIE: biały baner płatności na końcu strony -----------------
   Kasa nie renderuje pełnej stopki, ale zostawia sam blok ikon płatności —
   grafika na białym tle, 282×150 px, kończyła ciemną stronę jasną plamą. */
html body#checkout .tvfooter-payment-icon-wrapper,
html body#checkout .tvfooter-payment-content-block {
  background: transparent !important;
  text-align: center;
  padding-block: 18px;
}
html body#checkout .tvfooter-payment-icon-wrapper img,
html body#checkout .tvfooter-payment-content-block img {
  max-width: 260px !important;
  max-height: 96px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}

/* --- KONTAKT: lewa kolumna „Informacje” -----------------------------------
   Zmierzone: `.contact-rich` miał białe tło (272×659), a w środku trzy
   bloki z klasami `col-md-4` — w kolumnie szerokiej na 272 px każdy wychodził
   na ~68 px i tekst łamał się PO JEDNEJ LITERZE („TRU / E / DRO / P”).
   Ustawiamy je jeden pod drugim, na pełnej szerokości. */
html body .contact-rich {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--td-text-mid) !important;
}
html body .contact-rich > h4,
html body .contact-rich .tvcontact-title,
html body .contact-rich h4 {
  font-family: var(--td-f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--td-text-low) !important;
  text-align: left !important;
  margin: 0 0 4px !important;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--td-line);
}
html body .contact-rich .block {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--td-line) !important;
  text-align: left;
}
html body .contact-rich .block:first-of-type { border-top: 0 !important; }
html body .contact-rich .block .icon,
html body .contact-rich .block i,
html body .contact-rich .block svg {
  flex: none;
  width: 22px;
  color: var(--td-volt) !important;
  font-size: 20px;
}
html body .contact-rich .block .data {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--td-text-mid) !important;
  overflow-wrap: anywhere;
}
html body .contact-rich .block .data a { color: var(--td-text-mid) !important; }
html body .contact-rich .block .data a:hover { color: var(--td-volt) !important; }
html body .contact-rich .block span { color: var(--td-text-hi) !important; }

/* --- OKNO „PRODUKT DODANY DO KOSZYKA” -------------------------------------
   Zmierzone: `.modal-body` miał BIAŁE tło (1140×292) przy jasnoszarym
   tekście — komunikat był praktycznie nieczytelny. Do tego okno rozciągało
   się na 1140 px, czyli całą szerokość ekranu, dla jednego zdania
   potwierdzenia. Cena świeciła turkusem (30,166,154) spoza palety. */
html body #blockcart-modal .modal-dialog {
  max-width: 620px;
  margin-inline: auto;
}
html body #blockcart-modal .modal-body,
html body #blockcart-modal .tv-addtocart-content-part {
  background: var(--td-ink-850) !important;
  color: var(--td-text-mid) !important;
}
html body #blockcart-modal .modal-content {
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md);
  overflow: hidden;
}
html body #blockcart-modal .tv-addtocart-price,
html body #blockcart-modal .product-price,
html body #blockcart-modal .price {
  color: var(--td-volt) !important;
  font-family: var(--td-f-mono);
  font-weight: 700;
}
/* Zdjęcie produktu w komunikacie na kremowym kaflu, jak na kartach. */
html body #blockcart-modal .modal-body img {
  background: var(--td-bone);
  border-radius: var(--td-r-sm);
  mix-blend-mode: multiply;
}
/* Dwa przyciski akcji: równorzędna para, nie ciąg tekstu. */
html body #blockcart-modal .cart-content-btn {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html body #blockcart-modal .cart-content-btn .btn,
html body #blockcart-modal .cart-content-btn a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  border-radius: var(--td-r-pill) !important;
  font-weight: 700;
}

/* --- TABELA ROZMIARÓW: prześwity -----------------------------------------
   Zmierzone: table, thead, tbody, tr, td, th ORAZ `.modal-body` — wszystko
   miało tło `rgba(0,0,0,0)`. Jedyną kryjącą warstwą był `.modal-content`,
   więc wszędzie tam, gdzie treść wychodziła poza jego pomalowany obszar
   (przewijanie długiej, 2200-pikselowej tabeli), spod spodu przebijała
   strona. Dajemy oknu i samej tabeli własne, pełne tło. */
html body .td-modal-rozmiary .modal-body,
html body .td-modal-rozmiary .modal-dialog {
  background: var(--td-ink-850) !important;
}
html body .td-modal-rozmiary .modal-dialog { border-radius: var(--td-r-md); }
html body .size-guide-container,
html body .size-guide-container table,
html body .size-guide-container thead,
html body .size-guide-container tbody {
  background: var(--td-ink-850) !important;
}
/* Naprzemienne wiersze zamiast jednolitej płachty — łatwiej wodzić wzrokiem
   po długiej tabeli rozmiarów i nie ma wrażenia dziur między wierszami. */
html body .size-guide-container tbody tr:nth-child(even) td {
  background: var(--td-ink-800) !important;
}
html body .size-guide-container thead th { background: var(--td-ink-850) !important; }

/* --- ZAMÓWIENIE: czytelność tekstu ----------------------------------------
   Pomiar kontrastu na żywej kasie wykazał pięć miejsc poniżej progu AA,
   w tym AKTYWNĄ zakładkę wyboru sposobu zamawiania przy 1,22:1 — klient
   praktycznie nie widział, czy zamawia jako gość, czy się loguje. */
html body#checkout .nav-link,
html body#checkout .nav-tabs .nav-link {
  color: var(--td-text-mid) !important;
}
html body#checkout .nav-link.active,
html body#checkout .nav-tabs .nav-link.active {
  color: var(--td-text-hi) !important;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--td-volt);
}
html body#checkout .nav-separator,
html body#checkout .nav-tabs + span,
html body#checkout ul.nav > span { color: var(--td-text-low) !important; }

/* Pary „etykieta : wartość” w podsumowaniu koszyka (np. „Rozmiar: 44”)
   miały 3,33:1 i 4,46:1. */
html body#checkout .label,
html body#checkout .product-line-info .label,
html body#checkout dt { color: var(--td-text-mid) !important; }
html body#checkout .value,
html body#checkout .product-line-info .value,
html body#checkout dd { color: var(--td-text-hi) !important; }

/* --- OKNO „dodano do koszyka” ---------------------------------------------
   Motyw nadrzędny buduje to okno na zagnieżdżonych kolumnach `col-md-6`
   pływających floatem — projektowanych pod dialog 1140 px. Po zwężeniu okna
   do 620 px floaty zaczęły na siebie nachodzić: kolumna ze zdjęciem sięgała
   683 px, a kolumna z nazwą startowała już na 531 px, przez co nazwa i cena
   lądowały na zdjęciu. Zamieniamy cały ten grid na flex o jawnych
   szerokościach — wtedy szerokość dialogu przestaje mieć znaczenie. */
html body #blockcart-modal .modal-body { padding: 22px 24px 24px !important; }
html body #blockcart-modal .modal-body > .row {
  display: flex !important; flex-wrap: wrap; gap: 22px;
  margin: 0 !important; width: auto !important;
}
html body #blockcart-modal .modal-body > .row > .col-md-6 {
  float: none !important; width: auto !important; max-width: none !important;
  flex: 1 1 240px; min-width: 0; padding: 0 !important;
}
html body #blockcart-modal .divide-right {
  border-right: 1px solid var(--td-line) !important;
  padding-right: 22px !important;
}
html body #blockcart-modal .tv-addtocart-image-name-wrapper {
  display: flex !important; gap: 14px; align-items: flex-start;
  margin: 0 !important; width: auto !important;
}
/* Zdjęcie dostaje twardą szerokość — bez tego rozpycha kolumnę i wchodzi pod tekst. */
html body #blockcart-modal .tv-addtocart-product-image {
  float: none !important; width: 104px !important; max-width: 104px !important;
  flex: 0 0 104px; padding: 0 !important;
}
html body #blockcart-modal .tv-addtocart-product-image img {
  width: 104px !important; height: 104px !important; max-width: 104px !important;
  object-fit: cover; display: block; border-radius: var(--td-r-sm);
}
html body #blockcart-modal .tv-addtocart-product-name {
  float: none !important; width: auto !important; max-width: none !important;
  flex: 1 1 auto; min-width: 0; padding: 0 !important; overflow-wrap: anywhere;
}
html body #blockcart-modal .cart-content { width: auto !important; }
html body #blockcart-modal .cart-content p { margin: 0 0 8px !important; width: auto !important; }

/* Podsumowanie koszyka szło kolorem #333 po czarnym tle — 1,52:1, czyli
   kwoty i koszt dostawy były praktycznie niewidoczne. */
html body #blockcart-modal .cart-content > p { color: var(--td-text-mid) !important; }
html body #blockcart-modal .cart-content p.cart-products-count {
  color: var(--td-text-hi) !important; font-size: 13px !important;
  letter-spacing: .06em; text-transform: uppercase;
}
html body #blockcart-modal .cart-content .label,
html body #blockcart-modal .cart-content .value,
html body #blockcart-modal .cart-content strong { color: var(--td-text-hi) !important; }

/* Przyciski: „Przejdź do realizacji” miało biały napis na volt (1,5:1).
   Kolor siedzi na wewnętrznym <span>, więc ustawienie go na przycisku nic
   nie dawało — stąd celowanie w span i ikonę. */
html body #blockcart-modal .cart-content-btn {
  width: auto !important; display: flex !important; flex-direction: column;
  gap: 10px; margin-top: 16px !important;
}
html body #blockcart-modal .cart-content-btn > a,
html body #blockcart-modal .cart-content-btn > button {
  width: 100% !important; min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; border-radius: var(--td-r-pill);
  font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 12px 18px !important;
}
/* Ikona w przycisku bywa pusta — bez tego `gap` odsuwałby napis od środka. */
html body #blockcart-modal .cart-content-btn .tvall-inner-btn i:empty { display: none; }
html body #blockcart-modal .cart-content-btn .tvall-inner-btn::before,
html body #blockcart-modal .cart-content-btn .tvall-inner-btn::after { display: none !important; }
html body #blockcart-modal .cart-content-btn button.tvall-inner-btn {
  background: transparent !important; border: 1px solid var(--td-line-strong) !important;
}
html body #blockcart-modal .cart-content-btn button.tvall-inner-btn span { color: var(--td-text-hi) !important; }
html body #blockcart-modal .cart-content-btn a.tvall-inner-btn {
  background: var(--td-volt) !important; border: 1px solid var(--td-volt) !important;
}
html body #blockcart-modal .cart-content-btn a.tvall-inner-btn span,
html body #blockcart-modal .cart-content-btn a.tvall-inner-btn i { color: var(--td-ink-900) !important; }
@media (max-width: 575px) {
  html body #blockcart-modal .divide-right { border-right: 0 !important; padding-right: 0 !important; }
}


/* Strzałki karuzel pod kartą produktu — style trzymamy też tutaj, bo skrypt
   motywu dostawia je również wtedy, gdy na serwerze siedzi starszy szablon
   modułu (patrz strzalkiKaruzeli w vault.js). */
html body .tds-railnav { display: flex; gap: 6px; }
html body .tds-railnav button {
  width: 44px; height: 44px; border-radius: var(--td-r-pill);
  background: none; border: 1px solid var(--td-line-strong); color: var(--td-text-hi);
  font-size: 20px; line-height: 1; cursor: pointer; transition: all 140ms linear;
}
html body .tds-railnav button:hover {
  background: var(--td-volt); color: var(--td-ink-900); border-color: var(--td-volt);
}

/* --- ZAMÓWIENIE: zgody i zapisane adresy -----------------------------------
   Trzy rzeczy zmierzone na żywej kasie.

   1. Etykiety zgód szły kolorem rgb(35,35,35) po czarnym tle — 1,22:1.
      Dotyczyło to również wymaganej zgody RODO i akceptacji regulaminu,
      czyli treści, którą klient musi przeczytać, zanim ją zaznaczy.

   2. Samo pole miało 17×17 px, a jego obramowanie spadało do currentColor,
      bo reguła motywu sięgała po token, którego nie było w pliku. Token jest
      już naprawiony wyżej, ale na kasie idziemy krok dalej: jaśniejsza
      obwódka i większe pole, bo to jedyne miejsce, gdzie brak zaznaczenia
      blokuje zakup.

   3. Karty zapisanych adresów zostawały białymi prostokątami
      (zmierzone rgb(255,255,255)) w ciemnym sklepie. */

html body#checkout .custom-checkbox { align-items: flex-start; gap: 12px; }
html body#checkout .custom-checkbox input[type="checkbox"] { width: 22px !important; height: 22px !important; margin: 0 !important; cursor: pointer; }
html body#checkout .custom-checkbox input[type="checkbox"] + span {
  width: 22px !important; height: 22px !important; flex: 0 0 22px; margin: 0 !important;
  background: var(--td-ink-800) !important;
  border: 2px solid var(--td-text-low) !important;
  border-radius: 5px !important;
  display: flex !important; align-items: center; justify-content: center;
  transition: all 120ms linear;
}
/* Zgody wymagane wyróżniamy jaśniejszą obwódką — to one blokują zamówienie. */
html body#checkout .custom-checkbox input[type="checkbox"][required] + span { border-color: var(--td-text-hi) !important; }
html body#checkout .custom-checkbox:hover input[type="checkbox"] + span { border-color: var(--td-volt) !important; }
html body#checkout .custom-checkbox input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--td-volt); outline-offset: 2px; }
html body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--td-volt) !important; border-color: var(--td-volt) !important;
}
html body#checkout .custom-checkbox input[type="checkbox"] + span i {
  color: var(--td-ink-900) !important; font-size: 18px !important;
  width: auto !important; height: auto !important; line-height: 1 !important;
}
html body#checkout .custom-checkbox input[type="checkbox"]:checked + span i { opacity: 1 !important; }
html body#checkout .custom-checkbox label {
  color: var(--td-text-mid) !important; font-size: 14px !important;
  line-height: 1.55; cursor: pointer; margin: 0 !important; padding-top: 1px;
}
html body#checkout .custom-checkbox label a { color: var(--td-volt) !important; text-decoration: underline; }

html body#checkout .custom-radio {
  background: var(--td-ink-800) !important; border: 2px solid var(--td-text-low) !important;
  width: 22px !important; height: 22px !important; flex: 0 0 22px;
}
html body#checkout .custom-radio input:checked + span { background: var(--td-volt) !important; }

html body#checkout .address-item {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  color: var(--td-text-mid) !important;
  overflow: hidden;
}
html body#checkout .address-item.selected { border-color: var(--td-volt) !important; }
html body#checkout .address-item header { padding: 14px 16px 0 !important; }
html body#checkout .address-item header label { display: flex; align-items: center; gap: 10px; margin: 0 !important; cursor: pointer; }
html body#checkout .address-item .address-alias,
html body#checkout .address-item .h4 {
  color: var(--td-text-hi) !important; font-size: 15px !important;
  font-weight: 700 !important; margin: 0 !important;
}
html body#checkout .address-item .address { padding: 10px 16px 14px !important; font-size: 14px; line-height: 1.6; }
html body#checkout .address-item .address,
html body#checkout .address-item .address * { color: var(--td-text-mid) !important; }
html body#checkout .address-item footer {
  border-top: 1px solid var(--td-line);
  padding: 10px 16px !important; display: flex !important; gap: 10px;
  background: transparent !important;
}
/* Motyw nadrzędny podawał tu turkusowy „Edytuj” i czerwony „Usuń” — kolory
   spoza palety sklepu. Sprowadzamy oba do pigułek konturowych. */
html body#checkout .address-item footer a,
html body#checkout .address-item footer .btn {
  background: transparent !important;
  border: 1px solid var(--td-line-strong) !important;
  color: var(--td-text-mid) !important;
  border-radius: var(--td-r-pill) !important;
  padding: 8px 14px !important; min-height: 40px;
  display: inline-flex !important; align-items: center; gap: 6px;
  font-size: 12px !important; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700;
}
html body#checkout .address-item footer a:hover { border-color: var(--td-volt) !important; color: var(--td-volt) !important; }
html body#checkout .address-item footer .delete-address:hover { border-color: #ff6b6b !important; color: #ff6b6b !important; }
html body#checkout #checkout-addresses-step p { color: var(--td-text-mid) !important; }
html body#checkout .add-address,
html body#checkout .add-address a { color: var(--td-volt) !important; font-weight: 700; }

/* --- NAGŁÓWEK: rozwijane menu konta ---------------------------------------
   Panel zostawał biały (zmierzone rgb(255,255,255)) z czarnymi odnośnikami,
   więc po zalogowaniu „Wyloguj się” ginęło. Kolor odnośnika motyw nadrzędny
   ustawia selektorem z identyfikatorem, dlatego wszędzie tu !important. */
html body .tv-account-dropdown {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  padding: 8px !important;
  min-width: 200px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
html body .tv-account-dropdown li { list-style: none; border: 0 !important; }
html body .tv-account-dropdown a,
html body .tv-account-dropdown .tvhedaer-sign-btn {
  color: var(--td-text-mid) !important;
  display: flex !important; align-items: center; gap: 10px;
  min-height: 42px; line-height: 1.2 !important;
  padding: 0 12px !important;
  border-radius: var(--td-r-sm);
  font-size: 14px !important;
}
html body .tv-account-dropdown a:hover,
html body .tv-account-dropdown .tvhedaer-sign-btn:hover {
  background: var(--td-ink-800) !important;
  color: var(--td-volt) !important;
}
html body .tv-account-dropdown a i,
html body .tv-account-dropdown .tvhedaer-sign-btn i {
  color: var(--td-text-low) !important;
  font-size: 20px !important;
  width: 20px; margin: 0 !important;
}
html body .tv-account-dropdown a:hover i,
html body .tv-account-dropdown .tvhedaer-sign-btn:hover i { color: var(--td-volt) !important; }

/* --- BOCZNY PANEL KOSZYKA --------------------------------------------------
   Wiersze podsumowania miały białe tło (zmierzone rgb(255,255,255)), a etykiety
   „Razem / Wysyłka” kolor rgb(34,34,34) — na ciemnym panelu nie było widać ani
   tła, ani napisów. */
/* Jeden margines boczny dla całego panelu. Zmierzone przed poprawką:
   wiersz produktu zaczynał się na 1114 px, a wiersz podsumowania na 1094 px
   — czyli etykieta „Razem” dotykała krawędzi panelu, bo sekcje miały
   własne, różne odstępy. Odstęp trzyma teraz panel, a sekcje go zerują. */
html body .ttvcmscart-show-dropdown-right {
  padding-inline: 20px !important;
  /* Panel przewija się sam i rezerwował 17 px na pasek WEWNĄTRZ swojego
     odstępu — treść miała 21 px z lewej, a 36 px z prawej. Pasek chowamy,
     tak jak w karuzelach sekcji. */
  scrollbar-width: none;
}
html body .ttvcmscart-show-dropdown-right::-webkit-scrollbar { display: none; }
html body .ttvcmscart-show-dropdown-right .ttvcart-scroll-container,
html body .ttvcmscart-show-dropdown-right .ttvcart-close-title-count,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-content-box,
html body .ttvcmscart-show-dropdown-right .ttvcart-price-shipping-text,
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-btn-wrapper { padding-inline: 0 !important; width: auto !important; }
html body .ttvcmscart-show-dropdown-right .ttvcart-product-wrapper { padding: 16px 0 !important; }
/* Lista produktów przewija się i rezerwowała 15 px na pasek, przez co jej
   wiersze kończyły się 15 px wcześniej niż podsumowanie pod spodem. Pasek
   chowamy — tak samo jak w karuzelach sekcji — i obie części panelu
   kończą się w jednej linii. */
html body .ttvcmscart-show-dropdown-right .ttvcart-scroll-container { scrollbar-width: none; }
html body .ttvcmscart-show-dropdown-right .ttvcart-scroll-container::-webkit-scrollbar { display: none; }
html body .ttvcmscart-show-dropdown-right .ttvcart-product-list-btn-wrapper {
  display: flex; gap: 10px; padding-block: 16px !important;
}
html body .ttvcmscart-show-dropdown-right .ttvcart-product-label-value {
  background: transparent !important;
  border-top: 1px solid var(--td-line);
  padding: 12px 0 !important;
}
html body .ttvcmscart-show-dropdown-right .ttvcart-product-label-value.total {
  border-top: 1px solid var(--td-line-strong);
}
html body .ttvcmscart-show-dropdown-right .ttvshoping-cart-label,
html body .ttvcmscart-show-dropdown-right small.value { color: var(--td-text-mid) !important; }
html body .ttvcmscart-show-dropdown-right .ttvcart-product-value { color: var(--td-text-hi) !important; }
html body .ttvcmscart-show-dropdown-right .ttvcart-product-label-value.total .ttvcart-product-value {
  color: var(--td-volt) !important; font-weight: 700;
}
html body .ttvcmscart-show-dropdown-right .tvshoping-cart-dropdown-title,
html body .ttvcmscart-show-dropdown-right .tvshoping-cart-dropdown-title a { color: var(--td-text-hi) !important; }
html body .ttvcmscart-show-dropdown-right .tvshoping-cart-dropdown-title a:hover { color: var(--td-volt) !important; }

/* --- MOJE KONTO -> ADRESY --------------------------------------------------
   Karta adresu zostawała białym prostokątem, a nagłówek „Mój adres” szedł
   prawie białym kolorem po białym tle — zmierzone 1,09:1, czyli niewidoczny. */
html body.page-addresses .address,
html body#addresses .address {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  color: var(--td-text-mid) !important;
  overflow: hidden;
}
html body.page-addresses .address .address-header,
html body#addresses .address .address-header { padding: 14px 16px 0 !important; background: transparent !important; }
html body.page-addresses .address .address-header h4,
html body#addresses .address .address-header h4 {
  color: var(--td-text-hi) !important; font-size: 15px !important;
  font-weight: 700 !important; margin: 0 !important;
}
html body.page-addresses .address .address-body,
html body#addresses .address .address-body {
  background: transparent !important; border: 0 !important;
  padding: 10px 16px 14px !important;
}
html body.page-addresses .address address,
html body#addresses .address address { color: var(--td-text-mid) !important; font-size: 14px; line-height: 1.6; margin: 0; }
html body.page-addresses .address .address-footer,
html body#addresses .address .address-footer {
  background: transparent !important;
  border-top: 1px solid var(--td-line);
  padding: 10px 16px !important; display: flex; gap: 10px;
}
/* Motyw rodzica dawał tu turkusowy „Uaktualnij” i czerwony „Usuń” — kolory
   spoza palety sklepu. Te same pigułki co na kasie. */
html body.page-addresses .address .address-footer a,
html body#addresses .address .address-footer a {
  background: transparent !important;
  border: 1px solid var(--td-line-strong) !important;
  color: var(--td-text-mid) !important;
  border-radius: var(--td-r-pill) !important;
  padding: 8px 14px !important; min-height: 40px;
  display: inline-flex !important; align-items: center; gap: 6px;
  font-size: 12px !important; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700;
}
html body.page-addresses .address .address-footer a:hover,
html body#addresses .address .address-footer a:hover { border-color: var(--td-volt) !important; color: var(--td-volt) !important; }
html body.page-addresses .address .address-footer a[data-link-action="delete-address"]:hover,
html body#addresses .address .address-footer a[data-link-action="delete-address"]:hover { border-color: #ff6b6b !important; color: #ff6b6b !important; }

/* --- ZAMÓWIENIE: krok dostawy ---------------------------------------------
   Nazwa przewoźnika szła kolorem rgb(68,68,68) — 1,97:1 — a sam wiersz
   dziedziczył rgb(35,35,35). Klient nie widział, co wybiera. */
html body#checkout .delivery-options,
html body#checkout .delivery-option,
html body#checkout .delivery-option label { color: var(--td-text-mid) !important; }
html body#checkout .delivery-option {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  margin: 0 0 10px !important; padding: 14px 12px !important;
}
html body#checkout .delivery-option .carrier-name,
html body#checkout .delivery-option .h6 { color: var(--td-text-hi) !important; font-weight: 700; }
html body#checkout .delivery-option .carrier-delay { color: var(--td-text-mid) !important; }
html body#checkout .delivery-option .carrier-price { color: var(--td-volt) !important; font-weight: 700; }
/* Widżet wyboru paczkomatu (InPost) przychodzi z modułu z własnym, jasnym
   motywem i zostawał białym prostokątem pośrodku ciemnej kasy. Ciemnimy
   kontener i rozjaśniamy jego teksty — a potem przywracamy ciemny napis
   wewnątrz przycisków, bo te mają własne jasne tło (żółte „Wybierz
   Paczkomat”, szare „Wybierz ten punkt”) i jasny napis by na nich zniknął. */
html body#checkout .carrier-extra-content {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md);
  padding: 14px !important;
  margin: 10px 0 0 !important;
}
/* Moduł maluje własne białe panele także WEWNĄTRZ widżetu — bez tego
   rozjaśnione napisy lądowały na białym tle (zmierzone 1,09:1, czyli gorzej
   niż przed poprawką). Zdejmujemy tło z pojemników, ale nie z przycisków,
   obrazów, map ani ramek osadzonych, żeby nie zepsuć samego widżetu. */
html body#checkout .carrier-extra-content div,
html body#checkout .carrier-extra-content p,
html body#checkout .carrier-extra-content ul,
html body#checkout .carrier-extra-content li,
html body#checkout .carrier-extra-content section,
html body#checkout .carrier-extra-content article,
html body#checkout .carrier-extra-content table,
html body#checkout .carrier-extra-content td { background: transparent !important; }
html body#checkout .carrier-extra-content,
html body#checkout .carrier-extra-content p,
html body#checkout .carrier-extra-content div,
html body#checkout .carrier-extra-content span,
html body#checkout .carrier-extra-content li,
html body#checkout .carrier-extra-content label { color: var(--td-text-mid) !important; }
html body#checkout .carrier-extra-content b,
html body#checkout .carrier-extra-content strong { color: var(--td-text-hi) !important; }
html body#checkout .carrier-extra-content button,
html body#checkout .carrier-extra-content button *,
html body#checkout .carrier-extra-content .btn,
html body#checkout .carrier-extra-content .btn * { color: var(--td-ink-900) !important; }

/* --- ZAMÓWIENIE: krok płatności -------------------------------------------
   Podsumowanie zamówienia renderowało się na białym tle (rgb(255,255,255),
   ramka 3px) z prawie białymi nagłówkami tabeli — 1,09:1 w nagłówkach
   i 2,36:1 w komórkach. */
html body#checkout .payment-options,
html body#checkout .payment-option,
html body#checkout .payment-option label { color: var(--td-text-mid) !important; }
html body#checkout .payment-option {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  margin: 0 0 10px !important; padding: 14px 12px !important;
  display: flex !important; align-items: center; gap: 12px;
}
html body#checkout .payment-option label,
html body#checkout .payment-option label span { color: var(--td-text-hi) !important; margin: 0 !important; }
/* Kartą jest CAŁE podsumowanie, nie tabela w środku. Poprzednio ciemniałem
   `.order-confirmation-table`, ale białe tło siedzi na kontenerze wyżej —
   dlatego kartę robimy z `#order-summary-content`, a wszystkie opakowania
   w środku sprowadzamy do przezroczystości. Dzięki temu nie trzeba znać
   nazwy klasy, którą motyw rodzica maluje na biało. */
html body#checkout #order-summary-content {
  background: var(--td-ink-850) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  padding: 20px !important;
  color: var(--td-text-mid) !important;
}
html body#checkout #order-summary-content .order-checkout,
html body#checkout #order-summary-content .order-confirmation-table,
html body#checkout #order-summary-content .card,
html body#checkout #order-summary-content .card-block,
html body#checkout #order-summary-content .card-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body#checkout #order-summary-content .table thead th { color: var(--td-text-mid) !important; }
html body#checkout #order-summary-content .table td,
html body#checkout #order-summary-content .table th { color: var(--td-text-hi) !important; border-color: var(--td-line) !important; }

/* --- ZAMÓWIENIE: domknięcie kroków dostawy i płatności ---------------------
   Audyt repliki obu kroków wykazał dwa miejsca, których nie objęła poprzednia
   poprawka: karta wybranego przewoźnika w podsumowaniu płatności zostawała
   biała (zmierzone rgb(255,255,255), 704×60) z napisami 2,36:1, a odnośniki
   „edytuj” szły kolorem rgb(122,122,122) — 4,46:1, tuż pod progiem AA. */
html body#checkout .summary-selected-carrier {
  background: var(--td-ink-800) !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-r-md) !important;
  padding: 12px 14px !important;
  margin: 0 0 18px !important;
}
html body#checkout .summary-selected-carrier .carrier-name { color: var(--td-text-hi) !important; font-weight: 700; }
html body#checkout .summary-selected-carrier .carrier-delay { color: var(--td-text-mid) !important; }
html body#checkout .summary-selected-carrier .carrier-price { color: var(--td-volt) !important; font-weight: 700; }

html body#checkout .step-edit { color: var(--td-volt) !important; font-weight: 700; }
html body#checkout .step-edit:hover { text-decoration: underline; }

/* Nagłówki sekcji w podsumowaniu („Adresy”, „Sposób dostawy”, „Zamówione
   produkty”) dostają małą, rozstrzeloną kapitalikę jak reszta sklepu.
   Bierzemy WSZYSTKIE poziomy nagłówków, bo motyw rodzica nie trzyma się
   jednej klasy — „Zamówione produkty” szło czarnym h3 bez klasy .h4
   i na ciemnym tle byłoby niewidoczne. */
html body#checkout #order-summary-content h1,
html body#checkout #order-summary-content h2,
html body#checkout #order-summary-content h3,
html body#checkout #order-summary-content h4,
html body#checkout #order-summary-content h5,
html body#checkout #order-summary-content .h1,
html body#checkout #order-summary-content .h2,
html body#checkout #order-summary-content .h3,
html body#checkout #order-summary-content .h4,
html body#checkout #order-summary-content .h5 {
  font-family: var(--td-f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--td-text-low) !important;
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 10px !important; padding: 0 0 10px !important;
  border-bottom: 1px solid var(--td-line);
}
/* Pierwszy nagłówek to zdanie do klienta („Proszę sprawdzić swoje
   zamówienie…”), a nie etykieta sekcji — zostaje zdaniem. */
html body#checkout #order-summary-content > h4:first-child,
html body#checkout #order-summary-content > .h4:first-child,
html body#checkout #order-summary-content > h3:first-child {
  font-family: var(--td-f-ui);
  font-size: 16px; letter-spacing: 0; text-transform: none;
  color: var(--td-text-hi) !important;
  display: block; border-bottom: 0;
  margin: 0 0 18px !important; padding: 0 !important;
}
html body#checkout .order-line { padding: 10px 0; border-bottom: 1px solid var(--td-line); }
html body#checkout .order-line .details { color: var(--td-text-hi) !important; }
html body#checkout .order-line .product-price,
html body#checkout .order-line .unit-price { color: var(--td-text-hi) !important; }

/* Wybrana opcja dostawy i płatności świeci tak samo jak wybrany adres —
   bez tego wszystkie wiersze wyglądały identycznie i nie było widać wyboru.
   Reguła stoi osobno, bo w przeglądarce bez obsługi :has() cały blok
   zostanie pominięty i nie może zabrać ze sobą pozostałych stylów. */
html body#checkout .delivery-option:has(input:checked),
html body#checkout .payment-option:has(input:checked) {
  border-color: var(--td-volt) !important;
  background: var(--td-ink-800) !important;
}

/* --- ETYKIETA „brutto” PRZY CENACH -----------------------------------------
   Wcześniej ten dopisek był wpisany w SYMBOL WALUTY (PLN), przez co doklejał
   się dosłownie do każdej sformatowanej kwoty w systemie: do faktur, e-maili,
   eksportu do BaseLinkera i do pól formularzy w panelu — tam rozpychał je tak,
   że nie dało się wpisać ceny przewoźnika.

   Symbol waluty jest już czysty („zł”), a etykietę dokładamy wyłącznie tam,
   gdzie widzi ją klient: przy cenie na karcie produktu i w siatce. Nie dotyczy
   ceny przekreślonej (`.tds-price__old` to osobna klasa) ani żadnej kwoty
   liczonej przez sklep. */
html body .tds-price::after,
html body .product-prices .current-price .price::after {
  content: 'brutto';
  margin-inline-start: 6px;
  font-family: var(--td-f-mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--td-text-low);
}
/* Rozmiary stałe, nie w `em` — cena na karcie produktu ma 35 px, a w siatce
   16 px, więc skalowanie proporcjonalne dawało na karcie etykietę wielkości
   19 px, czyli krzyczącą bardziej niż sama cena. */
html body .product-prices .current-price .price::after { font-size: 12px; }
html body .tds-price::after { font-size: 10px; }


/* TD_PRODUCT_PHOTO_FIX_20260909 — wyłącznie galeria na karcie produktu. */

/* Zdjęcie nie może mieszać kolorów z warstwą powiększenia elevateZoom.
   Szablon rodzica nadaje zdjęciu inline z-index:99999; zoom musi być nad nim. */
html body.page-product .product-cover img {
  mix-blend-mode: normal !important;
  z-index: auto !important;
}
html body.page-product .zoomWindowContainer > div {
  background-color: #fff !important;
  mix-blend-mode: normal !important;
}

html body.page-product .images-container .td-photo-open {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 10px 16px;
  border: 1px solid var(--td-volt, #d6ff3f);
  border-radius: 10px;
  background: var(--td-ink-850, #0f0f11);
  color: var(--td-volt, #d6ff3f);
  font: 600 14px/1.4 var(--td-f-ui, sans-serif);
  cursor: zoom-in;
}
html body.page-product .images-container .td-photo-open:focus-visible {
  outline: 2px solid var(--td-volt, #d6ff3f);
  outline-offset: 3px;
}

/* Klasa jest dodawana tylko do istniejącego okna zdjęć #product-modal. */
html body #product-modal.td-photo-modal {
  z-index: 100000;
  padding: 0 !important;
  overflow: hidden;
  background: rgba(0, 0, 0, .8);
  touch-action: pan-x pan-y pinch-zoom;
}
html body #product-modal.td-photo-modal .modal-dialog {
  position: relative !important;
  display: block !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: calc(100% - 32px) !important;
  max-width: 1200px !important;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  margin: 16px auto !important;
  transform: none !important;
}
html body #product-modal.td-photo-modal .modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
html body #product-modal.td-photo-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px !important;
}
html body #product-modal.td-photo-modal .modal-header::after { display: none; }
html body #product-modal.td-photo-modal .td-photo-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
html body #product-modal.td-photo-modal .td-photo-tools button,
html body #product-modal.td-photo-modal .modal-header .close {
  position: static !important;
  float: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px;
  border: 1px solid var(--td-line-strong, #3d3d46);
  border-radius: 8px;
  background: var(--td-ink-750, #1a1a1e);
  color: var(--td-text-hi, #f6f5f2) !important;
  font: 600 16px/1 var(--td-f-ui, sans-serif);
  opacity: 1;
  cursor: pointer;
}
html body #product-modal.td-photo-modal .td-photo-tools [data-td-photo-fit] { font-size: 12px; }
html body #product-modal.td-photo-modal .td-photo-tools button:disabled { opacity: .4; cursor: default; }
html body #product-modal.td-photo-modal .td-photo-tools button:focus-visible,
html body #product-modal.td-photo-modal .modal-header .close:focus-visible {
  outline: 2px solid var(--td-volt, #d6ff3f);
  outline-offset: 1px;
}
html body #product-modal.td-photo-modal .td-photo-scale {
  min-width: 38px;
  color: var(--td-text-hi, #f6f5f2);
  text-align: center;
  font: 600 12px/1 var(--td-f-ui, sans-serif);
}
html body #product-modal.td-photo-modal .modal-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
html body #product-modal.td-photo-modal figure.td-photo-viewport {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
  margin: 0 !important;
  overflow: auto;
  background: #fff;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
html body #product-modal.td-photo-modal .td-photo-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
html body #product-modal.td-photo-modal img.td-photo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal !important;
  background: #fff !important;
}
html body #product-modal.td-photo-modal .image-caption { display: none; }
html body #product-modal.td-photo-modal .thumbnails {
  flex: 0 0 auto;
  width: 100% !important;
  padding: 6px;
}
html body #product-modal.td-photo-modal .js-modal-mask {
  max-height: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
}
html body #product-modal.td-photo-modal .js-modal-product-images {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  width: max-content;
  margin: 0 !important;
  padding: 0;
  transform: none !important;
}
html body #product-modal.td-photo-modal .thumb-container { flex: 0 0 auto; margin: 0; }
html body #product-modal.td-photo-modal .js-modal-thumb {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  margin: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
}
html body #product-modal.td-photo-modal .js-modal-thumb.selected { border-color: var(--td-volt, #d6ff3f) !important; }
html body #product-modal.td-photo-modal .js-modal-arrows { display: none !important; }
@media (max-width: 767px) {
  html body #product-modal.td-photo-modal .modal-dialog {
    width: 100% !important;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
  }
  html body #product-modal.td-photo-modal .modal-content { border-radius: 0 !important; }
  html body #product-modal.td-photo-modal .modal-header { padding-top: max(8px, env(safe-area-inset-top)) !important; }
  html body #product-modal.td-photo-modal .thumbnails { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}


/* TRUE DROP — brand rail. Scoped to the home module's brand links. */
html body .tds-brands[data-td-rail] {
  display:flex !important; gap:14px !important; position:relative;
  width:100%; max-width:1400px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; scroll-behavior:auto !important;
  overscroll-behavior-x:contain; touch-action:pan-x pan-y;
  padding:4px 0 8px; margin:0; direction:ltr;
}
html body .tds-brands[data-td-rail]::-webkit-scrollbar { display:none; }
html body .td-brand-group { display:flex; flex:0 0 auto; gap:14px; }
html body .tds-brands[data-td-rail] .tds-brand {
  display:flex !important; align-items:center; justify-content:center;
  flex:0 0 166px; width:166px; height:106px; min-height:106px;
  box-sizing:border-box; padding:22px; border:1px solid #292929;
  border-radius:14px; background:#101010; text-decoration:none;
  transition:background .2s,border-color .2s; transform:none;
}
html body .tds-brands[data-td-rail] .tds-brand:hover {
  background:#1b1b1b; border-color:#777; transform:none;
}
html body .tds-brands[data-td-rail] .tds-brand:focus-visible {
  outline:2px solid #fff; outline-offset:-4px;
}
html body .tds-brands[data-td-rail] .tds-brand img {
  display:block; width:110px; height:48px; max-width:100%; max-height:none;
  object-fit:contain; filter:brightness(0) invert(1); opacity:1;
}
html body .tds-brands[data-td-rail] [data-brand="jordan"] img { height:58px; width:62px; }
html body .tds-brands[data-td-rail] [data-brand="adidas"] img { width:76px; height:52px; }
html body .tds-brands[data-td-rail] [data-brand="newbalance"] img { width:88px; }
html body .tds-brands[data-td-rail] [data-brand="puma"] img { width:92px; }
html body .tds-brands[data-td-rail] [data-brand="skechers"] img { width:122px; }
html body .td-brand-controls { display:flex; justify-content:flex-end; margin-top:10px; }
html body .td-brand-pause {
  background:transparent; border:1px solid #333; border-radius:20px;
  color:#bbb; font-family:inherit; font-size:12px; line-height:1.4;
  padding:7px 12px; cursor:pointer;
}
html body .td-brand-pause:hover { color:#fff; border-color:#777; }
html body .td-brand-pause:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width:600px) {
  html body .tds-brands[data-td-rail], html body .td-brand-group { gap:10px !important; }
  html body .tds-brands[data-td-rail] .tds-brand {
    flex-basis:144px; width:144px; height:94px; min-height:94px; padding:18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html body .tds-brands[data-td-rail] .tds-brand { transition:none; }
}

/* Brand logo fix: reset the module's white image background before filtering. */
html body .tds-brands[data-td-rail] .tds-brand img {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}