@import 'main.css';
 .custom-single-product-container {
    width: 80%;
    margin: 0 auto;
}

/* Grid dla zdjęć i opisu */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* dwie kolumny równe */
    gap: 30px;
}

/* Slider zdjęć
.product-images img {
    width: 40%;
    border-radius: 8px;
} */

/* Szczegóły produktu */
.product-details h1 {
    font-size: 2em;
    margin-bottom: 15px;
}

.product-details .price {
    color: var(--main-color-hover);
    font-size: 1.5em;
    margin-bottom: 15px;
}

.product-details .single_add_to_cart_button {
    background-color: #0073aa;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 20px;
}



.product-tabs {
    margin-top: 30px;
}

.tabs-nav {
    display: flex;
    border-bottom: 2px solid #eee;
}

.tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    border-bottom-color: #000;
}

.tab-content {
    display: none;
    padding: 20px 0;
}

.tab-content.active {
    display: block;
}

.product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.product-attributes th,
.product-attributes td {
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
    text-align: left;
}


/* Responsywność */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    .custom-single-product-container{
        width:95%;
    }
}


/* Responsywność */
@media (max-width: 550px) {
  /* Główny kontener */
.custom-product-wrapper {
    max-width: 350px !important;  /* dostosuj do szerokości zdjęcia */
}
}



.variation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

