/* KG Loop Slider Styles - Slider zdjęć w pętli produktów */

.kg-loop-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Wymusza proporcje 1:1 (kwadrat) */
    background: #ffffff; /* Białe tło */
    box-sizing: border-box;
}

.kg-loop-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Wyłącz klikalnosc zdjęć w sliderze */
.kg-loop-slider .swiper-slide img {
    pointer-events: none;
    user-select: none;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Pokazuje całe zdjęcie bez przycinania */
    object-position: center; /* Centruje obraz */
    display: block;
}

/* Przyciski nawigacyjne */
.kg-swiper-button-prev,
.kg-swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    z-index: 100;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 1;
}

.kg-swiper-button-prev {
    left: 10px;
}

.kg-swiper-button-next {
    right: 10px;
}

/* Strzałki */
.kg-swiper-button-prev::after,
.kg-swiper-button-next::after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.kg-swiper-button-prev::after {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.kg-swiper-button-next::after {
    transform: rotate(45deg);
    margin-right: 3px;
}

.kg-swiper-button-prev:hover,
.kg-swiper-button-next:hover {
    background: rgba(0, 0, 0, 1);
    transform: translateY(-50%) scale(1.1);
}

/* Stan disabled */
.kg-swiper-button-prev.swiper-button-disabled,
.kg-swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Globalne style dla obrazów produktów w pętli WooCommerce - wymuszenie 1:1 */
.woocommerce ul.products li.product .wc-product-image,
.woocommerce ul.products li.product .inside-wc-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Wymusza proporcje 1:1 */
    overflow: hidden;
    background: #ffffff; /* Białe tło */
}

/* Zapewnia że kontener obrazu ma kwadratowe proporcje */
.woocommerce ul.products li.product .wc-product-image > a,
.woocommerce ul.products li.product .inside-wc-product-image > a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Style dla pojedynczych obrazów które nie są w sliderze */
.woocommerce ul.products li.product .wc-product-image img:not(.kg-loop-slider img),
.woocommerce ul.products li.product .inside-wc-product-image img:not(.kg-loop-slider img) {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Pokazuje całe zdjęcie */
    object-position: center;
    display: block;
}
