/* ==========================================================================
   1. CONFIGURACIÓN BASE Y COLORES (FONDO AMARILLO HEADER)
   ========================================================================== */
#header .header-top {
    background-color: #fad505 !important;
    padding: 12px 0 !important;
}

#header .header-top .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 30px !important;
}

/* ==========================================================================
   2. LOGO (Izquierda)
   ========================================================================== */
#header .header-left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

#_desktop_logo img {
    max-width: 180px !important;
    height: auto !important;
}

/* ==========================================================================
   3. TRANSFORMACIÓN DE LA BARRA DE BÚSQUEDA (Centro - OFGOLD)
   ========================================================================== */
#header .header-center {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 30px !important;
    max-width: 700px !important;
}

/* El contenedor principal en forma de píldora moderna */
#search_block_top .cpsearch-main {
    border-radius: 50px !important; /* Bordes redondeados perfectos */
    background: #f5f6f7 !important; /* Gris claro muy limpio de fondo inicial */
    display: flex !important;
    align-items: center !important;
    border: 2px solid #dcdcdc !important; /* Borde definido pero sutil */
    overflow: hidden !important;
    width: 100% !important;
    max-width: 500px !important;
    height: 44px !important;
    transition: all 0.25s ease-in-out !important;
    padding-left: 15px !important;
}

/* El campo de texto donde se escribe */
#search_block_top #search_query_top {
    padding: 10px 15px !important;
    width: 100% !important;
    border: none !important;
    height: 100% !important;
    font-size: 14px !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: #222222 !important; /* Texto de escritura bien oscuro y legible */
    font-weight: 500 !important;
}

/* Estilo para el texto de guía (Placeholder) */
#search_block_top #search_query_top::placeholder {
    color: #888888 !important;
    font-weight: 400 !important;
}

/* El botón de la lupa convertido en un icono sutil integrado */
#search_block_top .btn.btn-primary {
    background: transparent !important; /* Eliminamos el bloque negro gigante */
    color: #666666 !important; /* Color gris suave para la lupa */
    border: none !important;
    padding: 0 20px 0 10px !important;
    height: 100% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: -1 !important; /* Mueve la lupa a la izquierda de la barra */
}

#search_block_top .btn.btn-primary:hover {
    color: #000000 !important;
}

/* --- EFECTOS INTERACTIVOS DEL BUSCADOR --- */

/* Cuando pasás el mouse por arriba de la barra */
#search_block_top .cpsearch-main:hover {
    border-color: #aaaaaa !important;
    background-color: #ffffff !important;
}

/* Cuando hacés clic adentro para buscar (Efecto marca OFGOLD) */
#search_block_top .cpsearch-main:focus-within {
    background: #ffffff !important; /* Se vuelve blanca por completo */
    border-color: #ffdd00 !important; /* Borde amarillo corporativo de tu logo */
    box-shadow: 0 0 10px rgba(255, 221, 0, 0.35) !important; /* Brillo amarillo suave */
}

/* Cambia el color de la lupa a negro cuando estás escribiendo */
#search_block_top .cpsearch-main:focus-within .btn.btn-primary {
    color: #000000 !important;
}

/* ==========================================================================
   4. ELEMENTOS DERECHA (Iconos y Contraste)
   ========================================================================== */
#header .header-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Forzar que nada se vuelva amarillo al pasar el mouse sobre el fondo amarillo */
#header .header-top a, 
#header .header-top i, 
#header .header-top span {
    color: #222 !important;
    transition: color 0.2s ease;
}

#header .header-top a:hover, 
#header .header-top a:hover i {
    color: #000 !important;
}

/* Carrito */
#_desktop_cart .cart-products-counthome {
    position: absolute !important;
    top: -5px !important;
    left: 15px !important;
    background: #222 !important;
    color: #fff !important;
    font-size: 11px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Forzar que el desplegable del carrito aparezca al hacer hover */
.header-nav #_desktop_cart:hover .cart-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute;
    right: 0;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 999;
    min-width: 300px;
}

/* ==========================================================================
   5. BOTONES GENERALES DE LA WEB
   ========================================================================== */
.btn-primary {
    background-color: #fad505 !important;
    border-color: #fad505 !important;
    color: #222 !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.btn-primary:hover {
    background-color: #222 !important;
    border-color: #222 !important;
    color: #fff !important;
}

/* ==========================================================================
   6. MENÚ PRINCIPAL
   ========================================================================== */
#top-menu > li > a:hover {
    color: #fad505 !important;
}

/* ==========================================================================
   7. BOTÓN DE WHATSAPP EN FICHA (Arriba de compartir)
   ========================================================================== */
