/* --- REAJUSTE DE COLORES CELESTUNE --- */

/* --- EL TOQUE DE MIDA FINAL: CARRITO DE ORO REAL --- */

/* 1. Aplicamos el degradado metálico al botón de compra */
.btn-primary.add-to-cart {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    border: 1px solid #8a6d3b !important;
    color: #2c3e50 !important; /* Texto en azul noche para que resalte sobre el brillo del oro */
    font-weight: 900 !important;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* 2. El icono del carrito también en azul noche */
.btn-primary.add-to-cart i {
    color: #2c3e50 !important;
}

/* 3. Efecto al pasar el ratón (más brillo) */
.btn-primary.add-to-cart:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4) !important;
}

/* 4. Unificar el botón de reseña con un borde de oro para que no quede "suelto" */
.post-product-comment {
    border: 2px solid #b38728 !important;
}

/* 2. Botón GUARDAR PERSONALIZACIÓN -> Azul Noche (estilo reseñas) */
.product-customization .btn-primary {
    background-color: #2c3e50 !important; /* Azul noche elegante */
    border: 1px solid #D4AF37 !important; /* Mantenemos el borde dorado para elegancia */
    color: white !important;
    transition: all 0.3s ease;
}

.product-customization .btn-primary:hover {
    background-color: #1a252f !important; /* Más oscuro al tocarlo */
    border-color: #fff !important;
}

/* 3. Asegurar que el botón de reseñas y el de "sea el primero" sean consistentes */
.post-product-comment,
#product-comments-list-header .post-product-comment {
    background-color: #2c3e50 !important;
    border: 1px solid #D4AF37 !important;
    color: white !important;
}

/* --- ELIMINAR EL TURQUESA DE LAS PESTAÑAS --- */

/* 1. Cambiar el color de la línea activa y del texto al Azul Noche */
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-item.show .nav-link {
    border-bottom: 3px solid #2c3e50 !important; /* El azul noche que usamos en reseñas */
    color: #2c3e50 !important;
}

/* 2. Opcional: Un toque dorado sutil al pasar el ratón por encima */
.tabs .nav-tabs .nav-link:hover {
    border-bottom: 3px solid #B8860B !important;
    color: #2c3e50 !important;
}

/* 3. Por si el texto de la referencia también necesita un ajuste */
.product-reference span,
.product-reference label {
    color: #2c3e50 !important;
    font-weight: 500;
}

/* --- ICONOS SOCIALES: CENTRADO MILIMÉTRICO CELESTUNE --- */

/* 1. Contenedor */
.social-sharing ul {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin: 25px 0 !important;
    list-style: none !important;
    gap: 15px;
}

/* 2. La Moneda (Círculo) */
.social-sharing li {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 45%, #b38728 55%, #aa771c 100%) !important;
    border-radius: 50% !important;
    position: relative !important; /* Necesario para el centrado absoluto */
    display: block !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.6) !important;
    border: 1px solid #8a6d3b !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer;
    overflow: visible !important;
}

/* 3. Escondemos el texto original (Compartir, etc) */
.social-sharing li a {
    text-indent: -9999px !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 4. LA LETRA: Centrado Matemático Absoluto */
.social-sharing li a::after {
    text-indent: 0 !important; /* Traemos la letra de vuelta */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* El secreto del centrado perfecto */
    color: #1a252f !important; /* Azul noche muy oscuro para que resalte */
    font-family: 'Georgia', serif !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    visibility: visible !important;
    line-height: 1 !important;
    display: block !important;
}

/* Asignamos las iniciales */
.social-sharing li.facebook a::after { content: "F" !important; }
.social-sharing li.twitter a::after  { content: "X" !important; }
.social-sharing li.pinterest a::after { content: "P" !important; }

/* 5. Tooltip (Burbuja azul) mejorado */
.social-sharing li::before {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a252f;
    color: #fcf6ba;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    border: 1px solid #bf953f;
    z-index: 100;
}

/* Nombres de las redes */
.social-sharing li.facebook:hover::before { content: 'Facebook'; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.social-sharing li.twitter:hover::before  { content: 'X (Twitter)'; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.social-sharing li.pinterest:hover::before { content: 'Pinterest'; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* 6. Efecto Hover en la moneda */
.social-sharing li:hover {
    transform: scale(1.1) translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

/* --- ELIMINAR "DETALLES DEL PRODUCTO" DEFINITIVAMENTE --- */

/* 1. Oculta el enlace de la pestaña por su destino */
.nav-tabs .nav-item a[href="#product-details"],
.nav-tabs .nav-item a[data-target="#product-details"],
#product-details-tab {
    display: none !important;
}

/* 2. Oculta el contenedor de la pestaña (la cajita que sobra) */
.nav-tabs li:has(a[href="#product-details"]) {
    display: none !important;
}

/* 3. Por si el tema usa clases en lugar de IDs */
.product-details, 
#product-details {
    display: none !important;
}

/* 4. Si el título sigue ahí como un texto suelto, esto lo remata */
.tabs .nav-tabs .nav-link:contains("Detalles del producto") {
    display: none !important;
}
/* ==========================================================
   TEXTOS EN ORO Y ESTRELLAS - ESTILO CELESTUNE
   ========================================================== */

/* 1. TEXTO DEL CUERPO GENERAL (El "Cielo Estrellado") */
/* Aplicamos blanco suave a párrafos, listas, etiquetas y descripciones de productos */
body, 
p, 
li, 
label, 
.text-muted, 
.product-reference,
#product-details span {
    color: #e0e0e0 !important; /* Un blanco suave, no puro, para un look más premium */
}

/* 2. TÍTULOS (El "Oro Solar") */
/* Aplicamos el oro metálico de Celestune a todos los títulos principales y secundarios */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6,
.product-title,
.category-title {
    color: #bf953f !important; /* Oro rico de Celestune */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Pequeña sombra para dar relieve */
}

/* 3. ENLACES Y TEXTO DEL PIE DE PÁGINA (Unificamos con el resto) */
#footer a, 
.footer-container a {
    color: #e0e0e0 !important; /* Enlaces en blanco suave por defecto */
    transition: color 0.3s ease;
}

/* Títulos del footer a Oro */
#footer .block-contact .h3,
#footer .block-contact .title,
#footer .h3.title-footer {
    color: #bf953f !important;
}

/* Todo el texto de "Información de la tienda" a blanco suave */
#footer .block-contact,
#footer .block-contact p,
#footer .block-contact span,
#footer .block-contact div {
    color: #e0e0e0 !important;
}

/* Efecto hover en los enlaces del footer a un Oro más claro */
#footer a:hover, 
.footer-container a:hover {
    color: #fcf6ba !important; /* Oro claro */
    text-decoration: none !important;
}

/* Texto del Copyright al final a blanco suave */
.copyright {
    color: #e0e0e0 !important;
}

/* 4. AJUSTES EN PÁGINA DE PRODUCTO */
/* Título "Compartir" a Oro */
.social-sharing span {
    color: #bf953f !important;
}

/* Texto de "Personalización del producto" */
.customization-message label {
    color: #bf953f !important; /* Títulos de campos a Oro */
}
.customization-message span {
    color: #e0e0e0 !important; /* Texto de descripción a blanco suave */
}
/* Caja de personalización: La hacemos oscura con borde oro */
.product-customization {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #bf953f !important;
    border-radius: 6px;
    padding: 15px;
}

/* 5. NEWSLETTER Y OTRAS ZONAS */
/* Texto de descripción del newsletter */
.block_newsletter p {
    color: #e0e0e0 !important;
}

/* ==========================================================
   FONDO CÓSMICO PREMIUM CELESTUNE - EFECTO CRISTAL AHUMADO
   ========================================================== */

/* 1. La imagen de fondo */
body {
    background-image: url('https://celestune.es/img/espacio-fondo.jpg') !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

#wrapper {
    background-color: transparent !important;
}

/* 2. EL CRISTAL AHUMADO: Cajas oscuras elegantes para que el texto se lea perfectamente */
#content, 
.page-content,
.product-customization, /* Arregla la caja blanca fea */
.card,
#footer {
    background-color: rgba(10, 15, 25, 0.85) !important; /* Azul noche muy oscuro, casi opaco */
    border: 1px solid rgba(191, 149, 63, 0.3) !important; /* Borde de hilo de oro */
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;
    margin-bottom: 25px !important;
}

/* 3. Textos en Blanco y Oro para contrastar con el fondo oscuro */
body, p, li, label, .text-muted, .product-information {
    color: #f0f0f0 !important; /* Blanco suave */
}

h1, h2, h3, .h1, .h2, .h3, .product-title {
    color: #bf953f !important; /* Oro */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* 4. Arreglar las cajitas de texto donde el cliente escribe su personalización */
.customization-message textarea,
.customization-message input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid #bf953f !important;
}
.customization-message label {
    color: #bf953f !important; /* Títulos de "Introduce nombre..." en oro */
}
/* ==========================================================
   MODO OSCURO TOTAL CELESTUNE (LA SOLUCIÓN DEFINITIVA)
   ========================================================== */

/* 1. Fondo oscuro para las cajas principales (Productos, CMS, Carrito) */
#main, 
#content, 
.page-content, 
.card, 
.rte,
.block-category {
    background-color: rgba(10, 15, 25, 0.85) !important; /* Cristal ahumado oscuro */
    border: 1px solid rgba(191, 149, 63, 0.3) !important; /* Borde de oro sutil */
    border-radius: 12px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.8) !important;
    padding: 25px !important;
}

/* 2. "Aspiradora Total": Matar el fondo blanco de CUALQUIER elemento interno */
#main *, 
#content *, 
.rte * {
    background-color: transparent !important;
}

/* 3. Forzar texto legible (Blanco roto) en todas partes */
#main p, #main li, #main span, #main div,
#content p, #content li, #content span, #content div,
.rte p, .rte li, .rte span, .rte div {
    color: #e0e0e0 !important; /* Blanco muy suave, no daña la vista */
    line-height: 1.8 !important; /* Más espacio para leer mejor */
}

/* 4. Respetar tus títulos en Oro Celestune */
#main h1, #main h2, #main h3, #main strong, #main b,
#content h1, #content h2, #content h3, #content strong, #content b,
.rte h1, .rte h2, .rte h3, .rte strong, .rte b {
    color: #bf953f !important; /* Oro metálico */
}

/* 5. Asegurar que la caja de personalización también sea oscura */
.customization-message {
    background-color: transparent !important;
}
.customization-message textarea,
.customization-message input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid #bf953f !important;
}
/* ==========================================================
   REPARACIÓN DEL PIE DE PÁGINA (FOOTER) CELESTUNE - V2
   ========================================================== */

/* 1. Arreglar la caja ENTERA del Newsletter (Todo el bloque) */
.block_newsletter {
    background-color: rgba(10, 15, 25, 0.90) !important; /* Cristal ahumado para TODO */
    border: 1px solid rgba(191, 149, 63, 0.3) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}

