/* ============================================================
   SLIDER — STRONA GŁÓWNA (PL + EN)

   Dotyczy wyłącznie slidera z klasą "rev-home-slider"
   (Kadence > Slider > Zaawansowane > Dodatkowe klasy CSS).

   Treść, rozmiary tekstu, odstępy, kolory, zdjęcia i wysokość
   ustawia się w edytorze Kadence — osobno dla komputera, tabletu
   i telefonu. Ten plik robi tylko to, czego Kadence nie potrafi:
     1. plakietka "Bestseller" (akapit z klasą "rev-slide-badge"),
     2. odstępy między elementami = "Row Gap" kolumny tekstowej,
     3. kropki zamiast strzałek na telefonie,
     4. szary panel za zdjęciem produktu (slajd z klasą
        "rev-slide-panel", kolumna zdjęcia z klasą "rev-slide-media").

   Poprzednie, rozproszone reguły slidera (Dodatkowy CSS,
   global-rwd.css, kadence-overrides.css) usunięte 2026-09-17.
   Kopia: wp-content/uploads/reventon-backups/2026-09-17-slider/
   ============================================================ */

/* 1. Plakietka "Bestseller" */
.rev-home-slider .rev-slide-badge {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 10px 16px;
    background: #e30613;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-align: left;
}

/* Każdy slajd ma wysokość całego slidera — tło sięga do dołu także w krótszym slajdzie */
.rev-home-slider .splide__slide > .kb-advanced-slide,
.rev-home-slider .splide__slide .kb-advanced-slide-inner-wrap {
    height: 100%;
}

/* 2. Odstępy ustawia "Row Gap" kolumny — globalne marginesy nagłówków Kadence są tu wyłączone */
.rev-home-slider .wp-block-kadence-advancedheading,
.rev-home-slider .wp-block-kadence-advancedheading + .wp-block-kadence-advancedheading {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.rev-home-slider .kb-buttons-wrap {
    margin: 0;
}

/* 3. Komputer i tablet: strzałki, bez kropek */
@media (min-width: 768px) {
    .rev-home-slider .kb-splide .splide__pagination,
    .rev-home-slider .kb-splide ul.splide__pagination.splide__pagination {
        display: none;
    }
}

/* 3. Telefon: kropki pod slajdem, bez strzałek (przesuwanie palcem działa) */
@media (max-width: 767px) {
    .rev-home-slider .kb-splide .splide__arrows,
    .rev-home-slider .kb-splide .splide__arrow {
        display: none;
    }
    .rev-home-slider .kb-splide .splide__pagination,
    .rev-home-slider .kb-splide ul.splide__pagination.splide__pagination {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0 8px;
        margin: 0;
    }

    /* pusta kolumna zdjęcia (slajd ze zdjęciem w tle) nie zajmuje miejsca */
    .rev-home-slider .rev-slide-media:not(:has(img)) {
        display: none;
    }
}

/* 4. Szary panel za zdjęciem produktu.
      Komputer i tablet: panel z gradientu tła slajdu (ustawienia slajdu w Kadence).
      Telefon: kolumny są jedna pod drugą, więc panel staje się szarym pasem za zdjęciem. */
@media (max-width: 767px) {
    .rev-home-slider .rev-slide-panel .kb-advanced-slide-inner-wrap {
        background-image: none !important;
        background-color: #fff !important;
    }
    .rev-home-slider .rev-slide-panel .rev-slide-media {
        background: #cacaca;
        margin: 0 -20px -24px;
        padding: 24px 20px;
    }
}