.variation-table th,
.variation-table td {
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.variation-table .out-of-stock {
    opacity: 0.5;
}

.variation-qty {
    width: 70px;
}

.add-to-cart-variation {
    padding: 6px 14px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   LUKSUSOWY KONFIGURATOR PRODUKTU - KOLOR PRZEWODNI: #ff4081
   ========================================================================== */

.product-configurator {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    max-width: 600px;
}

/* Etykiety szeryfowe (jak w Twoich nagłówkach) */
.config-label {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    margin-bottom: 12px;
    color: #333;
}

.config-row { margin-bottom: 30px; }

/* 1. KWADRATY ROZMIARÓW */
.size-selector { display: flex; gap: 10px; }

.size-option {
    width: 45px;
    height: 45px;
    border: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: #888;
}

/* AKTYWNY ROZMIAR - TWOJA ZMIANA NA RÓŻOWY */
.size-option.active {
    border-color: var(--main-color-hover) !important;
    color: black !important;
    background-color: rgba(255, 64, 129, 0.05); /* Bardzo delikatne różowe tło */
}

/* NIEDOSTĘPNY ROZMIAR (PRZEKREŚLONY) */
.size-option.out-of-stock {
    position: relative;
    color: #eee !important;
    border-color: #f0f0f0 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.size-option.out-of-stock::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    transform: rotate(-45deg);
}

/* 2. CENA - TWOJA ZMIANA NA RÓŻOWY */
.product-price .price-value {
    font-weight: 700 !important;
    color: var(--main-color-hover) !important; /* Różowa cena ze zdjęcia */
    display: block;
    line-height: 1;
}

/* Stylizacja symbolu waluty i bdi z WooCommerce */
.product-price .price-value bdi, 
.product-price .price-value span {
    color: var(--main-color-hover) !important;
	    font-size: 20px !important;
		margin:20px 0;

}


.product-price .woocommerce-Price-currencySymbol {
    font-size: 20px !important;
	 margin-left: 5px;
    font-weight: 400;
}


/* 3. DOSTĘPNOŚĆ */
.availability-status {
    display: inline;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
}

.status-icon {
    font-size: 20px;
    font-weight: bold;
}

.in-stock .status-icon { color: #5cb85c; } /* Zielony ptaszek dla dostępności */
.out .status-icon { color: var(--main-color-hover); }

/* 4. ILOŚĆ I PRZYCISK (CZARNA PIGUŁKA Z RÓŻOWYM HOVEREM) */
.purchase-row {
    display: flex;
    align-items: flex-end;
    gap: 35px;
}

.qty-input {
    width: 65px;
    height: 48px;
    border-radius: 30px;
    border: 1px solid #d3d3d3;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.3s;
}

.qty-input:focus {
    border-color: #ff4081; /* Różowa ramka przy wpisywaniu */
}



/* ==========================================================================
   SEKCJA 3 OSTATNICH PRODUKTÓW
   ========================================================================== */

.recent-products-section {
    padding: 80px 0;
    border-top: 1px solid #f2f2f2;
    margin-top: 60px;
    clear: both;
}

/* Tytuł sekcji - styl Playfair Display Italic */
.section-title {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 32px !important;
    text-align: center;
    margin-bottom: 50px !important;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Siatka 3 produktów */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1/3); /* 3 równe kolumny */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Karta produktu */
.product-card {
    flex: 1;
    text-align: center;
    transition: transform 0.3s ease;
    max-width: 350px;
	padding:20px
}

.product-card:hover {
    transform: translateY(-5px);
box-shadow: 0 4px 15px black;

}

.product-image-wrapper {
    margin-bottom: 20px;
    background: #f9f9f9;
    overflow: hidden;
}

.product-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
}

/* Nazwa produktu - czysta i nowoczesna */
.product-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #111;
    margin-bottom: 10px;
    text-decoration: none;
}

/* Cena - Twój kolor #ff4081 */
.product-price-recent {
    font-size: 18px;
    color: var(--main-color-hover) !important;
    font-weight: 700;
    margin-bottom: 20px;
}

.product-price-recent bdi, 
.product-price-recent span {
    color: var(--main-color-hover) !important;
}

/* Przycisk - Czarna pigułka z różowym hoverem */
.view-product-btn {
    display: inline-block;
    background: #000;
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 50px; /* Pigułka */
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.view-product-btn:hover {
    background: var(--main-color-hover); /* Różowy akcent */
    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}
.product-name:hover{
	    color: var(--main-color-hover); /* Różowy akcent */

}

.product-link {
    text-decoration: none !important;
}

/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .products-grid {
        flex-direction: column;
        align-items: center;
    }
    .product-card {
        margin-bottom: 40px;
        width: 100%;
    }
}


/* ==========================================================================
   WIDGET PAYU - DOPASOWANY DO TWOJEGO DESIGNU
   ========================================================================== */

.payu-pay-later-widget {
    margin-top: 20px;
    padding: 12px 18px;
    background: #fff;
    border: 1px dashed var(--main-color-hover); /* Przerywana linia w Twoim kolorze */
    border-radius: 12px;
    display: inline-block;
    transition: all 0.3s ease;
}

.payu-pay-later-widget:hover {
    background: #fffafa; /* Delikatny różowy połysk */
    border-style: solid;
}

.payu-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payu-logo {
    height: 20px;
    width: auto;
}

.payu-info-text {
    line-height: 1.2;
}

.payu-main-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.payu-main-text strong {
    color: var(--main-color-hover); /* Twoja różowa akcentacja */
}

.payu-sub-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #999;
}



.gallery-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
}

/* Sticky Header pozostaje bez zmian */
.gallery-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

/* Stylizacja karuzeli */
.slick-gallery-container {
    height: calc(100vh - 80px); /* Wysokość ekranu minus header */
    margin: 0 auto;
}

.slick-gallery-container div {
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.slick-gallery-container img {
    max-height: 80vh;
    max-width: 90%;
    object-fit: contain;
}

/* Dostosowanie strzałek Slicka, aby były widoczne na białym tle */
.slick-prev:before, .slick-next:before {
    color: var(--main-color-hover) !important; /* Twój złoty kolor */
    font-size: 30px;
}

.slick-prev { left: 30px; z-index: 1; }
.slick-next { right: 30px; z-index: 1; }


/* Główny kontener karty produktu */
.styled-product-card {
    position: relative; /* Kluczowe dla pozycjonowania elementów wewnątrz */
    background: #fff;
    border: 1px solid #e5e5e5; /* Cienka szara ramka jak na zdjęciu */
    padding: 20px; /* Odstęp między ramką a zdjęciem */
    max-width: 100%;
    box-sizing: border-box;
}

/* Kontener samego zdjęcia (wewnątrz paddingu) */
.card-image-container {
    position: relative; /* Żeby lupka pozycjonowała się względem zdjęcia, a nie całej karty */
    width: 100%;
    height: auto;
}

.card-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- STYLIZACJA ODZNAKI (BADGE) --- */
.card-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px; /* Szerokie wypełnienie jak na zdjęciu */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    z-index: 10; /* Musi być nad zdjęciem i ramką */
    font-family: 'Montserrat', sans-serif; /* Przykładowy font bezszeryfowy */
}