/* Limpiar cualquier fondo blanco "escondido" en la mitad izquierda */
.block_newsletter .row,
.block_newsletter form,
.block_newsletter div {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Texto de "Infórmese de nuestras noticias" visible y brillante */
#block-newsletter-label, 
.block_newsletter p {
    color: #ffffff !important;
    font-size: 15px !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

/* 2. Tunear el campo de email y el botón dorado */
.block_newsletter input[type="email"],
.block_newsletter input[type="text"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid #bf953f !important;
    border-radius: 4px !important;
}

.block_newsletter .btn {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #aa771c) !important; /* Oro Celestune */
    color: #1a252f !important; /* Letra oscura */
    border: 1px solid #8a6d3b !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* 3. Iconos sociales: Fondo oscuro para que el borde oro resalte */
.block-social li {
    background-color: rgba(10, 15, 25, 0.90) !important;
    border: 2px solid #bf953f !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.block-social li a {
    color: #bf953f !important;
}

.block-social li:hover {
    background-color: #bf953f !important;
    transform: scale(1.1);
}
.block-social li:hover a {
    color: #1a252f !important;
}

/* 4. Enlaces de oro en el pie de página */
#footer a, 
.footer-container a {
    color: #bf953f !important; 
    transition: color 0.3s ease;
}

#footer a:hover, 
.footer-container a:hover {
    color: #fcf6ba !important; /* Oro claro al pasar el ratón */
    text-decoration: none !important;
}
/* ==========================================================
   EL HOLOGRAMA DE TIKTOK (ATAQUE DEFINITIVO AL CÍRCULO)
   ========================================================== */

/* 1. Preparamos el círculo base para que sujete nuestro holograma */
.block-social li:nth-child(3) {
    position: relative !important;
/* ==========================================================
   ARREGLO DEFINITIVO: BARRA DE BÚSQUEDA OSCURA
   ========================================================== */

/* 1. Limpiar cualquier fondo blanco rebelde en el contenedor */
#search_widget form,
.search-widget form {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Convertir la caja de texto en una cápsula de cristal ahumado */
#search_widget form input[type="text"],
.search-widget form input[type="text"] {
    background-color: rgba(10, 15, 25, 0.8) !important; /* Azul noche muy oscuro */
    color: #ffffff !important; /* Texto que escriba el cliente en blanco */
    border: 1px solid #bf953f !important; /* Borde Oro Celestune */
    border-radius: 20px !important; /* Forma de píldora redondeada */
    box-shadow: none !important;
    outline: none !important;
}

/* 3. El texto por defecto "Búsqueda en catálogo" */
#search_widget form input[type="text"]::placeholder,
.search-widget form input[type="text"]::placeholder {
    color: #a0a0a0 !important; /* Gris clarito elegante */
}

/* 4. La lupa en color oro */
#search_widget form button i,
.search-widget form button i,
#search_widget form button .material-icons,
.search-widget form button .material-icons {
    color: #bf953f !important;
}

/* 5. Al pasar el ratón por la lupa */
#search_widget form button:hover i,
.search-widget form button:hover i,
#search_widget form button:hover .material-icons,
.search-widget form button:hover .material-icons {
    color: #ffffff !important;
}}

/* 2. Proyectamos la letra "T" FLOTANDO por encima (Bypass de PrestaShop) */
.block-social li:nth-child(3)::after {
    content: "T" !important; /* Aquí proyectamos la T de TikTok */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #bf953f !important; /* Oro Celestune */
    font-size: 22px !important;
    font-family: 'Georgia', serif !important;
    font-weight: bold !important;
    pointer-events: none !important; /* CRÍTICO: Deja que el clic pase a través de la letra hacia el enlace */
    z-index: 100 !important; /* Lo ponemos por encima de todo */
}

/* 3. Efecto hover: cuando el ratón pasa por el círculo, la T se vuelve oscura */
.block-social li:nth-child(3):hover::after {
    color: #1a252f !important; /* Azul Noche */
}
/* ==========================================================
   INFORMACIÓN DE LA TIENDA EN ORO CELESTUNE
   ========================================================== */

/* 1. Título "INFORMACIÓN DE LA TIENDA" a dorado */
#footer .block-contact .h3,
#footer .block-contact .title {
    color: #bf953f !important;
}

/* 2. Todo el texto de la dirección (Celestune, 20300, España...) a dorado */
#footer .block-contact,
#footer .block-contact p,
#footer .block-contact span,
#footer .block-contact div {
    color: #bf953f !important;
}
/* ==========================================================
   ESCAPARATE DE PRODUCTOS (CATÁLOGO Y VISTA RÁPIDA)
   ========================================================== */

/* 1. ELIMINAR EL RESPLANDOR AZUL CYAN */
/* Forzamos a que ningún enlace tenga ese efecto de sombra/borde azul */
a:focus, 
a:hover, 
.product-title a:focus, 
.product-title a:hover {
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important; /* Por si la sombra viene de aquí */
}

/* 2. TÍTULOS DE PRODUCTOS A ORO BRILLANTE */
/* Aseguramos que los nombres en el catálogo sean dorados, no grises oscuros */
.product-miniature .product-title a,
.product-miniature .h3.product-title {
    color: #bf953f !important; /* Oro Celestune */
    font-weight: bold !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9) !important; /* Sombra negra para resaltar en el cosmos */
}

.product-miniature .product-title a:hover {
    color: #fcf6ba !important; /* Oro claro al pasar el ratón */
}

/* 3. PRECIOS A BLANCO PURO Y GRANDE */
.product-miniature .product-price-and-shipping .price,
.product-price {
    color: #ffffff !important; /* Blanco puro */
    font-size: 18px !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

/* ==========================================================
   VISTA RÁPIDA: EFECTO APARICIÓN MAGNÉTICA
   ========================================================== */

/* 1. ESTADO INICIAL (Ratón fuera): Botón oculto y transparente */
.thumbnail-container .quick-view,
.product-miniature .quick-view {
    opacity: 0 !important; /* Totalmente invisible */
    visibility: hidden !important;
    position: absolute !important;
    top: 50% !important; /* Centrado en la foto */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    width: max-content !important;
    background-color: rgba(26, 37, 47, 0.95) !important; /* Azul Noche casi opaco */
    border: 2px solid #bf953f !important; /* Borde dorado */
    color: #bf953f !important; /* LETRAS DORADAS */
    border-radius: 30px !important;
    padding: 10px 25px !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important; /* Animación suave */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 13px !important;
}

.thumbnail-container .quick-view i,
.product-miniature .quick-view i {
    color: #bf953f !important; /* Lupa dorada */
    margin-right: 5px !important;
    transition: all 0.3s ease !important;
}

/* 2. PASAR EL RATÓN POR LA FOTO: El botón aparece con letras doradas */
.thumbnail-container:hover .quick-view,
.product-miniature:hover .quick-view {
    opacity: 1 !important; /* Se hace visible */
    visibility: visible !important;
}

/* 3. PASAR EL RATÓN POR EL BOTÓN: Letras cambian a blancas y hace un ligero brillo */
.thumbnail-container .quick-view:hover,
.product-miniature .quick-view:hover {
    color: #ffffff !important; /* LETRAS BLANCAS */
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.6) !important; /* Resplandor dorado místico */
}

.thumbnail-container .quick-view:hover i,
.product-miniature .quick-view:hover i {
    color: #ffffff !important; /* Lupa blanca */
}

/* ==========================================================
   ARREGLO DE LEGIBILIDAD PARA EL FONDO OSCURO (OBLIGATORIO)
   ========================================================== */

/* 1. TEXTO DEL CUERPO PRINCIPAL */
/* Cambia el color de la descripción, párrafos, listas y etiquetas a un blanco suave */
#content-wrapper p, 
#content-wrapper li, 
#content-wrapper label, 
.social-sharing span,
.referencia, 
#product-details span {
    color: #e0e0e0 !important; /* Un blanco suave, no puro, para un look más premium */
}

/* 2. TÍTULOS (Asegurar que los títulos sigan siendo blancos) */
/* Este ya lo tenías, pero lo reforzamos por si acaso */
#content-wrapper h1, 
#content-wrapper h2, 
#content-wrapper h3, 
.product-title,
.social-sharing span {
    color: #ffffff !important; /* Blanco puro */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Pequeña sombra para dar relieve */
}
/* ==========================================================
   CABECERA CELESTUNE: CRISTAL AHUMADO Y ORO
   ========================================================== */

/* 1. Fondo de la cabecera (Cristal ahumado oscuro para dejar ver el universo) */
#header,
.header-nav,
.header-top {
    background-color: rgba(10, 15, 25, 0.85) !important; 
    border-bottom: none !important;
}

/* Una fina línea de hilo de oro para separar la cabecera del resto de la web */
.header-top {
    border-bottom: 1px solid rgba(191, 149, 63, 0.3) !important;
    padding-bottom: 10px !important;
}

/* 2. Textos superiores (Contacto, Usuario, etc.) en Blanco Suave */
.header-nav a,
.header-nav span,
#_desktop_user_info .user-info a,
#_desktop_contact_link .contact-link a {
    color: #e0e0e0 !important;
    transition: color 0.3s ease !important;
}

.header-nav a:hover,
#_desktop_user_info .user-info a:hover {
    color: #bf953f !important; /* Se vuelve dorado al pasar el ratón */
    text-decoration: none !important;
}

/* 3. Menú Principal (Descubre la magia, Packs...) a Oro Celestune */
.top-menu a,
.top-menu a[data-depth="0"] {
    color: #bf953f !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.top-menu a:hover,
.top-menu a:focus {
    color: #fcf6ba !important; /* Oro más brillante al pasar el ratón */
    text-shadow: 0 0 8px rgba(191, 149, 63, 0.4) !important;
}

/* 4. Carrito de Compras en Dorado */
.blockcart {
    background: transparent !important;
}
.blockcart a, 
.blockcart i {
    color: #bf953f !important;
}
/* Globito numérico del carrito */
.blockcart .cart-products-count {
    background-color: #bf953f !important;
    color: #1a252f !important; /* Número oscuro para contrastar con el fondo dorado */
    font-weight: bold !important;
}

/* 5. Barra de Búsqueda de Lujo */
.search-widget form input[type="text"] {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo casi invisible */
    color: #ffffff !important;
    border: 1px solid rgba(191, 149, 63, 0.5) !important; /* Borde dorado sutil */
    border-radius: 20px !important; /* Forma redondeada premium */
}

/* Color del texto que dice "Búsqueda en catálogo" */
.search-widget form input[type="text"]::placeholder {
    color: #888888 !important;
}

/* Lupa de búsqueda */
.search-widget form button i {
    color: #bf953f !important;
}
.search-widget form button:hover i {
    color: #fcf6ba !important;
}
/* 3. CAPA DE LEGIBILIDAD (Opcional, pero muy recomendado) */
/* Añadimos un panel oscuro y translúcido detrás del contenido para asegurar contraste máximo, como en la imagen que te he generado. */
#content, 
.page-content,
#footer {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Blanco muy translúcido */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
}

/* 4. NEWSLETTER Y OTRAS ZONAS (Si las tienes activadas) */
.block_newsletter p {
    color: #e0e0e0 !important;
}

/* ==========================================================
   CORAZÓN DE LA LISTA DE DESEOS A ORO CELESTUNE
   ========================================================== */

/* 1. Volver dorado el corazón en reposo */
.wishlist-button-add i,
.wishlist-button i,
.wishlist-icon i,
.btn-wishlist i,
.wishlist-button-add svg,
.wishlist-button svg {
    color: #bf953f !important; /* Para iconos de texto */
    fill: #bf953f !important;  /* Para iconos dibujados (SVG) enteros */
    stroke: #bf953f !important; /* Para el borde de los iconos dibujados */
    transition: all 0.3s ease !important;
}

