/**
 * wh_mainmenu_pro — kafelki polecanych produktow w menu.
 *
 * Wszystkie kolory/odstepy przez tokeny brandu (var(--wh-*, fallback)),
 * zeby po nalozeniu branzy menu i produkty wygladaly spojnie.
 */

.wh-mmpro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wh-space-md, 16px);
    /* stretch, NIE flex-start: przy flex-start kazdy kafelek bral wysokosc
       WLASNEJ tresci, wiec produkt z nazwa lamiaca sie na dwa wiersze byl wyzszy
       od sasiada i przyciski "Zobacz" nie staly w jednej linii.
       Zmierzone przez centrobruk na zywym sklepie: wysokosci 242 i 260 px,
       gorne krawedzie CTA 476 i 494 — rozjazd 18 px, czyli dokladnie jeden
       wiersz nazwy. Po zmianie: 256 i 256 px, CTA 490 i 490.
       stretch NIE rozciaga kafelkow na cala wysokosc panelu: ogranicza je
       najwyzszy kafelek w rzedzie, nie kontener (sprawdzone). */
    align-items: stretch;
    padding: var(--wh-space-12, 12px) 0;
}

/* Produkty przypisane do GLEBSZEGO poziomu renderuja sie wewnatrz kolumny tego
   poziomu. Bez tego kafelki scisnelyby sie do szerokosci kolumny (260px) i
   nachodzily na sasiednie — widoczne na zrzucie z 2026-07-24.
   Wypychamy je NA PRAWO od kolumny, w wolne miejsce panelu — tak jak w botland,
   gdzie produkty stoja zawsze za ostatnia kolumna podkategorii. */
.wh-mainmenu__col > .wh-mmpro {
    position: absolute;
    top: 0;
    left: 100%;
    width: max-content;
    max-width: 520px;
    padding: var(--wh-space-12, 12px) var(--wh-space-md, 16px);
}

