/* ============================
   GŁÓWNY WRAPPER SLIDERA
   ============================ */
.lfs-product-slider-wrapper {
    position: relative;
    margin: 40px 0;
    max-width: 100%;
    overflow: hidden; /* nic nie wystaje poza sekcję */
}

/* ============================
   STRZAŁKI NAWIGACJI
   ============================ */

/* domyślnie ukryte */
.lfs-product-slider-wrapper .lfs-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: none;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    padding: 0;

    color: #c2272d;      /* STRZAŁKA ZAWSZE CZERWONA */
    opacity: 0;          /* niewidoczne */
    pointer-events: none; /* i nieklikalne */
    transition: opacity .25s ease;
}

/* POKAZUJEMY strzałki:
   - gdy hover jest na całym sliderze
   - LUB gdy hover jest na samej strzałce
*/
.lfs-product-slider-wrapper:hover .lfs-slider-nav,
.lfs-product-slider-wrapper .lfs-slider-nav:hover {
    opacity: 1;
    pointer-events: auto;
}

/* na hover NIE zmieniamy koloru – tylko lekki cień */
.lfs-product-slider-wrapper .lfs-slider-nav:hover {
    box-shadow: 0 0 14px rgba(0,0,0,0.25);
    color: #c2272d; /* dalej czerwony */
}

/* również na focus/active kolor bez zmian i zero udziwnień */
.lfs-product-slider-wrapper .lfs-slider-nav:focus,
.lfs-product-slider-wrapper .lfs-slider-nav:active {
    outline: none;
    background: #ffffff;
    color: #c2272d;
}

/* lewo / prawo */
.lfs-product-slider-wrapper .lfs-slider-prev {
    left: 0;
}

.lfs-product-slider-wrapper .lfs-slider-next {
    right: 0;
}

/* ============================
   KONTENER Z PRODUKTAMI
   ============================ */

/* przewijamy tylko wewnątrz tego diva */
.lfs-product-slider-wrapper .lfs-product-slider {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Chrome/Safari – chowamy pasek */
.lfs-product-slider-wrapper .lfs-product-slider::-webkit-scrollbar {
    display: none;
}

/* ============================
   RZĄD PRODUKTÓW (UL.PRODUCTS)
   ============================ */

.lfs-product-slider-wrapper .lfs-products-row {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0 0 2.992em;
    padding: 0;
    scroll-behavior: smooth;
}

/* pojedynczy produkt – 4 w rzędzie na desktopie */
.lfs-product-slider-wrapper .lfs-products-row li.product {
    flex: 0 0 25%;           /* 4 w rzędzie */
    box-sizing: border-box;
    float: none !important;  /* kasujemy floaty z motywu */
    width: auto !important;
    margin: 0;
    padding: 0 1em 0 0;      /* odstęp między kafelkami */
}

/* obrazek produktu – pełna szerokość kafelka */
.lfs-product-slider-wrapper .lfs-products-row li.product a.woocommerce-LoopProduct-link img {
    display: block;
    width: 100%;
    height: auto;
}


.lfs-product-slider-wrapper .lfs-slider-prev {
    left: 10px;   /* było 0 */
}

.lfs-product-slider-wrapper .lfs-slider-next {
    right: 10px;  /* było 0 */
}


/* ============================
   MOBILE – 2 PRODUKTY W RZĘDZIE
   ============================ */
@media (max-width: 768px) {
    .lfs-product-slider-wrapper .lfs-products-row li.product {
        flex: 0 0 50%;
        padding-right: 0.75em;
    }
}