/* 2. Efecto al pasar el ratón (Se vuelve blanco y crece un pelín) */
.wishlist-button-add:hover i,
.wishlist-button:hover i,
.wishlist-icon:hover i,
.btn-wishlist:hover i,
.wishlist-button-add:hover svg,
.wishlist-button:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    transform: scale(1.15) !important; /* Un pequeño "latido" al tocarlo */
}
/* ==========================================================
   CABECERA CELESTUNE: CRISTAL AHUMADO Y ORO
   ========================================================== */

/* 1. Fondo de la cabecera (Cristal ahumado oscuro para dejar ver el universo) */
#header,
.header-nav,
.header-top {
    background-color: rgba(10, 15, 25, 0.85) !important; 
    border-bottom: none !important;
}

/* Una fina línea de hilo de oro para separar la cabecera del resto de la web */
.header-top {
    border-bottom: 1px solid rgba(191, 149, 63, 0.3) !important;
    padding-bottom: 10px !important;
}

/* 2. Textos superiores (Contacto, Usuario, etc.) en Blanco Suave */
.header-nav a,
.header-nav span,
#_desktop_user_info .user-info a,
#_desktop_contact_link .contact-link a {
    color: #e0e0e0 !important;
    transition: color 0.3s ease !important;
}

.header-nav a:hover,
#_desktop_user_info .user-info a:hover {
    color: #bf953f !important; /* Se vuelve dorado al pasar el ratón */
    text-decoration: none !important;
}

/* 3. Menú Principal (Descubre la magia, Packs...) a Oro Celestune */
.top-menu a,
.top-menu a[data-depth="0"] {
    color: #bf953f !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.top-menu a:hover,
.top-menu a:focus {
    color: #fcf6ba !important; /* Oro más brillante al pasar el ratón */
    text-shadow: 0 0 8px rgba(191, 149, 63, 0.4) !important;
}

/* 4. Carrito de Compras en Dorado */
.blockcart {
    background: transparent !important;
}
.blockcart a, 
.blockcart i {
    color: #bf953f !important;
}
/* Globito numérico del carrito */
.blockcart .cart-products-count {
    background-color: #bf953f !important;
    color: #1a252f !important; /* Número oscuro para contrastar con el fondo dorado */
    font-weight: bold !important;
}

/* 5. Barra de Búsqueda de Lujo */
.search-widget form input[type="text"] {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo casi invisible */
    color: #ffffff !important;
    border: 1px solid rgba(191, 149, 63, 0.5) !important; /* Borde dorado sutil */
    border-radius: 20px !important; /* Forma redondeada premium */
}

/* Color del texto que dice "Búsqueda en catálogo" */
.search-widget form input[type="text"]::placeholder {
    color: #888888 !important;
}

/* Lupa de búsqueda */
.search-widget form button i {
    color: #bf953f !important;
}
.search-widget form button:hover i {
    color: #fcf6ba !important;
}
/* ==========================================================
   ARREGLO DEFINITIVO: BARRA DE BÚSQUEDA OSCURA
   ========================================================== */

/* 1. Limpiar cualquier fondo blanco rebelde en el contenedor */
#search_widget form,
.search-widget form {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Convertir la caja de texto en una cápsula de cristal ahumado */
#search_widget form input[type="text"],
.search-widget form input[type="text"] {
    background-color: rgba(10, 15, 25, 0.8) !important; /* Azul noche muy oscuro */
    color: #ffffff !important; /* Texto que escriba el cliente en blanco */
    border: 1px solid #bf953f !important; /* Borde Oro Celestune */
    border-radius: 20px !important; /* Forma de píldora redondeada */
    box-shadow: none !important;
    outline: none !important;
}

/* 3. El texto por defecto "Búsqueda en catálogo" */
#search_widget form input[type="text"]::placeholder,
.search-widget form input[type="text"]::placeholder {
    color: #a0a0a0 !important; /* Gris clarito elegante */
}

/* 4. La lupa en color oro */
#search_widget form button i,
.search-widget form button i,
#search_widget form button .material-icons,
.search-widget form button .material-icons {
    color: #bf953f !important;
}

/* 5. Al pasar el ratón por la lupa */
#search_widget form button:hover i,
.search-widget form button:hover i,
#search_widget form button:hover .material-icons,
.search-widget form button:hover .material-icons {
    color: #ffffff !important;
}
/* ==========================================================
   MINIATURAS DE FOTOS: REBORDE EN ORO CELESTUNE
   ========================================================== */

/* Cambia el borde azul de la miniatura seleccionada y al pasar el ratón */
.product-images .thumb.selected,
.product-images .thumb:hover,
#product .images-container .product-images .thumb-container.selected .thumb,
#product .images-container .product-images .thumb-container:hover .thumb {
    border: 2px solid #bf953f !important; /* Oro Celestune */
    transition: border-color 0.3s ease !important;
}
/* ==========================================================
   ESCUDO CONTRA TRANSPARENCIAS: MENÚ DESPLEGABLE
   ========================================================== */

/* 1. El texto "Ordenar por:" a dorado */
.products-sort-order .sort-by {
    color: #bf953f !important;
}

/* 2. EL BOTÓN PRINCIPAL (El que ahora mismo es invisible) */
#js-product-list-top .products-sort-order .select-title {
    background: #1a252f !important; /* Azul Noche sólido OBLIGATORIO */
    background-color: #1a252f !important; 
    color: #bf953f !important; /* Letras doradas */
    border: 1px solid #bf953f !important; /* Borde de oro */
    border-radius: 5px !important;
    padding: 10px 15px !important;
    display: inline-block !important; 
    width: 100% !important;
}

/* 3. LA CAJA QUE SE DESPLIEGA (Para que tape la foto 100%) */
#js-product-list-top .products-sort-order .dropdown-menu {
    background: #1a252f !important; /* FONDO SÓLIDO */
    background-color: #1a252f !important; /* Refuerzo por si acaso */
    border: 1px solid #bf953f !important;
    z-index: 10000 !important; /* Lo ponemos por encima de todo el universo */
    opacity: 1 !important;
}

/* 4. Letras de las opciones */
#js-product-list-top .products-sort-order .dropdown-menu .select-list {
    color: #e0e0e0 !important; /* Letras blancas suaves */
    background-color: transparent !important; /* Quitamos fondos raros internos */
}

/* 5. Opción seleccionada (Fantasma) o al pasar el ratón */
#js-product-list-top .products-sort-order .dropdown-menu .select-list:hover,
#js-product-list-top .products-sort-order .dropdown-menu .select-list.current {
    background-color: #bf953f !important; /* Fondo oro */
    background: #bf953f !important;
    color: #1a252f !important; /* Letras oscuras */
}
/* ==========================================================
   PÁGINA DE CONTACTO: MAGIA Y ORO
   ========================================================== */

/* --- PARTE IZQUIERDA: INFORMACIÓN DE LA TIENDA --- */

/* 1. Iconos (Ubicación, Teléfono, Email) a Oro Celestune */
.contact-rich .icon,
.contact-rich .icon i,
.contact-rich .icon .material-icons {
    color: #bf953f !important;
    font-size: 24px !important;
}

/* 2. Textos de dirección y descripciones a Blanco Suave */
.contact-rich .data,
.contact-rich .data p,
.contact-rich .data span {
    color: #e0e0e0 !important;
}

/* 3. El enlace del correo (que ahora está azul) a Oro Brillante */
.contact-rich .data a {
    color: #bf953f !important;
    font-weight: bold !important;
    transition: color 0.3s ease;
}
.contact-rich .data a:hover {
    color: #fcf6ba !important;
    text-decoration: none !important;
}


/* --- PARTE DERECHA: FORMULARIO DE CONTACTO --- */

/* 4. Título del formulario a Oro */
section.contact-form h3 {
    color: #bf953f !important;
}

/* 5. Cajas de texto, áreas de mensaje y menús desplegables */
.contact-form form input[type="text"],
.contact-form form input[type="email"],
.contact-form form textarea,
.contact-form form select,
.form-control {
    background-color: rgba(10, 15, 25, 0.8) !important; /* Fondo cristal oscuro */
    color: #ffffff !important; /* Texto que escribe el cliente en BLANCO */
    border: 1px solid #bf953f !important; /* Borde Oro */
    border-radius: 5px !important;
}

/* Color de los textos de ejemplo (placeholders) */
.form-control::placeholder {
    color: #a0a0a0 !important;
}

/* 6. Fulminar el reborde azul cyan al hacer clic (focus) */
.form-control:focus,
.contact-form form select:focus {
    outline: none !important;
    box-shadow: 0 0 10px rgba(191, 149, 63, 0.5) !important; /* Resplandor dorado místico */
    border-color: #fcf6ba !important; /* Borde más claro al escribir */
}

/* 7. Tunear el selector de archivos ("Seleccionar archivo") */
.contact-form .custom-file-label {
    background-color: transparent !important;
    color: #bf953f !important;
}

/* 8. BOTÓN DE ENVIAR (Bañado en Oro) */
.contact-form .form-footer input[type="submit"],
.contact-form .form-footer .btn {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #aa771c) !important;
    color: #1a252f !important; /* Letras oscuras Azul Noche */
    border: 1px solid #8a6d3b !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 5px !important;
    padding: 10px 30px !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón por el botón Enviar */
.contact-form .form-footer .btn:hover {
    transform: scale(1.05) !important; /* Crece un poquito */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    color: #000000 !important;
}
/* ==========================================================
   REMATES FINALES: ENLACE REBELDE Y BOTONES DE ACCIÓN
   ========================================================== */

/* 1. FULMINAR el azul cyan del correo en la página de contacto */
.contact-rich a[href^="mailto"],
.contact-rich .data a[href] {
    color: #bf953f !important; /* Oro puro */
    font-weight: bold !important;
    text-decoration: none !important;
}

.contact-rich a[href^="mailto"]:hover,
.contact-rich .data a[href]:hover {
    color: #fcf6ba !important; /* Oro brillante al pasar el ratón */
    text-shadow: 0 0 8px rgba(191, 149, 63, 0.4) !important;
}

/* 2. Unificar botones: "Guardar Personalización" y "Escriba su reseña" a Oro Celestune */
.product-customization button[type="submit"],
.product-customization .btn,
#product-comments-list-header .btn,
.post-product-comment,
.btn-comment {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #aa771c) !important;
    color: #1a252f !important; /* Texto oscuro Azul Noche */
    border: 1px solid #8a6d3b !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}

/* Efecto al pasar el ratón por estos botones */
.product-customization button[type="submit"]:hover,
.product-customization .btn:hover,
#product-comments-list-header .btn:hover,
.post-product-comment:hover,
.btn-comment:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.8) !important;
    color: #000000 !important;
}
/* ==========================================================
   PANEL "SU CUENTA": ICONOS LUMINOSOS Y ENLACES PREMIUM
   ========================================================== */

/* 1. Iluminar los iconos ocultos con Oro Celestune */
.page-my-account #content .links a i.material-icons,
.page-my-account #content .links a i {
    color: #bf953f !important; /* Oro puro */
    font-size: 32px !important; /* Los hacemos un pelín más grandes para que destaquen */
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

/* 2. Efecto al pasar el ratón por cualquier bloque del menú */
.page-my-account #content .links a:hover i.material-icons,
.page-my-account #content .links a:hover i {
    color: #fcf6ba !important; /* Oro brillante */
    transform: scale(1.15) !important; /* El icono crece y "palpita" suavemente */
}

