/* Style strony: strona główna (`sklep/glowna.blade.php`) — ładowane TYLKO tam (osobny plik, nie sklep.css: nie obciąża pozostałych stron). Wersja w adresie = hash treści
   (`App\Services\Sklep\Zasoby`), długi cache w public/.htaccess. Plik statyczny: bez składni Blade; wartości dynamiczne zostają inline w widoku. */
.karty-polecane{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--krawedz);
    border-radius:14px;overflow:hidden;margin-top:1.5rem}
.karta-pol{background:#fff;padding:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.karta-pol .marka{font-size:.7rem;letter-spacing:.8px;color:var(--mut);text-transform:uppercase}
.karta-pol .foto{height:130px;display:flex;align-items:center;justify-content:center;color:#b6bac6}
.karta-pol .foto img{max-height:130px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.karta-pol .chip{align-self:flex-start}
.karta-pol .nazwa{font-size:.9rem;font-weight:700;line-height:1.3}
.karta-pol .nazwa a{color:inherit;text-decoration:none}
.karta-pol .nazwa a:hover{text-decoration:underline}
.karta-pol .pasuje{font-size:.88rem;font-weight:600}
.karta-pol .pasuje b{color:var(--ziel-tlo)}
.karta-pol .dol{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    margin-top:auto;padding-top:.5rem;flex-wrap:wrap}
.karta-pol .cena{font-weight:800;font-size:1.12rem;font-variant-numeric:tabular-nums}
@media(max-width:900px){ .karty-polecane{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .karty-polecane{grid-template-columns:1fr} }

/* HERO wg makiety 24.08. Proporcje rzędu liczone w procentach jego szerokości,
żeby trzymały się na każdej szerokości kolumny: rysunki 27,5%, przerwa 3,5%,
kolumna szukania resztę. Wysokość pigułki = 1/12,1 szerokości kolumny, czyli
54px przy kolumnie 60rem — tyle co w makiecie po przeskalowaniu. */
/* Display „znajdź FILTR" siedział na 100% kolumny (60rem), więc każde
powiększenie to wyjście poza nią. 110% + `margin-left:-5%` trzyma go
wyśrodkowanym: nadmiar 10% rozkłada się po połowie na każdą stronę.
Poniżej 68rem viewportu ten nadmiar nie ma już gdzie się zmieścić obok
kolumny i robiłby poziomy scroll — tam wracamy do 100%. */
/* Przekrój w granatowym paśmie, obrócony o 90 stopni w lewo. `transform` NIE
zmienia pudełka w układzie: po obrocie rysunek zajmuje wizualnie 386x327, a
przeglądarka wciąż rezerwuje 327x386 i rysunek wychodziłby poza kolumnę siatki.
Dlatego wymiary trzyma opakowanie — z zamienionymi bokami. */
.przekroj-obrocony{width:386px;height:327px;display:flex;align-items:center;justify-content:center}
.przekroj-obrocony img{height:386px;width:auto;display:block;transform:rotate(-90deg)}
@media(max-width:700px){
    /* Pasmo schodzi do jednej kolumny — 386px nie zmieściłoby się na telefonie. */
    .przekroj-obrocony{width:100%;height:220px}
    .przekroj-obrocony img{height:260px}
}
.hero-display{display:block;width:110%;max-width:none;height:auto;margin:0 0 0 -5%}
@media(max-width:68rem){ .hero-display{width:100%;margin:0} }
.hero-rzad{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
/* Rysunki: `flex:0 0 auto` — box przylega do treści zamiast rezerwować sobie
procent rzędu. Rozmiar nadaje WYSOKOŚĆ, szerokość wynika z proporcji SVG 220x260.
Procent w `width` był tu niemożliwy: liczyłby się od szerokości boksu, która sama
zależałaby od obrazków — błędne koło. */
.hero-rysunki{flex:0 0 auto;display:flex;gap:0;align-items:center}
.hero-rysunki img{height:14rem;width:auto;display:block}
/* Pole zgarnia CAŁĄ resztę rzędu: basis 0 + grow 1. */
.hero-szukanie{flex:1 1 0;min-width:0;padding: 20px 15px 0 0;box-sizing:border-box}
/* Pigułka: `overflow:hidden` na formularzu robi zaokrąglenie prawej strony
przycisku, więc sam przycisk ma radius 0 i styka się z polem bez szpary. */
.pole-hero{display:flex;align-items:stretch;background:#EDEDEE;
        border-radius:18px;overflow:hidden;min-height:3.375rem}
.pole-hero:focus-within{outline:3px solid var(--ziel);outline-offset:2px}
.pole-hero input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
        font-size:1rem;color:var(--atrament);padding:1.1rem 1.75rem}
.pole-hero input::placeholder{color:var(--mut);opacity:1}
.pole-hero button{flex:0 0 22.9%;background:var(--ziel-tlo);color:#fff;border:0;border-radius:0;
        font:inherit;font-size:1rem;font-weight:700;cursor:pointer;padding:0 .75rem}
.pole-hero button:hover{background:var(--ziel-tlo-g)}
/* Telefon: JAWNA kolumna, nie zawijanie. `flex-wrap:wrap` było tu martwe —
`.hero-szukanie` ma `flex-basis:0` i `min-width:0`, więc jego rozmiar bazowy to
zero, linia nigdy się nie przepełnia i rząd nigdy się nie łamie. Efekt: na
telefonie rysunki i pole zostawały obok siebie, oba ściśnięte.
Przy `flex-direction:column` główna oś jest pionowa, więc `flex:1 1 0` na polu
musi wrócić do `0 0 auto` — inaczej pole rozciągałoby się na wysokość. */
@media(max-width:56rem){
    .hero-rzad{flex-direction:column;align-items:stretch;gap:1.5rem}
    /* `order:-1` wsuwa pole tuż pod display „znajdź FILTR", który ma
    `margin-bottom:0` — stąd własny odstęp od góry. */
    .hero-szukanie{order:-1;flex:0 0 auto;width:100%;padding:0;margin-top:1.75rem}
    .hero-rysunki{align-self:center;flex:0 0 auto}
    .hero-rysunki img{width:auto;height:156px}   /* 130px + 20% */
    .pole-hero input{padding:0 1.2rem}
    /* Przy wąskim ekranie 22,9% to ~78px — za mało na komfortowy cel dotykowy,
    więc przycisk dostaje szerokość z treści. */
    .pole-hero button{flex:0 0 auto;padding:0 1.4rem}
}
@media(max-width:420px){
    .pole-hero{max-width:100%;min-width:0}
    .pole-hero input{width:0;padding:0 .7rem}
    .pole-hero button{padding:0 .7rem}
}