/* ===================================================
   TEMA HIJO - COLMADO QUÍLEZ / LAFUENTE
=================================================== */

/* Importar la fuente de Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* 1. FUENTE GLOBAL (Aplicamos Montserrat a todo, EXCEPTO a los iconos) */
body, h1, h2, h3, h4, h5, h6, p, a, div, li, ul, span:not(.material-icons), button:not(.material-icons) {
    font-family: 'Montserrat', sans-serif !important;
}

/* 2. BLINDAJE ABSOLUTO DE ICONOS */
.material-icons, 
.material-icons-outlined,
i.material-icons,
span.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    /* Esta es la regla clave que dibuja el icono: */
    font-feature-settings: 'liga' !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
}



/* ---------------------------------------------------
   1. FILTROS Y CABECERA
--------------------------------------------------- */
/* Scroll filtros */
#search_filters .facet ul:not(.faceted-slider) {
    max-height: 165px; 
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px; 
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}
#search_filters .facet ul::-webkit-scrollbar { width: 6px; }
#search_filters .facet ul::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
#search_filters .facet ul::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

/* Buscador filtros */
#search_filters .facet-search-wrapper { max-width: 200px !important; flex: 0 0 auto !important; align-self: flex-start !important; }
#search_filters .facet-search-input { width: 100% !important; box-sizing: border-box; padding: 4px 8px; font-size: 13px; }

/* Idiomas */
#_desktop_language_selector .btn-unstyle, #_desktop_language_selector .dropdown-item { display: inline-flex; align-items: center; gap: 8px; }
#_desktop_language_selector .lang-iso { font-weight: bold; text-transform: uppercase; font-size: 13px; }
#_desktop_language_selector img { vertical-align: middle; border: 1px solid #ddd; }


/* ---------------------------------------------------
   2. ESTRUCTURA PRINCIPAL (80% y 2 Columnas)
--------------------------------------------------- */
/* Ancho de la web al 80% */
@media (min-width: 1200px) {
    .container, #header .container, #wrapper .container, #footer .container {
        max-width: 90% !important; 
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 2 Columnas exactas (22% menú - 78% contenido) */
@media (min-width: 768px) {
    body.layout-left-column #wrapper > .container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    body.layout-left-column #left-column {
        width: 22% !important;
        flex: 0 0 22% !important;
        padding-right: 20px !important;
    }
    body.layout-left-column #content-wrapper {
        width: 78% !important;
        flex: 0 0 78% !important;
    }
}


/* ---------------------------------------------------
   3. REJILLA DE PRODUCTOS (Universal y a prueba de fallos)
--------------------------------------------------- */
@media (min-width: 992px) {
    /* Forzamos salto de línea */
    #js-product-list .products, .featured-products .products, #products .products {
        display: flex !important;
        flex-wrap: wrap !important; 
        flex-direction: row !important;
        width: 100% !important;
    }
    /* Todo lo que haya dentro medirá el 25% (4 columnas) */
    #js-product-list .products > *, .featured-products .products > *, #products .products > * {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important; 
        padding: 0 10px 20px 10px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .product-miniature {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Tablets (3 columnas) */
@media (min-width: 768px) and (max-width: 991px) {
    #js-product-list .products > *, .featured-products .products > *, #products .products > * {
        width: 33.333% !important; max-width: 33.333% !important; flex: 0 0 33.333% !important; padding: 0 10px 20px 10px !important; box-sizing: border-box !important;
    }
}

/* Móviles (2 columnas) */
@media (max-width: 767px) {
    #js-product-list .products > *, .featured-products .products > *, #products .products > * {
        width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding: 0 5px 15px 5px !important; box-sizing: border-box !important;
    }
}