.page-my-account #content .links a:hover span {
    color: #bf953f !important; /* El texto blanco se vuelve dorado al pasar el ratón */
}

/* 3. Fulminar el azul cyan de "Cerrar sesión" */
.page-my-account .text-sm-center a,
.page-my-account .text-center a {
    color: #bf953f !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

/* Efecto al pasar el ratón por Cerrar Sesión */
.page-my-account .text-sm-center a:hover,
.page-my-account .text-center a:hover {
    color: #ffffff !important; /* Se vuelve blanco puro */
    text-shadow: 0 0 8px rgba(255,255,255,0.4) !important;
}
/* ==========================================================
   MI LISTA DE DESEOS: FULMINAR EL AZUL Y RECUPERAR ICONOS
   ========================================================== */

/* 1. Todos los enlaces azules ("Crear nueva lista", "Volver", "Inicio") a ORO */
.wishlist-container a,
.page-footer a,
.wishlist-create a {
    color: #bf953f !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón */
.wishlist-container a:hover,
.page-footer a:hover,
.wishlist-create a:hover {
    color: #fcf6ba !important; /* Oro más brillante */
    text-shadow: 0 0 5px rgba(191, 149, 63, 0.5) !important;
}

/* 2. Los iconos junto a los textos (el '+', la casita) */
.wishlist-container a i,
.page-footer a i,
.wishlist-container a .material-icons,
.page-footer a .material-icons,
.wishlist-container a svg,
.page-footer a svg {
    color: #bf953f !important;
    fill: #bf953f !important;
}

.wishlist-container a:hover i,
.page-footer a:hover i,
.wishlist-container a:hover svg,
.page-footer a:hover svg {
    color: #fcf6ba !important;
    fill: #fcf6ba !important;
}

/* 3. El icono fantasma de "COMPARTIR" (dentro de la caja) */
.wishlist-list-item .wishlist-list-item-action,
.wishlist-list-item i,
.wishlist-list-item .material-icons,
.wishlist-list-item svg {
    color: #bf953f !important;
    fill: #bf953f !important;
    stroke: #bf953f !important;
    transition: all 0.3s ease !important;
}

/* Al pasar el ratón por el icono de compartir, se vuelve blanco */
.wishlist-list-item .wishlist-list-item-action:hover,
.wishlist-list-item i:hover,
.wishlist-list-item svg:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    transform: scale(1.2) !important; /* Un pequeño salto */
}

/* 4. Le damos un sutil borde dorado a la caja de la lista para más elegancia */
.wishlist-list-item {
    border: 1px solid rgba(191, 149, 63, 0.3) !important;
    background-color: rgba(10, 15, 25, 0.5) !important; /* Cristal oscuro */
}
/* ==========================================================
   ATAQUE NUCLEAR AL AZUL: ENLACES DEL PIE DE PÁGINA (LISTAS)
   ========================================================== */

#main .page-footer a,
#main .page-footer a i,
#main .page-footer a span,
#main .page-footer a .material-icons,
.wishlist-container .page-footer a,
.wishlist-container .page-footer a i,
.wishlist-container .page-footer a span {
    color: #bf953f !important; /* Oro Celestune obligatorio */
    text-decoration: none !important;
}

/* Efecto hover brillante */
#main .page-footer a:hover,
#main .page-footer a:hover i,
#main .page-footer a:hover span,
#main .page-footer a:hover .material-icons,
.wishlist-container .page-footer a:hover {
    color: #fcf6ba !important; /* Oro claro */
    text-shadow: 0 0 5px rgba(191, 149, 63, 0.5) !important;
}

/* --- ELIMINAR LETRAS Y CENTRAR ICONOS --- */

.social-sharing li a {
    /* 1. Hacemos la letra invisible para el ojo humano */
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    text-shadow: none !important;
    
    /* 2. Configuramos el círculo para que sea un contenedor centrado */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* 3. Por si la letra viene de un "span" interno, lo ocultamos */
.social-sharing li a span, 
.social-sharing li a b, 
.social-sharing li a i:not(.fa) {
    display: none !important;
}

/* 4. Por si la letra viene de un icono de fuente antiguo (FontAwesome) */
.social-sharing li a::before, 
.social-sharing li a::after {
    display: none !important;
    content: "" !important;
}

/* 5. Aseguramos que el SVG (el icono real) sea lo único visible y negro */
.social-sharing li a svg {
    display: block !important;
    visibility: visible !important;
    fill: #000000 !important; /* Color del icono */
    width: 20px !important;    /* Tamaño del icono */
    height: 20px !important;
    z-index: 10 !important;
}

/* --- ALINEACIÓN PRECISA DEL ICONO DEL CARRITO --- */

/* 1. Aseguramos que el botón trate al texto y al icono como una sola línea */
.add-to-cart {
    display: inline-flex !important;
    align-items: center !important; /* Centrado vertical teórico */
    justify-content: center !important;
    height: 44px !important;
    padding: 0 20px !important;
    vertical-align: middle !important;
}

/* 2. NIVELAR EL ICONO CON EL TEXTO */
.add-to-cart i, 
.add-to-cart .material-icons,
.add-to-cart [class^="icon-"] {
    position: relative !important;
    top: 2px !important;       /* BAJAMOS el icono para que rompa el eje y se alinee con las letras */
    margin-right: 10px !important; 
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* 3. Aseguramos que las letras no tengan márgenes extraños */
.add-to-cart span, 
.add-to-cart {
    line-height: 1 !important;
}

/* --- NIVELAR RUEDAS DEL CARRITO CON LA BASE DEL TEXTO (AJUSTE FINAL) --- */

.add-to-cart i, 
.add-to-cart .material-icons,
.add-to-cart [class^="icon-"] {
    position: relative !important;
    /* Bajamos a 9px para que las ruedas toquen la base de las letras */
    top: 9px !important; 
    margin-right: 10px !important;
    font-size: 20px !important;
    line-height: 0 !important;
    display: inline-block !important;
}

/* Forzamos que el texto mantenga su sitio */
.add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
}
/* ==========================================================
   MODO DIOS: FULMINAR EL CYAN Y FORZAR ORO EN PERSONALIZACIÓN
   ========================================================== */

/* 1. Forzar que TODO el bloque sea dorado (Atrapa los títulos sí o sí) */
.product-customization .customization-message {
    color: #bf953f !important;
    font-weight: bold !important;
}

/* 2. Devolvemos el texto pequeño de "max 1024 caracteres" a gris */
.product-customization .customization-message small {
    color: #a0a0a0 !important;
    font-weight: normal !important;
}

/* 3. Las cajas de texto (Fondo ahumado y texto blanco) */
.product-customization .customization-message textarea,
.product-customization .customization-message input.product-message {
    background-color: rgba(10, 15, 25, 0.8) !important; 
    border: 1px solid #bf953f !important; 
    color: #ffffff !important; 
    border-radius: 5px !important;
    font-weight: normal !important; /* Para que lo que escribas no salga en negrita */
}

/* 4. ELIMINAR EL CYAN GRUESO: Usamos outline-color transparente por si acaso */
.product-customization .customization-message textarea:focus,
.product-customization .customization-message input.product-message:focus,
.form-control:focus,
textarea:focus,
input[type="text"]:focus {
    outline-width: 0 !important;
    outline-color: transparent !important;
    outline: none !important;
    border: 1px solid #fcf6ba !important; /* Borde oro brillante al hacer clic */
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.9) !important; /* Resplandor mágico */
}

/* 5. El texto de ayuda ("Su mensaje aquí") */
.product-customization .customization-message textarea::placeholder,
.product-customization .customization-message input::placeholder {
    color: #888888 !important; 
}
/* ==========================================================
   TINTA BLANCA PARA ESCRIBIR EN LA PERSONALIZACIÓN
   ========================================================== */

/* Aseguramos que el texto que teclea el cliente sea SIEMPRE blanco */
body#product .product-customization textarea,
body#product .product-customization input[type="text"],
body#product .product-customization .form-control {
    color: #ffffff !important; 
}

/* Y lo más importante: que NO cambie a negro al hacer clic para escribir */
body#product .product-customization textarea:focus,
body#product .product-customization input[type="text"]:focus,
body#product .product-customization .form-control:focus {
    color: #ffffff !important; 
    background-color: rgba(10, 15, 25, 0.9) !important; /* Asegura que el fondo siga oscuro */
}
/* ==========================================================
   CAJAS DE AVISOS Y ALERTAS (EJ: HISTORIAL DE PEDIDOS VACÍO)
   ========================================================== */

/* Transformar todas las cajas de alerta (Info, Peligro, Éxito...) */
.alert,
.alert-info,
.alert-warning,
.alert-success,
.alert-danger,
.page-my-account .alert {
    background-color: rgba(10, 15, 25, 0.8) !important; /* Cristal oscuro */
    border: 1px solid #bf953f !important; /* Borde Oro Celestune */
    color: #ffffff !important; /* Texto en blanco puro para que se lea perfecto */
    border-radius: 5px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important; /* Sombra elegante */
}

/* Si la alerta tiene algún icono (la 'i' de info o un tick), a dorado */
.alert i,
.alert .material-icons {
    color: #bf953f !important;
    padding-right: 10px !important;
}

/* El texto que sale justo encima de la caja ("Estos son los pedidos...") */
#history p {
    color: #e0e0e0 !important;
}
/* ==========================================================
   PÁGINA GDPR (MIS DATOS): FULMINAR AZUL Y CREAR BOTONES
   ========================================================== */

/* 1. Títulos de las secciones a Oro Celestune para más elegancia */
.page-customer-account #content h3,
.page-customer-account #content h1 {
    color: #bf953f !important;
    margin-bottom: 15px !important;
}

/* 2. El enlace rebelde azul cyan ("página de contacto") a Oro */
.page-customer-account #content p a {
    color: #bf953f !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.page-customer-account #content p a:hover {
    color: #fcf6ba !important; /* Brillo al pasar el ratón */
    text-shadow: 0 0 5px rgba(191, 149, 63, 0.5) !important;
}

/* 3. Convertir los textos de "OBTENER DATOS" en Botones Premium */
.page-customer-account #content a.btn,
.page-customer-account #content a[href*="exportPdf"],
.page-customer-account #content a[href*="exportCsv"] {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #aa771c) !important;
    color: #1a252f !important; /* Texto oscuro Azul Noche */
    border: 1px solid #8a6d3b !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    margin: 10px 10px 10px 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}

/* Efecto hover (al pasar el ratón) para que parezcan botones físicos */
.page-customer-account #content a.btn:hover,
.page-customer-account #content a[href*="exportPdf"]:hover,
.page-customer-account #content a[href*="exportCsv"]:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.8) !important;
    color: #000000 !important;
    text-decoration: none !important;
}
/* ==========================================================
   MIGAS DE PAN (BREADCRUMBS): ILUMINAR EL CAMINO DE NAVEGACIÓN
   ========================================================== */

