/* ============================================================
   TELEFON / TABLET / WĄSKI DESKTOP — 869f7deet, Szymon 6.11 (zrzuty 511, 513, 514, 516, 517, 518, 520).
   Osobny plik po pkieu-v3.css (zasada: nowe reguły motywu nie doklejane na koniec pkieu-v3.*).
   ============================================================ */

/* ---------- BANER (karuzela kampanii, .car) ----------
   Układ zależy od SZEROKOŚCI BANERA (kontener), nie okna — kolumna boczna hero i .hero.no-side zmieniają ją niezależnie.
   (1) szeroki baner (≥ 900 px, desktop): dwie kolumny jak dotąd. Okładka wchodzi na panel tekstu o --cv-over (70 px) i jest
       obrócona o -3° (+~8 px pudełka), a panel tekstu miał po prawej tylko 36 px — przy węższym banerze podtytuł, opis
       i tytuł chowały się pod okładką (zrzut 511: 861–1280 px, do 96 px). Prawy margines tekstu = zakład + obrót + odstęp.
   (2) węższy baner (telefon, tablet, desktop 861–1180 obok kolumny Poradników): KOMPAKTOWY (zrzut 520: „bannery gigantyczne”,
       ~600 px wysokości) — tekst po lewej, wąska czerwona kolumna marki po prawej z małą okładką i nawigacją w dole, bez
       osobnego czerwonego pasa nad tekstem; podtytuł 1 wiersz, opis do 3 wierszy. Okładka nie wchodzi na tekst. */
