/**
 * SEMTAK Podobne produkty: przewijany rząd kafelków pod kartą produktu.
 *
 * Wygląd kafelków i strzałek przeniesiony z SEMTAK Komplety (blok „Skompletuj zestaw”), żeby sekcje pod kartą
 * wyglądały spójnie: obramowanie 1 px, promień 8 px, zdjęcie 4:3 bez przycinania, okrągłe strzałki 34 px
 * na środku wysokości toru. Kolory dziedziczą po motywie: tekst = currentColor, linie i tła = currentColor
 * z przezroczystością, akcent = kolor główny motywu z theme.json. Bez własnej palety.
 *
 * Układ: kontener mierzy własną szerokość (container queries). Telefon: 2 kafelki i fragment trzeciego,
 * od 560 px 3, od 760 px 4, od 1080 px 5. Zawsze jeden rząd przewijany w poziomie (scroll-snap).
 * Strzałki pokazuje skrypt tylko wtedy, gdy coś jest poza ekranem; bez skryptu zostaje zwykły pasek przewijania.
 *
 * @package SemtakPodobne
 */

.spp-sekcja {
    --spp-akcent: var(--wp--preset--color--theme-color, var(--wp--preset--color--primary, currentColor));
    --spp-linia: color-mix(in srgb, currentColor 14%, transparent);
    --spp-linia-mocna: color-mix(in srgb, currentColor 28%, transparent);
    --spp-wyciszony: color-mix(in srgb, currentColor 72%, transparent);
    --spp-tlo-pola: color-mix(in srgb, currentColor 4%, transparent);
    --spp-promien: 8px;
    --spp-przerwa: 16px;
    --spp-czas: 180ms;
    --spp-widoczne: 2.2;

    container: spp / inline-size;
    box-sizing: border-box;
    clear: both;
    width: 100%;
    margin: 48px 0 8px;
    text-align: left;
}

.spp-sekcja *,
.spp-sekcja *::before,
.spp-sekcja *::after {
    box-sizing: border-box;
}

.spp-sekcja > h2 {
    margin: 0 0 20px;
}

.spp-tor {
    position: relative;
}

.spp-sekcja .spp-tor .spp-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--spp-widoczne) - 1) * var(--spp-przerwa)) / var(--spp-widoczne));
    gap: var(--spp-przerwa);
    margin: 0 -12px;
    padding: 2px 12px 6px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
}

/* Sekcja ma klasy „related products” (styl nagłówka z motywu), więc WooCommerce dokłada liście clearfix
   (.woocommerce .products ul::before/::after). W siatce byłyby to puste kolumny: wyłączamy je. */
.spp-sekcja .spp-tor .spp-lista::before,
.spp-sekcja .spp-tor .spp-lista::after {
    content: none;
    display: none;
}

/* Ze skryptem pasek przewijania znika, bo są strzałki (bez skryptu zostaje). */
.spp-sekcja.spp-js .spp-tor .spp-lista {
    scrollbar-width: none;
}

.spp-sekcja.spp-js .spp-tor .spp-lista::-webkit-scrollbar {
    display: none;
}

.spp-kafel {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--spp-linia);
    border-radius: var(--spp-promien);
    background: transparent;
    scroll-snap-align: start;
    transition: border-color var(--spp-czas) ease;
}

.spp-kafel::marker {
    content: none;
}

.spp-kafel:hover {
    border-color: var(--spp-linia-mocna);
}

/* Obwódka fokusu do środka: na torze przewijanym obwódka na zewnątrz byłaby ucięta. */
.spp-kafel:has(.spp-nazwa:focus-visible) {
    outline: 2px solid var(--spp-akcent);
    outline-offset: -1px;
}

.spp-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: calc(var(--spp-promien) - 3px);
    background: var(--spp-tlo-pola);
}

.spp-media img,
.spp-media picture,
.spp-media .spp-obraz {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
}

.spp-tresc {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.spp-sekcja .spp-nazwa {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

/* Cały kafelek jest klikalny: obszar linku nazwy rozciągnięty na kafelek (jeden link na produkt). */
.spp-sekcja .spp-nazwa::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--spp-promien);
}