/* 1. Enlaces clickeables (como "Inicio" o categorías) a Oro Celestune */
.breadcrumb a,
.breadcrumb a span,
nav[data-depth] a,
nav[data-depth] a span {
    color: #bf953f !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Efecto al pasar el ratón por los enlaces */
.breadcrumb a:hover,
.breadcrumb a:hover span,
nav[data-depth] a:hover,
nav[data-depth] a:hover span {
    color: #fcf6ba !important; /* Oro más claro */
    text-shadow: 0 0 5px rgba(191, 149, 63, 0.5) !important;
}

/* 2. Los separadores (las barras "/") en blanco suave para que no estorben */
.breadcrumb,
.breadcrumb li,
nav[data-depth],
nav[data-depth] li {
    color: #a0a0a0 !important; /* Gris/Blanco muy suave */
}

/* 3. La página actual en la que estamos (como "Su cuenta") en Blanco puro */
.breadcrumb li:last-child span,
nav[data-depth] li:last-child span {
    color: #ffffff !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}
/* ==========================================================
   MAPA DEL SITIO: FULMINAR EL CYAN EN TODOS LOS ENLACES
   ========================================================== */

/* Apuntamos a todos los enlaces de la página del Mapa del Sitio */
body#sitemap #content a,
.page-sitemap #content a,
.sitemap a {
    color: #bf953f !important; /* Oro Celestune */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón para darles vida */
body#sitemap #content a:hover,
.page-sitemap #content a:hover,
.sitemap a:hover {
    color: #fcf6ba !important; /* Oro claro y brillante */
    text-shadow: 0 0 8px rgba(191, 149, 63, 0.6) !important;
    transform: translateX(5px) !important; /* Un pequeño y elegante desplazamiento a la derecha al tocarlos */
    display: inline-block;
}

/* Para que las líneas separadoras grises debajo de los títulos no molesten */
.sitemap .tree li {
    border-color: rgba(191, 149, 63, 0.2) !important;
}
/* ==========================================================
   TU FIRMA DE AUTOR EN EL PIE DE PÁGINA (CELESTUNE)
   ========================================================== */

/* 1. Volvemos invisible el texto original de PrestaShop sin borrar la caja */
.footer-container p.text-sm-center,
.footer-container .copyright,
.footer-container .copyright a {
    font-size: 0 !important; 
    color: transparent !important;
    display: block !important;
    visibility: visible !important;
    text-decoration: none !important;
}

/* 2. Inyectamos tu firma mágica con Oro Celestune */
.footer-container p.text-sm-center::after,
.footer-container .copyright::after {
    content: "© 2026 Celestune. Todos los derechos reservados." !important;
    font-size: 14px !important;
    color: #bf953f !important; /* Oro brillante */
    letter-spacing: 1px !important;
    display: block !important;
    visibility: visible !important;
    text-transform: uppercase !important;
    padding-top: 15px !important;
    transition: color 0.3s ease !important;
}

/* Efecto al pasar el ratón por tu firma */
.footer-container p.text-sm-center:hover::after,
.footer-container .copyright:hover::after {
    color: #fcf6ba !important;
    text-shadow: 0 0 8px rgba(191, 149, 63, 0.6) !important;
}
/* ==========================================================
   ALINEACIÓN PERFECTA DEL PIE DE PÁGINA (SOLO MÓVIL)
   ========================================================== */

@media (max-width: 767px) {
    /* 1. Destruimos todos los márgenes invisibles de las "cajas rusas" */
    .footer-container .row,
    .footer-container [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Aplicamos un margen exacto y único a todos los bloques de contenido */
    .footer-container .block_newsletter,
    .footer-container .block-social,
    .footer-container .links .wrapper,
    .footer-container .block-contact,
    .footer-container #block_myaccount_infos {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 3. Forzamos a que las letras y líneas empiecen a ras de ese margen */
    .footer-container .title,
    .footer-container .h3,
    .footer-container .block-contact .title {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}
/* ==========================================================
   CASILLAS DE VERIFICACIÓN (CHECKBOX) Y TIC EN DORADO
   ========================================================== */

/* 1. Ponemos el borde de la cajita en Oro para que se vea bien */
span.custom-checkbox input[type="checkbox"] + span {
    border: 2px solid #bf953f !important;
    background-color: transparent !important;
}

/* 2. El Tic (check) que aparece dentro cuando lo marcas, en Oro brillante */
span.custom-checkbox input[type="checkbox"]:checked + span i,
span.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #fcf6ba !important; /* Oro más clarito para que resalte mucho al marcarlo */
    font-weight: bold !important;
}

/* 3. Por si el sistema usa una casilla nativa del navegador en lugar de la personalizada */
input[type="checkbox"] {
    accent-color: #bf953f !important;
}
/* ==========================================================
   ARREGLAR EL ENLACE 'CONTACTE CON NOSOTROS' EN EL MENÚ MÓVIL
   ========================================================== */

/* 1. ELIMINAMOS EL HUECO GIGANTE DEBAJO DE "FAQ" */
#mobile_top_menu_wrapper .js-top-menu,
#mobile_top_menu_wrapper .top-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. LE DAMOS EL ESPACIADO EXACTO ENCIMA DE "CONTACTO" */
#mobile_top_menu_wrapper .js-top-menu-bottom,
#mobile_top_menu_wrapper #contact-link,
#mobile_top_menu_wrapper #_mobile_contact_link {
    margin-top: 10px !important; /* <--- ¡Aquí está la magia! Lo bajamos un poquito */
    padding-top: 0 !important;
}

/* 3. TU CÓDIGO DE ESTILO + AJUSTE EXACTO DEL TEXTO */
/* Apuntamos directamente a la caja especial de contacto del menú móvil */
#mobile_top_menu_wrapper #contact-link a,
#mobile_top_menu_wrapper #_mobile_contact_link a,
#mobile_top_menu_wrapper .js-top-menu-bottom a {
    color: #bf953f !important; /* Oro Celestune */
    text-transform: uppercase !important; /* En mayúsculas */
    font-weight: bold !important; /* En negrita */
    
    /* Esta es la medida exacta por defecto para "Descubre la magia", etc. */
    padding-top: 0.625rem !important; 
    padding-bottom: 0.625rem !important;
}

/* Efecto al pasar el dedo/ratón */
#mobile_top_menu_wrapper #contact-link a:hover,
#mobile_top_menu_wrapper #_mobile_contact_link a:hover {
    color: #fcf6ba !important;
}
/* ==========================================================
   REPRODUCTOR DE AUDIO BAÑADO EN ORO CELESTUNE
   ========================================================== */

/* Apuntamos a la etiqueta de audio nativa */
audio {
    width: 100% !important; /* Para que se adapte al ancho */
    max-width: 500px !important; /* Pero que no se haga gigante en ordenadores */
    border-radius: 30px !important; /* Bordes bien redondeados */
    outline: none !important;

    /* EL HECHIZO: Filtros para convertir el gris estándar en un tono dorado brillante */
    filter: sepia(100%) saturate(300%) hue-rotate(5deg) brightness(1.1) drop-shadow(0 0 15px rgba(191, 149, 63, 0.6)) !important;
    
    transition: all 0.3s ease !important;
    margin: 20px auto !important;
    display: block !important; /* Lo centra en la página */
}

/* Efecto al pasar el ratón para que brille más */
audio:hover {
    filter: sepia(100%) saturate(400%) hue-rotate(5deg) brightness(1.3) drop-shadow(0 0 25px rgba(252, 246, 186, 0.9)) !important;
    transform: scale(1.02) !important;
}
/* ==========================================================
   BAÑAR EN ORO LA BARRA DESLIZANTE INFERIOR
   ========================================================== */

/* 1. Si el sistema lo interpreta como una barra de desplazamiento (Scrollbar) */
::-webkit-scrollbar {
    height: 12px !important; /* Grosor de la barra horizontal */
}
::-webkit-scrollbar-track {
    background: #1a1a1a !important; /* Fondo oscuro y elegante en vez de blanco */
    border-radius: 10px !important;
}
::-webkit-scrollbar-thumb {
    background: #bf953f !important; /* El gris pasa a ser Oro Celestune */
    border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #fcf6ba !important; /* Brilla más al pasar el ratón */
}

/* 2. Si el sistema lo interpreta como una barra de progreso/rango nativa */
input[type="range"] {
    accent-color: #bf953f !important; /* Oro Celestune */
}
input[type="range"]::-webkit-slider-thumb {
    background: #bf953f !important;
}
input[type="range"]::-moz-range-thumb {
    background: #bf953f !important;
}

/* ==========================================================
   TÍTULOS DE PRODUCTOS: 2 LÍNEAS ELEGANTES (SIN OVERLAPS)
   ========================================================== */

/* 1. Fijamos la altura de la caja del título para que ningún producto descuadre a los demás */
#products .product-title,
.featured-products .product-title,
.product-miniature .product-title {
    height: 48px !important; /* Altura exacta para 2 líneas */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

/* 2. Configuramos el texto para que use exactamente 2 líneas máximo */
#products .product-title a,
.featured-products .product-title a,
.product-miniature .product-title a {
    white-space: normal !important; /* Permite que el texto baje a la siguiente línea */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* El truco mágico: máximo 2 líneas */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Añade los 3 puntitos SOLO si pasa de 2 líneas */
    line-height: 1.3 !important; /* Espaciado elegante entre las dos líneas */
    text-align: center !important;
    position: static !important; /* Desactivamos cualquier posición flotante */
    
    /* Limpiamos rastros del intento anterior por si acaso */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 3. Un efecto sutil de luz al pasar el ratón, sin mover nada de sitio */
#products .product-title a:hover,
.featured-products .product-title a:hover,
.product-miniature .product-title a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important;
}
/* ==========================================================
   CELESTUNE: EQUILIBRIO PERFECTO + PUENTE INVISIBLE PARA EL MENÚ
   ========================================================== */

@media (min-width: 768px) {
    /* 1. Cabecera más alta para que quepa el logo cuadrado */
    #header {
        position: relative !important;
        height: 120px !important; 
        background: #070c16 !important;
        z-index: 100 !important;
    }
    .header-top, .header-nav {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    #wrapper {
        margin-top: 20px !important; 
        padding-top: 0 !important;
    }

    /* 2. LOGO: Grande pero sin romper nada */
    #_desktop_logo {
        position: absolute !important;
        top: 10px !important;
        left: 20px !important;
        margin: 0 !important;
    }
    #_desktop_logo img {
        height: 100px !important; 
        width: auto !important;
        max-height: none !important;
    }

    /* 3. MENÚ BOLLO: Con puente invisible para el ratón */
    #_desktop_top_menu {
        position: absolute !important;
        top: 45px !important; 
        left: 150px !important; 
        margin: 0 !important;
        padding-bottom: 30px !important; /* LA MAGIA: El puente invisible hacia abajo */
        z-index: 100 !important;
    }
    #_desktop_top_menu::before {
        content: '\E5D2' !important;
        font-family: 'Material Icons' !important;
        font-size: 32px !important;
        color: #d4af37 !important;
        cursor: pointer !important;
    }

    /* 4. BUSCADOR Y CARRITO */
    #_desktop_search_widget, #search_widget {
        position: absolute !important;
        top: 42px !important; 
        right: 360px !important; 
        width: 250px !important;
        margin: 0 !important;
    }
    #_desktop_search_widget form input[type="text"],
    #search_widget form input[type="text"] {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        border-radius: 20px !important;
        color: white !important;
        height: 35px !important;
        padding-left: 15px !important;
        margin: 0 !important;
    }

    #header .header-nav {
        position: absolute !important;
        top: 47px !important; 
        right: 20px !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }
    .user-info { margin-right: 15px !important; color: #fff !important; }
    .cart-preview { margin-left: 5px !important; }
}

