/* WooCommerce Subcategory Carousel Styles */

/* Main container styling */
.wc-carousel-fluid-container {
    /* Padding will be set by specific media query below for larger screens */
}

/* Scrollable container for the thumbnails */
.wc-subcategory-scroll-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth; /* Smooth scrolling when buttons are clicked */
    scroll-snap-type: x mandatory; /* Snap items to the scroll positions */
    padding-bottom: 0; /* Remove padding-bottom for scrollbar */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.wc-subcategory-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}


/* Individual subcategory item styling */
.wc-subcategory-item {
    scroll-snap-align: start; /* Align items to the start of the snap area */
    box-sizing: border-box; /* Include padding in width calculations */
    /* Remove left/right padding to avoid double gap */
    padding-left: 0;
    padding-right: 0;
}

.wc-subcategory-item a {
    display: block; /* Make the whole item clickable */
}

.wc-subcategory-item img {
    /* Removed border-radius: 50%; to ensure square shape with .25rem from wrapper */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.wc-subcategory-item a:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Removed .wc-subcategory-name styles as the element is no longer present */

/* Responsive Grid Logic (for items visible per row and thumbnail sizes) */

/* Mobile Portrait (default: xs to sm devices, up to 767.98px): 3 items per row, smaller thumbnails */
.wc-subcategory-item {
    width: calc(100% / 4); /* 4 items visible, each taking 1/4 of the container width */
    padding: 2px; /* Reduced padding for mobile to make gap smaller */
    scroll-snap-align: start; /* Align items to the start of the snap area */
    box-sizing: border-box; /* Include padding in width calculations */
}

.wc-subcategory-item .thumbnail-wrapper {
    width: 80px; /* Smaller fixed size for mobile thumbnails */
    height: 80px;
    border-radius: .25rem; /* Explicitly set border-radius for square shape */
    overflow: hidden;
    margin: auto;
    border: 1px solid #dee2e6;
}

/* Tablet Portrait (md: >= 768px): 5 items per row, medium thumbnails */
@media (min-width: 768px) {
    .wc-subcategory-item {
        width: calc(100% / 5); /* 5 items visible */
        padding: 10px; /* Standard padding for tablet portrait */
    }
    .wc-subcategory-item .thumbnail-wrapper {
        width: 100px; /* Medium image size for tablet */
        height: 100px;
    }
}

/* Tablet Landscape and larger (lg: >= 992px, up to 1399px): 6 items per row, slightly larger thumbnails */
@media (min-width: 992px) {
    .wc-subcategory-item {
        width: calc(100% / 6); /* 6 items visible */
        padding: 12px; /* Adjusted padding for tablet landscape */
    }
    .wc-subcategory-item .thumbnail-wrapper {
        width: 120px; /* Slightly larger thumbnail for tablet landscape */
        height: 120px;
    }
}

/* Desktop (new xl: >= 1400px): 8 items per row, larger thumbnails */
@media (min-width: 1400px) {
    .wc-subcategory-item {
        width: calc(100% / 7); /* 7 items visible */
        padding: 5px; /* Reduced padding for desktop to make items closer */
    }
    .wc-subcategory-item .thumbnail-wrapper {
        width: 150px; /* Larger image size for desktop */
        height: 150px;
    }
}

/* Navigation Buttons (Desktop only) */
.wc-scroll-button {
    background-color: transparent; /* Make background transparent */
    color: white; /* Icon color (if using text or certain SVG fills) */
    border: none; /* Remove border */
    border-radius: 0; /* Make them square if they were rounded */
    width: 40px; /* Width of the clickable area */
    height: 40px; /* Height of the clickable area */
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease; /* Transition for opacity change on hover */
    box-shadow: none; /* Remove shadow */
    top: 50%; /* Position at 50% from the top */
    transform: translateY(-50%); /* Pull back by half its height for perfect vertical centering */
    opacity: 0.7; /* Default opacity for icons */
}

.wc-scroll-button:hover {
    background-color: transparent; /* Keep background transparent on hover */
    opacity: 1; /* Full opacity on hover */
    transform: translateY(-50%); /* Ensure vertical centering is maintained */
}

.wc-scroll-button.wc-scroll-left {
    left: 0;
    margin-left: -40px; /* Pull button completely outside to the left */
}

.wc-scroll-button.wc-scroll-right {
    right: 0;
    margin-right: -40px; /* Pull button completely outside to the right */
}

/* Bootstrap 4 carousel icon styling override */
/* Ensure icons are visible and sized correctly within the custom buttons */
.wc-scroll-button .carousel-control-prev-icon,
.wc-scroll-button .carousel-control-next-icon {
    display: inline-block; /* Make sure they are visible */
    width: 20px; /* Standard icon size */
    height: 20px; /* Standard icon size */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Ensure the background image fits */
}

/* Default Bootstrap 4 icons (These are the SVG background images for the icons) */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}


/* Hide buttons on screens smaller than large (LG) breakpoint */
@media (max-width: 991.98px) {
    .wc-scroll-button {
        display: none !important; /* Ensure buttons are hidden on mobile/tablet */
    }
}

/* Specific padding for large devices (new xl: >= 1400px) */
@media (min-width: 1400px) {
    .wc-carousel-fluid-container {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}