/* === Horizontal carousel for subcategories === */

.category-list {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding-bottom: 10px;
}

/* Remove default Bootstrap row spacing */
.category-list.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Elements in a row (mobile carousel) */
.category-list > div {
    flex: 0 0 45%;  /* 2 elements per row */
    max-width: 45%;
    scroll-snap-align: start;
}

/* Tablets */
@media (min-width: 576px) {
    .category-list > div {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

/* Desktop — return classic grid */
@media (min-width: 992px) {
    .category-list {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .category-list > div {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* === Always visible scrollbar for .category-list === */

.category-list {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 5px;
    padding-bottom: 10px;

    /* Always show scrollbar (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #c5c5c5 #f1f1f1;
}

/* Chrome / Safari / Edge scrollbar styling */
.category-list::-webkit-scrollbar {
    height: 8px; /* height of horizontal scroll */
}

.category-list::-webkit-scrollbar-track {
    background: #f1f1f1; /* background of track */
    border-radius: 4px;
}

.category-list::-webkit-scrollbar-thumb {
    background: #bdbdbd; /* scrollbar handle color */
    border-radius: 4px;
}

.category-list::-webkit-scrollbar-thumb:hover {
    background: #9a9a9a; /* handle hover color */
}

/* Mobile widths for elements */
.category-list > div {
    flex: 0 0 45%;
    max-width: 45%;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .category-list > div {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media (min-width: 992px) {
    .category-list {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .category-list::-webkit-scrollbar {
        display: none; /* hide scrollbar on desktop */
    }
    .category-list > div {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


/* === Home menu mobile grid (2 tiles per row) === */
@media (max-width: 991px) {

    /* Tiles container */
    .category-wall .uni-module__wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between;
        gap: 15px; /* spacing between tiles */
    }

    /* Two tiles per row */
    .category-wall .category-wall__item {
        width: calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
    }
}


/* === Featured products: force show attributes on mobile === */

/* Show product attributes and description on mobile */
@media (max-width: 575px) {
    .product-grid {
        .product-thumb__description,
        .product-thumb__attribute,
        .product-thumb .product-thumb__description {
            display: block !important;
        }
    }

}

/* Fix for UniModule blocks (Recommended, New, Hits) */
@media (max-width: 1200px) {
    .uni-module .product-thumb__description,
    .uni-module .product-thumb__attribute {
        display: block !important;
    }
}

/* Show icons in button on smaller screens */
@media (max-width: 1200px) {
    .product-thumb__add-to-cart i {
        display: inline-block !important;
    }
    .product-thumb__add-to-cart span {
        margin: 0 0 0 7px !important;
    }
}