/* 5. MENÚ DESPLEGABLE: Subido para tocar el puente */
#top-menu {
    display: none !important;
    position: absolute !important;
    top: 35px !important; /* ACERCADO al icono para que no haya hueco */
    left: -10px !important;
    background: rgba(7, 12, 22, 0.98) !important;
    border: 1px solid #d4af37 !important;
    padding: 10px 0 !important; 
    z-index: 999999 !important;
    width: 320px !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.9) !important;
}
#_desktop_top_menu:hover #top-menu, #top-menu:hover {
    display: flex !important;
    flex-direction: column !important;
}
#top-menu li {
    width: 100% !important;
    text-align: left !important;
    float: none !important;
}
#top-menu a {
    color: #d4af37 !important;
    padding: 12px 25px !important; 
    text-transform: uppercase !important;
    font-size: 13px !important;
    display: block !important;
    text-align: left !important; 
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#top-menu a:hover {
    background: rgba(212, 175, 55, 0.15) !important; /* Un toque visual al pasar el ratón por las opciones */
}

/* Limpieza */
.header-nav .left-nav, #_desktop_contact_link { display: none !important; }
}
/* ==========================================================
   FIX DEFINITIVO: LUPA GRANDE, TEXTO Y BOTÓN DEL BUSCADOR
   ========================================================== */

#search_widget form,
#_desktop_search_widget form {
    position: relative !important;
    display: block !important;
}

/* 1. Zona de escritura un poco más separada para la nueva lupa */
#search_widget form input[type="text"],
#_desktop_search_widget form input[type="text"] {
    padding-left: 55px !important; /* Un poco más de aire */
    padding-right: 15px !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   EXTERMINIO TOTAL Y DEFINITIVO DE LA MANCHA DORADA
   ========================================================== */

/* 1. Quitamos cualquier fondo dorado del contenedor principal por si está asomando por debajo */
.search-widgets, #search_widget,
.search-widgets form, #search_widget form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Fulminamos cualquier botón, caja, o elemento que esté sobrando a la derecha */
.search-widgets form button,
#search_widget form button,
.search-widgets form input[type="submit"],
#search_widget form input[type="submit"],
.search-widgets form .input-group-btn,
#search_widget form .input-group-btn,
.search-widgets form .input-group-append,
#search_widget form .input-group-append {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important; /* Lo mandamos fuera de la pantalla por si acaso */
    z-index: -1 !important;
}

/* ==========================================================
   RESCATE VERSIÓN MÓVIL: MENÚ Y FONDOS
   ========================================================== */

@media (max-width: 767px) {
    /* 1. Matamos el bloque blanco de "Contacte con nosotros" en móvil */
    #_mobile_contact_link, 
    #contact-link,
    .contact-link,
    #mobile_top_menu_wrapper .js-top-menu-bottom {
        display: none !important;
        visibility: hidden !important;
    }

    /* 2. Forzamos que la cabecera sea siempre azul oscuro, sin bloques blancos */
    .header-top, 
    #mobile_top_menu_wrapper {
        background: #070c16 !important;
        border: none !important;
    }

    /* 3. ¡Resucitamos el menú! (Le quitamos la regla de PC que lo ocultaba) */
    #top-menu {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 4. Estilo dorado para los enlaces en móvil */
    #mobile_top_menu_wrapper a,
    #top-menu a {
        color: #d4af37 !important;
        text-align: left !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    }
}

/* ==========================================================
   LUPA 100% DORADA CELESTUNE
   ========================================================== */

.search-widgets form i,
#search_widget form i,
.search-widgets form .material-icons.search,
#search_widget form .material-icons.search {
    color: #d4af37 !important; /* El código exacto de tu dorado */
    text-shadow: 0px 0px 1px rgba(212, 175, 55, 0.5) !important; /* Un mini destello para que brille más */
}

/* ==========================================================
   SOLUCIÓN FINAL: CLAVADO INTEGRAL EN FRANJA NEGRA
   ========================================================== */

@media (min-width: 768px) {
    /* 1. LA FRANJA NEGRA: Bloqueamos su altura */
    #header, .header-top {
        position: relative !important;
        height: 120px !important;
        background: #070c16 !important;
        overflow: visible !important;
    }

    /* 2. LOGO: Lo agrandamos y centramos verticalmente */
    #_desktop_logo {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* Centrado vertical perfecto */
        z-index: 1000 !important;
        margin: 0 !important;
    }
    #_desktop_logo img { 
        height: 85px !important; /* Logo más grande y visible */
        width: auto !important; 
    }

    /* 3. MENÚ RAYITAS: Al lado del logo */
    #_desktop_top_menu {
        position: absolute !important;
        left: 120px !important;
        top: 65% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }

    /* 4. BUSCADOR: LARGO Y CENTRADO */
    .search-widgets, #search_widget, #_desktop_search_widget {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 350px !important; 
        min-width: 350px !important; 
        z-index: 1000 !important;
        margin: 0 !important;
    }
    .search-widgets form input[type="text"] {
        height: 45px !important;
        border-radius: 25px !important;
    }

    /* 5. DERECHA: SESIÓN Y CARRITO (SUBIDA FORZADA A LO NEGRO) */
    /* Los sacamos de sus cajas para que no se caigan a las estrellas */
    
    .user-info, #_desktop_user_info {
        position: absolute !important;
        right: 180px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important; /* Obligado a estar en el centro de la franja */
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        z-index: 1000 !important;
    }

    .cart-preview, #_desktop_cart {
        position: absolute !important;
        right: 25px !important;
        top: 50% !important;
        transform: translateY(-50%) !important; /* Obligado a estar en el centro de la franja */
        display: flex !important;
        align-items: center !important;
        z-index: 1000 !important;
    }

    /* 6. LIMPIEZA DE TEXTOS */
    .user-info a, .cart-preview a {
        color: white !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }

    /* Anulamos las cajas de la plantilla que nos estropean el diseño */
    .header-nav, .header-top .container, .header-top .row {
        position: static !important;
        height: 0 !important;
    }
}

/* ==========================================================
   AJUSTE DE PRECISIÓN FINAL: SUBIDA AL CENTRO (43px)
   ========================================================== */

@media (min-width: 768px) {
    /* 1. INICIO DE SESIÓN: Subida final al centro de la franja */
    .user-info, #_desktop_user_info {
        position: absolute !important;
        right: 100px !important; 
        /* Subimos de 48px a 43px para clavar el centro */
        top: -7px !important; 
        transform: none !important; 
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        z-index: 9999 !important;
    }

    /* 2. CARRITO: Subida idéntica */
    .cart-preview, #_desktop_cart {
        position: absolute !important;
        right: 20px !important;
        top: -7px !important; 
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        z-index: 9999 !important;
    }

    /* 3. LIMPIEZA DE ICONOS */
    .user-info i.material-icons, .cart-preview i.material-icons {
        vertical-align: middle !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

/* ==========================================================
   ESTILO DEL MENÚ DESPLEGABLE DEL "INICIO" (VERSIÓN LIMPIA)
   ========================================================== */

/* Rompemos el muro invisible */
.breadcrumb, .breadcrumb ol, .breadcrumb li {
    overflow: visible !important;
    position: relative !important;
}

/* Posicionamos la caja principal */
.menu-inicio-desplegable {
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
}

/* LA CAJA NEGRA (Ajuste automático a la medida del texto) */
.submenu-inicio {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #070c16 !important;
    border: 1px solid #d4af37 !important;
    border-radius: 8px !important;
    padding: 15px 25px !important;
    min-width: auto !important; /* Anchura automática */
    white-space: nowrap !important; /* Mantiene la línea recta */
    z-index: 9999 !important;
    list-style: none !important;
    margin: 0 !important;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.5) !important;
}

/* Mostramos el menú al pasar el ratón */
.menu-inicio-desplegable:hover .submenu-inicio {
    display: block !important;
}

/* SEPARACIÓN ENTRE LOS ENLACES */
.submenu-inicio li {
    margin: 15px 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* MATAMOS las barras (/) que PrestaShop intenta colar */
.submenu-inicio li::before,
.submenu-inicio li::after {
    content: none !important;
    display: none !important;
}

/* EL TEXTO: MAYÚSCULAS, DORADO Y NEGRITA */
.submenu-inicio li a {
    color: #d4af37 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón por las letras */
.submenu-inicio li a:hover {
    color: white !important;
    transform: translateX(5px) !important;
}

/* ==========================================================
   PARCHE PARA MÓVILES: FORZAR APERTURA DEL MENÚ
   ========================================================== */
.menu-inicio-desplegable.menu-movil-abierto .submenu-inicio {
    display: block !important;
}

/* ==========================================================
   BOTÓN "VOLVER ARRIBA" (DISEÑO)
   ========================================================== */
#btn-subir-celestune {
    display: none;
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    border: 1px solid #d4af37 !important;
    background-color: #070c16 !important;
    color: #d4af37 !important;
    cursor: pointer !important;
    padding: 10px 12px !important;
    border-radius: 50% !important;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

#btn-subir-celestune:hover {
    background-color: #d4af37 !important;
    color: #070c16 !important;
    transform: translateY(-3px) !important;
}

#btn-subir-celestune i {
    font-size: 28px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ==========================================================
   AJUSTE DE LA IMAGEN DE MANTENIMIENTO PARA MÓVILES
   ========================================================== */
@media (max-width: 768px) {
    #maintenance img,
    .page-maintenance img,
    body[id^="maintenance"] img {
        max-width: 95% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    body#maintenance,
    .page-maintenance,
    body[id^="maintenance"] {
        background-size: contain !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}
/* Nombres de productos en el carrito (letras grises) a BLANCO */
.cart-item .product-line-info a { 
    color: #ffffff !important; 
}

/* Texto de personalización (letras azules) a DORADO */
.product-line-info .customization-modal { 
    color: #d4af37 !important; 
}

/* El precio total también en blanco para que resalte */
.cart-summary-line .value {
    color: #ffffff !important;
}
/* --- ARREGLOS EXTRA PARA EL CARRITO --- */

/* 1. Obligar al enlace de Personalización (azul) a ser DORADO */
.cart-item a[data-toggle="modal"], 
.cart-item a.customization-modal,
.product-line-info a.customization-modal { 
    color: #d4af37 !important; 
}

/* 2. Poner "< Continuar comprando" y su flechita en BLANCO */
.cart-grid-body > a.label, 
.cart-grid-body > a.label i { 
    color: #ffffff !important; 
}

/* 3. Textos grises del bloque derecho (Impuestos, Klarna) en BLANCO */
.cart-summary p, 
.cart-summary span, 
.cart-summary small { 
    color: #ffffff !important; 
}
/* Forzar el texto inyectado por Stripe/Klarna a blanco */
div[id*="klarna"], 
div[class*="klarna"], 
klarna-placement,
.stripe-messaging-container,
.stripe-messaging-container * {
    color: #ffffff !important;
    --stripe-messaging-text-color: #ffffff !important;
}
/* --- ICONO DE BASURA --- */
.cart-item .remove-from-cart,
.cart-item .remove-from-cart i {
    color: #ffffff !important;
}
/* Que se ponga dorado al pasar el ratón por encima */
.cart-item .remove-from-cart:hover i {
    color: #d4af37 !important;
}

/* --- FLECHAS DE CANTIDAD --- */
.cart-item .bootstrap-touchspin .btn,
.cart-item .bootstrap-touchspin .btn i {
    color: #ffffff !important;
}
.cart-item .bootstrap-touchspin .btn:hover i {
    color: #d4af37 !important;
}
/* --- FONDO AZUL 100% SÓLIDO (NIVEL DIOS) --- */
#main .card, 
#main .cart-summary,
#main .cart-container {
    background-color: #0a0f1d !important; 
    background: #0a0f1d !important;
    border: 1px solid #d4af37 !important; 
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.9) !important; 
}
/* --- CAJAS AZULES SÓLIDAS Y CON ESQUINAS REDONDEADAS (CARRITO Y PAGO) --- */
#main .card, 
#main .cart-summary,
#main .cart-container,
body#checkout section.checkout-step,
body#checkout .cart-summary,
body#checkout #js-checkout-summary,
body#checkout .address-item {
    background-color: #0a0f1d !important; 
    background: #0a0f1d !important;
    border: 1px solid #d4af37 !important; 
    border-radius: 15px !important; /* <--- MAGIA DE LAS ESQUINAS REDONDEADAS */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.9) !important; 
}
/* --- ILUMINAR ENLACE DE "AÑADIR NUEVA DIRECCIÓN" --- */
body#checkout a.add-address,
body#checkout .add-address a,
body#checkout a.add-address i {
    color: #d4af37 !important; /* Polvo de estrellas dorado */
}

