/* W1 - podstrony i nowe sekcje. Osobny plik: jedna linia w head.phtml do cofniecia.
   Tokeny: zielen tylko CTA/status, zloto sygnaly, zero zaokraglen, tracking .14em. */
:root {
  --w1-zielen: #3D6800;
  --w1-zloto: #876C38;
  --w1-alarm: #A03D2E;
  --w1-tekst: #1A1A18;
  --w1-cichy: #6B675E;
  --w1-linia: #E3DFD7;
  /* 11.09: ramka POL (inputy, listy, pola tekstowe, przycisk koszyka). --w1-linia ma 1,33:1
     na bieli, a WCAG 1.4.11 wymaga 3:1 dla granic kontrolek. Ten ciepły szary: 3,57:1 na bieli,
     3,25:1 na kremie. W uzyciu (fokus) ramka robi sie --w1-tekst. */
  --w1-ramka: #8C877D;
  --w1-krem: #F7F4EC;
  --w1-ciemny: #1F2A12;
  --w1-ciemny-tekst: #EDEAE1;
  --w1-ciemny-zloto: #E5CD9A;
  --w1-track: .14em;
}
.w1-section, .w1-page-glowa, .w1-form { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-section { padding: 48px 0; border-top: 1px solid var(--w1-linia); }
.w1-section--krem { background: var(--w1-krem); }
.w1-section--ciemny { background: var(--w1-ciemny); color: var(--w1-ciemny-tekst); }
.w1-section * { border-radius: 0 !important; }
.w1-nadtytul { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-section--ciemny .w1-nadtytul { color: var(--w1-ciemny-zloto); }
.w1-tytul { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.w1-tytul--strona { position: relative; padding-top: 15px; font-size: 30px; }
.w1-tytul--strona::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--w1-zielen); }
.w1-opis, .w1-page-teaser { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--w1-cichy); max-width: 60ch; }
.w1-section--ciemny .w1-opis { color: rgba(237,234,225,.75); }
.w1-drobny { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--w1-cichy); max-width: 56ch; }
.w1-glowka { margin-bottom: 26px; }
.w1-przyciski { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
/* CZERN, nie zielen (decyzja wlasciciela 03.09.2026). Makieta B2B z 26.08 rysowala
   przycisk glowny na zielono, ale makiety podstron, bloga i koszyka (19-20.08) daja
   `background: var(--ink)` = #1A1A18, a zielen zostawiaja WYLACZNIE na kreske 34x2 px
   nad naglowkiem. Ta sama czern ma najwazniejszy przycisk sklepu - „Do koszyka" na
   karcie produktu (zmierzone rgb(26,26,24)) - wiec zielen na /b2b i /kontakt byla
   jedynym wyjatkiem w calym sklepie. Zielen zostaje kolorem kreski i statusow. */
.w1-btn { display: inline-block; background: var(--w1-tekst); color: #fff; padding: 14px 22px; font-weight: 600; font-size: 13.5px; letter-spacing: .04em; text-decoration: none; border-radius: 0; }
.w1-btn:hover, .w1-btn:focus-visible { background: #34312A; color: #fff; text-decoration: none; }
.w1-btn--wtor { background: transparent; color: var(--w1-tekst); border: 1px solid #34312A; }
.w1-btn--wtor:hover, .w1-btn--wtor:focus-visible { background: var(--w1-krem); color: var(--w1-tekst); }
.w1-page-glowa { padding: 38px 0 32px; }
.w1-page-foto { overflow: hidden; background: var(--w1-krem); }
.w1-page-foto img { display: block; width: 100%; height: auto; }
/* Longhandy, nie skrot: `.w1-page-tresc` jest jednoczesnie `.container`, a `padding: 38px 0`
   zerowalo jego boczne 15/30 px. Na telefonie tekst dotykal krawedzi ekranu (zmierzone 0 px
   przy tytule na 15), a na pc stal 30 px na lewo od punktow, wiec strona miala dwie osie. */
.w1-page-tresc { padding-top: 38px; padding-bottom: 38px; }
/* benefits - ciemny pas */
.benefits-section { background: var(--w1-ciemny); color: var(--w1-ciemny-tekst); }
.benefits-section .w1-tytul { color: var(--w1-ciemny-tekst); }
.benefits-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 24px; }
.benefits-item { display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; }
/* Pliki ikon maja `stroke="#fff"` na sztywno, wiec BEZ filtra sa biale - i tak maja
   wygladac na ciemnym pasie. Wczesniej stalo tu `invert(1) brightness(1.4)`, co
   zamienialo biel w CZERN (zmierzone na canvasie: rgb(0,0,0)) i ikony gasly na
   ciemnej zieleni. Czern jest potrzebna dopiero na kremie - patrz regula ponizej. */
.benefits-item img { width: 30px; height: 30px; grid-row: 1 / 3; filter: none; }
.benefits-item strong { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
.benefits-item span { font-size: 14px; line-height: 1.55; opacity: .8; }
/* packages */
.packages-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.packages-item { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--w1-linia); }
.packages-item:first-child { border-top: 0; padding-top: 6px; }
.packages-kadr { aspect-ratio: 354 / 442; background: var(--w1-krem); overflow: hidden; }
.packages-kadr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.packages-nazwa { font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.packages-gram { display: inline-block; margin-top: 7px; padding: 2px 7px; border: 1px solid var(--w1-zloto); color: var(--w1-zloto); font-size: 11px; letter-spacing: var(--w1-track); text-transform: uppercase; }
.packages-opis { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--w1-cichy); }
/* formularz W1 */
.w1-form .form-group label { font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-form .form-control { border: 1px solid var(--w1-ramka); background: #fff; box-shadow: none; }
.w1-form .form-control:focus { border-color: var(--w1-tekst); box-shadow: none; outline: none; }
.w1-form .w1-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }
/* duzy ekran */
@media (min-width: 1140px) {
  .w1-section { padding: 64px 0; }
  .w1-tytul { font-size: 32px; }
  .w1-tytul--strona { font-size: 46px; }
  .w1-glowka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: end; }
  .w1-glowka .w1-opis { margin-top: 0; }
  .w1-page-glowa { display: grid; grid-template-columns: 5fr 6fr; gap: 60px; align-items: end; padding: 64px 0 40px; }
  .w1-page-teaser { margin-top: 0; }
  .w1-page-foto img { aspect-ratio: 1140 / 420; object-fit: cover; }
  /* Kolumn tyle, ile pozycji. Sztywne `repeat(5, 1fr)` bylo pisane pod „Co dostajesz"
     na /b2b (5 pozycji); sekcja z czterema zostawiala pusta piata kolumne i pas wygladal,
     jakby byl zepchniety w lewo (uwaga wlasciciela 11.09). `auto-fit` z minimum 200 px
     sam dobiera liczbe kolumn i zawija, gdy pozycji jest wiecej niz sie miesci. */
  .benefits-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; }
  .benefits-item { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(237,234,225,.22); padding-top: 18px; }
  .benefits-item img { grid-row: auto; margin-bottom: 14px; }
  .packages-list { grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 36px; }
  .packages-item { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--w1-linia); background: #fff; align-items: start; }
  .packages-item:first-child { padding-top: 0; }
  .packages-kadr { aspect-ratio: 4 / 3; }
  .packages-tresc { padding: 18px; }
}
@media (prefers-reduced-motion: no-preference) { .w1-btn { transition: background-color .15s; } }

/* comments na stronach W1: kafel opinii w ramce, histogram ukryty na mobile.
   Realne zagniezdzenie partialu opinii (application/view/plugins/comment/partial/item.phtml,
   plugins/comment/types/default.phtml): .opinion-item > .opinion-header > .opinion-heading-inner >
   (h3.opinion-name, .opinion-heading-inner-bottom > .opinion-heading-stars + time.opinion-date);
   .opinion-item > .opinion-text > .text. Imie siedzi NAD gwiazdkami/data, nie pod tekstem jak
   zakladala pierwotna skorka - selektory ponizej dostosowane do realnej struktury. */
.w1-comments .opinion-item { border: 1px solid var(--w1-linia); box-shadow: none; background: #fff; padding: 16px 17px 15px; }
.w1-comments .opinion-item .opinion-name { font-size: 13px; font-weight: 600; }
.w1-comments .opinion-item .opinion-heading-inner-bottom { justify-content: space-between; }
.w1-comments .opinion-item .opinion-date { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-comments .opinion-item .opinion-text { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--w1-linia); font-size: 13.5px; line-height: 1.6; }
.w1-comments .comment-stats-inner { display: none; }
@media (min-width: 1140px) {
  .w1-comments .comment-stats-inner { display: block; }
}

/* ==== W1 paczka 1: logotypy SVG (28.08.2026) ====
   Ujemne marginesy .logo w style.css zjadaly pustke bitmapy; wektor jej nie ma. */
.logo, .logo a { margin-top: 0; margin-bottom: 0; color: var(--w1-tekst); }
.logo a svg { display: block; width: 100%; height: auto; }
.footer-col.footer-col-4 { width: 150px; margin-bottom: 0; }
.footer-logo { display: block; width: 100%; color: #fff; opacity: .95; }
.footer-logo svg { display: block; width: 100%; height: auto; }
@media screen and (max-width: 1139px) {
  .logo { width: auto; }
  .logo a svg { width: auto; height: 34px; }
  .footer-col.footer-col-4 { max-width: 148px; width: 148px; transform: none; margin: 0 auto 30px; }
}

/* ==== W1 paczka 2: kafel produktu (28.08.2026) ====
   Wzor: sekcje-w1.html .pk-w1 (decyzje 08/08a). DOM kafla bez zmian, tylko stroj. */
.w1-kafel .product-container { padding: 0 0 16px; gap: 0; align-items: stretch; background: #fff; border: 1px solid var(--w1-linia); }
/* Cena, dostepnosc i przycisk PRZYKLEJONE DO DOLU kafla. Bez tego dluzsza nazwa
   zawija sie do dwoch wierszy i spycha je nizej niz u sasiada w tym samym
   rzedzie - zmierzone na stronie glownej: przycisk 20 px nizej przy „Zestaw
   startowy - matcha premium" (uwaga wlasciciela 02.09).
   Tresc musi siegac dolu kafla, zeby bylo od czego odpychac; `margin-top: auto`
   na cenie robi reszte.

   UWAGA: `height: 100%` idzie WYLACZNIE na wewnetrzny kontener. Na samym kaflu
   psulo siatke Swipera z dwoma rzedami (sekcja polecanych na glownej): kafel
   rozciagal sie na pelna wysokosc CALEJ siatki, wiec drugi rzad wypadal poza
   kadr i widac bylo tylko jeden (zgloszone 02.09). Kafel jako element siatki
   i tak rozciaga sie sam - `align-items: stretch` jest domyslne. */
.w1-kafel .product-container { height: 100%; }
.w1-kafel .product-container:before, .w1-kafel .product-container:after { content: none; }
.w1-kafel .product-container:hover { border-color: #34312A; }
.w1-kafel .product-box-image { background: var(--w1-krem); aspect-ratio: 354 / 442; flex-grow: 0; }
.w1-kafel .product-box-image img { border-radius: 0; width: 100%; height: 100%; object-fit: contain; }
.w1-kafel .w1-kafel-etykiety { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.w1-kafel .w1-kafel-etykiety .product-labels { position: static; display: flex; flex-direction: column; gap: 4px; }
.w1-kafel .product-labels .product-label, .w1-kafel .w1-kafel-et {
  writing-mode: horizontal-tb; transform: none; border-radius: 0; padding: 5px 8px;
  font-size: 10px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; line-height: 1.2;
}
.w1-kafel .w1-kafel-et { display: inline-block; color: #fff; }
.w1-kafel .w1-kafel-et--przecena { background: var(--w1-alarm); }
.w1-kafel .w1-kafel-et--b2b { background: var(--w1-zloto); }
/* flex: 1 1 auto - tresc ma wypelnic reszte kafla, zeby bylo od czego odepchnac
   cene z przyciskiem (patrz komentarz przy .w1-kafel wyzej) */
.w1-kafel .product-box-content { width: auto; margin: 0 14px; text-align: left; align-items: stretch; justify-content: flex-start; gap: 0; flex: 1 1 auto; font-family: "Red Hat Display", system-ui, sans-serif; }
.w1-kafel .product-box-title { margin: 12px 0 0; font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--w1-tekst); text-wrap: balance; min-height: 2.7em; }
/* margin-top: auto zamiast 8px - od ceny w dol wszystko jedzie na SPOD kafla,
   wiec dlugosc nazwy przestaje ruszac przyciskiem. padding-top pilnuje, zeby
   przy ciasnym kaflu zostal odstep od nazwy (auto skurczylby sie do zera). */
.w1-kafel .product-price { margin-top: auto; padding-top: 8px; }
.w1-kafel .product-box-content .price-box { display: flex; flex-direction: column; gap: 2px; }
.w1-kafel .product-box-content .price-gross, .w1-kafel .product-box-content .price-net { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.w1-kafel .product-box-content .price:not(.price-old) { font-size: 19px; font-weight: 500; color: var(--w1-zielen); font-variant-numeric: tabular-nums; }
.w1-kafel .product-box-content .price:not(.price-old).price-new { color: var(--w1-alarm); }
.w1-kafel .product-box-content .price-old { order: 0; font-size: 13px; font-weight: 400; color: var(--w1-cichy); text-decoration: line-through; }
.w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 19px; color: var(--w1-zielen); }
.w1-kafel .product-box-content .price-net .caption, .w1-kafel .product-box-content .price-gross .caption { order: 3; font-size: 11px; line-height: 1.4; color: var(--w1-cichy); text-transform: lowercase; }
/* KOLOR BIERZE SIE Z PANELU (shop_availability.color), a nie z W1 - decyzja
   wlasciciela 05.09.2026: „kolory dostepnosci powinny byc brane z panelu
   administratora (tak jak bylo)". Wczesniej stalo tu `color: var(--w1-zloto)
   !important`, ktore bilo styl liniowy szablonu i malowalo KAZDY stan na zloto.
   Efekt: ten sam produkt mial na liscie zloto, a na karcie zielen albo czerwien
   z panelu - stad „ustaw ten sam kolor dla produktu dostepnego".
   Szablon wypisuje `style="color: ..."`, wiec bez `!important` panel wygrywa. */
.w1-kafel .product-box-availability { margin-top: 6px; font-size: 10px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
.w1-kafel .shop-add-to-basket { width: 100%; margin-top: 14px; }
.w1-kafel .shop-add-to-basket .btn {
  width: 100%; min-height: 44px; padding: 10px 10px; border-radius: 0; border: 1px solid #34312A;
  background: transparent; color: var(--w1-tekst); font-size: 10px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; gap: 8px;
}
.w1-kafel .shop-add-to-basket .btn .icon { width: 16px; height: 16px; }
.w1-kafel .shop-add-to-basket .btn:hover, .w1-kafel .shop-add-to-basket .btn:focus-visible { background: #34312A; border-color: #34312A; color: #fff; }
.w1-kafel .shop-add-to-basket .btn.disabled { opacity: .45; }
/* karuzela popupu: kafel wezszy, zdjecie ograniczone do 130 px (style.css), wiec bez kadru 354/442 */
.product-add-to-basket-modal .w1-kafel .product-box-image { aspect-ratio: auto; }
.product-add-to-basket-modal .w1-kafel .product-box-title { font-size: 13px; }
@media screen and (max-width: 1139px) {
  .w1-kafel .product-container { padding-bottom: 12px; }
  .w1-kafel .product-box-content { margin: 0 10px; }
  .w1-kafel .product-box-title { font-size: 12.5px; }
  .w1-kafel .product-box-content .price:not(.price-old), .w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 16px; }
}
.w1-kafel .product-box-content .price-box { align-items: flex-start; }
.w1-kafel .product-box-content .price-gross, .w1-kafel .product-box-content .price-net { justify-content: flex-start; }

/* ==== W1 paczka 3a: gora karty produktu - panel zakupu, galeria, pasek (28.08.2026) ====
   Wzor: makiety/2026-08-28-karta-produktu-w1 (.k-*, .gal-*). Logika i markup bez zmian
   poza kolejnoscia blokow; tu tylko stroj. Zakres: .w1-karta (product-view-top). */
.w1-karta { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-karta .product-labels { position: static; display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.w1-karta .product-labels .product-label { border-radius: 0; padding: 4px 9px; font-size: 9px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; line-height: 1.2; }
.w1-karta .product-view-title { margin: 0; font-size: 23px; font-weight: 300; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; color: var(--w1-tekst); }
.w1-karta .product-podtytul { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--w1-cichy); }
.w1-karta .product-view-title:has(+ .product-podtytul) { margin-bottom: 0; }
.w1-karta .product-view-rating { margin: 13px 0 0; font-size: 12px; color: var(--w1-cichy); }
.w1-karta .product-view-rating .rating-summary-stars svg:not([width="0"]) { color: var(--w1-zloto); }
.w1-karta .product-view-rating .rating-summary-nr { color: var(--w1-tekst); font-weight: 500; }
.w1-karta .panel-bullety { margin: 16px 0 0; gap: 7px; }
.w1-karta .panel-bullet { font-size: 12.5px; line-height: 1.45; color: var(--w1-tekst); grid-template-columns: 13px 1fr; }
.w1-karta .panel-bullet-kropka { width: 12px; height: 12px; margin-top: 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23876C38' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* panel: bez karty w karcie, rytm 20 px */
.w1-karta .panel-zakupu { padding: 18px 0 0; margin: 20px 0 0; border: 0; border-top: 1px solid var(--w1-linia); border-radius: 0; background: transparent; box-shadow: none; gap: 20px; }
.w1-karta .panel-cena .price { font-size: 30px; font-weight: 500; letter-spacing: 0; color: var(--w1-zielen); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-karta .panel-cena .price-new { color: var(--w1-alarm); }
.w1-karta .panel-cena .price-old { font-size: 15px; font-weight: 400; color: var(--w1-cichy); }
.w1-karta .panel-cena-jednostka { margin-top: 6px; font-size: 12px; color: var(--w1-cichy); font-variant-numeric: tabular-nums; }
.w1-karta .panel-cena-jednostka strong { color: var(--w1-tekst); font-weight: 500; }
.w1-karta .panel-cena .price-net > .caption, .w1-karta .panel-cena label.caption { font-size: 9px; letter-spacing: var(--w1-track); color: var(--w1-zloto); font-weight: 500; }
.w1-karta .panel-znacznik { border-radius: 0; padding: 5px 8px; font-size: 9.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
.w1-karta .panel-znacznik-promocja { background: var(--w1-alarm); color: #fff; }
/* 11.09: rabat staly = zloty OBRYS, promocja czasowa = czerwone wypelnienie (ustalenie 19.08).
   Obrys cieniem wewnetrznym, zeby plakietka miala ten sam wymiar co promocyjna. Zloto na bieli 4,96:1. */
.w1-karta .panel-znacznik-lojalnosc { background: #fff; color: var(--w1-zloto); box-shadow: inset 0 0 0 1px var(--w1-zloto); }
.w1-karta .panel-zakupu .shop-product-history-price-before-discount { font-size: 11.5px; color: var(--w1-cichy); margin-top: -10px; }
/* warianty: jeden wiersz, prostokaty, nazwa nigdy sie nie lamie, wybrany obwiedziony tuszem */
.w1-karta .panel-wybor { gap: 9px; }
.w1-karta .panel-wybor-etykieta, .w1-karta .panel-wybor-netto { font-size: 9px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); align-self: flex-start; margin: 0; }
.w1-karta .panel-wybor-segmenty .panel-wybor-lista, .w1-karta .panel-wybor-pasek .panel-wybor-lista { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.w1-karta .panel-wybor-lista::-webkit-scrollbar { display: none; }
.w1-karta .panel-wybor-segmenty .panel-opcja, .w1-karta .panel-wybor-pasek .panel-opcja { flex: 0 0 auto; min-width: 0; min-height: 0; padding: 8px 9px; border: 1px solid var(--w1-linia); border-radius: 0; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.w1-karta .panel-opcja-nazwa { font-size: 11px; font-weight: 500; line-height: 1.25; white-space: nowrap; color: var(--w1-tekst); }
.w1-karta .panel-opcja-cena { margin-top: 3px; font-size: 11px; color: var(--w1-cichy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-karta .panel-opcja-wybrana, .w1-karta .panel-wybor-pasek .panel-opcja-wybrana { border-color: var(--w1-tekst); background: #fff; box-shadow: inset 0 0 0 1px var(--w1-tekst); }
.w1-karta .panel-opcja-wybrana .panel-opcja-nazwa { color: var(--w1-tekst); }
.w1-karta .panel-opcja-foto { border-radius: 0; border-color: var(--w1-linia); background: var(--w1-krem); }
.w1-karta .panel-wybor-kafelki .panel-opcja-wybrana .panel-opcja-foto { border-color: var(--w1-tekst); border-width: 1px; box-shadow: inset 0 0 0 1px var(--w1-tekst); }
/* stan */
.w1-karta .panel-stan { display: flex; }
.w1-karta .panel-dostepnosc { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stan-kolor, var(--w1-zielen)); }
.w1-karta .panel-stan-kropka { width: 6px; height: 6px; background: currentColor; display: inline-block; }
.w1-karta .termin-wysylki { padding: 0; border: 0; border-radius: 0; background: transparent; margin-top: -10px; }
.w1-karta .termin-wiersz { font-size: 12.5px; color: var(--w1-cichy); }
.w1-karta .termin-glowny { color: var(--w1-tekst); font-weight: 500; }
.w1-karta .termin-kropka { border-radius: 0; }
/* prog E: jedno zdanie, kreska zlota z lewej, jeden wiersz */
.w1-karta .panel-prog { border: 0; border-left: 2px solid var(--w1-zloto); border-radius: 0; background: transparent; padding: 4px 0 4px 12px; font-size: 12.5px; line-height: 1.5; color: var(--w1-cichy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -6px; }
.w1-karta .panel-prog strong { color: var(--w1-zielen); font-weight: 500; font-variant-numeric: tabular-nums; }
/* licznik + przycisk */
.w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn { gap: 10px; }
.w1-karta .panel-zakupu .shop-quantity-box, .w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn .shop-quantity-box { border: 1px solid var(--w1-tekst); border-radius: 0; height: 46px; min-height: 46px; flex-basis: 108px; width: 108px; min-width: 108px; padding: 0; }
.w1-karta .panel-zakupu .shop-quantity-box .action { width: 38px; flex-basis: 38px; height: 44px; color: var(--w1-tekst); font-size: 15px; }
.w1-karta .panel-zakupu .shop-quantity-box .input-qty { font-size: 15px; font-weight: 500; color: var(--w1-tekst); }
.w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn button[type="submit"] { min-height: 46px; border-radius: 0; background: var(--w1-tekst); border-color: var(--w1-tekst); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
/* Hover glownego przycisku zakupu: #34312A, czyli ten sam co w reszcie W1 (`.w1-btn`,
   kafle produktow, glowka karty, konto). Wczesniej bylo #000 przy tle #1A1A18 - roznica
   nie do zauwazenia, zgloszenie wlasciciela 20.09.2026. */
.w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn button[type="submit"]:hover, .w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn button[type="submit"]:focus-visible { background: #34312A; border-color: #34312A; }
/* Widget InPost Pay wnosi wlasny margines 10 px z gory i z dolu, a panel ma juz swoj
   odstep 20 px - dolny trzeba skasowac, inaczej miedzy przyciskiem a kreska "Kup razem"
   robi sie 52 px zamiast 24 (zmierzone przy 1920 px; zgloszenie wlasciciela 21.09.2026:
   "duzy odstep od przycisku inpost pay a kreska od kup razem"). */
.w1-karta .panel-szybkie-platnosci { margin-top: -10px; margin-bottom: -10px; }
.w1-karta .product-teaser { font-size: 13px; line-height: 1.6; color: var(--w1-cichy); }
/* Zajawka z panelu (14.09.2026): edytor wpisuje do tresci `<span style="font-size:16px">`
   i podwojna kursywe `<em><em>`. Styl w linii wygrywal ze strojem W1, wiec blok „Nie jest gorzka"
   byl wiekszy od reszty panelu i pisany kursywa. Wzor: makieta karty 28.08 (`.k-bullety`). */
.w1-karta .product-teaser [style*="font-size"] { font-size: inherit !important; }
.w1-karta .product-teaser em, .w1-karta .product-teaser i { font-style: normal; }
.w1-karta .product-teaser strong, .w1-karta .product-teaser b { color: var(--w1-tekst); font-weight: 500; }
.w1-karta .product-teaser p { margin: 0; }
/* Stary motyw (`style-responsive`: `.text ul > li { left: 40px; position: relative; padding-right: 40px }`
   i `.text ul { list-style: none }`) przesuwal kazdy punkt o 40 px - samo `padding-left` listy nie
   wystarczalo (zmierzone 14.09). Wzor makiety `.s-lista`: zwykly znacznik, wciecie 17 px. */
.w1-karta .product-teaser ul { margin: 8px 0 0; padding-left: 17px; list-style: disc; }
.w1-karta .product-teaser li { margin-top: 5px; left: 0; padding-right: 0; }
.w1-karta .product-teaser li::before { content: none; }
.w1-karta .product-teaser ul + p { margin-top: 12px; }
/* Pas certyfikatow w gorze karty (14.09.2026, makieta: artefakt 37741265). Szablon wstawia sekcje boxText
   w miejsce opisu. Telefon: ten sam pas co nizej na stronie, na cala szerokosc ekranu. */
@media screen and (max-width: 1139px) {
  .w1-karta .w1-certyfikaty-panel { margin: 28px calc(-1 * var(--container-padding)) 0; }
  .shop-product-view .w1-certyfikaty-pas { display: none; }
}
/* Ekrany srednie (od 1140 px, a ponizej progu duzego ekranu): niski pas na cala szerokosc POD gora karty,
   znaki z lewej, tytul i opis z prawej (wybor wlasciciela 14.09, makieta „niski pas"). Wersja w kolumnie
   jest wtedy schowana. Prog duzego ekranu nizej: 1840 px szerokosci I 1040 px wysokosci okna. */
@media screen and (min-width: 1140px) {
  .w1-karta .w1-certyfikaty-panel { display: none; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja { padding-top: 28px; padding-bottom: 28px; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; padding: 0; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-left { gap: 20px; margin: 0; justify-content: flex-start; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-left .box-text,
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .img-wrapper { width: auto; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .img-wrapper img { height: 84px; width: auto; max-width: none; }
  /* 1000 px, nie 88ch: `ch` liczy sie od pisma kolumny, ktore stroj pasa ustawia inaczej niz makieta,
     i na testw1 opis lamal sie na trzy wiersze zamiast dwoch (pas 20 px wyzszy, zmierzone 14.09). */
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right { max-width: 1000px; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right,
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right * { text-align: left !important; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right .box-text-title { margin: 0 0 6px; font-size: 22px; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right,
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .section-inner .content-right p { font-size: 15px; line-height: 1.6; }
  .shop-product-view .w1-certyfikaty-pas section.boxText.w1-sekcja .bg-floating { display: none; }
}
/* Duzy ekran: kompaktowy blok (znaki z lewej, tytul i opis z prawej). Prawa kolumna jest kolumna flex,
   a blok ma `flex: 1 0 auto`, wiec wypelnia miejsce do dolu kolumny. Kolumny w wierszu maja rowna
   wysokosc, wiec gdy galeria z miniaturami jest wyzsza od panelu (1920x1080), blok konczy sie na linii
   miniatur - bez liczb i niezaleznie od wysokosci okna (kadr galerii ma limit 85vh). Gdy panel jest wyzszy
   (laptop 1440), blok stoi po prostu pod „Kup razem". Selektory z .w1-certyfikaty-panel, bo stroj pasa
   ma reguly `section.boxText.w1-sekcja .section-inner ...` z `!important` przy wysrodkowaniu. */
/* Prog DUZEGO ekranu zmierzony 14.09 na karcie 50g: blok miesci sie pod „Kup razem" do linii miniatur od
   1840x1035 (wolne 188 px przy tresci 180), a nie miesci sie przy 1800x1013, 1840x900 ani 1920x950.
   Uwaga: monitor 1920x1080 w przegladarce z paskami daje oknu ok. 950 px wysokosci - dostaje niski pas. */
@media screen and (min-width: 1840px) and (min-height: 1040px) {
  .shop-product-view .w1-certyfikaty-pas { display: none; }
  .w1-karta .product-view-top-content { display: flex; flex-direction: column; }
  .w1-karta .w1-certyfikaty-panel { flex: 1 0 auto; display: flex; margin-top: 18px; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja { flex: 1; display: flex; align-items: center; padding: 18px 24px; margin: 0; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .container { width: 100%; max-width: none; padding: 0; margin: 0; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 0; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-left { display: flex; gap: 14px; align-items: center; margin: 0; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-left .box-text,
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .img-wrapper { width: auto; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .img-wrapper img { height: 92px; width: auto; max-width: none; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right { max-width: none; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right,
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right * { text-align: left !important; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right .box-text-title { margin: 0 0 6px; font-size: 21px; font-weight: 400; }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right,
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .section-inner .content-right p { font-size: 14.5px; line-height: 1.55; color: var(--w1-cichy); }
  .w1-karta .w1-certyfikaty-panel section.boxText.w1-sekcja .bg-floating { display: none; }
}
/* galeria: kropki kwadratowe w plaskim pasku .62, bez rozmycia */
.w1-karta .product-view-slider .product-view-slider-kropki.swiper-pagination-horizontal,
.w1-karta .product-view-slider .product-view-slider-kropki.swiper-pagination-bullets { border-radius: 0; background: rgba(22, 24, 15, .62); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 7px 12px; gap: 8px; bottom: 14px; }
.w1-karta .product-view-slider .product-view-slider-kropki .swiper-pagination-bullet { border-radius: 0; background: rgba(255, 255, 255, .48); }
.w1-karta .product-view-slider .product-view-slider-kropki .swiper-pagination-bullet-active { background: #fff; transform: none; }
/* 14.09.2026: slajd z filmem - trojkat odtwarzania zamiast kwadratu (klasa z renderBullet w photos.phtml).
   Ten sam kolor co kropki (nieaktywny .48, aktywny bialy), tylko ksztalt; o wlos wiekszy, bo trojkat
   o polu kwadratu 6 px wyglada na mniejszy od kropek obok. */
.w1-karta .product-view-slider .product-view-slider-kropki .swiper-pagination-bullet.kropka-film { width: 8px; height: 9px; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.w1-karta .product-view-slide { background: var(--w1-krem); }
.w1-karta .product-view-slider-arrows .btn-arrow { border-radius: 0; }
@media screen and (max-width: 1139px) {
  .w1-karta .product-view-nav-slider { display: none; }
}
@media screen and (min-width: 1140px) {
  .w1-karta .product-view-title { font-size: 34px; }
  .w1-karta .product-podtytul { font-size: 15px; }
  .w1-karta .panel-cena .price { font-size: 34px; }
  .w1-karta .panel-prog { font-size: 13.5px; }
  .w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn button[type="submit"] { min-height: 48px; }
  .w1-karta .panel-zakupu .shop-quantity-box, .w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn .shop-quantity-box { height: 48px; min-height: 48px; }
  /* 4 miniatury pod kadrem (decyzja 28.08): zwykla siatka, nie Swiper */
  .w1-karta .product-view-nav-slider { display: block; max-width: 95%; margin: 8px auto 0; overflow: hidden; }
  .w1-karta .product-view-nav-slider .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: none !important; }
  /* 29.09.2026: stary stroj (style.css) dawal slajdowi `padding: 0 5px`, a wnetrzu ramke 1 px -
     na kremowym tle wychodzily z tego kremowe paski po bokach i druga ramka. Zerujemy oba;
     podswietlenie po najechaniu przejmuje ramka slajdu. */
  .w1-karta .product-view-nav-slider .product-view-nav-slide { width: auto; aspect-ratio: 1; overflow: hidden; background: var(--w1-krem); cursor: pointer; border: 1px solid transparent; padding: 0; }
  .w1-karta .product-view-nav-slider .product-view-nav-slide:nth-child(n + 5) { display: none; }
  .w1-karta .product-view-nav-slider .product-view-nav-slide:hover { border-color: var(--w1-cichy); }
  .w1-karta .product-view-nav-slider .product-view-nav-slide.is-active { border-color: var(--w1-tekst); }
  .w1-karta .product-view-nav-slider .product-view-nav-slide-inner, .w1-karta .product-view-nav-slider .product-view-nav-slide-inner img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
  .w1-karta .product-view-nav-slider .product-view-nav-slide-inner { border: 0; }
}
/* pasek przyklejony (telefon): jeden wiersz, kreska u gory zamiast cienia */
.w1-karta .product-sticky-bar { box-shadow: none; border-top: 1px solid var(--w1-tekst); padding: 8px var(--container-padding) calc(8px + env(safe-area-inset-bottom)); gap: 12px; font-family: "Red Hat Display", system-ui, sans-serif; }
.w1-karta .product-sticky-bar .product-sticky-bar-price .price { font-size: 17px; font-weight: 500; color: var(--w1-zielen); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-karta .product-sticky-bar .product-sticky-bar-price .price-old { font-size: 12px; color: var(--w1-cichy); }
.w1-karta .product-sticky-bar .product-sticky-bar-btn { flex: 1; min-height: 46px; border-radius: 0; background: var(--w1-tekst); border-color: var(--w1-tekst); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }

/* ==== W1 paczka 3b: sekcje (28.08.2026) ====
   Wzor: makiety/2026-08-28-karta-produktu-w1 (szkielet.tpl.html, styl-sekcji.css) i rejestr
   2026-08-25-wybory-sekcje-w1.md. Widoki sekcji sa wspolne dla calego sklepu - te reguly
   obowiazuja wszedzie, gdzie <section> ma klase w1-sekcja. */
.w1-sekcja { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); padding: 28px 0; margin: 0; border-top: 1px solid var(--w1-linia); background: #fff; position: relative; }
.w1-sekcja--krem { background: var(--w1-krem) !important; border-top: 0; }
.w1-sekcja--krem + .w1-sekcja { border-top: 0; }
.w1-sekcja > .container { max-width: 1920px; }
.w1-sekcja * { border-radius: 0 !important; }
/* dekoracje starego motywu: listki, tla, kleksy */
.w1-sekcja .product-view-section-deco, .w1-sekcja .text-image-bg, .w1-sekcja .text-collection-bg,
.w1-sekcja .video-deco-1, .w1-sekcja .video-deco-2, .w1-sekcja .bg-floating { display: none !important; }
/* glowka: nadtytul + tytul | opis (1 : 1,7) */
.w1-sekcja .section-heading, .w1-sekcja .text-collection-glowa { display: block; margin-bottom: 18px; }
.w1-sekcja .section-heading::before, .w1-sekcja .text-collection-glowa::before { content: attr(data-nad); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-sekcja .section-heading[data-nad=""]::before, .w1-sekcja .text-collection-glowa[data-nad=""]::before { display: none; }
.w1-sekcja .section-title { margin: 0; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; max-width: none; width: auto; color: var(--w1-tekst); }
.w1-sekcja .section-heading > .text, .w1-sekcja .text-collection-glowa > .text { margin: 8px 0 0; font-size: 13px; line-height: 1.68; color: var(--w1-cichy); max-width: 82ch; }
.w1-sekcja .section-heading > .text p, .w1-sekcja .text-collection-glowa > .text p { margin: 0 0 8px; }
.w1-sekcja .section-heading-right { margin-top: 12px; gap: 12px; }
.w1-sekcja .section-heading-right .btn { display: none; }
.w1-sekcja .arrows { display: none; }
.w1-sekcja .btn-arrow { border-radius: 0 !important; width: 42px; height: 42px; border: 1px solid var(--w1-linia); background: #fff; color: var(--w1-tekst); }
/* tekst biezacy w sekcjach */
.w1-sekcja .text, .w1-sekcja .text p, .w1-sekcja .text li { font-size: 13px; line-height: 1.68; color: var(--w1-cichy); }
.w1-sekcja .text b, .w1-sekcja .text strong { color: var(--w1-tekst); font-weight: 500; }
.w1-sekcja .text h3, .w1-sekcja .text h4 { margin: 20px 0 0; font-size: 15px; font-weight: 400; color: var(--w1-tekst); }
.w1-sekcja .text ul { margin: 9px 0 0; padding-left: 17px; }
.w1-sekcja .text li { margin-top: 5px; }
/* pas "wiecej" i odnosnik W1 */
.w1-stopka { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--w1-linia); text-align: right; }
.w1-wiecej { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); text-decoration: none; border-bottom: 1px solid var(--w1-zloto); padding-bottom: 4px; }
.w1-wiecej:hover, .w1-wiecej:focus-visible { color: var(--w1-tekst); border-color: var(--w1-tekst); text-decoration: none; }
/* pasek zakladek sekcji (karta produktu) */
.w1-karta ~ .product-view-sections-wrapper .sections-tabs-wrapper, .product-view-sections-wrapper .sections-tabs-wrapper { margin: 0; min-height: 0; }
.product-view-sections-wrapper .sections-tabs-inner-wrapper { background: #fff; border-top: 1px solid var(--w1-linia); border-bottom: 1px solid var(--w1-linia); }
.product-view-sections-wrapper .sections-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.product-view-sections-wrapper .sections-tabs::-webkit-scrollbar { display: none; }
.product-view-sections-wrapper .btn-section-tab { width: auto; flex: 0 0 auto; padding: 15px 15px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-cichy); background: transparent; border-radius: 0; white-space: nowrap; font-family: "Red Hat Display", system-ui, sans-serif; }
.product-view-sections-wrapper .btn-section-tab.active, .product-view-sections-wrapper .btn-section-tab:hover { color: var(--w1-tekst); background: transparent; box-shadow: inset 0 -2px 0 var(--w1-zielen); }
.product-view-sections-wrapper .sections-list > .w1-sekcja:first-child { border-top: 0; }
/* 04 boxText: pas na kremie, tekst na srodku, znaki pod tekstem obok siebie */
.w1-sekcja.boxText .section-inner { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 24px; padding: 4px 0; }
.w1-sekcja.boxText .content-left { display: flex; justify-content: center; align-items: center; gap: 30px; }
.w1-sekcja.boxText .box-text { width: 86px; }
.w1-sekcja.boxText .box-text img { width: 100%; height: auto; display: block; }
.w1-sekcja.boxText .content-right { max-width: 68ch; }
.w1-sekcja.boxText .box-text-title { margin: 0 0 10px; font-size: 22px; font-weight: 300; line-height: 1.2; }
/* 02 textImage: trzy warianty; telefon = tekst pierwszy (przeplatanie), instrukcja = rysunek pierwszy */
.w1-sekcja.text-image-section .text-image-section-inner { display: flex; flex-direction: column; gap: 18px; }
.w1-sekcja.text-image-section .text-image-section-image { order: 2; margin: 0; width: auto; }
.w1-sekcja.w1-ti--instrukcja .text-image-section-image { order: -1; }
.w1-sekcja.text-image-section .text-image-section-image-inner { position: static !important; transform: none !important; background: var(--w1-krem); }
.w1-sekcja--krem.text-image-section .text-image-section-image-inner { background: transparent; }
.w1-sekcja.text-image-section .text-image-section-image img { width: 100%; height: auto; display: block; }
.w1-sekcja.text-image-section .text-image-section-text { width: auto; padding: 0; }
.w1-sekcja.text-image-section .section-title { margin-bottom: 10px; }
.w1-sekcja.w1-ti--blok .text-image-section-image img, .w1-sekcja.w1-ti--instrukcja .text-image-section-image img { max-width: 100%; }
/* Opis z tabelka parametrow (01.10.2026, decyzja wlasciciela): ponizej 1140 px kolejnosc naglowek, tabela,
   zdjecie, tekst. Blok tekstu jest rozpuszczony (display: contents), zeby jego dzieci staly sie elementami
   kolumny flex obok zdjecia - inaczej zdjecia nie da sie wstawic miedzy tabele a tekst. */
@media screen and (max-width: 1139.98px) {
  .w1-sekcja.text-image-section:has(.ti-parametry) .text-image-section-text { display: contents; }
  .w1-sekcja.text-image-section:has(.ti-parametry) .section-title { order: 1; margin-bottom: 0; align-self: stretch; }
  .w1-sekcja.text-image-section:has(.ti-parametry) .ti-parametry { order: 2; margin: 0; }
  .w1-sekcja.text-image-section:has(.ti-parametry) .text-image-section-image { order: 3; }
  .w1-sekcja.text-image-section:has(.ti-parametry) .text-image-section-text > .text { order: 4; margin-top: 0; }
}
/* 14 composition: siatka kafli, numer kroku per uzycie */
.w1-sekcja.composition-section .composition-section-inner { display: grid; grid-template-columns: 1fr; gap: 16px; }
.w1-sekcja.composition-section .composition-item { width: auto; padding: 0; text-align: left; }
.w1-sekcja.composition-section .composition-item-image { position: relative; aspect-ratio: 410 / 210; overflow: hidden; background: var(--w1-krem); margin: 0; }
.w1-sekcja.composition-section .composition-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.w1-sekcja.composition-section .komp-nr { position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--w1-zielen); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.w1-sekcja.composition-section .composition-item-name { margin: 14px 0 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.w1-sekcja.composition-section .composition-item .text { margin-top: 7px; }
/* 03 textCollection: porownanie w dwoch kolumnach, zdjecie jako ilustracja */
.w1-sekcja.text-collection-section .text-collection-inner { display: flex; flex-direction: column; gap: 18px; }
.w1-sekcja.text-collection-section .text-collection-content { width: auto; }
.w1-sekcja.text-collection-section .text-collection-image { order: -1; width: auto; margin: 0; }
.w1-sekcja.text-collection-section .text-collection-image .text-image-section-image-inner { position: static !important; transform: none !important; }
.w1-sekcja.text-collection-section .text-collection-image img { width: 100%; height: auto; display: block; }
.w1-sekcja.text-collection-section .about-text-item { padding: 18px 18px 20px; margin: 0; }
.w1-sekcja.text-collection-section .about-text-item + .about-text-item { margin-top: 14px; }
.w1-sekcja.uklad-porownanie .about-text-item:first-child { background: var(--w1-krem); border-top: 2px solid var(--w1-zloto); }
.w1-sekcja.uklad-porownanie .about-text-item:nth-child(2) { background: #F1F0EC; border-top: 2px solid #D7D5CE; }
.w1-sekcja.uklad-porownanie .about-text-item:nth-child(2) .text, .w1-sekcja.uklad-porownanie .about-text-item:nth-child(2) .text b { color: var(--w1-cichy); }
.w1-sekcja.uklad-porownanie .icon-wrapper { display: none; }
.w1-sekcja.text-collection-section .about-text-item-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.w1-sekcja.text-collection-section .about-text-item-name { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.w1-sekcja.uklad-lista .icon-wrapper { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--w1-zloto); width: auto; height: auto; background: none; }
.w1-sekcja.uklad-lista .about-text-item { padding: 14px 0; border-top: 1px solid var(--w1-linia); }
.w1-sekcja.uklad-lista .about-text-item:first-of-type { border-top: 0; }
/* 10 instagram: kafle W1, pas na telefonie */
.w1-sekcja.ig-section .ig-list { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 6px; margin: 0; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.w1-sekcja.ig-section .ig-list::-webkit-scrollbar { display: none; }
.w1-sekcja.ig-section .ig-item { flex: 0 0 76%; scroll-snap-align: start; width: auto; }
.w1-sekcja.ig-section .ig-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--w1-linia); text-decoration: none; color: inherit; box-shadow: none; }
.w1-sekcja.ig-section .ig-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--w1-krem); }
.w1-sekcja.ig-section .ig-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-sekcja.ig-section .ig-badge { position: absolute; top: 0; right: 0; left: auto; bottom: auto; width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 8px; background: var(--w1-tekst); color: #fff; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.w1-sekcja.ig-section .ig-badge svg { width: 12px; height: 12px; }
.w1-sekcja.ig-section .ig-badge-video::after { content: "Wideo"; }
.w1-sekcja.ig-section .ig-badge-album::after { content: "Album"; }
.w1-sekcja.ig-section .ig-stats { position: absolute; left: 0; bottom: 0; right: auto; top: auto; transform: none; display: flex; gap: 14px; background: var(--w1-krem); padding: 6px 11px; box-shadow: none; }
.w1-sekcja.ig-section .ig-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--w1-tekst); font-variant-numeric: tabular-nums; }
.w1-sekcja.ig-section .ig-stat-icon { width: 13px; height: 13px; color: var(--w1-zielen); }
.w1-sekcja.ig-section .ig-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.w1-sekcja.ig-section .ig-caption { font-size: 12.5px; line-height: 1.45; color: var(--w1-tekst); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.w1-sekcja.ig-section .ig-date { margin-top: auto; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-zloto); }
/* 11 video: kadr przez cala szerokosc, przycisk na kremie */
.w1-sekcja.video-section .relative > .container { max-width: none; padding: 0; }
.w1-sekcja.video-section .video-section-inner { display: block; position: relative; aspect-ratio: 1640 / 735; overflow: hidden; background: var(--w1-krem); max-width: none; margin: 0; }
.w1-sekcja.video-section .video-section-inner picture, .w1-sekcja.video-section .video-section-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-sekcja.video-section .video-section-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 24, 15, 0) 45%, rgba(22, 24, 15, .42) 100%); pointer-events: none; }
.w1-sekcja.video-section .video-play-btn { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; background: var(--w1-krem); color: var(--w1-tekst); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: none; }
.w1-sekcja.video-section .video-play-btn svg { width: 13px; height: 13px; color: var(--w1-zielen); }
/* 12 faq: akordeon z plusem, odpowiedzi w HTML */
.w1-sekcja.faq-section .faq-list { border-top: 1px solid var(--w1-linia); }
.w1-sekcja.faq-section .faq-item { border-bottom: 1px solid var(--w1-linia); }
.w1-sekcja.faq-section .faq-item::before { display: none; }
.w1-sekcja.faq-section .faq-item-heading { min-height: 44px; padding: 14px 0; gap: 14px; }
.w1-sekcja.faq-section .faq-item-name { font-size: 14px; font-weight: 400; color: var(--w1-tekst); }
.w1-sekcja.faq-section .faq-item.active .faq-item-heading { color: var(--w1-tekst); }
.w1-sekcja.faq-section .faq-item.active .faq-item-name { font-weight: 500; }
.w1-sekcja.faq-section .faq-item-heading .icon { display: none; }
.w1-sekcja.faq-section .faq-item-heading::after { content: "+"; color: var(--w1-zloto); font-size: 17px; font-weight: 300; flex: 0 0 auto; }
.w1-sekcja.faq-section .faq-item.active .faq-item-heading::after { content: "−"; }
.w1-sekcja.faq-section .faq-item-content .text { padding: 0 0 16px; font-size: 12.5px; max-width: 72ch; }
/* 13 opinie: siatka bez karuzeli, histogram tylko na duzym ekranie */
.w1-sekcja.comment-section .comment-section-inner { display: flex; flex-direction: column; gap: 14px; }
.w1-sekcja.comment-section .comment-section-stats { width: auto; padding: 12px 0 14px; border-top: 1px solid var(--w1-linia); border-bottom: 1px solid var(--w1-linia); }
.w1-sekcja.comment-section .comment-stats-inner { display: none; }
.w1-sekcja.comment-section .comment-section-comments { width: auto; }
.w1-sekcja.comment-section .opinion-list { overflow: visible; }
.w1-sekcja.comment-section .opinion-list .swiper-wrapper { display: grid; grid-template-columns: 1fr; gap: 12px; transform: none !important; }
.w1-sekcja.comment-section .opinion-chunk-item { display: contents; }
/* Stary stroj karuzeli rysowal na chunkach pionowy separator (`::before`,
   position: absolute, 1px, 10% czerni). W W1 chunki sa splaszczone przez
   `display: contents`, wiec pseudoelementy WSZYSTKICH chunkow pozycjonuja sie
   wzgledem tego samego przodka i naklada sie ich kilka w jednym miejscu -
   przy szesciu chunkach ~40% czerni. Efekt: ciemna pionowa kreska dokladnie
   pod lewa ramka kafli, widoczna w przerwach miedzy rzedami (zgloszenie
   wlasciciela 03.09, zlokalizowane skanem pikseli - zaden pomiar ramek jej
   nie widzial, bo to pseudoelement elementu bez wlasnego pudelka). */
.w1-sekcja.comment-section .opinion-chunk-item::before { display: none; }
.w1-sekcja.comment-section .opinion-item { display: flex; flex-direction: column; border: 1px solid var(--w1-linia); padding: 16px 17px 15px; background: #fff; margin: 0; width: auto; }
/* chunki Swipera po 2 opinie: na telefonie chowamy druga opinie drugiego chunka (czwarta) */
.w1-sekcja.comment-section .opinion-chunk-item:nth-child(2) .opinion-item:nth-child(2), .w1-sekcja.comment-section .opinion-chunk-item:nth-child(n + 3) { display: none; }
.w1-sekcja.comment-section .opinion-header { margin: 0; }
.w1-sekcja.comment-section .opinion-heading-inner { display: flex; flex-direction: column; gap: 6px; }
.w1-sekcja.comment-section .opinion-name { margin: 0; font-size: 13px; font-weight: 500; order: 3; padding-top: 12px; border-top: 1px solid var(--w1-linia); }
.w1-sekcja.comment-section .opinion-heading-inner-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; order: 1; }
.w1-sekcja.comment-section .opinion-heading-stars svg { color: var(--w1-zloto); }
.w1-sekcja.comment-section .opinion-date { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); white-space: nowrap; }
.w1-sekcja.comment-section .opinion-text { order: 2; margin: 12px 0 16px; flex: 1; }
.w1-sekcja.comment-section .opinion-text .text { font-size: 13px; line-height: 1.6; color: var(--w1-tekst); height: auto; }
.w1-sekcja.comment-section .opinion-item > .text { order: 4; font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-zielen); margin-top: 8px; }
.w1-sekcja.comment-section .row-flex-center { display: none; }
.w1-sekcja.comment-section .btn-rate { display: inline-flex; margin-top: 8px; border: 1px solid var(--w1-tekst); background: transparent; color: var(--w1-tekst); min-height: 44px; font-size: 10px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; padding: 10px 18px; }
/* 09 blog: 3 wpisy, data nad tytulem */
.news-item-date { display: none; }
.w1-sekcja.news-section .news-slider-list { overflow: visible; }
.w1-sekcja.news-section .news-slider-list .swiper-wrapper { display: grid; grid-template-columns: 1fr; gap: 14px; transform: none !important; }
.w1-sekcja.news-section .news-item { display: flex; gap: 13px; align-items: stretch; width: auto !important; margin: 0 !important; padding: 0; text-decoration: none; color: inherit; }
.w1-sekcja.news-section .news-item-image { flex: 0 0 88px; width: 88px; overflow: hidden; background: var(--w1-krem); }
.w1-sekcja.news-section .news-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-sekcja.news-section .news-item-date { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-sekcja.news-section .news-item-name { font-size: 13px; font-weight: 400; line-height: 1.35; margin-top: 3px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* 05 tiles: kafle podstron z nakladka */
.w1-sekcja.tiles-section .news-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.w1-sekcja.tiles-section .news-item { position: relative; display: block; overflow: hidden; width: auto; margin: 0; padding: 0; color: inherit; text-decoration: none; }
.w1-sekcja.tiles-section .news-item-image { display: block; aspect-ratio: 620 / 444; overflow: hidden; background: var(--w1-krem); }
.w1-sekcja.tiles-section .news-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-sekcja.tiles-section .news-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 24, .02) 45%, rgba(26, 26, 24, .52)); pointer-events: none; }
.w1-sekcja.tiles-section .news-item-content { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; padding: 0; background: none; color: #fff; }
.w1-sekcja.tiles-section .news-item-content .text, .w1-sekcja.tiles-section .news-item-content p { color: #fff; font-size: 15px; font-weight: 400; margin: 0; white-space: nowrap; }
.w1-sekcja.tiles-section .news-item-content .btn { display: none; }
/* 08 podobne produkty: kafle z P2; siatka na duzym ekranie, pas na telefonie */
.w1-sekcja.discount-group-section .product-list-slider { overflow: visible; }
.w1-sekcja.discount-group-section .swiper-wrapper .shop-product-box { width: 78%; }
@media screen and (min-width: 1140px) {
  .w1-sekcja { padding: 48px 0; }
  .w1-sekcja .section-heading, .w1-sekcja .text-collection-glowa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 0 56px; align-items: end; margin-bottom: 26px; }
  .w1-sekcja .section-heading::before, .w1-sekcja .text-collection-glowa::before { grid-column: 1; }
  .w1-sekcja .section-heading .section-title, .w1-sekcja .text-collection-glowa .section-title { grid-column: 1; font-size: 30px; }
  .w1-sekcja .section-heading > .text, .w1-sekcja .text-collection-glowa > .text { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; max-width: 54ch; font-size: 14px; }
  .w1-sekcja .section-heading-right { grid-column: 1 / -1; margin-top: 0; }
  .w1-sekcja .text, .w1-sekcja .text p, .w1-sekcja .text li { font-size: 14px; }
  .w1-sekcja .text { max-width: 72ch; }
  .w1-sekcja.boxText .section-inner { padding: 12px 0; }
  .w1-sekcja.boxText .content-left { gap: 54px; }
  .w1-sekcja.boxText .box-text { width: 112px; }
  .w1-sekcja.text-image-section .text-image-section-inner { display: grid; align-items: center; gap: 0 44px; }
  .w1-sekcja.w1-ti--opis .text-image-section-inner { grid-template-columns: 40% 1fr; }
  .w1-sekcja.w1-ti--blok .text-image-section-inner { grid-template-columns: 1fr 640px; align-items: center; }
  .w1-sekcja.w1-ti--instrukcja .text-image-section-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  /* Wszystkie trzy warianty maja tekst na srodku wysokosci. „Opis" (zdjecie z lewej) trzymal
     go przy gornej krawedzi, wiec na jednej karcie sasiednie sekcje roznily sie tylko strona
     zdjecia (20.09.2026 wyrownane na stronach tresciowych, 29.09.2026 wszedzie - decyzja
     wlasciciela). */
  .w1-sekcja.text-image-section .text-image-section-image { order: 0; }
  .w1-sekcja.text-image-section .text-image-section-image.left { order: -1; }
  .w1-sekcja.text-image-section .text-image-section-image.right { order: 2; }
  .w1-sekcja.text-image-section .text-image-section-text { padding: 4px 0 0; }
  .w1-sekcja.composition-section .composition-section-inner { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
  .w1-sekcja.composition-section .composition-item-name { font-size: 18px; }
  .w1-sekcja.text-collection-section .text-collection-inner { display: grid; grid-template-columns: 1fr 38%; gap: 0 44px; align-items: start; }
  .w1-sekcja.text-collection-section .text-collection-image { order: 2; }
  .w1-sekcja.uklad-porownanie .text-collection-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
  .w1-sekcja.uklad-porownanie .about-text-item + .about-text-item { margin-top: 0; }
  .w1-sekcja.ig-section .ig-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; overflow: visible; padding: 0; }
  .w1-sekcja.ig-section .ig-item { flex: none; }
  .w1-sekcja.video-section .video-play-btn { padding: 14px 22px; font-size: 11px; gap: 11px; }
  .w1-sekcja.video-section .video-play-btn svg { width: 16px; height: 16px; }
  .w1-sekcja.faq-section .faq-item-heading { padding: 16px 0; }
  .w1-sekcja.faq-section .faq-item-name { font-size: 15.5px; }
  .w1-sekcja.faq-section .faq-item-content .text { font-size: 13.5px; }
  /* FAQ w DWOCH kolumnach (makieta `.faq-dwie`). Pozycje ida wierszami: pytanie 1 i 2
     w pierwszym wierszu, 3 i 4 w drugim - czyta sie od lewej do prawej, inaczej niz
     w makiecie (tam podzial kolumnowy jest artefaktem statycznego szkicu).
     `align-items: start`, zeby rozwiniete pytanie nie rozciagalo sasiada. */
  /* 10.09: dwie NIEZALEZNE kolumny (.faq-kolumna z partialu) - rozwiniecie po lewej nie rusza prawej */
  .w1-sekcja.faq-section .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; align-items: start; }
  .w1-sekcja.faq-section .faq-kolumna { min-width: 0; }
  /* Pas kategorii „Dla kogo": piec kolumn, linia u gory kazdej. */
  .w1-sekcja.uklad-pas .text-collection-content { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; margin-top: 36px; }
  .w1-sekcja.uklad-pas .about-text-item { padding: 18px 0 0; border-top: 1px solid var(--w1-linia); }
  /* Selektor o klase dluzszy niz regula bazowa zerujaca ta linie: blok desktopowy
     stoi WCZESNIEJ w pliku, wiec przy rownej specyficznosci przegrywalby kolejnoscia
     i pierwsza kolumna zostawala bez linii (widoczne na zrzucie). */
  .w1-sekcja.uklad-pas .text-collection-content .about-text-item:first-child { border-top: 1px solid var(--w1-linia); }
  /* Zdjecie sekcji szkolenia: BEZ wymuszonej proporcji - zachowuje wlasna.
     04.09.2026 szablon bierze tu wariant `TextImage/pelny` (MODE_FIT), wiec plik ma
     proporcje ORYGINALU: 1080x1350, czyli pion 4:5, zgodnie z makieta. Wczesniej szedl
     `min` (CROP_FILL 815x300) i z calego zdjecia zostawal poziomy pasek.

     WYSROWNANIE: tekst na SRODKU wysokosci sekcji (decyzja wlasciciela 05.09.2026:
     „tekst na srodek wg dlugosci sekcji"). 04.09 mialem tu chwilowo `start`, bo przy
     wysokim kadrze nadtytul stal 167 px nizej niz gorna krawedz zdjecia - ale kolumna
     tekstu jest o polowe krotsza od zdjecia, wiec przy gornym wyrownaniu pod tekstem
     zostawala pusta polowa. Srodek wyrownuje obie kolumny wzgledem sekcji.
     Wartosc `center` daje juz `.w1-sekcja.w1-ti--instrukcja .text-image-section-inner`,
     wiec wlasnej reguly tu NIE MA - jest tylko ten komentarz, zeby nikt jej nie
     dopisywal drugi raz. */
  .w1-ti--strona .text-image-section-image img { width: 100%; height: auto; }
  .w1-sekcja.comment-section .comment-section-inner { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 44px; align-items: start; }
  .w1-sekcja.comment-section .comment-section-stats { border: 0; padding: 0; }
  .w1-sekcja.comment-section .comment-stats-inner { display: grid; gap: 8px; margin-top: 20px; }
  .w1-sekcja.comment-section .comment-stats-item { display: grid; grid-template-columns: auto 1fr 36px; align-items: center; gap: 10px; }
  .w1-sekcja.comment-section .comment-stats-bar { height: 4px; background: var(--w1-linia); }
  .w1-sekcja.comment-section .comment-stats-bar-inner { height: 100%; background: var(--w1-zielen); }
  .w1-sekcja.comment-section .comment-stats-item .stars-row { width: 11px; height: 11px; color: var(--w1-zloto); }
  .w1-sekcja.comment-section .stats-item-nr, .w1-sekcja.comment-section .comment-stats-item .caption { font-size: 12px; color: var(--w1-cichy); }
  .w1-sekcja.comment-section .opinion-list .swiper-wrapper { grid-template-columns: 1fr 1fr; gap: 20px; }
  .w1-sekcja.comment-section .opinion-chunk-item:nth-child(2) .opinion-item:nth-child(2) { display: flex; }
  .w1-sekcja.news-section .news-slider-list .swiper-wrapper { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .w1-sekcja.news-section .news-item { flex-direction: column; }
  .w1-sekcja.news-section .news-item-image { width: 100%; flex: none; aspect-ratio: 620 / 326; }
  .w1-sekcja.news-section .news-item-name { font-size: 15px; }
  .w1-sekcja.tiles-section .news-list { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .w1-sekcja.tiles-section .news-item-content { left: 26px; right: 26px; bottom: 22px; }
  .w1-sekcja.tiles-section .news-item-content .text, .w1-sekcja.tiles-section .news-item-content p { font-size: 21px; }
  .w1-sekcja.discount-group-section .swiper-wrapper .shop-product-box { width: 25%; }
}

/* ==== W1 paczki 3c + 4a: nowe typy comparison, videoGuide, pageTiles (28.08.2026) ==== */
/* comparison (02b): pozycje w kolumnach + tabela; liczba kolumn z --por-kolumny */
.w1-sekcja.comparison-section .por { display: grid; grid-template-columns: 1fr; gap: 0; }
.w1-sekcja.comparison-section .por-poz { padding: 22px 0 24px; border-top: 1px solid var(--w1-linia); }
.w1-sekcja.comparison-section .por-kadr { background: var(--w1-krem); overflow: hidden; }
.w1-sekcja.comparison-section .por-kadr img { width: 100%; height: auto; display: block; }
.w1-sekcja.comparison-section .por-naz { margin: 12px 0 0; font-size: 15px; font-weight: 400; }
.w1-sekcja.comparison-section .por-poz .text { margin-top: 8px; }
.w1-sekcja.comparison-section .por-tab { margin-top: 18px; border-top: 1px solid var(--w1-linia); }
.w1-sekcja.comparison-section .por-tw { display: grid; grid-template-columns: 92px repeat(var(--por-kolumny, 3), 1fr); border-bottom: 1px solid var(--w1-linia); }
.w1-sekcja.comparison-section .por-et { padding: 10px; font-size: 8.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-zloto); background: var(--w1-krem); display: flex; align-items: center; }
.w1-sekcja.comparison-section .por-v { padding: 10px 6px; font-size: 11px; line-height: 1.55; text-align: center; display: flex; align-items: center; justify-content: center; color: var(--w1-cichy); }
.w1-sekcja.comparison-section .por-tw--glowa .por-v { font-size: 11.5px; font-weight: 500; color: var(--w1-tekst); }
/* skala natezenia listkami - ten sam znak, co tabela na opakowaniu (19.09.2026) */
.w1-sekcja.comparison-section .por-skala { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.w1-sekcja.comparison-section .por-listki { display: inline-flex; gap: 2px; }
.w1-sekcja.comparison-section .por-listek { width: 11px; height: 11px; flex: 0 0 auto; }
.w1-sekcja.comparison-section .por-listek { --listek-wypelnienie: none; --listek-obrys: var(--w1-linia); --listek-zylka: var(--w1-linia); }
.w1-sekcja.comparison-section .por-listek--pelny { --listek-wypelnienie: var(--w1-zloto); --listek-obrys: var(--w1-zloto); --listek-zylka: #fff; }
/* Telefon i tablet: najpierw tabela, potem karty ze zdjeciem i opisem (decyzja wlasciciela
   19.09.2026). Powyzej 1140 px pozycje stoja w kolumnach i kolejnosc zostaje bez zmian. */
@media screen and (max-width: 1139px) {
  .w1-sekcja.comparison-section > .container { display: flex; flex-direction: column; }
  .w1-sekcja.comparison-section > .container > .section-heading { order: 1; }
  .w1-sekcja.comparison-section > .container > .por-tab { order: 2; margin-top: 0; }
  .w1-sekcja.comparison-section > .container > .por { order: 3; margin-top: 4px; }
  /* tabela stoi teraz nad kartami, wiec to pierwsza karta potrzebuje gornej linii,
     a nie tabela - inaczej dwie kreski wypadaja jedna na drugiej */
  .w1-sekcja.comparison-section .por-poz:first-child { border-top: 0; }
}
/* videoGuide: kadr filmu przez cala szerokosc, porady 50/50. Glowka nad filmem to zwykla
   glowka W1, identyczna jak w sekcji „Film" (decyzja wlasciciela 18.09.2026; wczesniej byl
   osobny wariant wysrodkowany, usuniety razem z jego regulami). */
.w1-sekcja.videoGuide-section .vg-kadr { position: relative; display: block; aspect-ratio: 1640 / 735; overflow: hidden; background: var(--w1-krem); }
.w1-sekcja.videoGuide-section .vg-kadr picture, .w1-sekcja.videoGuide-section .vg-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-sekcja.videoGuide-section .vg-kadr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 24, 15, 0) 45%, rgba(22, 24, 15, .42) 100%); pointer-events: none; }
.w1-sekcja.videoGuide-section .video-play-btn { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; background: var(--w1-krem); color: var(--w1-tekst); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.w1-sekcja.videoGuide-section .video-play-btn svg { width: 13px; height: 13px; color: var(--w1-zielen); }
.w1-sekcja.videoGuide-section .vg-porady { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; }
.w1-sekcja.videoGuide-section .vg-rysunek { order: -1; }
.w1-sekcja.videoGuide-section .vg-rysunek img { width: 100%; height: auto; display: block; }
.w1-sekcja.videoGuide-section .vg-tekst .section-title { margin-bottom: 10px; }
/* pageTiles (05b) */
.kafle-w1 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.kafle-w1 + .kafle-w1 { margin-top: 12px; }
.kafel-w1 { position: relative; display: block; overflow: hidden; text-decoration: none; color: inherit; }
.kafel-w1:hover, .kafel-w1:focus-visible { text-decoration: none; color: inherit; }
.kafel-kadr { display: block; aspect-ratio: 620 / 444; overflow: hidden; background: var(--w1-krem); }
.kafle-w1.rzad2 .kafel-kadr { aspect-ratio: 620 / 200; }
.kafel-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-w1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 24, .02) 45%, rgba(26, 26, 24, .52)); pointer-events: none; }
.kafle-w1.rzad2 .kafel-w1::after { background: linear-gradient(180deg, rgba(26, 26, 24, .04) 22%, rgba(26, 26, 24, .68)); }
.kafel-tresc { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: block; }
.kafle-w1.rzad2 .kafel-tresc { bottom: 11px; }
.kafel-nad { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #E5CD9A; white-space: nowrap; }
.kafel-tyt { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: #fff; white-space: nowrap; }
@media screen and (min-width: 1140px) {
  .w1-sekcja.comparison-section .por { grid-template-columns: repeat(var(--por-kolumny, 3), 1fr); gap: 0 32px; }
  .w1-sekcja.comparison-section .por-poz { border-top: 0; padding: 18px 0 0; }
  .w1-sekcja.comparison-section .por-tw { grid-template-columns: 150px repeat(var(--por-kolumny, 3), 1fr); }
  .w1-sekcja.comparison-section .por-et { padding: 13px 16px; font-size: 9.5px; letter-spacing: .16em; }
  .w1-sekcja.comparison-section .por-v { padding: 13px 16px; font-size: 12.5px; }
  .w1-sekcja.comparison-section .por-tw--glowa .por-v { font-size: 13.5px; }
  .w1-sekcja.comparison-section .por-listek { width: 13px; height: 13px; }
  .w1-sekcja.videoGuide-section .video-play-btn { padding: 14px 22px; font-size: 11px; gap: 11px; }
  .w1-sekcja.videoGuide-section .video-play-btn svg { width: 16px; height: 16px; }
  .w1-sekcja.videoGuide-section .vg-porady { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: center; padding-top: 48px; }
  .w1-sekcja.videoGuide-section .vg-rysunek { order: 2; }
  .kafle-w1 { gap: 20px; }
  .kafle-w1.rzad3 { grid-template-columns: repeat(3, 1fr); }
  .kafle-w1.rzad2 { grid-template-columns: repeat(2, calc((100% - 40px) / 3)); justify-content: center; margin-top: 20px; }
  .kafel-tresc { left: 26px; right: 26px; bottom: 22px; }
  .kafle-w1.rzad2 .kafel-tresc { left: 18px; right: 18px; bottom: 13px; }
  .kafel-nad { font-size: 11px; }
  .kafel-tyt { font-size: 21px; margin-top: 6px; }
  .kafle-w1.rzad2 .kafel-tyt { font-size: 19px; margin-top: 5px; }
}

/* ==== W1 paczka 4b: naglowek i stopka (28.08.2026) ====
   Wzor: narzedzia/oprawa.js (duzy ekran) i mobile.js (telefon). Tresc bez zmian, tylko stroj. */
header { border-bottom-color: var(--w1-linia); font-family: "Red Hat Display", system-ui, sans-serif; }
.header-inner.w1-glowa { padding: 24px 0; gap: 28px; }
header.sticky .header-inner.w1-glowa { padding: 14px 0; }
#content { padding-top: 92px; }
.w1-glowa .logo { width: 190px; }
header.sticky .w1-glowa .logo { width: 165px; }
.w1-glowa #main-menu > ul { gap: 20px; justify-content: center; }
.w1-glowa #main-menu > ul > li > a { min-height: 0; padding: 6px 0; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-tekst); border-bottom: 1px solid transparent; border-radius: 0; background: transparent; }
.w1-glowa #main-menu > ul > li > a:hover, .w1-glowa #main-menu > ul > li.active > a { color: var(--w1-tekst); background: transparent; border-bottom-color: var(--w1-zloto); }
.w1-glowa .header-right { gap: 10px; flex-grow: 0; margin-left: auto; }
/* Szukajka OTWARTA NA STALE (decyzja wlasciciela 02.09) - osobny przycisk-lupka
   przestal byc potrzebny, bo pole ma wlasny przycisk z lupka. Wszystkie trzy
   kontrolki naglowka (szukajka, koszyk, konto) maja te sama wysokosc 44 px;
   wczesniej bylo 40 / 46 / 40 i pasek wygladal na poskladany z roznych czesci. */
.w1-glowa .w1-szukaj { display: none; }
/* Stale otwarte pole zabralo w pasku ~200 px i LOGO sie scisnelo (162 -> 62 px),
   bo jest elementem elastycznym i chetnie oddaje szerokosc. Logo, koszyk i konto
   nie moga sie kurczyc; miejsce oddaje menu, ktore ma na to zapas w odstepach. */
.w1-glowa .logo, .w1-glowa .basket-box, .w1-glowa .basket-box-btn,
.w1-glowa .user-nav, .w1-glowa .mainsearch { flex-shrink: 0; }
.w1-glowa .mainsearch { margin-right: 0; width: 200px; overflow: visible; visibility: visible; float: none; }
.w1-glowa .mainsearch input.form-control { box-sizing: border-box; height: 44px; border: 1px solid var(--w1-ramka); border-right: 0; border-radius: 0 !important; font-size: 13px; }
.w1-glowa .mainsearch-submit { box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--w1-ramka); border-left: 0; border-radius: 0; background: #fff; color: var(--w1-tekst); }
.w1-glowa .mainsearch-rwd-button { display: none; }
/* min-height JEST potrzebne: przycisk dziedziczy `min-height: 46px` z ogolnej
   reguly przyciskow i sama `height` przegrywala - stad 46 zamiast 44. */
.w1-glowa .basket-box-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--w1-ramka); border-radius: 0; background: #fff; color: var(--w1-tekst); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: none; }
.w1-glowa .basket-box-btn .basket-icon .icon svg { width: 16px; height: 16px; }
.w1-glowa .basket-box-btn .caption-count { color: var(--w1-zloto); background: none; padding: 0; font-size: inherit; font-weight: 500; display: inline; }
.w1-glowa .basket-box-btn .caption-value { display: none; }
.w1-glowa .user-nav-item-inner .icon { box-sizing: border-box; width: 44px; height: 44px; border-radius: 0; background: var(--w1-zielen); border-color: var(--w1-zielen); }
.w1-glowa .user-nav-item + .user-nav-item { padding-left: 10px; margin-left: 10px; }
.w1-glowa .main-menu-button { width: 44px; height: 44px; }
/* stopka */
footer { font-family: "Red Hat Display", system-ui, sans-serif; }
.footer-bg { background-color: var(--w1-tekst); }
.footer-bg img { opacity: .18; }
.footer-top { padding-top: 56px; }
.footer-cols { gap: 36px; padding-bottom: 0; }
.footer-cols:before { display: none; }
.footer-col-title { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #C9A76B; }
.footer-col-content { padding-top: 16px; }
.footer-col-content ul li a { font-size: 13px; line-height: 1.5; padding: 5px 0; display: block; color: rgba(255, 255, 255, .82); font-weight: 400; }
.footer-col-content ul li a:hover, .footer-col-content ul li.active a { color: #fff; font-weight: 400; }
.footer-col-content ul li a:before { display: none; }
.footer-col-content .text, .footer-col-contact-text { font-size: 13px; color: rgba(255, 255, 255, .82); }
.footer-contact-link { display: flex; width: max-content; align-items: center; gap: 9px; color: rgba(255, 255, 255, .82); font-size: 13px; }
.footer-contact-link .icon { color: #C9A76B; }
.footer-contact-link .icon svg { width: 15px; height: 15px; }
.footer-payments { margin-top: 40px; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 0; }
.footer-payments .footer-col-title { margin-bottom: 16px; }
.footer-col-payments { gap: 8px; }
.footer-payment { width: auto; height: 46px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0; }
.footer-payment img { height: 20px; width: auto; max-height: 20px; }
.footer-text-social { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.footer-text-social .text, .footer-text-social .text p { margin: 0; font-size: 11px; line-height: 1.7; color: rgba(255, 255, 255, .52); max-width: 78ch; }
.footer-text-social .social-list { display: flex; gap: 8px; margin: 0; }
.footer-text-social .social-list a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 0; background: transparent; color: rgba(255, 255, 255, .86); }
.footer-text-social .social-list a svg { width: 17px; height: 17px; }
.footer-text-social .social-list a svg path { fill: currentColor !important; }
.footer-text-social .social-list a:hover { border-color: #fff; color: #fff; }
.footer-bar { padding: 20px 0 26px; background: transparent; border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 26px; }
.footer-bar, .footer-bar .copyright, .footer-bar-links a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
/* ==== W1 paczka 4c: sekcje strony glownej ==== */
/* 01 hero A: pelny kadr, tekst na sciemnieniu u dolu, przycisk bialy */
.w1-hero .main-slider-bg img { min-height: 460px; max-height: 70vh; }
.w1-hero .main-slider-item-text { align-items: flex-end; }
.w1-hero .main-slider-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26, 26, 24, .05) 30%, rgba(26, 26, 24, .6)); pointer-events: none; }
.w1-hero .main-slider-item-text-inner { max-width: 560px; gap: 10px; padding: 0 0 22px; font-family: "Red Hat Display", system-ui, sans-serif; }
/* Pismo hero podniesione (uwaga wlasciciela 02.09: „powiekszmy jeszcze bardziej
   tekst w sekcji 1"). Bazowe rozmiary sa MNOZONE przez blok skali na koncu
   pliku (1,26), wiec po kazdej zmianie tutaj trzeba go przegenerowac:
   `node scripts/audyt/w1-skala-pisma.js <plik>`. */
.w1-hero .main-slider-item-title { font-size: 30px; font-weight: 300; line-height: 1.18; letter-spacing: -.01em; }
.w1-hero .main-slider-item-text-inner .text, .w1-hero .main-slider-item-text-inner .text p { font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, .85); }
.w1-hero .main-slider-item-text-inner .btn { margin-top: 4px; border: 1px solid #fff; background: #fff; color: var(--w1-tekst); border-radius: 0; min-height: 44px; padding: 10px 18px; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
/* Odzew glownej akcji hero („Zobacz wiecej"). Przycisk mial `transition`, ale
   ZADNEGO stanu do zmiany - najechanie nic nie robilo (zmierzone 02.09: to samo
   tlo przed i po). Ten sam jezyk co akcja w stopce arkusza: strzalka, ktora
   rusza sie pod kursorem, odwrocenie kolorow, wcisniecie i widoczny fokus. */
.w1-hero .main-slider-item-text-inner .btn {
  display: inline-flex; align-items: center; gap: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.w1-hero .main-slider-item-text-inner .btn::after {
  content: '\2192'; margin-left: 10px; display: inline-block;
  transition: transform .18s ease;
}
.w1-hero .main-slider-item-text-inner .btn:hover {
  background: #1A1A18; border-color: #1A1A18; color: #fff;
}
.w1-hero .main-slider-item-text-inner .btn:hover::after { transform: translateX(4px); }
.w1-hero .main-slider-item-text-inner .btn:active { transform: translateY(1px); }
.w1-hero .main-slider-item-text-inner .btn:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .w1-hero .main-slider-item-text-inner .btn,
  .w1-hero .main-slider-item-text-inner .btn::after { transition: none; }
}
.w1-hero .slider-person-wrapper { gap: 11px; margin-top: 10px; }
.w1-hero .slider-person-wrapper .icon-wrapper { width: 40px; height: 40px; border-radius: 0; }
/* Pasek rekomendacji dietetyka - powiekszony razem z reszta hero (uwaga
   wlasciciela 02.09). To jedyny dowod spoleczny nad zgieciem, wiec byl za cichy:
   nazwisko 12,5 i podpis 9 px ginely przy tytule. */
.w1-hero .slider-person-wrapper .icon-wrapper { width: 46px; height: 46px; }
.w1-hero .slider-person-name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.w1-hero .slider-person-position { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #E5CD9A; line-height: 1.4; }
/* 08 discountGroup: glowka W1, kafle z P2 w pasie/siatce */
.w1-sekcja.discount-group-section .section-heading-right .btn { display: none; }
/* 07 category: kafle na kremie, zdjecie 820x375, nazwa + opis */
.w1-sekcja.categories-section .about-collection-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.w1-sekcja.categories-section .about-collection-item { flex-direction: column !important; background: var(--w1-krem); margin: 0 !important; }
.w1-sekcja.categories-section .about-collection-item-image { width: 100%; aspect-ratio: 820 / 375; overflow: hidden; }
.w1-sekcja.categories-section .about-collection-item-text { padding: 16px 18px 20px; gap: 8px; }
.w1-sekcja.categories-section .about-collection-deco { display: none; }
.w1-sekcja.categories-section .about-collection-item-text-inner { padding: 0; gap: 8px; }
.w1-sekcja.categories-section .about-collection-item-text-title { font-size: 16px; font-weight: 400; margin: 0; }
.w1-sekcja.categories-section .about-collection-item-text .btn { align-self: flex-start; margin-top: 6px; border: 1px solid var(--w1-tekst); background: transparent; color: var(--w1-tekst); border-radius: 0; min-height: 44px; padding: 10px 18px; font-size: 10px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
/* 06 icons: zielony pas przyciemniony o 30 %, ikona przed tekstem */
.w1-sekcja.icons-section { margin: 0; padding: 26px 0 28px; border-top: 0; background: #6E9E27; }
.w1-sekcja.icons-section .section-bg { opacity: 1; }
.w1-sekcja.icons-section::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 24, .30); pointer-events: none; }
.w1-sekcja.icons-section > .container { position: relative; }
.w1-sekcja.icons-section .icons-section-list { grid-template-columns: 1fr 1fr; gap: 22px 14px; justify-content: stretch; }
.w1-sekcja.icons-section .icons-section-item { flex-direction: column; text-align: center; gap: 8px; }
.w1-sekcja.icons-section .icons-section-item .icon-wrapper { max-width: 34px; }
.w1-sekcja.icons-section .icons-section-item .icon-wrapper img { filter: brightness(0) invert(1); }
.w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
/* 15 aboutUs: trzy kolumny, zdjecie w srodku */
.w1-sekcja.about-top-section { margin: 0; gap: 0; }
.w1-sekcja.about-top-section .about-top-inner { display: flex; flex-direction: column; gap: 22px; }
.w1-sekcja.about-top-section .about-top-column { gap: 18px; }
.w1-sekcja.about-top-section .about-top-column--image { order: -1; }
.w1-sekcja.about-top-section .about-top-column-image { background: transparent; max-width: 260px; margin: 0 auto; }
.w1-sekcja.about-top-section .about-top-column-image img { width: 100%; height: auto; display: block; }
.w1-sekcja.about-top-section .about-text-item { gap: 6px; }
.w1-sekcja.about-top-section .about-text-item .icon-wrapper { display: none; }
.w1-sekcja.about-top-section .about-text-item-name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.w1-sekcja.about-top-section .about-top-column > .text { font-size: 13.5px; line-height: 1.7; }
@media screen and (max-width: 1139px) {
  .header-inner.w1-glowa { padding: 9px 0; gap: 4px; min-height: 62px; }
  #content { padding-top: 62px; }
  .w1-glowa .logo { width: auto; flex: 1; }
  .w1-glowa .header-right { gap: 4px; }
  .w1-glowa .w1-szukaj { display: none; }
  .w1-glowa .mainsearch-rwd-button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; color: var(--w1-tekst); }
  .w1-glowa .mainsearch { width: auto; overflow: visible; transition: none; }
  .w1-glowa .basket-box-btn { width: 44px; height: 44px; padding: 0; border: 0; position: relative; justify-content: center; }
  .w1-glowa .basket-box-btn .caption-basket { position: absolute; top: 4px; right: 4px; font-size: 0; }
  .w1-glowa .basket-box-btn .caption-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; background: var(--w1-zielen); color: #fff; font-size: 9px; padding: 0 4px; }
  .w1-glowa .basket-box-btn .basket-icon .icon svg { width: 21px; height: 21px; }
  .w1-glowa .user-nav { display: none; }
  .footer-top { padding-top: 34px; }
  .footer-cols { gap: 0; }
  .footer-col:not(.footer-col-4) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .footer-col:not(.footer-col-4):before { display: none; }
  .footer-col-heading { padding: 15px 0; }
  .footer-col-heading .icon { display: block; color: #C9A76B; }
  .footer-col-title { font-size: 11px; letter-spacing: .16em; color: rgba(255, 255, 255, .92); }
  .footer-col-content { padding: 0 0 12px; }
  .footer-col-payments { display: grid; grid-template-columns: repeat(3, 1fr); }
  .footer-payment { height: 44px; padding: 0; justify-content: center; }
  .footer-text-social { grid-template-columns: 1fr; gap: 22px; }
  .footer-text-social .social-list { order: -1; gap: 10px; }
}
@media screen and (min-width: 1140px) {
  .w1-hero .main-slider-item-text-inner { padding-bottom: 38px; }
  .w1-hero .main-slider-item-title { font-size: 44px; }
  .w1-sekcja.categories-section .about-collection-list { grid-template-columns: 1fr 1fr; gap: 26px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 19px; }
  .w1-sekcja.icons-section { padding: 34px 0 36px; }
  .w1-sekcja.icons-section .icons-section-list { grid-template-columns: repeat(4, 1fr); gap: 0 30px; }
  /* Ikona NAD tekstem i wszystko wysrodkowane - tak jest w makiecie (wariant A,
     `.ik-a.rzad4`: `text-align: center`, svg z `margin: 0 auto 10px`). Ustawienie
     „ikona obok, tekst do lewej" bylo dryfem, nie decyzja: przy czterech rownych
     kolumnach i roznej dlugosci podpisow pas wygladal krzywo, bo tresc lepila sie
     do lewej krawedzi kazdego pola (zgloszone 02.09.2026). */
  .w1-sekcja.icons-section .icons-section-item {
    flex-direction: column; text-align: center; gap: 10px;
    align-items: center; justify-content: flex-start;
  }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 15px; }
  .w1-sekcja.about-top-section .about-top-inner { display: grid; grid-template-columns: 1fr minmax(0, 320px) 1fr; gap: 40px; align-items: start; }
  .w1-sekcja.about-top-section .about-top-column--image { order: 0; }
  .w1-sekcja.about-top-section .about-top-column-image { max-width: none; }
}
/* menu: stary trik :before (attr data-content) rezerwowal miejsce na pogrubienie po najechaniu - W1 nie pogrubia, a rezerwa robila nierowne odstepy */
.w1-glowa #main-menu > ul > li > a:before { display: none; }

/* ==== W1 poprawki po porownaniu z makieta (30.08.2026, scripts/audyt/w1-porownanie-makiety.js) ==== */
/* 1. kafle produktow w Swiperze nie mialy odstepu (gap 0 vs 26 w makiecie): slajd dostaje wewnetrzny margines */
.w1-sekcja .product-list-slider { margin-left: -13px; margin-right: -13px; width: auto; }
.w1-sekcja .product-list-slider .shop-product-box.swiper-slide { padding: 0 13px; box-sizing: border-box; }
/* 2. .mainpage .text-collection-section zerowal padding sekcji (dwie klasy) - podwojona klasa wygrywa */
.w1-sekcja.w1-sekcja { padding-top: 28px; padding-bottom: 28px; }
.w1-sekcja.w1-sekcja.icons-section { padding-top: 26px; padding-bottom: 28px; }
/* 3. boxText: tytul jak reszta glowek, znaki bez bialych pudelek */
.w1-sekcja.boxText { padding-top: 40px; padding-bottom: 40px; }
.w1-sekcja.boxText .box-text-title { font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: var(--w1-tekst); }
.w1-sekcja.boxText .img-wrapper { background: none !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
/* 4. textImage: tytul sekcji w tej samej skali co glowki */
.w1-sekcja.text-image-section .section-title { font-size: 22px; }
/* 5. zero zaokraglen poza sekcjami: koszyk w naglowku, galeria, przyciski, pola */
header .basket-box-btn, header .caption-count, .product-view-slider, .product-view-slider-wrapper, #content .btn, #content .form-control, #content input, #content textarea, #content select { border-radius: 0 !important; }
/* Strzalki paginacji na listingu i blogu zostawaly OKRAGLE (46 px, radius 90) -
   W1 wyprostowalo je w sekcjach i na karcie, a te dwie umknely, bo lezą poza
   `.w1-sekcja`. Makieta bloga wymusza zero zaokraglen na wszystkim (znaleziono
   przegladem calego sklepu 02.09). */
.btn-arrow { border-radius: 0 !important; }
/* 6. numeracja listy textCollection (03-2): zloty numer bez ramki */
.w1-sekcja.uklad-lista .about-text-item .icon-wrapper { border: 0; padding: 0; line-height: 1; }
/* 7. newsletter: nie ma go w W1, ale stoi na kazdej stronie - dostaje ten sam stroj co sekcje */
.newsletter-section { font-family: "Red Hat Display", system-ui, sans-serif; border-top: 1px solid var(--w1-linia); padding: 28px 0 !important; }
.newsletter-section h2, .newsletter-section .section-title, .newsletter-section .newsletter-title { font-size: 22px !important; font-weight: 300 !important; line-height: 1.2; letter-spacing: -.01em; color: var(--w1-tekst); }
.newsletter-section .text, .newsletter-section p { font-size: 13px; line-height: 1.68; color: var(--w1-cichy); }
.newsletter-section input.form-control { height: 46px; border: 1px solid var(--w1-ramka); font-size: 13px; }
.newsletter-section input.form-control:focus { border-color: var(--w1-tekst); box-shadow: none; outline: none; }
.newsletter-section .btn { min-height: 46px; background: var(--w1-tekst); border: 1px solid var(--w1-tekst); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; padding: 10px 18px; }
/* 8. hero: makieta ma 430 px przy 1140, czyli ok. 540 przy 1440; 620 bylo za wysokie */
.w1-hero .main-slider-bg img { min-height: 0; height: 460px; max-height: 70vh; }
@media screen and (min-width: 1140px) {
  .w1-sekcja.w1-sekcja { padding-top: 48px; padding-bottom: 48px; }
  .w1-sekcja.w1-sekcja.icons-section { padding-top: 34px; padding-bottom: 36px; }
  .w1-sekcja.boxText { padding-top: 48px; padding-bottom: 48px; }
  .w1-sekcja.boxText .box-text-title { font-size: 30px; }
  .w1-sekcja.text-image-section .section-title { font-size: 30px; }
  .w1-sekcja.videoGuide-section .vg-tekst .section-title { font-size: 30px; }
  .newsletter-section { padding: 48px 0 !important; }
  .newsletter-section h2, .newsletter-section .section-title, .newsletter-section .newsletter-title { font-size: 30px !important; }
  .newsletter-section .text, .newsletter-section p { font-size: 14px; }
  .w1-hero .main-slider-bg img { height: 540px; }
}
/* 9. stary motyw justowal akapity (.text) - W1 wyrownuje do lewej; przyciski poza #content tez bez zaokraglen */
.w1-sekcja .text, .w1-sekcja .text p, .w1-sekcja .text li, .w1-karta .text, .w1-karta .text p { text-align: left; }
header .btn, footer .btn, .modal .btn, .fancybox__content .btn { border-radius: 0 !important; }

/* 08: na duzym ekranie SIATKA (decyzja 08), Swiper startuje tylko ponizej 1140 px (widoki) */
@media screen and (min-width: 1140px) {
  .w1-sekcja .product-list-slider { margin: 0; overflow: visible; }
  .w1-sekcja .product-list-slider .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; transform: none !important; }
  .w1-sekcja .product-list-slider .shop-product-box.swiper-slide { width: auto !important; padding: 0; margin: 0 !important; }
  .w1-sekcja.discount-group-section .section-heading-right, .w1-sekcja .discount-group-section .arrows { display: none; }
  /* Kafle od piatego W GORE musza byc widoczne. responsive.css ma globalna
     regule chowajaca `.shop-product-box:nth-of-type(n + 5)`, dopoki Swiper sie
     nie zainicjuje - zabezpieczenie przed mignieciem dlugiej listy, napisane
     wtedy, gdy Swiper startowal ZAWSZE. W1 celowo go na duzym ekranie nie
     uruchamia (kafle stoja w siatce), wiec ta regula chowala drugi rzad
     NA STALE: sekcja z osmioma produktami pokazywala cztery
     (zgloszone 02.09.2026). */
  .w1-sekcja.discount-group-section .swiper:not(.swiper-initialized) .swiper-wrapper .shop-product-box:nth-of-type(n + 5) {
    display: block;
  }
}
/* 04 boxText: znaki bez ramek (stare reguly maja selektor section.boxText ... - trzy klasy) */
section.boxText.w1-sekcja .section-inner .img-wrapper { border: 0; aspect-ratio: auto; background: none; width: 112px; }
section.boxText.w1-sekcja .section-inner .img-wrapper img { max-width: 100%; width: 100%; height: auto; }
section.boxText.w1-sekcja .section-inner .content-left { width: auto; margin: 0; gap: 54px; }
section.boxText.w1-sekcja .section-inner .content-left .box-text { padding: 0; width: 112px; }
section.boxText.w1-sekcja .section-inner .content-right { width: auto; max-width: 68ch; }
section.boxText.w1-sekcja .section-inner .content-left .box-text-title { display: none; }
/* 06 icons: tlo z panelu (section-bg) pod nakladka .30, ikony W1 w kresce, nazwa 15/500 + opis 13 */
.w1-sekcja.icons-section { background: #6E9E27; }
.w1-sekcja.icons-section .section-bg { position: absolute; inset: 0; z-index: 0; opacity: 1; }
.w1-sekcja.icons-section .section-bg img { width: 100%; height: 100%; object-fit: cover; }
.w1-sekcja.icons-section::before { z-index: 1; }
.w1-sekcja.icons-section > .container { position: relative; z-index: 2; }
.w1-sekcja.icons-section .icons-section-item .icon-wrapper { max-width: 34px; width: 34px; height: 34px; color: #fff; flex: none; }
.w1-sekcja.icons-section .icons-section-item .icon-wrapper svg { width: 34px; height: 34px; display: block; }
.w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 15px; font-weight: 500; line-height: 1.4; color: #fff; }
.w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { display: block; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .92); margin-top: 3px; }
/* 10 videoGuide: rysunek na kremowym polu */
.w1-sekcja.videoGuide-section .vg-rysunek { background: var(--w1-krem); padding: 20px; }
/* 05b kafle podstron: efekt najechania */
.kafel-w1 .kafel-kadr img { transition: transform .35s ease-out; }
.kafel-w1:hover .kafel-kadr img, .kafel-w1:focus-visible .kafel-kadr img { transform: scale(1.04); }
.kafel-w1::after { transition: background .35s ease-out; }
.kafel-w1:hover::after { background: linear-gradient(180deg, rgba(26, 26, 24, .08) 30%, rgba(26, 26, 24, .66)); }
/* 15 aboutUs: zdjecie bez pudelka (plik z wycietym tlem), waska kolumna */
.w1-sekcja.about-top-section .about-top-column-image { background: none; }
/* 13 opinie: karta jak w makiecie - gwiazdki i data u gory, tekst, na dole imie + potwierdzenie; histogram 5 -> 1 */
.w1-sekcja.comment-section .opinion-header, .w1-sekcja.comment-section .opinion-heading-inner { display: contents; }
.w1-sekcja.comment-section .opinion-heading-product { display: none; }
.w1-sekcja.comment-section .opinion-heading-inner-bottom { order: 1; width: 100%; }
.w1-sekcja.comment-section .opinion-text { order: 2; width: 100%; }
.w1-sekcja.comment-section .opinion-name { order: 3; width: 100%; padding-top: 12px; border-top: 1px solid var(--w1-linia); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Plakietka „opinia potwierdzona zakupem" jest RODZENSTWEM imienia, nie dzieckiem -
   `.opinion-header` i `.opinion-heading-inner` maja `display: contents`, wiec oba sa
   polami kafelka ustawionego w KOLUMNIE. Jeden wspolny wiersz udawal
   `margin-top: -30px`, ktory wciagal plakietke na imie. Dzialalo to tylko dopoki imie
   bylo krotkie, a kafelek szeroki: przy 1200 px kafelek ma 311 px, plakietka 246 px
   i napis NACHODZIL na imie (zgloszenie wlasciciela 03.09, potwierdzone pomiarem).
   Ujemny margines usuniety - plakietka idzie pod imie, wyrownana do prawej. Kafelek
   rosnie o jeden wiersz, za to nic nigdy nie nachodzi.
   PROBOWANE I ODRZUCONE: przepisanie kafelka na siatke dwukolumnowa. `display: contents`
   na obu opakowaniach sprawia, ze `grid-column` nie ma czego zaczepic - uklad rozsypal
   sie kompletnie, a kafle wyszly poza kontener (zrzut, nie pomiar, to pokazal). */
.w1-sekcja.comment-section .opinion-item > .text { order: 3; margin: 0; padding-top: 12px; border-top: 0; width: auto; align-self: flex-start; }
.w1-sekcja.comment-section .opinion-item > .text::before { content: "\2713"; margin-right: 5px; }
.w1-sekcja.comment-section .comment-stats-inner { flex-direction: column-reverse; }
/* Stroj wiersza oceny WISI NA SEKCJI, nie na kontenerze `.comment-section-stats`.
   Wczesniej selektory szly przez ten kontener i po przeniesieniu wiersza do glowki
   (sekcja bez opisu, 03.09) przestawaly dzialac: gwiazdki traca zloto i robily sie
   zielone, a „182 OPINIE" gubilo wersaliki i odstepy miedzy literami. */
.w1-sekcja.comment-section .rating-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.w1-sekcja.comment-section .rating-summary-nr { font-size: 40px; font-weight: 300; line-height: 1; color: var(--w1-tekst); }
.w1-sekcja.comment-section .rating-summary-stars svg { width: 132px; height: 22px; color: var(--w1-zloto); }
/* Srednia, gwiazdki i liczba opinii stoja OBOK SIEBIE w jednym wierszu (uwaga
   wlasciciela 03.09). Wczesniej `width: 100%` na liczniku lamalo go do nastepnego
   wiersza - na duzym ekranie licznik dostawal cala szerokosc kolumny statystyk
   (zmierzone: 400 px), wiec „182 OPINIE" spadalo pod gwiazdki. Na telefonie regula
   w bloku `max-width: 1139px` juz to prostowala; teraz obowiazuje wszedzie.
   `flex-wrap: wrap` wyzej zostaje jako zabezpieczenie: przy bardzo waskiej kolumnie
   licznik zejdzie nizej sam, zamiast wypchnac tresc poza kontener. */
.w1-sekcja.comment-section .rating-summary-count { width: auto; margin: 0 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-sekcja.comment-section .comment-stats-item { grid-template-columns: auto 1fr 28px; }
.w1-sekcja.comment-section .comment-stats-item .caption { text-align: right; }
@media screen and (max-width: 1139px) {
  .w1-sekcja.comment-section .opinion-item > .text { margin-top: 0; align-self: flex-start; }
}
/* ==== runda 3 (30.08): poprawki po zrzutach ==== */
/* pas ikon: markup z panelu to <p><strong>nazwa</strong><br>opis</p> - nazwa 15/500, opis 13 */
.w1-sekcja.icons-section .icons-section-item { align-items: center; justify-content: flex-start; }
.w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 13px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 0; }
.w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { display: block; font-size: 15px; font-weight: 500; color: #fff; margin: 0 0 3px; }
/* certyfikaty: tekst i tytul na srodku */
section.boxText.w1-sekcja .section-inner .content-right { text-align: center; }
section.boxText.w1-sekcja .section-inner .content-right .box-text-title { text-align: center; margin: 0 auto 10px; }
/* opinie: histogram 5 -> 1 w czterech kolumnach, stopka karty jak w makiecie */
.w1-sekcja.comment-section .comment-stats-item { grid-template-columns: auto auto 1fr 36px; }
.w1-sekcja.comment-section .comment-stats-item:nth-child(1) { order: 5; }
.w1-sekcja.comment-section .comment-stats-item:nth-child(2) { order: 4; }
.w1-sekcja.comment-section .comment-stats-item:nth-child(3) { order: 3; }
.w1-sekcja.comment-section .comment-stats-item:nth-child(4) { order: 2; }
.w1-sekcja.comment-section .comment-stats-item:nth-child(5) { order: 1; }
.w1-sekcja.comment-section .comment-stats-inner { display: grid; flex-direction: row; }
.w1-sekcja.comment-section .opinion-heading-stars svg { width: 78px; height: 13px; }
.w1-sekcja.comment-section .opinion-item > .text, .w1-sekcja.comment-section .opinion-item > .text p { font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-zielen); line-height: 1.4; margin: 0; }
/* Plakietka pod imieniem, NIE na nim. Bylo `margin-top: -30px`, ktory podciagal ja
   na wiersz imienia. Runda z 01.09 juz to raz naprawiala, ale poprawka wyladowala
   w `@media (max-width: 1139px)`, wiec ratowala tylko telefon i waski tablet -
   a kafle sa najwezsze WLASNIE powyzej 1140, bo kolumna z podsumowaniem zabiera
   400 px (regula 5a). Zmierzone przy 1200 px: kafelek 311 px, plakietka 246 px,
   imie 70 px - napisy nachodzily na siebie (zgloszenie wlasciciela 03.09).
   Jeden wiersz dzialal tylko przypadkiem, przy krotkich imionach; dluzsze imie
   rozbijaloby go nawet przy 1920. Dlatego stos na KAZDEJ szerokosci. */
.w1-sekcja.comment-section .opinion-item > .text { margin-top: 6px; padding-top: 14px; }
section.boxText.w1-sekcja .section-inner .content-right p { text-align: center; }
.w1-sekcja.icons-section .icons-section-item .text p { line-height: 1.45; }
@media screen and (max-width: 1139px) { .w1-sekcja.comment-section .comment-stats-inner { display: none; } }
/* ==== runda 4 (30.08): uwagi wlasciciela ==== */
/* ocena zbiorcza: mniejsze gwiazdki. Dopisek 03.09: „liczba opinii tuz pod ocena"
   przestalo obowiazywac - wlasciciel chce srednia, gwiazdki i liczbe OBOK SIEBIE.
   `margin-top: 4px` bylo dobrane pod uklad pionowy i przy jednym wierszu zsuwaloby
   licznik o te 4 px w dol wzgledem gwiazdek, wiec idzie do zera. */
.w1-sekcja.comment-section .rating-summary { gap: 10px; margin: 0; }
.w1-sekcja.comment-section .rating-summary-stars svg { width: 100px; height: 17px; }
.w1-sekcja.comment-section .rating-summary-count { margin-top: 0; }
.w1-sekcja.comment-section .comment-section-stats .comment-stats-inner { margin-top: 16px; }
/* certyfikaty: znaki 86 px, tekst na srodku */
section.boxText.w1-sekcja .section-inner .img-wrapper, section.boxText.w1-sekcja .section-inner .content-left .box-text { width: 86px; }
section.boxText.w1-sekcja .section-inner .content-left { gap: 30px; }
section.boxText.w1-sekcja .section-inner .content-right, section.boxText.w1-sekcja .section-inner .content-right * { text-align: center !important; }
/* ==== runda 5 (30.08): blog i kategorie jak w makiecie ==== */
/* 09 blog: stary kafel (tytul na gradiencie, ujemne marginesy) - W1: zdjecie 620x326, data, tytul pod spodem */
.w1-sekcja.news-section .news-slider-list { margin: 0; }
.w1-sekcja.news-section .news-slider-list .news-item, .w1-sekcja.news-section .news-item { position: relative; padding: 0; width: auto; }
.w1-sekcja.news-section .news-item:before, .w1-sekcja.news-section .news-slider-list .news-item:before { display: none; content: none; }
.w1-sekcja.news-section .news-item-name { position: static; left: auto; right: auto; bottom: auto; color: var(--w1-tekst); font-size: 13px; font-weight: 400; line-height: 1.35; margin-top: 3px; }
.w1-sekcja.news-section .news-item-image { display: block; aspect-ratio: 620 / 326; background: var(--w1-krem); }
.w1-sekcja.news-section .news-item-image img { transition: transform .35s ease-out; }
.w1-sekcja.news-section a[href].news-item:hover .news-item-image img { transform: scale(1.04); }
.w1-sekcja.news-section .news-item-date { display: block; margin-top: 10px; }
/* 07 kategorie: lista wierszy - zdjecie z lewej (375 px), tekst na kremie, odnosnik podkreslony */
.w1-sekcja.categories-section .about-collection-list { grid-template-columns: 1fr; gap: 14px; }
.w1-sekcja.categories-section .about-collection-item { flex-direction: row !important; align-items: stretch; }
.w1-sekcja.categories-section .about-collection-item-image { width: 100%; aspect-ratio: 820 / 375; }
.w1-sekcja.categories-section .about-collection-item-text { padding: 16px 18px 20px; justify-content: center; }
.w1-sekcja.categories-section .about-collection-item-text-title { font-size: 16px; }
.w1-sekcja.categories-section .about-collection-item-text .btn { border: 0; border-bottom: 1px solid var(--w1-zloto); color: var(--w1-zloto); padding: 0 0 4px; min-height: 0; font-size: 11px; letter-spacing: .16em; background: transparent; }
.w1-sekcja.categories-section .about-collection-item-text .btn:hover { color: var(--w1-tekst); border-color: var(--w1-tekst); }
@media screen and (min-width: 1140px) {
  .w1-sekcja.news-section .news-item-name { font-size: 15px; }
  .w1-sekcja.categories-section .about-collection-list { grid-template-columns: 1fr; gap: 14px; }
  .w1-sekcja.categories-section .about-collection-item-image { width: 375px; flex: 0 0 375px; aspect-ratio: auto; }
  .w1-sekcja.categories-section .about-collection-item-text { padding: 26px 30px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 19px; }
}
@media screen and (max-width: 1139px) {
  .w1-sekcja.categories-section .about-collection-item { flex-direction: column !important; }
}
/* blog: karuzela lezy w markupie POZA .container - dostaje te same wymiary co kontener W1 */
.w1-sekcja.news-section .news-slider-list { padding: 0 var(--container-padding); }


/* ==== runda 6 (30.08): zgodnosc 1:1 z makietami PRZY OKNIE 1440 px ====
   Makieta strony glownej (strona-glowna-w1.html) przy oknie 1440 px to pas 1140 px BEZ zoomu
   (zmierzone: .pas1140 = 1140, zoom 1, naglowek 93 px, tytuly 30 px, tekst 14 px). Wczesniejsze
   rundy 2 i 4 skalowaly pas zoomem 1,263 / 1,15 - usuniete. Karta produktu ma wlasna makiete na
   1440 px (marginesy 40) - ta sama miara, wiec jedna regula obejmuje caly sklep. */
@media screen and (min-width: 1140px) {
  .w1-sekcja > .container, .w1-sekcja .container.container-md, .w1-karta > .container, .w1-karta .container.container-md,
  header > .container, footer .footer-top > .container, footer .footer-bar > .container, .newsletter-section > .container,
  .w1-hero .main-slider-item-text > .container, .sections-tabs-inner-wrapper > .container, .breadcrumb-container > .container,
  .w1-sekcja.news-section .news-slider-list { max-width: 1920px; padding-left: 40px; padding-right: 40px; margin-left: auto; margin-right: auto; }
  /* 30.08 wieczor, decyzja wlasciciela: CALY sklep w kontenerze 1440 (nie pas 1140 z makiety glownej); rozmiary pisma z makiety, bez zoomu */
  .w1-sekcja .container .container { max-width: none; padding: 0; }
  .shop-product-view > .container { max-width: 1920px; padding-left: 40px; padding-right: 40px; }
  /* naglowek: pas 92 px + kreska, logo 125 x 40 */
  .header-inner.w1-glowa { padding: 0; height: 92px; }
  header.sticky .header-inner.w1-glowa { height: 72px; }
  .w1-glowa .logo { width: 125px; }
  header.sticky .w1-glowa .logo { width: 110px; }
  #content { padding-top: 93px; }
  /* Pasek zakladek przykleja sie POD naglowkiem. 72 px bylo dobrane pod naglowek
     SKURCZONY - od 02.09 naglowek ma stala wysokosc 93 px, wiec zakladki chowaly
     sie pod nim gorna krawedzia (zgloszone: „sticky menu jest troche wciete od
     gory"). Wysokosc naglowka i ten odstep musza sobie odpowiadac. */
  .sections-tabs-inner-wrapper.fixed { top: 93px; }
  /* Skok do sekcji (klik w zakladke) musi wypasc PONIZEJ obu paskow: naglowka
     93 + zakladek 57. Przy 75 px naglowek tresc przykrywal. */
  html { scroll-padding-top: 152px; }
  /* hero A: w pasie 1140, 430 px, tekst 46 px od krawedzi kadru */
  .w1-hero { max-width: 1920px; margin-left: auto; margin-right: auto; }
  /* runda 9: wysokosc hero z proporcji makiety (430 / 1140 = 0,377) zamiast sztywnej liczby -
     przy 1440 wychodzi te same 543 px co dotad, przy 1920 rosnie do 724, miedzy nimi plynnie */
  .w1-hero .main-slider-bg img { height: auto; aspect-ratio: 1140 / 430; max-height: 70vh; }
  .w1-hero .main-slider-item-text > .container { padding-left: 46px; padding-right: 46px; }
  .w1-hero .main-slider-item-text-inner { max-width: 560px; padding-bottom: 38px; }
  .w1-hero .main-slider-item-text-inner .text, .w1-hero .main-slider-item-text-inner .text p { font-size: 16px; }
  /* rytm strony glownej (rytm.js): biel 30, krem 40, biel po bieli 18 */
  .mainpage .w1-sekcja.w1-sekcja { padding-top: 30px; padding-bottom: 30px; }
  .mainpage .w1-sekcja--krem.w1-sekcja, .mainpage .w1-sekcja.boxText { padding-top: 40px; padding-bottom: 40px; }
  .mainpage .w1-sekcja:not(.w1-sekcja--krem):not(.icons-section) + .w1-sekcja:not(.w1-sekcja--krem):not(.icons-section):not(.videoGuide-section) { padding-top: 18px; }
  .mainpage .w1-sekcja.w1-sekcja.icons-section { padding-top: 34px; padding-bottom: 36px; }
  /* glowka na glownej: 1 : 1,4, odstep 48; opis i tekst biezacy do 54 znakow */
  .mainpage .w1-sekcja .section-heading, .mainpage .w1-sekcja .text-collection-glowa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 48px; }
  .mainpage .w1-sekcja .text { max-width: 54ch; }
  /* 06 ikony: pas na cala szerokosc okna, siatka z marginesem 40 */
  /* 31.08 runda 8: tresc pasa ikon zostaje w kontenerze 1440 (jak reszta sklepu); pelna szerokosc ma tylko zdjecie tla .section-bg, ktore lezy poza .container */
  /* 10 wideo + instrukcja: kadr na szerokosc pasa (1140), porady 1 : 1 z odstepem 40 */
  .w1-sekcja.videoGuide-section .vg-kadr { margin-left: 0; margin-right: 0; } /* kadr lezy poza .container - juz ma 1440 */
  .w1-sekcja.videoGuide-section .vg-porady { gap: 0 40px; padding: 30px 0 0; }
  .w1-sekcja.videoGuide-section .vg-rysunek { padding: 26px 30px; }
  .w1-sekcja.videoGuide-section .vg-tekst .section-title { font-size: 24px; }
  /* 04 certyfikaty: znaki 112 px, odstep 54 (bt-a.szeroki) */
  section.boxText.w1-sekcja .section-inner .img-wrapper, section.boxText.w1-sekcja .section-inner .content-left .box-text { width: 112px; }
  section.boxText.w1-sekcja .section-inner .content-left { gap: 54px; }
  section.boxText.w1-sekcja .section-inner { padding: 0; gap: 32px; }
  /* 08 kafel produktu (kp-*): tresc 14/14/16, nazwa 15/20, cena 18, status 11, przycisk 12x10 bez ikony */
  .w1-kafel .product-box-content { margin: 0 14px; }
  .w1-kafel .product-container { padding-bottom: 16px; }
  .w1-kafel .product-box-title { margin-top: 14px; line-height: 20px; min-height: 0; }
  /* margin-top: auto (a nie 7px) - od ceny w dol wszystko jedzie na SPOD kafla,
     zeby dluzsza nazwa nie spychala przycisku nizej niz u sasiada w rzedzie.
     Odstep od nazwy pilnuje padding, bo `auto` skurczy sie do zera. */
  .w1-kafel .product-price { margin-top: auto; padding-top: 7px; }
  .w1-kafel .product-box-content .price:not(.price-old), .w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 18px; }
  .w1-kafel .product-box-availability { margin-top: 7px; font-size: 11px; }
  .w1-kafel .shop-add-to-basket { margin-top: 14px; }
  .w1-kafel .shop-add-to-basket .btn { min-height: 0; padding: 12px 10px; line-height: 1; }
  /* 03-2 lista: numer NAD nazwa, nazwa 16 px, pozycja 14 px pionowo */
  .w1-sekcja.uklad-lista .about-text-item-heading { display: block; margin: 0; }
  .w1-sekcja.uklad-lista .about-text-item-heading .icon-wrapper { display: block; font-size: 11px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  .w1-sekcja.uklad-lista .about-text-item-name { margin-top: 2px; font-size: 16px; letter-spacing: 0; }
  .w1-sekcja.uklad-lista .about-text-item .text { margin-top: 7px; }
  /* 07 kategorie: wiersze 34 % / tekst, jak .kat-lista.wiersze */
  .w1-sekcja.categories-section .about-collection-list { gap: 18px; }
  .w1-sekcja.categories-section .about-collection-item-image { width: 34%; flex: 0 0 34%; }
  .w1-sekcja.categories-section .about-collection-item-text { padding: 22px 26px 24px; }
  /* stopka: pas 1140, bez zdjecia w tle */
  .footer-bg { display: none; }
  .footer-top { padding-top: 56px; }
}
/* kafel: przycisk bez ikony na obu ekranach; telefon = pas z podgladem (78 %, odstep 12, marginesy 14) */
.w1-kafel .shop-add-to-basket .btn .icon { display: none; }
@media screen and (max-width: 1139px) {
  .w1-kafel .product-box-title { font-size: 15px; line-height: 20px; min-height: 0; margin-top: 14px; }
  .w1-kafel .product-box-content { margin: 0 14px; }
  .w1-kafel .product-box-content .price:not(.price-old), .w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 18px; }
  .w1-kafel .product-box-availability { font-size: 11px; margin-top: 7px; }
  .w1-kafel .shop-add-to-basket .btn { font-size: 9px; min-height: 44px; padding: 6px; }
  .w1-sekcja .product-list-slider { margin-left: -6px; margin-right: -6px; }
  .w1-sekcja .product-list-slider .shop-product-box.swiper-slide { padding: 0 6px; }
  /* 07 kategorie na telefonie: zdjecie 38 % z lewej, tekst obok (kat-lista.obok) */
  .w1-sekcja.categories-section .about-collection-item { flex-direction: row !important; align-items: stretch; }
  .w1-sekcja.categories-section .about-collection-item-image { width: 38%; flex: 0 0 38%; aspect-ratio: auto; }
  .w1-sekcja.categories-section .about-collection-item-text { padding: 16px 16px 18px; justify-content: center; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 16px; }
  .w1-sekcja.categories-section .about-collection-item-text .btn { font-size: 10px; margin-top: 14px; padding-bottom: 3px; }
  .w1-sekcja.categories-section .about-collection-item-text .text, .w1-sekcja.categories-section .about-collection-item-text .text p { font-size: 12.5px; }
  /* 03-2 lista na telefonie: numer nad nazwa */
  .w1-sekcja.uklad-lista .about-text-item-heading { display: block; margin: 0; }
  .w1-sekcja.uklad-lista .about-text-item-heading .icon-wrapper { display: block; font-size: 11px; letter-spacing: .14em; }
  .w1-sekcja.uklad-lista .about-text-item-name { margin-top: 2px; font-size: 14.5px; letter-spacing: 0; }
  .w1-sekcja.uklad-lista .about-text-item .text { margin-top: 7px; }
  /* rytm telefonu z makiety: biel 22, krem 28, biel po bieli 12 */
  .mainpage .w1-sekcja.w1-sekcja { padding-top: 22px; padding-bottom: 22px; }
  .mainpage .w1-sekcja--krem.w1-sekcja, .mainpage .w1-sekcja.boxText { padding-top: 28px; padding-bottom: 28px; }
  .mainpage .w1-sekcja:not(.w1-sekcja--krem):not(.icons-section) + .w1-sekcja:not(.w1-sekcja--krem):not(.icons-section):not(.videoGuide-section) { padding-top: 12px; }
  .mainpage .w1-sekcja.w1-sekcja.icons-section { padding-top: 24px; padding-bottom: 26px; }
  .w1-hero .main-slider-bg img { height: 461px; }
}
/* runda 6, poprawki po zrzutach 1 */
.footer-bg { display: block; }
.footer-bg img { display: none; }
.w1-sekcja.uklad-lista .about-text-item-heading .icon-wrapper { text-align: left; width: auto; justify-content: flex-start; }
.w1-sekcja .about-text-item .text, .w1-sekcja .about-text-item .text p, .w1-sekcja .about-text-item .text li { text-align: left; }
#nasze-kategorie .section-heading::before { display: none; }
@media screen and (min-width: 1140px) {
  /* 04 certyfikaty: sekcja krem 40 + pas bt-a 40 = 80 */
  .mainpage .w1-sekcja.boxText { padding-top: 80px; padding-bottom: 80px; }
}
/* runda 6, poprawki po zrzutach 2: karta produktu (makieta karta-produktu-w1.html) */
.w1-sekcja .text span[style*="font-size"] { font-size: inherit !important; }
.w1-sekcja .text h2, .w1-sekcja .text h3, .w1-sekcja .text h4 { margin: 15px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--w1-tekst); }
.w1-sekcja.w1-ti--blok .text > h2:first-child, .w1-sekcja.w1-ti--instrukcja .text > h2:first-child { margin: 0 0 10px; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; }
/* 02-1 opis: parametry (<h3|p><span><strong>Etykieta:</strong> wartosc) jak .parametry w makiecie */
/* Parametry produktu z pol panelu (19.09.2026). Ten sam wyglad, co dawna tabelka
   skladana z `h3 > span > strong`, ale niezalezny od tego, co wypluje edytor. */
.w1-sekcja .ti-parametry { margin: 18px 0 0; }
.w1-sekcja .ti-parametr { display: grid; grid-template-columns: 128px 1fr; gap: 0 14px; padding: 9px 0; border-top: 1px solid var(--w1-linia); }
.w1-sekcja .ti-parametr dt { margin: 0; padding-top: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-sekcja .ti-parametr dd { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--w1-tekst); }
/* okruchy jak .k-okruchy */
.breadcrumb-container { padding: 0 0 20px; }
.breadcrumb-container .breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-cichy); background: none; }
.breadcrumb-container .breadcrumb > li { padding: 0; margin: 0; display: inline-flex; align-items: center; }
.breadcrumb-container .breadcrumb > li::before, .breadcrumb-container .breadcrumb > li .icon { display: none; }
/* STRZALKA miedzy krokami zamiast kropki (decyzja wlasciciela 02.09). Makieta
   karty (.k-okruchy) miala „·" w kolorze kreski - przy wersalikach i rownym
   odstepie wszystkie czlony wygladaly jak rzad przyciskow, a nie jak sciezka.
   Strzalka to ten sam znak, ktorego W1 uzywa wszedzie, gdzie cos prowadzi dalej. */
.breadcrumb-container .breadcrumb > li + li::before {
  content: "\2192"; display: inline; margin: 0 9px 0 1px;
  color: var(--w1-cichy); letter-spacing: 0; font-size: 12px;
}
.breadcrumb-container .breadcrumb > li > a, .breadcrumb-container .breadcrumb > li > span { color: inherit; text-decoration: none; }
/* Kroki wczesniejsze sa odnosnikami i maja tak wygladac; biezaca strona jest
   ciemna i nieklikalna, wiec widac, gdzie sciezka sie konczy. */
.breadcrumb-container .breadcrumb > li > a { color: var(--w1-cichy); transition: color .18s ease; }
.breadcrumb-container .breadcrumb > li > a:hover,
.breadcrumb-container .breadcrumb > li > a:focus-visible {
  color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px;
}
.breadcrumb-container .breadcrumb > li:last-child, .breadcrumb-container .breadcrumb > li:last-child > a { color: var(--w1-tekst); }
/* galeria: bez strzalek, 4 miniatury na cala szerokosc kadru */
.w1-karta .product-view-slider-arrows { display: none !important; }
/* 05 kafle podstron (stary typ tiles na karcie): nadtytul zloty + tytul bialy jak .kafel-w1 */
.w1-sekcja.tiles-section .news-item-content .text p:first-child { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #E5CD9A; }
.w1-sekcja.tiles-section .news-item-content .text p + p { margin-top: 6px; font-size: 21px; color: #fff; }
/* 02b porownanie: glowka w bloku (tytul, opis pod nim), bez nadtytulu */
.w1-sekcja.uklad-porownanie .text-collection-glowa, .w1-sekcja.comparison-section .section-heading { display: block !important; }
.w1-sekcja.uklad-porownanie .text-collection-glowa::before, .w1-sekcja.comparison-section .section-heading::before { display: none; }
.w1-sekcja.uklad-porownanie .text-collection-glowa .section-title, .w1-sekcja.comparison-section .section-heading .section-title { font-size: 22px; }
.w1-sekcja.uklad-porownanie .text-collection-glowa > .text, .w1-sekcja.comparison-section .section-heading > .text { margin-top: 8px; max-width: 82ch; }
/* 07 kategorie: na telefonie pierwsze zdanie i wielokropek (decyzja 07 B) */
.kat-lead::after { content: none; }
@media screen and (min-width: 1140px) {
  /* 14.09.2026: bylo `max-width: none`, przez co miniatury szly na pelna kolumne, a kadr zdjecia
     zostal na 95% (decyzja wlasciciela 15.08, panel-zakupu.css). Szerokosc 95% ustawia teraz regula
     `.w1-karta .product-view-nav-slider { width: 95% }` nizej w tym pliku (runda 6, poprawki 5). */
  .product-view-sections-wrapper .btn-section-tab { font-size: 10.5px; padding: 17px 20px; }
  body:has(.shop-product-view) .w1-sekcja .product-list-slider .swiper-wrapper { grid-template-columns: repeat(3, 1fr); }
  .w1-sekcja.w1-ti--blok .text > h2:first-child, .w1-sekcja.w1-ti--instrukcja .text > h2:first-child { font-size: 24px; }
  .w1-sekcja.uklad-porownanie .text-collection-glowa .section-title, .w1-sekcja.comparison-section .section-heading .section-title { font-size: 24px; }
  /* glowka porownania jest blokiem (tytul nad opisem), wiec opis nie musi trzymac sie
     miary czytania z ukladu dwukolumnowego - idzie na cala szerokosc pasa
     (zyczenie wlasciciela 19.09.2026) */
  .w1-sekcja.comparison-section .section-heading > .text { max-width: none; }
  /* 28.09.2026: 340/460 px z makiety (pas 1440) byly stale, a kontener urosl do 1920 - przy 1920
     znak zajmowal 18% sekcji. Do 1440 bez zmian, wyzej rosnie do 460/600 px. */
  .w1-sekcja--krem.w1-ti--blok .text-image-section-image img { max-width: clamp(340px, 24vw, 460px); margin: 0 auto; }
  .w1-sekcja--krem.w1-ti--blok .text-image-section-inner { grid-template-columns: 1fr clamp(460px, 30vw, 600px); }
}
/* runda 6, poprawki po zrzutach 2: telefon (makieta strona-glowna-w1-mobile.html) */
@media screen and (max-width: 1139px) {
  .kat-reszta { display: none; }
  .kat-lead::after { content: " ..."; color: var(--w1-cichy); }
  /* naglowek: szukajka przed koszykiem, burger cienki czarny */
  .w1-glowa .header-right { display: flex; align-items: center; }
  .w1-glowa .header-right .mainsearch { order: -1; }
  .w1-glowa .main-menu-button { width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; padding: 0; }
  .w1-glowa .main-menu-button span { display: block; width: 18px; height: 1.5px; background: var(--w1-tekst); margin: 0; border-radius: 0; transition: none; position: static; }
  /* pas ikon: ik-a - nazwa 12,5, opis 11,5, ikona nad tekstem z odstepem 10 */
  .w1-sekcja.icons-section .icons-section-item { gap: 10px; }
  .w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { font-size: 12.5px; margin: 0; letter-spacing: .02em; }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 11.5px; margin-top: 3px; }
  .w1-sekcja.icons-section .icons-section-item .icon-wrapper, .w1-sekcja.icons-section .icons-section-item .icon-wrapper svg { width: 30px; height: 30px; max-width: 30px; }
  /* certyfikaty: tekst 13 */
  section.boxText.w1-sekcja .section-inner .content-right, section.boxText.w1-sekcja .section-inner .content-right p { font-size: 13px; }
  /* opinie: ocena zbiorcza w jednej linii (op-srednia.mala + op-razem) */
  .w1-sekcja.comment-section .rating-summary { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .w1-sekcja.comment-section .rating-summary-nr { font-size: 22px; }
  .w1-sekcja.comment-section .rating-summary-stars svg { width: 78px; height: 14px; }
  .w1-sekcja.comment-section .rating-summary-count { width: auto; margin: 0 0 0 4px; }
  .w1-sekcja.comment-section .opinion-list, .w1-sekcja.comment-section .opinion-list .swiper-wrapper { width: auto; }
  /* blog: kadr 88 px z lewej, data nad tytulem w prawej kolumnie */
  .w1-sekcja.news-section .news-item { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 1fr; gap: 0 13px; align-items: start; width: auto !important; min-width: 0; }
  .w1-sekcja.news-section .news-item-image { grid-row: 1 / span 2; width: 88px; aspect-ratio: auto; height: 100%; }
  .w1-sekcja.news-section .news-item-date { grid-column: 2; margin-top: 0; }
  .w1-sekcja.news-section .news-item-name { grid-column: 2; }
  .w1-sekcja.news-section .news-slider-list, .w1-sekcja.news-section .news-slider-list .swiper-wrapper { width: auto; overflow: hidden; }
  /* stopka: kontakt i platnosci zawsze otwarte, "+" zamiast strzalki */
  .footer-col-3 .footer-col-content, .footer-payments .footer-col-content { display: block !important; }
  .footer-col-3 .footer-col-heading .icon, .footer-payments .footer-col-heading .icon { display: none; }
  .footer-col-heading .icon svg { display: none; }
  .footer-col-heading .icon::after { content: "+"; color: #C9A76B; font-size: 15px; font-weight: 300; }
  .footer-col-heading.active .icon { transform: none; }
  .footer-col-heading.active .icon::after { content: "\2212"; }
  .footer-col-3 .footer-col-title, .footer-payments .footer-col-title { font-size: 10px; letter-spacing: .18em; color: #C9A76B; }
  .footer-text-social .social-list { order: 0; }
}
/* runda 6, poprawki 3: lista 03-2 - stary motyw justuje p z wieksza specyficznoscia; nazwa 16/1.3 */
.w1-sekcja .about-text-item .text p, .w1-sekcja .about-text-item .text li { text-align: left !important; }
.w1-sekcja.uklad-lista .about-text-item-name { line-height: 1.3; }
/* runda 6, poprawki 4 (pomiar m3.js) */
/* karta: okruchy - stary motyw daje <a> 15 px; miniatury galerii - stara szerokosc 600 px na srodku */
.breadcrumb-container .breadcrumb > li > a, .breadcrumb-container .breadcrumb > li > span, .breadcrumb-container .breadcrumb > li > a > span { font-size: inherit !important; letter-spacing: inherit; }
/* kafle podstron (tiles): markup <p>nadtytul<br><strong>tytul</strong></p> */
.w1-sekcja.tiles-section .news-item-content .text p, .w1-sekcja.tiles-section .news-item-content .text p:first-child { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #E5CD9A; line-height: 1.4; }
.w1-sekcja.tiles-section .news-item-content .text p strong { display: block; margin-top: 6px; font-size: 21px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #fff; line-height: 1.25; }
.w1-sekcja.tiles-section .news-item-content .text br { display: none; }
/* blog: Swiper na glownej ustawia szerokosc wrappera inline */
.w1-sekcja.news-section .news-slider-list .swiper-wrapper { width: auto !important; }
@media screen and (min-width: 1140px) {
  /* Szerokosc JAWNIE 95%, nie `auto`: rodzic `.product-view-photos-inner` to kolumna flex, a w niej
     `margin: auto` po bokach zweza element do szerokosci tresci (zmierzone 14.09: 600 px na srodku).
     95% rodzica = tyle samo co kadr (`.product-view-slider` max-width 95% w wrapperze tej samej szerokosci). */
  .w1-karta .product-view-nav-slider { width: 95%; margin: 8px auto 0; }
  .w1-karta .product-view-nav-slider .swiper-wrapper { grid-template-columns: repeat(4, 1fr) !important; width: auto !important; }
  .w1-karta .product-view-nav-slider .product-view-nav-slide { width: auto !important; height: auto !important; }
}
@media screen and (max-width: 1139px) {
  .w1-glowa .main-menu-button span { height: 1.5px !important; min-height: 1.5px; }
  .w1-sekcja.comment-section .opinion-list { margin: 0 !important; width: auto !important; }
  .w1-sekcja.tiles-section .news-item-content .text p strong { font-size: 15px; margin-top: 4px; }
  .w1-sekcja.videoGuide-section .vg-rysunek { margin: 0 calc(-1 * var(--container-padding)); padding: 20px var(--container-padding); }
  .footer-text-social .social-list { order: -1; }
}
/* runda 6, poprawki 5: pas kafli na telefonie liczy Swiper (slidesPerView 1.28, spaceBetween 12) - bez wymuszania szerokosci */
@media screen and (max-width: 1139px) {
  .w1-sekcja .product-list-slider { margin-left: 0; margin-right: 0; }
  .w1-sekcja .product-list-slider .shop-product-box.swiper-slide { padding: 0; }
  .w1-sekcja .product-list-slider:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 12px; }
  .w1-sekcja .product-list-slider:not(.swiper-initialized) .shop-product-box { flex: 0 0 78%; }
  /* karta: galeria na cala szerokosc ekranu (makieta .wycinek .k-galeria) */
  .w1-karta .product-view-photos { margin-left: calc(-1 * var(--container-padding)); margin-right: calc(-1 * var(--container-padding)); }
}
/* runda 6, poprawki 6 */
.w1-sekcja.tiles-section .news-item::before { display: none !important; }
@media screen and (max-width: 1139px) {
  .w1-glowa .main-menu-button span { margin: 0 !important; top: auto !important; }
}
/* runda 6, poprawka 7: kafel w karuzeli popupu (waski) - przycisk >= 44 px jak .kp-siatka.waski .kp-cta */
.product-add-to-basket-modal .w1-kafel .shop-add-to-basket .btn { min-height: 44px; }
/* runda 6, poprawka 8: przycisk kafla - makieta 42,5 px (12+10 przy line-height 1.65); 44 to prog dotyku z decyzji 08, roznica 1,5 px */
.w1-kafel .shop-add-to-basket .btn { min-height: 44px; line-height: 1.65; }
/* runda 6, poprawka 9: telefon - naglowek w jednym wierszu (burger spadal do drugiego), kafle podstron typu tiles w kontenerze */
@media screen and (max-width: 1139px) {
  .header-inner.w1-glowa, .w1-glowa .header-right { flex-wrap: nowrap; }
  .w1-glowa .header-right { flex: none; margin-left: auto; }
  .w1-sekcja.tiles-section .news-list { margin-left: 0; margin-right: 0; }
}
/* runda 6, poprawka 10: szukajka przed koszykiem (przycisk szukajki lezy poza .mainsearch) */
@media screen and (max-width: 1139px) { .w1-glowa .header-right .mainsearch, .w1-glowa .header-right .mainsearch-rwd-button, .w1-glowa .header-right > .mainsearch-rwd { order: -1; } .w1-glowa .header-right .basket-box, .w1-glowa .header-right .basket-box-btn { order: 0; } }

/* ==== runda 7 (30.08): uwagi wlasciciela - odstepy pod naglowkami i tlo sekcji ====
   1-3 to jedna przyczyna w dwoch odmianach: stary motyw trzyma pozycje we flexie z wlasnym `gap`
   (--space-25 = 25 px), a pas ikon ma w tresci z panelu <strong>nazwa</strong><br>opis - przy nazwie
   wyswietlanej blokowo <br> dokladal pusty wiersz wysokosci interlinii. Makieta: nazwa -> tekst 7 px
   (wiedza), 5 px (ikony), 3 px (blog). */
/* 1. sekcje wiedzy (textCollection): odstep robi wylacznie margines tekstu (7 px), nie gap */
.w1-sekcja.text-collection-section .about-text-item { gap: 0; }
/* 2. pas ikon: <br> po nazwie generowal pusty wiersz (18,85 px) */
.w1-sekcja.icons-section .icons-section-item .text br { display: none; }
.w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { margin-bottom: 4px; }
/* 3. blog: kafel w kolumnie ma odstepy z marginesow (data 10 px pod kadrem, tytul 3 px pod data) */
/* runda 11: bylo `gap: 0` - kasowalo tez odstep kadr/tekst na telefonie; patrz punkt 8 nizej */
.w1-sekcja.news-section .news-item { row-gap: 0; }
/* 4. tlo sekcji na pelna szerokosc okna: base.css (biblioteka dostawcy) ogranicza body do 1920 px,
   wiec na szerszym ekranie krem i zielen pasa konczyly sie przed krawedzia. Kontener tresci
   zostaje 1440 i jest wysrodkowany - zmienia sie tylko zasieg tla. */
body { max-width: none; }
/* 5. "calosc sklepu na 1440" (decyzja 30.08): .container ze starego motywu ma 1720 px, wiec listing
   kategorii, koszyk i podstrony byly szersze niz sekcje W1. Jedna miara dla calego sklepu. */
.container { max-width: 1920px; }

/* ==== Paczka 5 (02.09.2026): arkusz koszyka ==============================
   Arkusz to modal bootstrapa z dodana klasa .w1-arkusz (static/js/w1-arkusz.js).
   Uklad trzech warstw - flex column, przewijana .modal-body, nieskurczliwa
   .modal-footer - JUZ ISTNIEJE w style.css dla .product-add-to-basket-modal,
   wiec tu dokladamy tylko pozycje przy dolnej krawedzi, uchwyt i szate W1.
   Projekt: docs/superpowers/specs/2026-09-02-w1-arkusz-koszyka-design.md */
.modal.w1-arkusz .modal-dialog {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: 100%; margin: 0;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
/* Bootstrap 3 wjezdza oknem z gory (translate(0,-25%)) - arkusz ma wychodzic z dolu. */
.modal.w1-arkusz.fade .modal-dialog { transform: translateY(100%); }
.modal.w1-arkusz.in .modal-dialog { transform: translateY(0); }

.modal.w1-arkusz .modal-content {
  background: #fff; border: 0; border-radius: 0;
  /* jedyny cien w arkuszu: odrywa go od strony pod spodem */
  box-shadow: 0 -12px 40px rgba(26, 26, 24, .18);
  max-height: 92vh;
}
.w1-arkusz .w1-uchwyt { padding: 9px 0 7px; display: flex; justify-content: center; flex: 0 0 auto; }
/* kreska, nie pigulka - wariant W1 nie ma zaokraglen */
.w1-arkusz .w1-uchwyt span { width: 38px; height: 3px; background: rgba(26, 26, 24, .22); display: block; }

/* Naglowek: BEZ zielonej belki. style.css maluje .product-add-to-basket-modal
   .modal-header na zielono, przez co zloty nadtytul byl na niej nieczytelny
   (zrzut 02.09). Decyzja z makiety 19.08: „Dodano do koszyka" bylo powiedziane
   trzy razy najglosniejszymi srodkami - zostaje sam zloty nadtytul. */
/* Naglowek jako wiersz: krzyzyk stal 15 px NIZEJ niz nadtytul (jego pole
   dotykowe 44 px zaczynalo sie u gory naglowka i wystawalo nawet pod niego),
   bo bootstrap wypuszcza go floatem. Flex z align-items: center stawia oba
   na jednej wysokosci niezaleznie od tego, ktore jest wyzsze.
   Kolejnosc w HTML to najpierw przycisk, potem tytul - stad `order`. */
.w1-arkusz .modal-header {
  background: #fff; border-bottom: 1px solid #E3DFD7; padding: 3px 22px 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.w1-arkusz .modal-header .modal-title { order: 1; flex: 1 1 auto; }
/* position: static JEST tu konieczne: krzyzyk jest pozycjonowany ABSOLUTNIE
   (style sklepu), a element wyjety z przeplywu nie podlega flexowi - samo
   align-items: center nie mialo do czego sie odniesc i roznica urosla z 15
   do 26 px. Dopiero po powrocie do przeplywu wyrownanie dziala. */
.w1-arkusz .modal-header .close {
  order: 2; position: static; float: none; margin: 0; flex: 0 0 auto;
}
.w1-arkusz .modal-title {
  font-size: 12px; line-height: 18px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #876C38;
}
/* Ptaszek przed nadtytulem (makieta 19.08): jedyne miejsce, gdzie okno mowi
   „udalo sie" - zielona belka i zielony komunikat z niego zniknely. */
.w1-arkusz .modal-title::before {
  content: '\2713'; margin-right: 10px; font-size: 13px; letter-spacing: 0;
}
.w1-arkusz .modal-header .close {
  color: #1A1A18; opacity: .55; text-shadow: none;
  /* krzyzyk to jedyna droga zamkniecia klikiem na PC - musi byc celem >= 44 px */
  min-width: 44px; min-height: 44px;
}
.w1-arkusz .modal-header .close:hover, .w1-arkusz .modal-header .close:focus-visible { opacity: 1; }
/* gorny odstep, zeby zdjecie pozycji nie dotykalo kreski naglowka */
.w1-arkusz .modal-body { padding: 14px 22px 12px; }

/* Stopka wg makiety: kremowa, kolumna, przycisk na pelna szerokosc, link pod nim. */
.w1-arkusz .modal-footer {
  border-top: 1px solid #E3DFD7; padding: 13px 20px 16px; background: #F7F4EC;
  display: flex; flex-direction: column; gap: 9px; text-align: center;
}
/* Glowna akcja to .btn-w1.pelny z makiety: grafit, nie zielen sklepu. */
.w1-arkusz .modal-footer .btn,
.w1-arkusz .modal-footer .btn-primary {
  border-radius: 0; min-height: 44px; width: 100%; margin: 0;
  background: #1A1A18; border: 1px solid #1A1A18; color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.w1-arkusz .modal-footer .btn:hover, .w1-arkusz .modal-footer .btn:focus-visible {
  background: #34312A; border-color: #34312A; color: #fff;
}
/* „Kontynuuj zakupy" mial 34 px wysokosci - ponizej progu dotyku z decyzji 08 (pomiar 02.09). */
.w1-arkusz .modal-footer .modal-continue-link {
  min-height: 44px; width: 100%; background: none; border: 0; color: #6B675E;
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
  padding: 0 4px; margin: 0;
}

/* --- tresc pozycji -------------------------------------------------------
   Potwierdzenie „dodano do koszyka" bylo w oknie powiedziane trzy razy
   najglosniejszymi srodkami (zielona belka, zielony komunikat, plakietka x1).
   Zostaje sam zloty nadtytul - decyzja z makiety 19.08. */
.w1-arkusz .modal-body > .alert, .w1-arkusz .alert-success { display: none; }
.w1-arkusz .shop-item-count { display: none; }
/* BEZPOSREDNIE dziecko: helper price() renderuje wlasny .price-box wewnatrz
   wiersza „N × cena", wiec selektor bez „>" schowalby takze ten wiersz. */
.w1-arkusz .top-box-product[data-quantity="1"] .top-box-bottom > .price-box { display: none; }

/* Zdjecie dodanej pozycji: 56 px to bylo za malo, zeby rozpoznac produkt.
   Kadr ZWEZONY do zdjecia i bez obramowania - kwadratowy kadr 96x96 z ramka
   1 px zostawial widoczna ramke wokol prostokatnej fotografii (obie uwagi
   wlasciciela 02.09). Zrodlo to preset 'min' = 354 px, wiec zapasu jest az nadto.

   Bazowo (shop-basket.css) zdjecie jest POZYCJONOWANE ABSOLUTNIE i wysrodkowane
   w kadrze o stalym rozmiarze - dlatego kadr z `width: auto` zapadalby sie do
   zera. W arkuszu wracamy do zwyklego przeplywu i kadr oblepia zdjecie. */
.w1-arkusz .top-box-product-image {
  width: auto; height: auto; border: 0; background: none; line-height: 0;
}
.w1-arkusz .top-box-product-image a { width: auto; height: auto; }
.w1-arkusz .top-box-product-image img {
  position: static; transform: none;
  height: 120px; width: auto; max-width: none; max-height: 120px; object-fit: contain;
}
.w1-arkusz .top-box-left { width: auto; }

/* Data waznosci: etykieta wersalikami, data obok - jak w makiecie */
.w1-arkusz .top-box-product-expiration { font-size: 13px; color: #6B675E; margin-top: 4px; }
.w1-arkusz .top-box-product-expiration .caption {
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: #6B675E; margin-right: 7px;
}
.w1-arkusz .top-box-product-expiration .wartosc { color: #6B675E; }

/* Kwoty pozycji wieksze, „Razem" jako ZLOTA etykieta po prawej z kwota pod nia
   (makieta 19.08) - wczesniej byla szara etykieta z dwukropkiem w jednej linii. */
.w1-arkusz .top-box-bottom {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E3DFD7;
}
.w1-arkusz .top-box-qty-price .price .price-new,
.w1-arkusz .top-box-qty-price .price { font-size: 17px; }
.w1-arkusz .top-box-bottom > .price-box { text-align: right; }
.w1-arkusz .top-box-bottom > .price-box .caption {
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #876C38;
}
.w1-arkusz .top-box-bottom > .price-box .val { font-size: 17px; }
.w1-arkusz .top-box-qty-price { display: flex; align-items: baseline; gap: 5px; }
.w1-arkusz .top-box-qty-price .mnoznik { color: #6B675E; }
.w1-arkusz .top-box-qty-price .price-box { display: flex; align-items: baseline; gap: 4px; }
/* Przy przecenie helper price() daje dwa wiersze (nowa i stara cena) - w arkuszu
   maja stac OBOK siebie, jak w makiecie. Stara przekreslona, wygaszona. */
.w1-arkusz .top-box-qty-price .price-gross,
.w1-arkusz .top-box-qty-price .price-net { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.w1-arkusz .top-box-qty-price .price-old { color: #6B675E; font-size: 13px; text-decoration: line-through; }
.w1-arkusz .top-box-qty-price .unitOfMeasure { color: #6B675E; font-size: 13px; }
.w1-arkusz .top-box-bottom > .price-box .val { color: #3D6800; font-weight: 500; }

/* --- suma koszyka: pod pozycja, nad paskiem progu (makieta .a-suma) ------- */
.w1-arkusz .w1-suma {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #E3DFD7;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.w1-arkusz .w1-suma .etykieta {
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #876C38;
}
.w1-arkusz .w1-suma .kwota {
  font-size: 19px; font-weight: 500; color: #3D6800; font-variant-numeric: tabular-nums;
}

/* --- prog darmowej dostawy w szacie W1 ------------------------------------
   Byl sprzed W1: zaokraglony kafel (radius 8) z zielonym tlem #f2f7ee i torem
   6 px. Makieta 19.08 (.a-prog) ma zamiast tego kreske oddzielajaca, wyciszony
   tekst z kwota wyroznione ciemniejszym oraz tor 2 px - bez tla i zaokraglen,
   jak cala reszta W1. */
.w1-arkusz .prog-dostawy {
  min-height: 0; margin: 15px 0 0; padding: 13px 0 0;
  border-radius: 0; background: none; border-top: 1px solid #E3DFD7;
  font-size: 12.5px;
}
.w1-arkusz .prog-dostawy-tekst { margin: 0 0 7px; color: #6B675E; }
.w1-arkusz .prog-dostawy-tekst b,
.w1-arkusz .prog-dostawy-tekst strong { color: #1A1A18; font-weight: 500; }
.w1-arkusz .prog-dostawy-pasek {
  height: 2px; margin-top: 0; border-radius: 0; background: #E3DFD7;
}
.w1-arkusz .prog-dostawy-wypelnienie { height: 2px; border-radius: 0; background: #3D6800; }
/* Po osiagnieciu progu style.css chowa pasek. Makieta zostawia go jako PELNA
   zielona linie - to nagroda za przekroczony prog, a nie informacja do usuniecia.
   Procent wynosi wtedy 100 (Service/ProgDostawy::stan), wiec linia jest pelna. */
.w1-arkusz .prog-dostawy--osiagniety .prog-dostawy-pasek { display: block; }

/* Nad naglowkiem „Do kompletu" i pod nim bylo lacznie 50 px powietrza
   (25 + 25 ze style.css). W arkuszu, gdzie liczy sie kazdy wiersz, to za duzo -
   i to wlasnie te piksele decydowaly, czy przycisk kafla miesci sie nad stopka. */
/* Blok propozycji oddzielony kreska i ze zlotym nadtytulem „Dobierz" (makieta) */
.w1-arkusz .w1-do-kompletu { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E3DFD7; }
.w1-arkusz .w1-do-kompletu .modal-slider-top { margin-bottom: 12px; }
.w1-arkusz .w1-do-kompletu .w1-nadtytul-komplet {
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #876C38; margin-bottom: 2px;
}
.w1-arkusz .w1-do-kompletu .productTile-grid-title { margin: 0; font-weight: 300; }

/* Dostepnosc tylko wtedy, gdy NIE jest domyslna - „Produkt dostepny" przy kazdej
   pozycji byl szumem, a makieta pokazuje tam zlota etykiete jedynie przy stanach
   nietypowych („Ostatnie sztuki"). Domyslna to id 1. */
.w1-arkusz .w1-do-kompletu .product-box-availability[data-availability="1"] { display: none; }
/* Tu rowniez bez wymuszania koloru - arkusz pokazuje WYLACZNIE stany nietypowe
   (domyslny id 1 jest ukryty wierszem wyzej), wiec „Produkt niedostepny" ma sie
   czerwienic tak samo jak wszedzie indziej. */
.w1-arkusz .w1-do-kompletu .product-box-availability {
  font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}

/* Strzalki karuzeli w szacie W1 - KWADRATOWE, jak wszedzie indziej w tym
   kierunku (.w1-sekcja .btn-arrow: 42x42, biale, cienka kreska). Nie wymyslamy
   dla arkusza osobnego wygladu. */
.w1-arkusz .w1-do-kompletu .btn-arrow {
  border-radius: 0; width: 42px; height: 42px;
  border: 1px solid #E3DFD7; background: #fff; color: #1A1A18;
}
.w1-arkusz .w1-do-kompletu .btn-arrow:hover,
.w1-arkusz .w1-do-kompletu .btn-arrow:focus-visible { border-color: #1A1A18; background: #fff; }
/* Gdy nie ma czego przewijac, Swiper znaczy strzalki klasa lock - maja wtedy
   zniknac, a nie stac martwe (uwaga wlasciciela 02.09). */
.w1-arkusz .w1-do-kompletu .btn-arrow.swiper-button-lock { display: none; }

/* --- propozycje „Do kompletu" --------------------------------------------
   Telefon: WIERSZE zamiast kafli. Powod jest z pomiaru, nie z gustu (makieta
   19.08): widoczna tresc arkusza to 444 px, pionowy kafel zajmuje 247 px
   i jego przycisk nie miesci sie w zadnej wersji; wiersz ma ok. 75 px.
   Swipera na telefonie nie inicjalizuje juz slider.phtml. */
@media screen and (max-width: 1139px) {
  .w1-arkusz .w1-do-kompletu .modal-product-slider-arrows { display: none; }
  .w1-arkusz .w1-do-kompletu .swiper-wrapper { display: block; }
  /* Bez kresek miedzy kaflami i z polowa dawnego odstepu (uwaga wlasciciela
     02.09) - lista ma byc spokojna, a rozdziela ja sam odstep. */
  .w1-arkusz .w1-do-kompletu .shop-product-box {
    width: 100% !important; margin: 0 0 3px; border: 0; padding-bottom: 3px;
  }
  /* flex-direction: row JEST konieczne - bazowy .product-container w style.css
     to juz flex, ale w KOLUMNIE; samo display:flex niczego by nie zmienilo.
     align-items: stretch, zeby przycisk mogl siegac od gory do dolu kafla. */
  /* padding-right robi miejsce na przycisk, ktory jest pozycjonowany: wysokosc
     wierszy siatki bierze sie z tresci, wiec „height: 100%" na przycisku dawalo
     48 px zamiast pelnego kafla. Pozycjonowanie jest odporne na to, ile wierszy
     ma nazwa produktu. */
  /* Ramka wiersza ZOSTAJE (decyzja wlasciciela 02.09) - to od niej ma byc
     odsuniety przycisk, a nie ona usunieta. Padding z prawej robi miejsce na
     przycisk (62) plus jego odstep od ramki (12). */
  .w1-arkusz .w1-do-kompletu .product-container {
    display: flex; flex-direction: row; align-items: stretch;
    gap: 10px; padding: 0 86px 0 0; height: auto; position: relative;
  }
  /* Zdjecie 104 px i kadr ZWEZONY do zdjecia: kremowe tlo kadru zostawialo
     kwadratowa ramke wokol prostokatnej fotografii (uwaga wlasciciela 02.09).
     Zrodlo to preset 'min' = 354 px, wiec zapasu jest az nadto. */
  .w1-arkusz .w1-do-kompletu .product-box-image {
    flex: 0 0 auto; width: auto; height: 104px; aspect-ratio: auto;
    margin: 0; background: none; align-self: center;
  }
  .w1-arkusz .w1-do-kompletu .product-box-image img {
    height: 104px; width: auto; max-width: none; max-height: 104px; object-fit: contain;
  }
  .w1-arkusz .w1-do-kompletu .w1-kafel-etykiety { display: none; }
  /* siatka dwukolumnowa: tytul, cena i dostepnosc w kolumnie, przycisk obok */
  .w1-arkusz .w1-do-kompletu .product-box-content {
    flex: 1 1 auto; margin: 0; padding: 4px 0; text-align: left;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
  }
  .w1-arkusz .w1-do-kompletu .product-box-title,
  .w1-arkusz .w1-do-kompletu .product-price,
  .w1-arkusz .w1-do-kompletu .product-box-availability { margin: 0; }
  /* Kolumna tekstu jest waska (zdjecie + przycisk zabieraja swoje), wiec dluzsze
     nazwy i „Produkt dostepny" lamaly sie na dwa wiersze i wiersze listy mialy
     rozna wysokosc - a mial to byc rowny, ciasny spis. Nazwa najwyzej dwa
     wiersze, dostepnosc jeden. */
  .w1-arkusz .w1-do-kompletu .product-box-title {
    font-size: 13.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .w1-arkusz .w1-do-kompletu .product-box-availability {
    font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Przycisk od gory do dolu kafla, szerszy i w ODWROCONYCH kolorach - wczesniej
     uciekal w prawy gorny rog i sie nie rzucal w oczy (uwaga wlasciciela 02.09). */
  /* Wezszy i z odsunieciem od krawedzi wiersza: pelna czern na 76x104 byla
     zbyt ciezka (uwaga wlasciciela 02.09), a sam pomysl ciemnego przycisku
     zostaje - tylko plamy jest o jedna trzecia mniej. */
  /* Odsuniety od ramki wiersza z kazdej strony - wczesniej dotykal jej prawej
     krawedzi i wygladal jak wcisniety w rog (uwaga wlasciciela 02.09). */
  .w1-arkusz .w1-do-kompletu .shop-add-to-basket {
    position: absolute; right: 12px; top: 10px; bottom: 10px; width: 62px;
    margin: 0; display: flex;
  }
  /* Przycisk Z OBWODKA, nie wypelniony - tak jest w makiecie (.btn-w1), i to
     ona odpowiada na uwage „za duzo czarnego": ciezar bierze na siebie kreska,
     nie plama. */
  .w1-arkusz .w1-do-kompletu .shop-add-to-basket .btn {
    height: 100%; width: 100%; min-height: 44px; white-space: nowrap;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #1A1A18; color: #1A1A18;
  }
  .w1-arkusz .w1-do-kompletu .shop-add-to-basket .btn:hover,
  .w1-arkusz .w1-do-kompletu .shop-add-to-basket .btn:focus-visible {
    background: #1A1A18; border-color: #1A1A18; color: #fff;
  }
  .w1-arkusz .w1-do-kompletu .shop-add-to-basket .btn.disabled { opacity: .45; }
}

/* Szeroki ekran: NIE arkusz przy krawedzi, tylko zwykle okno na SRODKU
   (decyzja wlasciciela 02.09: „z perspektywy klienta jest dziwnie"). Wysuwanie
   od dolu i uchwyt to gest dotykowy - na komputerze nie maja sensu, wiec
   zostaje szata W1 w oknie o znajomym zachowaniu. Szerokosc 720 px jak dotad. */
@media screen and (min-width: 1140px) {
  .modal.w1-arkusz .modal-dialog {
    position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
    width: 720px; max-width: 720px; margin: 0;
    transform: translate(-50%, -50%);
  }
  .modal.w1-arkusz.fade .modal-dialog { transform: translate(-50%, -46%); }
  .modal.w1-arkusz.in .modal-dialog { transform: translate(-50%, -50%); }
  .modal.w1-arkusz .modal-content {
    max-height: calc(100vh - 80px);
    box-shadow: 0 18px 60px rgba(26, 26, 24, .22);
  }
  /* uchwyt to zapowiedz gestu - bez dotyku myli, wiec znika */
  .w1-arkusz .w1-uchwyt { display: none; }
  .w1-arkusz .modal-header { padding-top: 14px; }

  /* --- odzew akcji na duzym ekranie -------------------------------------
     „Za malo sie dzieje i nie widac, ze cos to robi" (uwaga wlasciciela
     02.09). Na dotyku odzewem jest sam palec; myszka potrzebuje trzech
     stanow: najechania, wcisniecia i fokusu z klawiatury. */
  .w1-arkusz .modal-footer .btn,
  .w1-arkusz .modal-footer .modal-continue-link {
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .12s ease;
  }
  /* strzalka, ktora rusza sie pod kursorem - to ona najmocniej mowi
     „to cie gdzies zabiera"; ten sam znak co w pasach „wiecej" w W1 */
  .w1-arkusz .modal-footer .btn::after {
    content: '\2192'; margin-left: 12px; display: inline-block;
    transition: transform .18s ease;
  }
  .w1-arkusz .modal-footer .btn:hover { background: #34312A; border-color: #34312A; }
  .w1-arkusz .modal-footer .btn:hover::after { transform: translateX(4px); }
  .w1-arkusz .modal-footer .btn:active { transform: translateY(1px); }
  .w1-arkusz .modal-footer .btn:focus-visible {
    outline: 2px solid #876C38; outline-offset: 3px;
  }

  .w1-arkusz .modal-footer .modal-continue-link:hover {
    color: #1A1A18; text-underline-offset: 5px;
  }
  .w1-arkusz .modal-footer .modal-continue-link:active { transform: translateY(1px); }
  .w1-arkusz .modal-footer .modal-continue-link:focus-visible {
    outline: 2px solid #876C38; outline-offset: 3px; color: #1A1A18;
  }
  /* Kafle propozycji rozjezdzaly sie w pionie: dluzsza nazwa zawijala sie do
     dwoch wierszy i spychala cene z przyciskiem o 25 px nizej niz u sasiada
     (zmierzone 02.09, uwaga wlasciciela). Cena, dostepnosc i przycisk sa teraz
     przyklejone do DOLU kafla, wiec dlugosc nazwy przestaje je ruszac. */
  .w1-arkusz .w1-do-kompletu .shop-product-box,
  .w1-arkusz .w1-do-kompletu .product-container { height: 100%; }
  /* BEZ width: 100% - .product-box-content ma marginesy 14 px po bokach, wiec
     szerokosc 100% kontenera wypychala przycisk 13 px POZA kafel (uwaga
     wlasciciela 02.09, zmierzone). Jako element flexa dobiera szerokosc sam. */
  .w1-arkusz .w1-do-kompletu .product-box-content {
    display: flex; flex-direction: column; flex: 1 1 auto;
  }
  /* Zdjecie wyzsze niz bazowe 130 px ze style.css, ale NIE dowolnie: przy 180 px
     kafle uroslyz tak, ze przycisk „Dodaj" chowal sie pod przyklejona stopke
     (zmierzone 02.09 przy oknie 1440x900). 150 px to najwieksze zdjecie, przy
     ktorym glowna akcja kafla zostaje nad zgieciem. Pilnuje tego asercja
     „przycisk propozycji nad stopka" w w1-p5.test.js. */
  .w1-arkusz .w1-do-kompletu .product-box-image img { max-height: 140px; }
  /* dol kafla: 16 px z .w1-kafel to w arkuszu zbyt duzo, a te 8 px decyduje
     o tym, czy przycisk zmiesci sie nad stopka */
  .w1-arkusz .w1-do-kompletu .product-container { padding-bottom: 8px; }
  /* wszystko od ceny w dol ida na spod - margines automatyczny na pierwszym
     z tej grupy odpycha ja od nazwy niezaleznie od tego, ile ma wierszy */
  .w1-arkusz .w1-do-kompletu .product-price { margin-top: auto; }
}
/* Telefon poziomo (734x343): wysokosci o 316 px mniej, ale szerokosci o 341 px
   wiecej - wiec arkusz przestaje byc jedna kolumna, a stopka schodzi do jednego
   wiersza (makieta .arkusz.poziomy). */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .modal.w1-arkusz .modal-content { max-height: 96vh; }
  .w1-arkusz .w1-uchwyt { padding: 7px 0 5px; }
  .w1-arkusz .modal-header { padding: 3px 22px 8px; }

  /* stopka: przycisk obok linku, nie pod nim - oszczedza caly wiersz */
  .w1-arkusz .modal-footer {
    flex-direction: row; align-items: center; gap: 16px; padding: 10px 20px;
  }
  .w1-arkusz .modal-footer .btn, .w1-arkusz .modal-footer .btn-primary { width: auto; flex: 1 1 auto; }
  .w1-arkusz .modal-footer .modal-continue-link { width: auto; flex: 0 0 auto; }

  /* tresc w dwoch kolumnach: po lewej pozycja, suma i prog, po prawej propozycje */
  .w1-arkusz .modal-body {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start;
  }
  .w1-arkusz .modal-body > * { grid-column: 1; }
  .w1-arkusz .modal-body > .w1-do-kompletu { grid-column: 2; grid-row: 1 / 99; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.w1-arkusz .modal-dialog { transition: none; }
}

/* ==== Paczka 6a (03.09.2026): podstrony szablonowe - O nas, Kontakt, sekcja formularza.
   Warianty A z warsztatu makiet 20.08. Blok stoi na koncu pliku, bo prostuje reguly
   sprzed W1 o tej samej specyficznosci - wczesniej w pliku przegralby kolejnoscia. */

/* --- miara czytania. `.container-md` istnieje w dziewieciu szablonach i NIE wolno jej
   zwezac globalnie (notatka w style.css), wiec zawezamy ja tylko tam, gdzie W1 jej uzywa.
   Bez tego tresc /b2b rozlewala sie na cale 1920 px i byla wysrodkowana. */
.w1-page-tresc.container-md,
.w1-onas-punkty.container-md,
.w1-onas-fakty.container-md,
.w1-sekcja-formularz .container-md { max-width: 860px; }
.w1-page-tresc, .w1-onas-punkty, .w1-onas-fakty { text-align: left; }
.w1-page-tresc p, .w1-onas-punkty p { text-align: left; }

/* --- wspolna sekcja formularza: /b2b, /kontakt i modul page.

   SPROSTOWANIE (03.09, po sprawdzeniu): pierwsza wersja tego komentarza mowila, ze
   klasy `w1-section--krem relative` nie mialy w w1.css zadnej reguly. To NIEPRAWDA -
   `.w1-section--krem` stoi w linii 18 i daje kremowe tlo, odkad dolozyla ja sesja B2B.
   Tlo sekcji bylo wiec poprawne. Wyglad sprzed W1 robily TRZY rzeczy w stroju
   standardowego formularza kontaktowego (style.css):
     - `.contact-form-inner::before` - zielony prostokat na z-index -2,
     - `.contact-form-title { color: #fff; text-align: center }`,
     - `.contact-form-inner { max-width: 810px; margin-left: auto }` - stad dosuniecie w prawo.
   Strona B2B na testinpost tego nie pokazywala, bo uzywa innego szablonu formularza
   (`b2b-form.phtml`) i nie ma `.contact-form-inner` ani `.contact-form-title`.
   Ta klasa gasi cala trojke - i to jest jej wlasciwe uzasadnienie. */
.w1-sekcja-formularz { background: var(--w1-krem); padding: 44px 0 52px; }
.w1-sekcja-formularz .contact-form-inner { background: none; padding: 0; box-shadow: none; }
/* Trzy pozostalosci po ciemnym formularzu, ktore same z siebie nie znikaja:
   - `::before` to zielony prostokat na z-index -2; dzis zaslania go tlo sekcji,
     ale tylko dlatego, ze nikt nie nadal sekcji `position`/`z-index`. Gaszenie
     wprost jest tansze niz pilnowanie kolejnosci malowania.
   - `max-width: 810px` + `margin-left: auto` przesuwaly formularz w prawo
     wzgledem tytulu sekcji przy waskich oknach (mniejszy padding kontenera). */
.w1-sekcja-formularz .contact-form-inner::before { display: none; }
.w1-sekcja-formularz .contact-form-inner { max-width: none; margin-left: 0; margin-right: 0; }
.w1-sekcja-formularz .contact-form-container { background: none; padding: 0; max-width: none; margin: 0; }
/* Zielona kreska nad tytulem jak `.h-pod` w makiecie. Rozmiar celowo NIZSZY niz
   tytul strony (58 px po skali): to naglowek podrzedny, nie druga glowa ekranu. */
.w1-sekcja-formularz .contact-form-title {
  position: relative; margin: 0 0 26px; padding-top: 15px;
  font-family: "Red Hat Display", system-ui, sans-serif;
  font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--w1-tekst); text-align: left;
}
.w1-sekcja-formularz .contact-form-title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--w1-zielen);
}
/* CALY stroj formularza sprzed W1 zakladal ciemne tlo: etykiety, zgody i tekst sa
   BIALE, a pola nie maja ramki. Na kremie to znika. Selektory ida wiec przez
   `.contact-form-container .form`, zeby MIEC 0,4,0 - reguly z style.css maja 0,3,0
   i krotsza wersja przegrywala (sprawdzone przez CSS.getMatchedStylesForNode 03.09). */
.w1-sekcja-formularz .contact-form-container .form .form-element-name {
  font-family: "Red Hat Display", system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track);
  text-transform: uppercase; color: var(--w1-zloto);
}
.w1-sekcja-formularz .contact-form-container .form .form-control {
  font-family: "Red Hat Display", system-ui, sans-serif;
  border: 1px solid var(--w1-linia); border-radius: 0; background: #fff; box-shadow: none;
}
/* Czerwien bledow walidacji byla dobierana pod ciemna zielen (#ff7a77). Na kremie
   komunikat jest praktycznie nieczytelny. `!important`, bo regula zrodlowa tez je ma. */
.w1-sekcja-formularz .contact-form-container .form .alert-block .error { color: var(--w1-alarm) !important; }
.w1-sekcja-formularz .contact-form-container .form-element-option-text,
.w1-sekcja-formularz .contact-form-container .text {
  color: var(--w1-cichy);
}
.w1-sekcja-formularz .row-flex-center { justify-content: flex-start; margin-top: 28px; }
/* Czern jak `.w1-btn` - patrz uzasadnienie przy tamtej regule. Zielen tutaj byla
   moim bledem spojnosci z paczki 6a: przeniosla konwencje z makiety B2B na /kontakt,
   podczas gdy reszta sklepu ma przycisk glowny czarny. */
.w1-sekcja-formularz .btn {
  border-radius: 0; background: var(--w1-tekst); border-color: var(--w1-tekst); color: #fff;
  font-weight: 600; letter-spacing: .04em;
}
.w1-sekcja-formularz .btn:hover, .w1-sekcja-formularz .btn:focus-visible {
  background: #34312A; border-color: #34312A; color: #fff;
}

/* --- Pas korzysci i opakowania na kremie (przelacznik „Tlo kremowe" z panelu).
   Sama klasa `w1-section--krem` NIE wystarczy: `.benefits-section` ma ciemne tlo
   ustawione DALEJ w pliku przy tej samej specyficznosci (linia 40), wiec wygrywa
   kolejnoscia. Do tego pas jest zaprojektowany pod ciemne tlo - napisy sa jasne,
   ikony odwrocone filtrem, a linie miedzy pozycjami niemal biale. Na kremie
   trzeba odwrocic komplet, inaczej sekcja jest nieczytelna. */
.benefits-section.w1-section--krem { background: var(--w1-krem); color: var(--w1-tekst); }
.benefits-section.w1-section--krem .w1-tytul { color: var(--w1-tekst); }
.benefits-section.w1-section--krem .w1-opis { color: var(--w1-cichy); }
/* Na kremie ikony maja byc CZARNE. Plik jest bialy, wiec `invert(1)` daje dokladna
   czern - zmierzone na canvasie: rgb(255,255,255) bez filtra, rgb(0,0,0) z invert(1).
   `brightness(1.4)` bylo tu zbedne: na czerni nic nie zmienia. */
.benefits-section.w1-section--krem .benefits-item img { filter: invert(1); }
.benefits-section.w1-section--krem .benefits-item span { color: var(--w1-cichy); opacity: 1; }
.benefits-section.w1-section--krem .benefits-item { border-top-color: var(--w1-linia); }
.packages-section.w1-section--krem { background: var(--w1-krem); }

/* --- Kontakt: dane przede wszystkim (wariant A) */
.w1-kontakt { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
/* Pozycje jedna pod druga, rozdzielone wlosowa linia - uklad z makiety
   (`.kontakt-duzy .poz`). Trzy kolumny odpadaja: adres podmiotu jest czterowierszowy
   i przy rownych kolumnach zostawialby dwie dziury obok telefonu i e-maila. */
/* `max-width` juz w regule bazowej: przy 1024 px wlosowe linie biegly przez cale
   984 px, a formularz pod nimi byl juz przyciety do 860 - blok danych „rozjezdzal
   sie" z sekcja nizej. Na telefonie ten limit i tak nie ma czego ograniczac. */
.w1-kontakt-dane { display: block; max-width: 860px; padding: 8px 0 44px; }
.w1-kontakt-poz { padding: 15px 0; border-top: 1px solid var(--w1-linia); }
.w1-kontakt-poz:first-of-type { border-top: 0; padding-top: 0; }
.w1-kontakt-etykieta {
  display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto);
}
.w1-kontakt-wartosc {
  display: inline-block; font-size: 24px; font-weight: 500; line-height: 1.2;
  color: var(--w1-tekst); text-decoration: none; border-bottom: 1px solid transparent;
}
.w1-kontakt-wartosc:hover, .w1-kontakt-wartosc:focus-visible {
  color: var(--w1-tekst); text-decoration: none; border-bottom-color: var(--w1-tekst);
}
.w1-kontakt-adres, .w1-kontakt-adres p {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--w1-cichy);
}
/* Uklad Kontaktu (03.09, druga uwaga wlasciciela): dane po lewej, formularz po
   prawej. Na telefonie kolumny ida jedna pod druga, a formularz jest kremowym
   PANELEM - stad nadpisanie paddingu `w1-sekcja-formularz`, ktory jako pas na
   dole mial 44px w pionie i zero w poziomie (tresc kleilaby sie do krawedzi
   panelu). Stroje pol zostaja na `w1-sekcja-formularz` - patrz komentarz tam. */
.w1-sekcja-formularz.w1-kontakt-formularz { padding: 26px 20px 30px; margin: 4px 0 44px; }

/* Sekcja tekstowa BEZ zdjecia: siatka `1fr 38%` zostawiala prawa kolumne pusta.
   Zwijamy do jednej kolumny i trzymamy miare czytania, zeby wiersze nie rozjechaly sie
   na cale 1920 px. `uklad-pas` (5 kolumn) robi to samo od 03.09 - to ten sam wzorzec. */
.w1-sekcja.text-collection-section.bez-zdjecia .text-collection-inner { display: block; }
.w1-sekcja.text-collection-section.bez-zdjecia .text-collection-content { width: auto; max-width: 860px; }
.w1-sekcja.uklad-pas.bez-zdjecia .text-collection-content { max-width: none; }

/* --- Typ sekcji „cytat" (typ 16 z warsztatu sekcji 25.08), wariant A: typograficzny.
   Krem, zlota kreska z lewej, lekka grubosc pisma - ma sie czytac jak wypowiedz, nie jak
   naglowek. Wartosci z makiety `sekcje-w1.html` (.cyt-a): telefon 18-19 px, pas 1140 26 px
   (blok skali pisma przeliczy to na kontener 1440). `blockquote` z Bootstrapa ma wlasny
   padding, ramke 5 px i 17,5 px - zerujemy je, bo inaczej wygrywaja z makieta. */
.w1-cytat { background: var(--w1-krem); padding-top: 34px; padding-bottom: 34px; }
.w1-cytat-tresc { max-width: 780px; margin: 0; border-left: 2px solid var(--w1-zloto); padding-left: 16px; }
.w1-cytat-tekst { margin: 0; padding: 0; border: 0; font-size: 19px; font-weight: 300; line-height: 1.45; color: var(--w1-tekst); text-wrap: balance; }
.w1-cytat-tekst p { margin: 0; font-size: inherit; line-height: inherit; }
.w1-cytat-zrodlo { margin-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
@media screen and (min-width: 1140px) {
  .w1-cytat { padding-top: 54px; padding-bottom: 54px; }
  .w1-cytat-tresc { padding-left: 26px; }
  .w1-cytat-tekst { font-size: 26px; }
}

/* --- O nas: wstep (zdjecie obok tekstu). 11.09: kadr pelna szerokoscia rozciagal pionowe
   zdjecie strony i tekst wisial samotnie na srodku. Teraz to jeden blok: zdjecie w kolumnie,
   obok wprowadzenie i fakty. Na telefonie wszystko idzie jedno pod drugim. */
.w1-onas-wstep { padding-top: 30px; padding-bottom: 8px; }
/* `max-width` pilnuje, zeby zdjecie nie bylo powiekszane w pasmie 900-1139, gdzie uklad
   jest jeszcze jednokolumnowy: kolumna ma tam 870 px, a plik z presetu FIT dla pionowego
   zdjecia 720 px. Bez tego wracalo rozmycie, tylko slabsze (zmierzone 1,21 x). */
.w1-onas-wstep-foto { background: var(--w1-krem); overflow: hidden; max-width: 560px; }
.w1-onas-wstep-foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
/* Pierwszy akapit jako wprowadzenie - wiekszy i ciemniejszy od reszty, zeby strona
   miala od czego zaczac. Reszta zostaje cicha, jak w calym W1. */
.w1-onas-wstep .w1-page-tresc { padding-top: 0; padding-bottom: 0; }
.w1-onas-wstep .w1-page-tresc p { color: var(--w1-cichy); }
/* Kazdy akapit z panelu jest owiniety w `div.text`, wiec `> p:first-child` NIE trafia
   (sprawdzone na zywej stronie: wyrozniony akapit sie nie pojawil). Celujemy w akapit
   pierwszego takiego bloku. */
.w1-onas-wstep .w1-page-tresc .text:first-child p { margin-top: 0; font-size: 17px; line-height: 1.6; color: var(--w1-tekst); }
.w1-onas-wstep .w1-onas-fakty { margin-top: 22px; padding-top: 20px; padding-bottom: 0; border-top: 1px solid var(--w1-linia); }
.w1-onas-wstep .w1-onas-fakty li:first-child { padding-top: 0; }
/* Uklad jednokolumnowy (telefon i pasmo do 1139 px). 11.09, uwaga wlasciciela, zmierzone:
   - nad zdjeciem 62 px, bo sumowaly sie DWA paddingi: 32 px dolu glowy strony i 30 px
     gory wstepu. Te 30 px sa dla siatki na komputerze; tutaj zostaje sam odstep glowy,
     taki sam jak nad kadrem na /b2b;
   - pod zdjeciem 2 px, bo zdjecie i tekst stoja jedno pod drugim bez niczego pomiedzy
     (na komputerze rozdziela je przerwa miedzy kolumnami). */
@media screen and (max-width: 1139px) {
  .w1-onas-wstep { padding-top: 0; }
  .w1-onas-wstep-foto { margin-bottom: 20px; }
}
/* 4/5 to WLASNE proporcje dzisiejszego zdjecia (1080 x 1350), wiec nic sie nie przycina.
   Gdyby wlasciciel wgral panorame, `object-fit: cover` zadba o kadr bez rozciagania. */
@media screen and (min-width: 1140px) {
  .w1-onas-wstep { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 0 54px; align-items: start; padding-top: 44px; padding-bottom: 20px; }
  /* Bootstrap 3 wiesza na `.container` czyszczace `::before` i `::after`. W SIATCE
     pseudoelement jest pelnoprawnym elementem: zajmowal pierwsza kolumne, przez co
     zdjecie ladowalo w drugiej, a tekst spadal do nowego wiersza. Grid nie potrzebuje
     czyszczenia, wiec je gasimy. Pulapka dotyczy KAZDEGO `.container`, ktory robimy siatka. */
  .w1-onas-wstep::before, .w1-onas-wstep::after { content: none; }
  .w1-onas-wstep.bez-foto { display: block; }
  .w1-onas-wstep-tresc { max-width: 720px; }
}

/* --- Panele w naglowku (11.09 nocna paczka): koszyk i konto na najechanie.
   Te same zasady co arkusz koszyka: bialy panel, wlosowa ramka, zero zaokraglen, nadtytul
   w zlocie, kwoty w zieleni, jedna czarna akcja. Panele pokazuja sie tylko od 1140 px,
   wiec blok stoi PRZED znacznikiem rundy 8 - skala pisma przeliczy go na kontener 1440. */
.w1-glowa .top-box { border: 1px solid var(--w1-linia); border-radius: 0; box-shadow: 0 12px 34px rgba(26, 26, 24, .13); padding: 16px 18px 18px; font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-glowa .top-box-heading { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--w1-linia); font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
/* Klawiatura: panel otwiera sie takze fokusem (WCAG 2.1.1). Dotad tylko mysza
   (`shop.js` topBoxFocusFix dokleja .hovered na mouseenter). */
@media screen and (min-width: 1140px) {
  .w1-glowa .top-box-container:focus-within .top-box { opacity: 1; pointer-events: all; transform: none; }
}
/* koszyk: pozycje (ten sam partial co arkusz koszyka) */
/* szerokosci i obrazek juz w skali 1,26 (generator skali przelicza tylko pismo) */
.w1-glowa .top-box { width: 410px; }
.w1-glowa .shop-mini-basket { width: 450px; }
.w1-glowa .shop-mini-basket .top-box-product { padding: 0 0 12px; }
.w1-glowa .shop-mini-basket .top-box-product + .top-box-product { padding-top: 12px; border-top: 1px solid var(--w1-linia); }
.w1-glowa .shop-mini-basket .top-box-product-image { width: 80px; height: 100px; border: 0; background: var(--w1-krem); }
.w1-glowa .shop-mini-basket .top-box-product-image .badge { background: var(--w1-tekst); color: #fff; border-radius: 0; font-size: 10px; font-weight: 500; padding: 2px 5px; }
.w1-glowa .shop-mini-basket .top-box-product[data-quantity="1"] .shop-item-count { display: none; }
.w1-glowa .shop-mini-basket .top-box-right { padding-left: 12px; }
.w1-glowa .shop-mini-basket .top-box-product .top-box-right .product-name { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--w1-tekst); }
.w1-glowa .shop-mini-basket .product-name:hover, .w1-glowa .shop-mini-basket .product-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.w1-glowa .shop-mini-basket .top-box-product-expiration { margin-top: 3px; font-size: 11.5px; color: var(--w1-cichy); }
.w1-glowa .shop-mini-basket .top-box-product-expiration .caption { margin-right: 5px; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.w1-glowa .shop-mini-basket .top-box-product .top-box-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; }
.w1-glowa .shop-mini-basket .top-box-qty-price { display: flex; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--w1-cichy); }
.w1-glowa .shop-mini-basket .top-box-qty-price .price-box { display: flex; align-items: baseline; gap: 4px; }
.w1-glowa .shop-mini-basket .top-box-bottom .price.shop-product-price-gross, .w1-glowa .shop-mini-basket .top-box-qty-price .price { font-size: 13px; font-weight: 500; color: var(--w1-tekst); }
.w1-glowa .shop-mini-basket .top-box-product .top-box-bottom > .price-box { float: none; width: auto; text-align: right; }
.w1-glowa .shop-mini-basket .top-box-bottom > .price-box .caption { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-glowa .shop-mini-basket .top-box-bottom > .price-box .val .price { font-size: 14px; font-weight: 500; color: var(--w1-zielen); }
/* przy jednej sztuce „Razem" powiela kwote - chowamy, jak w arkuszu */
.w1-glowa .shop-mini-basket .top-box-product[data-quantity="1"] .top-box-bottom > .price-box { display: none; }
.w1-glowa .shop-mini-basket .price-old { font-weight: 400; color: var(--w1-cichy); text-decoration: line-through; }
.w1-glowa .mini-basket-box .tinyscrollbar .scrollbar .track { background: var(--w1-linia); }
.w1-glowa .mini-basket-box .tinyscrollbar .scrollbar .track .thumb { background: var(--w1-zloto); }
/* suma i jedyna akcja */
.w1-glowa .shop-mini-basket .top-box-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--w1-linia); }
.w1-glowa .shop-mini-basket .summary { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 12px; }
.w1-glowa .shop-mini-basket .summary-left, .w1-glowa .shop-mini-basket .summary-right { float: none; padding: 0; }
.w1-glowa .shop-mini-basket .summary .caption { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-glowa .shop-mini-basket .summary-right, .w1-glowa .shop-mini-basket .summary-right .price { font-size: 17px; font-weight: 500; color: var(--w1-zielen); }
.w1-glowa .top-box .btn-to-basket, .w1-glowa .top-box .btn-primary { display: block; width: 100%; min-height: 44px; padding: 13px 16px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: var(--w1-tekst); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: center; box-shadow: none; }
.w1-glowa .top-box .btn-to-basket:hover, .w1-glowa .top-box .btn-to-basket:focus-visible,
.w1-glowa .top-box .btn-primary:hover, .w1-glowa .top-box .btn-primary:focus-visible { background: #34312A; border-color: #34312A; color: #fff; }
/* pusty koszyk: cichy tekst zamiast niebieskiego alertu */
.w1-glowa .shop-mini-basket .alert { margin: 0; padding: 2px 0; border: 0; background: none; color: var(--w1-cichy); font-size: 13px; }
.w1-glowa .shop-mini-basket .alert .close, .w1-glowa .shop-mini-basket .alert .fa, .w1-glowa .shop-mini-basket .alert .alert-icon { display: none; }

/* konto, zalogowany: pozycje menu jedna pod druga, wlosowe linie, najechanie na kremie */
.w1-glowa .top-box-submenu.top-box { width: 330px; padding: 16px 0 6px; }
.w1-glowa .top-box-submenu .top-box-heading { margin: 0 18px 4px; }
.w1-glowa .top-box-submenu-list ul { margin: 0; padding: 0; list-style: none; }
.w1-glowa .top-box-submenu-list li { border-bottom: 0; }
.w1-glowa .top-box-submenu-list li + li { border-top: 1px solid var(--w1-linia); }
.w1-glowa .top-box-submenu-list a, .w1-glowa .top-box-submenu .user-nav-item-logout { display: block; padding: 11px 18px; background: #fff; color: var(--w1-tekst); font-size: 13.5px; line-height: 1.35; text-decoration: none; }
.w1-glowa .top-box-submenu-list li.active a { background: #fff; color: var(--w1-tekst); box-shadow: inset 2px 0 0 var(--w1-zloto); }
.w1-glowa .top-box-submenu-list a:hover, .w1-glowa .top-box-submenu-list a:focus-visible,
.w1-glowa .top-box-submenu .user-nav-item-logout:hover, .w1-glowa .top-box-submenu .user-nav-item-logout:focus-visible { background: var(--w1-krem) !important; color: var(--w1-tekst) !important; }
.w1-glowa .top-box-submenu .user-nav-item-logout { margin-top: 6px; border-top: 1px solid var(--w1-linia); font-size: 12.5px; color: var(--w1-cichy); }
.w1-glowa .top-box-submenu .user-nav-item-logout .icon { display: none; }

/* konto, gosc: logowanie w stroju formularzy sciezki zakupu */
.w1-glowa .top-login-box .legend { display: none; }
.w1-glowa .top-login-box .form-group { margin: 0 0 12px; }
.w1-glowa .top-login-box label, .w1-glowa .top-login-box .form-element-name { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-glowa .top-login-box .form-required-mark { color: var(--w1-zloto); }
.w1-glowa .top-login-box .form-control { height: 44px; padding: 8px 12px; border: 1px solid var(--w1-ramka); border-radius: 0 !important; box-shadow: none; font-size: 13px; color: var(--w1-tekst); background: #fff; }
.w1-glowa .top-login-box .form-control:focus { border-color: var(--w1-tekst) !important; box-shadow: none; outline: none; }
.w1-glowa .top-login-box .input-group-addon, .w1-glowa .top-login-box .input-group-btn .btn { height: 44px; border: 1px solid var(--w1-ramka); border-left: 0; border-radius: 0 !important; background: #fff; color: var(--w1-tekst); box-shadow: none; }
.w1-glowa .top-login-box .input-group:focus-within .input-group-addon, .w1-glowa .top-login-box .input-group:focus-within .input-group-btn .btn { border-color: var(--w1-tekst); }
.w1-glowa .top-login-box .has-error .form-control { border-color: var(--w1-alarm); }
.w1-glowa .top-login-box .help-block, .w1-glowa .top-login-box .alert-block { font-size: 10.5px; color: var(--w1-alarm); }
.w1-glowa .top-login-box .forgot-password { margin: 2px 0 14px; font-size: 12px; color: var(--w1-cichy); }
.w1-glowa .top-login-box .forgot-password a { color: var(--w1-tekst); text-underline-offset: 3px; }
.w1-glowa .top-box-buttons .btn + .btn { margin-top: 8px; }
.w1-glowa .top-box-buttons .btn-default { display: block; width: 100%; min-height: 44px; padding: 13px 16px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: #fff; color: var(--w1-tekst); font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: center; }
.w1-glowa .top-box-buttons .btn-default:hover, .w1-glowa .top-box-buttons .btn-default:focus-visible { background: var(--w1-krem); color: var(--w1-tekst); }
.w1-glowa .top-login-box .form-alerts .alert { margin: 0 0 12px; padding: 10px 12px; border: 0; border-left: 2px solid var(--w1-alarm); border-radius: 0; background: var(--w1-krem); font-size: 12px; color: var(--w1-alarm); }

/* panel zaczepiony tuz pod przyciskiem (baza: 39 px nizej, gorna krawedz cięła litery menu).
   Zamykanie ma 100 ms zwloki (shop.js), wiec 10 px przerwy mysz przechodzi bez gubienia. */
@media screen and (min-width: 1140px) {
  .w1-glowa .top-box-container .top-box { top: calc(100% + 10px); }
}

/* --- Konto klienta W1 (11.09 nocna paczka): /user, podstrony, logowanie, rejestracja.
   Kafle zamiast zielonego paska z lewej. Formularze w stroju sciezki zakupu: etykiety
   zlote wersalikami, pola 44 px w --w1-ramka, fokus czarny, panele Bootstrapa splaszczone.
   .w1-konto = uklad layout/sidebar i strona /user; .w1-logowanie .w1-logowanie .container--userpanel = logowanie,
   rejestracja, reset i zmiana hasla (szablony bez zmian, sam stroj). */
.w1-konto, .w1-logowanie .container--userpanel { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-konto, .w1-logowanie .container--userpanel { max-width: 1120px; padding-top: 24px; padding-bottom: 64px; }
.w1-konto-powrot { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-tekst); text-decoration: none; }
.w1-konto-powrot:hover, .w1-konto-powrot:focus-visible { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 4px; }
.w1-konto .heading-breadcrumb { display: none; }
.w1-konto .userpanel-title { margin: 8px 0 26px; font-size: 30px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
/* strona glowna konta */
.w1-konto--start { padding-top: 0; }
.w1-konto-glowa { padding: 38px 0 26px; }
.w1-konto-kafle { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .w1-konto-kafle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .w1-konto-kafle { gap: 16px; } }
.w1-konto-kafel { position: relative; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; height: 100%; min-height: 108px; padding: 20px 52px 20px 20px; border: 1px solid var(--w1-linia); background: #fff; color: var(--w1-tekst); text-decoration: none; transition: border-color .15s; }
.w1-konto-kafel:hover, .w1-konto-kafel:focus-visible { border-color: var(--w1-tekst); color: var(--w1-tekst); text-decoration: none; }
.w1-konto-kafel-tytul { font-size: 16px; font-weight: 600; line-height: 1.3; }
.w1-konto-kafel-opis { font-size: 13.5px; line-height: 1.5; color: var(--w1-cichy); }
.w1-konto-kafel-strzalka { position: absolute; top: 19px; right: 20px; font-size: 18px; line-height: 1; color: var(--w1-zloto); transition: transform .15s; }
.w1-konto-kafel:hover .w1-konto-kafel-strzalka, .w1-konto-kafel:focus-visible .w1-konto-kafel-strzalka { transform: translateX(3px); }
.w1-konto-wyloguj { margin: 22px 0 0; font-size: 13px; }
.w1-konto-wyloguj a { display: inline-block; padding: 12px 0; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-konto-wyloguj a:hover, .w1-konto-wyloguj a:focus-visible { color: var(--w1-tekst); }
/* program lojalnosciowy: kremowy kafel; ZLOTY OBRYS tylko dla konta w programie
   (obrys = rabat staly, ustalenie arkusza 19.08). Zloto na kremie 4,5:1. */
.w1-lojalnosc-status { margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--w1-linia); background: var(--w1-krem); }
.w1-lojalnosc-status--w-programie { border-color: var(--w1-zloto); }
.w1-lojalnosc-nazwa { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-lojalnosc-tekst { margin: 0; font-size: 14px; line-height: 1.5; }
/* pusta lista zamowien */
.w1-konto-pusto { padding: 28px 24px; border: 1px solid var(--w1-linia); background: var(--w1-krem); text-align: center; }
.w1-konto-pusto p { margin: 0 0 16px; font-size: 15px; }

/* formularze konta i logowania */
.w1-konto .panel, .w1-logowanie .container--userpanel .panel { margin: 0 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.w1-konto .panel-heading, .w1-logowanie .container--userpanel .panel-heading { margin: 0 0 16px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--w1-linia); border-radius: 0; background: none; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-konto .panel-heading h2, .w1-konto .panel-heading h3, .w1-konto .panel-heading .title-base { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.w1-konto .panel-body, .w1-logowanie .container--userpanel .panel-body { padding: 0; }
.w1-konto .form-element-name, .w1-logowanie .container--userpanel .form-element-name { display: block; margin-bottom: 6px; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-konto .form-control, .w1-logowanie .container--userpanel .form-control { height: 44px; padding: 8px 12px; border: 1px solid var(--w1-ramka); border-radius: 0 !important; box-shadow: none; background: #fff; font-size: 14px; color: var(--w1-tekst); }
.w1-konto textarea.form-control, .w1-logowanie .container--userpanel textarea.form-control { height: auto; min-height: 96px; }
.w1-konto .form-control:focus, .w1-logowanie .container--userpanel .form-control:focus { border-color: var(--w1-tekst); box-shadow: none; outline: none; }
.w1-konto .has-error .form-control, .w1-logowanie .container--userpanel .has-error .form-control { border-color: var(--w1-alarm); }
.w1-konto .help-block, .w1-logowanie .container--userpanel .help-block, .w1-konto .alert-block, .w1-logowanie .container--userpanel .alert-block { font-size: 12px; color: var(--w1-alarm); }
.w1-konto .input-group-addon, .w1-logowanie .container--userpanel .input-group-addon { border: 1px solid var(--w1-ramka); border-left: 0; border-radius: 0 !important; background: #fff; color: var(--w1-tekst); }
.w1-konto .input-group:focus-within .input-group-addon, .w1-logowanie .container--userpanel .input-group:focus-within .input-group-addon { border-color: var(--w1-tekst); }
.w1-konto .btn-primary, .w1-logowanie .container--userpanel .btn-primary { min-height: 48px; padding: 14px 26px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: var(--w1-tekst); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; box-shadow: none; }
.w1-konto .btn-primary:hover, .w1-konto .btn-primary:focus-visible, .w1-logowanie .container--userpanel .btn-primary:hover, .w1-logowanie .container--userpanel .btn-primary:focus-visible { border-color: #34312A; background: #34312A; color: #fff; }
.w1-konto .btn-default, .w1-logowanie .container--userpanel .btn-default, .w1-logowanie .container--userpanel .login-info .btn-primary { min-height: 48px; padding: 14px 26px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: #fff; color: var(--w1-tekst); font-size: 11px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; box-shadow: none; }
.w1-konto .btn-default:hover, .w1-konto .btn-default:focus-visible, .w1-logowanie .container--userpanel .login-info .btn-primary:hover, .w1-logowanie .container--userpanel .login-info .btn-primary:focus-visible { background: var(--w1-krem); color: var(--w1-tekst); }
@media (max-width: 699px) { .w1-konto .btn-primary, .w1-logowanie .container--userpanel .btn-primary { display: block; width: 100%; } }
.w1-konto .alert, .w1-logowanie .container--userpanel .alert { margin: 0 0 18px; padding: 12px 14px; border: 0; border-left: 2px solid var(--w1-zloto); border-radius: 0; background: var(--w1-krem); font-size: 13.5px; color: var(--w1-tekst); }
.w1-konto .alert-success, .w1-logowanie .container--userpanel .alert-success { border-left-color: var(--w1-zielen); }
.w1-konto .alert-danger, .w1-konto .alert-error, .w1-logowanie .container--userpanel .alert-danger, .w1-logowanie .container--userpanel .alert-error { border-left-color: var(--w1-alarm); }
/* logowanie, rejestracja, reset: tytul W1, druga kolumna w kremie */
.w1-logowanie .container--userpanel .panel-heading { border-bottom: 0; padding: 0; font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--w1-tekst); }
.w1-logowanie .container--userpanel .panel-heading .title-base { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--w1-tekst); }
.w1-logowanie .container--userpanel .login-info > .panel, .w1-logowanie .container--userpanel .register-info > .panel, .w1-logowanie .container--userpanel .password-reset-info > .panel { padding: 24px; background: var(--w1-krem); }
.w1-logowanie .container--userpanel .login-forgotPassword { margin: 0 0 16px; font-size: 13px; color: var(--w1-cichy); }
.w1-logowanie .container--userpanel .login-forgotPassword a { color: var(--w1-tekst); text-underline-offset: 3px; }
/* zamowienia: tabele na wlosowych liniach */
.w1-konto .panel-radius { border-radius: 0; }
.w1-konto .table-responsive { border: 0; }
.w1-konto .table, .w1-konto .table-bordered { margin: 0; border: 0; background: none; }
.w1-konto .table > thead > tr > th, .w1-konto .table > tbody > tr > th, .w1-konto .table > tbody > tr > td { padding: 11px 12px 11px 0; border: 0; border-bottom: 1px solid var(--w1-linia); background: none; font-size: 13.5px; line-height: 1.45; vertical-align: top; }
.w1-konto .table > thead > tr > th, .w1-konto .table > tbody > tr > th { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-konto .order-history-view .table > tbody > tr > th { width: 42%; }
/* stary stroj konta (shop-basket.css, shop-all.bundle.css): szare #f3f3f3 i zielone
   pogrubienia na naglowkach sekcji, kolekcjach adresu i naglowku tabeli zamowien.
   Tamte selektory maja do (0,4,2), stad dluzsze lancuchy ponizej. */
.w1-konto .panel-heading h2, .w1-konto .panel-heading h3, .w1-konto .panel-heading .title-base,
.w1-konto .order-history-view .panel-heading h3,
.w1-logowanie .container--userpanel .panel-default > .panel-heading h2, .w1-logowanie .container--userpanel .panel-heading .title-base { width: auto; padding: 0; border-radius: 0; background: none; }
.w1-konto .userpanel-container [class*="form-element-collection"] .form-element-label-wrapper { margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--w1-linia); background: none; }
.w1-konto .userpanel-container [class*="form-element-collection"] .form-element-label-wrapper .form-element-name { margin: 0; padding: 0; border-radius: 0; background: none; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); line-height: 1.4; color: var(--w1-zloto); }
.w1-konto .order-history-container .table.table-crud thead th { width: auto; padding: 11px 12px 11px 0; border-radius: 0; background: none; font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-konto .order-history-container .table.table-crud thead th span { color: inherit; font: inherit; }
.w1-konto .table-striped > tbody > tr:nth-of-type(2n+1) { background: none; }
.w1-konto .table-hover > tbody > tr:hover { background: var(--w1-krem); }
/* kod pocztowy (1/4) i miejscowosc (3/4) obok siebie: dluga etykieta lamie sie na dwie
   linie, wiec pola wyrownujemy do dolu, zeby staly na jednej linii */
.w1-konto [class*="form-element-collection"] .form-elements { display: flex; flex-wrap: wrap; align-items: flex-end; }
.w1-konto [class*="form-element-collection"] .form-elements::before, .w1-konto [class*="form-element-collection"] .form-elements::after { content: none; }
/* lista zamowien: filtr bez ramki, wiersz „Podglad" obrysowany, na telefonie z napisem
   (hidden-xs chowal napis i zostawal czarny kwadrat z ikona) */
.w1-konto .panel-border { border: 0; border-radius: 0; }
.w1-konto .filter-sort-grid { margin-bottom: 22px; }
.w1-konto .filter-form a, .w1-konto .filter-form .btn-link { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; }
.w1-konto .grid-actions .btn { min-height: 40px; padding: 10px 16px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: #fff; color: var(--w1-tekst); font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; box-shadow: none; }
.w1-konto .grid-actions .btn:hover, .w1-konto .grid-actions .btn:focus-visible { background: var(--w1-krem); color: var(--w1-tekst); }
.w1-konto .grid-actions .btn .fa { display: none; }
.w1-konto .grid-actions .btn .hidden-xs { display: inline !important; }
.w1-konto .rwd-table .table-rwd-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }
@media (max-width: 767px) { .w1-konto .rwd-table tr.grid-element { padding: 10px 0; border-bottom: 1px solid var(--w1-linia); } }
/* logowanie, rejestracja, reset: bez wciec formularza, ta sama szerokosc co podstrony */
.w1-logowanie .container.container--userpanel { max-width: 1120px; }
.w1-logowanie .container--userpanel .form-offset-indent, .w1-logowanie .container--userpanel .form-offset-indent-small, .w1-logowanie .container--userpanel .form-offset { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.w1-logowanie .container--userpanel .login-submitRow { display: flex; flex-direction: column; align-items: flex-start; }
/* stary stroj dawal linkowi ~32 px gornego marginesu na pc (dziura pod polem hasla) */
.w1-logowanie .container--userpanel .login-submitRow .login-forgotPassword { margin-top: 0; }
/* 12.09 (uwaga wlasciciela): „Zaloguj sie" w jednej linii z „Zarejestruj sie". Obie kolumny
   maja rowna wysokosc, ale kremowa ma 24 px odstepu u dolu - formularz dostaje tyle samo. */
.w1-logowanie .login-box:not(.login-info) .login-form { padding-bottom: 24px; }
/* 12.09 (uwaga wlasciciela): „Zarejestruj sie" przy lewej krawedzi kafla, jak „Zaloguj sie".
   Stary stroj centruje go klasa .row-flex-center (shop-user.css). */
.w1-logowanie .login-info .row-flex-center { justify-content: flex-start; text-align: left; }
/* zgody i przelaczniki (ten sam partial plugins/form-consent co krok 2 zamowienia) */
.w1-logowanie .container--userpanel .checkboxradio-container label, .w1-konto .checkboxradio-container label { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 9px 0; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--w1-tekst); cursor: pointer; }
.w1-logowanie .container--userpanel .checkboxradio-container label .icheckbox_minimal-custom, .w1-logowanie .container--userpanel .checkboxradio-container label .iradio_minimal-custom,
.w1-konto .checkboxradio-container label .icheckbox_minimal-custom, .w1-konto .checkboxradio-container label .iradio_minimal-custom { position: relative; top: auto; left: auto; flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--w1-cichy); border-radius: 0; background: #fff; }
.w1-logowanie .container--userpanel .checkboxradio-container label .iradio_minimal-custom, .w1-konto .checkboxradio-container label .iradio_minimal-custom { border-radius: 50%; }
.w1-logowanie .container--userpanel .iradio_minimal-custom.checked, .w1-konto .iradio_minimal-custom.checked { border-color: var(--w1-tekst); }
/* Zaznaczony checkbox jak w sciezce zakupowej: zielony kwadrat, bialy ptaszek z ramki
   (21.09.2026, zgloszenie wlasciciela z /user/register). Wczesniej byl tu znak ptaszka
   w kolorze tekstu, ale globalny ptaszek z ramki (4x9, obrot 45) zostawal pod spodem,
   a bialy kwadrat wyzej (0,4,1) wygrywal z tlem zaznaczenia - wychodzil bialy znak na
   bialym, przekrzywiony poza kwadrat. Selektor z `label`, zeby przebic ten bialy kwadrat. */
.w1-logowanie .container--userpanel .icheckbox_minimal-custom.checked, .w1-konto .icheckbox_minimal-custom.checked,
.w1-logowanie .container--userpanel .checkboxradio-container label .icheckbox_minimal-custom.checked, .w1-konto .checkboxradio-container label .icheckbox_minimal-custom.checked { border-color: var(--w1-zielen); background: var(--w1-zielen); }
.w1-logowanie .container--userpanel .icheckbox_minimal-custom.checked::after, .w1-konto .icheckbox_minimal-custom.checked::after { content: ""; left: 50%; top: 50%; width: 4px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -60%) rotate(45deg); }
.w1-logowanie .container--userpanel .iradio_minimal-custom.checked::after, .w1-konto .iradio_minimal-custom.checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--w1-tekst); }

/* --- Program lojalnosciowy W1 (11.09 nocna paczka): ramka w arkuszu, koszyku i panelu
   koszyka, pasek na karcie i w listingu, podpis „Twoja cena" na kaflu. Zloty obrys = rabat
   staly (ustalenie 19.08). Ciche szare na kremie 5,1:1, zloto na kremie 4,5:1. */
.w1-znizka-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--w1-zloto); background: var(--w1-krem); }
.w1-znizka-tresc { font-size: 12px; line-height: 1.4; color: var(--w1-cichy); }
.w1-znizka-tresc b { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-znizka-procent { font-size: 17px; font-weight: 500; color: var(--w1-zloto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.customer-group-bar.w1-lojalnosc-pasek { padding: 6px 0; border-bottom: 1px solid var(--w1-zloto); background: var(--w1-krem); color: var(--w1-tekst); font-family: "Red Hat Display", system-ui, sans-serif; }
.w1-lojalnosc-pasek .customer-group-bar-inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 400; }
.w1-lojalnosc-pasek .customer-group-bar-content { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; padding: 0 52px; font-size: 13px; line-height: 1.4; text-align: center; }
/* telefon: zwarty pas - nazwa i procent w pierwszej linii, zdanie w drugiej, krzyzyk po prawej */
@media (max-width: 767px) {
  .w1-lojalnosc-pasek .customer-group-bar-inner { justify-content: flex-start; }
  .w1-lojalnosc-pasek .customer-group-bar-content { justify-content: flex-start; padding: 0 48px 0 0; text-align: left; }
  .w1-lojalnosc-pasek-procent { order: -1; }
  .w1-lojalnosc-pasek-tekst { flex-basis: 100%; font-size: 12px; }
}
.w1-lojalnosc-pasek-nazwa { font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-lojalnosc-pasek-tekst { color: var(--w1-cichy); }
.w1-lojalnosc-pasek-procent { font-size: 15px; font-weight: 500; color: var(--w1-zloto); font-variant-numeric: tabular-nums; }
.w1-lojalnosc-pasek .customer-group-bar-remove { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 0; background: none; color: var(--w1-tekst); font-size: 22px; line-height: 1; cursor: pointer; }
.w1-lojalnosc-pasek .customer-group-bar-remove:hover, .w1-lojalnosc-pasek .customer-group-bar-remove:focus-visible { border-color: var(--w1-tekst); background: #fff; color: var(--w1-tekst); }
.w1-kafel .w1-kafel-twoja { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-zloto); }

/* --- Paczka 8: Kup razem (12.09.2026). Kafel pod slotem InPost Pay, dokladka w koszyku
   i arkuszu, pasek „Cofnij". Rabat zestawu to promocja: czerwone wypelnienie (--w1-alarm),
   zloty obrys zostaje dla rabatu stalego (ustalenie 19.08). */
/* margin-top 4 px + odstep panelu 20 px = te same 24 px nad kreska, co nad reszta blokow */
.w1-kup-razem { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--w1-linia); }
.w1-kup-razem .w1-nadtytul { margin-bottom: 10px; }
.w1-kup-razem-kafel { display: grid; grid-template-columns: 64px 1fr; gap: 12px 14px; padding: 14px; border: 1px solid var(--w1-linia); background: #fff; }
.w1-kup-razem-kafel + .w1-kup-razem-kafel { margin-top: 10px; }
.w1-kup-razem-kadr { display: block; width: 64px; height: 80px; background: var(--w1-krem); }
.w1-kup-razem-kadr img { width: 100%; height: 100%; object-fit: contain; }
.w1-kup-razem-nazwa { display: block; font-size: 13.5px; font-weight: 500; color: var(--w1-tekst); }
.w1-kup-razem-nazwa:hover, .w1-kup-razem-nazwa:focus-visible { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; }
.w1-kup-razem-ceny { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 13px; }
.w1-kup-razem-ceny s { color: var(--w1-cichy); }
.w1-kup-razem-ceny strong { font-size: 15px; font-weight: 500; color: var(--w1-tekst); }
.w1-znacznik-rabat { display: inline-block; padding: 2px 6px; background: var(--w1-alarm); color: #fff; font-size: 9.5px; font-weight: 500; letter-spacing: var(--w1-track); line-height: 1.3; }
.w1-kup-razem-zdanie { margin: 6px 0 10px; font-size: 12px; line-height: 1.45; color: var(--w1-cichy); }
.w1-kup-razem-form .w1-btn { display: block; width: 100%; min-height: 48px; padding: 14px 16px; text-align: center; font-size: 10.5px; letter-spacing: var(--w1-track); text-transform: uppercase; }
.w1-kup-razem .shop-product-history-price-before-discount { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--w1-cichy); }
/* etykieta NAD nazwa dokladki (makiety 19.08: .a-zrodlo / .k-zrodlo) */
.w1-poz--zestaw .w1-poz-etykieta-zestaw, .top-box-product--zestaw .w1-poz-etykieta-zestaw, .w1-panel-poz .w1-poz-etykieta-zestaw { display: block; margin: 0 0 3px; font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-panel-poz .w1-poz-etykieta-zestaw { margin: 2px 0 0; }
/* spinacz „+": kwadrat 22 px NA LINII miedzy herbata a dokladka (makiety .a-plus span / .k-plus span),
   nie z lewej strony zdjecia. Linie daje poprzedni wiersz (border-bottom) lub border-top pozycji arkusza. */
.w1-poz.w1-poz--zestaw { padding-left: 0; }
.w1-poz--zestaw .w1-poz-plus, .top-box-product--zestaw::before { position: absolute; left: 21px; top: -12px; width: 22px; height: 22px; display: grid; place-items: center; box-sizing: border-box; background: #fff; border: 1px solid var(--w1-linia); font-size: 13px; font-weight: 500; line-height: 1; color: var(--w1-zloto); }
.top-box-product--zestaw::before { content: "+"; }
.top-box-product--zestaw { position: relative; }
.w1-arkusz .top-box-product--zestaw { border-top: 1px solid var(--w1-linia); margin-top: 14px; padding-top: 15px; }
.top-box-product--zestaw .top-box-qty-price { flex-wrap: wrap; row-gap: 4px; }
.top-box-product--zestaw .w1-cena-przed { color: var(--w1-cichy); font-weight: 400; }
.top-box-product--zestaw .w1-cena-przed .price { color: var(--w1-cichy); font-weight: 400; text-decoration: line-through; }
.top-box-product--zestaw .top-box-qty-price .w1-znacznik-rabat { margin-left: auto; } /* znak rabatu przy prawej krawedzi wiersza (makieta .a-razem) */
.w1-arkusz .top-box-product--zestaw .top-box-qty-price { flex: 1 1 auto; } /* wiersz ceny na cala szerokosc, inaczej margin-left: auto nie ma dokad pchac */
/* koszyk: etykieta jako element siatki nad trescia i kwota (na telefonie kolumna tresci ma ~190 px i etykieta sie lamala) */
.w1-poz--zestaw { grid-template-rows: auto auto; }
.w1-poz--zestaw > .w1-poz-etykieta-zestaw { grid-column: 2 / -1; grid-row: 1; }
.w1-poz--zestaw > .w1-poz-kadr { grid-row: 1 / 3; }
.w1-poz--zestaw > .w1-poz-tresc { grid-column: 2; grid-row: 2; }
.w1-poz--zestaw > .w1-poz-kwota { grid-column: 3; grid-row: 2; }
.w1-poz--zestaw s { margin-right: 6px; color: var(--w1-cichy); font-weight: 400; }
/* „oszczedzasz X": drobny zloty druk pod kwota „Do zaplaty" (makiety .a-oszczednosc / .k-oszczednosc) */
.w1-zestaw-oszczedzasz, .w1-stopka-koszyka .w1-oszczedzasz { margin: 3px 0 0; padding: 0; border: 0; font-size: 11px; font-weight: 400; color: var(--w1-zloto); text-align: right; }
.w1-cofnij-nazwy { display: block; margin-top: 2px; font-size: 11px; color: var(--w1-zloto); }
.w1-cofnij { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1050; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--w1-tekst); color: #fff; font-size: 13px; box-shadow: 0 12px 34px rgba(26, 26, 24, .25); }
.w1-cofnij-btn { min-height: 44px; padding: 0 16px; border: 1px solid #fff; background: none; color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; cursor: pointer; }
.w1-cofnij-btn:hover, .w1-cofnij-btn:focus-visible { background: #fff; color: var(--w1-tekst); }
@media (min-width: 1140px) { .w1-cofnij { left: auto; right: 32px; max-width: 420px; } }

/* --- Uwagi wlasciciela 13.09.2026 (po paczce 8) ------------------------------
   1. Nazwy produktow w arkuszu koszyka byly zielone i grube. Zielen W1 nalezy do
      KWOT (zasada makiet 19.08), nazwa produktu to zwykly tekst - bazowa regula
      `.top-box-product .top-box-right .product-name` (shop-basket.css:40) dawala
      `--shop-primary` i `bold`, a W1 nadpisywal ja tylko w mini-koszyku naglowka.
   2. Okno potwierdzenia akcji (`.modal-confirm`, szablon plugins/modal.phtml) nie
      bylo objete W1: „TAK" w pelnym zlocie, „NIE" w pelnej zieleni, tytul 24 px/700,
      szara kreska stopki z bootstrapa. Reguly sa GLOBALNE, bo to okno wychodzi takze
      poza koszykiem (ulubione, porownywarka, konto), gdzie body nie ma `w1-krok`.
   3. Podmenu kategorii w menu glownym zostalo ze starego stroju (style.css 557-605):
      zielona kreska, wersaliki 14 px, zielone tlo pod kursorem.
   4. Kafel „Kup razem": przycisk siedzial w kolumnie tresci (zmierzone: 93 px od lewej
      krawedzi kafla, 15 px od prawej - widoczna asymetria), a wiersz omnibusa stal
      w srodku ramki. Rozstrzygniecie 19.08 (README warsztatu): omnibus pod kaflem,
      na cala szerokosc. Przycisk idzie na cala szerokosc kafla (zmiana w szablonie). */

/* 1. nazwy produktow w arkuszu: tekst W1 zamiast zieleni */
.w1-arkusz .top-box-product .top-box-right .product-name { color: var(--w1-tekst); font-weight: 500; }
.w1-arkusz .top-box-product .top-box-right .product-name:hover,
.w1-arkusz .top-box-product .top-box-right .product-name:focus-visible { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; }

/* 2. okno potwierdzenia akcji */
.modal-confirm .modal-content { border: 1px solid var(--w1-tekst); border-radius: 0; box-shadow: none; }
.modal-confirm .modal-header { background: var(--w1-tekst); color: #fff; border: 0; border-radius: 0; padding: 15px 20px; }
.modal-confirm .modal-header .close { color: #fff; opacity: 1; text-shadow: none; font-weight: 400; }
.modal-confirm .modal-title { font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: #fff; }
.modal-confirm .modal-body { padding: 20px; font-size: 14px; line-height: 1.5; color: var(--w1-tekst); }
.modal-confirm .modal-footer { display: flex; gap: 10px; margin: 0; padding: 0 20px 20px; border-top: 0; text-align: left; }
.modal-confirm .modal-footer .btn { flex: 1 1 0; min-height: 48px; margin: 0; padding: 14px 16px; border-radius: 0; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; }
/* „TAK, KONTYNUUJ" to `.btn-secondary` (modal.phtml), „NIE, ANULUJ" to `.btn-primary` -
   nazwy klas sa z bootstrapa i nie mowia nic o wadze akcji. W1: potwierdzenie czarne,
   wycofanie obrysowane. Kolejnosc w DOM zostaje (potwierdzenie po prawej). */
.modal-confirm .modal-footer .btn-secondary,
.modal-confirm .modal-footer .btn-secondary:hover,
.modal-confirm .modal-footer .btn-secondary:focus,
.modal-confirm .modal-footer .btn-secondary:active { background: var(--w1-tekst); border: 1px solid var(--w1-tekst); color: #fff; }
.modal-confirm .modal-footer .btn-primary,
.modal-confirm .modal-footer .btn-primary:focus { background: transparent; border: 1px solid var(--w1-ramka); color: var(--w1-tekst); }
.modal-confirm .modal-footer .btn-primary:hover,
.modal-confirm .modal-footer .btn-primary:active { background: var(--w1-krem); border: 1px solid var(--w1-ramka); color: var(--w1-tekst); }
@media screen and (max-width: 767px) { .modal-confirm .modal-footer { flex-direction: column; } }

/* 3. podmenu kategorii w menu glownym */
.w1-glowa #main-menu > ul > li > ul { width: 260px; background: #fff; border: 1px solid var(--w1-linia); border-radius: 0; box-shadow: none; }
.w1-glowa #main-menu > ul > li > ul > li > a { min-height: 0; padding: 11px 16px; background: #fff; color: var(--w1-tekst); font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; }
.w1-glowa #main-menu > ul > li > ul > li + li { border-top: 1px solid var(--w1-linia); }
.w1-glowa #main-menu > ul > li > ul > li > a:hover,
.w1-glowa #main-menu > ul > li > ul > li.active > a { background: var(--w1-krem); color: var(--w1-tekst); }

/* 4. kafel „Kup razem": przycisk przez cala szerokosc kafla.
      13.09 druga runda uwag: omnibus wraca POD CENE dokladki (byl pod kaflem), a zdanie
      spod ceny („Herbata w zwyklej cenie, X taniej o Y") znika - cene tlumacza teraz
      przekreslona kwota, znacznik rabatu i wiersz omnibusa, wiec zdanie bylo trzecim
      powtorzeniem tej samej tresci. Klucz `shop.product.kupRazem.sentence` zostaje
      w Slowniku na wypadek powrotu. */
.w1-kup-razem-kafel > .w1-kup-razem-form { grid-column: 1 / -1; margin-top: 2px; }
.w1-kup-razem-tresc .shop-product-history-price-before-discount { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--w1-cichy); }
/* Kafel stoi WEWNATRZ `.panel-zakupu` (partial wolany z panel-zakupu.phtml), wiec omnibusowi
   w kaflu narzucala sie regula `.w1-karta .panel-zakupu .shop-product-history-price-before-discount`
   z `margin-top: -10px` - ujemny margines jest tam celowy (omnibus pod cena glowna), ale tutaj
   wciagal wiersz NA ceny dokladki. Stad selektor o wyzszej wadze zamiast walki marginesami. */
.w1-karta .panel-zakupu .w1-kup-razem-tresc .shop-product-history-price-before-discount { margin: 6px 0 0; line-height: 1.4; }

/* --- Trzecia runda uwag 13.09 ------------------------------------------------
   1. Kolumna tresci kafla ma te sama wysokosc co kadr (80 px), ale TEKST konczyl sie
      16 px wyzej niz zdjecie. Trzy wiersze (nazwa, ceny, omnibus) rozkladaja sie teraz
      na cala wysokosc kadru.
   2. Przycisk kafla byl WYZSZY niz glowne „Dodaj do koszyka" (48 px wobec 46 na telefonie),
      a jest akcja drugorzedna. Schodzi do 44 px - dolnej granicy celu dotykowego z makiet.
   3. Odstep pod linia ze spinaczem w arkuszu: bazowa regula `.modal .top-box-product +
      .top-box-product` (waga 0,3,0) narzucala `padding-top: 10px` i wygrywala z moim
      ustawieniem (0,2,0), wiec zdjecie dokladki niemal dotykalo linii. */
.w1-kup-razem-tresc { display: flex; flex-direction: column; justify-content: space-between; }
.w1-kup-razem-form .w1-btn { min-height: 44px; padding: 12px 16px; }
.modal.w1-arkusz .top-box-product + .top-box-product--zestaw { padding-top: 26px; }

/* 5. arkusz koszyka: wiecej powietrza wokol linii ze spinaczem „+" (uwaga wlasciciela 13.09).
      Spinacz siedzi NA linii (top: -12px), wiec odstep musza dac margines i padding wiersza. */
.w1-arkusz .top-box-product--zestaw { margin-top: 26px; padding-top: 28px; }

/* --- Formularze POZA zakresami W1 (14.09.2026, rejestr niedopasowan P1) ------
   `w1.css` ubieral formularze tylko w zakresach (`.w1-form`, `.w1-glowa`, `.w1-konto`,
   `.w1-zamowienie`), wiec kontakt, opinie, B2B i newsletter zostaly ze starym strojem:
   gwiazdka wymagalnosci i komunikat bledu w bootstrapowym `#a94442`, przycisk odswiezenia
   captchy w `#e10121`. W1 ma na to wlasne kolory - gwiazdka zlotem (tak jak juz jest
   w naglowku i w sciezce zakupu), blad alarmem, ikona pomocnicza kolorem cichym. */
.form .form-required-mark { color: var(--w1-zloto); }
/* `!important` tylko dlatego, ze zrodlowa regula (base-form/css/form.css:338) tez je ma */
.form .alert-block .error { color: var(--w1-alarm) !important; }
.form button.captcha-refresh { color: var(--w1-cichy); }

/* --- Checkboxy i radia (icheck) ----------------------------------------------
   Jedyne niedopasowanie, ktore przetrwalo trzeci przeglad z 14.09.2026: `icheck.css` rysuje je
   BITMAPA (sprite `skins/minimal/minimal.png`, 18x18, osobny plik @2x dla gestych ekranow).
   Bitmapy nie da sie dopasowac kolorem do palety ani powiekszyc bez utraty ostrosci, wiec
   zdejmujemy obraz i rysujemy ksztalt: kwadrat z ramka W1, zaznaczenie czernia z bialym
   ptaszkiem z pseudo-elementu - zero dodatkowych zasobow. Radio zostaje OKRAGLE: to jedyne
   zaokraglenie, ktore w W1 ma uzasadnienie, bo odroznia wybor jednokrotny od wielokrotnego. */
.icheckbox_minimal-custom, .iradio_minimal-custom {
  position: relative; box-sizing: border-box; width: 18px; height: 18px;
  background-image: none; background-color: #fff; border: 1px solid var(--w1-ramka);
}
.iradio_minimal-custom { border-radius: 50%; }
.icheckbox_minimal-custom.hover, .iradio_minimal-custom.hover { border-color: var(--w1-tekst); }
.icheckbox_minimal-custom.checked, .iradio_minimal-custom.checked { background-color: var(--w1-tekst); border-color: var(--w1-tekst); }
.icheckbox_minimal-custom.checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.iradio_minimal-custom.checked::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff;
}
.icheckbox_minimal-custom.disabled, .iradio_minimal-custom.disabled { opacity: .5; cursor: default; }

/* Podpis „· ok. 25 porcji" pod cena na karcie: `panel-zakupu.css:855` daje `#6b7264`, czyli kolor
   ludzki do pomylenia z tokenem `--w1-cichy` (#6B675E), ale jednak inny. Czwarty przeglad
   (14.09.2026) pokazal, ze `w1.css` nie ma dla tej klasy NIC - to jedyna pozycja z listy P2,
   ktora okazala sie prawdziwym niedopasowaniem; reszta (jasne zloto kafli, tlo pasa ikon, cien
   przycisku filmu, obrys wybranego wariantu) pochodzi z `w1.css`, czyli jest wyborem. */
.w1-karta .panel-cena-porcje { color: var(--w1-cichy); }

/* --- Strony tresciowe W1 (11.09.2026): Przygotuj Matcha, Idealne zbiory, Matcha to zdrowie.
   Spec: docs/superpowers/specs/2026-09-11-w1-strony-tresciowe-design.md */

/* Pas liczb (benefits + przelacznik `numbered`): tytul pozycji to liczba, opis to podpis.
   Makieta „Matcha to zdrowie" wariant A: krem, liczba lekka, podpis wersalikami. */
.benefits--liczby .benefits-list { grid-template-columns: 1fr 1fr; gap: 14px; }
.benefits--liczby .benefits-item { display: block; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--w1-linia); }
.benefits--liczby.w1-section--krem .benefits-item { border-color: transparent; }
.benefits--liczby .benefits-item img { display: none; }
.benefits--liczby .benefits-item strong { display: block; font-size: 24px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; color: var(--w1-tekst); }
.benefits--liczby .benefits-item span { display: block; margin-top: 8px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }

/* Stary stroj justuje tekst sekcji; dwuwierszowy tytul na telefonie dostawal
   dziury miedzy slowami („Najczestsze   bledy   przy   parzeniu"). W1 = do lewej. */
.w1-ti--strona .text-image-section-text, .w1-ti--strona .section-title { text-align: left; }

/* Sekcja tekst i zdjecie BEZ zdjecia: jedna kolumna w mierze czytania (jak textCollection). */
.w1-sekcja.text-image-section.bez-zdjecia .text-image-section-inner { display: block; }
.w1-sekcja.text-image-section.bez-zdjecia .text-image-section-text { max-width: 860px; }

/* Artykul na podstronie (w1-ti--strona bez zdjecia): H2 jak srodtytul z makiety (zielona
   kreska nad, lekka waga), akapity cichym kolorem w wygodnej interlinii, przypisy drobne.
   Zawezone do podstron - na kartach produktow ten sam wariant ma inny strój. */
.w1-ti--strona.bez-zdjecia .text h2 { position: relative; margin: 34px 0 10px; padding-top: 14px; font-size: 21px; font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.w1-ti--strona.bez-zdjecia .text h2::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--w1-zielen); }
.w1-ti--strona.bez-zdjecia .text > h2:first-child, .w1-ti--strona.bez-zdjecia .w1-spis + .text > h2:first-child { margin-top: 0; }
.w1-ti--strona.bez-zdjecia .text p { font-size: 15px; line-height: 1.7; color: var(--w1-cichy); }
.w1-ti--strona.bez-zdjecia .text p em span { font-size: 12px !important; line-height: 1.5; }

/* Spis rozdzialow: numer w zlocie, wlosowe linie, na pc dwie kolumny. */
.w1-spis { margin: 0 0 30px; padding: 18px 0 6px; border-top: 1px solid var(--w1-linia); border-bottom: 1px solid var(--w1-linia); }
.w1-spis-lista { list-style: none; margin: 0; padding: 0; counter-reset: spis; }
.w1-spis-lista li { counter-increment: spis; display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.4; }
.w1-spis-lista li::before { content: counter(spis, decimal-leading-zero); flex: 0 0 26px; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--w1-zloto); padding-top: 2px; font-variant-numeric: tabular-nums; }
.w1-spis-lista a { color: var(--w1-tekst); text-decoration: none; }
.w1-spis-lista a:hover, .w1-spis-lista a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Kotwica nie ma chowac srodtytulu pod przyklejonym naglowkiem. */
.w1-ti--strona .text h2[id] { scroll-margin-top: 90px; }

/* Kroki parzenia w sekcji instrukcji: lista bez punktorow, wlosowe linie (jak „Zanim podasz
   pierwsza czarke"), tekst kroku ciemniejszy - to instrukcja, nie komentarz. */
.w1-ti--instrukcja.w1-ti--strona .text-image-section-text ul li { color: var(--w1-tekst); }
/* To samo w bloku porad sekcji „wideo + instrukcja" (11.09: /przygotuj-matcha uzywa tej
   sekcji bez filmu, z rysunkiem ze strony glownej). Na glownej blok porad nie ma listy,
   wiec regula niczego tam nie zmienia. */
.w1-sekcja.videoGuide-section .vg-tekst ul, .w1-sekcja.videoGuide-section .vg-tekst ol { list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.w1-sekcja.videoGuide-section .vg-tekst ul li, .w1-sekcja.videoGuide-section .vg-tekst ol li { position: static; margin: 0; padding: 13px 0; border-top: 1px solid var(--w1-linia); font-size: 15px; line-height: 1.6; color: var(--w1-tekst); }
.w1-sekcja.videoGuide-section .vg-tekst ul li:first-child, .w1-sekcja.videoGuide-section .vg-tekst ol li:first-child { border-top: 0; padding-top: 0; }
.w1-sekcja.videoGuide-section .vg-tekst ul li::before { display: none; }
/* Lista numerowana: 01-04 w zlocie, tak jak numery na rysunku (11.09: cztery kroki jak na puszce). */
.w1-sekcja.videoGuide-section .vg-tekst ol li { counter-increment: krok; display: flex; gap: 14px; }
.w1-sekcja.videoGuide-section .vg-tekst ol li::before { content: counter(krok, decimal-leading-zero); flex: 0 0 28px; padding-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--w1-zloto); font-variant-numeric: tabular-nums; }

@media screen and (min-width: 1140px) {
  .benefits--liczby .benefits-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
  .benefits--liczby .benefits-item { padding: 22px 22px 20px; border-top: 1px solid var(--w1-linia); }
  .benefits--liczby .benefits-item strong { font-size: 30px; }
  .w1-spis-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .w1-ti--strona.bez-zdjecia .text h2 { font-size: 24px; }
}

/* --- O nas: wariant A */
/* Wyliczenie faktow. Makieta rysowala je ze zlotym kwadracikiem, ale W1 zdazyl juz
   przelozyc ten sam wzorzec na wlosowe linie (`.w1-ti--strona ... ul li`, sekcja
   „Zanim podasz pierwsza czarke"). Trzymam sie tego, zeby sklep mial JEDEN jezyk
   wyliczen, a nie dwa. Pierwsza pozycja bez kreski u gory - pod tekstem strony
   nie ma sie zaczynac od linii.
   Longhandy `padding-*` I `margin-*`: element jest tez `.container`, wiec skrot `padding: x 0`
   zjadlby boczny padding, a `margin: 0` skasowalby `margin: 0 auto`, ktore centruje miare
   czytania - lista stanela wtedy na x=30 zamiast na osi tresci. */
.w1-onas-fakty { list-style: none; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 30px; }
.w1-onas-fakty li { margin: 0; padding: 13px 0; border-top: 1px solid var(--w1-linia); font-size: 15px; line-height: 1.6; color: var(--w1-cichy); }
.w1-onas-fakty li:first-child { border-top: 0; padding-top: 0; }
.w1-onas-fakty strong { font-weight: 600; color: var(--w1-tekst); }
.w1-onas-fakty strong + span::before { content: " - "; }

.w1-onas-punkty { padding-bottom: 8px; }
/* Partial `textItem` jest wspoldzielony z sekcjami CMS, wiec jego znacznikow nie ruszamy -
   caly stroj wisi na `.w1-onas-punkty`. Numer traci kolko (W1 = zero zaokraglen). */
.w1-onas-punkty .about-text-item { display: block; margin: 0 0 34px; padding: 0; text-align: left; }
.w1-onas-punkty .about-text-item:last-child { margin-bottom: 0; }
/* `text-align: left` jest tu konieczne: kolko numeru mialo `text-align: center`
   (style.css), a po rozciagnieciu na cala szerokosc kolumny numer wisial na srodku. */
.w1-onas-punkty .about-text-item .icon-wrapper {
  display: block; width: auto; height: auto; margin: 0 0 8px; padding: 0;
  border: 0; border-radius: 0; background: none; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: var(--w1-track); color: var(--w1-zloto);
}
.w1-onas-punkty .about-text-item-name {
  margin: 0 0 10px; font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--w1-tekst);
}
.w1-onas-punkty .about-text-item p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--w1-cichy); }

/* Padding TYLKO w pionie: `.w1-onas-kafle` jest jednoczesnie `.container`, a skrot
   `padding: 8px 0 48px` wyzerowalby jego boczne 30 px i kafle wyjechalyby poza siatke
   strony (zmierzone 03.09: zdjecie zaczynalo sie na x=0). */
.w1-onas-kafle { display: block; padding-top: 8px; padding-bottom: 48px; }
/* Siatka od RAZU, nie dopiero od 1140 px. Wczesniej w pasmie 768-1139 obowiazywal
   jeszcze `display: flex` sprzed W1 (style.css) i przy `width: 100%` na zdjeciu
   kolumna tekstu wyjezdzala CALKOWICIE poza okno - przy oknie 768 px tekst
   zaczynal sie na x=783. Nie bylo tego widac po `scrollWidth`, bo przepelnienie
   jest przycinane; zlapane pomiarem polozenia na szesciu szerokosciach 03.09. */
.w1-onas-kafle .about-collection-item { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 34px; }
.w1-onas-kafle .about-collection-item:last-child { margin-bottom: 0; }
/* `width: 50%` ze stroju sprzed W1 dawalo w siatce polowe wlasnej kolumny, wiec
   zdjecie zajmowalo 317 z 635 px, a obok zostawala dziura. */
.w1-onas-kafle .about-collection-item-image { width: 100%; }
/* Przycisk (pozycje `collection2` wskazujace na kategorie sklepu) trzyma sie lewej
   osi W1 i ma wlasny odstep - `gap: 0` wyzej odebralo mu ten ze stroju sprzed W1,
   a `align-self: flex-end` (style.css) dosuwalby go do prawej. */
.w1-onas-kafle .about-collection-item-text > .btn { align-self: start; margin-top: 18px; }
.w1-onas-kafle .about-collection-item-image img { border-radius: 0; }
.w1-onas-kafle .about-collection-deco { display: none; }
/* Odstep robi teraz przerwa siatki, a nie 120 px paddingu z lewej strony tekstu. */
.w1-onas-kafle .about-collection-item-text,
.w1-onas-kafle .about-collection-item-text-inner { padding: 0; gap: 0; }
.w1-onas-kafle .about-collection-item-text-title {
  margin: 0 0 12px; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--w1-tekst);
}
.w1-onas-kafle .about-collection-item-text p { font-size: 15px; line-height: 1.65; color: var(--w1-cichy); }
.w1-onas-kafle .btn { border-radius: 0; }

@media screen and (min-width: 1140px) {
  /* Dwie kolumny: dane 5fr, formularz 6fr (03.09, druga uwaga wlasciciela).
     Limit 860 px z reguly bazowej przestaje miec sens - kolumna sama ogranicza. */
  .w1-kontakt-uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .w1-kontakt-uklad .w1-kontakt-dane { max-width: none; padding-bottom: 24px; }
  /* Selektor ZLOZONY, nie sama klasa panelu: pas `.w1-sekcja-formularz` ma te sama
     specyficznosc i stoi DALEJ w tym bloku, wiec pojedyncza klasa przegrywala
     kolejnoscia - panel dostawal padding pasa (poziomo ZERO) i pola kleily sie
     do krawedzi kremu (zlapane przy 1920 px). */
  .w1-sekcja-formularz.w1-kontakt-formularz { padding: 32px 34px 38px; margin: 4px 0 64px; }
  .w1-kontakt-dane { padding: 12px 0 56px; }
  .w1-kontakt-poz { padding: 19px 0; }
  .w1-kontakt-wartosc { font-size: 27px; }
  .w1-sekcja-formularz { padding: 56px 0 64px; }
  .w1-sekcja-formularz .contact-form-title { font-size: 26px; }
  .w1-onas-kafle .about-collection-item { grid-template-columns: 5fr 6fr; gap: 44px; align-items: center; margin-bottom: 52px; }
  .w1-onas-punkty .about-text-item { margin-bottom: 40px; }
}

/* ==== Strony opinii /opinie i /p/<slug>/opinie (03.09.2026) ====
   Sekcja na tych stronach powtarza DOM sekcji `comments`, wiec dziedziczy caly stroj
   opinii W1. Ponizej wylacznie roznice strony-listy wzgledem sekcji. Projekt:
   specs/2026-09-03-w1-strony-opinii-design.md */

/* Sekcje pokazuja celowo TYLKO 4 opinie (chunki n+3 ukryte, czwarta karta chowana na
   telefonie). Na stronie-liscie pokazujemy komplet strony paginacji. Selektory
   powtarzaja ksztalt regul ukrywajacych (ta sama liczba klas i pseudoklas), wiec
   wygrywaja kolejnoscia w pliku. */
/* Pelny prefiks jest konieczny: regula ukrywajaca ma 4 klasy + 2 pseudoklasy,
   wersja z samym `.w1-opinie-strona` przegrywala o jedna klase i czwarta karta
   zostawala schowana na telefonie (zlapane straznikiem: 11 kafli zamiast 12). */
.w1-sekcja.comment-section.w1-opinie-strona .opinion-chunk-item:nth-child(2) .opinion-item:nth-child(2),
.w1-sekcja.comment-section.w1-opinie-strona .opinion-chunk-item:nth-child(n + 3) .opinion-item:nth-child(n + 1) { display: flex; }
.w1-sekcja.comment-section.w1-opinie-strona .opinion-chunk-item:nth-child(n + 3) { display: contents; }

/* Naglowek strony w skali W1 - `.section-title` w sekcji ma rozmiar srodtytulu. */
.w1-opinie-strona .section-heading { margin-top: 8px; }

/* Nazwa produktu przy opinii. Sekcje ja chowaja (na karcie produktu bylaby szumem),
   ale na liscie ZBIORCZEJ to wlasnie ona prowadzi do produktu - sens strony wg
   zlecenia wlasciciela. Na stronie opinii jednego produktu elementu w ogole nie ma
   (dane bez joinu), wiec regula niczego tam nie zmienia. */
.w1-sekcja.comment-section.w1-opinie-strona .opinion-heading-product { display: block; order: 2; margin: 0 0 2px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.w1-opinie-strona .opinion-heading-product a { color: var(--w1-zloto); text-decoration: none; }
.w1-opinie-strona .opinion-heading-product a:hover, .w1-opinie-strona .opinion-heading-product a:focus-visible { color: var(--w1-tekst); text-decoration: none; }

/* Odnosnik powrotny do produktu: pod histogramem, strzalka w lewo. */
.w1-opinie-powrot { margin-top: 18px; }

/* Paginacja pod kaflami; strzalki paginatora sa juz prostokatne globalnie. */
.w1-opinie-strona .pagination-container, .w1-opinie-strona .pagination { margin-top: 26px; }

/* ==== Dostosowanie trzech sekcji do makiety B2B (03.09.2026, zlecenie wlasciciela) ====
   Makieta: docs/superpowers/makiety/2026-08-26-b2b-w1/ (ten sam artefakt, ktory podal
   wlasciciel). Ponizej WYLACZNIE roznice wzgledem obecnego stroju. */

/* --- 1. FAQ (wszystkie sekcje). Makieta: pozycje rozdzielone linia DOLNA, bez linii
   nad pierwszym pytaniem, a na duzym ekranie pytania w DWOCH kolumnach
   (`.faq-dwie{grid-template-columns:1fr 1fr;gap:0 46px}`). Reszta stroju - znak +/-
   w zlocie, rozmiary, odstepy - byla juz zgodna. */
.w1-sekcja.faq-section .faq-list { border-top: 0; }
/* `.faq-item` ma linie takze U GORY (stary arkusz), wiec kazda pozycja byla ujeta
   z dwoch stron, a nad pierwszym pytaniem wychodzila linia, ktorej makieta nie ma.
   Zostaje wylacznie dolna - dokladnie jak `.faq .poz{border-bottom}` w makiecie. */
.w1-sekcja.faq-section .faq-item { border-top: 0; }

/* --- 2. „Dla kogo" (textCollection, uklad `pas`). Makieta rysuje pas kategorii:
   piec kolumn obok siebie, kazda z wlosowa linia U GORY, bez numeracji.
   Numer jest w partialu `textItem` wspoldzielonym z sekcjami i /o-nas, wiec go nie
   usuwam ze znacznikow - chowam w tym ukladzie. */
/* `gap` USTAWIANY tylko w bloku desktopowym - tutaj zostawiamy go w spokoju, bo ta
   regula stoi w pliku DALEJ i przy rownej specyficznosci zerowala tam odstep kolumn. */
.w1-sekcja.uklad-pas .text-collection-content { display: grid; margin-top: 24px; }
/* `margin-top: 14px` (stroj listy) mial WSZYSTKIE pozycje procz pierwszej, wiec
   w pasie kolumny 2-5 siedzialy 14 px nizej i linie u gory tworzyly schodek
   (zmierzone: poz1 y=2417, reszta y=2431 - zgloszenie wlasciciela 03.09). */
.w1-sekcja.uklad-pas .about-text-item { display: block; padding: 14px 0; border-top: 1px solid var(--w1-linia); }
/* Selektor SASIEDZTWA, a nie sam `.about-text-item`: 14 px dokladalo
   `.w1-sekcja.text-collection-section .about-text-item + .about-text-item` (w. 348),
   czyli cztery klasy. Prostsza regula miala trzy i przegrywala, przez co kolumny 2-5
   siedzialy 14 px nizej niz pierwsza (poz1 y=2417, reszta y=2431). W pasie kolumny
   stoja obok siebie, wiec odstep pionowy jest tu bez sensu - zerujemy go tak samo,
   jak robi to uklad `porownanie` w wierszu 471. */
.w1-sekcja.uklad-pas .about-text-item + .about-text-item { margin-top: 0; }
.w1-sekcja.uklad-pas .about-text-item:first-child { border-top: 0; }
.w1-sekcja.uklad-pas .about-text-item-heading { display: block; gap: 0; }
.w1-sekcja.uklad-pas .about-text-item .icon-wrapper { display: none; }
.w1-sekcja.uklad-pas .about-text-item-name { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--w1-tekst); }
.w1-sekcja.uklad-pas .about-text-item p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--w1-cichy); }
/* Sekcja bez zdjecia: kolumna tekstu nie ma sie do czego zwezac. */
.w1-sekcja.uklad-pas .text-collection-inner { display: block; }
.w1-sekcja.uklad-pas .text-collection-content { width: auto; }

/* --- 3. „Zanim podasz pierwsza czarke" (textImage na stronach modulu `page`).
   Makieta: nadtytul, zielona kreska pod tytulem, wyliczenie jako lista z wlosowymi
   liniami (nazwa ciemna, opis cichy) zamiast punktorow. */
.w1-ti--strona .text-image-section-text::before {
  content: attr(data-nad); display: block; margin-bottom: 3px;
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto);
}
.w1-ti--strona .text-image-section-text .section-title { position: relative; padding-top: 15px; }
.w1-ti--strona .text-image-section-text .section-title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--w1-zielen);
}
/* Punktory znikaja - zostaje lista wierszy oddzielonych wlosowa linia. `strong` z tresci
   panelu robi za nazwe pozycji, reszta wiersza za opis (stad kolor na `li`, ciemny tylko
   na `strong`). Tresci NIE ruszam - to tekst wlasciciela z edytora. */
.w1-ti--strona .text-image-section-text ul { list-style: none; margin: 22px 0 0; padding: 0; }
/* `position: relative; left: 40px; padding-right: 40px` (style.css:411) robilo miejsce
   na kule punktora rysowana w ujemnym offsecie. Punktor jest schowany, wiec przesuniecie
   zostawialo cala liste wcieta o 40 px - stad „wypunktowanie calkiem od lewej".
   Pierwsza pozycja bez linii u gory: pod opisem sekcji nie ma byc kreski (uwaga 03.09). */
.w1-ti--strona .text-image-section-text ul li {
  position: static; left: auto;
  margin: 0; padding: 13px 40px 13px 0; border-top: 1px solid var(--w1-linia);
  font-size: 13.5px; line-height: 1.5; color: var(--w1-cichy);
}
.w1-ti--strona .text-image-section-text ul li:first-child { border-top: 0; padding-top: 0; }
.w1-ti--strona .text-image-section-text ul li::before { display: none; }
.w1-ti--strona .text-image-section-text ul li strong {
  display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 500; color: var(--w1-tekst);
}

/* --- 4. Formularz Kontaktu na telefonie PELNA SZEROKOSCIA, jak pas na /b2b
   (zlecenie wlasciciela). Panel siedzi w `.container`, wiec wychodzi z niego
   `margin-inline: calc(50% - 50vw)` - dziala niezaleznie od paddingu kontenera
   (dzis 15 px). Wlasny padding poziomy zostaje, zeby pola nie kleily sie do krawedzi
   ekranu. Powyzej 1140 px panel jest kolumna siatki i pozostaje w kontenerze. */
@media screen and (max-width: 1139px) {
  .w1-sekcja-formularz.w1-kontakt-formularz {
    margin-inline: calc(50% - 50vw); padding-left: 15px; padding-right: 15px;
  }
}

/* ===== Paczka 6b: lista bloga, wariant A (03.09.2026) ==================
   Projekt: docs/superpowers/specs/2026-09-03-w1-blog-i-autor-design.md
   Makieta: docs/superpowers/makiety/2026-08-20-blog-w1/ (wariant A, wybrany 20.08).

   Wszystko wisi na klasie `w1-blog` z kontenera `news/index.phtml`. Znaczniki
   pozycji sa NIETKNIETE: `news/partial/item.phtml` dziela z ta lista karuzela
   strony glownej i sekcje CMS, wiec hierarchie („pierwszy duzy, reszta zwarta")
   robi tu wylacznie CSS przez `:first-child`.

   Stan zastany do cofniecia (style.css:2161-2206): tytul byl BIALY, gruby 24 px
   i lezal absolutnie na zdjeciu, a `.news-item:before` kladl na kadr zielony
   gradient. W1 zdejmuje tytul ze zdjecia i stawia go pod kadrem. */
.w1-blog .w1-page-glowa { padding-top: 8px; }
.w1-blog .news-list { display: block; margin-bottom: 0; }
.w1-blog .news-item { position: relative; display: block; text-decoration: none; color: inherit; }
.w1-blog .news-item::before { display: none; content: none; }
/* Proporcja kadru siedzi na ZDJECIU, nie na otaczajacym `span`.
   Wersja z `aspect-ratio` na kontenerze zostawiala pod kazdym kadrem kremowy
   pasek 16 px (kadr 443x249, zdjecie 443x233 - zmierzone 03.09): `height: 100%`
   rozwiazuje sie wobec ZADEKLAROWANEJ wysokosci rodzica, a ta jest `auto`, gdy
   wysokosc bierze sie z `aspect-ratio`. Procent schodzil do `auto`, wiec zdjecie
   wracalo do wlasnej proporcji z atrybutow width/height (620x326). Sprawdzone
   takze `position: absolute; inset: 0` - to samo, bo `height: 100%` wygrywa
   z insetami. Proporcja na obrazku jest bezdyskusyjna: `span` dopasowuje sie
   do dziecka i pasek nie ma z czego powstac. */
.w1-blog .news-item-image { display: block; overflow: hidden; background: var(--w1-krem); }
.w1-blog .news-item-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .35s ease-out; }
.w1-blog a[href].news-item:hover .news-item-image img { transform: scale(1.04); }
/* Data jest globalnie schowana (w. 426) - na liscie bloga ja odslaniamy. */
.w1-blog .news-item-date { display: block; margin-top: 14px; font-size: 9.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-blog .news-item-name { position: static; left: auto; right: auto; bottom: auto; z-index: auto; margin-top: 4px; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--w1-tekst); }
.w1-blog .news-item:hover .news-item-name { text-decoration: underline; text-underline-offset: 3px; }
/* Tekst SEO: drobny druk pod wlosowa kreska, w calosci (decyzja z 20.08). */
.w1-blog .w1-blog-seo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--w1-linia); }
.w1-blog .w1-blog-seo, .w1-blog .w1-blog-seo p { font-size: 11.5px; line-height: 1.65; color: var(--w1-cichy); }
.w1-blog .w1-blog-seo p:first-child { margin-top: 0; }

@media screen and (max-width: 1139px) {
  /* HIERARCHIA wariantu A - tylko na waskim ekranie. Powyzej 1140 px makieta
     rysuje rowny pas trzech kolumn, wiec tam wszystkie pozycje sa duze. */
  .w1-blog .news-item + .news-item {
    display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto;
    gap: 0 13px; align-items: start;
    padding: 13px 0; border-top: 1px solid var(--w1-linia);
  }
  .w1-blog .news-item + .news-item .news-item-image { grid-row: 1 / span 2; width: 84px; }
  .w1-blog .news-item + .news-item .news-item-image img { aspect-ratio: 4 / 3; }
  .w1-blog .news-item + .news-item .news-item-date { grid-column: 2; margin-top: 0; color: var(--w1-cichy); }
  .w1-blog .news-item + .news-item .news-item-name { grid-column: 2; margin-top: 2px; font-size: 13.5px; line-height: 1.35; }
  /* Pierwsza pozycja: pelny kadr 16/9 i tytul 17 px. */
  .w1-blog .news-item:first-child .news-item-name { font-size: 17px; }
  .w1-blog .news-item + .news-item + .news-item { padding-top: 13px; }
}

@media screen and (min-width: 1140px) {
  /* Pas trzech kolumn - tak makieta pokazuje ta sama liste na 1140 px. Sklep ma
     dzis dokladnie ten uklad (zmierzone: 3 x 443 px), wiec zmienia sie sam odstep. */
  .w1-blog .news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
  .w1-blog .news-item + .news-item { border-top: 0; padding: 0; }
}

/* ===== Listingi: odstepy kafli i lewy boks kategorii (03.09.2026) =========
   Zamowienie wlasciciela: „Zrob odstepy pomiedzy kaflami produktow w listeningach"
   oraz „Na stronach kategorii z lewej strony jest box. Dostosuj go do W1."

   ODSTEPY. `.product-list` (style.css:2587) to siatka BEZ `gap` - kafle stykaly
   sie bokami, a poniewaz kazdy ma wlasna ramke 1 px, na styku robila sie kreska
   podwojnej grubosci. Wartosci nie sa wymyslone: bierzemy je z zatwierdzonej
   makiety karty produktu (`kp-siatka`: 26 px na szerokim ekranie, 14 px w pasie
   waskim). Karuzele maja wlasna klase `product-list-slider`, wiec ich nie ruszamy. */
.product-list { gap: 14px; }

/* LEWY BOKS. Stan zastany: pozycja aktywna byla pelnym zielonym prostokatem
   z bialym tekstem (style.css:2765), a naglowek „Kategorie" mial 24 px i grubosc
   700. W1 trzyma zielen wylacznie na kreske i statusy, wiec wypelnienie znika,
   a aktywnosc niesie kreska 2 px przy lewej krawedzi i grubsze pismo. */
.w1-aside .aside-title { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--w1-zloto); }
.w1-aside .aside-list > li { border-bottom: 0; border-top: 1px solid var(--w1-linia); }
.w1-aside .aside-list > li:last-child { border-bottom: 1px solid var(--w1-linia); }
.w1-aside .aside-list > li:first-child:not(.active) { border-top: 1px solid var(--w1-linia); }
.w1-aside .aside-list > li > .menu-group { background: none; border-left: 2px solid transparent; }
.w1-aside .aside-list > li.active > .menu-group,
.w1-aside .aside-list > li.slided > .menu-group { background: none; border-left-color: var(--w1-zielen); }
.w1-aside .aside-list > li > .menu-group > a { min-height: 0; padding: 13px 0 13px 12px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--w1-tekst); }
.w1-aside .aside-list > li.active > .menu-group > a,
.w1-aside .aside-list > li.slided > .menu-group > a { color: var(--w1-tekst); font-weight: 500; }
.w1-aside .aside-list > li > .menu-group .icon,
.w1-aside .aside-list > li.active > .menu-group .icon,
.w1-aside .aside-list > li.slided > .menu-group .icon { width: 34px; color: var(--w1-cichy); }
.w1-aside .aside-list > li > ul { padding: 0 0 12px 14px; }
.w1-aside .aside-list > li > ul a { gap: 9px; padding: 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--w1-cichy); }
.w1-aside .aside-list > li > ul > li.active a { color: var(--w1-tekst); font-weight: 500; }
.w1-aside .aside-list > li > ul a .icon-wrapper { width: 16px; margin-top: 0; justify-content: flex-start; flex: 0 0 16px; }
.w1-aside .aside-list > li > ul a .icon-wrapper img { width: 14px; height: 14px; object-fit: contain; opacity: .6; }

@media screen and (min-width: 1140px) {
  .product-list { gap: 26px; }
  /* Najazd myszka tez bez zielonego wypelnienia - tylko kreska przy krawedzi. */
  .w1-aside .aside-list > li > .menu-group:hover { background: none; border-left-color: var(--w1-linia); }
  .w1-aside .aside-list > li > .menu-group:hover > a { color: var(--w1-tekst); }
  .w1-aside .aside-list > li > .menu-group:hover .icon { color: var(--w1-cichy); }
  .w1-aside .aside-list > li > ul a:hover { color: var(--w1-tekst); }
}

/* ===== Naglowek: logo, menu, szukajka (03.09.2026) =======================
   Trzy zamowienia wlasciciela: „powieksz logo jeszcze o 30%", „odnosniki w menu
   wysrodkuj zeby byl odstep od logo bo teraz sie zlewa", „pole wyszukiwarki
   powinno byc chyba wieksze [...] problem jest z wyswietlaniem sie listy".

   PRZY OKAZJI NAPRAWIONE PRZEPELNIENIE. Zmierzone przed zmiana: pas naglowka
   miesci sie tylko od 1600 px w gore. Przy 1440, 1280 i 1140 px prawa krawedz
   `.header-right` wypadala na 1511 px, czyli poza kontener (1400 / 1240 / 1100) -
   przycisk koszyka byl UCIETY. Powod: logo, menu i narzedzia maja `flex-shrink: 0`,
   a same menu potrzebuje 808 px. Makieta naglowka (2026-08-28-karta-produktu-w1/
   styl-naglowka.css) rozwiazuje to zwijaniem szukajki do ikony, ale wlasciciel
   prosi wprost o WIEKSZE pole, wiec zamiast zwijac pole - menu schodzi do wlasnego
   wiersza tam, gdzie jedna linia sie nie miesci. Przy okazji jest wysrodkowane
   i odklejone od logo, czyli dokladnie to, o co chodzilo. */

/* Logo +30% NIE stoi tutaj, tylko w bloku rundy 10 (`@media min-width: 1140px`,
   162 -> 211 px). Regula bez media query przegrywa z tamta niezaleznie od miejsca
   w pliku - sprawdzone przez CSS.getMatchedStylesForNode: zwyciezala wartosc 162 px
   z rundy 10, mimo ze moja stala dalej. */

/* WYLACZNIE od 1140 px. Na telefonie naglowek ma wlasny uklad (logo z lewej,
   ikony z prawej, menu w panelu pod burgerem), a `flex-wrap` bez tego ograniczenia
   rozbijal go na dwa wiersze i gubil burgera - zmierzone 03.09: naglowek uroslby
   z 62 do 129 px. */
@media screen and (min-width: 1140px) {
  .header-inner.w1-glowa { flex-wrap: wrap; row-gap: 0; }
  /* `flex-basis: 100%` + `order` stawiaja menu w drugim wierszu POD logo i narzedziami.
     Bez `order` flexbox zawija zachlannie: logo i menu zmiescilyby sie razem, a na
     dol spadlyby narzedzia z koszykiem - czyli najwazniejszy przycisk sklepu. */
  .w1-glowa #main-menu { flex: 1 1 100%; min-width: 0; order: 3; margin-top: 4px; padding-bottom: 2px; }
  .w1-glowa #main-menu > ul { gap: 20px; justify-content: center; flex-wrap: wrap; }
  /* Bez `nowrap` „Herbaty Matcha" i „O nas" lamia sie na dwa wiersze (uwaga z makiety). */
  .w1-glowa #main-menu > ul > li > a { white-space: nowrap; }
  /* Pole szukania: 200 -> 280 px. */
  .w1-glowa .mainsearch { position: relative; width: 280px; }
}

@media screen and (min-width: 1600px) {
  /* Jedna linia dopiero tam, gdzie naprawde jest miejsce:
     logo 211 + menu 808 + narzedzia 525 + odstepy = ~1590 px. */
  .w1-glowa #main-menu { flex: 1 1 auto; order: 0; margin-top: 0; padding-bottom: 0; }
}

/* --- lista podpowiedzi ---------------------------------------------------
   Stan zastany: lista miala szerokosc pola (201 px), wiec nazwy produktow lamaly
   sie na trzy wiersze, a cala kolumna rosla do 750 px wysokosci. Naglowki grup
   byly pelnymi oliwkowymi pasami z bialym pismem, odnosniki w kolorze marki.
   Baza: static/lib/base-shop/css/shop-top.css:63 (`left: 0 !important`), stad
   `!important` takze tutaj - inaczej nie da sie odkleic listy od szerokosci pola. */
.w1-glowa .mainsearch .dropdown-menu {
  left: auto !important; right: 0 !important; width: 420px; max-width: calc(100vw - 40px);
  padding: 0; border: 1px solid var(--w1-linia); border-radius: 0;
  background: #fff; box-shadow: 0 12px 34px rgba(26, 26, 24, .13);
}
.w1-glowa .mainsearch .dropdown-menu > li { background: #fff; }
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li:not(:last-child) { border-bottom: 1px solid var(--w1-linia); }
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.group span,
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.category {
  min-height: 0; padding: 11px 14px 7px; border: 0;
  background: #fff; color: var(--w1-zloto);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.category:hover { background: #fff; }
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.all-search-results,
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.category:not(:first-child) { margin-top: 0; }
/* Kolor MUSI byc takze na `a`: pozycje listy to odnosniki, a te maja wlasny kolor
   z motywu sklepu (brazowo-oliwkowy) i nie dziedzicza go z `.ui-menu-item-wrapper`. */
.w1-glowa .mainsearch .ui-menu .ui-menu-item-wrapper,
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li a { padding: 9px 14px; color: var(--w1-tekst); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li a:hover { color: var(--w1-tekst); text-decoration: none; }
/* Pozycje bez miniatury (podstrony, wpisy) mialy pismo z motywu - rownamy do reszty. */
.w1-glowa .mainsearch .dropdown-menu .search-product-label { font-size: 13.5px; line-height: 1.35; }
.w1-glowa .mainsearch .ui-menu .ui-menu-item-wrapper:hover,
.w1-glowa .mainsearch .ui-menu .ui-menu-item-wrapper.ui-state-active { background: var(--w1-krem); color: var(--w1-tekst); border: 0; }
.w1-glowa .mainsearch .dropdown-menu .search-product-img-contener {
  width: 46px; height: 46px; line-height: 46px; background: var(--w1-krem);
}
.w1-glowa .mainsearch .dropdown-menu .search-product-img-contener img { max-width: 46px; max-height: 46px; border-radius: 0; }
.w1-glowa .mainsearch .dropdown-menu .search-product-img-contener ~ .search-product-label {
  width: calc(100% - 46px); padding-left: 12px; font-size: 13.5px; line-height: 1.35;
}
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.all-search-results a {
  padding: 13px 14px; background: var(--w1-tekst); color: #fff;
  font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase;
}

/* --- panel szukania na telefonie ------------------------------------------
   Pasek nad lista byl pelna ZIELENIA (`--color-primary` = #3D6800, regula
   responsive.css:933), a przycisk zamkniecia zielonym kwadratem z promieniem
   10 px. W1 trzyma zielen na kreske i statusy, a zaokraglen nie ma w ogole. */
@media screen and (max-width: 1139px) {
  .mainsearch.rwdPanel .mainsearch-search { background: #fff; border-bottom: 1px solid var(--w1-linia); }
  .mainsearch.rwdPanel input.form-control { border: 1px solid var(--w1-ramka); border-right: 0; border-radius: 0; }
  .mainsearch.rwdPanel .mainsearch-submit { border: 1px solid var(--w1-ramka); border-left: 0; border-radius: 0; background: #fff; color: var(--w1-tekst); }
  .mainsearch-rwd-button.active, .mainsearch-rwd-button {
    background: #fff; color: var(--w1-tekst); border: 1px solid var(--w1-ramka); border-radius: 0;
  }
  /* Stan „otwarty" na CZERN, nie zielen. Selektor musi miec TRZY klasy, bo tyle ma
     `.rwdButton.rwdPanel-action-toggle.active` w responsive.css:273 - wersja o dwoch
     klasach przegrywala i przycisk zostawal zielony (zmierzone po pierwszej probie).
     Dotyczy tak samo przycisku szukania, jak i burgera menu. */
  .rwdButton.rwdPanel-action-toggle.active {
    background-color: var(--w1-tekst); border-color: var(--w1-tekst); color: #fff;
  }
  .mainsearch.rwdPanel .dropdown-menu { padding: 0; background: #fff; }
  .mainsearch.rwdPanel .dropdown-menu .dropdown-search-li.all-search-results { margin-top: 0; }
}

/* --- panel menu na telefonie ---------------------------------------------
   Stan zastany: kreski burgera i „X" rysowaly sie ZIELENIA, wiersze podmenu
   szly na przemian bialo-szare, a odnosniki byly wersalikami 13 px. W1 chce
   plaskiej bieli, wlosowych linii i wersalikow tylko na pierwszym poziomie. */
@media screen and (max-width: 1139px) {
  /* Kreski burgera i „X": `.main-menu-button` SAM ma klase `animIcon`, nie zawiera
     jej w srodku - selektor potomka nic nie lapal (sprawdzone, zostawaly zielone). */
  .main-menu-button.animIcon span, .rwdButton .animIcon span, .rwdButton.animIcon span { background-color: var(--w1-tekst); }
  /* Stan OTWARTY ma wlasna regule `.main-menu-button.animIcon--hamburger.active span`
     (style.css:619, trzy klasy) i malowal „X" na zielono. Wersja o dwoch klasach
     przegrywala - zmierzone po pierwszej probie. */
  .main-menu-button.animIcon--hamburger.active span { background-color: var(--w1-tekst); }
  .main-menu-button { color: var(--w1-tekst); }
  /* Panel menu to `nav#rwd-mainmenu`, a nie `#main-menu` - ten drugi zostaje na
     duzym ekranie. Szare pasy podmenu daje zagniezdzony `ul` z tlem rgba(0,0,0,.1). */
  #rwd-mainmenu.rwdPanel, #rwd-mainmenu .cloneMenu, #rwd-mainmenu .cloneMenu ul, #rwd-mainmenu .cloneMenu li { background: #fff; }
  #rwd-mainmenu .cloneMenu > li { border-bottom: 1px solid var(--w1-linia); }
  #rwd-mainmenu .cloneMenu > li > a { font-size: 11px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-tekst); }
  #rwd-mainmenu .cloneMenu ul > li:not(:last-child) { border-bottom: 1px solid var(--w1-linia); }
  #rwd-mainmenu .cloneMenu ul a { color: var(--w1-cichy); font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  #rwd-mainmenu .cloneMenu-toggle { background: none; border: 0; border-radius: 0; color: var(--w1-cichy); }
}

/* ===== Paczka 7: sciezka zakupowa (05-06.09.2026) ===========================
   Spec: docs/superpowers/specs/2026-09-05-w1-sciezka-zakupowa-design.md
   Kontener krokow 1-3 w JEDNEJ zmiennej - decyzja 19.08: 1140 px; wlasciciel
   dopuszcza 1440, jesli ulatwi uklad. Przelaczenie = ta jedna linia.
   Rozmiary pisma bazowe (telefon); duzy ekran skaluje blok skali pisma (runda 8). */
:root { --w1-zamowienie-kontener: 1140px; }

/* stary naglowek koszyka (zielone kolka) i stare style tabeli - wylaczone */
.basket-heading { display: none; }
.w1-zamowienie { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-zamowienie-glowa .w1-page-glowa { padding: 22px 0 14px; }
.w1-zamowienie-glowa .w1-tytul--strona { font-size: 26px; }
.w1-zamowienie-glowa + .container .alert, .w1-zamowienie-glowa .alert { border-radius: 0; }
.basket-view.container--userpanel { padding-top: 0; }

/* pasek krokow */
.w1-pasek-krokow { display: flex; margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--w1-linia); border-bottom: 1px solid var(--w1-linia); }
.w1-pasek-krokow li { flex: 1; padding: 10px 4px 9px; margin-top: -1px; border-top: 2px solid transparent; font-size: 8.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); text-align: center; white-space: nowrap; }
.w1-pasek-krokow li .nr { display: inline-block; margin-right: 3px; }
.w1-pasek-krokow li.tu { border-top-color: var(--w1-zielen); color: var(--w1-tekst); font-weight: 600; }
.w1-pasek-krokow li.zrobiony { color: var(--w1-tekst); }
.w1-pasek-krokow li.zrobiony .nr::after { content: " \2713"; color: var(--w1-zielen); }

/* koszyk: lista pozycji */
.basket-view .basket-banner, .basket-view .basket-banner img { border-radius: 0; }
.w1-pozycje { border-top: 1px solid var(--w1-tekst); font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-poz { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0 14px; padding: 16px 0; border-bottom: 1px solid var(--w1-linia); align-items: start; }
.w1-poz--dodatek { padding-left: 22px; }
.w1-poz-plus { position: absolute; left: 0; top: 16px; font-size: 16px; font-weight: 500; color: var(--w1-zloto); }
.w1-poz-kadr { display: block; width: 52px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--w1-krem); }
.w1-poz-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-poz-nazwa { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--w1-tekst); text-decoration: none; }
.w1-poz-drobny { margin-top: 3px; font-size: 10.5px; color: var(--w1-cichy); }
.w1-poz-drobny > * { display: block; }
.w1-poz-dol { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.w1-poz-usun { font-size: 10.5px; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-poz-usun:hover { color: var(--w1-tekst); }
.w1-poz-ilosc-stala { font-size: 11.5px; color: var(--w1-cichy); }
.w1-poz-kwota { text-align: right; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-poz-kwota small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: var(--w1-cichy); }
.w1-poz .price-container, .w1-poz .price { display: inline; font-size: inherit; font-weight: inherit; color: inherit; }
/* licznik ilosci: 30 px kwadraty, zero zaokraglen (spec 2.3) */
.w1-poz .shop-quantity-box.input-counter { display: inline-flex; margin: 0; padding: 0; height: 30px; border: 1px solid var(--w1-ramka); border-radius: 0; vertical-align: top; }
.w1-poz .shop-quantity-box .input-qty { order: 2; width: 38px; height: 28px; padding: 0; border: 0; border-left: 1px solid var(--w1-ramka); border-right: 1px solid var(--w1-ramka); border-radius: 0; box-shadow: none; text-align: center; font-size: 12px; font-weight: 500; }
.w1-poz .shop-quantity-box .action { position: static; width: 30px; height: 28px; line-height: 28px; text-align: center; border: 0; border-radius: 0; background: #fff; color: var(--w1-tekst); font-size: 14px; cursor: pointer; }
.w1-poz .shop-quantity-box .action.minus { order: 1; }
.w1-poz .shop-quantity-box .action.plus { order: 3; }
.w1-poz .shop-quantity-box .action .caption { display: block; line-height: 28px; }

/* koszyk: lepka stopka */
.w1-stopka-koszyka { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding: 12px 0 12px; background: #fff; border-top: 1px solid var(--w1-tekst); font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-stopka-koszyka .w1-kupon-link, .w1-stopka-koszyka .w1-link-cichy { display: block; font-size: 11.5px; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-stopka-koszyka .w1-kupon-link { padding-bottom: 10px; }
.w1-stopka-koszyka .w1-link-cichy { text-align: center; margin-top: 11px; }
.w1-stopka-koszyka .w1-kupon-pole { margin-bottom: 10px; }
.w1-stopka-koszyka .prog-dostawy { margin: 0 0 8px; border-radius: 0; }
.w1-stopka-koszyka .w1-do-zaplaty { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 13.5px; font-weight: 500; }
.w1-stopka-koszyka .w1-do-zaplaty .w1-kwota { font-size: 19px; font-variant-numeric: tabular-nums; }
.w1-stopka-koszyka .w1-dostawa-od { margin-top: 3px; font-size: 11.5px; color: var(--w1-cichy); }
.w1-stopka-koszyka .w1-btn-dalej, .w1-zamowienie .w1-btn { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 12px; padding: 15px 18px; background: var(--w1-tekst); color: #fff; border: 0; border-radius: 0; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; }
/* bez zieleni na hover/focus - na dotyku hover zostaje po kliknieciu (wlasciciel 06.09) */
.w1-stopka-koszyka .w1-btn-dalej:hover, .w1-zamowienie .w1-btn:hover, .w1-stopka-koszyka .w1-btn-dalej:focus, .w1-zamowienie .w1-btn:focus, .w1-zamowienie .w1-btn:active { background: var(--w1-tekst); color: #fff; opacity: .86; outline: none; }
.w1-stopka-koszyka .w1-slot-inpost:empty { display: none; }
.w1-stopka-koszyka .w1-slot-inpost { margin-top: 10px; }
.w1-stopka-koszyka .w1-slot-inpost inpost-izi-button, .w1-slot-inpost--krok2 inpost-izi-button { display: block; width: 100%; min-height: 48px; }
.w1-slot-inpost--krok2:empty { display: none; }
.w1-slot-inpost--krok2 { margin-bottom: 18px; }

/* krok 2 i 3: sekcje */
.w1-zamowienie-uklad { margin-top: 4px; padding-bottom: 36px; }
.basket-view .w1-stopka-koszyka { margin-bottom: 0; }
.w1-sekcja-kroku { margin-top: 22px; }
.w1-sekcja-kroku:first-child { margin-top: 0; }
.w1-tyt-sekcji { display: block; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--w1-linia); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); line-height: 1.4; }
.w1-blad { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid var(--w1-alarm); background: var(--w1-krem); font-size: 12px; color: var(--w1-alarm); }
.w1-zamowienie .w1-etykieta, .w1-zamowienie label.form-element-name, .w1-zamowienie .form-element-label-helper label { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-zamowienie .form-required-mark { color: var(--w1-zloto); }
.w1-zamowienie .form-control, .w1-zamowienie .w1-wej { height: 44px; padding: 8px 12px; border: 1px solid var(--w1-ramka); border-radius: 0; box-shadow: none; font-size: 13px; color: var(--w1-tekst); background: #fff; }
.w1-zamowienie textarea.form-control { height: auto; min-height: 96px; }
.w1-zamowienie .form-control:focus { border-color: var(--w1-tekst); box-shadow: none; }
.w1-zamowienie .has-error .form-control { border-color: var(--w1-alarm); }
.w1-zamowienie .alert-block, .w1-zamowienie .help-block { font-size: 10.5px; color: var(--w1-alarm); }
.w1-zamowienie .w1-pole { margin-bottom: 12px; }
.w1-zamowienie .form-element-container { margin-bottom: 12px; }
.w1-zamowienie .w1-wej--stale { display: flex; align-items: center; background: var(--w1-krem); }
.w1-konto-notka { margin-top: 10px; padding: 11px 13px; background: var(--w1-krem); border-left: 2px solid var(--w1-zloto); font-size: 11.5px; color: var(--w1-cichy); }
.w1-haslo { margin-top: 10px; }
.w1-haslo-linki { display: flex; gap: 16px; margin-top: 8px; font-size: 10.5px; }
.w1-zamowienie .w1-link-cichy { font-size: 11px; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-notka-krem { margin: 4px 0 0; padding: 10px 13px; background: var(--w1-krem); font-size: 11px; color: var(--w1-cichy); }
/* stare panele formularza (Dane dostawy / Dane do rozliczenia) - bez ramek i naglowkow */
.w1-zamowienie .panel, .w1-zamowienie .panel-body { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }
.w1-zamowienie .panel-heading { display: none; }
.w1-zamowienie .delivery-address-fieldset, .w1-zamowienie .invoice-address-fieldset { margin: 0; padding: 0; border: 0; }
.w1-zamowienie .invoice-fields .form-element-radio-container, .w1-zamowienie .invoice-fields > .form-element-container > div > .form-element-label-wrapper { display: none; }
/* radia dostawy i platnosci: wiersze z linia, znacznik W1 zamiast iCheck minimal */
.w1-zamowienie .delivery-methods .form-element-name, .w1-zamowienie .payment-methods .form-element-name { display: none; }
.w1-zamowienie .delivery-methods .checkboxradio-container .col-xs-12, .w1-zamowienie .payment-methods .checkboxradio-container [class*="col-"] { width: 100%; float: none; padding: 0; }
.w1-zamowienie .delivery-methods label, .w1-zamowienie .payment-methods label, .w1-zamowienie .consent-row label { display: flex; gap: 12px; align-items: center; width: 100%; margin: 0; padding: 11px 0; border-top: 1px solid var(--w1-linia); border-radius: 0; background: none; font-size: 12.5px; font-weight: 400; color: var(--w1-tekst); cursor: pointer; }
.w1-zamowienie .delivery-methods .col-xs-12:first-child label, .w1-zamowienie .payment-methods [class*="col-"]:first-child label { border-top: 0; }
.w1-zamowienie .form-element-option-text { flex: 1; }
.w1-zamowienie .shop-method-name { color: var(--w1-tekst); }
.w1-zamowienie .shop-method-price-value { color: var(--w1-cichy); }
.w1-zamowienie .payment-methods img { max-height: 22px; width: auto; }
/* (0,3,1): stary strój .form .checkboxradio-container [class^=iradio] daje position:absolute i wyrzuca znacznik poza ekran na telefonie */
.w1-zamowienie .checkboxradio-container label .iradio_minimal-custom, .w1-zamowienie .checkboxradio-container label .icheckbox_minimal-custom { position: relative; top: auto; left: auto; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; border: 1px solid var(--w1-cichy); border-radius: 0; background: #fff; }
.w1-zamowienie .checkboxradio-container label .iradio_minimal-custom { border-radius: 50%; }
.w1-zamowienie .iradio_minimal-custom.checked, .w1-zamowienie .icheckbox_minimal-custom.checked { border-color: var(--w1-tekst); }
.w1-zamowienie .iradio_minimal-custom.checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--w1-tekst); }
.w1-zamowienie .icheckbox_minimal-custom.checked::after { content: "\2713"; position: absolute; inset: 0; text-align: center; line-height: 16px; font-size: 12px; color: var(--w1-tekst); }
.w1-termin-dostawy { margin: 6px 0 0; }
.w1-termin-dostawy .termin-wysylki { margin: 0; padding: 10px 13px; border: 0; border-radius: 0; background: var(--w1-krem); font-size: 12px; }
.w1-termin-dostawy:empty { display: none; }
.w1-vat-przelacznik { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font-size: 12.5px; font-weight: 400; cursor: pointer; }
.w1-vat-przelacznik input { width: 18px; height: 18px; margin: 0; accent-color: var(--w1-tekst); }
.w1-zamowienie .before-consent-row .text { font-size: 10.5px; color: var(--w1-cichy); margin: 14px 0 4px; }
.w1-zamowienie .consent-row, .w1-zamowienie .before-consent-row { margin: 0; border-radius: 0; background: none; border: 0; }
.w1-zamowienie .consent-row label { padding: 9px 0; font-size: 10.5px; color: var(--w1-cichy); align-items: flex-start; }
.w1-zamowienie .consent-row .icheckbox_minimal-custom { margin-top: 1px; }
.w1-zamowienie .consent-all-row { margin-top: 6px; }
.w1-zamowienie .consent-all { font-size: 10.5px; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-zamowienie .captcha-container { margin-top: 12px; }
.w1-krok-akcje { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.w1-krok-akcje .w1-btn { margin-top: 0; }
/* panel podsumowania (prawa kolumna) */
.w1-panel-sumy { margin-top: 22px; padding: 16px; background: var(--w1-krem); }
.w1-panel-tyt { padding-bottom: 8px; border-bottom: 1px solid var(--w1-linia); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-panel-poz { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 11px; padding: 12px 0; border-bottom: 1px solid var(--w1-linia); align-items: start; font-size: 12.5px; }
.w1-panel-kadr { display: block; width: 44px; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.w1-panel-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w1-panel-naz small { display: block; margin-top: 3px; font-size: 10px; color: var(--w1-cichy); }
.w1-panel-cena { font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-panel-wiersz { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--w1-linia); font-size: 12.5px; }
.w1-panel-wiersz:first-of-type { border-top: 0; }
.w1-panel-razem { border-top: 1px solid var(--w1-tekst); padding-top: 12px; font-size: 14px; font-weight: 500; }
.w1-panel-razem .w1-kwota { font-size: 19px; font-variant-numeric: tabular-nums; }
.w1-panel-sumy .w1-btn { margin-top: 14px; }
/* krok 3: bloki danych */
.w1-dane-siatka { display: grid; gap: 18px; }
.w1-dane-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--w1-linia); }
.w1-dane-naglowek .w1-tyt-sekcji { margin: 0; padding: 0; border: 0; }
.w1-dane-tresc { font-size: 12.5px; line-height: 1.55; }
.w1-podsumowanie-produkty { margin-top: 22px; }
.w1-podsumowanie-produkty .table, .w1-podsumowanie .table { margin: 0; font-size: 12.5px; }
.w1-podsumowanie .table > thead > tr > th { border-top: 0; border-bottom: 1px solid var(--w1-tekst); padding: 8px 6px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-zloto); background: transparent; }
.w1-podsumowanie .table > tbody > tr > td, .w1-podsumowanie .table > tbody > tr > th { border-top: 1px solid var(--w1-linia); padding: 10px 6px; vertical-align: middle; background: transparent; }
/* pierwszy wiersz tuz pod kreska naglowka bloku - bez wlasnej kreski (dwie kreski, 08.09) */
.w1-podsumowanie .table > tbody > tr:first-child > td, .w1-podsumowanie .table > tbody > tr:first-child > th { border-top: 0; }
.w1-podsumowanie .table img { max-width: 44px; }
.w1-tabela-danych th { font-weight: 400; color: var(--w1-cichy); }
.w1-podsumowanie-uwagi p { font-size: 12.5px; }
.w1-podsumowanie-akcje { margin-top: 14px; }
.w1-podsumowanie-akcje .w1-btn { margin-top: 0; }
.w1-podsumowanie-wroc { display: block; margin-top: 12px; text-align: center; }
/* potwierdzenie */
.w1-potwierdzenie-glowa { padding: 26px 0 8px; text-align: center; }
.w1-znak-ok { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 2px solid var(--w1-zielen); border-radius: 50%; color: var(--w1-zielen); font-size: 20px; }
.w1-potwierdzenie-glowa .w1-tyt-strony { margin: 0; font-size: 24px; font-weight: 500; }
.w1-potwierdzenie-numer { margin: 8px 0 0; font-size: 12.5px; color: var(--w1-cichy); }
.w1-potwierdzenie-tresc { margin-bottom: 18px; font-size: 12.5px; line-height: 1.6; }
.w1-potwierdzenie-tresc .confirmation-box, .w1-potwierdzenie .confirmation-box { border: 0; padding: 0; border-radius: 0; }
.w1-zaloz-konto .w1-cichy { font-size: 11.5px; color: var(--w1-cichy); margin: 10px 0 12px; }
.w1-zaloz-konto .w1-etykieta { margin-top: 4px; }
.w1-potwierdzenie-wroc { display: block; margin-top: 16px; text-align: center; }
.w1-status { display: inline-block; padding: 3px 8px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--w1-zielen); color: #fff; }

@media screen and (min-width: 1140px) {
  .w1-zamowienie.container { width: var(--w1-zamowienie-kontener); max-width: calc(100% - 80px); padding: 0; }
  .basket-view.container--userpanel { width: var(--w1-zamowienie-kontener); max-width: calc(100% - 80px); padding: 0; }
  .w1-zamowienie-glowa .w1-page-glowa { display: block; padding: 34px 0 18px; }
  .w1-zamowienie-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .w1-panel-sumy { position: sticky; top: 110px; margin-top: 0; }
  .w1-pasek-krokow li { padding: 12px 6px 11px; }
  .w1-poz { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0 20px; padding: 20px 0; }
  .w1-poz-kadr { width: 72px; }
  .w1-dane-siatka { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
  .w1-krok-akcje { flex-direction: row; justify-content: space-between; }
  .w1-krok-akcje .w1-btn { width: auto; min-width: 280px; }
  .w1-potwierdzenie-glowa { padding-top: 40px; }
}

/* 06.09: uwagi wlasciciela po pierwszym ogladzie - wybor dostawy/platnosci wg makiety
   (.wybor), pasek progu w stopce jak w makiecie, komunikaty W1, „Kontynuuj zakupy" */
.w1-wybory { border-bottom: 1px solid var(--w1-linia); }
.w1-wybor { display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px 0; border-top: 1px solid var(--w1-linia); font-weight: 400; cursor: pointer; }
.w1-wybor:first-child { border-top: 0; }
.w1-wybor--wylaczony { opacity: .55; cursor: not-allowed; }
.w1-wybor input[type="radio"], .w1-wybor input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* znacznik: kwadrat 16 px, wybrany = zielen z ptaszkiem (makieta .znacznik-pola); iCheck
   podmienia input na .iradio_minimal-custom, wiec stroimy ten element */
.w1-wybor .iradio_minimal-custom, .w1-wybor .icheckbox_minimal-custom, .w1-wybor .w1-znacznik { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; border: 1px solid var(--w1-cichy); border-radius: 0; background: #fff; }
.w1-wybor .iradio_minimal-custom.checked, .w1-wybor .icheckbox_minimal-custom.checked, .w1-wybor input:checked + .w1-znacznik { border-color: var(--w1-zielen); background: var(--w1-zielen); }
.w1-wybor .iradio_minimal-custom.checked::after, .w1-wybor .icheckbox_minimal-custom.checked::after, .w1-wybor input:checked + .w1-znacznik::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -60%) rotate(45deg); background: none; border-radius: 0; line-height: 0; font-size: 0; }
.w1-dlogo { flex: none; display: grid; place-items: center; width: 44px; height: 24px; border: 1px solid var(--w1-linia); font-size: 8.5px; font-weight: 600; letter-spacing: .04em; color: var(--w1-cichy); text-transform: uppercase; overflow: hidden; }
.w1-dlogo--inpost { border-color: var(--w1-zloto); color: var(--w1-zloto); }
.w1-dlogo img { max-width: 40px; max-height: 20px; width: auto; height: auto; }
.w1-wtresc { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--w1-tekst); }
.w1-wtresc b { font-weight: 600; }
.w1-wtresc small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--w1-cichy); }
.w1-wtresc small.w1-wybor-powod { color: var(--w1-alarm); }
.w1-wcena { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* z iCheck znacznikiem jest jego div; wlasny span tylko bez iCheck */
.w1-wybor .iradio_minimal-custom ~ .w1-znacznik, .w1-wybor .icheckbox_minimal-custom ~ .w1-znacznik { display: none; }
.w1-ukryte { display: none; }
/* pasek progu w stopce koszyka: krem, tekst wyciszony z kwota ciemna, tor 3 px (makieta .prog) */
.w1-stopka-koszyka .prog-dostawy { min-height: 0; margin: 0 0 10px; padding: 10px 12px; border: 0; border-radius: 0; background: var(--w1-krem); font-size: 11px; color: var(--w1-cichy); }
.w1-stopka-koszyka .prog-dostawy-tekst { margin: 0 0 7px; color: var(--w1-cichy); }
.w1-stopka-koszyka .prog-dostawy-tekst b, .w1-stopka-koszyka .prog-dostawy-tekst strong { color: var(--w1-tekst); font-weight: 600; }
.w1-stopka-koszyka .prog-dostawy-pasek { height: 3px; margin: 0; border-radius: 0; background: var(--w1-linia); }
.w1-stopka-koszyka .prog-dostawy-wypelnienie { height: 3px; border-radius: 0; background: var(--w1-zielen); }
.w1-stopka-koszyka .prog-dostawy--osiagniety .prog-dostawy-pasek { display: block; }
/* komunikaty (np. „koszyk zaktualizowany") w stroju W1 */
.w1-alerty .alert { position: relative; margin: 0 0 14px; padding: 11px 36px 11px 14px; border: 0; border-left: 2px solid var(--w1-zloto); border-radius: 0; background: var(--w1-krem); box-shadow: none; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--w1-tekst); }
.w1-alerty .alert-success { border-left-color: var(--w1-zielen); }
.w1-alerty .alert-danger, .w1-alerty .alert-error { border-left-color: var(--w1-alarm); color: var(--w1-alarm); }
.w1-alerty .alert .message-icon { display: none; }
.w1-alerty .alert .close { position: absolute; right: 10px; top: 8px; float: none; font-size: 18px; font-weight: 400; color: var(--w1-cichy); opacity: 1; text-shadow: none; }
/* „Kontynuuj zakupy" - drobny link wersalikami (makieta .link-drobny) */
.w1-stopka-koszyka .w1-link-cichy, .w1-potwierdzenie-wroc { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }

/* 06.09 (druga runda uwag): stopka na telefonie, krok 2 bez kafla sum na telefonie i bez
   drugiego przycisku na pc, podsumowanie z kaflem na gorze i jednym „Popraw dane" */
.w1-stopka-koszyka { padding-bottom: 22px; }
.w1-stopka-koszyka .w1-dostawa-od { text-align: right; }
.w1-stopka-koszyka .w1-link-cichy { margin-top: 14px; }
.w1-krok2.w1-zapisuje #dostawa, .w1-krok2.w1-zapisuje #platnosc { pointer-events: none; opacity: .55; transition: opacity .2s; }
.w1-podsumowanie-wroc { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-podsumowanie .w1-podsumowanie-dostawa { margin-top: 22px; }
.w1-termin-podsumowania { margin: 12px 0 0; }
.w1-punkt-id { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .06em; color: var(--w1-cichy); }
.w1-panel-szczegoly { margin-top: 10px; border-top: 1px solid var(--w1-linia); }
.w1-panel-szczegoly .w1-panel-wiersz:first-child { border-top: 0; }
.w1-panel-szczegoly .w1-panel-wiersz > span:first-child { color: var(--w1-cichy); }
.w1-panel-szczegoly .w1-panel-wiersz > span:last-child { text-align: right; }
.w1-podsumowanie-uwagi { margin-bottom: 8px; }
.w1-podsumowanie .w1-podsumowanie-akcje { margin-top: 26px; }
.w1-termin-podsumowania:empty { display: none; }
@media screen and (max-width: 1139px) {
  .w1-krok-dostawa .w1-panel-sumy { display: none; }
  /* kafel „Twoje zamowienie" na gorze, przycisk „Zamawiam i place" na dole */
  .w1-podsumowanie .w1-zamowienie-uklad { display: flex; flex-direction: column; }
  .w1-podsumowanie .w1-podsumowanie-prawa { display: contents; }
  .w1-podsumowanie .w1-podsumowanie-lewa { order: 0; }
  .w1-podsumowanie .w1-podsumowanie-akcje { order: 1; }
  .w1-podsumowanie .w1-podsumowanie-wroc { order: 2; }
}
@media screen and (min-width: 1140px) {
  .w1-krok-dostawa .w1-krok-akcje .w1-btn { display: none; }
  .w1-krok-dostawa .w1-krok-akcje { justify-content: flex-start; }
}

/* 07.09 (trzecia runda uwag) */
.w1-link-drobny, .w1-zamowienie .w1-link-drobny { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w1-cichy); text-decoration: underline; text-underline-offset: 3px; }
.w1-poz-kwota small, .w1-poz-kwota small * { display: inline; white-space: nowrap; }
.w1-poz-kwota small { display: block; }
.w1-wtresc small.w1-teaser { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w1-vat-przelacznik.w1-wybor { padding: 12px 0; }
/* widget punktu (makieta: pole z nazwa punktu + przycisk wtorny na cala szerokosc) */
.w1-punkt .panel, .w1-punkt .panel-body { padding: 0; margin: 0; }
.w1-punkt .col-xs-12, .w1-punkt .inPost-element { float: none; width: 100%; padding: 0; margin: 0; }
.w1-punkt .input-group { display: flex; flex-direction: column; width: 100%; }
.w1-punkt .input-group .form-control, .w1-punkt .form-map-address { display: block; width: 100%; height: 44px; border: 1px solid var(--w1-ramka); border-radius: 0; box-shadow: none; font-size: 13px; background: var(--w1-krem); }
.w1-punkt .input-group-btn { display: block; width: 100%; }
.w1-punkt .btn-point-select { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 12px; padding: 14px 18px; background: transparent; color: var(--w1-tekst); border: 1px solid var(--w1-tekst); border-radius: 0; box-shadow: none; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: center; }
.w1-punkt .btn-point-select:hover, .w1-punkt .btn-point-select:focus { background: var(--w1-krem); color: var(--w1-tekst); }
.w1-punkt .btn-point-select .fa { display: none; }
.w1-punkt { margin-top: 12px; }
.w1-punkt:empty { margin: 0; }
/* mapa InPost (geowidget): pasek i ramka w W1 zamiast zieleni sklepu */
body .widget-modal .widget-modal__topbar, body #widget-modal .widget-modal__topbar { background: var(--w1-tekst) !important; }
body div#widget-modal { border: 1px solid var(--w1-tekst) !important; border-radius: 0 !important; }
/* okna map DPD/DHL (modalBox sklepu) w krokach zamowienia: naglowek w czerni W1, bez zaokraglen */
body.w1-krok .modal .modal-header { background: var(--w1-tekst); color: #fff; border-radius: 0; }
body.w1-krok .modal .modal-header .close { color: #fff; opacity: 1; text-shadow: none; }
body.w1-krok .modal .modal-content { border-radius: 0; border-color: var(--w1-tekst); }
@media screen and (max-width: 1139px) {
  /* podsumowanie na telefonie: dane, dostawa i platnosc, kafel „Twoje zamowienie", uwagi, przycisk */
  .w1-podsumowanie .w1-podsumowanie-lewa { display: contents; }
  .w1-podsumowanie .w1-dane-siatka { order: 0; }
  .w1-podsumowanie .w1-podsumowanie-dostawa { order: 1; }
  /* 10.09: kafel na gorze, potem dane i uwagi, termin, przycisk */
  .w1-podsumowanie .w1-panel-sumy { order: -1; margin: 0 0 22px; }
  .w1-podsumowanie .w1-termin-podsumowania { order: 4; }
  .w1-podsumowanie .w1-podsumowanie-uwagi { order: 3; }
  .w1-podsumowanie .w1-podsumowanie-akcje { order: 5; }
}

/* 08.09: kupon w stopce koszyka - jeden wiersz: pole + przycisk (stary stroj stawial kafel
   z szarym tlem, etykieta, tekstem i przyciskiem pod polem na cala szerokosc) */
.basket-view .w1-stopka-koszyka .basket-coupon { margin: 0 0 10px; padding: 0; background: none; border: 0; }
.basket-view .w1-stopka-koszyka .basket-coupon label, .basket-view .w1-stopka-koszyka .basket-coupon-text { display: none; }
.basket-view .w1-stopka-koszyka .basket-coupon-col, .basket-view .w1-stopka-koszyka .basket-coupon-box { float: none; width: 100%; padding: 0; margin: 0; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .form-inline, .basket-view .w1-stopka-koszyka .basket-coupon-box .element-row, .basket-view .w1-stopka-koszyka .basket-coupon-box .form-element { display: block; width: 100%; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group { display: flex; width: 100%; gap: 0; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group > * { float: none; display: block; width: auto; height: 44px; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control { flex: 1 1 auto; min-width: 0; height: 44px; padding: 8px 12px; border: 1px solid var(--w1-ramka); border-right: 0; border-radius: 0; box-shadow: none; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control:focus { border-color: var(--w1-tekst); }
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group-btn { flex: none; width: auto; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .btn { display: block; width: auto; height: 44px; margin: 0; padding: 0 16px; background: var(--w1-tekst); color: #fff; border: 1px solid var(--w1-tekst); border-radius: 0; box-shadow: none; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; line-height: 42px; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .form-inline .input-group .input-group-btn .btn { height: 44px; line-height: 42px; padding: 0 16px; margin: 0; border-radius: 0; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .btn:hover, .basket-view .w1-stopka-koszyka .basket-coupon-box .btn:focus { background: var(--w1-tekst); color: #fff; opacity: .86; }
.basket-view .w1-stopka-koszyka .basket-coupon-activated .input-group { align-items: center; border: 1px solid var(--w1-linia); padding-left: 12px; }
.basket-view .w1-stopka-koszyka .basket-coupon-code { flex: 1; padding: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 42px; }
.basket-view .w1-stopka-koszyka .basket-coupon-activated .btn { height: 42px; line-height: 40px; }
.basket-view .w1-stopka-koszyka .coupon-info { margin-top: 6px; font-size: 11px; color: var(--w1-zielen); }
.basket-view .w1-stopka-koszyka .basket-coupon .alert-block { display: block; font-size: 10.5px; color: var(--w1-alarm); }
.basket-view .w1-stopka-koszyka .basket-coupon .form-control-feedback { display: none; }
.w1-kupon-link[aria-expanded="true"] { color: var(--w1-tekst); }

/* 08.09: pasek progu nad lista (po banerze), uzyty kupon pod lista */
.w1-prog-nad-lista .prog-dostawy { min-height: 0; margin: 0 0 18px; padding: 10px 12px; border: 0; border-radius: 0; background: var(--w1-krem); font-family: "Red Hat Display", system-ui, sans-serif; font-size: 11px; color: var(--w1-cichy); }
.w1-prog-nad-lista .prog-dostawy-tekst { margin: 0 0 7px; color: var(--w1-cichy); }
.w1-prog-nad-lista .prog-dostawy-tekst b, .w1-prog-nad-lista .prog-dostawy-tekst strong { color: var(--w1-tekst); font-weight: 600; }
.w1-prog-nad-lista .prog-dostawy-pasek { height: 3px; margin: 0; border-radius: 0; background: var(--w1-linia); }
.w1-prog-nad-lista .prog-dostawy-wypelnienie { height: 3px; border-radius: 0; background: var(--w1-zielen); }
.w1-prog-nad-lista .prog-dostawy--osiagniety .prog-dostawy-pasek { display: block; }
.w1-kupon-aktywny { margin-top: 14px; font-family: "Red Hat Display", system-ui, sans-serif; }
.basket-view .w1-kupon-aktywny .basket-coupon { margin: 0; padding: 0; background: none; border: 0; }
.basket-view .w1-kupon-aktywny .basket-coupon label, .basket-view .w1-kupon-aktywny .basket-coupon-text { display: none; }
.basket-view .w1-kupon-aktywny .basket-coupon-col, .basket-view .w1-kupon-aktywny .basket-coupon-box { float: none; width: 100%; padding: 0; margin: 0; }
.basket-view .w1-kupon-aktywny .basket-coupon-activated .input-group { display: flex; align-items: center; width: 100%; border: 1px solid var(--w1-linia); padding-left: 12px; }
.basket-view .w1-kupon-aktywny .basket-coupon-activated .input-group > * { float: none; display: block; width: auto; height: auto; }
.basket-view .w1-kupon-aktywny .basket-coupon-code { flex: 1; padding: 0; text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 42px; }
.basket-view .w1-kupon-aktywny .basket-coupon-activated .btn { display: block; height: 42px; margin: 0; padding: 0 16px; background: transparent; color: var(--w1-tekst); border: 0; border-left: 1px solid var(--w1-linia); border-radius: 0; box-shadow: none; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; line-height: 42px; }
.basket-view .w1-kupon-aktywny .coupon-info { margin-top: 6px; font-size: 11px; color: var(--w1-zielen); text-align: left; }

/* 08.09: pasek krokow klikalny wstecz, „Powrot do koszyka" w kaflu na pc, prawa kolumna
   podsumowania podaza za ekranem */
.w1-pasek-krokow li a.w1-krok-wstecz { color: inherit; text-decoration: none; }
.w1-pasek-krokow li a.w1-krok-wstecz:hover { color: var(--w1-zielen); }
.w1-panel-wstecz { display: none; }
@media screen and (min-width: 1140px) {
  .w1-krok-dostawa .w1-krok-akcje { display: none; }
  .w1-panel-wstecz { display: block; margin-top: 14px; text-align: center; }
  .w1-podsumowanie .w1-podsumowanie-prawa { position: sticky; top: 110px; }
  .w1-podsumowanie .w1-panel-sumy { position: static; }
}

/* 10.09: proporcje kolumn na pc - krok 2: lewa wezsza o ~10 % (kafel 430 px); krok 3: kafel 2/3
   kontenera, dane w jednej kolumnie po lewej */
@media screen and (min-width: 1140px) {
  .w1-krok-dostawa .w1-zamowienie-uklad { grid-template-columns: minmax(0, 1fr) 430px; }
  .w1-podsumowanie .w1-zamowienie-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .w1-podsumowanie .w1-dane-siatka { grid-template-columns: 1fr; gap: 22px; }
  .w1-podsumowanie .w1-dane-tresc { font-size: 13.5px; }
}

/* 10.09 audyt dostepnosci sciezki: focus WYLACZNIE z klawiatury (:focus-visible), dyskretny
   czarny obrys 1 px - klik myszka/dotyk nie zostawia obrysu (wlasciciel: bez zielonych obrysow);
   cele dotyku >= 24 px (WCAG 2.5.8) dla drobnych linkow */
.w1-zamowienie a:focus-visible, .w1-zamowienie button:focus-visible,
.w1-stopka-koszyka a:focus-visible, .w1-stopka-koszyka button:focus-visible,
.w1-pozycje a:focus-visible, .w1-kupon-aktywny a:focus-visible { outline: 1px solid var(--w1-tekst) !important; outline-offset: 2px; }
/* pola tekstowe: zamiast obrysu ramka na czarno (WCAG 2.4.7 - zmiana koloru ramki 1:1 to widoczny focus, kontrast 16:1) */
.w1-zamowienie .form-control:focus, .w1-zamowienie .form-control:focus-visible, .w1-zamowienie textarea:focus, .w1-zamowienie select:focus,
.w1-stopka-koszyka .form-control:focus, .w1-stopka-koszyka .form-control:focus-visible, .w1-pozycje .input-qty:focus { outline: none !important; border-color: var(--w1-tekst) !important; box-shadow: none; }
.w1-poz-usun { display: inline-block; padding: 8px 6px; margin: -8px -6px; }
.w1-stopka-koszyka .w1-kupon-link { padding-top: 6px; padding-bottom: 10px; }
.w1-stopka-koszyka .w1-link-cichy, .w1-potwierdzenie-wroc, .w1-podsumowanie-wroc, .w1-panel-wstecz, .w1-krok-akcje .w1-link-drobny { padding: 10px 0; }
.w1-pasek-krokow li a.w1-krok-wstecz { display: block; margin: -10px -4px -9px; padding: 10px 4px 9px; }

/* 10.09 (piata runda uwag): pismo na telefonie wg audytu, uwagi zwijane, bez „zaznacz
   wszystkie", wiekszy licznik ilosci, blad kuponu pod polem, kupon na pc zawsze widoczny */
@media screen and (max-width: 1139px) {
  .w1-pasek-krokow li { font-size: 10px; }
  .w1-tyt-sekcji, .w1-dane-naglowek .w1-tyt-sekcji, .w1-panel-tyt { font-size: 10.5px; }
  .w1-zamowienie .w1-etykieta, .w1-zamowienie label.form-element-name, .w1-zamowienie .form-element-label-helper label { font-size: 10.5px; }
  .w1-dlogo { font-size: 9px; }
  .w1-wtresc small, .w1-panel-poz small, .w1-poz-drobny, .w1-poz-usun, .w1-poz-kwota small, .w1-zamowienie .consent-row label, .w1-zamowienie .before-consent-row .text, .w1-zamowienie .alert-block, .w1-zamowienie .help-block { font-size: 11px; }
  .w1-stopka-koszyka .w1-btn-dalej, .w1-zamowienie .w1-btn, .w1-punkt .btn-point-select { font-size: 11px; }
  .w1-stopka-koszyka .w1-link-cichy, .w1-potwierdzenie-wroc, .w1-podsumowanie-wroc, .w1-link-drobny, .w1-zamowienie .w1-link-drobny { font-size: 11px; }
  .w1-stopka-koszyka .w1-kupon-link, .w1-stopka-koszyka .w1-dostawa-od { font-size: 12px; }
}
/* uwagi do zamowienia zwijane jak „Chce fakture VAT" */
.w1-uwagi-pole { margin-top: 10px; }
.w1-uwagi-pole[hidden] { display: none; }
/* bez „Zaznacz wszystkie zgody" */
.w1-zamowienie .consent-all-row { display: none; }
/* licznik ilosci: 36 px kwadraty, plus/minus w osi */
.w1-poz .shop-quantity-box.input-counter { height: 36px; }
.w1-poz .shop-quantity-box .input-qty { width: 42px; height: 34px; font-size: 13px; }
.w1-poz .shop-quantity-box .action { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; line-height: 1; font-size: 16px; padding: 0; }
.w1-poz .shop-quantity-box .action .caption { display: block; line-height: 1; padding: 0; margin: 0; }
/* blad kuponu pod polem, nie w oknie */
.basket-view .w1-stopka-koszyka .basket-coupon .w1-kupon-blad { display: block; margin-top: 6px; font-size: 11px; color: var(--w1-alarm); }
@media screen and (min-width: 1140px) {
  /* pc: pole kuponu zawsze widoczne w lewej kolumnie stopki, sumy i przycisk w prawej -
     dwie kolumny startuja od tego samego wiersza, wiec przycisk nie ucieka w dol */
  .w1-stopka-koszyka .w1-kupon-link { display: none; }
  .w1-stopka-koszyka .w1-kupon-pole[hidden] { display: block; }
}

/* 10.09 (szosta runda): koszyk na pc w dwoch kolumnach, przycisk kuponu, zgody */
.w1-kupon-tyt { display: none; }
.basket-view .w1-stopka-koszyka .basket-coupon-box .form-inline .input-group .input-group-btn .btn { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 16px; }
.w1-zamowienie .consent-row > .col-xs-12, .w1-zamowienie .before-consent-row > .col-xs-12 { padding-left: 0; padding-right: 0; }
.w1-zamowienie .consent-row label { gap: 12px; }
.w1-zamowienie .consent-row .icheckbox_minimal-custom { margin: 1px 0 0; float: none; }
.w1-zamowienie .consent-row label { display: flex !important; align-items: flex-start; gap: 12px; }
.w1-zamowienie .consent-row .form-element-option-text { flex: 1; margin: 0; padding-left: 12px; }
.w1-zamowienie .consent-row .form-element-option-text a { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; }
@media screen and (min-width: 1140px) {
  .w1-koszyk-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 48px; align-items: start; padding-bottom: 40px; }
  .w1-koszyk-prawa { position: sticky; top: 110px; }
  .basket-view .w1-stopka-koszyka { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .w1-stopka-koszyka .w1-kupon-pole { margin: 0 0 14px; padding: 16px; background: var(--w1-krem); }
  .w1-kupon-tyt { display: block; margin-bottom: 12px; }
  .basket-view .w1-stopka-koszyka .basket-coupon { margin: 0; }
  .w1-stopka-sumy { padding: 16px; background: var(--w1-krem); }
  .w1-stopka-koszyka .w1-do-zaplaty { margin-top: 0; }
  .w1-stopka-koszyka .w1-link-cichy { margin-top: 14px; }
  .w1-koszyk-lewa .basket-banner, .w1-koszyk-lewa .basket-banner img { max-width: 100%; }
}

/* 10.09 (siodma runda): uzyty kupon w kaflu na pc, placeholder kodu cichy, baner wyrownany */
.basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control::placeholder { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--w1-cichy); opacity: 1; }
.basket-view .w1-stopka-koszyka .basket-coupon-activated .input-group { border: 0; padding-left: 0; }
.basket-view .w1-stopka-koszyka .basket-coupon-code { flex: 1; height: 44px; line-height: 44px; padding: 0 12px; border: 1px solid var(--w1-linia); border-right: 0; background: #fff; }
.basket-view .w1-stopka-koszyka .basket-coupon-activated .btn { height: 44px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--w1-tekst); color: #fff; border: 1px solid var(--w1-tekst); }
.basket-view .w1-stopka-koszyka .coupon-info { margin-top: 8px; font-size: 11.5px; color: var(--w1-zielen); }
@media screen and (max-width: 1139px) {
  .w1-stopka-koszyka .w1-kupon-pole--aktywny { display: none; }
}
@media screen and (min-width: 1140px) {
  .w1-kupon-aktywny { display: none; }
  .w1-koszyk-lewa .basket-banner { margin-top: 0; margin-bottom: 24px; }
  .w1-koszyk-lewa .w1-prog-nad-lista .prog-dostawy { margin-bottom: 16px; }
}

/* ===== Paczka 6b/2: WPIS bloga, wariant A (10.09.2026) ================================
   Spec: docs/superpowers/specs/2026-09-03-w1-blog-i-autor-design.md, rozdz. 2.2; makieta
   2026-08-20-blog-w1 (.art-*, .byline, .kafel-produktu, .bio, .zrodla, .wpis-faq).
   Stroj na istniejacym szkielecie: zmiana kolejnosci tylko kadr -> nad tytul. */
.w1-wpis { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-wpis .w1-wpis-kadr { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 0 22px; background: var(--w1-krem); }
.w1-wpis .w1-wpis-kadr img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.w1-wpis .news-view-heading { margin: 0 0 14px; }
.w1-wpis .w1-tytul--strona { margin: 0; }
/* byline: prostokatny awatar, imie i funkcja; daty osobna linia (pc: po prawej) */
.w1-wpis .news-view-byline { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--w1-linia); }
.w1-wpis .news-view-byline .news-view-avatar { border-radius: 0; background: var(--w1-krem); color: var(--w1-tekst); font-weight: 500; }
.w1-wpis .news-view-byline .news-view-avatar img { border-radius: 0; }
.w1-wpis .news-view-byline .news-view-autor-imie { font-size: 12.5px; font-weight: 500; }
.w1-wpis .news-view-byline .news-view-autor-funkcja { font-size: 10.5px; color: var(--w1-cichy); }
.w1-wpis .news-view-byline .news-view-daty { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-wpis .news-view-byline .news-view-daty time { color: var(--w1-tekst); }
.w1-wpis .w1-byline-autor { display: flex; align-items: center; gap: 11px; }
/* tresc */
.w1-wpis .news-view-teaser, .w1-wpis .news-view-text { font-size: 15px; line-height: 1.7; color: var(--w1-tekst); }
.w1-wpis .news-view-teaser { font-size: 16px; font-weight: 400; color: var(--w1-tekst); }
.w1-wpis .news-view-text h2 { margin: 36px 0 10px; padding-top: 14px; font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--w1-tekst); }
.w1-wpis .news-view-text h2::before { width: 34px; height: 2px; border-radius: 0; background: var(--w1-zielen); }
.w1-wpis .news-view-text h3 { font-size: 16.5px; font-weight: 500; }
.w1-wpis .news-view-text a { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; }
.w1-wpis .news-view-text blockquote { border-left: 2px solid var(--w1-zloto); background: var(--w1-krem); border-radius: 0; }
/* stary .text ul > li { left: 40px } przesuwal wiersze poza ekran telefonu (bylo i na produkcji) */
.w1-wpis .news-view-text ul > li, .w1-wpis .news-view-text ol > li, .w1-wpis .text ul > li, .w1-wpis .text ol > li { left: 0; margin-left: 22px; max-width: calc(100% - 22px); }
.w1-wpis .blog-product-shell, .w1-wpis .blog-product-link, .w1-wpis .blog-table-scroll, .w1-wpis .blog-sources, .w1-wpis .blog-table { border-radius: 0; background: none; box-shadow: none; }
.w1-wpis .blog-table-scroll { border: 1px solid var(--w1-linia); }
/* social autorki: kwadraty w ramce zamiast zielonych kol */
.w1-wpis .social-list ul li a, .w1-wpis .social a { width: 40px; height: 40px; border-radius: 0; background: #fff; border: 1px solid var(--w1-linia); color: var(--w1-tekst); }
.w1-wpis .social-list ul li a svg, .w1-wpis .social-list ul li a path { fill: var(--w1-tekst); }
/* kafel produktu (makieta .kafel-produktu): zlota ramka, etykieta, kadr + nazwa/ocena/cena w liniach, przycisk na dole */
.w1-wpis .blog-product-shell { margin: 22px 0; }
.w1-wpis .blog-product-card { padding: 0; gap: 0; border: 1px solid var(--w1-zloto); border-radius: 0; box-shadow: none; background: #fff; }
.w1-wpis .blog-product-label { padding: 10px 14px 0; border-radius: 0; background: none; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-wpis .blog-product-link { display: flex; gap: 13px; align-items: center; padding: 11px 14px 14px; color: var(--w1-tekst); text-decoration: none; }
.w1-wpis .blog-product-photo { flex: 0 0 68px; width: 68px; aspect-ratio: 1; border: 1px solid var(--w1-linia); border-radius: 0; overflow: hidden; background: #fff; }
.w1-wpis .blog-product-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.w1-wpis .blog-product-body { display: grid; gap: 2px; min-width: 0; }
.w1-wpis .blog-product-name { font-size: 14px; font-weight: 500; }
.w1-wpis .blog-product-rating { font-size: 11px; color: var(--w1-cichy); }
.w1-wpis .blog-product-stars { color: var(--w1-zloto); letter-spacing: 1px; }
.w1-wpis .blog-product-price, .w1-wpis .blog-product-price .price { font-size: 15px; font-weight: 500; color: var(--w1-zielen); font-variant-numeric: tabular-nums; }
.w1-wpis .blog-product-availability { font-size: 10.5px; color: var(--w1-cichy); }
.w1-wpis .blog-product-form { margin: 0 14px 14px; }
.w1-wpis .blog-product-cta { min-height: 48px; padding: 14px 18px; border-radius: 0; background: var(--w1-tekst); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; transition: none; }
.w1-wpis .blog-product-cta:hover, .w1-wpis .blog-product-cta:focus { background: var(--w1-tekst); opacity: .86; transform: none; }
.w1-wpis .blog-product-cta-ring { display: none; }
.w1-wpis .blog-product-cta-secondary { border-radius: 0; }
/* FAQ wpisu (details): +/- w zlocie, linie wlosowe, bez zaokraglen */
.w1-wpis .blog-faq-section { margin-top: 28px; }
.w1-wpis .blog-faq-title, .w1-wpis .blog-sources-title, .w1-wpis .blog-table-title { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); margin: 0 0 6px; }
.w1-wpis .blog-faq-item { border-bottom: 1px solid var(--w1-linia); border-radius: 0; }
.w1-wpis .blog-faq-item:first-child { border-top: 0; }
.w1-wpis .blog-faq-question { padding: 14px 28px 14px 0; font-size: 14px; font-weight: 400; color: var(--w1-tekst); }
.w1-wpis .blog-faq-item[open] .blog-faq-question { font-weight: 500; }
.w1-wpis .blog-faq-question::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--w1-zloto); font-size: 17px; font-weight: 300; }
.w1-wpis .blog-faq-item[open] .blog-faq-question::after { content: "\2212"; }
.w1-wpis .blog-faq-question::before, .w1-wpis .blog-faq-question .icon { display: none; }
.w1-wpis .blog-faq-answer { padding: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--w1-cichy); }
/* zrodla */
.w1-wpis .blog-sources { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--w1-linia); }
.w1-wpis .blog-sources-list { font-size: 11px; color: var(--w1-cichy); line-height: 1.6; }
.w1-wpis .blog-sources-list a { color: var(--w1-cichy); text-underline-offset: 2px; }
/* bio autorki (makieta .bio): krem, prostokatny awatar 46 px */
.w1-wpis .author { margin-top: 22px; padding: 18px; border: 0; background: var(--w1-krem); gap: 18px; align-items: flex-start; border-radius: 0; }
.w1-wpis .author-left { flex: 0 0 auto; }
.w1-wpis .author-title { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); margin-bottom: 8px; }
.w1-wpis .author-image { width: 96px; height: 96px; border-radius: 0; overflow: hidden; background: #fff; }
.w1-wpis .author-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Zdjecie autorki z panelu jest wyciete w KOLO - ramka tez okragla (wlasciciel 10.09), zdjecie
   bez powiekszania. Jedyny wyjatek od „zero zaokraglen" w W1, dopuszczony dla awatara. */
.w1-wpis .author-image, .w1-wpis .news-view-byline .news-view-avatar { border-radius: 50%; }
.w1-wpis .author-image img, .w1-wpis .news-view-byline .news-view-avatar img { border-radius: 50%; transform: none; }
.w1-wpis .author-name { font-size: 13.5px; font-weight: 500; }
.w1-wpis .author-job { font-size: 10.5px; color: var(--w1-cichy); }
.w1-wpis .author-right .text { font-size: 12px; color: var(--w1-cichy); line-height: 1.55; margin-top: 6px; }
.w1-wpis .author .social a { border-radius: 0; }
.w1-wpis-wroc { display: inline-block; width: auto; min-height: 48px; padding: 15px 28px; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; }
@media screen and (min-width: 900px) {
  .w1-wpis .news-view-byline { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===== Paczka 6b/3: STRONA AUTORKI, wariant B „dossier" (10.09.2026) ==================
   Spec: docs/superpowers/specs/2026-09-03-w1-blog-i-autor-design.md, rozdz. 2.3; makieta
   2026-08-20-blog-w1 (wariant B: .s-nad, .fakty.pionowe, .social-kafle, .spis-wpis).
   Zdjecie zostaje w OKREGU - decyzja wlasciciela z 10.09 (plik z panelu wyciety w kolo). */
.w1-autor { font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.w1-autor .w1-nadtytul { margin-bottom: 10px; }
.w1-autor .autor-szpica { align-items: flex-start; gap: 16px; margin: 0 0 20px; }
.w1-autor .autor-foto img { width: 96px; height: 96px; border-radius: 50%; }
.w1-autor .autor-imie { position: relative; margin: 0 0 6px; padding-top: 15px; font-size: 24px; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--w1-tekst); }
.w1-autor .autor-imie::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; border-radius: 0; background: var(--w1-zielen); }
.w1-autor .autor-funkcja { font-size: 12.5px; font-weight: 400; color: var(--w1-cichy); }
/* karta faktow: bez ramki i zaokraglen, krem W1, etykieta zlota nad wartoscia */
.w1-autor .autor-fakty { border: 0; border-radius: 0; background: var(--w1-krem); padding: 18px; margin: 0 0 20px; }
.w1-autor .autor-fakty dl { gap: 16px; }
.w1-autor .autor-fakt dt, .w1-autor .autor-fakty dt { margin: 0 0 5px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
.w1-autor .autor-fakty dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--w1-tekst); }
.w1-autor .autor-pozycja { border: 0; border-radius: 0; padding: 0; background: none; }
.w1-autor .autor-pozycja + .autor-pozycja { margin-top: 8px; }
.w1-autor .autor-pozycja-glowna { font-weight: 500; }
.w1-autor .autor-pozycja-miejsce { color: var(--w1-cichy); }
.w1-autor .autor-rok { font-size: 11px; letter-spacing: .1em; color: var(--w1-cichy); font-variant-numeric: tabular-nums; }
/* obszary: bez pigulek, rozdzielone kropka jak w makiecie */
.w1-autor .autor-obszary { gap: 0; margin: 0 0 20px; font-size: 13px; color: var(--w1-cichy); }
.w1-autor .autor-obszary li { padding: 0; border-radius: 0; background: none; font-weight: 400; font-size: 13px; color: var(--w1-cichy); }
.w1-autor .autor-obszary li + li::before { content: "\00B7"; margin: 0 7px; color: var(--w1-zloto); }
/* teksty */
.w1-autor .autor-zajawka { font-size: 14.5px; font-weight: 400; line-height: 1.65; }
.w1-autor .autor-strona .text, .w1-autor .text { text-align: left; }
.w1-autor .autor-biogram { font-size: 14px; line-height: 1.7; color: var(--w1-tekst); }
.w1-autor .autor-naglowek { margin: 30px 0 10px; padding-top: 14px; font-size: 18px; font-weight: 500; letter-spacing: 0; }
.w1-autor .autor-naglowek::before { width: 34px; height: 2px; border-radius: 0; background: var(--w1-zielen); }
.w1-autor .autor-licznik { color: var(--w1-cichy); font-weight: 400; }
.w1-autor .autor-powiazania { border: 0; border-radius: 0; padding: 14px 16px; background: var(--w1-krem); border-left: 2px solid var(--w1-zloto); font-size: 12.5px; color: var(--w1-cichy); }
.w1-autor .autor-powiazania strong { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--w1-zloto); }
/* profile jako kafle (makieta .social-kafle) */
.w1-autor .w1-btn { display: block; box-sizing: border-box; min-height: 48px; padding: 15px 18px; background: var(--w1-tekst); color: #fff; border: 0; border-radius: 0; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; }
.w1-autor .autor-profile { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 4px; }
.w1-autor .autor-profil-kafel { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 13px 14px; border: 1px solid var(--w1-linia); border-radius: 0; color: var(--w1-tekst); text-decoration: none; }
.w1-autor .autor-profil-kafel:hover { border-color: var(--w1-tekst); }
.w1-autor .autor-profil-tresc { flex: 1; min-width: 0; }
.w1-autor .autor-profil-serwis { display: block; font-size: 12.5px; font-weight: 500; }
.w1-autor .autor-profil-ikona { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--w1-tekst); }
.w1-autor .autor-profil-ikona svg { width: 24px; height: 24px; display: block; }
.w1-autor .autor-profil-ikona svg path, .w1-autor .autor-profil-ikona svg circle, .w1-autor .autor-profil-ikona svg rect { fill: currentColor; }
.w1-autor .autor-profil-strzalka { flex: none; color: var(--w1-zloto); font-size: 15px; }
/* spis wpisow (makieta .spis-wpis): data wersalikami nad tytulem, linia miedzy pozycjami */
.w1-autor .autor-wpisy { margin: 0; padding: 0; list-style: none; border: 0; border-radius: 0; background: none; }
.w1-autor .autor-wpisy li { display: block; padding: 14px 0; border-top: 1px solid var(--w1-linia); }
.w1-autor .autor-wpisy li:first-child { border-top: 0; padding-top: 2px; }
.w1-autor .autor-wpisy a { display: flex; flex-direction: column-reverse; gap: 3px; color: var(--w1-tekst); text-decoration: none; }
.w1-autor .autor-wpis-data { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--w1-cichy); }
.w1-autor .autor-wpis-tytul { font-size: 14px; font-weight: 400; line-height: 1.35; }
.w1-autor .autor-wpisy a:hover .autor-wpis-tytul { text-decoration: underline; text-underline-offset: 3px; }
/* Pas wpisow: kafle jada w poziomie (wlasciciel 10.09), wszystkie zostaja w HTML.
   `scroll-snap` zatrzymuje pas na kaflu, cienki pasek przewijania pokazuje, ze jest wiecej. */
.w1-autor .autor-wpisy-glowa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.w1-autor .autor-wpisy-strzalki { display: flex; gap: 8px; padding-bottom: 10px; }
.w1-autor .autor-wpisy-btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--w1-linia); border-radius: 0; background: #fff; color: var(--w1-tekst); font-size: 14px; line-height: 1; cursor: pointer; }
.w1-autor .autor-wpisy-btn:hover:not(:disabled) { border-color: var(--w1-tekst); }
.w1-autor .autor-wpisy-btn:disabled { opacity: .35; cursor: default; }
/* kolumny gridu musza miec min-width: 0, inaczej pas rozpycha kolumne i kafle wyjezdzaja
   poza nia zamiast sie przewijac */
.w1-autor .w1-autor-lewa, .w1-autor .w1-autor-prawa { min-width: 0; }
.w1-autor .autor-wpisy { display: flex; max-width: 100%; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 10px; }
.w1-autor .autor-wpisy li { flex: 0 0 240px; width: 240px; padding: 14px; border: 1px solid var(--w1-linia); border-top: 1px solid var(--w1-linia); scroll-snap-align: start; }
.w1-autor .autor-wpisy li:first-child { border-top: 1px solid var(--w1-linia); padding-top: 14px; }
.w1-autor .autor-wpisy a { height: 100%; justify-content: flex-end; }
.w1-autor .autor-wpisy::-webkit-scrollbar { height: 4px; }
.w1-autor .autor-wpisy::-webkit-scrollbar-thumb { background: var(--w1-linia); }
/* 10.09: nadtytul otwierajacy strone potrzebuje oddechu od menu - na telefonie okruszki
   sa ukryte, wiec bez tego tekst kleil sie do naglowka (wlasciciel: „10 px bedzie ok"). */
@media screen and (max-width: 1139px) {
  /* padding, nie margin: margines pierwszego dziecka scala sie z rodzicem i tylko
     wchlania istniejacy odstep, zamiast go powiekszyc */
  .w1-nadtytul:first-child { padding-top: 12px; }
}
@media screen and (min-width: 900px) {
  /* 10.09: wpisy jada poziomo, wiec zamiast waskiej kolumny 340 px (kafel + pustka pod nim)
     dossier zostaje w kolumnie czytelnej szerokosci, a pas wpisow idzie POD nim na calej
     szerokosci - jak sekcja „Zobacz rowniez" na wpisie. */
  .container.container-md.autor-strona.w1-autor { max-width: 1060px; }
  .w1-autor .w1-autor-uklad { display: block; }
  .w1-autor .w1-autor-lewa { max-width: 720px; }
  .w1-autor .w1-autor-prawa { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--w1-linia); }
  .w1-autor .autor-foto img { width: 110px; height: 110px; }
  /* imie: reguly bazowej (0,2,0) nie przebije stary `.autor-imie` z @media (0,1,0),
     wiec rozmiar na duzym ekranie podajemy tutaj; blok skali pisma podniesie go dla 1140 */
  .w1-autor .autor-imie { font-size: 30px; }
  .w1-autor .autor-profile { grid-template-columns: 1fr 1fr; }
  /* makieta B: dossier PIONOWO - wartosc pod etykieta, pelna szerokoscia kolumny (stary
     stroj lamal „Warszawski Uniwersytet Medyczny" na trzy linie w polowce szerokosci) */
  .w1-autor .autor-fakty dl { grid-template-columns: 1fr; gap: 16px; }
  .w1-autor .w1-autor-prawa .autor-naglowek:first-child { margin-top: 4px; }
}

/* ==== runda 8 (31.08.2026): uwagi wlasciciela - pas ikon, marginesy sekcji, skala pisma ==== */

/* 1. Sekcje "Wiedza" i pokrewne mialy margines 80 px u gory i u dolu (style.css: .mainpage
   .text-collection-section oraz .tiles-section/.categories-section, calc(2 * var(--space-50))).
   Rytm W1 robia wylacznie paddingi sekcji, wiec margines jest zbedny i psul odstepy. */
.w1-sekcja.w1-sekcja { margin-top: 0; margin-bottom: 0; }

/* 2. Pas ikon: wyzszy. Padding z makiety (34/36 przy pasie 1140) przeskalowany na 1440. */
@media screen and (min-width: 1140px) {
  .mainpage .w1-sekcja.w1-sekcja.w1-sekcja.icons-section { padding-top: 43px; padding-bottom: 45px; }
}

/* 3. SKALA PISMA. Wszystkie makiety W1 (glowna, karta produktu, B2B) rysowano na pasie 1140 px
   - w kazdej z nich siedzi `width: 1140px; zoom: .75`, a komentarz w makiecie karty przyznaje,
   ze 1140 wzielo sie stad, ze to breakpoint. Sklep stoi na kontenerze 1440 (decyzja z 30.08),
   a pismo przenieslismy 1:1 z makiety - stad wrazenie, ze strona jest czytelna dopiero przy
   powiekszeniu 125 % w przegladarce: 1440 / 1140 = 1,26.
   Ponizszy blok mnozy rozmiary pisma z duzego ekranu przez 1,26 (zaokraglenie do 0,5 px).
   Wygenerowany mechanicznie ze skladni w1.css; telefon (max-width: 1139px) nietkniety,
   bo makieta mobilna byla robiona 1:1 i tam nic sie nie zmienia.
   Odwrocenie zmiany: skasowac ten blok. */
@media screen and (min-width: 1140px) {
  .w1-nadtytul { font-size: 15px; }
  .w1-tytul { font-size: 30.5px; }
  .w1-tytul--strona { font-size: 38px; }
  .w1-opis, .w1-page-teaser { font-size: 20px; }
  .w1-drobny { font-size: 16.5px; }
  .w1-btn { font-size: 17px; }
  .benefits-item strong { font-size: 19.5px; }
  .benefits-item span { font-size: 17.5px; }
  .packages-nazwa { font-size: 19.5px; }
  .packages-gram { font-size: 14px; }
  .packages-opis { font-size: 17px; }
  .w1-form .form-group label { font-size: 13.5px; }
  .w1-tytul { font-size: 40.5px; }
  .w1-tytul--strona { font-size: 58px; }
  .w1-comments .opinion-item .opinion-name { font-size: 16.5px; }
  .w1-comments .opinion-item .opinion-date { font-size: 12.5px; }
  .w1-comments .opinion-item .opinion-text { font-size: 17px; }
  .w1-kafel .product-labels .product-label, .w1-kafel .w1-kafel-et { font-size: 12.5px; }
  .w1-kafel .product-box-title { font-size: 19px; }
  .w1-kafel .product-box-content .price:not(.price-old) { font-size: 24px; }
  .w1-kafel .product-box-content .price-old { font-size: 16.5px; }
  .w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 24px; }
  .w1-kafel .product-box-content .price-net .caption, .w1-kafel .product-box-content .price-gross .caption { font-size: 14px; }
  .w1-kafel .product-box-availability { font-size: 12.5px; }
  .w1-kafel .shop-add-to-basket .btn { font-size: 12.5px; }
  .product-add-to-basket-modal .w1-kafel .product-box-title { font-size: 16.5px; }
  .w1-karta .product-labels .product-label { font-size: 11.5px; }
  .w1-karta .product-view-title { font-size: 29px; }
  .w1-karta .product-podtytul { font-size: 16.5px; }
  .w1-karta .product-view-rating { font-size: 15px; }
  .w1-karta .panel-bullet { font-size: 16px; }
  .w1-karta .panel-cena .price { font-size: 38px; }
  .w1-karta .panel-cena .price-old { font-size: 19px; }
  .w1-karta .panel-cena-jednostka { font-size: 15px; }
  .w1-karta .panel-cena .price-net > .caption, .w1-karta .panel-cena label.caption { font-size: 11.5px; }
  .w1-karta .panel-znacznik { font-size: 12px; }
  .w1-karta .panel-zakupu .shop-product-history-price-before-discount { font-size: 14.5px; }
  .w1-karta .panel-wybor-etykieta, .w1-karta .panel-wybor-netto { font-size: 11.5px; }
  .w1-karta .panel-opcja-nazwa { font-size: 14px; }
  .w1-karta .panel-opcja-cena { font-size: 14px; }
  .w1-karta .panel-dostepnosc { font-size: 13.5px; }
  .w1-karta .termin-wiersz { font-size: 16px; }
  .w1-karta .panel-prog { font-size: 16px; }
  .w1-karta .panel-zakupu .shop-quantity-box .action { font-size: 19px; }
  .w1-karta .panel-zakupu .shop-quantity-box .input-qty { font-size: 19px; }
  .w1-karta .panel-zakupu .product-view-basket-inner-quantity-btn button[type="submit"] { font-size: 15px; }
  .w1-karta .product-teaser { font-size: 16.5px; }
  .w1-karta .product-view-title { font-size: 43px; }
  .w1-karta .product-podtytul { font-size: 19px; }
  .w1-karta .panel-cena .price { font-size: 43px; }
  .w1-karta .panel-prog { font-size: 17px; }
  .w1-karta .product-sticky-bar .product-sticky-bar-price .price { font-size: 21.5px; }
  .w1-karta .product-sticky-bar .product-sticky-bar-price .price-old { font-size: 15px; }
  .w1-karta .product-sticky-bar .product-sticky-bar-btn { font-size: 15px; }
  .w1-sekcja .section-heading::before, .w1-sekcja .text-collection-glowa::before { font-size: 12.5px; }
  .w1-sekcja .section-title { font-size: 28px; }
  .w1-sekcja .section-heading > .text, .w1-sekcja .text-collection-glowa > .text { font-size: 16.5px; }
  .w1-sekcja .text, .w1-sekcja .text p, .w1-sekcja .text li { font-size: 16.5px; }
  .w1-sekcja .text h3, .w1-sekcja .text h4 { font-size: 19px; }
  .w1-wiecej { font-size: 14px; }
  .product-view-sections-wrapper .btn-section-tab { font-size: 12px; }
  .w1-sekcja.boxText .box-text-title { font-size: 28px; }
  .w1-sekcja.composition-section .komp-nr { font-size: 15px; }
  .w1-sekcja.composition-section .composition-item-name { font-size: 20px; }
  .w1-sekcja.text-collection-section .about-text-item-name { font-size: 16.5px; }
  .w1-sekcja.uklad-lista .icon-wrapper { font-size: 14px; }
  .w1-sekcja.ig-section .ig-badge { font-size: 11.5px; }
  .w1-sekcja.ig-section .ig-stat { font-size: 14px; }
  .w1-sekcja.ig-section .ig-caption { font-size: 16px; }
  .w1-sekcja.ig-section .ig-date { font-size: 12px; }
  .w1-sekcja.video-section .video-play-btn { font-size: 12px; }
  .w1-sekcja.faq-section .faq-item-name { font-size: 17.5px; }
  .w1-sekcja.faq-section .faq-item-heading::after { font-size: 21.5px; }
  .w1-sekcja.faq-section .faq-item-content .text { font-size: 16px; }
  .w1-sekcja.comment-section .opinion-name { font-size: 16.5px; }
  .w1-sekcja.comment-section .opinion-date { font-size: 12.5px; }
  .w1-sekcja.comment-section .opinion-text .text { font-size: 16.5px; }
  .w1-sekcja.comment-section .opinion-item > .text { font-size: 12px; }
  .w1-sekcja.comment-section .btn-rate { font-size: 12.5px; }
  .w1-sekcja.news-section .news-item-date { font-size: 12px; }
  .w1-sekcja.news-section .news-item-name { font-size: 16.5px; }
  .w1-sekcja.tiles-section .news-item-content .text, .w1-sekcja.tiles-section .news-item-content p { font-size: 19px; }
  .w1-sekcja .section-heading .section-title, .w1-sekcja .text-collection-glowa .section-title { font-size: 38px; }
  .w1-sekcja .section-heading > .text, .w1-sekcja .text-collection-glowa > .text { font-size: 17.5px; }
  .w1-sekcja .text, .w1-sekcja .text p, .w1-sekcja .text li { font-size: 17.5px; }
  .w1-sekcja.composition-section .composition-item-name { font-size: 22.5px; }
  .w1-sekcja.video-section .video-play-btn { font-size: 14px; }
  .w1-sekcja.faq-section .faq-item-name { font-size: 19.5px; }
  .w1-sekcja.faq-section .faq-item-content .text { font-size: 17px; }
  .w1-sekcja.comment-section .stats-item-nr, .w1-sekcja.comment-section .comment-stats-item .caption { font-size: 15px; }
  .w1-sekcja.news-section .news-item-name { font-size: 19px; }
  .w1-sekcja.tiles-section .news-item-content .text, .w1-sekcja.tiles-section .news-item-content p { font-size: 26.5px; }
  .w1-sekcja.comparison-section .por-naz { font-size: 19px; }
  .w1-sekcja.comparison-section .por-et { font-size: 10.5px; }
  .w1-sekcja.comparison-section .por-v { font-size: 14px; }
  .w1-sekcja.comparison-section .por-tw--glowa .por-v { font-size: 14.5px; }
  .w1-sekcja.videoGuide-section .video-play-btn { font-size: 12px; }
  .kafel-nad { font-size: 12px; }
  .kafel-tyt { font-size: 19px; }
  .w1-sekcja.comparison-section .por-et { font-size: 12px; }
  .w1-sekcja.comparison-section .por-v { font-size: 16px; }
  .w1-sekcja.comparison-section .por-tw--glowa .por-v { font-size: 17px; }
  .w1-sekcja.videoGuide-section .video-play-btn { font-size: 14px; }
  .kafel-nad { font-size: 14px; }
  .kafel-tyt { font-size: 26.5px; }
  .kafle-w1.rzad2 .kafel-tyt { font-size: 24px; }
  .w1-glowa #main-menu > ul > li > a { font-size: 13.5px; }
  .w1-glowa .mainsearch input.form-control { font-size: 16.5px; }
  .w1-glowa .basket-box-btn { font-size: 13.5px; }
  .footer-col-title { font-size: 12.5px; }
  .footer-col-content ul li a { font-size: 16.5px; }
  .footer-col-content .text, .footer-col-contact-text { font-size: 16.5px; }
  .footer-contact-link { font-size: 16.5px; }
  .footer-text-social .text, .footer-text-social .text p { font-size: 14px; }
  .footer-bar, .footer-bar .copyright, .footer-bar-links a { font-size: 12.5px; }
  .w1-hero .main-slider-item-title { font-size: 38px; }
  .w1-hero .main-slider-item-text-inner .text, .w1-hero .main-slider-item-text-inner .text p { font-size: 19px; }
  .w1-hero .main-slider-item-text-inner .btn { font-size: 13.5px; }
  .w1-hero .slider-person-name { font-size: 19px; }
  .w1-hero .slider-person-position { font-size: 13.5px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 20px; }
  .w1-sekcja.categories-section .about-collection-item-text .btn { font-size: 12.5px; }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 16px; }
  .w1-sekcja.about-top-section .about-text-item-name { font-size: 19px; }
  .w1-sekcja.about-top-section .about-top-column > .text { font-size: 17px; }
  .w1-hero .main-slider-item-title { font-size: 55.5px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 24px; }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 19px; }
  .w1-sekcja.boxText .box-text-title { font-size: 28px; }
  .w1-sekcja.text-image-section .section-title { font-size: 28px; }
  .newsletter-section h2, .newsletter-section .section-title, .newsletter-section .newsletter-title { font-size: 28px !important; }
  .newsletter-section .text, .newsletter-section p { font-size: 16.5px; }
  .newsletter-section input.form-control { font-size: 16.5px; }
  .newsletter-section .btn { font-size: 13.5px; }
  .w1-sekcja.boxText .box-text-title { font-size: 38px; }
  .w1-sekcja.text-image-section .section-title { font-size: 38px; }
  .w1-sekcja.videoGuide-section .vg-tekst .section-title { font-size: 38px; }
  .newsletter-section h2, .newsletter-section .section-title, .newsletter-section .newsletter-title { font-size: 38px !important; }
  .newsletter-section .text, .newsletter-section p { font-size: 17.5px; }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 19px; }
  .w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { font-size: 16.5px; }
  .w1-sekcja.comment-section .rating-summary-nr { font-size: 50.5px; }
  .w1-sekcja.comment-section .rating-summary-count { font-size: 14px; }
  .w1-sekcja.icons-section .icons-section-item .text, .w1-sekcja.icons-section .icons-section-item .text p { font-size: 16.5px; }
  .w1-sekcja.icons-section .icons-section-item .text strong, .w1-sekcja.icons-section .icons-section-item .text b { font-size: 19px; }
  .w1-sekcja.comment-section .opinion-item > .text, .w1-sekcja.comment-section .opinion-item > .text p { font-size: 12px; }
  .w1-sekcja.news-section .news-item-name { font-size: 16.5px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 20px; }
  .w1-sekcja.categories-section .about-collection-item-text .btn { font-size: 14px; }
  .w1-sekcja.news-section .news-item-name { font-size: 19px; }
  .w1-sekcja.categories-section .about-collection-item-text-title { font-size: 24px; }
  .w1-hero .main-slider-item-text-inner .text, .w1-hero .main-slider-item-text-inner .text p { font-size: 20px; }
  .w1-sekcja.videoGuide-section .vg-tekst .section-title { font-size: 30.5px; }
  .w1-kafel .product-box-title { line-height: 25.5px; }
  .w1-kafel .product-box-content .price:not(.price-old), .w1-kafel .product-box-content .price-net .price:not(.price-old) { font-size: 22.5px; }
  .w1-kafel .product-box-availability { font-size: 14px; }
  .w1-sekcja.uklad-lista .about-text-item-heading .icon-wrapper { font-size: 14px; }
  .w1-sekcja.uklad-lista .about-text-item-name { font-size: 20px; }
  .w1-sekcja .text h2, .w1-sekcja .text h3, .w1-sekcja .text h4 { font-size: 17px; }
  .w1-sekcja.w1-ti--blok .text > h2:first-child, .w1-sekcja.w1-ti--instrukcja .text > h2:first-child { font-size: 28px; }
  .w1-sekcja .ti-parametr dd { font-size: 16.5px; }
  .w1-sekcja .ti-parametr dt { font-size: 12px; }
  .breadcrumb-container .breadcrumb { font-size: 12.5px; }
  .breadcrumb-container .breadcrumb > li + li::before { font-size: 15px; }
  .w1-sekcja.tiles-section .news-item-content .text p:first-child { font-size: 14px; }
  .w1-sekcja.tiles-section .news-item-content .text p + p { font-size: 26.5px; }
  .w1-sekcja.uklad-porownanie .text-collection-glowa .section-title, .w1-sekcja.comparison-section .section-heading .section-title { font-size: 28px; }
  .product-view-sections-wrapper .btn-section-tab { font-size: 13.5px; }
  .w1-sekcja.w1-ti--blok .text > h2:first-child, .w1-sekcja.w1-ti--instrukcja .text > h2:first-child { font-size: 30.5px; }
  .w1-sekcja.uklad-porownanie .text-collection-glowa .section-title, .w1-sekcja.comparison-section .section-heading .section-title { font-size: 30.5px; }
  .w1-sekcja.tiles-section .news-item-content .text p, .w1-sekcja.tiles-section .news-item-content .text p:first-child { font-size: 14px; }
  .w1-sekcja.tiles-section .news-item-content .text p strong { font-size: 26.5px; }
  .w1-sekcja-formularz .contact-form-title { font-size: 28px; }
  .w1-sekcja-formularz .contact-form-container .form .form-element-name { font-size: 13.5px; }
  .w1-kontakt-etykieta { font-size: 13.5px; }
  .w1-kontakt-wartosc { font-size: 30.5px; }
  .w1-kontakt-adres, .w1-kontakt-adres p { font-size: 19px; }
  .w1-cytat-tekst { font-size: 24px; }
  .w1-cytat-zrodlo { font-size: 14px; }
  .w1-cytat-tekst { font-size: 33px; }
  .w1-onas-wstep .w1-page-tresc .text:first-child p { font-size: 21.5px; }
  .w1-glowa .top-box-heading { font-size: 13.5px; }
  .w1-glowa .shop-mini-basket .top-box-product-image .badge { font-size: 12.5px; }
  .w1-glowa .shop-mini-basket .top-box-product .top-box-right .product-name { font-size: 17px; }
  .w1-glowa .shop-mini-basket .top-box-product-expiration { font-size: 14.5px; }
  .w1-glowa .shop-mini-basket .top-box-product-expiration .caption { font-size: 12px; }
  .w1-glowa .shop-mini-basket .top-box-qty-price { font-size: 16px; }
  .w1-glowa .shop-mini-basket .top-box-bottom .price.shop-product-price-gross, .w1-glowa .shop-mini-basket .top-box-qty-price .price { font-size: 16.5px; }
  .w1-glowa .shop-mini-basket .top-box-bottom > .price-box .caption { font-size: 12px; }
  .w1-glowa .shop-mini-basket .top-box-bottom > .price-box .val .price { font-size: 17.5px; }
  .w1-glowa .shop-mini-basket .summary .caption { font-size: 12px; }
  .w1-glowa .shop-mini-basket .summary-right, .w1-glowa .shop-mini-basket .summary-right .price { font-size: 21.5px; }
  .w1-glowa .top-box .btn-to-basket, .w1-glowa .top-box .btn-primary { font-size: 13.5px; }
  .w1-glowa .shop-mini-basket .alert { font-size: 16.5px; }
  .w1-glowa .top-box-submenu-list a, .w1-glowa .top-box-submenu .user-nav-item-logout { font-size: 17px; }
  .w1-glowa .top-box-submenu .user-nav-item-logout { font-size: 16px; }
  .w1-glowa .top-login-box label, .w1-glowa .top-login-box .form-element-name { font-size: 12px; }
  .w1-glowa .top-login-box .form-control { font-size: 16.5px; }
  .w1-glowa .top-login-box .help-block, .w1-glowa .top-login-box .alert-block { font-size: 13.5px; }
  .w1-glowa .top-login-box .forgot-password { font-size: 15px; }
  .w1-glowa .top-box-buttons .btn-default { font-size: 13.5px; }
  .w1-glowa .top-login-box .form-alerts .alert { font-size: 15px; }
  .w1-konto-powrot { font-size: 13.5px; }
  .w1-konto .userpanel-title { font-size: 38px; }
  .w1-konto-kafel-tytul { font-size: 20px; }
  .w1-konto-kafel-opis { font-size: 17px; }
  .w1-konto-kafel-strzalka { font-size: 22.5px; }
  .w1-konto-wyloguj { font-size: 16.5px; }
  .w1-lojalnosc-nazwa { font-size: 13.5px; }
  .w1-lojalnosc-tekst { font-size: 17.5px; }
  .w1-konto-pusto p { font-size: 19px; }
  .w1-konto .panel-heading, .w1-logowanie .container--userpanel .panel-heading { font-size: 13.5px; }
  .w1-konto .form-element-name, .w1-logowanie .container--userpanel .form-element-name { font-size: 12px; }
  .w1-konto .form-control, .w1-logowanie .container--userpanel .form-control { font-size: 17.5px; }
  .w1-konto .help-block, .w1-logowanie .container--userpanel .help-block, .w1-konto .alert-block, .w1-logowanie .container--userpanel .alert-block { font-size: 15px; }
  .w1-konto .btn-primary, .w1-logowanie .container--userpanel .btn-primary { font-size: 14px; }
  .w1-konto .btn-default, .w1-logowanie .container--userpanel .btn-default, .w1-logowanie .container--userpanel .login-info .btn-primary { font-size: 14px; }
  .w1-konto .alert, .w1-logowanie .container--userpanel .alert { font-size: 17px; }
  .w1-logowanie .container--userpanel .panel-heading .title-base { font-size: 30.5px; }
  .w1-logowanie .container--userpanel .login-forgotPassword { font-size: 16.5px; }
  .w1-konto .table > thead > tr > th, .w1-konto .table > tbody > tr > th, .w1-konto .table > tbody > tr > td { font-size: 17px; }
  .w1-konto .table > thead > tr > th, .w1-konto .table > tbody > tr > th { font-size: 13.5px; }
  .w1-konto .userpanel-container [class*="form-element-collection"] .form-element-label-wrapper .form-element-name { font-size: 13.5px; }
  .w1-konto .order-history-container .table.table-crud thead th { font-size: 13.5px; }
  .w1-konto .grid-actions .btn { font-size: 13.5px; }
  .w1-konto .rwd-table .table-rwd-label { font-size: 13.5px; }
  .w1-logowanie .container--userpanel .checkboxradio-container label, .w1-konto .checkboxradio-container label { font-size: 16px; }
  .w1-znizka-tresc { font-size: 15px; }
  .w1-znizka-tresc b { font-size: 12px; }
  .w1-znizka-procent { font-size: 21.5px; }
  .w1-lojalnosc-pasek .customer-group-bar-content { font-size: 16.5px; }
  .w1-lojalnosc-pasek-nazwa { font-size: 13.5px; }
  .w1-lojalnosc-pasek-procent { font-size: 19px; }
  .w1-lojalnosc-pasek .customer-group-bar-remove { font-size: 28px; }
  .w1-kafel .w1-kafel-twoja { font-size: 12px; }
  .w1-kup-razem-nazwa { font-size: 17px; }
  .w1-kup-razem-ceny { font-size: 16.5px; }
  .w1-kup-razem-ceny strong { font-size: 19px; }
  .w1-znacznik-rabat { font-size: 12px; }
  .w1-kup-razem-zdanie { font-size: 15px; }
  .w1-kup-razem-form .w1-btn { font-size: 13.5px; }
  .w1-kup-razem .shop-product-history-price-before-discount { font-size: 14px; }
  .w1-poz--zestaw .w1-poz-etykieta-zestaw, .top-box-product--zestaw .w1-poz-etykieta-zestaw, .w1-panel-poz .w1-poz-etykieta-zestaw { font-size: 11.5px; }
  .w1-poz--zestaw .w1-poz-plus, .top-box-product--zestaw::before { font-size: 16.5px; }
  .w1-zestaw-oszczedzasz, .w1-stopka-koszyka .w1-oszczedzasz { font-size: 14px; }
  .w1-cofnij-nazwy { font-size: 14px; }
  .w1-cofnij { font-size: 16.5px; }
  .w1-cofnij-btn { font-size: 13.5px; }
  .modal-confirm .modal-title { font-size: 13.5px; }
  .modal-confirm .modal-body { font-size: 17.5px; }
  .modal-confirm .modal-footer .btn { font-size: 13.5px; }
  .w1-glowa #main-menu > ul > li > ul > li > a { font-size: 13.5px; }
  .w1-kup-razem-tresc .shop-product-history-price-before-discount { font-size: 14px; }
  .benefits--liczby .benefits-item strong { font-size: 30.5px; }
  .benefits--liczby .benefits-item span { font-size: 12.5px; }
  .w1-ti--strona.bez-zdjecia .text h2 { font-size: 26.5px; }
  .w1-ti--strona.bez-zdjecia .text p { font-size: 19px; }
  .w1-ti--strona.bez-zdjecia .text p em span { font-size: 15px !important; }
  .w1-spis-lista li { font-size: 17.5px; }
  .w1-spis-lista li::before { font-size: 14px; }
  .w1-sekcja.videoGuide-section .vg-tekst ul li, .w1-sekcja.videoGuide-section .vg-tekst ol li { font-size: 19px; }
  .w1-sekcja.videoGuide-section .vg-tekst ol li::before { font-size: 14px; }
  .benefits--liczby .benefits-item strong { font-size: 38px; }
  .w1-ti--strona.bez-zdjecia .text h2 { font-size: 30.5px; }
  .w1-onas-fakty li { font-size: 19px; }
  .w1-onas-punkty .about-text-item .icon-wrapper { font-size: 14px; }
  .w1-onas-punkty .about-text-item-name { font-size: 26.5px; }
  .w1-onas-punkty .about-text-item p { font-size: 19px; }
  .w1-onas-kafle .about-collection-item-text-title { font-size: 30.5px; }
  .w1-onas-kafle .about-collection-item-text p { font-size: 19px; }
  .w1-kontakt-wartosc { font-size: 34px; }
  .w1-sekcja-formularz .contact-form-title { font-size: 33px; }
  .w1-sekcja.comment-section.w1-opinie-strona .opinion-heading-product { font-size: 14px; }
  .w1-sekcja.uklad-pas .about-text-item-name { font-size: 19.5px; }
  .w1-sekcja.uklad-pas .about-text-item p { font-size: 17px; }
  .w1-ti--strona .text-image-section-text::before { font-size: 12.5px; }
  .w1-ti--strona .text-image-section-text ul li { font-size: 17px; }
  .w1-ti--strona .text-image-section-text ul li strong { font-size: 19.5px; }
  .w1-blog .news-item-date { font-size: 12px; }
  .w1-blog .news-item-name { font-size: 19px; }
  .w1-blog .w1-blog-seo, .w1-blog .w1-blog-seo p { font-size: 14.5px; }
  .w1-aside .aside-title { font-size: 14px; }
  .w1-aside .aside-list > li > .menu-group > a { font-size: 17.5px; }
  .w1-aside .aside-list > li > ul a { font-size: 17px; }
  .w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.group span,
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.category { font-size: 12.5px; }
  .w1-glowa .mainsearch .ui-menu .ui-menu-item-wrapper,
.w1-glowa .mainsearch .dropdown-menu .dropdown-search-li a { font-size: 17px; }
  .w1-glowa .mainsearch .dropdown-menu .search-product-label { font-size: 17px; }
  .w1-glowa .mainsearch .dropdown-menu .search-product-img-contener { line-height: 58px; }
  .w1-glowa .mainsearch .dropdown-menu .search-product-img-contener ~ .search-product-label { font-size: 17px; }
  .w1-glowa .mainsearch .dropdown-menu .dropdown-search-li.all-search-results a { font-size: 13.5px; }
  .w1-zamowienie-glowa .w1-tytul--strona { font-size: 33px; }
  .w1-pasek-krokow li { font-size: 10.5px; }
  .w1-poz-plus { font-size: 20px; }
  .w1-poz-nazwa { font-size: 17px; }
  .w1-poz-drobny { font-size: 13.5px; }
  .w1-poz-usun { font-size: 13.5px; }
  .w1-poz-ilosc-stala { font-size: 14.5px; }
  .w1-poz-kwota { font-size: 17px; }
  .w1-poz-kwota small { font-size: 12.5px; }
  .w1-poz .shop-quantity-box .input-qty { font-size: 15px; }
  .w1-poz .shop-quantity-box .action { font-size: 17.5px; line-height: 35.5px; }
  .w1-poz .shop-quantity-box .action .caption { line-height: 35.5px; }
  .w1-stopka-koszyka .w1-kupon-link, .w1-stopka-koszyka .w1-link-cichy { font-size: 14.5px; }
  .w1-stopka-koszyka .w1-do-zaplaty { font-size: 17px; }
  .w1-stopka-koszyka .w1-do-zaplaty .w1-kwota { font-size: 24px; }
  .w1-stopka-koszyka .w1-dostawa-od { font-size: 14.5px; }
  .w1-stopka-koszyka .w1-btn-dalej, .w1-zamowienie .w1-btn { font-size: 13.5px; }
  .w1-tyt-sekcji { font-size: 12px; }
  .w1-blad { font-size: 15px; }
  .w1-zamowienie .w1-etykieta, .w1-zamowienie label.form-element-name, .w1-zamowienie .form-element-label-helper label { font-size: 12px; }
  .w1-zamowienie .form-control, .w1-zamowienie .w1-wej { font-size: 16.5px; }
  .w1-zamowienie .alert-block, .w1-zamowienie .help-block { font-size: 13.5px; }
  .w1-konto-notka { font-size: 14.5px; }
  .w1-haslo-linki { font-size: 13.5px; }
  .w1-zamowienie .w1-link-cichy { font-size: 14px; }
  .w1-notka-krem { font-size: 14px; }
  .w1-zamowienie .delivery-methods label, .w1-zamowienie .payment-methods label, .w1-zamowienie .consent-row label { font-size: 16px; }
  .w1-zamowienie .icheckbox_minimal-custom.checked::after { font-size: 15px; line-height: 20px; }
  .w1-termin-dostawy .termin-wysylki { font-size: 15px; }
  .w1-vat-przelacznik { font-size: 16px; }
  .w1-zamowienie .before-consent-row .text { font-size: 13.5px; }
  .w1-zamowienie .consent-row label { font-size: 13.5px; }
  .w1-zamowienie .consent-all { font-size: 13.5px; }
  .w1-panel-tyt { font-size: 12px; }
  .w1-panel-poz { font-size: 16px; }
  .w1-panel-naz small { font-size: 12.5px; }
  .w1-panel-wiersz { font-size: 16px; }
  .w1-panel-razem { font-size: 17.5px; }
  .w1-panel-razem .w1-kwota { font-size: 24px; }
  .w1-dane-tresc { font-size: 16px; }
  .w1-podsumowanie-produkty .table, .w1-podsumowanie .table { font-size: 16px; }
  .w1-podsumowanie .table > thead > tr > th { font-size: 11.5px; }
  .w1-podsumowanie-uwagi p { font-size: 16px; }
  .w1-znak-ok { font-size: 25.5px; }
  .w1-potwierdzenie-glowa .w1-tyt-strony { font-size: 30.5px; }
  .w1-potwierdzenie-numer { font-size: 16px; }
  .w1-potwierdzenie-tresc { font-size: 16px; }
  .w1-zaloz-konto .w1-cichy { font-size: 14.5px; }
  .w1-status { font-size: 11.5px; }
  .w1-dlogo { font-size: 10.5px; }
  .w1-wtresc { font-size: 16px; }
  .w1-wtresc small { font-size: 13.5px; }
  .w1-wcena { font-size: 16px; }
  .w1-stopka-koszyka .prog-dostawy { font-size: 14px; }
  .w1-alerty .alert { font-size: 16px; }
  .w1-alerty .alert .close { font-size: 22.5px; }
  .w1-stopka-koszyka .w1-link-cichy, .w1-potwierdzenie-wroc { font-size: 12.5px; }
  .w1-podsumowanie-wroc { font-size: 12.5px; }
  .w1-punkt-id { font-size: 14px; }
  .w1-link-drobny, .w1-zamowienie .w1-link-drobny { font-size: 12.5px; }
  .w1-punkt .input-group .form-control, .w1-punkt .form-map-address { font-size: 16.5px; }
  .w1-punkt .btn-point-select { font-size: 13.5px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control { font-size: 16.5px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-box .btn { font-size: 12.5px; line-height: 53px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-box .form-inline .input-group .input-group-btn .btn { line-height: 53px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-code { font-size: 16px; line-height: 53px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-activated .btn { line-height: 50.5px; }
  .basket-view .w1-stopka-koszyka .coupon-info { font-size: 14px; }
  .basket-view .w1-stopka-koszyka .basket-coupon .alert-block { font-size: 13.5px; }
  .w1-prog-nad-lista .prog-dostawy { font-size: 14px; }
  .basket-view .w1-kupon-aktywny .basket-coupon-code { font-size: 16px; line-height: 53px; }
  .basket-view .w1-kupon-aktywny .basket-coupon-activated .btn { font-size: 12.5px; line-height: 53px; }
  .basket-view .w1-kupon-aktywny .coupon-info { font-size: 14px; }
  .w1-podsumowanie .w1-dane-tresc { font-size: 17px; }
  .w1-poz .shop-quantity-box .input-qty { font-size: 16.5px; }
  .w1-poz .shop-quantity-box .action { font-size: 20px; }
  .basket-view .w1-stopka-koszyka .basket-coupon .w1-kupon-blad { font-size: 14px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control::placeholder { font-size: 15px; }
  .basket-view .w1-stopka-koszyka .basket-coupon-code { line-height: 55.5px; }
  .basket-view .w1-stopka-koszyka .coupon-info { font-size: 14.5px; }
  .w1-wpis .news-view-byline .news-view-autor-imie { font-size: 16px; }
  .w1-wpis .news-view-byline .news-view-autor-funkcja { font-size: 13.5px; }
  .w1-wpis .news-view-byline .news-view-daty { font-size: 12.5px; }
  .w1-wpis .news-view-teaser, .w1-wpis .news-view-text { font-size: 19px; }
  .w1-wpis .news-view-teaser { font-size: 20px; }
  .w1-wpis .news-view-text h2 { font-size: 25.5px; }
  .w1-wpis .news-view-text h3 { font-size: 21px; }
  .w1-wpis .blog-product-label { font-size: 12.5px; }
  .w1-wpis .blog-product-name { font-size: 17.5px; }
  .w1-wpis .blog-product-rating { font-size: 14px; }
  .w1-wpis .blog-product-price, .w1-wpis .blog-product-price .price { font-size: 19px; }
  .w1-wpis .blog-product-availability { font-size: 13.5px; }
  .w1-wpis .blog-product-cta { font-size: 13.5px; }
  .w1-wpis .blog-faq-title, .w1-wpis .blog-sources-title, .w1-wpis .blog-table-title { font-size: 12.5px; }
  .w1-wpis .blog-faq-question { font-size: 17.5px; }
  .w1-wpis .blog-faq-question::after { font-size: 21.5px; }
  .w1-wpis .blog-faq-answer { font-size: 17px; }
  .w1-wpis .blog-sources-list { font-size: 14px; }
  .w1-wpis .author-title { font-size: 12.5px; }
  .w1-wpis .author-name { font-size: 17px; }
  .w1-wpis .author-job { font-size: 13.5px; }
  .w1-wpis .author-right .text { font-size: 15px; }
  .w1-wpis-wroc { font-size: 13.5px; }
  .w1-autor .autor-imie { font-size: 30.5px; }
  .w1-autor .autor-funkcja { font-size: 16px; }
  .w1-autor .autor-fakt dt, .w1-autor .autor-fakty dt { font-size: 12.5px; }
  .w1-autor .autor-fakty dd { font-size: 16.5px; }
  .w1-autor .autor-rok { font-size: 14px; }
  .w1-autor .autor-obszary { font-size: 16.5px; }
  .w1-autor .autor-obszary li { font-size: 16.5px; }
  .w1-autor .autor-zajawka { font-size: 18.5px; }
  .w1-autor .autor-biogram { font-size: 17.5px; }
  .w1-autor .autor-naglowek { font-size: 22.5px; }
  .w1-autor .autor-powiazania { font-size: 16px; }
  .w1-autor .autor-powiazania strong { font-size: 12.5px; }
  .w1-autor .w1-btn { font-size: 13.5px; }
  .w1-autor .autor-profil-serwis { font-size: 16px; }
  .w1-autor .autor-profil-strzalka { font-size: 19px; }
  .w1-autor .autor-wpis-data { font-size: 12px; }
  .w1-autor .autor-wpis-tytul { font-size: 17.5px; }
  .w1-autor .autor-wpisy-btn { font-size: 17.5px; }
  .w1-autor .autor-imie { font-size: 38px; }
}

/* ==== runda 9 (31.08.2026): kontener sklepu 1920 (decyzja wlasciciela) ==== */
/* Kontenery poszly z 1440 na 1920 (linie 254, 839, 842, 851, 1084) - to samo `max-width`,
   wiec miedzy 1140 a 1920 uklad jest plynny i szerokosc idzie za oknem; powyzej 1920 tresc
   stoi wysrodkowana, a tla sekcji dalej ida na cale okno.
   Skutek uboczny zmierzony na zrzutach: tekst byl zablokowany na 54 znakach, wiec w sekcjach
   dwukolumnowych (wiedza, glowki z opisem obok tytulu) przy 1920 robila sie dziura na srodku.
   Od 1600 px limit idzie na 72 znaki - to gorna granica wygodnego wiersza, a kolumna sie zapelnia. */
@media screen and (min-width: 1600px) {
  .mainpage .w1-sekcja .text { max-width: 72ch; }
  .w1-sekcja .section-heading > .text, .w1-sekcja .text-collection-glowa > .text { max-width: 72ch; }
}
/* Opinie: style.css rozpycha liste poza kontener (`width: calc(100% + 4 * var(--space-50))`,
   margines ujemny) - to sztuczka pod suwak starego motywu. W W1 opinie stoja w siatce 2 x 2,
   wiec rozpychanie nie ma czego wysuwac, a przy 1920 ucinalo prawa kolumne kart o 60 px
   (przy 1440 lista konczyla sie rowno z krawedzia okna, wiec bylo tego nie widac).
   Ta sama reguła dziala juz na telefonie (linia 998) - tutaj obowiazuje na kazdej szerokosci. */
.w1-sekcja.comment-section .opinion-list { width: auto; margin-left: 0; margin-right: 0; }

/* ==== runda 10 (01.09.2026): uwagi wlasciciela ==== */

/* 1. Logo w naglowku o 30 % wieksze (125 -> 162, wersja przypieta 110 -> 143).
   Runda 8 skalowala tylko pismo, wiec logo zostalo w starej mierze.
   03.09.2026: KOLEJNE 30 % na zyczenie wlasciciela („powieksz logo jeszcze o 30%"),
   czyli 162 -> 211 i 143 -> 186. Miara siedzi w tym bloku, a nie w regule bazowej:
   blok ma media query, wiec przy rownej specyficznosci bije kazda regule bez niego,
   niezaleznie od kolejnosci w pliku. */
@media screen and (min-width: 1140px) {
  .w1-glowa .logo { width: 211px; }
  header.sticky .w1-glowa .logo { width: 186px; }
}

/* 2. Zdjecie w sekcjach "jakosc" / "wiedza" jedzie z czytelnikiem, jesli kolumna tekstu jest
   wyzsza od zdjecia. Na szerokim ekranie zdjecie jest niemal tak wysokie jak tekst i sticky
   nie ma czego przesuwac; im wezszy ekran, tym zdjecie nizsze (38 % szerokosci), a tekst
   wyzszy - i wtedy sticky zaczyna dzialac. `align-items: start` na siatce juz jest. */
/* `position: sticky` wymaga, zeby ZADEN przodek nie byl kontenerem przewijania. style.css
   (linia 111) daje `#page, #content { overflow: hidden }` - to obcina wystajace elementy,
   ale przy okazji robi z #content scrollport i sticky w srodku przestaje dzialac.
   `overflow: clip` tnie dokladnie tak samo, a kontenera przewijania NIE tworzy. */
#page, #content { overflow: clip; }
@media screen and (min-width: 1140px) {
  .w1-sekcja.text-collection-section .text-collection-image { position: sticky; top: 112px; }
}

/* 4. Wideo + instrukcja: tlo osobno dla pasa nad filmem i pod filmem (kolumny `cream`
   i `creamGuide`). Sekcja oddaje swoj padding pasom, inaczej krem konczylby sie przed
   krawedzia pasa. Regula rytmu `+ .w1-sekcja` dostala `:not(.videoGuide-section)` wyzej. */
.w1-sekcja.w1-sekcja.w1-sekcja.videoGuide-section { padding-top: 0; padding-bottom: 0; }
.w1-sekcja.videoGuide-section .vg-pas--krem { background: var(--w1-krem); }
.w1-sekcja.videoGuide-section .vg-pas--gora { padding-top: 22px; padding-bottom: 18px; }
.w1-sekcja.videoGuide-section .vg-pas--dol { padding-bottom: 22px; }
.w1-sekcja.videoGuide-section .vg-pas--gora .section-heading { margin-bottom: 0; }
@media screen and (min-width: 1140px) {
  .w1-sekcja.videoGuide-section .vg-pas--gora { padding-top: 40px; padding-bottom: 26px; }
  .w1-sekcja.videoGuide-section .vg-pas--dol { padding-bottom: 40px; }
}

/* 5. Opinie. */
/* 5a. Szersza kolumna z podsumowaniem (260 -> 400), przez co kafle opinii sa wezsze. */
@media screen and (min-width: 1140px) {
  .w1-sekcja.comment-section .comment-section-inner { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}
/* 5b. Wiersz "opinia potwierdzona zakupem" w JEDNYM wierszu: ptaszek pochodzi z ::before,
   a tresc z panelu jest w <p>, wiec blok lamal linie. Flex sklada je z powrotem. */
.w1-sekcja.comment-section .opinion-item > .opinion-zakup { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.w1-sekcja.comment-section .opinion-item > .opinion-zakup::before { margin-right: 0; }
.w1-sekcja.comment-section .opinion-item > .opinion-zakup p { margin: 0; }
/* 5c. Caly wiersz jednym kolorem. Tresc z panelu ma wlasny `style="color:#008000"` na <span>,
   wiec bez `inherit` ptaszek i napis mialy dwa rozne zielenie. Zielen TYLKO dla potwierdzonych -
   dotad oba warianty korzystaly z tej samej reguly i niepotwierdzone tez byly zielone. */
.w1-sekcja.comment-section .opinion-item > .opinion-zakup :is(span, strong, p) { color: inherit !important; }
.w1-sekcja.comment-section .opinion-item > .opinion-zakup--tak { color: var(--w1-zielen); }
.w1-sekcja.comment-section .opinion-item > .opinion-zakup--nie { color: var(--w1-cichy); }
.w1-sekcja.comment-section .opinion-item > .opinion-zakup--nie::before { display: none; }

/* ==== runda 11 (01.09.2026): uwagi wlasciciela z telefonu ==== */

/* 1. Przycisk menu zapadal sie pod krawedz naglowka. Miedzy trzema <span> w markupie sa
   ODSTEPY (biale znaki), a runda 6 zrobila z guzika `flex-direction: column` - biale znaki
   stworzyly wlasne pozycje w kolumnie i zepchnely paski w dol, poza pudelko 44 x 44.
   `font-size: 0` odbiera im wysokosc; paski wracaja na srodek. */
.w1-glowa .main-menu-button { font-size: 0; line-height: 0; }
/* Wlasciwy sprawca: motyw (`animIcon--hamburger`) daje guzikowi `::before` o wysokosci 44 px.
   W ukladzie kolumnowym to PELNOPRAWNA pozycja flexa - zajmuje cala wysokosc guzika, a paski
   ladują pod nim, poza pudelkiem. */
.w1-glowa .main-menu-button::before, .w1-glowa .main-menu-button::after { display: none; }

/* 2. Koszyk bez liczby wygladal jak dowolna ikona. Motyw chowa cala `.caption` na telefonie,
   wiec licznik nie mial jak sie pokazac - reguly na sam licznik (linia 636) byly martwe. */
@media screen and (max-width: 1139px) {
  /* `style-responsive.bundle.css` chowa cala `.caption` ponizej 639 px regula o czterech
     klasach (`.header-right > .top-box-container .basket-box-btn .caption`), wiec trzy klasy
     przegrywaly i licznik nie mial jak sie pokazac. */
  .w1-glowa .header-right .basket-box .basket-box-btn .caption { display: block; position: static; }
  .w1-glowa .basket-box-btn .caption-value { display: none; }
  .w1-glowa .basket-box-btn .caption-basket { position: absolute; top: 2px; right: 2px; font-size: 0; line-height: 0; }
}

/* 3. Kategorie: wielokropek wchlania kropke konca zdania (znacznik .kat-kropka z szablonu). */
@media screen and (max-width: 1139px) {
  .kat-kropka { display: none; }
  .kat-lead::after { content: "..."; color: var(--w1-cichy); }
}

/* 4. Pas 4 ikon rozjezdzal sie: kafelek jest wysrodkowany (`text-align: center`), ale
   `.w1-sekcja .text { text-align: left }` (linia 706) przestawialo sam tekst do lewej -
   ikona stala na srodku, napis przy lewej krawedzi kolumny. */
@media screen and (max-width: 1139px) {
  .w1-sekcja.icons-section .icons-section-item .text,
  .w1-sekcja.icons-section .icons-section-item .text p,
  .w1-sekcja.icons-section .icons-section-item .text strong,
  .w1-sekcja.icons-section .icons-section-item .text b { text-align: center; }
  .w1-sekcja.icons-section .icons-section-item .text { width: 100%; }
}

/* 5. Kafle z odnosnikami do podstron: napisy byly za male na kafelku 360 px. */
@media screen and (max-width: 1139px) {
  .kafel-nad { font-size: 11px; }
  .kafel-tyt { font-size: 19px; margin-top: 5px; white-space: normal; }
}

/* 6. Opinie na telefonie. */
@media screen and (max-width: 1139px) {
  /* 6a. Wiersz ze srednia i gwiazdkami ma stac na wysokosci naglowka "Opinie".
     `.comment-section-inner` oddaje siatce swoje dzieci (`display: contents`), dzieki czemu
     podsumowanie i glowka trafiaja do jednego wiersza bez ruszania szablonu. */
  .w1-sekcja.comment-section > .container:first-child { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; }
  /* glowka oddaje swoj dolny margines kaflom - inaczej `align-items: end` rownalo podsumowanie
     do DOLU marginesu, czyli wyraznie ponizej slowa "Opinie" */
  .w1-sekcja.comment-section > .container:first-child > .section-heading { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .w1-sekcja.comment-section .comment-section-inner { display: contents; }
  /* AKTUALIZACJA 03.09 (druga uwaga wlasciciela): podsumowanie idzie POD glowke, na cala
     szerokosc i DO LEWEJ - niezaleznie od tego, czy sekcja ma opis. Wczesniej stalo
     w kolumnie 2 wiersza 1, czyli obok tytulu, dosuniete do prawej krawedzi. Przy
     jednym wierszu („5.0 gwiazdki 182 OPINIE") robil sie z tego dlugi pasek wciecie
     w prawy rog: zmierzone przy 390 px zaczynal sie na x=180 z 390 dostepnych. */
  .w1-sekcja.comment-section .comment-section-stats { grid-column: 1 / -1; grid-row: 2; border: 0; padding: 0; align-self: start; margin-top: 14px; }
  .w1-sekcja.comment-section .comment-section-comments { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .w1-sekcja.comment-section .rating-summary { justify-content: flex-start; }
  /* 6b. Potwierdzenie zakupu nachodzilo na nazwisko: `margin-top: -30px` (linia 784) podciagalo
     je do gory, co na duzym ekranie stawia je obok nazwiska, a na waskim kafelku - NA nim. */
  .w1-sekcja.comment-section .opinion-item > .opinion-zakup { margin-top: 6px; justify-content: flex-start; }
}

/* 7. Przycisk odtwarzania wraca do prostokata z napisem (decyzja wlasciciela: poprzedni byl
   lepszy), ale dostaje reakcje na najechanie: podnosi sie, biele, trojkat rusza w prawo.
   01.09 wieczor: najechanie liczy sie na SAMYM przycisku, nie na kadrze. Kadr to odnosnik przez
   cala szerokosc sekcji, wiec animacja odpalala sie juz przy wejsciu myszka w sekcje i nie bylo
   wiadomo, czego dotyczy. Obwodka przy karetce zostaje na odnosniku - to on dostaje ognisko. */
.w1-sekcja.videoGuide-section .video-play-btn, .w1-sekcja.video-section .video-play-btn {
  background: var(--w1-krem); box-shadow: 0 2px 10px rgba(22, 24, 15, .18);
}
.w1-sekcja.videoGuide-section .video-play-btn:hover, .w1-sekcja.video-section .video-play-btn:hover {
  background: #fff; box-shadow: 0 8px 22px rgba(22, 24, 15, .30); transform: translate(-50%, -50%) translateY(-2px);
}
.w1-sekcja.videoGuide-section .video-play-btn:hover svg, .w1-sekcja.video-section .video-play-btn:hover svg {
  transform: translateX(2px);
}
.w1-sekcja.videoGuide-section .vg-kadr:focus-visible .video-play-btn, .w1-sekcja.video-section a:focus-visible .video-play-btn {
  outline: 2px solid #fff; outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .w1-sekcja.videoGuide-section .video-play-btn, .w1-sekcja.video-section .video-play-btn {
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .w1-sekcja.videoGuide-section .video-play-btn svg, .w1-sekcja.video-section .video-play-btn svg { transition: transform .2s ease; }
}

/* 8. Blog na telefonie: miniatury byly sciete i dotykaly tekstu.
   Runda 7 dala `.news-item { gap: 0 }`, zeby skasowac odstep miedzy data a tytulem - ale to
   zdjelo TAKZE odstep miedzy kadrem a tekstem (mobilna regula miala `gap: 0 13px`).
   Do tego `height: 100%` na kadrze w siatce o wierszach `auto 1fr` daje zaleznosc cykliczna:
   kadr nie wnosi wysokosci, wiersze zapadaja sie do 13 px i kadr znika. Stala proporcja
   przerywa cykl. */
.w1-sekcja.news-section .news-item { row-gap: 0; }
@media screen and (max-width: 1139px) {
  /* wiersz `1fr` nie przyjmuje wysokosci od kadru rozpietego na dwa wiersze (frakcje nie biora
     udzialu w rozmiarze wewnetrznym), wiec siatka zapadala sie do wysokosci samego tekstu -
     kadr wystawal poza kafelek. Dwa wiersze `auto` przyjmuja ja normalnie. */
  .w1-sekcja.news-section .news-item { column-gap: 13px; grid-template-rows: auto auto; }
  /* Nawet przy dwoch wierszach `auto` kadr nie wnosil wysokosci - <span> z obrazkiem w srodku
     ma min-content 0, wiec siatka dalej liczyla tylko tekst. Jawne 88 x 66 konczy zaleznosc:
     kadr ma zawsze te sama miare, a `min-height` na kafelku pilnuje wiersza. */
  .w1-sekcja.news-section .news-item { min-height: 66px; }
  .w1-sekcja.news-section .news-item-image { width: 88px; height: 66px; aspect-ratio: auto; align-self: start; }
  /* `!important`, bo helper miniatur wpisuje `style="height:auto"` PROSTO w znacznik <img>,
     a styl w atrybucie bije kazda regule z arkusza. Bez tego zdjecie zajmowalo 46 z 66 px
     i pod kadrem zostawal kremowy pasek. */
  .w1-sekcja.news-section .news-item-image picture,
  .w1-sekcja.news-section .news-item-image img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
}

/* ==== korekty pc po skali pisma (10.09.2026) - MUSZA byc za blokiem "3. SKALA PISMA",
   bo skala przelicza wszystkie reguly sprzed znacznika rundy 8 x1,26 ==== */
@media screen and (min-width: 1140px) {
  .w1-pasek-krokow li { font-size: 13px; }
  .w1-wtresc small, .w1-wtresc small.w1-teaser, .w1-panel-poz small { font-size: 13px; }
  .w1-podsumowanie .w1-dane-tresc { font-size: 13.5px; }
}
/* kupon aktywny: kod i „Anuluj kupon" w jednej osi takze po skali pisma na pc */
.basket-view .w1-kupon-aktywny .basket-coupon-code, .basket-view .w1-stopka-koszyka .basket-coupon-code { height: 42px; line-height: 42px; padding: 0; }
.basket-view .w1-kupon-aktywny .basket-coupon-activated .input-group { align-items: stretch; }

/* 10.09: zgody z takim samym znacznikiem jak dostawa/platnosc (zielony kwadrat, bialy ptaszek);
   za blokiem skali, bo skala przeliczala rozmiar starego ptaszka-tekstu */
.w1-zamowienie .consent-row label .icheckbox_minimal-custom { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin: 1px 0 0; border: 1px solid var(--w1-cichy); border-radius: 0; background: #fff; }
.w1-zamowienie .consent-row .icheckbox_minimal-custom.checked { border-color: var(--w1-zielen); background: var(--w1-zielen); }
.w1-zamowienie .consent-row .icheckbox_minimal-custom.checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -60%) rotate(45deg); background: none; border-radius: 0; line-height: 0; font-size: 0; }

/* 10.09: placeholder kodu rabatowego zostaje CICHY takze na pc. Wlasciciel prosil, zeby ten
   tekst byl mniejszy („wpisz tutaj kod jest bardzo krzykliwe"), regula bazowa daje 12 px,
   ale blok skali pisma mnozy wszystko sprzed znacznika rundy 8 przez 1,26 i robil z tego
   15 px - czyli cofal prosbe. Korekta musi stac ZA blokiem skali. */
@media screen and (min-width: 1140px) {
  .basket-view .w1-stopka-koszyka .basket-coupon-box .input-group .form-control::placeholder { font-size: 12px; }
}

/* ==== 11.09 nocna paczka: ramki pol w uzyciu (WCAG 1.4.11 + 2.4.7) ====
   Spoczynek: --w1-ramka (3,57:1). W uzyciu: --w1-tekst. style.css:46 zeruje obrys
   (`outline: none !important`) - fokus pokazuje wiec ZMIANA RAMKI na czarna, jak na
   sciezce zakupu. Grupa szukania czernieje cala (pole + lupa), bo to jedna kontrolka. */
.w1-glowa .mainsearch:focus-within input.form-control,
.w1-glowa .mainsearch:focus-within .mainsearch-submit,
.mainsearch.rwdPanel:focus-within input.form-control,
.mainsearch.rwdPanel:focus-within .mainsearch-submit { border-color: var(--w1-tekst) !important; box-shadow: none !important; }
/* lupa: stary stroj zielenil ja na najechaniu (style.css:689) */
.w1-glowa .mainsearch-submit:hover, .w1-glowa .mainsearch-submit:focus-visible { background: #fff !important; color: var(--w1-tekst) !important; border-color: var(--w1-tekst) !important; }
.w1-glowa .mainsearch:hover input.form-control, .w1-glowa .mainsearch:hover .mainsearch-submit { border-color: var(--w1-tekst) !important; }
@media screen and (min-width: 1140px) {
  .w1-glowa .basket-box-btn:hover, .w1-glowa .basket-box-btn:focus-visible,
  .w1-glowa .top-box-basket-container.hovered .basket-box-btn,
  .w1-glowa .top-box-basket-container:focus-within .basket-box-btn { border-color: var(--w1-tekst); background: #fff; color: var(--w1-tekst); }
}
.mainsearch-rwd-button:focus-visible { border-color: var(--w1-tekst) !important; }

/* ==== Okna fancyBox w stroju W1 (21.09.2026) ====
   Arkusz biblioteki laduje sie leniwie, czyli PO w1.css - stad wszedzie przodek
   .fancybox-container, zeby wygrac specyficznoscia, a nie kolejnoscia. */
.fancybox-container { font-family: "Red Hat Display", system-ui, sans-serif; }
.fancybox-container .fancybox-bg { background: var(--w1-ciemny); }
.fancybox-container.fancybox-is-open .fancybox-bg { opacity: .92; }
/* pasek narzedzi: zostaja miniatury i zamkniecie; pokaz slajdow, pelny ekran i „udostepnij" to halas */
.fancybox-container .fancybox-button--play, .fancybox-container .fancybox-button--fullscreen, .fancybox-container .fancybox-button--share { display: none; }
.fancybox-container .fancybox-button { width: 48px; height: 48px; padding: 12px; background: transparent; color: var(--w1-ciemny-tekst); opacity: .8; transition: opacity .2s ease-out; }
.fancybox-container .fancybox-button:hover, .fancybox-container .fancybox-button:focus-visible { background: transparent; color: #fff; opacity: 1; }
.fancybox-container .fancybox-button:focus-visible { outline: 1px solid var(--w1-ciemny-zloto); outline-offset: -4px; }
.fancybox-container .fancybox-infobar { mix-blend-mode: normal; }
.fancybox-container .fancybox-infobar, .fancybox-container .fancybox-infobar__body { background: transparent; color: var(--w1-ciemny-zloto); font-size: 11px; font-weight: 500; letter-spacing: var(--w1-track); line-height: 48px; }
.fancybox-container .fancybox-infobar__body { padding: 0 18px; }
.fancybox-container .fancybox-navigation button { width: 56px; height: 56px; padding: 16px; margin-top: -28px; background: transparent; opacity: .8; }
.fancybox-container .fancybox-navigation button:not([disabled]):hover { opacity: 1; }
.fancybox-container .fancybox-navigation button::before { background: transparent; border: 1px solid rgba(237, 234, 225, .45); top: 4px; right: 4px; width: 48px; height: 48px; }
.fancybox-container .fancybox-caption-wrap { background: none; padding: 40px 24px 0; }
.fancybox-container .fancybox-caption { border-top: 1px solid rgba(237, 234, 225, .2); padding: 16px 0 22px; font-size: 13px; line-height: 1.6; color: var(--w1-ciemny-tekst); text-align: center; }
/* miniatury */
.fancybox-container .fancybox-thumbs { background: var(--w1-ciemny); border-left: 1px solid rgba(237, 234, 225, .14); padding: 12px 10px; }
.fancybox-container .fancybox-thumbs > ul > li { border: 0; opacity: .6; transition: opacity .2s ease-out; }
.fancybox-container .fancybox-thumbs > ul > li:hover, .fancybox-container .fancybox-thumbs > ul > li.fancybox-thumbs-active { opacity: 1; }
.fancybox-container .fancybox-thumbs > ul > li::before { border: 1px solid var(--w1-ciemny-zloto); }
/* film: bez cienia i zaokraglen */
.fancybox-container .fancybox-slide--video .fancybox-content, .fancybox-container .fancybox-slide--iframe .fancybox-content { background: #000; box-shadow: none; }
/* okna z trescia (formularz opinii, popup z panelu): bialy arkusz, krzyzyk w kolorze tekstu */
.fancybox-container .fancybox-slide--html .fancybox-close-small { top: 6px; right: 6px; width: 44px; height: 44px; }
.fancybox-container .fancybox-slide--html .fancybox-close-small::after { top: 6px; right: 6px; width: 32px; height: 32px; font: 300 26px/32px "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); background: transparent; opacity: .55; }
.fancybox-container .fancybox-slide--html .fancybox-close-small:hover::after, .fancybox-container .fancybox-slide--html .fancybox-close-small:focus::after { color: var(--w1-tekst); background: transparent; opacity: 1; }
/* „Napisz opinie": zloty nadtytul z nazwa produktu nad lekkim tytulem, zamiast zielonej belki */
.fancybox-container .add-opinion { width: 640px; max-width: calc(100% - 24px); padding: 0; background: #fff; color: var(--w1-tekst); font-family: "Red Hat Display", system-ui, sans-serif; }
.fancybox-container .add-opinion-container { display: flex; flex-direction: column; padding: 36px 40px 40px; }
.fancybox-container .add-opinion-subtitle { order: 1; margin: 0 40px 8px 0; font-size: 11px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; text-align: left; color: var(--w1-zloto); }
.fancybox-container .add-opinion-title { order: 2; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--w1-linia); background: none; font-size: 30px; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; text-align: left; color: var(--w1-tekst); }
.fancybox-container .add-opinion-container > :not(.add-opinion-title):not(.add-opinion-subtitle) { order: 3; }
.fancybox-container .add-opinion, .fancybox-container .add-opinion p { font-size: 14px; line-height: 1.6; }
.fancybox-container .add-opinion .text, .fancybox-container .add-opinion .text p { color: var(--w1-cichy); }
.fancybox-container .add-opinion label:not(.item-rating-star) { margin-bottom: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-cichy); }
/* zgody to tez <label>, ale czytane zdaniem - bez wersalikow */
.fancybox-container .add-opinion input[type="checkbox"] + label, .fancybox-container .add-opinion label:has(input[type="checkbox"]), .fancybox-container .add-opinion .form-element-checkbox-container label { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--w1-tekst); }
.fancybox-container .add-opinion .item-rating-star { margin: 0 4px 0 0; font-size: 26px; line-height: 1; color: var(--w1-zloto); cursor: pointer; }
.fancybox-container .add-opinion .form .form-control { height: 44px; padding: 8px 12px; border: 1px solid var(--w1-ramka); border-radius: 0 !important; box-shadow: none; background: #fff; font-size: 14px; color: var(--w1-tekst); }
.fancybox-container .add-opinion .form textarea.form-control { height: auto; min-height: 120px; }
.fancybox-container .add-opinion .form .form-control:focus { border-color: var(--w1-tekst); box-shadow: none; outline: none; }
.fancybox-container .add-opinion .form .has-error .form-control { border-color: var(--w1-alarm); }
.fancybox-container .add-opinion .form .alert-block .error { color: var(--w1-alarm) !important; }
.fancybox-container .add-opinion .btn, .fancybox-container .fancybox-modal .btn { min-height: 48px; padding: 14px 28px; border: 1px solid var(--w1-tekst); border-radius: 0 !important; background: var(--w1-tekst); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; box-shadow: none; transition: background-color .2s ease-out; }
.fancybox-container .add-opinion .btn:hover, .fancybox-container .add-opinion .btn:focus-visible, .fancybox-container .fancybox-modal .btn:hover { background: #34312A; border-color: #34312A; color: #fff; }
/* popup z panelu (plugins/popup.phtml) */
.fancybox-container .fancybox-modal { border-radius: 0; box-shadow: none; font-family: "Red Hat Display", system-ui, sans-serif; color: var(--w1-tekst); }
.fancybox-container .fancybox-modal-teaser, .fancybox-container .fancybox-modal-teaser p { font-size: 14px; line-height: 1.6; color: var(--w1-tekst); }
@media screen and (max-width: 767px) {
  .fancybox-container .add-opinion { max-width: 100%; }
  .fancybox-container .add-opinion-container { padding: 28px 20px 28px; }
  .fancybox-container .add-opinion-title { font-size: 26px; }
  .fancybox-container .fancybox-slide--html { padding: 12px; }
}

/* /user/register na telefonie i tablecie (jedna kolumna, < 992 px): kafel "Zarejestruj sie"
   z opisem korzysci stoi miedzy tytulem "Rejestracja" a polami (zyczenie wlasciciela
   21.09.2026). Kolumna formularza i jej panel znikaja z ukladu (display: contents), wiec
   tytul, kafel i pola sa rodzenstwem w wierszu i ustawia je `order`. Znikniety box kolumny
   zabiera jej odstep boczny 11 px - oddajemy go tytulowi i polom. Czytnik ekranu czyta
   dalej w kolejnosci HTML (tytul, pola, kafel). */
@media screen and (max-width: 991px) {
  .w1-logowanie .userpanel-container > .row:has(> .register-info) { flex-direction: column; flex-wrap: nowrap; }
  .w1-logowanie .userpanel-container > .row:has(> .register-info) > .login-box:not(.register-info),
  .w1-logowanie .userpanel-container > .row:has(> .register-info) > .login-box:not(.register-info) > .panel { display: contents; }
  .w1-logowanie .userpanel-container > .row:has(> .register-info) > .login-box:not(.register-info) .panel-heading { order: 1; padding: 0 11px; }
  .w1-logowanie .userpanel-container > .row:has(> .register-info) > .register-info { order: 2; margin-top: 0; }
  .w1-logowanie .userpanel-container > .row:has(> .register-info) > .login-box:not(.register-info) .panel-body { order: 3; padding: 0 11px; }
}

/* ==== Dokumenty prawne (regulamin, regulamin konta, polityka...) w stroju W1 - 21.09.2026 ====
   Tresc z Kreatora Legal Geek przechodzi przez przeksztalcenie, ktore zmienia tylko znaczniki
   (tekst slowo w slowo) i owija calosc w `.w1-dokument-tresc`. Wszystko ponizej wisi na tej
   klasie, wiec inne strony na szablonie `page` (np. Przygotuj Matcha) zostaja bez zmian.
   Przodek `.w1-page-tresc` - stroj `.text p` ze style.css ma (0,1,1). */
.relative:has(.w1-dokument-tresc) > .page-top-deco { display: none; }
.w1-page-tresc .w1-dokument-tresc { max-width: 720px; font-size: 15px; line-height: 1.7; color: var(--w1-tekst); overflow-wrap: break-word; }
.w1-page-tresc .w1-dokument-tresc p, .w1-page-tresc .w1-dokument-tresc li, .w1-page-tresc .w1-dokument-tresc dd, .w1-page-tresc .w1-dokument-tresc dt { font-size: 15px; line-height: 1.7; color: var(--w1-tekst); }
.w1-page-tresc .w1-dokument-tresc p { margin: 0 0 14px; }
.w1-page-tresc .w1-dokument-tresc b, .w1-page-tresc .w1-dokument-tresc strong { font-weight: 600; }
.w1-page-tresc .w1-dokument-tresc a { color: var(--w1-tekst); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--w1-ramka); }
.w1-page-tresc .w1-dokument-tresc a:hover, .w1-page-tresc .w1-dokument-tresc a:focus-visible { text-decoration-color: currentColor; }
/* paragrafy: zloty nadtytul nad kreska, jak glowki sekcji W1. Odstep kotwic spisu tresci od gory
   daje globalne `html { scroll-padding-top }` (152 px pc / 75 px telefon) - bez wlasnego scroll-margin. */
.w1-page-tresc .w1-dokument-tresc h2 { margin: 48px 0 18px; padding: 28px 0 0; border-top: 1px solid var(--w1-linia); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-page-tresc .w1-dokument-tresc h3 { margin: 28px 0 12px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-cichy); }
.w1-page-tresc .w1-dokument-tresc ol, .w1-page-tresc .w1-dokument-tresc ul { margin: 0 0 16px; padding-left: 1.5em; }
/* stary stroj `.text ol > li` wcina punkty przesunieciem (position: relative; left: 40px) i dokleja
   40 px z prawej - w dokumencie dawalo to podwojne wciecie, a na telefonie wystawanie poza ekran */
.w1-page-tresc .w1-dokument-tresc li { position: static; left: auto; margin: 0 0 8px; padding: 0 0 0 .25em; }
.w1-page-tresc .w1-dokument-tresc li::marker { color: var(--w1-cichy); font-variant-numeric: tabular-nums; }
.w1-page-tresc .w1-dokument-tresc li > ol, .w1-page-tresc .w1-dokument-tresc li > ul { margin: 8px 0 4px; }
/* Rodzaj numeracji: stary stroj `.text ol { list-style-type: decimal }` wygrywa z atrybutem `type`
   (atrybut to najslabsza wskazowka), a `ol, ul { list-style: none }` zdejmuje kropki - wiec „lit. a"
   rysowala sie jako „1.". Klasy zamiast [type]: w HTML wartosc `type` porownuje sie BEZ wielkosci
   liter, wiec [type="A"] lapalo tez listy „a, b", a flagi `s` Chrome nie zna (cala regula odpada).
   Klasy dopisuje przeksztalcenie tresci z Kreatora. */
.w1-page-tresc .w1-dokument-tresc ol { list-style-type: decimal; }
.w1-page-tresc .w1-dokument-tresc ol.w1-lista-litery { list-style-type: lower-alpha; }
.w1-page-tresc .w1-dokument-tresc ol.w1-lista-litery-duze { list-style-type: upper-alpha; }
.w1-page-tresc .w1-dokument-tresc ul { list-style-type: disc; }
.w1-page-tresc .w1-dokument-tresc ol.w1-lista-litery-duze > li { margin-top: 22px; }
.w1-page-tresc .w1-dokument-tresc ol.w1-lista-litery-duze > li > b:first-child { display: block; margin-bottom: 8px; }
/* nota licencyjna Legal Geek - cicha, ale zostaje (warunek licencji) */
.w1-page-tresc .w1-dokument-tresc .w1-dok-meta { margin: 0 0 28px; font-size: 12px; line-height: 1.6; color: var(--w1-cichy); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-meta a { color: inherit; }
/* spis tresci na kremie, odnosniki do paragrafow */
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis { margin: 0; padding: 24px 28px; background: var(--w1-krem); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis-tytul { margin: 0 0 14px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis li { margin: 0 0 6px; padding: 0; break-inside: avoid; font-size: 14px; line-height: 1.5; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis a { text-decoration: none; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis a:hover, .w1-page-tresc .w1-dokument-tresc .w1-dok-spis a:focus-visible { text-decoration: underline; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-spis-nr { color: var(--w1-zloto); font-variant-numeric: tabular-nums; }
/* definicje jak tabelka parametrow produktu: pojecie | opis, kreski miedzy wierszami */
.w1-page-tresc .w1-dokument-tresc .w1-dok-definicje { margin: 0; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-definicje > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 20px; padding: 12px 0; border-top: 1px solid var(--w1-linia); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-definicje > div:last-child { border-bottom: 1px solid var(--w1-linia); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-definicje dt { font-weight: 600; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-definicje dd { margin: 0; }
/* zalacznik (wzor formularza) na kremie; linie do wypelnienia zamiast ciagow kropek, ktore
   na telefonie wychodzily poza ekran */
.w1-page-tresc .w1-dokument-tresc .w1-dok-zalacznik { margin-top: 56px; padding: 32px; background: var(--w1-krem); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-zalacznik h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-srodek { text-align: center; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-podpis { text-align: right; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-linia { display: block; height: 1.9em; margin: 0 0 8px; border-bottom: 1px solid var(--w1-ramka); }
.w1-page-tresc .w1-dokument-tresc .w1-dok-podpis .w1-dok-linia { width: min(320px, 100%); margin-left: auto; }
/* tabele polityki prywatnosci (cel | podstawa | jak dlugo): pytanie na kremie zlotymi wersalikami,
   odpowiedz zwyklym pismem, cienkie kreski W1 zamiast czarnych ramek; na waskim ekranie tabela
   przewija sie w bok w swojej ramce, strona nie */
.w1-page-tresc .w1-dokument-tresc .w1-dok-tabela-ramka { margin: 16px 0 28px; overflow-x: auto; }
/* `.text table { min-width: 780px }` ze starego stroju wymuszal przewijanie w bok nawet dla dwoch
   kolumn - tu tekst sie lamie i tabela miesci sie na telefonie */
.w1-page-tresc .w1-dokument-tresc .w1-dok-tabela { width: 100%; min-width: 0; border-collapse: collapse; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-tabela th, .w1-page-tresc .w1-dokument-tresc .w1-dok-tabela td { padding: 10px 14px; border: 1px solid var(--w1-linia); vertical-align: top; text-align: left; font-size: 14px; line-height: 1.6; color: var(--w1-tekst); background: #fff; }
.w1-page-tresc .w1-dokument-tresc .w1-dok-tabela th { background: var(--w1-krem); font-size: 11px; font-weight: 500; letter-spacing: var(--w1-track); text-transform: uppercase; color: var(--w1-zloto); }
@media screen and (max-width: 767px) {
  .w1-page-tresc .w1-dokument-tresc .w1-dok-spis { padding: 20px; }
  /* ostatnia tabela polityki ma trzy kolumny: suma najdluzszych slow z pelnymi marginesami dawala
     421 px na 360 - ciasniejsze komorki, rowne kolumny (przy automatycznych pierwsza, z dlugimi
     wersalikami, zabierala miejsce i trzecia lamala „Zjednocz-one") i lamanie slowa tylko w ostatecznosci */
  .w1-page-tresc .w1-dokument-tresc .w1-dok-tabela { table-layout: fixed; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-tabela th, .w1-page-tresc .w1-dokument-tresc .w1-dok-tabela td { padding: 8px 8px; font-size: 13px; overflow-wrap: anywhere; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-tabela th { padding-left: 6px; padding-right: 6px; font-size: 10px; letter-spacing: .03em; } /* „MARKETINGOWYCH" w kolumnie 120 px */
  .w1-page-tresc .w1-dokument-tresc .w1-dok-spis ol { columns: 1; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-definicje > div { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-zalacznik { padding: 20px; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-podpis { text-align: left; }
  .w1-page-tresc .w1-dokument-tresc .w1-dok-podpis .w1-dok-linia { margin-left: 0; }
}
@media print {
  .w1-page-tresc .w1-dokument-tresc .w1-dok-zalacznik { break-before: page; padding: 0; background: none; }
}
/* Podpowiedz przewijania tabeli na telefonie („raczka") z responsive.css wskazuje na
   images/rwd-table-hand.png, ktorego nie ma w repo ani na serwerze - 404 na stronach prawnych.
   Tabela dalej przewija sie w bok; znika tylko martwy obrazek i zarezerwowane pod niego 40 px. */
.text .table-responsive-wrapper { padding-bottom: 0; }
.text .table-responsive-wrapper::after { display: none; }