.wh-mmpro__tile {
    display: flex;
    flex-direction: column;
    gap: var(--wh-space-xs, 4px);
    /* Staly slad kafelka — inaczej dluga nazwa produktu rozpycha kolumne
       i panel menu "skacze" przy najechaniu na kolejne kategorie. */
    width: 150px;
    color: var(--wh-menu-color, var(--wh-color-text-primary, #40362E));
    text-decoration: none;
    /* ⚠️ NIE zostawiaj tu przejscia dziedziczonego z motywu. Hummingbird nadaje
       kazdemu <a> `transition: var(--bs-transition-default)` = `all .2s ease-in-out`,
       a `all` obejmuje `visibility`. Blok produktow kategorii chowany jest przez
       `visibility: hidden` (regula :has() w wh_mainmenu), a `visibility` przy
       przejsciu do `hidden` TRZYMA stan `visible` przez cale trwanie animacji —
       wiec kafelki poziomu wyzszego byly nadal NAMALOWANE, gdy panel podkategorii
       juz sie pojawil. Efekt: nazwy, ceny i przyciski dwoch poziomow jedna na
       drugiej przez ~200 ms przy kazdym przejsciu miedzy podkategoriami.
       Zmierzone na dev (Chrome): bez tej linii kafelek kategorii ma `visible`
       w t=0 i t=80 ms, `hidden` dopiero po ~200 ms; z nia — `hidden` natychmiast.
       Wyliczamy wlasciwosci jawnie zamiast `all`; `transition: none` tez by
       dzialalo, ale zabiloby lagodne przejscie koloru przy najechaniu. */
    transition-property: color, background-color, border-color, box-shadow, transform;
}

.wh-mmpro__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--wh-color-bg-subtle, #f7f5f3);
    border-radius: var(--wh-radius-md, 0);
}

.wh-mmpro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Opakowanie <picture> dla wariantow WebP/AVIF.
   ⚠️ `display: contents` jest tu KONIECZNE, nie kosmetyczne: `.wh-mmpro__img` ma
   `height: 100%`, a procent liczy sie od RODZICA. Gdyby <picture> zostalo zwyklym
   elementem inline (wysokosc `auto`), procent stalby sie nierozwiazywalny, obrazek
   dostalby `height: auto` i kafelek by sie rozjechal. Punktem odniesienia ma pozostac
   `.wh-mmpro__thumb` z `aspect-ratio: 1 / 1`. */
.wh-mmpro__thumb picture {
    display: contents;
}

.wh-mmpro__name {
    font-size: var(--wh-font-size-body, 14px);
    font-weight: var(--wh-font-weight-medium, 500);
    line-height: 1.3;
    /* Maks. 2 linie — tytuly bywaja dlugie, a kafelki maja byc rowne. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wh-mmpro__price {
    font-size: var(--wh-font-size-body, 14px);
    font-weight: var(--wh-font-weight-semibold, 600);
}

.wh-mmpro__cta {
    display: inline-block;
    /* auto, NIE staly odstep: dokleja przycisk do DOLU kafelka, wiec wyrownanie
       wysokosci ze `stretch` wyzej jest widoczne tam, gdzie ma znaczenie —
       przyciski stoja w jednej linii niezaleznie od dlugosci nazwy produktu.
       Odstep nad przyciskiem daje `gap` kafelka (.wh-mmpro__tile), wiec nic
       sie nie sklei. */
    margin-top: auto;
    padding: 8px 14px;
    font-size: var(--wh-font-size-small, 13px);
    font-weight: var(--wh-font-weight-medium, 500);
    text-align: center;
    color: var(--wh-color-text-inverse, #fff);
    background-color: var(--wh-color-primary, #40362E);
    border-radius: var(--wh-radius-md, 0);
    transition: opacity 0.15s;
}

.wh-mmpro__tile:focus-visible .wh-mmpro__cta {
    opacity: 0.85;
}
@media (hover: hover) {
.wh-mmpro__tile:hover .wh-mmpro__cta {
    opacity: 0.85;
}
}

.wh-mmpro__tile:focus-visible {
    outline: 2px solid var(--wh-color-accent, #9e8264);
    outline-offset: 2px;
}

/* Produkty sa tylko na desktopie — na mobile menu to lista hierarchiczna
   (drill-down), a kafelki zjadlyby cala wysokosc panelu. */
@media (max-width: 991px) {
    .wh-mmpro {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARTY PRODUKTÓW — układ mega wh_mainmenu >= 1.18.0 (`.wh-mmpro--cards`)

   Działa WYŁĄCZNIE pod `.wh-mmpro--cards`, które PHP drukuje tylko, gdy rdzeń ma
   ustawienie „Układ rozwijanego menu = mega”. Kafelki z przyciskiem „Zobacz”
   (wyżej) zostają bez zmian dla pozostałych sklepów.

   MIEJSCE: karty stoją w prawym slocie panelu (`.wh-mainmenu__submenu-right`),
   który w układzie mega jest KONTENEREM zapytań o nazwie `wh-mm-right`. Karta ma
   szerokość od --wh-mmpro-card-min do --wh-mmpro-card-max; gdy slot jest za wąski
   na kolejną kartę w minimalnej szerokości, ta karta znika (display:none — nie
   zostaje też pułapka klawiatury). Gdy nie mieści się żadna, znika blok razem
   z nagłówkiem: kolumny tekstowe mają pierwszeństwo.
   ⚠️ Progi w @container są w rem, bo var() nie działa w warunku zapytania.
   Wzór: n * 15rem + (n-1) * 1.6rem  ->  15 / 31.6 / 48.2 / 64.8 / 81.4 (n = 1…5).
   Zmieniasz --wh-mmpro-card-min albo odstęp -> przelicz progi niżej.
   ═══════════════════════════════════════════════════════════════════════════ */
.wh-mmpro--cards {
    display: block;
    padding: 0;
}

.wh-mmpro--cards .wh-mmpro__heading {
    margin: 0 0 var(--wh-space-md, 16px);
    font-size: var(--wh-font-size-small, 12px);
    font-weight: var(--wh-font-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wh-color-text-primary, #23272f);
}

.wh-mmpro--cards .wh-mmpro__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--wh-space-md, 16px);
}

.wh-mmpro--cards .wh-mmpro__card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--wh-space-sm, 8px);
    min-width: var(--wh-mmpro-card-min, 15rem);
    max-width: var(--wh-mmpro-card-max, 22rem);
    padding: var(--wh-space-md, 16px);
    background-color: var(--wh-color-bg-base, #fff);
    border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
    border-radius: var(--wh-radius-lg, 12px);
}

/* Szerokość karty to JEDYNA rzecz, która ma się zmieniać — reszta idzie za nią. */
.wh-mmpro--cards .wh-mmpro__tile {
    flex: 1 1 auto;
    align-items: center;
    width: auto;
    text-align: center;
}

.wh-mmpro--cards .wh-mmpro__thumb {
    background: none;
    border-radius: var(--wh-radius-md, 8px);
}

.wh-mmpro--cards .wh-mmpro__img {
    object-fit: contain;
}

.wh-mmpro--cards .wh-mmpro__rating {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    justify-content: center;
    gap: var(--wh-space-xs, 4px);
    font-size: var(--wh-font-size-small, 12px);
    /* ⛔ NIE `--wh-color-text-muted`: w palecie projektu bywa prawie biały (matyja: #DCDADA =
       1,39:1 na białej karcie). Kolor liczymy z tekstu głównego — idzie za marką. */
    color: color-mix(in srgb, var(--wh-color-text-primary, #23272f) 70%, var(--wh-color-bg-elevated, #fff));
}

/* Gwiazdki: pięć gwiazdek z maski SVG, wypełnienie gradientem do --wh-mmpro-rate (0–100 % całej szerokości,
   czyli 4,7 = cztery pełne + 70 % piątej — tak jak na kafelkach listingu). Wcześniejsze znaki ★ z odstępem
   liter zaokrąglały wizualnie 4,7 do pięciu pełnych. */
.wh-mmpro--cards .wh-mmpro__stars {
    --wh-mmpro-star-on: var(--wh-color-star, var(--wh-color-semantic-warning, #f5a623));
    --wh-mmpro-star-off: color-mix(in srgb, var(--wh-color-text-primary, #23272f) 14%, var(--wh-color-bg-elevated, #fff));
    --wh-mmpro-star-size: 1.4rem;
    display: inline-block;
    flex: 0 0 auto;
    width: calc(var(--wh-mmpro-star-size) * 5);
    height: var(--wh-mmpro-star-size);
    background: linear-gradient(
        90deg,
        var(--wh-mmpro-star-on) var(--wh-mmpro-rate, 0%),
        var(--wh-mmpro-star-off) var(--wh-mmpro-rate, 0%)
    );
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 18l-6.4 3.6L7 14.5 1.7 9.5l7.2-.9z'/%3E%3C/svg%3E") 0 0 / var(--wh-mmpro-star-size) var(--wh-mmpro-star-size) repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 18l-6.4 3.6L7 14.5 1.7 9.5l7.2-.9z'/%3E%3C/svg%3E") 0 0 / var(--wh-mmpro-star-size) var(--wh-mmpro-star-size) repeat-x;
}

/* Liczba oceny „4,7” obok gwiazdek (mocniejsza niż liczba opinii „(3)”). */
.wh-mmpro--cards .wh-mmpro__rating-value {
    font-weight: var(--wh-font-weight-bold, 700);
    color: var(--wh-color-text-primary, #23272f);
}

.wh-mmpro--cards .wh-mmpro__rating-n {
    white-space: nowrap;
}

.wh-mmpro--cards .wh-mmpro__name {
    font-size: var(--wh-font-size-small, 14px);
    font-weight: var(--wh-font-weight-bold, 700);
}

.wh-mmpro--cards .wh-mmpro__price {
    font-size: var(--wh-font-size-base, 16px);
    font-weight: var(--wh-font-weight-bold, 700);
    color: var(--wh-color-primary, #23272f);
}

/* „Do koszyka”: przycisk obrysowany, na pełną szerokość karty. */
.wh-mmpro--cards .wh-mmpro__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wh-space-sm, 8px);
    margin-top: var(--wh-space-xs, 4px);
    padding: var(--wh-space-sm, 8px) var(--wh-space-md, 16px);
    font-size: var(--wh-font-size-small, 12px);
    font-weight: var(--wh-font-weight-bold, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wh-color-primary, #23272f);
    background-color: transparent;
    border: 1px solid var(--wh-color-primary, #23272f);
    border-radius: var(--wh-radius-pill, 999px);
    transition: color 0.15s, background-color 0.15s;
}

.wh-mmpro--cards .wh-mmpro__cta:focus-visible,
.wh-mmpro--cards .wh-mmpro__cta--dodano {
    color: var(--wh-color-text-inverse, #fff);
    background-color: var(--wh-color-primary, #23272f);
    opacity: 1;
}
@media (hover: hover) {
.wh-mmpro--cards .wh-mmpro__cta:hover {
    color: var(--wh-color-text-inverse, #fff);
    background-color: var(--wh-color-primary, #23272f);
    opacity: 1;
}
}

.wh-mmpro--cards .wh-mmpro__cta[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
}

.wh-mmpro--cards .wh-mmpro__cta-ico {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>") center / contain no-repeat;
}

/* Ile kart mieści się w slocie — kolejne znikają, zamiast się kurczyć w nieskończoność.
   Próg „szerokość < potrzeba(n)” zostawia n − 1 kart, więc chowamy od n-tej:
     < 81.4rem (5 kart nie wchodzi) -> max 4 karty -> chowamy nth-child(n + 5)
     < 64.8rem                      -> max 3        -> n + 4
     < 48.2rem                      -> max 2        -> n + 3
     < 31.6rem                      -> max 1        -> n + 2
     < 15rem                        -> zero         -> cały blok
   ⛔ Pierwsza wersja chowała od karty o jedną dalej (przy 48.19rem zostawiała 3 karty,
   a mieszczą się 2) — karty wystawały poza slot. Granice w @container są w rem po
   „max-width: potrzeba − 0.01rem”, bo zapytanie jest domknięte. */
@container wh-mm-right (max-width: 81.39rem) { .wh-mmpro--cards .wh-mmpro__card:nth-child(n + 5) { display: none; } }
@container wh-mm-right (max-width: 64.79rem) { .wh-mmpro--cards .wh-mmpro__card:nth-child(n + 4) { display: none; } }
@container wh-mm-right (max-width: 48.19rem) { .wh-mmpro--cards .wh-mmpro__card:nth-child(n + 3) { display: none; } }
@container wh-mm-right (max-width: 31.59rem) { .wh-mmpro--cards .wh-mmpro__card:nth-child(n + 2) { display: none; } }
@container wh-mm-right (max-width: 14.99rem) { .wh-mmpro--cards { display: none; } }

/* Komunikat błędu po nieudanym „Do koszyka” (np. brak towaru w żądanej ilości). */
.wh-mmpro--cards .wh-mmpro__komunikat {
    display: block;
    margin-top: var(--wh-space-xs, 4px);
    font-size: var(--wh-font-size-small, 12px);
    line-height: 1.3;
    text-align: center;
    color: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 70%, #000);
}

/* Poniżej 1280 px karty znikają w całości (jak kafelki w menu matyi) — panel ma
   wtedy miejsce tylko na kolumny tekstowe. Menu mobilne (do 991 px) i tak ich nie ma. */
@media (max-width: 1279.98px) {
    .wh-mmpro--cards { display: none; }
}