/* Kolor złoty/beżowy dopasowany do zdjęcia */
.badge-gold {
    background-color: #bc9f72;
}


/* --- STYLIZACJA LUPKI --- */
.card-zoom-trigger {
    position: absolute;
    bottom: 15px; /* Odstęp od dolnej krawędzi zdjęcia */
    right: 15px;  /* Odstęp od prawej krawędzi zdjęcia */
    width: 42px;  /* Średnica kółka */
    height: 42px;
    background-color:var(--main-color-hover); /* Ten sam złoty kolor */
    color: #fff;
    border: none;
    border-radius: 50%; /* Idealne kółko */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

/* Efekt najechania na lupkę */
.card-zoom-trigger:hover {
    background-color: #a68a5a; /* Lekko ciemniejszy złoty */
}

/* Rozmiar ikony FontAwesome wewnątrz lupki */
.card-zoom-trigger i {
    font-size: 16px;
}


/* Główny kontener */
.custom-product-wrapper {
    position: relative;
    max-width: 500px; /* dostosuj do szerokości zdjęcia */
    margin: 0 auto;
}

/* Styl Badge (Złoty prostokąt) */
.custom-badge-new {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white; /* Twój złoty kolor */
    color: black;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
}

/* Kontener zdjęcia i lupki */
.custom-image-container {
    position: relative;
    border: 1px solid #eee; /* ramka dookoła karty */
    padding: 10px;
}

.custom-image-container img{

    display: block;
    width: 100%;
    height: auto;
}

.main-product-img {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

/* Styl Lupki (Złote kółko) */
.custom-zoom-btn {
    position: absolute !important;
    bottom: 25px !important;
    right: 25px !important;
    width: 45px !important;
    height: 45px !important;
    background-color: var(--main-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important; /* robi idealne kółko */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease !important;
    z-index: 10;
}

.custom-zoom-btn:hover {
    transform: scale(1.1) !important;
    background-color: var(--main-color-hover) !important;
}



.feature-box {
    position: relative ;
    border: 5px solid #5a6472; /* ciemna ramka */
    padding: 50px 20px 30px;
    text-align: center;
    background: #fff;
}

/* Pozycjonowanie ikony na środku górnej linii */
.feature-box__icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff; /* tło ikony musi być białe, żeby "przeciąć" ramkę */
    padding: 0 15px;
    color: #bc9f72;
    font-size: 40px;
}

#full-page-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* Jeśli masz tu rgba, upewnij się że nie jest zbyt przezroczyste */
    z-index: 999999; /* Musi być wyższy niż cokolwiek innego */
    display: none;
}

/* Upewnij się, że slajdy nie mają opacity: 0 */
.slick-gallery-container .slick-slide {
    opacity: 1 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Usunięcie domyślnych "dziwnych znaków" */
.slick-prev:before, .slick-next:before {
    display: none !important;
}

/* Stylizacja Twoich nowych strzałek */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--main-color); /* Twój złoty kolor */
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.slick-prev.custom-arrow { left: 20px; }
.slick-next.custom-arrow { right: 20px; }

/* Wymuszenie widoczności obrazka */
.slick-gallery-container .slick-slide img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.slick-list, .slick-track {
    height: 100% !important;
}

/* --- 1. STYLIZACJA NAGŁÓWKA I PRZYCISKU ZAMKNIJ --- */

.gallery-header {
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    /* Subtelny cień pod nagłówkiem */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 101;
}

.gallery-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Nowy przycisk zamykania */
.close-gallery-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Idealne kółko */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Początkowy kolor ikony X */
    font-size: 24px;
    transition: all 0.3s ease; /* Płynna animacja */
}

