/**
 * WooCommerce CSS
 * 
 * WooCommerce specific styles and customizations
 * 
 * @package Kindi
 * @since 1.0.0
 */

/* ============================================
   CAROUSEL CUSTOMIZATION
   ============================================ */

.wp-block-cb-carousel-v2 {
    /* Navigation */
    --wp--custom--carousel-block--navigation-size: 12px;
    --wp--custom--carousel-block--navigation-sides-offset: 0px;
    --wp--custom--carousel-block--navigation-color: #000000;
    --wp--custom--carousel-block--navigation-alignfull-color: #ffffff;
    
    /* Pagination (dots) - styled to match kcover sage green theme */
    --wp--custom--carousel-block--pagination-bullet-size: 12px;
    --wp--custom--carousel-block--pagination-bullet-color: #c4cab9;
    --wp--custom--carousel-block--pagination-bullet-active-color: #8a9676;
    --wp--custom--carousel-block--pagination-bullet-opacity: 0.6;
    --wp--custom--carousel-block--pagination-bullet-active-opacity: 1;
    --wp--custom--carousel-block--pagination-bullet-horizontal-gap: 8px;
    --wp--custom--carousel-block--pagination-bullet-vertical-gap: 8px;
    
    /* Remove bottom spacing */
    /* padding-bottom: 0 !important;
    margin-bottom: 0 !important; */
}

/* Remove bottom spacing from carousel pagination and move it up */
 /* .wp-block-cb-carousel-v2 .cb-pagination {
    margin-bottom: 0 !important;
    bottom: 10px !important;
} */

/* ============================================
   PRODUCT IMAGE HOVER EFFECTS
   ============================================ */

/* Base image style */
.wc-block-components-product-image img {
    transition: all 0.3s ease-in-out; /* smooth transition */
    transform: scale(1); /* default scale */
}

/* Hover effect */
.wc-block-components-product-image:hover img {
    transform: scale(1.05); /* slightly zoom in */
    filter: brightness(1.05); /* make it a bit brighter */
}

/* ============================================
   MOBILE PRODUCT SLIDER FIXES
   ============================================ */

/* Fix small product items in WooCommerce Product Collection slider on mobile */
@media (max-width: 768px) {
    .wc-block-product-template, 
    .wc-block-grid__product, 
    .wc-block-components-product-image, 
    .wc-block-grid__products li {
        flex: 0 0 80% !important; /* each product takes 80% of the width */
        max-width: 80% !important;
        margin-right: 10px; /* small gap between slides */
    }

    /* Optional: make sure images fill the width nicely */
    .wc-block-components-product-image img {
        width: 100%;
        height: auto;
    }

    /* Optional: adjust text alignment for mobile */
    .wc-block-grid__product .wc-block-components-product-title,
    .wc-block-grid__product .wc-block-components-product-price {
        text-align: center;
    }

    /* Fix product image gallery width on mobile */
    .single-product .wc-block-product-gallery-large-image-next-previous-container {
        width: 68%;
    }

    /* Ensure next/previous buttons are visible on mobile */
    .wc-block-next-previous-buttons[hidden],
    .wc-block-next-previous-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;
        pointer-events: none !important; /* Allow touch events to pass through container */
    }

    .wc-block-next-previous-buttons__button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important; /* But enable clicks on the actual buttons */
    }

    .wc-block-next-previous-buttons__icon {
        display: block !important;
        margin: auto !important;
    }
}