.spp-sekcja .spp-nazwa:focus-visible {
    outline: none;
}

.spp-sekcja .spp-kafel:hover .spp-nazwa,
.spp-sekcja .spp-nazwa:focus-visible {
    color: var(--spp-akcent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.spp-sekcja .spp-cena {
    margin: auto 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.spp-sekcja .spp-cena del {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--spp-wyciszony);
    opacity: 1;
}

.spp-sekcja .spp-cena ins {
    text-decoration: none;
    background: none;
}

.spp-sekcja .spp-cena .woocommerce-price-suffix {
    display: inline;
    margin: 0 0 0 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--spp-wyciszony);
}

/* Informacje Omnibus i inne dopiski do ceny: mniejsze, ale czytelne */
.spp-sekcja .spp-cena small:not(.woocommerce-price-suffix),
.spp-sekcja .spp-cena [class*="omnibus"] {
    display: block;
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--spp-wyciszony);
}

/* ---------- Strzałki ---------- */
.spp-ikona {
    width: 18px;
    height: 18px;
    flex: none;
}

.spp-sekcja .spp-strzalka {
    display: none;
}

.spp-sekcja .spp-tor.is-przewijany .spp-strzalka {
    position: absolute;
    /* Środek wysokości toru (całych kafelków), jak w kompletach. */
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-width: 0;
    min-height: 0;
    margin: -17px 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--spp-linia-mocna);
    border-radius: 50%;
    background: Canvas;
    color: CanvasText;
    font-size: 0;
    line-height: 1;
    box-shadow: 0 2px 6px color-mix(in srgb, CanvasText 14%, transparent);
    cursor: pointer;
    transition: opacity var(--spp-czas) ease, border-color var(--spp-czas) ease, transform 80ms ease;
}

.spp-sekcja .spp-tor.is-przewijany .spp-strzalka:hover {
    border-color: var(--spp-akcent);
    background: Canvas;
    color: CanvasText;
}

.spp-sekcja .spp-strzalka--wstecz {
    left: -6px;
}

.spp-sekcja .spp-strzalka--dalej {
    right: -6px;
}

.spp-sekcja .spp-strzalka:not(:disabled):active {
    transform: scale(0.94);
}

/* Telefon: nieaktywna strzałka znika, żeby nie zasłaniała nazwy pierwszego kafelka (od 560 px półprzezroczysta). */
.spp-sekcja .spp-tor.is-przewijany .spp-strzalka:disabled {
    visibility: hidden;
    opacity: 0;
    box-shadow: none;
    cursor: default;
}

.spp-sekcja .spp-strzalka:focus-visible {
    outline: 2px solid var(--spp-akcent);
    outline-offset: 2px;
}

/* Strzałka większa na dotyk (obszar 44 px), wygląd bez zmian. */
.spp-sekcja .spp-strzalka::before {
    content: "";
    position: absolute;
    inset: -5px;
}

@container spp (min-width: 560px) {
    .spp-sekcja .spp-tor .spp-lista {
        --spp-widoczne: 3;
    }

    .spp-sekcja .spp-strzalka--wstecz {
        left: -14px;
    }

    .spp-sekcja .spp-strzalka--dalej {
        right: -14px;
    }

    .spp-sekcja .spp-tor.is-przewijany .spp-strzalka:disabled {
        visibility: visible;
        opacity: 0.35;
    }
}

@container spp (min-width: 760px) {
    .spp-sekcja .spp-tor .spp-lista {
        --spp-widoczne: 4;
    }
}

@container spp (min-width: 1080px) {
    .spp-sekcja .spp-tor .spp-lista {
        --spp-widoczne: 5;
    }
}

/* Ruch tylko funkcjonalny: płynne przewinięcie po kliknięciu strzałki. */
@media (prefers-reduced-motion: no-preference) {
    .spp-sekcja .spp-tor .spp-lista {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spp-sekcja *,
    .spp-sekcja *::before,
    .spp-sekcja *::after {
        transition: none !important;
        animation: none !important;
    }
}