/* --- 1. IMPORTAR FUENTE ELEGANTE (Montserrat) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');

body, h1, h2, h3, h4, p, a, span, .menu-title {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- 2. COLORES Y FONDO (Elige uno comentando el otro) --- */
/* Opción A: Blanco Puro (Estilo Canica) */
body, #page, .columns-container { background-color: #ffffff !important; }

/* Opción B: Verde Grisáceo Apagado (Descomenta borrando las barras si prefieres este) */
/* body, #page { background-color: #F0F2F1 !important; } */

/* --- 3. LIMPIEZA VISUAL DE PRODUCTOS (GRID) --- */
/* Quitar bordes y sombras de las fichas de producto en la home */
.product-miniature, .product-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Centrar texto y ponerlo negro fino */
.product-title a {
    color: #000000 !important;
    font-weight: 400 !important; /* 300 es muy fino, 400 es normal-fino */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas como Canica */
    font-size: 13px !important;
    letter-spacing: 1px; /* Espacio entre letras elegante */
}
.price {
    color: #333333 !important;
    font-weight: 300 !important;
    text-align: center;
    display: block;
}

/* --- 4. CABECERA LIMPIA --- */
/* Fondo blanco para el menú */
#header, .header-container {
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f0f0f0; /* Una línea sutil abajo */
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999;
    transition: all 0.3s ease;
    padding: 10px; /* Ajuste para el icono SVG */
}
.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1); /* Efecto pop al pasar el ratón */
}

/* Contenedor de la imagen con overflow hidden para que no se salga */
.product-thumbnail, .product-image-container {
    overflow: hidden !important;
}

/* La imagen en sí */
.product-thumbnail img, .product-image-container img {
    transition: transform 0.6s ease !important; /* Animación lenta y elegante */
}

/* El efecto al pasar el ratón */
.product-miniature:hover img, .product-container:hover img {
    transform: scale(1.05) !important; /* Aumenta un 5% el tamaño */
    opacity: 0.9; /* Un pelín de transparencia */
}

.promo-top-bar {
    background-color: #000000; /* Fondo Negro */
    color: #ffffff; /* Letra Blanca */
    text-align: center;
    font-size: 11px;
    letter-spacing: 2px; /* Espacio entre letras elegante */
    text-transform: uppercase;
    padding: 8px 0;
    width: 100%;
    font-weight: 500;
}
/* Para que no se pegue al techo si hay margen */
body { margin-top: 0 !important; }

/* search leo personalizado */
#product .exclusive{display: none !important;}
#order-confirmation .featured-products {display: none !important;}

@media (max-width: 576px) {
    .header-top logo{width: 150px !important;}
}