/*
 * KA Blocs Theme - Komponent Produkt (pojedynczy)
 * ================================================
 * 
 * NOWE FUNKCJONALNOŚCI:
 * - Sekcje shortcode_1, shortcode_2, shortcode_3 z własnymi stylami
 * - Zmienne CSS dla każdej sekcji shortcode
 * - Responsywne style dla shortcode'ów
 */

/* ===================================================================
 * GŁÓWNY KONTENER PRODUKTU
 * =================================================================== */

.ka-component-product {
    display: flex;
    flex-direction: row;
    gap: var(--ka-product-gap, 2rem);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-product-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    border-radius: var(--ka-product-radius, var(--bs-border-radius, 0.375rem));
    box-shadow: var(--ka-product-shadow, var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)));
    padding: var(--ka-product-padding, 2rem);
    margin: var(--ka-product-margin, 2rem 0);
    position: relative;
    overflow: hidden;
    max-width: var(--ka-product-max-width, 1200px);
    box-sizing: border-box;
    
    /* Zmienne CSS dla shortcode'ów */
    --ka-shortcode-margin: 1rem 0;
    --ka-shortcode-padding: 0;
    --ka-shortcode-1-bg: transparent;
    --ka-shortcode-1-border: none;
    --ka-shortcode-1-radius: 0;
    --ka-shortcode-2-bg: transparent;
    --ka-shortcode-2-border: none;
    --ka-shortcode-2-radius: 0;
    --ka-shortcode-3-bg: transparent;
    --ka-shortcode-3-border: none;
    --ka-shortcode-3-radius: 0;
}

/* ===================================================================
 * UKŁAD KOLUMNOWY - DYNAMICZNE SZEROKOŚCI
 * =================================================================== */

.ka-product-layout {
    display: flex;
    flex-direction: row;
    gap: var(--ka-product-col-gap, 16px);
    width: 100%;
    box-sizing: border-box;
}

/* Kolumny - używają zmiennych CSS z panelu */
.ka-product-col1,
.ka-product-col2,
.ka-product-col3 {
    min-width: 0;
    box-sizing: border-box;
}

/* Układ 1 kolumna */
.ka-product-layout.ka-product-cols-1 > .ka-product-col1 {
    width: 100% !important;
}

/* Układ 2 kolumny - dynamiczne szerokości */
.ka-product-layout.ka-product-cols-2 > .ka-product-col1 {
    width: var(--ka-product-col1, 60%) !important;
}
.ka-product-layout.ka-product-cols-2 > .ka-product-col2 {
    width: var(--ka-product-col2, 40%) !important;
}

/* Układ 3 kolumny - dynamiczne szerokości */
.ka-product-layout.ka-product-cols-3 > .ka-product-col1 {
    width: var(--ka-product-col1, 33%) !important;
}
.ka-product-layout.ka-product-cols-3 > .ka-product-col2 {
    width: var(--ka-product-col2, 34%) !important;
}
.ka-product-layout.ka-product-cols-3 > .ka-product-col3 {
    width: var(--ka-product-col3, 33%) !important;
}

/* ===================================================================
 * GALERIA PRODUKTU - WSZYSTKIE POZYCJE MINIATUREK
 * =================================================================== */

/* Główny kontener galerii */
.ka-product-gallery {
    width: 100% !important;
    margin: 0 auto;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-gallery-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-radius: var(--ka-gallery-radius, var(--bs-border-radius, 0.375rem));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100% !important;
}

/* === GALERIA PRODUKTU: UKŁAD MINIATUREK wg zasad z panelu === */

/* --- DESKTOP --- */
.ka-gallery-thumbs--bottom .woocommerce-product-gallery__thumbnails,
.ka-gallery-thumbs--top .woocommerce-product-gallery__thumbnails {
    display: flex;
    flex-direction: row;
    gap: var(--ka-thumb-gap, 8px);
    justify-content: center;
    width: 100%;
}

.ka-gallery-thumbs--left .woocommerce-product-gallery__thumbnails,
.ka-gallery-thumbs--right .woocommerce-product-gallery__thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--ka-thumb-gap, 8px);
    align-items: center;
    width: var(--ka-thumb-width, 80px);
    min-width: var(--ka-thumb-width, 80px);
}