.product-whatsapp-container {
    width: 100%;
    display: block;
    clear: both;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

.btn-whatsapp-product {
    background-color: #25D366 !important; /* Verde oficial WhatsApp */
    border: 1px solid #25D366 !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 4px;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-decoration: none !important;
}

.btn-whatsapp-product:hover {
    background-color: #1ebd56 !important; /* Verde más oscuro */
    border-color: #1ebd56 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.btn-whatsapp-product svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    #header .header-top .container {
        flex-wrap: wrap !important;
    }
    #header .header-center {
        order: 3 !important;
        flex: 0 0 100% !important;
        padding: 10px 0 !important;
    }
    #search_block_top #search_query_top {
        width: 100% !important;
    }
}

/* ==========================================================================
   MEJORA DEL MODAL DE CARRITO (POPUP DE CONFIRMACIÓN)
   ========================================================================== */

/* 1. Contenedor del Modal General */
#blockcart-modal .modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

/* 2. Cabecera del Modal (Mensaje de Éxito) */
#blockcart-modal .modal-header {
    background-color: #f8f9fa !important; /* Fondo gris extra limpio */
    border-bottom: 1px solid #eee !important;
    padding: 20px 24px !important;
}

#blockcart-modal .modal-title {
    color: #2cba44 !important; /* El check y el texto en un verde éxito profesional */
    font-weight: 600 !important;
    font-size: 18px !important;
}

#blockcart-modal .close {
    opacity: 0.6;
    transition: opacity 0.2s;
}
#blockcart-modal .close:hover {
    opacity: 1;
}

/* 3. Ajustes de textos internos (Precios y Cantidades) */
#blockcart-modal .product-name {
    font-weight: 700 !important;
    color: #000000 !important;
    font-size: 16px !important;
}

#blockcart-modal .cart-content {
    border-left: 1px solid #eee !important;
    padding-left: 30px !important;
}

#blockcart-modal .cart-content p {
    margin-bottom: 10px !important;
    color: #444444 !important;
}

#blockcart-modal .cart-content p strong, 
#blockcart-modal .product-price,
#blockcart-modal .cart-products-count {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Separador del Total */
#blockcart-modal .cart-content p.product-total,
#blockcart-modal .cart-content p:last-of-type {
    border-top: 2px dashed #e9ecef !important;
    padding-top: 12px !important;
    font-size: 16px !important;
}

/* 4. SECCIÓN DE BOTONES (PIE DEL MODAL) */
#blockcart-modal .modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #eee !important;
    padding: 20px 24px !important;
    gap: 12px !important;
}

/* BOTÓN: Continuar Comprando (Izquierda) */
#blockcart-modal .btn-secondary,
#blockcart-modal .modal-footer .btn-secondary {
    background-color: #ffffff !important;
    border: 2px solid #222222 !important; /* Adiós al azul colgado */
    color: #222222 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

#blockcart-modal .btn-secondary:hover,
#blockcart-modal .modal-footer .btn-secondary:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* BOTÓN: Finalizar Compra / Pasar por caja (Derecha) */
#blockcart-modal .btn-primary,
#blockcart-modal .modal-footer .btn-primary {
    background-color: #222222 !important; /* Fondo negro elegante de base */
    border: 2px solid #222222 !important;
    color: #ffffff !important;             /* Letras blancas legibles */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.25s ease !important;
}

#blockcart-modal .btn-primary:hover,
#blockcart-modal .modal-footer .btn-primary:hover {
    background-color: #fad505 !important; /* Explota el amarillo OFGOLD al pasar el mouse */
    border-color: #fad505 !important;
    color: #222222 !important;             /* Texto oscuro para contraste */
    box-shadow: 0 6px 15px rgba(250, 213, 5, 0.3) !important;
}

/* Ajustes Responsive para Pantallas Chicas */
@media (max-width: 767px) {
    #blockcart-modal .cart-content {
        border-left: none !important;
        border-top: 1px solid #eee !important;
        padding-left: 0 !important;
        padding-top: 20px !important;
        margin-top: 20px !important;
    }
    #blockcart-modal .modal-footer {
        flex-direction: column-reverse !important;
    }
    #blockcart-modal .modal-footer .btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   BLOQUEO TOTAL DEL CARTEL AZUL "FUERA DE STOCK" SOBRE LA IMAGEN
   ========================================================================== */

/* Apuntamos a todas las variantes posibles de etiquetas que usa Hummingbird */
.product-flag.out_of_stock,
.product-flag.out-of-stock,
.product-flags .out_of_stock,
.product-flags .out-of-stock,
.product-labels .out-of-stock,
[data-flag="out_of_stock"],
.product__flags .out_of_stock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Selector de máxima prioridad */
body .account .account-menu a#facturas-link.active, 
body .account .account-menu a#facturas-link.active .link-item, 
body .account .account-menu a#facturas-link.active .link-item i {
    color: var(--bs-primary) !important;
}

/* Oculta los mensajes de requisitos de contraseña */
.password-requirements, /* Ajusta esta clase si es diferente en tu tema */
.password-requirements-list,
.password-strength-meter,
.form-group-password .text-muted, 
.form-group-password .help-block {
    display: none !important;
}