/* =========================================================
   TEMA CUCAMONAS - ESTILOS PERSONALIZADOS
   ========================================================= */

/* 1. AJUSTE DE LA CABECERA Y EL LOGO */
#_desktop_logo img {
    max-height: 75px; /* Limita la altura del logo. Cámbialo si lo quieres más grande o más pequeño */
    width: auto;
}

#header .header-top {
    padding-top: 10px; /* Reduce el espacio por arriba */
    padding-bottom: 10px; /* Reduce el espacio por abajo */
}

/* Centrar verticalmente el buscador y el carrito con el nuevo tamaño del logo */
#header .header-top .search-widget,
#header .header-top .blockcart {
    margin-top: 10px; 
}


/* 2. COLORES CORPORATIVOS (Basados en el mono y el beige) */
/* Cambiamos el color azul oscuro por defecto por el marrón de Cucamonas */
a {
    color: #8c5a35;
}
a:hover {
    color: #5c3920;
}

/* Botones principales (Añadir al carrito, etc.) */
.btn-primary {
    background-color: #8c5a35;
    border-color: #8c5a35;
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #6b4326;
    border-color: #6b4326;
}

/* Barra superior (donde pone Iniciar Sesión) con el tono beige del logo */
#header .header-nav {
    background-color: #fdf9f2;
    border-bottom: 1px solid #e8e0d5;
}
#header .header-nav a {
    color: #5c3920;
}


/* 3. ESTILO "INFANTIL" (Bordes redondeados) */
/* Botones más amigables */
.btn {
    border-radius: 20px;
}

/* Cajas de texto y buscador redondeados */
.form-control, .search-widget form input[type=text] {
    border-radius: 15px;
}

/* Etiquetas de productos (Ej: "Nuevo", "Rebajado") con el rosita del chupete */
.product-flag {
    background-color: #f2c2b3;
    color: #5c3920;
    font-weight: bold;
    border-radius: 10px;
}

/* ========================================================= */
/* 4. OCULTAR ELEMENTOS NO DESEADOS (RECUADROS FANTASMA)     */
/* ========================================================= */
#subcategories, .block-subcategories {
    display: none !important;
}

/* ========================================================= */
/* 5. REDUCIR EL RECUADRO GIGANTE DE "INICIO" Y CATEGORÍAS   */
/* ========================================================= */
.block-category {
    min-height: auto !important;     /* Quita la altura gigante que trae por defecto */
    padding: 15px 20px !important;   /* Reduce muchísimo el espacio blanco interior */
    margin-bottom: 15px !important;  /* Acerca los productos de abajo hacia arriba */
}

.block-category h1 {
    font-size: 1.5rem !important;    /* Hace la letra un poco más fina y menos "gritona" */
    margin-bottom: 0 !important;     /* Quita el margen debajo de la letra */
}

/* ========================================================= */
/* 6. SOLUCIÓN DEFINITIVA: 2 COLUMNAS CENTRADAS (CSS GRID)   */
/* ========================================================= */
@media (max-width: 767px) {
    /* Seleccionamos todos los posibles contenedores de productos */
    #content .products, 
    #products .products, 
    .featured-products .products,
    #content-wrapper .products.row,
    section#products .products {
        display: grid !important;
        /* Creamos dos columnas exactamente iguales */
        grid-template-columns: 1fr 1fr !important; 
        /* Espacio equilibrado entre columnas y filas */
        gap: 10px !important; 
        /* Centramos la cuadrícula completa */
        justify-content: center !important;
        align-items: start !important;
        width: 100% !important;
        padding: 0 10px !important; /* Margen lateral para que no toquen el borde de la pantalla */
        margin: 0 auto !important;
    }

    /* Forzamos a que cada miniatura use todo su espacio asignado en la rejilla */
    .product-miniature, 
    #content .product-miniature,
    .featured-products .product-miniature,
    .products .col-xs-12,
    .products .col-sm-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Contenedor interno para que se vea limpio y profesional */
    .thumbnail-container {
        padding: 8px !important;
        border: 1px solid #f2f2f2 !important;
        background: #fff !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Ajustes de texto para evitar descuadres */
    .product-title {
        font-size: 11px !important;
        text-align: center !important;
        height: 32px !important;
        overflow: hidden !important;
        margin: 5px 0 !important;
        line-height: 1.2 !important;
    }

    .product-price-and-shipping {
        font-size: 13px !important;
        text-align: center !important;
        font-weight: bold !important;
        padding-bottom: 5px !important;
    }
}