/* --- MOBILE: zawsze miniatury pod zdjęciem, w wierszu (obok siebie) --- */
@media (max-width: 900px) {
    .ka-gallery-thumbs--left .woocommerce-product-gallery,
    .ka-gallery-thumbs--right .woocommerce-product-gallery {
        flex-direction: column;
        gap: var(--ka-gallery-gap-mobile, 1rem);
    }
    .ka-gallery-thumbs--left .woocommerce-product-gallery__thumbnails,
    .ka-gallery-thumbs--right .woocommerce-product-gallery__thumbnails {
        flex-direction: row;
        width: 100%;
        min-width: 0;
        justify-content: center;
        align-items: center;
    }
    /* top i bottom już domyślnie mają flex-row */
}

/* --- NONE: brak miniaturek --- */
.ka-gallery-thumbs--none .woocommerce-product-gallery__thumbnails,
.ka-gallery-thumbs--none .flex-control-nav.flex-control-thumbs,
.ka-gallery-thumbs--none .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* ===================================================================
 * GŁÓWNE ZDJĘCIE GALERII
 * =================================================================== */

/* Główne zdjęcie galerii */
.ka-gallery-main-col {
    order: 0; /* Główne zdjęcie zawsze w środku */
    width: 100%;
    flex-grow: 1;
    min-width: 0; /* Pozwala na zmniejszenie szerokości */
}