/* Que brille en blanco al pasar el ratón por encima */
body#checkout a.add-address:hover,
body#checkout .add-address a:hover {
    color: #ffffff !important; 
}
/* --- CAMBIAR ENLACES AZULES A DORADOS EN EL PAGO --- */
body#checkout .checkout-step a,
body#checkout .cart-summary a,
body#checkout .js-show-details {
    color: #d4af37 !important;
}

body#checkout .checkout-step a:hover,
body#checkout .cart-summary a:hover,
body#checkout .js-show-details:hover {
    color: #ffffff !important;
}
/* --- CÍRCULOS DE PAGO: RECONSTRUCCIÓN TOTAL --- */

/* 1. Limpiamos los contenedores para que no empujen nada */
body#checkout .payment-option .custom-radio {
    display: inline-block !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* 2. El círculo dorado: Lo clavamos en el sitio exacto */
body#checkout .custom-radio input[type="radio"] + span,
body#checkout .custom-radio input[type="radio"]:checked + span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d4af37 !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: block !important;
}

/* 3. El punto interior cuando se marca */
body#checkout .custom-radio input[type="radio"]:checked + span::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 8px !important;
    height: 8px !important;
    background: #d4af37 !important;
    border-radius: 50% !important;
}

/* 4. VAPORIZAMOS el círculo gris original para que no asome */
body#checkout .custom-radio input[type="radio"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; /* Invisible pero clicable */
    z-index: 2 !important; /* Por encima para capturar el clic */
    margin: 0 !important;
    cursor: pointer !important;
}
/* --- COLOR DORADO PARA ENLACES DE CONFIRMACIÓN --- */
#order-confirmation a, 
#order-confirmation .card-block a,
.order-confirmation-table a {
    color: #d4af37 !important;
    text-decoration: underline !important;
}

#order-confirmation a:hover {
    color: #ffffff !important; /* Que brille en blanco al pasar el ratón */
}

/* Por si acaso el texto "descargar su factura" tiene una clase específica */
.order-confirmation a.active {
    color: #d4af37 !important;
}
/* --- BOTÓN FINALIZAR COMPRA ESTILO SUSCRIBIRSE --- */
.cart-detailed-actions .btn-primary {
    background: linear-gradient(180deg, #d4af37 0%, #91742a 100%) !important;
    color: #0a0f1d !important; /* Texto oscuro como el de Suscribirse */
    border: none !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Efecto al pasar el ratón (Hover) */
.cart-detailed-actions .btn-primary:hover {
    background: linear-gradient(180deg, #e5c05b 0%, #b38f36 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
    color: #000 !important;
}
/* --- BOTÓN CONFIRMAR PAGO (PÁGINA FINAL) ESTILO CELESTUNE --- */
#payment-confirmation .btn-primary,
.page-order-confirmation .btn-primary,
#pay-with-payment-option {
    background: linear-gradient(180deg, #d4af37 0%, #91742a 100%) !important;
    color: #0a0f1d !important;
    border: none !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    width: auto !important; /* Para que no ocupe toda la pantalla si no quieres */
    padding: 10px 30px !important;
}

/* Efecto al pasar el ratón */
#payment-confirmation .btn-primary:hover,
#pay-with-payment-option:hover {
    background: linear-gradient(180deg, #e5c05b 0%, #b38f36 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
    color: #000 !important;
}

/* Por si el botón aparece deshabilitado hasta aceptar términos */
#payment-confirmation .btn-primary:disabled {
    background: #555 !important;
    color: #999 !important;
    opacity: 0.6 !important;
}
/* --- 1. ELIMINAR TRANSPORTE (EL ÚLTIMO ADIÓS) --- */
/* Atacamos la fila que está justo encima del Total */
#order-items table tr:nth-last-child(2),
.order-confirmation-table .line-item:nth-last-child(2) {
    display: none !important;
}

/* --- 1. TRANSPORTE: BORRADO POR POSICIÓN --- */
#order-items .order-confirmation-table .line-item:nth-last-child(2),
#order-items table tr.sub.shipping {
    display: none !important;
}

/* --- 2. TÍTULOS: MOVIMIENTO FORZADO --- */

/* Achicamos la fila para que no pueda salirse del marco */
#order-items .order-items-table-header .row {
    max-width: 550px !important; /* Ajustamos el ancho máximo de la línea de títulos */
    margin-left: auto !important;
    margin-right: 25px !important; /* La alejamos del borde derecho */
}

#order-items .order-items-table-header h3 {
    font-size: 8px !important; /* Tamaño mini para asegurar espacio */
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* Movemos el título rebelde individualmente 20 píxeles a la izquierda */
#order-items .order-items-table-header .col-md-2:last-child h3,
#order-items .order-items-table-header div:last-child h3 {
    transform: translateX(-20px) !important;
}
/* Código nuclear para forzar texto negro en el modal de Términos */
#cta-terms-and-conditions-modal,
#cta-terms-and-conditions-modal *,
.modal-content,
.modal-content *,
.js-modal-content,
.js-modal-content * {
    color: #000000 !important;
}
/* MAGIA DORADA SUPREMA PARA CELESTUNE */

/* 1. Etiqueta flotante de descuento (-30,00 €) y EN OFERTA */
body#product .product-flags .product-flag.discount,
body#product .product-flags .product-flag.on-sale {
    background-color: #d4af37 !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    box-shadow: 0px 0px 12px rgba(212, 175, 55, 0.8) !important;
    border: none !important;
}

/* 2. El precio rebajado (89,00 €) */
body#product .product-prices .current-price span,
body#product .product-prices .current-price-value {
    color: #d4af37 !important;
    font-weight: 900 !important; /* Más negrita aún */
    text-shadow: 0px 0px 8px rgba(212, 175, 55, 0.5) !important;
}

/* 3. El texto de "AHORRE UN 30,00 €" */
body#product .product-prices .product-discount .discount {
    color: #000000 !important;
    background-color: #d4af37 !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    display: inline-block !important;
    margin-top: 5px !important;
    border: none !important;
}

/* 4. Precio original tachado (un gris suave para que el oro brille más) */
body#product .product-prices .regular-price {
    color: #999999 !important; 
    text-decoration: line-through !important;
}
/* 1. COLOR DORADO PARA TODA LA WEB (Cuadrados Dorados) */
.product-flags .product-flag,
.discount-percentage,
.product-discount .discount,
.on-sale,
.discount {
    background-color: #d4af37 !important;
    color: #000000 !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    display: inline-block !important;
    border: none !important;
}
/* ============================================================
   CATÁLOGO: REPLICAR EL DISEÑO DORADO EN EL LISTADO
   ============================================================ */

/* 1. Destruir la capa invisible del catálogo */
#products .product-miniature .product-flags,
.featured-products .product-miniature .product-flags {
    background: transparent !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    pointer-events: none !important;
    margin: 0 !important; padding: 0 !important;
}

/* 2. COLOR DORADO OBLIGATORIO (Máxima prioridad para el catálogo) */
#products .product-miniature .product-flags .product-flag,
.featured-products .product-miniature .product-flags .product-flag {
    background-color: #d4af37 !important;
    background: #d4af37 !important;
    color: #000000 !important;
    font-weight: bold !important;
    display: inline-block !important;
    width: max-content !important; 
    min-width: 0 !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Blindaje extra de texto (por si el tema camufla las letras) */
#products .product-miniature .product-flags .product-flag *,
.featured-products .product-miniature .product-flags .product-flag * {
    color: #000000 !important;
}

/* 3. Posición ¡EN OFERTA! (Izquierda) */
#products .product-miniature .product-flags .on-sale,
.featured-products .product-miniature .product-flags .on-sale {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin: 0 !important;
}

/* 4. Posición -25% (Derecha) */
#products .product-miniature .product-flags .discount,
.featured-products .product-miniature .product-flags .discount {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    margin: 0 !important;
}
/* 6. CORAZÓN (Alineado a la derecha, debajo del descuento) */
html body .wishlist-button-add {
    position: absolute !important;
    top: 55px !important;   
    right: 10px !important; 
    left: auto !important;
    z-index: 101 !important;
    background: transparent !important;
    margin: 0 !important;
    border: none !important;
}
/* ============================================================
   ARREGLO DEFINITIVO PARA LA FICHA DE PRODUCTO (PÁGINA INDIVIDUAL)
   ============================================================ */

/* 1. Usar el contenedor principal de imágenes como ancla absoluta */
#product .images-container,
#product .product-cover {
    position: relative !important;
}

/* 2. Destruir la pancarta gigante y ponerla invisible SOBRE la foto */
#product .product-flags {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Mata el flexbox que estira el fondo */
    z-index: 10 !important;
}

/* 3. Estilo de las etiquetas: Pequeñas, doradas y que midan solo lo justo */
#product .product-flags .product-flag {
    position: absolute !important; /* Las soltamos para mandarlas a las esquinas */
    background-color: #d4af37 !important;
    color: #000000 !important;
    font-weight: bold !important;
    padding: 4px 10px !important;
    display: inline-block !important;
    width: max-content !important; /* EL SECRETO ANTI-PANCARTAS */
    min-width: 0 !important;
    z-index: 100 !important;
}

#product .product-flags .product-flag * {
    color: #000000 !important;
}

/* 4. ¡EN OFERTA! (Esquina superior IZQUIERDA de la foto grande) */
#product .product-flags .on-sale {
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    border-radius: 20px !important;
    margin: 0 !important;
}

/* 5. -25% (Esquina superior DERECHA de la foto grande) */
#product .product-flags .discount {
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    border-radius: 4px !important;
    margin: 0 !important;
}
/* ============================================================
   BANNER SUPERIOR DESLIZANTE (OFERTA INAUGURACIÓN)
   ============================================================ */

