/**
 * Karuzela produktów (Slick) — dodaj klasę `produkty-karuzela` do bloku Query Loop.
 * Strzałki: nasze SVG, 16px od slajdów. Odstęp między slajdami: 16px.
 */

/* miejsce na strzałki po bokach (slajder zwężony, strzałki w tym marginesie) */
@media (min-width: 769px) {
    .produkty-karuzela {
        box-sizing: border-box;
        padding-left: 56px;
        padding-right: 56px;
    }
}

/* 16px odstępu między slajdami (8px na stronę wewnątrz slajdu — bez psucia szerokości slick) */
.produkty-karuzela .slick-slide {
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    height: auto;              /* równa wysokość kart */
}
.produkty-karuzela .slick-track { display: flex; }   /* równe wysokości kart */

/* strzałki — nasze SVG */
.produkty-karuzela .slick-prev,
.produkty-karuzela .slick-next {
    width: 40px;
    height: 40px;
    z-index: 5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.produkty-karuzela .slick-prev::before,
.produkty-karuzela .slick-next::before { content: none; }   /* usuń domyślną ikonę slick */

.produkty-karuzela .slick-prev {
    background-image: url("/wp-content/themes/lemmony/jt/assets/icons/nowa_strona_glowna/left-arrow.svg");
}
.produkty-karuzela .slick-next {
    background-image: url("/wp-content/themes/lemmony/jt/assets/icons/nowa_strona_glowna/right-arrow.svg");
}
/* pozycja poza slajdami — wyższa specyficzność + !important, bo slick/inna reguła nadpisuje left/right */
.produkty-karuzela .slick-slider .slick-prev { left: -56px !important; right: auto !important; }  /* 40 + 16 -> 16px od slajdu */
.produkty-karuzela .slick-slider .slick-next { right: -56px !important; left: auto !important; }
.produkty-karuzela .slick-prev:hover {
    background-image: url("/wp-content/themes/lemmony/jt/assets/icons/nowa_strona_glowna/left-arrow-hover.svg");
}
.produkty-karuzela .slick-next:hover {
    background-image: url("/wp-content/themes/lemmony/jt/assets/icons/nowa_strona_glowna/right-arrow-hover.svg");
}

/* ── Kafel „Typ produktu": kolor tła zależny od typu posta ──
   Klasy dokłada filtr render_block (produkt-typ + produkt-typ--<post_type>).
   Kolory do edycji wg brandu. */
.produkt-typ {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}
.produkt-typ.has-text-color,
.produkt-typ a { color: #fff !important; }

.produkt-typ--otc              { background-color: #2750E1 !important; } /* Lek bez recepty */
.produkt-typ--rx               { background-color: #E23B3B !important; } /* Lek na receptę */
.produkt-typ--suplement        { background-color: #1AAD64 !important; } /* Suplement diety */
.produkt-typ--wyrob-medyczny   { background-color: #E58200 !important; } /* Wyrób medyczny */
.produkt-typ--srodki_spozywcze { background-color: #C2338E !important; } /* Środek spożywczy */
.produkt-typ--dermokosmetyki   { background-color: #7A3FF2 !important; } /* Dermokosmetyk */
.produkt-typ--inn              { background-color: #0097A7 !important; } /* Substancja czynna */