/* Efekt po najechaniu na X */
.close-gallery-btn:hover {
    background-color: var(--main-color-hover); /* Twój złoty kolor */
    color: white;
    transform: rotate(90deg); /* Fajny efekt obrotu */
}


/* --- 2. STYLIZACJA EFEKTU ZOOM (PRZYBLIŻANIA) --- */

/* Kontener trzymający zdjęcie */
.slick-slide-inner.zoom-container {
    position: relative;
    overflow: hidden; /* Kluczowe: przycina zdjęcie, gdy jest powiększone */
    cursor: zoom-in;  /* Zmienia kursor na lupę z plusem */
}

/* Stan "powiększony" (dodawany przez JS) */
.slick-slide-inner.zoom-container.is-zoomed {
    cursor: zoom-out; /* Kursor zmienia się na lupę z minusem */
}

/* Samo zdjęcie */
.slick-slide-inner img {
    /* ... twoje dotychczasowe style (max-height itp.) ... */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Bardzo płynne powiększanie */
    transform-origin: center center;
    z-index: 1;
}

/* Efekt: gdy kontener ma klasę .is-zoomed, zdjęcie powiększa się 2x */
.slick-slide-inner.is-zoomed img {
    transform: scale(2);
}


/* --- 3. IKONKA PODPOWIEDZI (Lupka z plusem na środku) --- */
.zoom-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.8);

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    pointer-events: none; /* Myszka "przechodzi" przez ikonę do zdjęcia */
    opacity: 0; /* Domyślnie ukryta */
    transition: opacity 0.3s;
    z-index: 2;
}

/* Pokazujemy ikonkę tylko po najechaniu myszką na zdjęcie (na desktopie) */
.slick-slide-inner:hover .zoom-hint {
    opacity: 1;
}

/* Ukrywamy ikonkę, gdy zdjęcie jest już powiększone */
.slick-slide-inner.is-zoomed .zoom-hint {
    opacity: 0 !important;
}

/* POPRAWKA: Całkowite ukrycie kółeczka z podpowiedzią zoomu */
.zoom-hint {
    display: none !important;
}

/* Upewniamy się, że kursor nadal pokazuje lupę */
.slick-slide-inner.zoom-container {
    cursor: zoom-in;
}

.slick-slide-inner.zoom-container.is-zoomed {
    cursor: zoom-out;
}

/* Wymuszamy, aby strzałki były zawsze widoczne i na wierzchu */
.custom-arrow {
    display: flex !important; /* Blokujemy próby ukrycia przez Slick */
    opacity: 1 !important;    /* Blokujemy wygaszanie */
    visibility: visible !important;
    z-index: 10000 !important; /* Muszą być nad zdjęciem i warstwą zoom */
}

/* Zapobiegamy znikaniu, gdy Slick uzna je za "wyłączone" */
.custom-arrow.slick-disabled {
    display: flex !important;
    opacity: 0.3 !important; /* Zamiast znikać, stają się lekko przezroczyste */
    cursor: default;
}

/* Naprawa problemu znikających strzałek podczas animacji przejścia */
.slick-prev, .slick-next {
    pointer-events: auto !important;
}