.woocommerce-product-gallery__image img,
.ka-gallery-main-img,
.ka-product-gallery .ka-gallery-main-col img,
.ka-product-gallery .woocommerce-product-gallery__image img,
.ka-product-gallery img[class*="main"],
.ka-product-gallery img[class*="gallery"],
.ka-product-gallery img:not([class*="thumb"]):not([class*="thumbnail"]) {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--ka-gallery-main-max-height, 500px) !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: var(--ka-gallery-main-radius, 8px) !important;
    background: var(--ka-gallery-main-bg, #fff) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Specjalne styles dla głównego zdjęcia w galerii z miniaturami po bokach */
.ka-gallery-thumbs--left .ka-gallery-main-col,
.ka-gallery-thumbs--right .ka-gallery-main-col {
    flex-grow: 1;
    min-width: 0; /* Pozwala na zmniejszenie szerokości */
    width: calc(100% - var(--ka-thumb-width, 80px) - var(--ka-gallery-gap, 3px));
}

/* Zapewnienie widoczności głównego obrazu */
.ka-gallery-main-col,
.woocommerce-product-gallery__image {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    min-height: 200px !important;
}

.ka-gallery-main-col img,
.woocommerce-product-gallery__image img {
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===================================================================
 * MINIATURY GALERII
 * =================================================================== */

.woocommerce-product-gallery__thumbnails img,
.flex-control-nav.flex-control-thumbs img,
.ka-gallery-thumb-img,
.ka-product-gallery img[class*="thumb"],
.ka-product-gallery img[class*="thumbnail"],
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumb"],
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumbnail"] {
    width: var(--ka-thumb-size, 70px) !important;
    height: calc(var(--ka-thumb-size, 70px) * 0.75) !important;
    object-fit: cover !important;
    border-radius: var(--ka-thumb-radius, 6px);
    border: var(--ka-thumb-border-width, 2px) solid transparent;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-thumb-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    cursor: pointer;
    transition: border-color var(--ka-thumb-transition, 0.2s);
    box-sizing: border-box;
}

.woocommerce-product-gallery__thumbnails img:hover,
.flex-control-nav.flex-control-thumbs img:hover,
.ka-gallery-thumb-img:hover,
.ka-product-gallery img[class*="thumb"]:hover,
.ka-product-gallery img[class*="thumbnail"]:hover,
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumb"]:hover,
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumbnail"]:hover,
.woocommerce-product-gallery__thumbnails img.flex-active,
.flex-control-nav.flex-control-thumbs .flex-active img,
.ka-gallery-thumb-img.ka-thumb-active,
.ka-product-gallery img[class*="thumb"].flex-active,
.ka-product-gallery img[class*="thumbnail"].flex-active,
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumb"].flex-active,
.ka-product-gallery .woocommerce-product-gallery__image img[class*="thumbnail"].flex-active {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border-color: var(--ka-thumb-hover-border, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
}

/* === UKŁAD MINIATUREK: wrappery generowane przez PHP === */

/* --- DESKTOP --- */
.ka-gallery-thumbs-col--top,
.ka-gallery-thumbs-col--bottom {
    display: flex;
    flex-direction: row;
    gap: var(--ka-gallery-gap, 3px);
    justify-content: left;
    width: 100%;
    order: 0;
    margin: 0;
}

/* Dodaję margines górny dla miniatury pod zdjęciem */
.ka-gallery-thumbs-col--bottom {
    margin-top: var(--ka-gallery-main-thumbs-gap, 5px); /* CSS zmienna + fallback 5px */
}

.ka-gallery-thumbs-col--top { order: -1; }
.ka-gallery-thumbs-col--bottom { order: 1; }
.ka-gallery-thumbs-col--left,
.ka-gallery-thumbs-col--right {
    display: flex;
    flex-direction: column;
    gap: var(--ka-gallery-gap, 3px);
    align-items: center;
    width: var(--ka-thumb-width, 80px);
    min-width: var(--ka-thumb-width, 80px);
    flex-shrink: 0;
    order: 0;
    margin: 0;
}
.ka-gallery-thumbs-col--left { order: -1; }
.ka-gallery-thumbs-col--right { order: 1; }

/* --- MOBILE --- */
@media (max-width: 900px) {
    /* Na mobile: wszystkie galerie z miniaturami po bokach przełączają się na układ pionowy */
    .ka-gallery-thumbs--left .ka-product-gallery,
    .ka-gallery-thumbs--right .ka-product-gallery {
        flex-direction: column;
        gap: 1rem;
    }
    
    .ka-gallery-thumbs-col--left,
    .ka-gallery-thumbs-col--right {
        flex-direction: row;
        width: 100%;
        min-width: 0;
        justify-content: center;
        align-items: center;
        order: 1; /* Na mobile miniatury zawsze pod zdjęciem */
        margin: 0;
    }
    
    .ka-gallery-thumbs-col--left {
        order: 1;
        margin: 0;
    }
    
    .ka-gallery-thumbs-col--right {
        order: 1;
        margin: 0;
    }
    
    .ka-gallery-main-col {
        order: 0; /* Główne zdjęcie zawsze na górze na mobile */
    }

    .ka-product-layout {
        --ka-product-col1: 100% !important;
        --ka-product-col2: 100% !important;
        --ka-product-col3: 100% !important;
    }
}

/* ===================================================================
 * SEKCJE PRODUKTU - KAŻDA Z WŁASNĄ KLASĄ
 * =================================================================== */

/* Tytuł produktu */
.ka-product-title {
    font-size: var(--ka-title-font-size, 2.2rem);
    font-weight: var(--ka-title-font-weight, bold);
    margin: var(--ka-title-margin, 0 0 0.5em 0);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-title-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
    line-height: var(--ka-title-line-height, 1.2);
}

/* Ocena produktu */
.ka-product-rating {
    margin-bottom: var(--ka-rating-margin, 0.5em);
    color: var(--ka-rating-color, #f39c12);
}

/* Cena produktu */
.ka-product-price {
    font-size: var(--ka-price-font-size, 1.5rem);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-price-color, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    font-weight: var(--ka-price-font-weight, 600);
    margin-bottom: var(--ka-price-margin, 0.5em);
}

/* Krótki opis */
.ka-product-excerpt {
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-excerpt-color, var(--bs-body-color, var(--wp--preset--color--foreground, #444)));
    margin-bottom: var(--ka-excerpt-margin, 1em);
    line-height: inherit;
}

/* Pełny opis */
.ka-product-description {
    font-size: var(--ka-description-font-size, 1rem);
    line-height: var(--ka-description-line-height, 1.6);
    color: var(--ka-description-color, #444);
    margin-bottom: var(--ka-description-margin, 1em);
}

/* Przycisk dodaj do koszyka */
.ka-product-add-to-cart {
    margin: var(--ka-add-to-cart-margin, 1.5em 0 1em 0);
}

/* Meta informacje */
.ka-product-meta {
    font-size: var(--ka-meta-font-size, 0.95em);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-meta-color, var(--bs-secondary, var(--wp--preset--color--secondary, #888)));
    margin-bottom: var(--ka-meta-margin, 0.5em);
}

/* Tagi produktu */
.ka-product-tags {
    font-size: var(--ka-tags-font-size, 0.98em);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-tags-color, var(--bs-secondary, var(--wp--preset--color--secondary, #666)));
    margin-bottom: var(--ka-tags-margin, 0.5em);
}

.ka-product-tags a {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-tags-link-color, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    text-decoration: none;
    margin-right: var(--ka-tags-link-margin, 0.5em);
}

.ka-product-tags a:hover {
    text-decoration: underline;
}

/* Kategorie produktu */
.ka-product-categories {
    font-size: var(--ka-categories-font-size, 0.98em);
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-categories-color, var(--bs-secondary, var(--wp--preset--color--secondary, #666)));
    margin-bottom: var(--ka-categories-margin, 0.5em);
}

.ka-product-categories a {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-categories-link-color, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    text-decoration: none;
    margin-right: var(--ka-categories-link-margin, 0.5em);
}

.ka-product-categories a:hover {
    text-decoration: underline;
}

/* ===================================================================
 * DOSTĘPNOŚĆ WYNAJMU
 * =================================================================== */

.ka-product-rental-availability {
    margin: 1rem 0;
    padding: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-rental-availability-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border: 1px solid var(--ka-rental-availability-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--ka-rental-availability-radius, 8px);
    font-size: 0.9rem;
}

/* Dostępność wynajmu inline (obok pola ilości) */
.ka-product-rental-availability-inline {
    margin: 0.5rem 0;
    padding: 0.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-rental-availability-inline-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border: 1px solid var(--ka-rental-availability-inline-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--ka-rental-availability-inline-radius, 6px);
    font-size: 0.85rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.ka-product-rental-availability .rental-availability-fallback,
.ka-product-rental-availability-inline .rental-availability-fallback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-rental-availability-text-color, var(--bs-secondary, var(--wp--preset--color--secondary, #6c757d)));
}

.ka-product-rental-availability .availability-icon,
.ka-product-rental-availability-inline .availability-icon {
    font-size: 1.2rem;
}

.ka-product-rental-availability .availability-text,
.ka-product-rental-availability-inline .availability-text {
    font-weight: 500;
}

/* Stany dostępności */
.ka-product-rental-availability.is-available,
.ka-product-rental-availability-inline.is-available {
    background: var(--ka-rental-availability-available-bg, #d4edda);
    border-color: var(--ka-rental-availability-available-border, #c3e6cb);
    color: var(--ka-rental-availability-available-text, #155724);
}

.ka-product-rental-availability.is-unavailable,
.ka-product-rental-availability-inline.is-unavailable {
    background: var(--ka-rental-availability-unavailable-bg, #f8d7da);
    border-color: var(--ka-rental-availability-unavailable-border, #f5c6cb);
    color: var(--ka-rental-availability-unavailable-text, #721c24);
}



/* ===================================================================
 * BŁĄD PRODUKTU
 * =================================================================== */

.ka-component-product.ka-product-error {
    color: var(--ka-error-color, #b32d2e);
    background: var(--ka-error-bg, #fff0f0);
    border: 1px solid var(--ka-error-border, #b32d2e);
    padding: var(--ka-error-padding, 2em);
    border-radius: var(--ka-error-radius, 8px);
    text-align: center;
}

/* ===================================================================
 * RESPONSYWNOŚĆ - MOBILE FIRST
 * =================================================================== */

@media (max-width: 900px) {
    /* Główny kontener - układ pionowy */
    .ka-component-product {
        flex-direction: column;
        padding: var(--ka-product-padding-mobile, 1rem);
        gap: var(--ka-product-gap-mobile, 1rem);
        
        /* Responsywne zmienne CSS dla shortcode'ów */
        --ka-shortcode-margin: 0.8rem 0;
        --ka-shortcode-padding: 0;
    }
    
    /* Layout kolumn - układ pionowy */
    .ka-product-layout {
        flex-direction: column;
        gap: var(--ka-product-col-gap-mobile, 12px);
    }
    
    /* Kolumny - pełna szerokość */
    .ka-product-col1,
    .ka-product-col2,
    .ka-product-col3 {
        width: 100% !important;
        min-width: 0;
    }
    
    /* Tytuł - mniejszy font */
    .ka-product-title {
        font-size: var(--ka-title-font-size-mobile, 1.5rem);
    }
    
    /* Cena - mniejszy font */
    .ka-product-price {
        font-size: var(--ka-price-font-size-mobile, 1.2rem);
    }
}

@media (max-width: 600px) {
    /* Główny kontener - mniejszy padding */
    .ka-component-product {
        padding: var(--ka-product-padding-mobile-small, 0.8rem);
        margin: var(--ka-product-margin-mobile, 1rem 0);
        
        /* Zmienne CSS dla shortcode'ów na małych ekranach */
        --ka-shortcode-margin: 0.6rem 0;
        --ka-shortcode-padding: 0;
    }
    
    /* Główne zdjęcie - ograniczona wysokość */
    .woocommerce-product-gallery__image img,
    .ka-gallery-main-img,
    .ka-product-gallery .ka-gallery-main-col img,
    .ka-product-gallery .woocommerce-product-gallery__image img,
    .ka-product-gallery img[class*="main"],
    .ka-product-gallery img[class*="gallery"],
    .ka-product-gallery img:not([class*="thumb"]):not([class*="thumbnail"]) {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: var(--ka-gallery-main-max-height-mobile, 50vw) !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: var(--ka-gallery-main-radius, 8px) !important;
        background: var(--ka-gallery-main-bg, #fff) !important;
    }
    
    /* Miniatury - mniejszy rozmiar */
    .woocommerce-product-gallery__thumbnails img,
    .flex-control-nav.flex-control-thumbs img,
    .ka-gallery-thumb-img,
    .ka-product-gallery img[class*="thumb"],
    .ka-product-gallery img[class*="thumbnail"],
    .ka-product-gallery .woocommerce-product-gallery__image img[class*="thumb"],
    .ka-product-gallery .woocommerce-product-gallery__image img[class*="thumbnail"] {
        width: 50px !important;
        height: 37.5px !important;
        object-fit: cover !important;
    }
    
    /* Dostępność wynajmu inline na mobile */
    .ka-product-rental-availability-inline {
        display: block !important;
        margin: 0.5rem 0 !important;
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
    }
}

/* ===================================================================
 * DODATKOWE KLASY I MODYFIKATORY
 * =================================================================== */

/* Klasy wrapperów - mogą być nadpisane przez panel */
.ka-product-wrapper,
.ka-gallery-wrapper,
.ka-product-col1-wrapper,
.ka-product-col2-wrapper,
.ka-product-col3-wrapper {
    /* Bazowe styles - mogą być nadpisane przez klasy z panelu */
}

/* Klasy dla różnych typów galerii */
.ka-gallery-type--standard {
    /* Standardowa galeria WooCommerce */
}

.ka-gallery-type--slider {
    /* Galeria slider - może wymagać dodatkowych stylów */
}

/* Klasy dla różnych układów */
.ka-product-layout--compact {
    gap: var(--ka-product-gap-compact, 1rem);
    padding: var(--ka-product-padding-compact, 1rem);
}

.ka-product-layout--spacious {
    gap: var(--ka-product-gap-spacious, 3rem);
    padding: var(--ka-product-padding-spacious, 3rem);
}

/* ========================================
   NOWE FUNKCJONALNOŚCI: Sekcje Shortcode
   ======================================== */

/* Style dla sekcji shortcode'ów */
.ka-product-shortcode {
    margin: var(--ka-shortcode-margin, 1rem 0);
    padding: var(--ka-shortcode-padding, 0);
    width: 100%;
    box-sizing: border-box;
}

.ka-product-shortcode-1 {
    background: var(--ka-shortcode-1-bg, transparent);
    border: var(--ka-shortcode-1-border, none);
    border-radius: var(--ka-shortcode-1-radius, 0);
}

.ka-product-shortcode-2 {
    background: var(--ka-shortcode-2-bg, transparent);
    border: var(--ka-shortcode-2-border, none);
    border-radius: var(--ka-shortcode-2-radius, 0);
}

.ka-product-shortcode-3 {
    background: var(--ka-shortcode-3-bg, transparent);
    border: var(--ka-shortcode-3-border, none);
    border-radius: var(--ka-shortcode-3-radius, 0);
}

/* Responsywność dla shortcode'ów */
@media (max-width: 900px) {
    .ka-product-shortcode {
        margin: var(--ka-shortcode-margin-mobile, 0.8rem 0);
        padding: var(--ka-shortcode-padding-mobile, 0);
    }
}

@media (max-width: 600px) {
    .ka-product-shortcode {
        margin: var(--ka-shortcode-margin-mobile-small, 0.6rem 0);
        padding: var(--ka-shortcode-padding-mobile-small, 0);
    }
}

/* ===================================================================
 * KONIEC PLIKU
 * =================================================================== */

/* Specjalne styles dla galerii z miniaturami po lewej/prawej */
.ka-gallery-thumbs--left .ka-product-gallery,
.ka-gallery-thumbs--right .ka-product-gallery {
    flex-direction: row;
    gap: var(--ka-gallery-gap, 3px);
    align-items: flex-start;
}

/* Specjalne styles dla galerii z miniaturami po lewej/prawej - WYSOKA SPECYFICZNOŚĆ */
.ka-product-gallery.ka-gallery-thumbs--left,
.ka-product-gallery.ka-gallery-thumbs--right {
    flex-direction: row !important;
    gap: var(--ka-gallery-gap, 3px) !important;
    align-items: flex-start !important;
}

@media (max-width: 900px) {
    .ka-gallery-thumbs-col--left,
    .ka-gallery-thumbs-col--right,
    .ka-gallery-thumbs-col--top,
    .ka-gallery-thumbs-col--bottom {
        flex-direction: row !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        order: 1 !important;
        margin: 0 !important;
    }
    
    /* Dodaję margines górny dla mobile */
    .ka-gallery-thumbs-col--bottom {
        margin-top: 8px !important; /* Większy margines na mobile */
    }
    
    /* Poprawiam proporcje miniatur na mobile */
    .ka-gallery-thumb-img,
    .ka-product-gallery img[class*="thumb"],
    .ka-product-gallery img[class*="thumbnail"] {
        height: auto !important; /* Usuwam sztywną proporcję na mobile */
        max-height: var(--ka-thumb-size, 70px) !important; /* Maksymalna wysokość */
    }
    
    .ka-gallery-main-col {
        order: 0 !important;
    }
    .ka-product-gallery {
        flex-direction: column !important;
    }
}

/* ===================================================================
 * SEKCJE PRODUKTU - PROGI RABATOWE I CENY SEZONOWE
 * =================================================================== */

/* Progi rabatowe - domyślne style */
/* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
.rent-discount-table {
    margin: 20px 0;
    padding: 15px;
    background: var(--ka-discount-table-bg, var(--bs-info-bg-subtle, #f6fafd));
    border-left: 4px solid var(--ka-discount-table-border, var(--bs-info, #0073aa));
    border-radius: var(--ka-discount-table-radius, var(--bs-border-radius, 0.375rem));
}

.rent-discount-table .discount-header {
    margin: 0 0 10px 0;
}

.rent-discount-table .discount-table {
    width: 100%;
    border-collapse: collapse;
}

.rent-discount-table .discount-th {
    text-align: left;
    padding: 8px;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-discount-th-bg, var(--bs-info, #0073aa));
    color: var(--ka-discount-th-color, var(--bs-white, #fff));
}

.rent-discount-table .discount-td {
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* Ceny sezonowe - domyślne style */
.ka-product-seasonal-prices {
    margin: 20px 0;
}

.ka-product-seasonal-prices h3 {
    margin: 0 0 15px 0;
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-seasonal-title-color, var(--bs-body-color, var(--wp--preset--color--foreground, #333)));
}

.seasonal-prices-table {
    margin: 0;
}

.seasonal-prices-grid {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    overflow: hidden;
}

.seasonal-prices-grid th {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-seasonal-th-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    padding: 12px;
    text-align: left;
    font-weight: inherit;
    color: var(--ka-seasonal-th-color, var(--bs-body-color, var(--wp--preset--color--foreground, #333)));
    border-bottom: 1px solid var(--ka-seasonal-border, var(--bs-border-color, #e1e5e9));
}

.seasonal-prices-grid td {
    padding: 12px;
    border-bottom: 1px solid #e1e5e9;
}

.seasonal-prices-grid tr:last-child td {
    border-bottom: none;
}

.seasonal-prices-grid .price {
    font-weight: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-seasonal-price-color, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
}

/* Hover efekty */
.seasonal-prices-grid tr:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-seasonal-hover-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
}

.rent-discount-table .discount-table tr:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-discount-hover-bg, var(--bs-info-bg-subtle, #f0f4f8));
}

/* ===================================================================
 * CENY WYNAJMU
 * =================================================================== */

.rent-prices-table {
    margin: 20px 0;
    padding: 15px;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-rent-prices-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-left: 4px solid var(--ka-rent-prices-border, var(--bs-success, #28a745));
    border-radius: var(--ka-rent-prices-radius, var(--bs-border-radius, 0.375rem));
}

.rent-prices-table .prices-header {
    margin: 0 0 15px 0;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-rent-prices-header-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
    font-size: inherit;
    font-weight: inherit;
}

.rent-prices-table .prices-table {
    width: 100%;
    border-collapse: collapse;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-rent-prices-table-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    border-radius: var(--ka-rent-prices-table-radius, var(--bs-border-radius, 0.375rem));
    overflow: hidden;
    box-shadow: var(--ka-rent-prices-table-shadow, var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)));
}

.rent-prices-table .prices-th {
    text-align: left;
    padding: 12px;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-rent-prices-th-bg, var(--bs-success, #28a745));
    color: var(--ka-rent-prices-th-color, var(--bs-white, #fff));
    font-weight: inherit;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.rent-prices-table .prices-td {
    padding: 12px;
    border-bottom: 1px solid #e1e5e9;
    color: #1d2327;
}

.rent-prices-table .prices-td:last-child {
    font-weight: 600;
    color: #28a745;
}

.rent-prices-table .prices-table tr:hover {
    background: #f8f9fa;
}

/* ===================================================================
 * SELEKTOR MIESIĄCA I INFORMACJE SEZONOWOŚCI
 * =================================================================== */

.month-selector {
    margin-bottom: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e1e5e9;
}

.month-selector label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #1d2327;
}

.month-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.month-select:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.seasonal-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 12px;
    background: #e8f5e8;
    color: #28a745;
    border: 1px solid #28a745;
}

.seasonal-badge:contains("🌤️") {
    background: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}



.seasonal-info p {
    margin: 5px 0;
    font-size: 0.9em;
    color: #666;
}

.seasonal-info p:first-child {
    margin-top: 0;
}

.seasonal-info p:last-child {
    margin-bottom: 0;
}

/* Responsywność */
@media (max-width: 768px) {
    .rent-discount-table {
        padding: 10px;
        margin: 15px 0;
    }
    
    .rent-discount-table .discount-th,
    .rent-discount-table .discount-td {
        padding: 6px;
        font-size: 0.9em;
    }
    
    .seasonal-prices-grid th,
    .seasonal-prices-grid td {
        padding: 8px;
        font-size: 0.9em;
    }
}

/* Ukryj duplikat komunikatu o dostępności generowany przez wtyczkę rent */
#qty-available-info {
    display: none !important;
}

/* Ukryj komunikat o dostępności na początku - będzie widoczny po wybraniu daty */
.ka-product-rental-availability-inline.ka-availability-hidden {
    display: none !important;
}

/* Pokaż komunikat o dostępności po wybraniu daty */
.ka-product-rental-availability-inline.ka-availability-visible {
    display: inline-block !important;
}

/* ===================================================================
 * POLA DODATKOWE PRODUKTU (CUSTOM FIELDS)
 * =================================================================== */

/* Style dla pól dodatkowych - bez ramek, jak standardowe pola */
.ka-product-custom-fields {
    margin: 1rem 0;
    /* Usuwam padding, tło i ramkę */
    /* padding: 1.5rem; */
    /* background: var(--ka-product-custom-fields-bg, #f8f9fa); */
    /* border: 1px solid var(--ka-product-custom-fields-border, #e1e5e9); */
    /* border-radius: var(--ka-product-custom-fields-radius, 8px); */
}

.ka-product-custom-fields-title {
    margin: 0 0 1rem 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--ka-product-custom-fields-title-color, #1d2327);
    /* Usuwam podkreślenie */
    /* border-bottom: 2px solid var(--ka-product-custom-fields-title-border, #2271b1); */
    padding-bottom: 0.5rem;
}

.ka-product-custom-field {
    margin-bottom: 0.75rem;
    /* Usuwam padding, tło i ramkę */
    /* padding: 0.75rem; */
    /* background: var(--ka-product-custom-field-bg, #fff); */
    /* border: 1px solid var(--ka-product-custom-field-border, #e1e5e9); */
    /* border-radius: var(--ka-product-custom-field-radius, 6px); */
    /* transition: all 0.2s ease; */
}

.ka-product-custom-field:hover {
    /* Usuwam efekty hover */
    /* border-color: var(--ka-product-custom-field-border-hover, #2271b1); */
    /* box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1); */
}

.ka-product-custom-field:last-child {
    margin-bottom: 0;
}

.ka-product-custom-field-label {
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: 600;
    color: var(--ka-product-custom-field-label-color, #1d2327);
    min-width: 120px;
}

.ka-product-custom-field-value {
    color: var(--ka-product-custom-field-value-color, #333);
    line-height: 1.5;
}

/* Style dla różnych typów pól - bez dodatkowych ramek */
.ka-product-custom-field-html {
    margin-top: 0.25rem;
    /* Usuwam padding, tło i ramkę */
    /* padding: 0.75rem; */
    /* background: var(--ka-product-custom-field-html-bg, #f8f9fa); */
    /* border-radius: 4px; */
    /* border-left: 3px solid var(--ka-product-custom-field-html-border, #2271b1); */
}

.ka-product-custom-field-textarea {
    margin-top: 0.25rem;
    /* Usuwam padding, tło i ramkę */
    /* padding: 0.75rem; */
    /* background: var(--ka-product-custom-field-textarea-bg, #f8f9fa); */
    /* border-radius: 4px; */
    white-space: pre-wrap;
    font-family: inherit;
}

.ka-product-custom-field-date {
    color: var(--ka-product-custom-field-date-color, #666);
    font-weight: 500;
}

.ka-product-custom-field-number {
    color: var(--ka-product-custom-field-number-color, #666);
    font-weight: 600;
}

.ka-product-custom-field-description {
    margin-top: 0.25rem;
    font-size: 0.9em;
    color: var(--ka-product-custom-field-description-color, #666);
    font-style: italic;
    line-height: 1.4;
}

/* Responsywność dla pól dodatkowych */
@media (max-width: 768px) {
    .ka-product-custom-fields {
        margin: 0.75rem 0;
        /* Usuwam padding */
        /* padding: 1rem; */
    }
    
    .ka-product-custom-field {
        /* Usuwam padding */
        /* padding: 0.5rem; */
    }
    
    .ka-product-custom-field-label {
        display: block;
        margin-bottom: 0.5rem;
        min-width: auto;
    }
    
    .ka-product-custom-field-value {
        display: block;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .ka-product-custom-fields {
        /* Usuwam padding */
        /* padding: 0.75rem; */
    }
    
    .ka-product-custom-fields-title {
        font-size: 1.1em;
    }
    
    .ka-product-custom-field {
        /* Usuwam padding */
        /* padding: 0.5rem; */
    }
}