/* 1. Creamos el banner en la parte superior de la página */
body::before {
    content: "¡OFERTA DE INAUGURACIÓN: 25% DE DESCUENTO, HASTA EL 01/08/2026!";
    display: block;
    width: 100%;
    background-color: #d4af37; /* El fondo dorado de tu marca */
    color: #000000;            /* Letras en negro para que resalten */
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1.5px;     /* Separamos un poco las letras para más elegancia */
    padding: 10px 0;           /* Altura del banner (10px por arriba y por abajo) */
    white-space: nowrap;       /* Prohibimos que el texto se rompa en dos líneas */
    overflow: hidden;          /* Oculta el texto que sale de la pantalla */
    position: relative;
    z-index: 999999;           /* Nos aseguramos de que esté por encima de todo */
    
    /* Aplicamos la animación: dura 20 segundos, velocidad constante e infinita */
    animation: marquesinaDorada 30s linear infinite;
}

/* 2. Definimos el movimiento (De derecha a izquierda) */
@keyframes marquesinaDorada {
    0% {
        text-indent: 100vw;  /* Empieza escondido totalmente a la derecha */
    }
    100% {
        text-indent: -50vw; /* Termina escondido totalmente a la izquierda */
    }
}
/* --- ESTÉTICA CELESTUNE: CARRITO (NIVEL DIOS) --- */

/* 1. El enlace (Forzando la ruta completa) */
body #wrapper .cart-summary a.promo-code-button,
body .block-promo .promo-code-button,
body #wrapper .promo-code a {
    color: #d4af37 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* 2. La caja y las letras */
body #wrapper .promo-code input.promo-input,
body .cart-summary input.promo-input {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid #d4af37 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Fuerza el blanco incluso si el navegador intenta autocompletar */
    padding: 10px !important;
    font-size: 16px !important;
}

/* 3. El botón Añadir */
body #wrapper .promo-code button.btn,
body .cart-summary button[type="submit"] {
    background: linear-gradient(180deg, #e5c06d 0%, #b88a44 100%) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}
/* Forzar el color dorado en TODOS los enlaces del cajetín de cupones */
body #wrapper .cart-summary a,
body #wrapper .cart-summary a.promo-code-button,
body #wrapper .cart-summary .block-promo a,
.cart-summary .cart-voucher a.collapse-button {
    color: #d4af37 !important;
}

body #wrapper .cart-summary a:hover,
body #wrapper .cart-summary a.promo-code-button:hover {
    color: #ffffff !important;
}
/* --- ESTÉTICA CELESTUNE: VENTANA DE PERSONALIZACIÓN (MODAL) --- */

/* 1. Fondo oscuro y borde dorado para la ventana emergente */
body .modal-content {
    background-color: #0a0a0a !important; /* Fondo casi negro, 100% opaco */
    border: 1px solid #d4af37 !important; /* Borde dorado Celestune */
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.2) !important; /* Ligero brillo estelar */
    border-radius: 8px !important;
}

/* 2. Título de la ventana en dorado y línea separadora */
body .modal-header {
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

body .modal-title {
    color: #d4af37 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 3. Textos interiores (los datos del cliente) en blanco puro */
body .modal-body,
body .modal-body div,
body .modal-body span,
body .modal-body p {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* 4. La 'X' de cerrar en dorado para que se vea bien */
body .modal-header .close span {
    color: #d4af37 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    font-size: 24px !important;
}

body .modal-header .close:hover span {
    color: #ffffff !important; /* Se pone blanca al pasar el ratón */
}
/* --- GOLPE DEFINITIVO AL FONDO TRANSPARENTE DE LA VENTANA --- */
body #main .modal-dialog .modal-content,
body #wrapper .modal-dialog .modal-content,
body .modal .modal-content,
body .modal-body {
    background: #0a0a0a !important; /* Fuerza bruta para el fondo */
    background-color: #0a0a0a !important; /* Doble seguro */
    opacity: 1 !important; /* Evita que la plantilla lo haga semitransparente */
}
/* --- ESTÉTICA CELESTUNE: ENLACES EN TEXTOS Y PDFs --- */

body #main a[href*=".pdf"],
body #main .product-description a,
body #main .page-content a,
body #wrapper a[href*="celestune.es/img/"] {
    color: #d4af37 !important; /* Dorado Celestune */
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

body #main a[href*=".pdf"]:hover,
body #main .product-description a:hover,
body #main .page-content a:hover,
body #wrapper a[href*="celestune.es/img/"]:hover {
    color: #ffffff !important; /* Se pone blanco al pasar el ratón */
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important; /* Pequeño brillo estelar */
}
/* Cambiar el botón azul de Finalizar Compra a Dorado Celestune */
#blockcart-modal .btn-primary, 
#blockcart-modal .cart-content .btn-primary {
    background: linear-gradient(to bottom, #c5a059 0%, #947432 100%) !important;
    border-color: #947432 !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

/* Efecto al pasar el ratón por encima del botón */
#blockcart-modal .btn-primary:hover, 
#blockcart-modal .cart-content .btn-primary:hover {
    background: #000000 !important;
    color: #c5a059 !important;
    border-color: #c5a059 !important;
}

/* Arreglar la franja blanca del título superior */
#blockcart-modal .modal-header {
    background-color: #0b0f19 !important; /* Fondo oscuro místico */
    border-bottom: 1px solid #c5a059 !important; /* Línea dorada */
}

#blockcart-modal .modal-title {
    color: #c5a059 !important; /* Texto del título en oro */
}

/* Quitar el bloque blanco feo de la casilla del Total */
#blockcart-modal .cart-content {
    background-color: transparent !important;
    color: #ffffff !important;
}

#blockcart-modal .modal-body {
    background-color: #090c14 !important; /* Fondo del cuerpo a juego con la web */
}
/* Eliminar por completo el fondo blanco rebelde del total */
#blockcart-modal .cart-content .product-total,
#blockcart-modal .cart-content p:last-of-type,
#blockcart-modal .cart-content div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hacer que los textos del total se vean en blanco puro */
#blockcart-modal .cart-content .label,
#blockcart-modal .cart-content p {
    color: #ffffff !important;
}

/* Hacer que el precio (los 3,00 €) brille en oro Celestune */
#blockcart-modal .cart-content .value,
#blockcart-modal .cart-content .product-total .value {
    color: #c5a059 !important;
    font-weight: bold !important;
}
/* 1. Hacer que el nombre del producto brille en oro Celestune (y no en negro) */
#blockcart-modal .product-name, 
#blockcart-modal h6 {
    color: #c5a059 !important;
    font-weight: bold !important;
}

/* 2. Arreglar el número de la cantidad (el "1") y cualquier otra letra oculta */
#blockcart-modal .modal-body,
#blockcart-modal .modal-body p,
#blockcart-modal .modal-body span,
#blockcart-modal .modal-body strong {
    color: #ffffff !important; /* Todo el texto interior pasa a blanco puro */
}

/* 3. Cambiar el tic (v) de confirmación de negro a Dorado Celestune */
#blockcart-modal .modal-header i,
#blockcart-modal .modal-header .material-icons,
#blockcart-modal .modal-header .modal-title::before {
    color: #c5a059 !important;
}
/* Hacer desaparecer el botón de Facturas por Abono de la cuenta del cliente */
#my-account #order-slips-link {
    display: none !important;
}
/* Forzar que el texto quede justificado en bloque */
.product-customization label {
    text-align: justify !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 15px !important;
}

/* Evitar que el texto de "max. 1024 caracteres" empuje a la etiqueta */
.product-customization small {
    display: block !important;
    text-align: right !important;
    width: 100% !important;
}
/* Corrección total para el modal de reseñas */
.product-comment-modal {
    color: #ffffff !important; /* Fuerza todo el texto general a blanco */
}

/* Campos de entrada */
.product-comment-modal input,
.product-comment-modal textarea {
    color: #ffffff !important;
    background-color: #333333 !important;
}

/* Enlaces (como Aviso Legal) */
.product-comment-modal a {
    color: #ffcc00 !important; /* Pongo un color dorado para que resalte y se vea profesional */
    text-decoration: underline;
}

/* Botón Cancelar (y cualquier otro botón que no sea el principal) */
.product-comment-modal .btn-secondary,
.product-comment-modal button {
    color: #ffffff !important;
    background-color: #555555 !important; /* Un gris más claro para que contraste con el fondo */
    border: 1px solid #ffffff !important;
}
/* 1. Asegurar que el contenedor sea visible y esté bien alineado */
.block-social ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important; /* Espacio entre iconos */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Restaurar la visibilidad de los elementos de la lista */
.block-social ul li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Asegurar que los iconos sean visibles y tengan tamaño */
.block-social ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important; /* Ajusta este valor si los ves muy pequeños o grandes */
    color: #ffffff !important;
}

/* 4. Ocultar solo el texto que pueda estar causando el solapamiento */
.block-social ul li a span {
    display: none !important; /* Oculta solo el texto descriptivo si existe */
}
/* 1. Eliminar la 'T' de TikTok que se solapa en Instagram */
.block-social ul li.instagram::after {
    display: none !important;
    content: none !important;
}

/* 2. Asegurar que el icono de Instagram se vea limpio */
.block-social ul li.instagram {
    display: block !important;
}

/* 3. Asegurar que el bloque de TikTok esté visible */
.block-social ul li.tiktok {
    display: block !important;
}
/* 1. Limpiar Instagram: eliminamos la 'T' inyectada */
.block-social ul li.instagram a::after,
.block-social ul li.instagram a::before {
    display: none !important;
    content: none !important;
}

/* 2. Forzar el icono de TikTok (Reemplazo visual) */
.block-social ul li.tiktok a {
    /* Inyectamos el logo de TikTok como imagen de fondo */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.77 0 2.89 2.89 0 0 1 2.5-2.87V9.5a6.39 6.39 0 0 0-6.39 6.39 6.39 6.39 0 0 0 6.39 6.39 6.39 6.39 0 0 0 6.39-6.39V6.48a6.52 6.52 0 0 0 3.65 1.13z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60% !important; /* Ajusta este valor si quieres el icono más grande o pequeño */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important; /* Ocultamos el círculo roto */
    border: none !important;
}

/* 3. Estructura general de alineación */
.block-social ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Ocultar el botón superior de reseñas usando las clases correctas */
.product-comments-additional-info .post-product-comment {
    display: none !important;
}

/* Ocultar también el texto que se corta al lado de las estrellas ("Leer reseñas...") si lo deseas limpiar del todo */
.product-comments-additional-info .additional-links {
    display: none !important;
}
/* Forzar la alineación de Calificación y estrellas a la izquierda */
.product-comment-list-header,
.product-comments-list-header {
    display: flex !important;
    justify-content: flex-start !important; /* Fuerza a los elementos a pegarse a la izquierda */
    align-items: center !important;         /* Centra verticalmente */
    gap: 15px !important;                   /* Espacio fijo y controlado entre el texto y las estrellas */
    width: auto !important;                 /* Evita que ocupe todo el ancho si no es necesario */
}

/* Asegurar que el texto dentro no se separe */
.product-comment-list-header span {
    margin-right: 0 !important;
}
/* Ocultar la etiqueta 'Calificación' dentro de la lista de comentarios */
.product-comments-list .grade-label,
.product-comments-list .comment-rating-label,
.product-comments-list .rating-label {
    display: none !important;
}
// Seleccionamos todos los reproductores de audio
const audios = document.querySelectorAll('audio');

audios.forEach(audio => {
  // Prevenimos que aparezca el menú contextual (clic derecho)
  audio.addEventListener('contextmenu', e => e.preventDefault());
});