/* Efekt najechania na strzałkę */
.custom-arrow:hover {
    background-color: var(--main-color-hover) !important; /* Ciemniejszy złoty */
    transform: translateY(-50%) scale(1.1) !important; /* Powiększenie przy zachowaniu centrowania */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

/* Dodanie płynności (transition) do głównej klasy strzałki */
.custom-arrow {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Tylko aktywny slajd powinien reagować na interakcje i focus */
.slick-slide:not(.slick-active) {
    pointer-events: none !important; /* Blokuje kliknięcia w "nieaktywne" slajdy */
    outline: none !important;
}

/* Klony slajdów, które Slick trzyma w pamięci, nie powinny być tabowalne */
.slick-cloned {
    display: none !important; /* Jeśli nie używasz infinite, to rozwiązuje problem */
}

/* Jeśli używasz infinite, klony muszą być widoczne, ale ukryte dla focusu */
.slick-cloned [tabindex] {
    tabindex: -1 !important;
}

/* 1. Wymuszenie stałej widoczności dla wszystkich stanów */
.custom-arrow, 
.custom-arrow:focus, 
.custom-arrow:active, 
.custom-arrow:hover {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important; /* Slick często próbuje tu wstawić 'none' */
    outline: none !important; /* Usuwa niebieską obwódkę przeglądarki */
    box-shadow: none !important;
}

/* 2. Naprawa błędu "znikania" po kliknięciu i zjechaniu myszką */
/* Często przeglądarka trzyma 'focus' na przycisku, co wywołuje błędy */
.custom-arrow::-moz-focus-inner {
    border: 0;
}

/* 3. Jeśli używasz efektu "pojawiania się tylko przy najechaniu na galerię" */
/* Upewnij się, że używasz tej struktury: */
#full-page-gallery .custom-arrow {
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    /* Usuwamy stąd opacity: 0, jeśli strzałki mają być widoczne zawsze */
}

/* 4. Zabezpieczenie przed "znikaniem" podczas animacji zmiany slajdu */
.slick-prev, .slick-next {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

/* 1. Blokujemy jakiekolwiek próby ukrycia strzałek */
#full-page-gallery .custom-arrow {
    display: flex !important; /* Zawsze widoczne jako flex */
    opacity: 1 !important;    /* Zawsze pełna widoczność */
    visibility: visible !important;
    pointer-events: auto !important; /* Reagują na kliknięcia */
    transform: translateY(-50%) !important; /* Stała pozycja pionowa */
}

/* 2. Usuwamy wszelkie efekty "skupienia", które mogą powodować błędy wizualne */
#full-page-gallery .custom-arrow:focus,
#full-page-gallery .custom-arrow:active,
#full-page-gallery .custom-arrow:focus-visible,
#full-page-gallery .custom-arrow:focus-within {
    outline: none !important;
    background-color: var(--main-color) !important; /* Stały kolor złoty */
    box-shadow: none !important;
    opacity: 1 !important;
    color: white !important;
}

/* 3. Naprawa specyficzna dla Slick Slidera */
/* Slick czasem dodaje klasę .slick-hidden do przycisków */
.slick-arrow.slick-hidden {
    display: flex !important;
}

/* 4. Efekt Hover - tylko zmiana koloru, bez ruszania opacity */
#full-page-gallery .custom-arrow:hover {
    background-color: var(--main-color-hover) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.config-label:hover{
    cursor:pointer
}





/* GŁÓWNY KONTENER - Wyśrodkowanie i ogranicznik */
.slider-slicki-mini {
    max-width: 600px; /* Dostosuj szerokość całego paska miniatur */
    margin: 0 auto;
    position: relative;
    padding: 0 50px; /* Miejsce na strzałki */
}

/* LISTA SLAJDÓW - Wymuszenie równego ułożenia */
.slider-slicki-mini .slick-track {
    display: flex !important;
    align-items: center;
    gap: 15px; /* Odstęp między zdjęciami */
    margin: 0 auto !important;
}

/* POJEDYNCZY SLAJD - Nadpisanie szerokości generowanej przez JS */
.slider-slicki-mini .slick-slide {
    width: 100px !important; /* Twoja szerokość miniatury */
    height: 100px !important; /* Twoja wysokość miniatury */
    float: none !important;
    display: block !important;
}

/* KONTENERY WEWNĄTRZ SLAJDU - Usunięcie zbędnych marginesów */
.slider-slicki-mini .slick-slide > div,
.slider-slicki-mini .slick-slide div[style] {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* OBRAZEK (Miniaturka) */
.slider-slicki-mini img.thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Kadrowanie do kwadratu */
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Aktywne zdjęcie w miniaturkach */
.slider-slicki-mini .slick-current img.thumb {
    border-color: #000; /* Czarna lub złota ramka dla wybranego zdjęcia */
}

/* STRZAŁKI - Pozycjonowanie względem krawędzi paska */
.slider-slicki-mini .custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #000;
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}