/* Custom CSS */
/* Configurar el contenedor para que sea una rejilla flexible */
#subcategories ul, 
.subcategories-list, 
.js-subcategories-slider {
    display: grid !important;
    /* Esto crea 5 columnas exactas del mismo tamaño */
    grid-template-columns: repeat(5, 1fr) !important; 
    /* Espacio de separación entre las subcategorías (tanto horizontal como vertical) */
    gap: 20px !important; 
    /* Desactivamos el comportamiento de carrusel/desplazamiento horizontal */
    transform: none !important; 
    width: 100% !important;
    box-sizing: border-box;
}

/* Ajustar los elementos individuales dentro de la rejilla */
#subcategories ul li, 
.subcategories-list .item, 
.js-subcategories-slider .slick-slide {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
}

/* Opcional: Para que en móviles no se vean 5 minúsculas enanos, sino 2 por fila */
@media (max-width: 767px) {
    #subcategories ul, 
    .subcategories-list, 
    .js-subcategories-slider {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
}

/* SOLUCIÓN RADICAL PARA TEMPLATEMELA: Ocultar duplicado del carrito */
.cart-content-btn, 
div.cart-content-btn, 
#blockcart-modal .modal-body .cart-content-btn {
    display: none !important;
}

/* Forzar que la fila superior que sí funciona se mantenga visible */
#blockcart-modal .modal-body .cart-content .btn-group,
#blockcart-modal .modal-body div.cart-content-btn + div.btn-group {
    display: flex !important;
}