.car{container:car / inline-size;}
@media (min-width:861px){
  @container car (min-width:900px){
    .car .txt{--txt-pr:calc(var(--cv-clear,70px) + 26px);padding-right:var(--txt-pr);}
    .car .hmark{max-width:calc(100% + var(--txt-pr) - 14px - var(--cv-over) - var(--pc-gx) - var(--pki-corner-w) - 12px);}
  }
}
@container car (max-width:899.98px){
  .car .slide{--art-w:clamp(118px,27%,190px);grid-template-columns:minmax(0,1fr) var(--art-w);min-height:0;}
  .car .txt{order:0;justify-content:center;gap:10px;padding:18px 16px 18px 22px;border:var(--card-border);border-right:0;border-radius:var(--r) 0 0 var(--r);}
  .car .hmark{--pc-gx:10px;--pc-gy:8px;margin:8px 0 10px 10px;max-width:calc(100% - 20px);}
  .car .hero-t{font-size:clamp(20px,4.6cqw,28px);max-width:none;hyphens:manual;overflow-wrap:break-word;}  /* bez dzielenia wyrazów (zrzut 553: „księż-nej”) — łamią się całe słowa; break-word tylko gdy jedno słowo nie mieści się w wierszu (320 px) */
  .car .hmark.long .hero-t{font-size:clamp(18px,4cqw,24px);max-width:none;}
  .car .byl,.car .lead{margin-left:10px;max-width:none;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
  .car .byl{-webkit-line-clamp:1;}
  .car .lead{-webkit-line-clamp:3;font-size:var(--fs-md);line-height:1.5;}
  .car .txt .btn{margin:2px 0 0 10px;max-width:calc(100% - 10px);height:auto;min-height:var(--h-touch,44px);padding-block:8px;white-space:normal;text-align:center;}  /* „Sprawdź katalog” zawija się, nie wchodzi na kolumnę marki */
  .car .art{order:0;min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;padding:22px 12px 72px;border-radius:0 var(--r) var(--r) 0;}
  .car .kick{display:none;}
  .car .one{width:min(100%,120px);height:auto;margin:0;transform:rotate(-3deg);box-shadow:-8px 14px 24px rgba(0,0,0,.4);}
  /* premiery (zrzuty 529, 539): slajd z kilkoma okładkami wygląda jak slajd z jedną („jest git”) — pierwsza okładka w tym samym
     rozmiarze i miejscu co .one, dwie kolejne schowane za nią, przesunięte w lewo, obrócone o ±5° względem przedniej, mniejsze
     o 10 % i przyciemnione; proporcje 2:3 z object-fit (bez rozciągania), całość nad strzałkami, nic nie ucięte */
  .car .art-fan{align-items:center;padding:22px 12px 72px;}
  .car .fan{position:relative;left:min(11%,18px);flex:none;width:min(74%,120px);aspect-ratio:auto;margin:0;}  /* okładka + wystające tylne ≈ 1,3 szerokości okładki ≤ kolumna; przesunięcie w prawo o połowę wystawania — grupa wyśrodkowana */
  .car .fan img{position:absolute;top:0;left:5%;bottom:auto;width:90%;height:auto;aspect-ratio:2 / 3;object-fit:cover;filter:brightness(.62);
    box-shadow:-6px 10px 18px rgba(0,0,0,.35);transform-origin:50% 100%;}
  .car .fan img:nth-child(1){position:relative;left:0;display:block;width:100%;z-index:3;filter:none;transform:rotate(-3deg);box-shadow:-8px 14px 24px rgba(0,0,0,.4);}
  .car .fan img:nth-child(2){z-index:2;left:5%;width:90%;top:3%;transform:translateX(-14%) rotate(-7deg);}
  .car .fan img:nth-child(3){z-index:1;left:5%;width:90%;top:6%;transform:translateX(-24%) rotate(-9deg);}
  .car .fan img:nth-child(n+4){display:none;}
  /* kampania bez okładek: w wąskiej kolumnie zostaje samo hasło (etykiety działów nie mieszczą się) */
  .car .art-chips{padding:18px 12px 72px;}
  .car .art-chips .kick{display:block;position:static;align-self:stretch;margin:0;max-width:none;text-align:left;}
  .car .chips{display:none;}
  .car .cnav{right:12px;bottom:14px;gap:8px;}
  .car .carr{--arr-w:40px;--arr-a:11px;gap:6px;}
  .car .cpos{color:rgba(255,255,255,.85);} .car .cpos b{color:#fff;} .car .cnext{text-decoration-color:rgba(255,255,255,.4);}
  .car .cnx{display:none;}
}
/* kolumna marki za wąska na licznik obok strzałek: same strzałki */
@container car (max-width:599.98px){
  .car .cpos{display:none;}
}

/* ---------- NAGŁÓWEK: pole szukania vs ikony (zrzuty 513, 514) ----------
   Siatka nagłówka: logo | szukaj (1fr) | ikony. Przy 861–930 px z pełnym koszykiem („€34.24 · 2”) kolumna szukania miała
   < 120 px, pole kurczyło się do minimum (~55 px, „Tytu”), a przycisk „SZUKAJ” wychodził z kolumny pod ikonę waluty.
   Kolejność ustępstw (od najmniej widocznego): podpis pod logo znika (jak ≤ 860 px), mniejszy odstęp kolumn, przycisk
   tylko z lupą (jak na telefonie; nazwa zostaje dla czytników — span ukryty wizualnie, nie display:none). Form i pole
   mogą zejść do zera (min-width:0), więc NIC nie wystaje z kolumny także na szerokościach, których nie mierzyliśmy. */
.search,.search .fld{min-width:0;}
@media (min-width:861px) and (max-width:1180px){
  .hdr .logo .tag{display:none;}
  .hdr .wrap{column-gap:20px;}
}
@media (min-width:861px) and (max-width:1100px){
  .hdr .search .btn,.sticky .search .btn{padding:0 16px;}
  .hdr .search .btn span,.sticky .search .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .hdr .search .btn .ico,.sticky .search .btn .ico{margin:0;}
}
/* pasek przyklejony: przycisk „Szukaj” to goły tekst (bez ikony), więc tu ustępuje „Kategorie” — sam hamburger, nazwa
   zostaje w aria-label przycisku (ten sam zabieg co .has-bnav .sticky w pkieu-bnav.css). 861 px: pole 85 → ~200 px. */
@media (min-width:861px) and (max-width:1100px){
  .sticky .katbtn .kt,.sticky .katbtn .car-d{display:none;}
  .sticky .katbtn{padding:0 14px;}
}

/* ---------- STRONA GŁÓWNA NA TABLECIE I TELEFONIE (zrzuty 514, 516, 517, 518, 520) ----------
   (1) Tablet 600–860 px: baner i Poradniki OBOK SIEBIE jak na desktopie (Szymon: „ułożenie banerów obok siebie na tabletach”)
       — Poradniki 1/3 z lewej, baner 2/3 (kompaktowy, wyżej); paski „Szybka wysyłka / Niskie ceny” pod spodem na całą szerokość.
       Telefon < 600 px: jeden pod drugim, oba kompaktowe. */
@media (min-width:600px) and (max-width:860px){
  .hero:not(.no-side){grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"offer car";grid-template-rows:auto;}
}
/* (2) Rząd Bestsellery | Oferta tygodnia: do 1100 px kolumna Bestsellerów miała ~480 px (1,5 karty, ucięte zakładki — zrzut 518:
       „żeby bestsellery też tak się zmniejszały jak polecane”). Do 1100 px jedno pod drugim jak na telefonie (Oferta nad
       sekcją) — karty Bestsellerów mają wtedy szerokość kart Polecanych. */
@media (min-width:861px) and (max-width:1100px){
  .bs-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"offer" "bs";}
}
/* (3) Mini-hero (Poradniki, Oferta tygodnia) w pełnej szerokości (telefon, Oferta nad Bestsellerami do 1100 px): zamiast
       ilustracji 320 px na środku pustego kafla — pozioma karta ≤ ~200 px: tekst po lewej, mała ilustracja po prawej stoi
       na czerwonym pasku marki (ten sam „styk” co w pionie), podpis na pasku nie wchodzi pod ilustrację. */
@media (max-width:860px){
  .mhero:not(.mh-nl){--mh-art-w:120px;display:grid;grid-template-columns:minmax(0,1fr) var(--mh-art-w);grid-template-rows:auto auto;}
  .mhero:not(.mh-nl) .mh-top{grid-column:1;grid-row:1;padding-bottom:var(--sp-4);}
  .mhero:not(.mh-nl) .mh-art{grid-column:2;grid-row:1 / 3;align-self:end;margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;}
  .mhero:not(.mh-nl) .mh-art img{width:100%;max-width:none;height:130px;margin:0;object-position:50% 100%;}
  .mhero:not(.mh-nl) .mh-band{grid-column:1 / -1;grid-row:2;align-self:end;padding:var(--sp-3) calc(var(--mh-art-w) + var(--sp-3)) var(--sp-3) var(--sp-4);}
}
@media (min-width:861px) and (max-width:1100px){
  .bs-row > .mhero{--mh-art-w:150px;display:grid;grid-template-columns:minmax(0,1fr) var(--mh-art-w);grid-template-rows:auto auto;}
  .bs-row > .mhero .mh-top{grid-column:1;grid-row:1;padding-bottom:var(--sp-4);}
  .bs-row > .mhero .mh-s{max-width:none;}
  .bs-row > .mhero .mh-art{grid-column:2;grid-row:1 / 3;align-self:end;flex:none;min-height:0;margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;}
  .bs-row > .mhero .mh-art img{position:static;display:block;width:100%;height:150px;margin:0;}
  .bs-row > .mhero .mh-band{grid-column:1 / -1;grid-row:2;align-self:end;padding:var(--sp-3) calc(var(--mh-art-w) + var(--sp-3)) var(--sp-3) 22px;}
}
/* (4) Poradniki w kolumnie obok kompaktowego banera (tablet 600–860 px): pion jak na desktopie, kafel nie wyższy od banera.
       Zrzut 528: ilustracja ma wypełnić wolne pole (była mała na środku, z pustym miejscem po bokach) — pole ilustracji
       sięga od tytułu do dołu kafla, rysunek dosunięty w lewo i wchodzi na pasek głębiej; podtytuł (te same tytuły co na
       pasku) schowany — w wąskiej kolumnie wysokość jest jedynym zapasem na większy rysunek.
       align-self wraca do stretch (blok (3) ustawia „end” dla siatki — w kolumnie flex przesuwał pasek w prawo). */
@media (min-width:600px) and (max-width:1100px){  /* do 1100 px: bez pasków s1/s2 kafel Poradników sam wyznacza wysokość rzędu banera (861–1100 urósł do 430 px) */
  .hero > .mhero:not(.mh-nl){display:flex;flex-direction:column;}
  .hero > .mhero:not(.mh-nl) .mh-top{align-self:stretch;padding:var(--sp-4) var(--sp-4) var(--sp-1);}
  .hero > .mhero:not(.mh-nl) .mh-s{display:none;}
  .hero > .mhero:not(.mh-nl) .mh-art{flex:1 1 auto;align-self:stretch;min-height:140px;margin-bottom:-76px;padding:0;position:relative;}
  .hero > .mhero:not(.mh-nl) .mh-art img{position:absolute;inset:0 auto 0 6px;width:calc(100% - 12px);height:100%;object-position:30% 100%;}
  .hero > .mhero:not(.mh-nl) .mh-band{align-self:stretch;padding:80px var(--sp-4) var(--sp-3);}
}
/* (5) Z życia księgarni: od 600 px trzy karty w rzędzie jak na desktopie (było: jedna pod drugą od 860 px w dół — każdy
       obrazek na całą szerokość, sekcja na kilka ekranów). Miniatura 16:9 wypełniona bez ucinania grafiki z napisami
       (contain na tle --wash) — obrazki wpisów mają różne proporcje, a „cover” ucinał tekst grafiki (Nike 2026). */
@media (min-width:600px) and (max-width:860px){
  .news-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
}
/* zrzut 563 (desktop ~1360 px): na desktopie zostawał cover (Nike ucięte z lewej, okładka „CZERWIEŃ” u góry) — ten sam sposób
   na WSZYSTKICH szerokościach i na liście /news: pole 16:9, grafika cała (contain) na środku, tło = jej rozmyta kopia */
.nc-thumb img{object-fit:contain;}
/* (5b) zrzut 533: przy contain każdy obrazek miał inny kształt na tle karty (panorama Nike = cienki pasek, okładka = słupek) i
        wyglądało to na różne wyśrodkowanie. Pole 16:9 jest wspólne, a puste miejsce wypełnia ta sama grafika rozmyta i
        przyciemniona (druga kopia <img class="nc-bg">, ten sam adres = jedno pobranie) — na każdej szerokości (zrzut 563). */
.nc-thumb .nc-bg{display:block;object-fit:cover;filter:blur(16px) brightness(.72) saturate(1.1);transform:scale(1.2);}
/* (6) Kafel newslettera (zrzut 522: „Nowości, bestsellery i niskie ceny”): pod formularzem ilustracja 4:3 na pełną szerokość
       kafla (do 240 px) + wysoki pasek — kompaktowo jak pozostałe mini-hero: mała ilustracja na pasku, niższy pasek. */
@media (max-width:860px){
  .mhero.mh-nl .mh-art img{width:min(100% - 2 * var(--sp-4),140px);}
  .mhero.mh-nl .mh-art{margin-bottom:-48px;}
  .mhero.mh-nl .mh-band{padding:56px var(--sp-4) var(--sp-3);}
}
/* (7) Stopka (zrzut 523): od 700 px Zakupy / Pomoc / Informacje prawne w trzech kolumnach (było 2 + trzecia pod spodem);
       opis z logo nad nimi na całą szerokość jak dotąd. Zrzut 534 („dziwnie wycentrowane, dużo miejsca z lewej”): stopka
       stała na krawędzi kart sekcji, a treść kart jest wcięta o ramkę + --card-pad — teraz logo, kolumny, pasek płatności
       i copyright zaczynają się i kończą tam, gdzie treść sekcji nad nimi; kolumny o szerokości treści, rozłożone
       równomiernie (space-between: pierwsza przy lewej, ostatnia przy prawej krawędzi treści). Telefon bez zmian. */
@media (min-width:600px) and (max-width:860px){
  .foot .wrap{padding-left:calc(16px + 1px + var(--sp-4));padding-right:calc(16px + 1px + var(--sp-4));}
}
@media (min-width:700px) and (max-width:860px){
  .foot > .wrap{grid-template-columns:repeat(3,auto);justify-content:space-between;}
}

/* ---------- PASEK MENU (zrzut 530: „nie do końca wygląda, jakby był scrollowalny”) ----------
   ≤ 1180 px pasek przewija się w poziomie. Przewija się .wrap (nie .nav), więc ramka paska zostaje nietknięta przez maskę.
   KATEGORIE przypięte z lewej (sticky, tło paska — linki przejeżdżają pod nim). Wygaszenie krawędzi = maska na przewijanym
   pudełku (nie przesuwa się z treścią): prawa krawędź, gdy dalej są linki; lewa — tuż za KATEGORIE, gdy coś schowało się pod nim.
   Stan z pierwszego malowania z CSS: ≤ 1059 px pasek się nie mieści (zmierzone: od 1060 px mieści się) — prawe wygaszenie od razu;
   pkieu-navscroll.js tylko poprawia klasy krawędzi przy przewijaniu / zmianie szerokości (.nav-more, .nav-mid, .nav-end). */
@media (max-width:1180px){
  .nav{overflow:visible;}
  .nav .wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
    --nav-fr:linear-gradient(to right,#000 calc(100% - 64px),transparent calc(100% - 8px));
    --nav-fl:linear-gradient(to right,#000 var(--kat-w,0px),transparent var(--kat-w,0px),transparent calc(var(--kat-w,0px) + 28px),#000 calc(var(--kat-w,0px) + 72px));}  /* 28 px pełnej przezroczystości za KATEGORIE — resztka „Y” z BESTSELLERY nie prześwituje (zrzut 559) */
  .nav .wrap::-webkit-scrollbar{display:none;}
  /* zrzut 536: aktywna pozycja ma już podkreślenie — narożniki hover ⌜⌟ na niej znikają (dolny ⌟ zlewał się z podkreśleniem
     i zostawał sam pionowy „separator” po prawej) */
  .nav a.on.pki-corners::before,.nav a.on.pki-corners::after{display:none;}
  .nav li.kat{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:6px 0 0 var(--surface),-16px 0 0 var(--surface);}  /* lewy cień = pas wcięcia .wrap (przypięty zostaje przy wcięciu, linki pod nim nie prześwitują) */
  .nav.nav-more .wrap{-webkit-mask-image:var(--nav-fr);mask-image:var(--nav-fr);}
  .nav.nav-mid .wrap{-webkit-mask-image:var(--nav-fl),var(--nav-fr);mask-image:var(--nav-fl),var(--nav-fr);-webkit-mask-composite:source-in;mask-composite:intersect;}
  .nav.nav-mid.nav-end .wrap{-webkit-mask-image:var(--nav-fl);mask-image:var(--nav-fl);}
  .nav.nav-end:not(.nav-mid) .wrap{-webkit-mask-image:none;mask-image:none;}
}
@media (max-width:1059px){
  .nav:not(.nav-fit):not(.nav-end) .wrap{-webkit-mask-image:var(--nav-fr);mask-image:var(--nav-fr);}
  .nav.nav-mid:not(.nav-end) .wrap{-webkit-mask-image:var(--nav-fl),var(--nav-fr);mask-image:var(--nav-fl),var(--nav-fr);-webkit-mask-composite:source-in;mask-composite:intersect;}
}

/* ---------- KAFLE + OFERTA (telefon / tablet ≤ 1100 px, Szymon 6.11, zrzut 531 — wariant „┐”) ----------
   Było: dwa paski „Szybka wysyłka / Niskie ceny” z SPRAWDŹ pod banerem + przewijany rząd 5 kafli (ucięty) + Oferta tygodnia
   w poprzek. Teraz jedna siatka: kafle tworzą odwrócone L (3 u góry, 2 po prawej) wokół karty Oferty tygodnia (okładka + tytuł,
   2/3 × 2 rzędy). Paski łączą się z kaflami (te same linki; kafel dostaje „Sprawdź ›”, wstążka w kolorze jak dziś), więc
   paski i kafel Oferty obok Bestsellerów znikają. Rząd kafli (.hrail.tiles) przestaje być szyną: siatka, bez strzałek.
   Telefon < 600 px: kafle 2 w rzędzie (piąty na całą szerokość), karta Oferty pod nimi. Desktop > 1100 px bez zmian. */
.tiles .offer-card,.tiles .t-cta{display:none;}
@media (max-width:1100px){
  .hero .strip{display:none;}
  .bs-row > .mhero.mh-offer{display:none;}
  .bs-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"bs";}
  /* paski s1/s2 ukryte — ich wiersze NIE mogą zostać w grid-template-areas: puste wiersze (0 px) dokładały dwa odstępy siatki
     i Poradniki→kafle miały 36 px zamiast 12 (zrzut 553, telefon) */
  .hero:not(.no-side){grid-template-rows:auto;}
  .hero.no-side{grid-template-areas:"car";grid-template-rows:auto;}
}
@media (min-width:861px) and (max-width:1100px){
  .hero:not(.no-side){grid-template-areas:"offer car car";}
}
@media (max-width:599.98px){
  .hero:not(.no-side){grid-template-areas:"car" "offer";grid-template-rows:auto auto;}
}
@media (max-width:1100px){
  .hrail-wrap.tiles-rail .arr{display:none;}
  /* zrzut 538: JEDEN odstęp (--gap-block, jak w .hero) między wszystkimi blokami — baner→kafle, kafel↔kafel, kafle→Bestsellery;
     wiersze siatki równe (każdy kafel tej samej wysokości, Oferta = 2 wiersze + odstęp) */
  .home-page .hero ~ .tiles-rail{margin-top:var(--gap-block);}
  .home-page .tiles-rail ~ .bs-row{margin-top:var(--gap-block);}
  .hrail-wrap.tiles-rail > .hrail.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-areas:"t1 t2 t3" "of of t4" "of of t5";gap:var(--gap-block);overflow:visible;margin:0;padding:0;cursor:auto;scroll-snap-type:none;}
  .tiles > :nth-child(1){grid-area:t1;} .tiles > :nth-child(2){grid-area:t2;} .tiles > :nth-child(3){grid-area:t3;}
  .tiles > :nth-child(4){grid-area:t4;} .tiles > :nth-child(5){grid-area:t5;} .tiles > .offer-card{grid-area:of;}
  /* kafel = siatka [wstążka | tekst / „Sprawdź ›” pod tekstem, przy dole kafla] — tekst nie ściska się obok przycisku */
  .tiles .tile{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--sp-3);row-gap:var(--sp-2);align-items:start;}
  .tiles .tile .ros{grid-row:1 / 3;}
  .tiles .tile .tl{grid-column:2;}
  .tiles .t-cta{display:block;grid-column:2;align-self:end;font-family:var(--head);font-weight:700;font-size:var(--fs-2xs);
    letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;color:var(--red);}
  .tiles .t-fast .t-cta{color:var(--green);}
  .tiles .tile:not(.t-fast):not(.t-promo) .t-cta{color:var(--ink);}  /* kafle informacyjne — grafit jak ich wstążka */
  /* karta Oferty: tekst | czerwony panel marki z okładkami (ten sam układ co kompaktowy baner) */
  .tiles .offer-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,40%);min-width:0;overflow:hidden;
    background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);color:var(--body);text-decoration:none;}
  .offer-card .oc-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);}
  .offer-card .mh-t{--pc-gx:9px;--pc-gy:6px;margin:6px 0 8px 9px;font-family:var(--head);font-weight:800;font-size:var(--fs-h1m);line-height:1.1;color:var(--ink);}
  .offer-card .mh-t::before,.offer-card .mh-t::after{opacity:1;transform:none;transition:none;}
  .offer-card .oc-n{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--head);font-weight:700;font-size:var(--fs-base);line-height:1.3;color:var(--ink);}
  .offer-card .oc-a{font-size:var(--fs-sm);color:var(--muted);}
  .offer-card .oc-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-sm);font-style:italic;line-height:1.4;color:var(--muted);}
  .offer-card .oc-more{margin-top:auto;padding-top:var(--sp-2);font-family:var(--head);font-weight:700;font-size:var(--fs-2xs);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--red);}
  .offer-card .oc-art{position:relative;display:block;min-height:200px;overflow:hidden;background:var(--banner-bg);}
  .offer-card .oc-art img{position:absolute;top:50%;left:50%;width:auto;height:min(80%,220px);aspect-ratio:2 / 3;object-fit:cover;box-shadow:-8px 14px 24px rgba(0,0,0,.4);}
  .offer-card .oc-art img:first-child{transform:translate(-30%,-54%) rotate(6deg);}
  .offer-card .oc-art img:last-child{transform:translate(-70%,-48%) rotate(-4deg);}
  @media (hover:hover){.tiles .offer-card:hover{background-color:color-mix(in srgb,var(--card-bg),var(--hov-c) var(--hov-p));}}
  .tiles .offer-card:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
}
@media (max-width:599.98px){
  /* telefon — wariant A (Szymon 6.11, zrzuty 544/554): 4 kafle w 2 kolumnach (wstążka nad tekstem — kafel ~150–180 px szer.,
     inaczej długie słowa wystają), wysokość wiersza z treści (oba kafle w rzędzie równe); piąty (Kurier express) jako NISKI pasek
     na całą szerokość, poziomo [wstążka | tytuł + opis | Sprawdź ›]; Oferta tygodnia pod nimi; odstępy --gap-block */
  .hrail-wrap.tiles-rail > .hrail.tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
    grid-template-areas:"t1 t2" "t3 t4" "t5 t5" "of of";}
  .tiles .tile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;}
  .tiles .tile .ros{grid-row:auto;}
  .tiles .tile .tl,.tiles .t-cta{grid-column:1;}
  .tiles > :nth-child(5){grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;}
  .tiles > :nth-child(5) .ros{grid-row:1;align-self:start;}
  .tiles > :nth-child(5) .tl{grid-column:2;padding-top:0;}
  .tiles > :nth-child(5) .t-cta{grid-column:3;align-self:center;}
  .tiles .offer-card{grid-template-columns:minmax(0,1fr) 128px;}
  .offer-card .oc-art{min-height:170px;}
  .offer-card .oc-art img{height:min(70%,140px);}
  .offer-card .oc-art img:last-child{transform:translate(-62%,-48%) rotate(-4deg);}
}
:root[data-contrast="more"] .tiles .offer-card{border:2px solid var(--hc-fg);}

/* ---------- JEDEN AKCENT CZERWIENI (zrzut 559, jasny motyw: „czemu na przycisku kategorii i bookmarku niskich cen jest różny
   czerwony”) ----------
   Wstążka „Niskie ceny” miała na sztywno #7f1618 (wypełnienie CIEMNEGO motywu) także w jasnym, a pas banera / mini-hero zaczynał
   się od bordo #5d1f1c. Zasada: wypełnienia = --red-fill (przyciski, KATEGORIE, SZUKAJ, plakietki, wstążka akcji), ciemniejszy
   odcień = --red-fill-deep (hover; początek gradientu banera). Ciemny motyw i wysoki kontrast bez zmian — ich definicje mają
   wyższą szczegółowość (:root[data-theme] / :root:not(...) / [data-contrast]) i wygrywają z tymi :root. */
:root{--bm-promo-fill:var(--red-fill);--banner-bg:linear-gradient(120deg,var(--red-fill-deep),var(--red-fill) 60%,#c8433d);}