/* FORZAR EL CONTENEDOR PADRE QUE RADIOS OCULTA */
#header-area, .header-area-destiny {
    display: block !important;
}

/* OBLIGAR A LA BARRA A EXISTIR EN LA HOME */
body.home header .rt-header-bottom, 
body.home .header-bottom,
body.home #rt-category-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 45px !important;
    background: #000000 !important;
}

/* ESTILO DE LOS BOTONES PARA QUE SE VEAN EN IPAD */
.rt-category-menu ul, 
.rt-category-menu ul.menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
}

.rt-category-menu ul li a {
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    text-transform: uppercase !important;
    display: block !important;
}

/* EFECTO NARANJA */
.rt-category-menu ul li a:hover {
    color: #FF4E01 !important;
}

/* REGLA ESPECIAL IPAD */
@media (max-width: 1024px) {
    .rt-header-bottom, .header-bottom {
        display: block !important;
        background: #000 !important;
    }
    .rt-category-menu ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
}
/* FUERZA ATÓMICA PARA EL NARANJA EN TIENDA */

/* Cambia el color del texto y de cualquier icono que tenga al lado */
html body #header-area .header-bottom .rt-category-menu ul li a:hover,
html body #header-area .header-bottom .rt-category-menu ul li a:hover span,
html body #header-area .header-bottom .rt-category-menu ul li a:hover i {
    color: #FF4E01 !important;
    background: transparent !important;
}

/* Elimina cualquier efecto de sombra o decoración que bloquee el color */
#header-area .rt-category-menu ul li a {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Asegura que el contenedor del menú no tape el hover */
.rt-category-menu, .rt-category-menu ul, .rt-category-menu li {
    pointer-events: auto !important;
}
/* ELIMINAR CUALQUIER BLOQUEO DE COLOR EN LA BARRA DE CATEGORÍAS */
.rt-category-menu .main-menu ul li a:hover,
.rt-category-menu ul.menu li a:hover,
.rt-header-bottom .rt-category-menu ul li a:hover,
#header-area .header-bottom .rt-category-menu ul li a:hover {
    color: #FF4E01 !important;
}

/* POR SI EL MENÚ ESTÁ DENTRO DE UN CONTENEDOR DIFERENTE EN TIENDA */
header[class*="header-"] .rt-category-menu ul li a:hover {
    color: #FF4E01 !important;
}

/* FUERZA PARA EL TEXTO INTERNO */
.rt-category-menu li a:hover * {
    color: #FF4E01 !important;
}
/* ==========================================================
   FORZAR VISIBILIDAD DE ICONOS SOBRE LA IMAGEN (HOVER)
   ========================================================== */

/* 1. Asegura que el contenedor de botones aparezca al pasar el mouse */
.product-grid:hover .product-actions, 
.radios-product:hover .product-actions,
.rt-product-grid:hover .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: 10 !important;
}

/* 2. Estilo de los botones (Cesta y Corazón) */
.product-actions a, 
.product-actions button, 
.yith-wcwl-add-to-wishlist a {
    background-color: #ffffff !important; /* Fondo blanco para que resalten */
    color: #222222 !important; /* Icono oscuro inicial */
    border-radius: 50% !important; /* Forma circular profesional */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* 3. EFECTO NARANJA AL PASAR EL MOUSE SOBRE EL ICONO */
.product-actions a:hover, 
.yith-wcwl-add-to-wishlist a:hover {
    background-color: #FF4E01 !important; /* Fondo naranja Doña Gangas */
    color: #ffffff !important; /* Icono blanco */
}

/* 4. Corregir el icono del corazón de YITH Wishlist si está oculto */
.yith-wcwl-add-to-wishlist {
    margin: 0 !important;
    padding: 0 !important;
}
/* ==========================================================
   RESCATE DEL ICONO DE CORAZÓN (WISHLIST)
   ========================================================== */

/* 1. Forzar que el contenedor del corazón sea visible en la imagen */
.product-grid .product-actions .yith-wcwl-add-to-wishlist,
.rt-product-grid .product-actions .yith-wcwl-add-to-wishlist,
.yith-wcwl-add-to-wishlist {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99 !important;
}

/* 2. Estilo del botón del corazón para que sea un círculo blanco */
.yith-wcwl-add-to-wishlist a {
    background-color: #ffffff !important;
    color: #222222 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
}

/* 3. Hacer que el icono del corazón se vea (FontAwesome) */
.yith-wcwl-add-to-wishlist a i,
.yith-wcwl-add-to-wishlist a::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f004" !important; /* Código del corazón */
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #222222 !important;
}

/* 4. Efecto Naranja al pasar el mouse */
.yith-wcwl-add-to-wishlist a:hover {
    background-color: #FF4E01 !important;
}

.yith-wcwl-add-to-wishlist a:hover i,
.yith-wcwl-add-to-wishlist a:hover::before {
    color: #ffffff !important;
}

/* Ocultar cualquier texto que diga "Add to wishlist" para que solo quede el icono */
.yith-wcwl-add-to-wishlist span, 
.yith-wcwl-add-to-wishlist-button__label {
    display: none !important;
}
/* 1. Contenedor principal del slider */
.carusel-gangas {
    padding: 20px 0;
    overflow: visible !important; /* Para que la sombra del hover no se corte */
}

/* 2. Tarjetas de los productos */
.carusel-gangas .b-carousel-item {
    background: #ffffff;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #eee;
    margin: 15px; /* Espacio entre productos */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
}

/* 3. Efecto "Doña Gangas" al pasar el mouse */
.carusel-gangas .b-carousel-item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(255, 78, 1, 0.2); /* Sombra naranja marca de la casa */
    border-color: #FF4E01;
}

/* 4. Flechas de navegación en naranja oficial */
.carusel-gangas .b-carousel-next, 
.carusel-gangas .b-carousel-prev {
    background-color: #FF4E01 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}

.carusel-gangas .b-carousel-next:hover, 
.carusel-gangas .b-carousel-prev:hover {
    background-color: #E64601 !important; /* Naranja más oscuro al tocarlo */
}

/* 5. Puntos de navegación inferiores */
.carusel-gangas .b-carousel-dots .dot.active {
    background-color: #FF4E01 !important;
    transform: scale(1.3);
}
/* --- FORMULARIO ULTRA MODERNO DOÑA GANGAS (ESTILO WIX) --- */

/* --- FORZAR CONTENEDOR NARANJA (VERSIÓN AGRESIVA) --- */

.um.um-register, .um.um-login, div.um {
    max-width: 460px !important;
    margin: 50px auto !important;
    background: linear-gradient(145deg, #f37021, #e65c00) !important;
    padding: 50px 40px !important;
    border-radius: 40px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2) !important;
    display: block !important;
    border: none !important;
}

/* Forzar que los bordes de los campos no tengan fondo gris que tape el naranja */
.um-field-area {
    background: transparent !important;
}

/* 2. Etiquetas de texto (Labels) en Negro para que resalten */
.um-field-label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
    display: block;
}

/* 3. Campos de entrada (Inputs) Blancos y Redondeados */
.um-field-area input[type=text], 
.um-field-area input[type=password], 
.um-field-area input[type=email] {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 15px !important;
    height: 50px !important;
    color: #333 !important;
    font-size: 16px !important;
    padding: 0 20px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 4. Contenedor de los botones al final */
.um-col-alt {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

/* 5. Botón REGISTRO (Naranja con sombra) */
.um-button {
    background-color: #f37021 !important; 
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 15px 25px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border: 2px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    flex: 1;
}

/* 6. Botón ACCEDER (Blanco con texto Naranja como la imagen) */
.um-button.um-alt {
    background-color: #ffffff !important;
    color: #f37021 !important; /* Texto Naranja */
    border-radius: 25px !important;
    padding: 15px 25px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    flex: 1;
}

/* Efecto Hover para los botones */
.um-button:hover, .um-button.um-alt:hover {
    transform: translateY(-3px);
    transition: all 0.3s ease;
    filter: brightness(1.1);
}

/* Quitar líneas feas de división */
.um-field {
    border: none !important;
    padding-bottom: 15px !important;
}
/* --- ESTILO MI CUENTA - DOÑA GANGAS --- */

/* 1. Contenedor Principal de Mi Cuenta */
.woocommerce-account .woocommerce-MyAccount-content,
.u-columns.col2-set, 
#customer_login {
    background: linear-gradient(145deg, #f37021, #e65c00) !important;
    padding: 40px !important;
    border-radius: 40px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
    margin-top: 30px !important;
    border: none !important;
}

/* 2. Ajuste de títulos en Mi Cuenta */
.woocommerce-account h2, 
.woocommerce-account label {
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 14px !important;
}

/* 3. Campos de entrada Blancos (Inputs) */
.woocommerce-account input.input-text {
    background-color: #ffffff !important;
    border-radius: 15px !important;
    border: 1px solid #cccccc !important;
    height: 45px !important;
    padding: 10px 15px !important;
    color: #333 !important;
}

/* 4. Botón de Login / Registro en Mi Cuenta */
.woocommerce-account .button {
    background-color: #ffffff !important;
    color: #f37021 !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    padding: 15px 30px !important;
    text-transform: uppercase;
    border: none !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
}

.woocommerce-account .button:hover {
    transform: translateY(-3px) !important;
    background-color: #f1f1f1 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* 5. Estilo para los enlaces de "Olvidaste la contraseña" */
.woocommerce-LostPassword.lost_password a {
    color: #000000 !important;
    font-weight: 600;
    text-decoration: underline;
}

/* 6. Arreglo para que las columnas no se peguen en móvil */
@media (max-width: 768px) {
    .u-column1, .u-column2 {
        padding: 10px !important;
    }
}
/* --- AJUSTE TEXTOS LEGALES MI CUENTA DOÑA GANGAS --- */

/* 1. Texto de aviso de contraseña y datos personales en Negro Doña Gangas */
.woocommerce-privacy-policy-text,
.woocommerce-registration-pages p,
.woocommerce-form-register p {
    color: #000000 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* 2. Enlace de Política de Privacidad en Blanco y Negrita */
.woocommerce-privacy-policy-link,
.woocommerce-privacy-policy-text a.woocommerce-privacy-policy-link {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}

/* 3. Efecto hover para el enlace (se pone un poco gris al pasar el mouse) */
.woocommerce-privacy-policy-link:hover {
    color: #f1f1f1 !important;
}
/* --- SOLUCIÓN PARA BOTONES CON ESTRUCTURA SPAN (DOÑA GANGAS) --- */

/* 1. Forzamos el color naranja en los textos internos */
.woocommerce-Button .btn-wrap span,
.woocommerce-form-login__submit .btn-wrap span,
.woocommerce-form-register__submit .btn-wrap span {
    color: #f37021 !important; /* NARANJA DOÑA GANGAS */
    font-weight: 900 !important;
}

/* 2. Aseguramos que el fondo del botón sea blanco */
.woocommerce-Button.thm-btn,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    border: none !important;
    padding: 10px 20px !important;
}

/* 3. Efecto Hover: Cambiamos un poco el tono del naranja al pasar el mouse */
.woocommerce-Button:hover .btn-wrap span {
    color: #d65a10 !important;
}

/* 4. Por si el tema tiene una capa oscura encima */
.btn-wrap:before, .btn-wrap:after {
    display: none !important; /* Eliminamos capas que puedan opacar el texto */
}
/* --- AJUSTE DE TEXTO INTERNO MI CUENTA --- */

/* 1. Color general del texto en el escritorio de Mi Cuenta */
.woocommerce-MyAccount-content, 
.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content p strong {
    color: #000000 !important; /* Negro para máxima legibilidad */
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* 2. Resaltar los enlaces dentro del texto (pedidos, direcciones, etc.) */
.woocommerce-MyAccount-content a {
    color: #ffffff !important; /* Blanco para que resalte sobre el naranja */
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* 3. Efecto al pasar el mouse sobre los enlaces */
.woocommerce-MyAccount-content a:hover {
    color: #eeeeee !important;
    text-decoration: none !important;
}

/* 4. Ajuste específico para el mensaje de bienvenida */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper + p {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
/* 1. Estilo base del icono de la cesta */
.fa-shopping-basket {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transición suave estilo premium */
    cursor: pointer;
    color: #333; /* O el color actual de tu menú */
    position: relative;
}

/* 2. El efecto al pasar el ratón (Hover) */
.fa-shopping-basket:hover {
    color: #e67e22 !important; /* El naranja de Doña Ganga */
    transform: translateY(-5px) scale(1.1); /* Se eleva y crece un poquito */
    filter: drop-shadow(0px 5px 10px rgba(230, 126, 34, 0.3)); /* Sombra con tono naranja */
}

/* 3. Opcional: Si quieres que el círculo de notificación (el numerito) también reaccione */
.fa-shopping-basket:hover + .cart-contents-count {
    background-color: #d35400; /* Un naranja más oscuro */
    transform: scale(1.2);
}
/* Estilo para el icono de la cesta */
.fa-shopping-basket {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;      /* Tamaño del círculo */
    height: 40px;     /* Tamaño del círculo */
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    background-color: transparent; /* Empieza sin fondo */
    color: #333;      /* Color inicial del icono */
    text-align: center;
}

/* El efecto al pasar el cursor */
/* Se elimino el efecto anterior del cursor del mouse al pasar por encima */

/* Esto es un comentario 
   de varias líneas para 
   explicaciones más largas 
*/
/* Mejora visual de las categorías del menú - Texto Blanco */
.header__cat ul.category li a {
    font-weight: 600;          /* Letra con cuerpo para que se lea bien en blanco */
    font-size: 13px;           /* Tamaño refinado estilo Radios */
    color: #ffffff !important; /* Texto inicialmente en BLANCO */
    text-transform: uppercase; /* Look profesional en mayúsculas */
    padding: 10px 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto al pasar el mouse (Hover) */
.header__cat ul.category li a:hover {
    color: #e67e22 !important;    /* Cambia al naranja de Doña Gangas al pasar el mouse */
    transform: translateY(-2px);  /* Pequeña elevación elegante */
    background: rgba(255, 255, 255, 0.1); /* Opcional: un brillo sutil de fondo */
    border-radius: 4px;
}
/* Estilo para el menú desplegable "MÁS CATEGORÍAS" */

/* 1. Posicionamiento del contenedor */
.header__cat ul.category li {
    position: relative; /* Necesario para que el desplegable se alinee */
}

/* 2. Ocultar el sub-menú inicialmente */
.header__cat ul.category li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a1a1a; /* Fondo oscuro igual que la barra */
    min-width: 220px;
    display: none; /* Oculto por defecto */
    z-index: 999;
    padding: 10px 0;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    border-top: 3px solid #e67e22; /* Línea naranja arriba */
}

/* 3. Mostrar al pasar el mouse (Hover) */
.header__cat ul.category li:hover > ul.sub-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* 4. Estilo de los items dentro del desplegable */
.header__cat ul.category li ul.sub-menu li {
    width: 100%;
    margin: 0;
}

.header__cat ul.category li ul.sub-menu li a {
    padding: 10px 20px;
    display: block;
    color: #ffffff !important;
    font-size: 13px;
    text-transform: none; /* Letras normales para sub-categorías */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header__cat ul.category li ul.sub-menu li a:hover {
    background: rgba(230, 126, 34, 0.1); /* Fondo naranja muy suave al pasar el mouse */
    color: #e67e22 !important;
}

/* Animación de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Ocultar barra de autor, comentarios y tiempo de lectura en Doña Gangas */
.post-meta.meta-bottom-border.ul_li {
    display: none !important;
}
/* Eliminar navegación de entradas anterior/siguiente en Doña Gangas */
.row.post-nav {
    display: none !important;
}
/* Eliminar formulario de comentarios en Doña Gangas */
#commentform, .comment-respond, .comments-area {
    display: none !important;
}
/* Eliminar bloque de Tags y Compartir en Redes Sociales */
.post-tags-share, .social-share.ul_li, .tags.ul_li {
    display: none !important;
}
/* 1. Hacer que el contenedor ocupe todo el ancho de la pantalla */
.woocommerce-content-wrap {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
}

/* 2. Forzar 5 columnas en la lista de productos */
ul.products.default-column {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Crea 5 columnas iguales */
    gap: 15px !important; /* Espacio entre productos */
    list-style: none !important;
    padding: 0 !important;
}

/* 3. Asegurar que cada producto se vea profesional en la nueva rejilla */
ul.products.default-column li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important; /* Elimina el comportamiento antiguo de WP */
}

/* 4. Imágenes justificadas y ajustadas */
.product-holder img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important; /* Esto hace que se vean uniformes */
}

/* 5. Ajuste para móviles (para que no se vean 5 columnas en un celular) */
@media (max-width: 768px) {
    ul.products.default-column {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en móvil */
    }
}
/* ==========================================================
   ESTILOS PREMIUM PARA DESCRIPCIÓN DE PRODUCTO - DOÑA GANGAS
   ========================================================== */

/* 1. Contenedor Principal y Tipografía Base */
.dg-premium-container {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* O usa la fuente de tu tema */
    color: #333;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 2. Banner de Impacto (Hero Banner) */
.dg-hero-banner {
    background: linear-gradient(135deg, #FF4E01 0%, #ff7a00 100%); /* Tu Naranja Oficial */
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(255, 78, 1, 0.2);
}

.dg-hero-banner h2 {
    color: white !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}

.dg-hero-banner p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem !important;
    max-width: 600px;
    margin: 0 auto !important;
}

/* Ticker de Urgencia (Badge y Stock) */
.dg-ticker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.dg-badge-fire {
    background-color: #000;
    color: #FF4E01;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dg-stock-blink {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    animation: dg-blink 1.5s infinite; /* Animación de parpadeo */
}

@keyframes dg-blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* 3. Cuadrícula de Beneficios (Grid) */
.dg-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.dg-benefit-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.dg-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(255, 78, 1, 0.1);
    border-color: rgba(255, 78, 1, 0.3);
}

.dg-icon-wrapper {
    background-color: rgba(255, 78, 1, 0.1);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
}

.dg-icon-wrapper i {
    color: #FF4E01;
    font-size: 32px;
}

.dg-benefit-card h4 {
    color: #222 !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
}

.dg-benefit-card p {
    color: #666 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* 4. Sección de Especificaciones (Tabla) */
.dg-specs-section {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.dg-specs-section h3 {
    color: #FF4E01 !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-specs-section p {
    color: #777 !important;
    margin-bottom: 20px !important;
}

.dg-tech-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.dg-tech-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.dg-tech-table tr:last-child td {
    border-bottom: none;
}

.dg-tech-table td:first-child {
    font-weight: bold;
    color: #333;
    width: 35%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-tech-table td:first-child i {
    color: #FF4E01;
    width: 20px;
    text-align: center;
}

.dg-tech-table td:last-child {
    color: #555;
}

/* 5. Llamada a la Acción Final (CTA) */
.dg-final-cta {
    background-color: #fff3e0;
    border-left: 5px solid #FF4E01;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    text-align: center;
}

.dg-final-cta p {
    color: #b35900 !important;
    margin: 0 !important;
    font-size: 1rem !important;
}

.dg-final-cta strong {
    color: #FF4E01;
}

.dg-final-cta i {
    color: #FF4E01;
    margin-right: 5px;
}

/* ==========================================================
   ADAPTACIÓN PARA MÓVILES (RESPONSIVE)
   ========================================================= */
@media (max-width: 768px) {
    .dg-hero-banner {
        padding: 30px 20px;
    }

    .dg-hero-banner h2 {
        font-size: 1.8rem !important;
    }

    .dg-ticker {
        flex-direction: column;
        gap: 8px;
    }

    .dg-benefits-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 15px;
    }

    .dg-benefit-card {
        padding: 20px;
    }

    .dg-tech-table td:first-child {
        width: 100%;
        padding-bottom: 5px;
    }

    .dg-tech-table td {
        display: block;
        width: 100%;
    }
}
/* --- DISEÑO EXCLUSIVO DOÑA GANGAS (ESTILO APP) --- */
.dg-temu-container {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #222;
    padding: 5px 0;
}

/* Etiquetas superiores en tu naranja */
.dg-local-tag {
    display: flex;
    align-items: center;
    color: #FF4E01; 
    font-size: 13px;
    font-weight: 700;
}

.dg-local-tag i { margin-right: 5px; }

.dg-product-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin: 10px 0 !important;
    color: #111;
}

/* Contador de ventas sutil */
.dg-sold-count {
    background: #FFF0E6; /* Fondo naranja muy clarito */
    color: #FF4E01;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.dg-rating { color: #000; font-weight: 700; }
.dg-rating i { color: #FFB800; font-size: 11px; }

/* Precios estilo Doña Gangas */
.dg-price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 15px 0;
}

.dg-current-price {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    letter-spacing: -1px;
}

.dg-currency, .dg-decimal { font-size: 20px; }

.dg-old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 15px;
}

.dg-discount-badge {
    background-color: #FF4E01;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 14px;
}

/* Banner de Envío con tu toque naranja */
.dg-shipping-banner {
    background-color: #F8F9FA; /* Gris muy limpio */
    border-left: 4px solid #FF4E01; /* Borde naranja característico */
    border-radius: 0 8px 8px 0;
    padding: 12px 15px;
}

.dg-shipping-top {
    display: flex;
    align-items: center;
    color: #111;
    font-size: 14px;
    margin-bottom: 5px;
}

.dg-shipping-top i {
    color: #FF4E01; /* Camión Naranja */
    margin-right: 8px;
    font-size: 18px;
}

.dg-shipping-bold { font-weight: 700; color: #0A8800; } /* El GRATIS sigue en verde porque vende más */

.dg-shipping-bottom {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
}

.dg-shipping-bottom i { margin-right: 5px; color: #FF4E01; }

.dg-short-description-text {
    font-size: 13px !important; /* Letra pequeña */
    color: #555; /* Gris suave para no cansar la vista */
    line-height: 1.4;
    margin-bottom: 12px;
    margin-top: -5px; /* Pegadito al título */
}
/* 4. Botón "Añadir al carrito" Estilo Doña Gangas (SIN EFECTOS) */
ul.products li.product .button {
    background-color: #FF4E01 !important; /* Tu Naranja Oficial */
    color: #fff !important;               /* Texto e Icono en Blanco */
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 12px !important;
    transition: background 0.3s ease !important; /* Solo suavizamos el cambio de color */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    transform: none !important;           /* Bloqueamos cualquier movimiento inicial */
}

/* Efecto al pasar el ratón: SOLO cambio de color de fondo */
ul.products li.product .button:hover {
    background-color: #e64601 !important; /* Naranja más oscuro */
    color: #ffffff !important;
    transform: none !important;           /* ELIMINA EL SALTO/MOVIMIENTO */
    box-shadow: none !important;         /* ELIMINA SOMBRAS EXTRA */
}

/* Quitamos cualquier efecto específico al ICONO dentro del botón */
ul.products li.product .button:hover i, 
ul.products li.product .button:hover .fa-shopping-basket {
    transform: none !important;           /* ELIMINA QUE EL ICONO CREZCA O SE MUEVA */
    color: #ffffff !important;
    transition: none !important;
}
/* ==========================================================
   ADICIÓN PRO: POSICIONAMIENTO DE ACCIONES (CARRITO + CORAZÓN)
   ========================================================== */

/* 1. CREAR EL ESPACIO FÍSICO BAJO LA FOTO */
.product-holder {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 85px !important; /* El hueco exacto para que floten los botones */
}

/* 2. POSICIONAR EL GRUPO DE BOTONES EN EL HUECO */
.product-holder .product__action {
    position: absolute !important;
    top: auto !important;
    bottom: -45px !important; /* Centrado verticalmente en el espacio blanco */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important; /* Uno al lado del otro */
    gap: 12px !important; /* Separación elegante */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    z-index: 999 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. DISEÑO DE LOS BOTONES CIRCULARES */
.product-holder .product__action li {
    display: inline-flex !important;
    list-style: none !important;
}

.product-holder .product__action li a,
.yith-wcwl-add-to-wishlist a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12) !important;
    border: none !important;
}

/* Botón Carrito Principal (70px) */
.product-holder .product__action li a.action-cart,
.product-holder .product__action li a.add_to_cart_button {
    background-color: #FF4E01 !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
}

/* Botón Corazón Secundario (50px) */
.yith-wcwl-add-to-wishlist a {
    background-color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
}

/* 4. INYECCIÓN DE ICONOS (NITIDEZ TOTAL) */
/* Limpiamos iconos antiguos o rotos */
.product-holder .product__action li a i, 
.product-holder .product__action li a span, 
.product-holder .product__action li a::after { display: none !important; }

/* Carrito SVG Blanco */
.product-holder .product__action li a.action-cart::before,
.product-holder .product__action li a.add_to_cart_button::before {
    content: "" !important;
    width: 34px !important;
    height: 34px !important;
    background-color: #ffffff !important;
    display: block !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
}

/* Corazón FontAwesome */
.yith-wcwl-add-to-wishlist a::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f004" !important;
    font-weight: 400;
    font-size: 20px !important;
    color: #222 !important;
    display: block !important;
}

/* 5. INTERACCIÓN Y AJUSTE DE TEXTO */
.product-holder .product__action li a:hover {
    transform: scale(1.1) translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(255, 78, 1, 0.3) !important;
}

.yith-wcwl-add-to-wishlist a:hover::before {
    color: #FF4E01 !important; /* Corazón naranja al hover */
}

/* Separar el título para que no se monte */
li.product.type-product .product__title {
    margin-top: 55px !important;
    text-align: center !important;
}
/* ==========================================================
   AJUSTE DE POSICIÓN: EMPUJAR BOTONES HACIA ABAJO
   ========================================================== */

/* 1. Aumentamos el hueco bajo la imagen */
.product-holder {
    margin-bottom: 110px !important; /* Espacio extra para que no se vea amontonado */
}

/* 2. Bajamos el bloque de botones (Carrito + Corazón) */
.product-holder .product__action {
    bottom: -65px !important; /* Antes estaba en -45px, ahora baja mucho más */
}

/* 3. Empujamos el título del producto para que el botón no lo tape */
li.product.type-product .product__title {
    margin-top: 75px !important; /* Ajustado para el nuevo descenso de los botones */
}

/* 4. Aseguramos que el botón de deseos (corazón) herede la misma posición */
.yith-wcwl-add-to-wishlist {
    bottom: -65px !important;
}
/* ==========================================================
   AJUSTE DE PRECISIÓN: BAJAR BOTONES + SUBIR DESCRIPCIÓN
   ========================================================== */

/* 1. Bajamos los botones un poco más (Carrito + Corazón) */
.product-holder .product__action,
.yith-wcwl-add-to-wishlist {
    bottom: -75px !important; /* Estaba en -65px, ahora baja a -75px */
}

/* 2. Subimos la descripción (título) para pegarla a los botones */
li.product.type-product .product__title {
    margin-top: 50px !important; /* Reducimos de 75px a 50px para "subir" el texto */
    margin-bottom: 5px !important; /* Quitamos aire por debajo del título */
    line-height: 1.2 !important;
}

/* 3. Ajustamos el contenedor para que el hueco sea perfecto */
.product-holder {
    margin-bottom: 120px !important; /* Espacio total para el baile de elementos */
}

/* 4. Aseguramos que el precio también suba con el título */
.product__price, .price-action-block.two-items {
    margin-top: 5px !important; /* Pegamos la caja de precios al título */
}
/* ==========================================================
   AJUSTE DE PRECISIÓN FINAL: DESCENSO MÁXIMO + SUBIDA DE TEXTO
   ========================================================== */

/* 1. Bajamos los botones al límite inferior del hueco (Carrito + Corazón) */
.product-holder .product__action,
.yith-wcwl-add-to-wishlist {
    bottom: -85px !important; /* De -75px bajamos a -85px para un efecto más flotante */
}

/* 2. Subida exacta de la descripción (título) hacia los botones */
li.product.type-product .product__title {
    margin-top: 35px !important; /* Reducimos drásticamente de 50px a 35px */
    margin-bottom: 2px !important; /* Pegamos el título a los precios */
    padding-top: 0 !important;
}

/* 3. Ajustamos el bloque de precios para que acompañe la subida */
.product__price, .price-action-block.two-items {
    margin-top: 0px !important; /* Eliminamos cualquier margen superior del precio */
}

/* 4. Mantenemos el hueco de seguridad para que nada se monte */
.product-holder {
    margin-bottom: 130px !important; /* Espacio total para el baile de elementos */
}
/* ==========================================================
   AJUSTE DE IMPACTO: SUBIDA MÁXIMA DE DESCRIPCIÓN
   ========================================================== */

/* 1. Usamos margen negativo para "succionar" el título hacia arriba */
li.product.type-product .product__title {
    margin-top: -15px !important; /* Margen negativo para eliminar el hueco */
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 2. Pegamos la caja de precios inmediatamente al título */
.product__price, .price-action-block.two-items {
    margin-top: -5px !important; /* Subimos también el bloque de precios */
}

/* 3. Ajustamos el contenedor de la imagen para que no bloquee la subida */
.product-holder {
    margin-bottom: 115px !important; /* Ajuste del colchón blanco */
}

/* 4. Mantenemos los botones en su sitio bajado */
.product-holder .product__action,
.yith-wcwl-add-to-wishlist {
    bottom: -85px !important; 
}
/* ==========================================================
   VERSION FINAL: SOLO CARRITO CENTRADO Y FIJO
   ========================================================== */

/* 1. OCULTAR BOTONES DE COMPARAR Y DESEOS (WISHLIST) */
ul.product__action li:has(.compare-button),
ul.product__action li:has(.yith-add-to-wishlist-button-block),
ul.product__action li .compare-button,
ul.product__action li .yith-add-to-wishlist-button-block {
    display: none !important;
}

/* 2. CENTRAR Y FIJAR EL BLOQUE DE ACCIÓN */
ul.product__action {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: -85px !important; /* Posición bajada que ya ajustamos */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    justify-content: center !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. ESTILO DEL BOTÓN DE CARRITO (EL ÚNICO VISIBLE) */
ul.product__action li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

ul.product__action li a.action-cart,
ul.product__action li a.add_to_cart_button {
    background-color: #FF4E01 !important; /* Tu naranja oficial */
    width: 75px !important;  /* Tamaño grande impactante */
    height: 75px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(255, 78, 1, 0.4) !important;
    transition: transform 0.2s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. ICONO BLANCO NITIDO (SVG BLINDADO) */
/* Borramos textos y tooltips */
ul.product__action .custom-tooltip,
ul.product__action span,
ul.product__action li a i {
    display: none !important;
}

/* Inyectamos el carrito del patrón */
ul.product__action li a.action-cart::before,
ul.product__action li a.add_to_cart_button::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
}

/* 5. ANULAR CUALQUIER EFECTO DE OCULTACIÓN DEL TEMA */
.product-holder:hover .product__action,
li.product:hover .product__action {
    opacity: 1 !important;
    visibility: visible !important;
}
/* ==========================================================
   BLOQUEO DE AVISO "VER CARRITO" (LIMPIEZA POST-COMPRA)
   ========================================================== */

/* 1. Ocultar el enlace de "Ver carrito" que aparece tras el clic */
.added_to_cart.wc-forward,
.product-holder .added_to_cart,
ul.product__action .added_to_cart {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* 2. Asegurar que el botón naranja no se mueva ni cambie al aparecer el aviso oculto */
ul.product__action li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ==========================================================
   ESTILO BARRA SUPERIOR (TOP INFO): NEGRO CARBONO
   ========================================================== */

/* 1. EL CONTENEDOR PRINCIPAL */
.header__top-info {
    background-color: #1b1b1b !important; /* Negro carbono muy elegante */
    padding: 8px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Forzar que el contenedor padre (si existe) no deje franjas blancas */
.header-top, .rt-header-top {
    background-color: #1b1b1b !important;
}

/* 2. TEXTOS Y ENLACES (Ubicación, Pedidos, Bienvenida) */
.header__top-info ul li, 
.header__top-info ul li a, 
.header__top-info .date {
    color: #cccccc !important; /* Gris claro para que no canse la vista */
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

/* Efecto hover naranja para los enlaces */
.header__top-info ul li a:hover {
    color: #FF4E01 !important;
}

/* 3. ICONOS (Marker, Truck, Calendar, Heart) */
.header__top-info i {
    color: #FF4E01 !important; /* Iconos en naranja para resaltar */
    margin-right: 5px !important;
}

/* 4. REDES SOCIALES (Instagram, Facebook, etc.) */
.header__social a {
    color: #ffffff !important;
    margin-left: 15px !important;
    font-size: 14px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.header__social a:hover {
    color: #FF4E01 !important;
    transform: scale(1.2) !important;
}

/* 5. ELIMINAR SEPARADORES FEOS (La barra "|" si no te gusta) */
.header__top-info ul li {
    border: none !important;
}
/* ==========================================================
   EXTENSIÓN DE COLOR TOTAL (FULL WIDTH)
   ========================================================== */

/* 1. EXTENDER BARRA SUPERIOR (TOP INFO) */
.header-top, 
.rt-header-top,
header .header__top-info-wrap { /* Dependiendo de la clase de tu tema */
    background-color: #1b1b1b !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. EXTENDER BARRA CENTRAL (LOGO Y BUSCADOR) */
.header-middle,
.header-middle-wrap,
header .header__middle-wrap {
    background-color: #FF4E01 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. ASEGURAR QUE EL CONTENEDOR INTERNO NO TENGA FONDO BLANCO */
.header__top-info, 
.header__middle {
    background-color: transparent !important; /* Para que hereden el color del padre extendido */
    width: 100% !important;
    max-width: 1200px !important; /* Mantenemos el contenido centrado */
    margin: 0 auto !important;
    display: flex !important;
}

/* 4. ELIMINAR POSIBLES MÁRGENES BLANCOS LATERALES EN EL BODY */
.site-header, #header-area {
    width: 100% !important;
    padding: 0 !important;
}
/* ==========================================================
   SISTEMA DE PRECIOS IMPACTO: COMPETENCIA VS DOÑA GANGAS
   ========================================================== */

/* 1. CONTENEDOR DE LA TABLA DE PRECIOS */
.price-box, 
.product__price {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Mitad para competencia, mitad para nosotros */
    border: 1px solid #e2e2e2 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 15px auto !important;
    background: #ffffff !important;
    text-align: center !important;
    max-width: 95% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 2. ESTILO PARA LA COLUMNA DE LA COMPETENCIA (IZQUIERDA) */
.price-box .old-price,
.product__price del {
    background-color: #f9f9f9 !important; /* Gris suave */
    border-right: 1px solid #e2e2e2 !important;
    padding: 10px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Etiqueta superior "Competencia" */
.price-box .old-price::before,
.product__price del::before {
    content: "COMPETENCIA" !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #999 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

/* El número tachado */
.price-box .old-price .price,
.product__price del .amount {
    text-decoration: line-through !important;
    color: #777 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* 3. ESTILO PARA TU PRECIO (DERECHA - OFERTA) */
.price-box .special-price,
.product__price ins {
    background-color: #ffffff !important;
    padding: 10px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* Etiqueta superior "Nuestro Precio" */
.price-box .special-price::before,
.product__price ins::before {
    content: "OFERTA" !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #FF4E01 !important; /* Tu Naranja oficial */
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

/* El número grande en color de impacto */
.price-box .special-price .price,
.price-box .precio_unico_custom_db,
.product__price ins .amount {
    color: #E60000 !important; /* Rojo vibrante para el precio final */
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* 4. LIMPIEZA DE ETIQUETAS Y TEXTOS RESIDUALES */
.price-box .price-label, 
.screen-reader-text,
.product__price .screen-reader-text {
    display: none !important;
}

/* 5. BLINDAJE PARA EL SCROLL (QUE SE OCULTE BAJO EL MENÚ) */
.price-box, .product__price {
    z-index: 1 !important;
    position: relative !important;
}
/* ==========================================================
   APLICACIÓN DE COLOR NARANJA AL BLOQUE HEADER__MIDDLE
   ========================================================== */

/* 1. EL CONTENEDOR PRINCIPAL QUE PASASTE */
.header__middle {
    background-color: #FF7800 !important;
    display: flex !important;
    align-items: center !important;
    padding: 20px 0 !important; /* Ajuste de espacio arriba y abajo */
    border: none !important;
}

/* 2. EL CONTENEDOR 'CONTAINER' (PARA QUE NO SE VEA BLANCO A LOS LADOS) */
div:has(> .header__middle), 
.container:has(> .header__middle) {
    background-color: #FF7800 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. AJUSTE DE LOS ICONOS PARA QUE RESALTEN (PASAR A BLANCO) */
.header__icons .icon img {
    filter: brightness(0) invert(1) !important;
}

/* 4. AJUSTE DEL BUSCADOR PARA QUE SE VEA MODERNO SOBRE NARANJA */
.header__search-box {
    background-color: #ffffff !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.header__search-box button {
    background-color: #222 !important; /* Botón oscuro para contraste */
    color: #fff !important;
    border: none !important;
}

/* 5. ELIMINAR CUALQUIER FONDO EN EL LOGO SI QUEDARA */
.header__logo a, .header__logo img {
    background: transparent !important;
}
/* ==========================================================
   ORDEN DE CAPAS: MENÚ NEGRO VS BOTÓN CARRITO
   ========================================================== */

/* 1. ELEVAMOS LA BARRA DE MENÚ (LA BARRA NEGRA) */
.header__bottom, 
.main-menu-area, 
.rt-sticky-menu-wrap,
#sticky-header {
    z-index: 9999 !important; /* Capa máxima para que nada pase por encima */
    position: relative !important;
}

/* 2. BAJAMOS LA PRIORIDAD DEL BOTÓN "AÑADIR AL CARRITO" */
/* Atacamos el botón y su contenedor en la página de producto */
.single-product .quantity,
.single-product .cart,
.single-product .single_add_to_cart_button,
.product-grid .add-to-cart-btn {
    z-index: 1 !important; /* Lo mantenemos en una capa base */
}

/* 3. REFUERZO PARA LA CABECERA COMPLETA */
header {
    z-index: 10000 !important; /* Asegura que toda la cabecera mande sobre el cuerpo */
}

/* 4. SI LA BARRA NEGRA ES STICKY (SE QUEDA FIJA AL BAJAR) */
.is-sticky .header__bottom, 
.header-fixed {
    z-index: 99999 !important; 
}
/* ==========================================================
   MENÚ LATERAL (ASIDE): POSICIONAMIENTO POR ENCIMA DE TODO
   ========================================================== */

/* 1. FORZAMOS EL MENÚ LATERAL A LA CAPA SUPERIOR */
aside.slide-bar {
    z-index: 999999 !important; /* Un nivel superior a la barra negra */
    background-color: #ffffff !important; /* Aseguramos fondo sólido para que no transparente la barra negra */
}

/* 2. EL BOTÓN DE CERRAR DEBE SER VISIBLE */
.close-mobile-menu {
    z-index: 1000000 !important;
}

/* 3. REFUERZO PARA EL FONDO OSCURO QUE BLOQUEA LA WEB (OVERLAY) */
/* Si tu tema usa un fondo oscuro detrás del menú lateral, lo subimos también */
.body-overlay, 
.offcanvas-overlay {
    z-index: 999998 !important;
}

/* 4. AJUSTE OPCIONAL: COLOR NARANJA EN BUSCADOR DEL MENÚ LATERAL */
.header-mobile-search button {
    background-color: #FF7800 !important;
    color: #fff !important;
    border: none !important;
}
/* ==========================================================
   OCULTAR CONTADOR DE LISTA DE DESEOS (WISHLIST)
   ========================================================== */

.wishlist-icon .yith-wcwl-items-count.count,
span.yith-wcwl-items-count {
    display: none !important;
}
/* ==========================================================
   OCULTAR CONTADOR DEL CARRITO (ID ESPECÍFICO)
   ========================================================== */

#mini-cart-count, 
.shopping-bag span.count {
    display: none !important;
}
/* ESTILOS PARA EL PIE DE PÁGINA DOÑA GANGAS */
.dg-footer-custom {
    padding: 30px 0;
}

.dg-footer-custom .footer-block-title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dg-footer-custom ul li {
    margin-bottom: 10px;
}

.dg-footer-custom ul li a:hover {
    color: #FF7800 !important; /* El naranja de la cabecera */
    padding-left: 5px;
    transition: all 0.3s ease;
}

.parrafo_desc_footer_tienda {
    line-height: 1.5;
}
.dg-footer-wrap a:hover {
    color: #FF7800 !important;
    transition: 0.3s;
}
/* MEJORAS VISUALES FOOTER DOÑA GANGAS */

/* 1. Títulos más potentes con línea naranja */
.footer__widget .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-bottom: 25px !important;
    position: relative;
    padding-bottom: 10px;
}

.footer__widget .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FF7800; /* Tu naranja corporativo */
}

/* 2. Efecto en los enlaces (se mueven y cambian de color) */
.footer__widget ul li a {
    transition: all 0.3s ease;
    color: #666 !important;
    text-decoration: none;
}

.footer__widget ul li a:hover {
    color: #FF7800 !important;
    padding-left: 8px; /* Pequeño desplazamiento a la derecha */
}

/* 3. Espaciado y limpieza de la barra legal */
.footer__bottom {
    border-top: 1px solid #f0f0f0 !important;
    background-color: #fafafa; /* Un gris casi blanco para diferenciar el fondo */
    padding: 25px 0 !important;
}

.horizontal-links li a:hover {
    color: #FF7800 !important;
}
/* --- REFUERZO PARA DOÑA GANGAS --- */

/* Quitar los puntos de las listas que a veces pone WordPress */
.footer__widget ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Evitar que los enlaces se subrayen solos */
.footer__widget a, .horizontal-links a {
    text-decoration: none !important;
}

/* Hacer que los iconos de pago no se peguen al texto */
.apps-img img {
    margin-top: 10px;
    display: block;
}

/* Espaciado entre las líneas de la lista */
.footer__widget ul li {
    margin-bottom: 8px;
}
/* ESTILO CORPORATIVO DOÑA GANGAS CON ICONO PERSONALIZADO */

/* 1. Cambiar el icono del carrito por tu imagen SVG */
.xoo-wsc-bki.xoo-wsc-icon-shopping-bag1, 
.xoo-wsch-bki.xoo-wsc-icon-shopping-bag1 {
    display: inline-block !important;
    width: 24px !important; /* Ajusta el tamaño según veas */
    height: 24px !important;
    background-image: url('https://xn--doagangas-m6a.com/wp-content/themes/radios/assets/img/shopping_bag.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Ocultar el icono viejo de fuente para que no se vea doble */
.xoo-wsc-bki::before, .xoo-wsch-bki::before {
    display: none !important;
}

/* 2. Cabecera del carrito */
.xoo-wsch-top {
    background-color: #FF7800 !important;
    color: #ffffff !important;
}

.xoo-wsch-text, .xoo-wsch-items-count {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 3. El botón flotante lateral */
.xoo-wsc-basket {
    background-color: #FF7800 !important;
    box-shadow: 0 4px 15px rgba(255, 120, 0, 0.3) !important;
    border-radius: 50% 0 0 50% !important;
    padding: 10px !important;
}

/* Ajuste del contador sobre el icono personalizado */
.xoo-wsc-items-count {
    background-color: #222 !important;
    color: #fff !important;
    font-size: 11px !important;
}

/* 4. Botones del carrito */
.xoo-wsc-btn, .xoo-wsc-ft-btn {
    background-color: #FF7800 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.xoo-wsc-btn:hover {
    background-color: #e66b00 !important;
    transform: scale(1.05);
}
/* Eliminar el Header Style Two y su espacio reservado */
header.header__style-two, 
.header__style-two, 
.uk-sticky-placeholder {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* --- CHECKOUT PREMIUM DOÑA GANGAS --- */

/* 1. Fondo de página y Contenedor Principal */
.wc-block-checkout {
    background-color: #f4f4f4 !important;
    padding: 30px 0 !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Diseño de "Tarjetas" para cada sección */
.wc-block-components-checkout-step, 
.wc-block-components-sidebar {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    border: 1px solid #e0e0e0 !important;
    margin-bottom: 25px !important;
}

/* 3. Títulos Elegantes */
.wc-block-components-title, 
.wc-block-components-checkout-step__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #222 !important;
    border-left: 5px solid #FF7800 !important; /* El naranja de Doña Gangas */
    padding-left: 15px !important;
    margin-bottom: 25px !important;
}

/* 4. Estilo de Campos de Entrada (Inputs) */
.wc-block-components-text-input input, 
.wc-block-components-text-input label,
.wc-blocks-components-select__select {
    border-radius: 8px !important;
    border-color: #ddd !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

/* Efecto Focus en campos (Naranja Doña Gangas) */
.wc-block-components-text-input input:focus {
    border-color: #FF7800 !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.1) !important;
    outline: none !important;
}

/* 5. Estilo de Errores (Más suave pero claro) */
.wc-block-components-text-input.has-error input {
    border-color: #cc0000 !important;
    background-color: #fff8f8 !important;
}

.wc-block-components-validation-error {
    color: #cc0000 !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

/* 6. Sidebar (Resumen del Pedido) */
.wc-block-checkout__sidebar {
    border-top: 4px solid #FF7800 !important;
}

.wc-block-components-checkout-order-summary__title-text {
    color: #FF7800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 7. El Botón Maestro: "Realizar el Pedido" */
.wc-block-components-checkout-place-order-button {
    background-color: #FF7800 !important; /* Color corporativo */
    color: #ffffff !important;
    border-radius: 50px !important; /* Botón redondeado elegante */
    padding: 25px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 20px rgba(255, 120, 0, 0.3) !important;
    transition: transform 0.2s, background 0.3s !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: #e66b00 !important;
    transform: translateY(-2px) !important;
}

/* 8. Detalles Finales: Checkboxes y Enlaces */
.wc-block-components-checkbox__input:checked {
    background-color: #FF7800 !important;
    border-color: #FF7800 !important;
}

.wc-block-checkout__terms a {
    color: #FF7800 !important;
    text-decoration: underline !important;
}
/* Reducir tamaño del título del producto en Doña Gangas */
h2.product_title.entry-title {
    font-size: 22px !important; /* Tamaño más discreto y elegante */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #222 !important;
    text-transform: none !important; /* Mantiene minúsculas para mayor suavidad */
}

/* Ajuste opcional para móviles para que no se vea gigante */
@media (max-width: 768px) {
    h2.product_title.entry-title {
        font-size: 18px !important;
    }
}
/* --- BLOQUEO TOTAL DE ANIMACIÓN - DOÑA GANGAS --- */

.single_add_to_cart_button.thm-btn {
    background: linear-gradient(135deg, #FF7800 0%, #FF9133 100%) !important;
    border-radius: 50px !important;
    padding: 15px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 15px rgba(255, 120, 0, 0.25) !important;
    height: auto !important;
    min-height: 55px !important;
}

/* Forzar que el contenedor del texto NO se mueva */
.single_add_to_cart_button.thm-btn .btn-wrap {
    display: block !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Forzar que el PRIMER texto sea SIEMPRE visible y blanco */
.single_add_to_cart_button.thm-btn .btn-wrap span:first-child {
    display: block !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    position: relative !important;
}

/* ELIMINAR CUALQUIER EFECTO HOVER SOBRE EL TEXTO */
.single_add_to_cart_button.thm-btn:hover .btn-wrap span:first-child {
    color: #ffffff !important;
		background: #f37021 
    opacity: 1 !important;
    transform: none !important;
}

/* OCULTAR DEFINITIVAMENTE EL SEGUNDO TEXTO (el que causa el fallo) */
.single_add_to_cart_button.thm-btn .btn-wrap span:last-child {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Efecto de Brillo (Glow) que no toca el texto */
.single_add_to_cart_button.thm-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transition: all 0.6s !important;
    z-index: 2 !important;
}

.single_add_to_cart_button.thm-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(255, 120, 0, 0.4) !important;
}

.single_add_to_cart_button.thm-btn:hover::before {
    left: 100% !important;
}
/* OCULTAR FECHA EN EL CONTENIDO */
div.date {
    display: none !important;
}

/* Si quieres ser más específico y que solo se oculte en los listados de productos o posts */
.product-item .date, 
.post-item .date {
    display: none !important;
}
/* POSICIONAMIENTO ABSOLUTO EN LA BARRA NEGRA */
.dg-force-topbar {
    position: absolute !important;
    top: 8px !important; /* Ajusta este número para subir o bajar */
    left: 5% !important; /* Lo pega a la izquierda */
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.dg-topbar-email {
    font-size: 13px !important;
    font-family: sans-serif !important;
    display: flex !important;
    align-items: center !important;
}

/* Ocultar en móviles muy pequeños si estorba */
@media (max-width: 600px) {
    .dg-force-topbar {
        display: none !important;
    }
}
/* OCULTAR CORREO EN MÓVILES Y TABLETS */
@media (max-width: 991px) {
    /* FORZAR ESTÁTICO: Esto evita que el script sticky del tema Radios actúe */
    .header__main-center, 
    .header__search-wrap,
    .header__cat-wrap,
    header {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Asegurar que el input no dispare eventos de redimensionamiento */
    .header__search-box .searchbox {
        font-size: 16px !important;
        height: 50px !important;
        -webkit-tap-highlight-color: transparent;
    }
}
/* CAMBIAR SOLO EL COLOR DE FONDO A NARANJA */
.login-sign-btn .thm-btn {
    background-color: #FF7800 !important; /* El naranja de Doña Gangas */
    background-image: none !important; /* Elimina degradados si los hubiera */
    color: #ffffff !important; /* Texto en blanco */
    border: none !important;
}

/* Color al pasar el ratón (un poco más oscuro para que se note el clic) */
.login-sign-btn .thm-btn:hover {
    background-color: #e66b00 !important;
    color: #ffffff !important;
}

/* Asegurar que el texto dentro del wrap sea blanco */
.login-sign-btn .thm-btn span {
    color: #ffffff !important;
}
/* OCULTAR SELECTOR DE CATEGORÍAS DEL BUSCADOR */
.select-box, 
#product_cat.cate-dropdown {
    display: none !important;
}
/* Ultima Actualización 09-04-2026*/
==========================================================
   BUSCADOR MÓVIL ESTILO APP - DOÑA GANGAS (REDISEÑO TOTAL)
   ========================================================== */

@media (max-width: 991px) {
    /* 1. Forzar al buscador a bajar a su propia fila */
    .header__main-center, 
    .header__search-wrap {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
    }

    /* 2. El Contenedor: Lo hacemos ancho y le quitamos el borde negro grueso */
    .header__search-box {
        display: flex !important;
        margin: 15px auto 10px auto !important;
        width: 92% !important; /* Ancho elegante */
        height: 48px !important; /* Más alto para que sea fácil de tocar */
        background: #ffffff !important;
        border-radius: 12px !important; /* Bordes más redondeados tipo moderno */
        border: none !important; /* Quitamos el borde negro */
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; /* Sombra suave para que flote */
        overflow: hidden !important;
    }

    /* 3. El campo de texto: 16px para evitar el rebote del teclado */
    .header__search-box .searchbox {
        flex: 1 !important;
        font-size: 16px !important;
        padding: 0 15px !important;
        border: none !important;
        color: #333 !important;
        background: transparent !important;
        outline: none !important;
    }

    /* 4. El Botón de Búsqueda (Lupa) */
    .header__search-box button[type="submit"] {
        background-color: #222222 !important; /* Negro para que contraste con el blanco */
        color: #ffffff !important;
        width: 60px !important;
        border: none !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 5. Ajuste del Logo para que no empuje el buscador */
    .header__logo {
        text-align: center !important;
        width: 100% !important;
        margin: 5px 0 15px 0 !important;
        display: block !important;
    }

    /* 6. Alinear iconos de usuario/carrito para que no estorben */
    .header__icons {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
}

/* --- ACTUALIZADO: 09/04/2026 --- */
/* ==========================================================
   AJUSTE DE ALTURA PARA NO TAPAR EL LOGO - DOÑA GANGAS
   ========================================================== */

@media (max-width: 991px) {
    /* 1. Aumentamos la altura del fondo naranja para que quepa todo */
    .header__middle {
        min-height: 220px !important; /* Subimos de 190 a 220 para dar más espacio */
        position: relative !important;
        display: block !important;
    }

    /* 2. El Buscador: Lo bajamos un poco más respecto al fondo */
    .header__search-box {
        position: absolute !important;
        bottom: 15px !important; /* Lo pegamos más a la barra negra para liberar arriba */
        left: 5% !important;
        width: 90% !important;
        display: flex !important;
        height: 46px !important;
        background: #ffffff !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
        z-index: 99 !important;
    }

    /* 3. El Logo: Le damos margen superior para que no se pegue al borde del móvil */
    .header__logo {
        padding-top: 20px !important; 
        margin-bottom: 0 !important;
        display: block !important;
    }

    /* 4. Los Iconos: Los mantenemos arriba junto al nombre del logo */
    .header__icons {
        position: absolute !important;
        top: 30px !important; /* Ajustado para que queden alineados con el texto Doña Gangas */
        right: 20px !important;
        display: flex !important;
        gap: 15px !important;
    }

    /* 5. Estilo del buscador (mantenemos anti-rebote) */
    .header__search-box .searchbox {
        flex: 1 !important;
        font-size: 16px !important;
        padding-left: 20px !important;
        border: none !important;
        background: transparent !important;
    }

    .header__search-box button[type="submit"] {
        background: transparent !important;
        color: #FF7800 !important;
        width: 50px !important;
        font-size: 18px !important;
    }
}
/* ==========================================================
   VERSION AGRESIVA DE ESPACIADO - DOÑA GANGAS
   ========================================================== */

@media (max-width: 991px) {
    /* 1. Forzamos al contenedor del logo a tener espacio extra real */
    .header__middle {
        height: auto !important;
        min-height: 230px !important; 
        padding-bottom: 80px !important; /* Creamos el hueco a la fuerza */
        display: block !important;
    }

    /* 2. Bajamos el buscador al fondo de ese nuevo espacio */
    .header__search-box {
        position: absolute !important;
        bottom: 15px !important; 
        left: 5% !important;
        width: 90% !important;
        display: flex !important;
        height: 48px !important;
        background: #ffffff !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        z-index: 999 !important;
    }

    /* 3. El LOGO: Lo empujamos hacia arriba para que la abuela no baje */
    .header__logo {
        position: relative !important;
        top: 0 !important;
        margin-top: 10px !important;
        z-index: 1 !important;
    }

    /* 4. Los ICONOS: Los anclamos arriba a la derecha */
    .header__icons {
        position: absolute !important;
        top: 25px !important; 
        right: 15px !important;
        display: flex !important;
        gap: 12px !important;
        z-index: 10 !important;
    }

    /* 5. Estabilización del input */
    .header__search-box .searchbox {
        flex: 1 !important;
        font-size: 16px !important;
        padding-left: 20px !important;
        border: none !important;
        background: transparent !important;
        outline: none !important;
    }

    .header__search-box button[type="submit"] {
        background: transparent !important;
        color: #FF7800 !important;
        width: 50px !important;
        border: none !important;
    }
}

/* --- ACTUALIZADO EL 09 DE ABRIL DE 2026 --- */
/* ==========================================================
   BUSCADOR ULTRA-MODERNO "DOÑA GANGAS" (ESTILO PREMIUM)
   ========================================================== */

@media (max-width: 991px) {
    /* 1. Mantenemos el área naranja amplia para que luzca el logo */
    .header__middle {
        height: auto !important;
        min-height: 235px !important; 
        padding-bottom: 85px !important;
        display: block !important;
        background-color: #FF7800 !important;
    }

    /* 2. El Buscador: Efecto cápsula con sombra de profundidad */
    .header__search-box {
        position: absolute !important;
        bottom: 18px !important; 
        left: 5% !important;
        width: 90% !important;
        display: flex !important;
        height: 52px !important; /* Un poco más alto para elegancia */
        background: rgba(255, 255, 255, 0.98) !important; /* Blanco casi puro */
        border-radius: 50px !important; /* Forma de cápsula total */
        border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Borde imperceptible */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; /* Sombra moderna */
        z-index: 999 !important;
        overflow: hidden !important;
    }

    /* 3. El campo de texto: Tipografía limpia */
    .header__search-box .searchbox {
        flex: 1 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        padding-left: 25px !important;
        border: none !important;
        background: transparent !important;
        color: #222 !important;
        outline: none !important;
    }

    /* 4. El Botón de Lupa: Estilo flotante a la derecha */
    .header__search-box button[type="submit"] {
        background-color: #FF7800 !important; /* Naranja corporativo en el botón */
        color: #ffffff !important;
        width: 46px !important;
        height: 38px !important;
        margin: 7px 7px 7px 0 !important; /* Botón contenido dentro de la cápsula */
        border-radius: 50% !important; /* Lupa circular */
        border: none !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(255, 120, 0, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    /* 5. Asegurar posición de Logo e Iconos */
    .header__logo {
        margin-top: 15px !important;
    }

    .header__icons {
        position: absolute !important;
        top: 30px !important; 
        right: 18px !important;
        display: flex !important;
        gap: 15px !important;
    }
}
/* ==========================================================
   ICONOS DE CABECERA CON CÍRCULO ELEGANTE - DOÑA GANGAS
   ========================================================== */

/* 1. Estilo para los círculos de los iconos */
.header__icons .icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;    /* Tamaño del círculo */
    height: 40px !important;   /* Tamaño del círculo */
    background-color: #222222 !important; /* Negro elegante */
    border-radius: 50% !important;        /* Lo hace circular */
    transition: all 0.3s ease !important;
    position: relative !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* Sombra para dar relieve */
}

/* 2. Ajuste de las imágenes (iconos SVG) dentro del círculo */
.header__icons .icon a img {
    width: 18px !important;  /* Tamaño del icono dentro del círculo */
    height: 18px !important;
    filter: brightness(0) invert(1) !important; /* Fuerza los iconos a ser blancos */
}

/* 3. Efecto al pasar el mouse (Hover) */
.header__icons .icon a:hover {
    background-color: #000000 !important;
    transform: translateY(-3px) !important; /* Pequeño salto hacia arriba */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

/* 4. Ajuste del contador (el numerito rojo de la cesta/deseos) */
.header__icons .icon span.count, 
#mini-cart-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #ff0000 !important; /* Rojo vibrante para avisos */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #222 !important; /* Borde negro para que resalte */
}

/* 5. Separación entre los botones circulares */
.header__icons {
    gap: 12px !important; /* Espacio entre cada círculo */
}
/* REDUCCIÓN AGRESIVA DEL LOGO */
    .header__logo img, 
    .header__logo a img, 
    #header-area .header__logo img {
        width: 110px !important;  /* Forzamos un ancho pequeño */
        max-width: 110px !important;
        height: auto !important;
        min-width: auto !important; /* Matamos cualquier mínimo del tema */
        display: inline-block !important;
    }

    /* Ajuste para que el contenedor no ocupe toda la pantalla */
    .header__logo {
        text-align: left !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
/* ==========================================================
   OCULTAR BLOQUE DE EMAIL EN MÓVIL - DOÑA GANGAS
   ========================================================== */

@media (max-width: 991px) {
    /* Ocultamos el contenedor completo por su clase específica */
    div.dg-topbar-email {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
/* --- ACTUALIZADO EL 10 DE ABRIL DE 2026 --- */
/* ==========================================================
   ALINEACIÓN TOTAL V5.0 - MULTI-MENÚ - DOÑA GANGAS
   ========================================================== */

/* 1. LA BARRA BASE: Estabilidad total */
.header__cat.ul_li {
    display: flex !important;
    align-items: center !important; 
    height: 50px !important;
    margin-top: -12px !important; /* Mantenemos la subida que te gustó */
}

/* 2. ICONO HAMBURGUESA: Centrado milimétrico */
.hamburger_menu {
    display: flex !important;
    align-items: center !important;
    margin-right: 15px !important;
}

/* 3. LOS BOTONES (Inicio, Gangas, Novedades) */
/* Aplicamos la misma regla a todos los IDs nuevos para que queden nivelados */
#menu-item-5186, #menu-item-5203, #menu-item-5204 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#menu-item-5186 > a, #menu-item-5203 > a, #menu-item-5204 > a {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 13px !important; /* Un poco más pequeño para que quepa todo pro */
    padding: 0 26px !important;
    display: flex !important;
    align-items: center !important;
    height: 0px !important; /* Forzamos que midan lo mismo que la barra */
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Efecto Elegante al pasar el mouse por los textos */
#menu-item-5186 > a:hover, #menu-item-5203 > a:hover, #menu-item-5204 > a:hover {
    color: #FF7800 !important;
    transform: translateY(-2px) !important; /* Salto pro hacia arriba */
}

/* 4. BOTÓN NARANJA (MÁS CATEGORÍAS) */
#menu-item-3533 > a {
    background: linear-gradient(135deg, #FF7800 0%, #E65C00 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    height: 40px !important; /* Altura del cuadro naranja */
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0px !important;
    margin-right: 10px !important;
    box-shadow: 0 4px 20px rgba(255, 120, 0, 0.3) !important;
}

/* 5. SEPARADORES (Las líneas blancas entre botones si las tienes) */
/* Si tu tema pone líneas entre botones, las centramos también */
.header__cat ul.category > li {
    display: flex !important;
    align-items: center !important;
}

/* 6. SUBMENÚS (Se mantienen perfectos) */
#menu-item-3533 ul.sub-menu li > ul.sub-menu {
    position: absolute !important;
    top: -5px !important;
    left: 100% !important;
    background: #1a1a1a !important;
    border-left: 4px solid #FF7800 !important;
    box-shadow: 12px 12px 35px rgba(0,0,0,0.6) !important;
}

/* 7. BLOQUEO DE BARRA NEGRA */
.header__cat-wrap {
    height: 90px !important;
    max-height: 65px !important;
    overflow: visible !important;
}
/* ==========================================================
   ICONOS NARANJAS ELEGANTES (SISTEMA UNIVERSAL V2) - DOÑA GANGAS
   ========================================================== */

/* 1. Configuración Base para los Iconos */
#menu-item-5186 > a::before, 
#menu-item-5203 > a::before, 
#menu-item-5204 > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
    transition: all 0.3s ease !important;
}

/* 2. ESTADO NORMAL: Iconos en NARANJA ELEGANTE (#FF7800) */

/* Icono INICIO (Casita Minimalista Naranja) */
#menu-item-5186 > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' /%3E%3C/svg%3E") !important;
}

/* Icono GANGA DE LA SEMANA (Ticket de Descuento Naranja) */
#menu-item-5203 > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z' /%3E%3C/svg%3E") !important;
}

/* Icono NOVEDADES (Destello / Nuevo Naranja) */
#menu-item-5204 > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 3l4 4L7 11l4 4-4 4 4 4-4 4 4 4M17 3l4 4-4 4 4 4-4 4 4 4' /%3E%3C/svg%3E") !important;
}

/* 3. ESTADO HOVER: Iconos cambian a BLANCO al pasar el mouse */

#menu-item-5186:hover > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' /%3E%3C/svg%3E") !important;
}

#menu-item-5203:hover > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z' /%3E%3C/svg%3E") !important;
}

#menu-item-5204:hover > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 3l4 4L7 11l4 4-4 4 4 4-4 4 4 4M17 3l4 4-4 4 4 4-4 4 4 4' /%3E%3C/svg%3E") !important;
}
/* Diseño de botones inicio 10/04/2026*/
/* ==========================================================
   PORTAL DOÑA GANGAS V12.0 - REINICIO TOTAL PRO
   ========================================================== */

/* Contenedor Principal Dark */
.dg-portal-master {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 15px !important;
    padding: 40px 20px !important;
    background-color: #000000 !important;
    border-radius: 30px !important;
    max-width: 1100px !important;
    margin: 40px auto !important;
}

@media (min-width: 768px) {
    .dg-portal-master { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (min-width: 1024px) {
    .dg-portal-master { grid-template-columns: repeat(6, 1fr) !important; }
}

/* El Botón Individual */
.dg-portal-item {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.4s ease !important;
}

/* El Círculo Naranja */
.dg-icon-box {
    width: 85px !important;
    height: 85px !important;
    background: #111 !important;
    border: 2px solid #FF7800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    box-shadow: 0 0 15px rgba(255, 120, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Iconos Vectoriales (Trazo Fino) */
.dg-svg {
    width: 38px !important;
    height: 38px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Definición de Iconos en Naranja */
.icon-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' /%3E%3C/svg%3E"); }
.icon-tech { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E"); }
.icon-kitchen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253' /%3E%3C/svg%3E"); }
.icon-tools { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 011-1h1a2 2 0 100-4H7a1 1 0 01-1-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' /%3E%3C/svg%3E"); }
.icon-light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.663 17h4.674M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' /%3E%3C/svg%3E"); }
.icon-sport { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E"); }

/* Texto de Categoría */
.dg-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-align: center !important;
}

/* Efecto HOVER */
.dg-portal-item:hover .dg-icon-box {
    background: #FF7800 !important;
    box-shadow: 0 0 30px rgba(255, 120, 0, 0.6) !important;
    transform: translateY(-8px) scale(1.05) !important;
}

.dg-portal-item:hover .dg-svg {
    filter: brightness(0) !important; /* El icono se vuelve negro sobre el naranja */
}

/* Tamaño logo version movil*/
/* ==========================================================
   RESCATE DE LOGO MÓVIL XL - DOÑA GANGAS
   ========================================================== */

@media (max-width: 991px) {
    /* 1. Forzamos el tamaño del logo */
    .header__logo img, 
    .header__logo a img,
    #header-area .header__logo img {
        width: 175px !important;    /* Tamaño potente para el nuevo logo */
        max-width: 190px !important;
        height: auto !important;
        min-width: 175px !important;
        display: inline-block !important;
        margin-top: -5px !important; 
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.15)) !important;
    }

    /* 2. Re-alineamos los iconos para que no se amontonen */
    .header__icons {
        position: absolute !important;
        top: 30px !important; 
        right: 15px !important;
        display: flex !important;
        gap: 10px !important;
        z-index: 99 !important;
    }

    /* 3. Aseguramos que el fondo naranja sea lo bastante alto */
    .header__middle {
        min-height: 240px !important;
        padding-top: 15px !important;
    }

    /* 4. El contenedor del logo para que no se corte */
    .header__logo {
        text-align: left !important;
        width: auto !important;
        padding-left: 10px !important;
    }
}
/*Agregando iconos a los botones que faltan*/
/* ==========================================================
   PORTAL DARK ELITE V13.0 - 11 CATEGORÍAS - DOÑA GANGAS
   ========================================================== */

/* Contenedor Dark */
.dg-portal-master {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 15px !important;
    padding: 40px 15px !important;
    background-color: #000000 !important;
    border-radius: 30px !important;
    margin: 20px auto !important;
    max-width: 1100px !important;
}

@media (min-width: 992px) {
    .dg-portal-master { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Estilo de los Botones */
.dg-portal-item {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.dg-icon-box {
    width: 85px !important;
    height: 85px !important;
    background: #111 !important;
    border: 2px solid #FF7800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    box-shadow: 0 0 15px rgba(255, 120, 0, 0.2) !important;
}

/* REGLA MAESTRA PARA QUE SE VEAN LOS ICONOS */
.dg-svg {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* DEFINICIÓN DE LOS 11 ICONOS (STROKE NARANJA) */
.icon-tech { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z' /%3E%3C/svg%3E") !important; }
.icon-tools { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 011-1h1a2 2 0 100-4H7a1 1 0 01-1-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' /%3E%3C/svg%3E") !important; }
.icon-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' /%3E%3C/svg%3E") !important; }
.icon-sport { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M8 21h8m-4-4v4M7 4h10M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' /%3E%3C/svg%3E") !important; }
.icon-light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M9.663 17h4.674M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' /%3E%3C/svg%3E") !important; }
.icon-textil { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M12 4L4 8v8l8 4 8-4V8l-8-4z' /%3E%3Cpath d='M12 4v16m8-12l-8 4-8-4' /%3E%3C/svg%3E") !important; }
.icon-personal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z' /%3E%3C/svg%3E") !important; }
.icon-kitchen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253' /%3E%3C/svg%3E") !important; }
.icon-toys { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E") !important; }
.icon-gamer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M6 12L3.269 3.125A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.875L6 12zm0 0h7.5' /%3E%3C/svg%3E") !important; }
.icon-accs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF7800' stroke-width='1.8'%3E%3Cpath d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z' /%3E%3C/svg%3E") !important; }

/* Etiquetas de texto */
.dg-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Efecto al pasar el ratón */
.dg-portal-item:hover .dg-icon-box {
    background: #FF7800 !important;
    box-shadow: 0 0 30px rgba(255, 120, 0, 0.6) !important;
    transform: translateY(-8px) !important;
}

.dg-portal-item:hover .dg-svg {
    filter: brightness(0) !important; /* El icono se vuelve negro sobre el naranja */
}
/*Mejorando la pagina del carrito 10-04-2026*/
/* ==========================================================
   CARRITO ELITE MINIMALISTA - DOÑA GANGAS
   ========================================================== */

/* 1. FONDO Y CONTENEDOR GENERAL */
.wc-block-cart {
    background-color: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 20px !important;
}

/* 2. TARJETAS DE PRODUCTO (Limpieza Total) */
.wc-block-cart-items__row {
    background: #ffffff !important;
    border-radius: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border: none !important;
    padding: 15px !important;
}

.wc-block-cart-items__header {
    border-bottom: 2px solid #eee !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    color: #888 !important;
}

/* 3. IMAGEN DEL PRODUCTO */
.wc-block-cart-item__image img {
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
}

/* 4. TÍTULOS Y PRECIOS */
.wc-block-components-product-name {
    font-weight: 700 !important;
    color: #222 !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

.wc-block-components-product-price__value {
    color: #FF7800 !important; /* Naranja corporativo */
    font-weight: 800 !important;
    font-size: 18px !important;
}

/* Etiqueta de "Ahorra" más elegante */
.wc-block-components-sale-badge {
    background-color: #e6f9ed !important;
    color: #1ea672 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border: none !important;
}

/* 5. SELECTOR DE CANTIDAD PRO */
.wc-block-components-quantity-selector {
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    background: #fdfdfd !important;
}

.wc-block-components-quantity-selector__button {
    background: transparent !important;
    color: #FF7800 !important;
    font-weight: bold !important;
}

/* 6. BARRA LATERAL (TOTALES) */
.wc-block-cart__sidebar {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border: 1px solid #eee !important;
}

.wc-block-cart__totals-title {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #FF7800 !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

/* Total Final */
.wc-block-components-totals-footer-item-tax-value {
    font-size: 24px !important;
    color: #222 !important;
    font-weight: 900 !important;
}

/* 7. BOTÓN FINALIZAR COMPRA (Gama Alta) */
.wc-block-cart__submit-button {
    background: linear-gradient(135deg, #FF7800 0%, #E65C00 100%) !important;
    border-radius: 50px !important;
    padding: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.wc-block-cart__submit-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 25px rgba(255, 120, 0, 0.4) !important;
}

/* 8. ELIMINAR ARTÍCULO (Botón sutil) */
.wc-block-cart-item__remove-link {
    color: #ff4d4d !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
}
/* ==========================================================
   AJUSTE DE TEXTO BOTÓN FINALIZAR COMPRA
   ========================================================== */

/* 1. Texto en Negro por defecto */
.wc-block-cart__submit-button .wc-block-components-button__text {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* 2. Mantener Negro en el Hover (o ajustarlo si prefieres) */
.wc-block-cart__submit-button:hover .wc-block-components-button__text {
    color: #000000 !important;
}

/* Ajuste adicional para asegurar que el botón no tenga bordes extraños */
.wc-block-cart__submit-button {
    border: none !important;
}
/* ==========================================================
   OCULTAR EMAIL TOPBAR EN CHECKOUT (FORZADO)
   ========================================================== */

/* Opción A: Usando la clase general de página de checkout de WooCommerce */
.woocommerce-checkout .dg-topbar-email,
.woocommerce-checkout .dg-force-topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Opción B: Por el ID específico de tu página (ID 18 en la mayoría de instalaciones) */
.page-id-18 .dg-topbar-email {
    display: none !important;
}
/* ==========================================================
   ELIMINAR HUECOS EN LA TIENDA - DISEÑO COMPACTO
   ========================================================== */

/* 1. Forzar que los productos se alineen sin saltos raros */
ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important; /* Ajuste lateral */
}

ul.products li.product {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 20px 0 !important; /* Espacio solo abajo */
    padding: 10px !important;
    width: 50% !important; /* 2 columnas en móvil */
}

@media (min-width: 768px) {
    ul.products li.product {
        width: 33.33% !important; /* 3 columnas en tablet */
    }
}

@media (min-width: 1200px) {
    ul.products li.product {
        width: 25% !important; /* 4 columnas en PC */
    }
}

/* 2. Igualar las cajas para que no queden espacios blancos */
ul.products li.product .product-inner, 
ul.products li.product .archive-product-inner {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    border: 1px solid #eee !important; /* Opcional: un borde suave para delimitar */
    padding: 15px !important;
    background: #fff !important;
}

/* 3. Limpiar cualquier "clear" que esté rompiendo las filas */
ul.products li.product::before,
ul.products li.product::after {
    content: none !important;
    display: none !important;
}
/* ==========================================================
   LOGO MINIMALISTA REFINADO - VERSIÓN ORDENADOR cambiando tamaño del logo para la vista ordenador
   ========================================================== */

@media (min-width: 992px) {
    .header__logo img, 
    .header__logo a img {
        width: 160px !important;    /* Tamaño elegante y discreto */
        max-width: 180px !important; 
        height: auto !important;
        display: block !important;
        margin: 0 !important;       /* Eliminamos espacios extra */
        transition: opacity 0.3s ease !important;
    }

    /* Alineación perfecta con el menú */
    .header__logo {
        display: flex !important;
        align-items: center !important;
        padding: 5px 0 !important;
    }
}
/*Posicionando el boton de comprar abajo de los precios paea despues*/
/* ==========================================================
   VIDEO DE FONDO EN EL HEADER MIDDLE - DOÑA GANGAS
   ========================================================== */

/* 1. Preparamos el contenedor del medio */
.header__middle {
    position: relative !important;
    overflow: hidden !important; /* Para que el video no se salga de los bordes */
    background: transparent !important; /* Hacemos transparente el fondo actual */
    padding: 20px 0; /* Ajusta el grosor de la franja si lo necesitas */
}

/* 2. Creamos el espacio para el video usando JavaScript para insertarlo 
      (Ya que CSS puro no puede reproducir archivos .mp4 por sí solo) */
/* ==========================================================
   CONTROL DE VIDEO VS COLOR NARANJA - DOÑA GANGAS
   ========================================================== */

/* 1. COMPORTAMIENTO PARA ORDENADORES (PC) */
@media (min-width: 992px) {
    /* Escondemos el contenedor del video */
    
    /* Forzamos a que el fondo sea el naranja original del tema */
    /* He usado el naranja vibrante que suele llevar tu marca */
    .header__middle {
        background-color: #FF7800 !important; 
        background-image: none !important; /* Quitamos cualquier rastro del video */
    }
}

/* 2. COMPORTAMIENTO PARA MÓVILES (Smartphone) */
@media (max-width: 991px) {
    /* Mostramos el video */
    .video-container-header {
        display: block !important;
    }
    
    /* Hacemos el fondo transparente para que el video sea el protagonista */
    .header__middle {
        background: transparent !important;
    }
}
/*Alineando Pie de pagina*/
/* FORZAR UNA SOLA LÍNEA EN ORDENADOR - DOÑA GANGAS */
@media (min-width: 992px) {
    ul.horizontal-links.clearfix {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prohibido saltar de línea */
        white-space: nowrap !important; /* El texto no se corta */
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    ul.horizontal-links.clearfix li {
        display: inline-flex !important;
        align-items: center !important;
        float: none !important; /* Quitamos el clearfix antiguo */
    }
}

/* Mantenemos la flexibilidad en móviles para que no se salga de la pantalla */
@media (max-width: 991px) {
    ul.horizontal-links.clearfix {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}
/*quitando el icono de tildar blanco al comprar*/
/* ELIMINAR EL CHECK BLANCO DE CONFIRMACIÓN - DOÑA GANGAS */
.single_add_to_cart_button.added::before, 
.single_add_to_cart_button.added::after {
    display: none !important;
    content: "" !important;
}

/* Por si el tema lo inyecta como un icono de fuente */
.single_add_to_cart_button.added .btn-wrap::before,
.single_add_to_cart_button.added .btn-wrap::after {
    display: none !important;
    content: "" !important;
}

/* Si el icono aparece por una clase específica del tema Radios */
.single_add_to_cart_button.added {
    text-indent: 0 !important;
}
/* --- ESTILO UNIFICADO DOÑA GANGAS CONTACT --- */
.dg-contact-wrapper {
    padding: 60px 0;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

.mt-none-30 { margin-top: -30px; }
.mt-30 { margin-top: 30px; }

/* 1. Tarjetas de Información (Tu estilo original mejorado) */
.contact-info__item {
    background: #f5f5f7; 
    padding: 25px 20px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
}

.contact-info__item .icon {
    min-width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.4s;
}

.contact-info__item .content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #1d1d1f;
}

.contact-info__item .content a, 
.contact-info__item .content p {
    font-size: 13px;
    color: #515154;
    text-decoration: none;
    margin: 0;
    display: block;
    line-height: 1.4;
}

/* Efecto Hover Premium */
.contact-info__item:hover {
    background: linear-gradient(135deg, #ff8a00 0%, #e67e00 100%);
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(255, 138, 0, 0.3);
    border-color: transparent;
}

.contact-info__item:hover .content h3,
.contact-info__item:hover .content a,
.contact-info__item:hover .content p {
    color: #ffffff !important;
}

/* 2. Estilo para el Formulario (Si usas Contact Form 7 o similar) */
.wpcf7-form, .contact-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    margin-top: 50px;
}

.wpcf7-form input, .wpcf7-form textarea, 
.contact-form input, .contact-form textarea {
    border: 1px solid #e5e5e7 !important;
    background: #fbfbfd !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin-bottom: 20px !important;
    width: 100%;
    transition: 0.3s;
}

.wpcf7-form input:focus, .contact-form input:focus {
    border-color: #ff8a00 !important;
    background: #ffffff !important;
}

/* 3. Botón de enviar que combine con tus tarjetas */
.wpcf7-submit, .contact-form button[type="submit"] {
    background: #ff8a00 !important;
    color: white !important;
    border: none !important;
    padding: 15px 40px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: 0.3s !important;
}

.wpcf7-submit:hover {
    background: #e67e00 !important;
    transform: scale(1.02);
}
/* --- ESTILO DOÑA GANGAS CONTACT (RECUADROS) --- */
.dg-contact-wrapper {
    padding: 60px 0;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

.mt-none-30 { margin-top: -30px; }
.mt-30 { margin-top: 30px; }

.contact-info__item {
    background: #f5f5f7; /* Gris Mac Silver */
    padding: 25px 20px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
}

.contact-info__item .icon {
    min-width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.4s;
}

.contact-info__item .content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #1d1d1f;
}

.contact-info__item .content a, 
.contact-info__item .content p {
    font-size: 13px;
    color: #515154;
    text-decoration: none;
    margin: 0;
    display: block;
    line-height: 1.4;
}

/* --- EFECTO HOVER PREMIUM (NARANJA) --- */
.contact-info__item:hover {
    background: linear-gradient(135deg, #ff8a00 0%, #e67e00 100%);
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(255, 138, 0, 0.3);
    border-color: transparent;
}

.contact-info__item:hover .content h3,
.contact-info__item:hover .content a,
.contact-info__item:hover .content p {
    color: #ffffff !important;
}

.contact-info__item:hover .icon {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1) rotate(-5deg);
}

.contact-info__item.active {
    border: 2px solid #ff8a00;
}
/* --- AJUSTE TAMAÑO CARRUSEL Y PUNTOS NARANJAS --- */

/* 1. Reducir el tamaño general del carrusel y centrarlo */
.swiper-container, .swiper { 
    max-width: 80% !important; /* Ajusta este % para hacerlo más o menos pequeño */
    margin: 0 auto !important;
    padding-bottom: 50px !important; /* Espacio para los puntos abajo */
}

/* 2. Color Naranja para los puntos de paginación (Bullets) */
.swiper-pagination-bullet {
    background: #ccc !important; /* Color de los puntos inactivos */
    opacity: 1 !important;
    width: 10px !important;
    height: 10px !important;
    transition: all 0.3s ease !important;
}

/* Punto activo en Naranja Doña Gangas */
.swiper-pagination-bullet-active {
    background: #FF7800 !important; 
    width: 25px !important; /* Lo hace un poco alargado, estilo moderno */
    border-radius: 5px !important;
}

/* 3. Reducir las imágenes dentro de los slides */
.swiper-slide figure.image img {
    max-width: 70% !important; /* Achica la imagen dentro de su espacio */
    margin: 0 auto !important;
    display: block !important;
}

/* Opcional: Centrar verticalmente si las imágenes tienen distintos tamaños */
.swiper-wrapper {
    align-items: center !important;
}
/* ARREGLO PARA LABELS EN CHECKOUT - DOÑA GANGAS */

/* Forzamos que la etiqueta se mueva arriba cuando el campo está activo o lleno */
.wc-block-components-text-input {
    position: relative !important;
}

.wc-block-components-text-input label {
    transition: all 0.2s ease !important;
    pointer-events: none !important; /* Para que puedas hacer clic a través de la letra */
}

/* Estado: Cuando el usuario hace clic o hay texto */
.wc-block-components-text-input input:focus ~ label,
.wc-block-components-text-input input:not(:placeholder-shown) ~ label,
.wc-block-components-text-input input:-webkit-autofill ~ label {
    transform: translateY(-130%) scale(0.85) !important;
    color: #FF7800 !important; /* Color naranja Doña Gangas para el título del campo */
    background: white !important; /* Evita que las líneas del campo tachen la letra */
    padding: 0 5px !important;
}

/* Ajuste específico para el input para que el texto no choque con la etiqueta */
.wc-block-components-text-input input {
    padding-top: 15px !important;
}
/* --- ESTILO DARK & ORANGE: VERSIÓN DEFINITIVA --- */

.dg-premium-contact {
    max-width: 850px;
    margin: 60px auto;
    background: #1a1a1c !important; /* Fondo Grafito Mate */
    padding: 60px !important;
    border-radius: 40px !important;
    position: relative;
    z-index: 1;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 120, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

/* Cabecera ajustada al Naranja Doña Gangas */
.contact-header h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #FF7800 !important; /* Título en Naranja */
    letter-spacing: -1.5px !important;
    margin-bottom: 10px !important;
}

.contact-header p {
    font-size: 18px !important;
    color: #FF7800 !important; /* Párrafo en Naranja */
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Cuadrícula de campos (Escritorio) */
.dg-input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.dg-field {
    position: relative;
    margin-bottom: 35px;
}

.dg-field input, 
.dg-field textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px 20px 10px 20px !important;
    font-size: 17px !important;
    color: #ffffff !important;
    transition: all 0.4s ease !important;
    outline: none !important;
}

.dg-field textarea {
    height: 120px !important;
}

/* Etiquetas (Labels) */
.dg-field label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Animación de etiquetas */
.dg-field input:focus ~ label,
.dg-field input:not(:placeholder-shown) ~ label,
.dg-field textarea:focus ~ label,
.dg-field textarea:not(:placeholder-shown) ~ label {
    top: 15px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FF7800;
}

.dg-field input:focus, 
.dg-field textarea:focus {
    background: rgba(255, 120, 0, 0.05) !important;
    border-color: #FF7800 !important;
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.1) !important;
}

/* Botón de envío */
.dg-btn-submit {
    background: #FF7800 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 22px 50px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    width: 100%;
    margin-top: 20px;
}

.dg-btn-submit:hover {
    background: #e66b00 !important;
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 40px rgba(255, 120, 0, 0.4) !important;
}

/* --- OPTIMIZACIÓN PARA MÓVIL --- */
@media (max-width: 768px) {
    .dg-premium-contact {
        padding: 40px 20px !important; /* Menos padding lateral en móvil */
        margin: 20px 10px !important;  /* Casi pega a los bordes de la pantalla */
        border-radius: 25px !important; /* Esquinas un poco menos pronunciadas */
    }

    .contact-header h2 {
        font-size: 28px !important; /* Texto más pequeño para que no rompa */
        line-height: 1.2;
    }

    .contact-header p {
        font-size: 15px !important;
        margin-bottom: 30px;
    }

    .dg-input-group {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 0; /* Eliminamos el gap para manejarlo con el margen del dg-field */
    }

    .dg-field {
        margin-bottom: 25px !important; /* Espacio uniforme entre campos */
    }

    .dg-btn-submit {
        padding: 18px 20px !important; /* Botón más manejable */
        font-size: 14px !important;
        letter-spacing: 1.5px;
    }
}
/* ESTILOS QUIÉNES SOMOS - DOÑA GANGAS */
.dg-about-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 30px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
}

.dg-about-header {
    text-align: center;
    margin-bottom: 40px;
}

.dg-subtitle {
    color: #FF7800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.dg-about-header h2 {
    font-size: clamp(32px, 5vw, 48px) !important;
    color: #ffffff !important;
    margin: 0;
    font-weight: 800;
}

.dg-about-card.main-text {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 30px;
    border: 1px dashed rgba(255, 120, 0, 0.3);
    margin-bottom: 40px;
    text-align: center;
}

.dg-highlight-text {
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.4;
    color: #FF7800;
    margin-bottom: 15px;
    font-weight: 600;
}

.dg-about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.dg-about-item {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.dg-about-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 120, 0, 0.07);
    border-color: #FF7800;
}

.dg-featured-item {
    border: 1px solid #FF7800 !important;
    box-shadow: 0 15px 30px rgba(255, 120, 0, 0.1);
}

.dg-icon {
    font-size: 30px;
    margin-bottom: 15px;
    display: block;
}

.dg-about-item h3 {
    color: #FF7800 !important;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
}

.dg-about-footer {
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    line-height: 1.6;
}

/* AJUSTE MÓVIL RÁPIDO */
@media (max-width: 768px) {
    .dg-about-container {
        padding: 30px 20px;
        margin: 20px 15px;
    }
}
/* ESTILOS MÉTODOS DE PAGO - DOÑA GANGAS */
.dg-payment-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 30px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-payment-header {
    text-align: center;
    margin-bottom: 40px;
}

.dg-payment-header h2 {
    font-size: clamp(32px, 5vw, 42px) !important;
    color: #FF7800 !important; /* Título en Naranja */
    font-weight: 800;
    letter-spacing: -1px;
}

.dg-payment-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.dg-payment-info {
    flex: 1;
    min-width: 300px;
}

.dg-payment-info p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #e0e0e0;
}

.dg-payment-badge-box {
    flex: 0 1 350px;
    background: rgba(255, 120, 0, 0.05);
    padding: 30px;
    border-radius: 30px;
    border: 1px solid rgba(255, 120, 0, 0.2);
    text-align: center;
}

.dg-bank-logo {
    font-weight: 700;
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 10px;
    display: block;
}

.dg-bank-logo span {
    color: #00acee; /* El azul característico de La Caixa para dar realismo */
}

.dg-security-icons {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 24px;
}

.dg-payment-footer-note {
    background: rgba(0, 255, 0, 0.05);
    border-left: 4px solid #00ff00;
    padding: 15px 20px;
    margin-top: 30px;
    font-size: 15px;
    border-radius: 0 10px 10px 0;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-payment-container {
        padding: 40px 20px;
    }
}
/* ESTILOS MÉTODOS DE ENVÍO - DOÑA GANGAS */
.dg-shipping-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 30px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-shipping-header {
    text-align: center;
    margin-bottom: 40px;
}

.dg-shipping-header h2 {
    font-size: clamp(32px, 5vw, 42px) !important;
    color: #FF7800 !important;
    font-weight: 800;
}

.dg-shipping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.dg-shipping-main-info p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #e0e0e0;
}

/* Caja Destacada de Envío Gratis */
.dg-free-shipping-card {
    background: linear-gradient(135deg, #FF7800 0%, #e66b00 100%);
    padding: 30px;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 15px 35px rgba(255, 120, 0, 0.2);
}

.dg-free-shipping-card h3 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 800;
    color: #ffffff !important;
}

/* Tiempos de Entrega */
.dg-delivery-times {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 20px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dg-time-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-time-row:last-child { border: none; }

.dg-destination { font-weight: 700; color: #FF7800; }

.dg-shipping-warning {
    background: rgba(255, 50, 50, 0.1);
    color: #ff9999;
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-shipping-container { padding: 40px 20px; }
}
/* ESTILOS POLÍTICA DE DEVOLUCIONES - DOÑA GANGAS */
.dg-returns-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 30px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-returns-header {
    text-align: center;
    margin-bottom: 50px;
}

.dg-returns-header h2 {
    font-size: clamp(30px, 5vw, 42px) !important;
    color: #FF7800 !important;
    font-weight: 800;
}

.dg-returns-intro {
    text-align: center;
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dg-returns-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.dg-return-step {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.dg-step-num {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #FF7800;
    color: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(255, 120, 0, 0.3);
}

.dg-return-step h3 {
    color: #ffffff !important;
    font-size: 19px;
    margin-bottom: 15px;
    padding-left: 20px;
}

.dg-return-step p, .dg-return-step li {
    font-size: 15px;
    line-height: 1.6;
    color: #bbbbbb;
}

.dg-contact-highlight {
    background: rgba(255, 120, 0, 0.05);
    border: 1px dashed #FF7800;
    padding: 30px;
    border-radius: 30px;
    margin-top: 50px;
    text-align: center;
}

.dg-email-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 20px;
    color: #FF7800 !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.dg-email-link:hover {
    border-bottom-color: #FF7800;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-returns-list { grid-template-columns: 1fr; }
    .dg-returns-container { padding: 40px 20px; }
}
/* ESTILOS POLÍTICA DE PRIVACIDAD - DOÑA GANGAS */
.dg-policy-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 40px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1100px;
    margin: 40px auto;
    line-height: 1.7;
}

.dg-policy-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 120, 0, 0.3);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.dg-policy-header h1 {
    font-size: clamp(28px, 4vw, 38px) !important;
    color: #FF7800 !important;
    font-weight: 800;
    text-transform: uppercase;
}

.dg-policy-section {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-policy-section h2 {
    color: #FF7800 !important;
    font-size: 22px;
    margin-bottom: 20px;
    border-left: 4px solid #FF7800;
    padding-left: 15px;
}

.dg-policy-section h3 {
    color: #ffffff !important;
    font-size: 18px;
    margin: 20px 0 10px 0;
}

.dg-policy-section p, .dg-policy-section li {
    font-size: 15px;
    color: #cccccc;
    margin-bottom: 15px;
}

.dg-legal-box {
    background: rgba(255, 120, 0, 0.05);
    border: 1px solid rgba(255, 120, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
}

.dg-rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.dg-right-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
}

.dg-right-item strong {
    color: #FF7800;
    display: block;
    margin-bottom: 5px;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-policy-container { padding: 30px 20px; }
    .dg-rights-grid { grid-template-columns: 1fr; }
}
/* ESTILOS POLÍTICA DE COOKIES - DOÑA GANGAS */
.dg-cookies-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 40px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    line-height: 1.7;
}

.dg-cookies-header {
    text-align: center;
    margin-bottom: 50px;
}

.dg-cookies-header h1 {
    font-size: clamp(28px, 4vw, 38px) !important;
    color: #FF7800 !important;
    font-weight: 800;
}

.dg-cookies-section {
    margin-bottom: 40px;
}

.dg-cookies-section h2 {
    color: #FF7800 !important;
    font-size: 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-cookies-info-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.dg-social-link {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none;
    color: #cccccc !important;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.dg-social-link:hover {
    background: rgba(255, 120, 0, 0.1);
    color: #FF7800 !important;
    border-color: #FF7800;
}

.dg-disable-box {
    background: rgba(255, 50, 50, 0.05);
    border: 1px dashed rgba(255, 50, 50, 0.3);
    padding: 25px;
    border-radius: 20px;
    margin-top: 30px;
}

.dg-disable-box h3 {
    color: #ff9999 !important;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-cookies-container { padding: 30px 20px; }
}
/* ESTILOS CONDICIONES GENERALES DE VENTA - DOÑA GANGAS */
.dg-terms-container {
    background: #1a1a1c !important;
    color: #ffffff !important;
    padding: 60px 40px;
    border-radius: 40px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    max-width: 1100px;
    margin: 40px auto;
    line-height: 1.8;
}

.dg-terms-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 120, 0, 0.3);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.dg-terms-header h1 {
    font-size: clamp(26px, 4vw, 36px) !important;
    color: #FF7800 !important;
    font-weight: 800;
}

/* Índice de navegación rápida */
.dg-terms-index {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 50px;
    border: 1px solid rgba(255, 120, 0, 0.1);
}

.dg-terms-index h3 {
    font-size: 16px;
    color: #FF7800;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.dg-terms-index ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
}

.dg-terms-index a {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.dg-terms-index a:hover {
    color: #FF7800;
}

/* Secciones de Contenido */
.dg-terms-section {
    margin-bottom: 50px;
    scroll-margin-top: 50px; /* Para que el scroll no tape el título */
}

.dg-terms-section h2 {
    color: #FF7800 !important;
    font-size: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dg-terms-section h2 span {
    background: #FF7800;
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
}

.dg-terms-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-terms-card strong { color: #FF7800; }

.dg-highlight-box {
    border-left: 4px solid #FF7800;
    background: rgba(255, 120, 0, 0.05);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 15px 15px 0;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .dg-terms-container { padding: 30px 20px; }
    .dg-terms-index ul { grid-template-columns: 1fr; }
}
/*Posicionando boton de compra 14-04-2026*/
/* DISEÑO FINAL DEFINITIVO: CERO ICONOS EXTRA Y ALINEACIÓN PERFECTA */

.product-info .add_to_cart_button, 
.product-info .action-cart.button,
.boton-estilo-temu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    background-color: #FF7800 !important;
    border-radius: 8px !important;
    border: none !important;
    margin-top: auto !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    text-align: center !important;
}

/* 1. LIMPIEZA RADICAL (OCULTA TODO LO QUE VENGA DEL TEMA) */
.product-info .add_to_cart_button i,
.product-info .add_to_cart_button span,
.product-info .action-cart.button i,
.product-info .action-cart.button span,
.product-info .add_to_cart_button.loading::after, 
.product-info .add_to_cart_button.added::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. NUESTRA CESTA BLANCA (ÚNICA) */
.product-info .add_to_cart_button::before,
.product-info .action-cart.button::before {
    content: "" !important;
    display: inline-block !important;
    position: static !important; 
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin: 0 !important;
}

/* 3. NUESTRO TEXTO LIMPIO */
.product-info .add_to_cart_button::after,
.product-info .action-cart.button::after {
    content: "AÑADIR AL CARRITO" !important;
    position: static !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: white !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin: 0 !important;
}
/* --- MANTENEMOS TU ESTRUCTURA DE ALINEACIÓN --- */

.product-item, .type-product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

.product-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.product__title {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.product__title a { display: block !important; text-decoration: none !important; }

.product-holder { margin-bottom: 5px !important; }

.product-info .add_to_cart_button:hover {
    background-color: #e66a00 !important;
}
/* Ajuste de Cabecera Doña Gangas */
.header__middle { 
    position: relative !important; 
    z-index: 1;
    background: #FF7800 !important; 
    overflow: hidden;
    min-height: 120px; 
}

.video-container-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    pointer-events: none;
}

.image-background-header {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción sin deformar */
    
    /* MOVER A LA DERECHA: Aquí está el secreto */
    object-position: right center !important; 
    
    opacity: 1 !important;
    padding-right: 10px; /* Un pequeño margen de seguridad a la derecha */
}

/* Para asegurar que los iconos tengan su espacio y no se mezclen */
.header__icons.ul_li {
    position: relative;
    z-index: 10 !important; /* Los ponemos por encima de la imagen siempre */
    margin-left: auto; /* Los empuja a su lugar correcto */
}
/* AJUSTE CABECERA DOÑA GANGAS: BAJAR IMAGEN */

.header__middle { 
    position: relative !important; 
    z-index: 1;
    background: #FF7800 !important; 
    overflow: hidden;
    /* Subimos un poco la altura total para que la imagen tenga a dónde bajar */
    min-height: 160px !important; 
}

.video-container-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    pointer-events: none;
}

.image-background-header {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-position: right center !important; 
    
    /* ESTA ES LA CLAVE: Empuja la imagen hacia abajo */
    /* Si quieres que baje más, sube el número (ej. 50px) */
    padding-top: 40px !important; 
    
    opacity: 1 !important;
    padding-right: 10px; 
}

/* Iconos siempre por encima */
.header__icons.ul_li {
    position: relative;
    z-index: 10 !important; 
    margin-left: auto;
}
/* OCULTAR BARRA DE HERRAMIENTAS Y FILTROS EN MÓVIL */
@media (max-width: 768px) {
    .woocommerce-toolbar-top {
        display: none !important;
    }
}
/*Modificando logo hacia arriba version movil*/
/* AJUSTE DE LOGO MÓVIL: TAMAÑO MEDIANO */
@media (max-width: 768px) {
    /* Subimos a 120px para que se vea mejor */
    html body .header__logo a.custom-logo-link img.custom-logo {
        width: 120px !important; 
        height: auto !important;
        max-width: 120px !important;
        min-width: 120px !important;
        display: block !important;
    }

    /* Ajustamos el contenedor al nuevo tamaño */
    .header__logo, .header__logo a {
        width: 120px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
/*Ajustando buscador*/
/* AJUSTE MAESTRO MODIFICADO: MÁS PEQUEÑO Y CENTRADO */
@media (max-width: 768px) {
    /* Reducimos el ancho y centramos el formulario */
    form.header__search-box {
        position: relative !important;
        top: -15px !important; /* Mantiene la subida que te gustó */
        
        /* HACERLO MÁS PEQUEÑO Y CENTRADO */
        width: 85% !important; /* Ajusta este % si lo quieres más o menos ancho */
        margin-left: auto !important; 
        margin-right: auto !important;
        display: flex !important; /* Asegura que el contenido interno se alinee bien */

        margin-bottom: -10px !important;
        z-index: 10 !important;
    }

    /* Reducimos el padding del contenedor */
    .header__middle {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
        text-align: center !important; /* Refuerza el centrado */
    }

    /* Aseguramos que el botón de la lupa siga en su sitio */
    form.header__search-box button {
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 5px !important; /* Ajuste sutil para que no pegue al borde */
    }

    /* Ajuste del input para que respete el nuevo ancho */
    .searchbox {
        width: 100% !important;
        height: 38px !important; /* Un pelín más delgado para que se vea "más pequeño" */
    }
}
/* ESTILO NEGRO CARBÓN MINIMALISTA PARA EL TITULO DEL PRODUCTO */
h2.product__title a {
    color: #222222 !important; /* Negro suave, más pro que el negro puro */
    font-weight: 700 !important; 
    text-transform: capitalize !important; /* Asegura que la primera letra sea mayúscula */
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: inline-block !important;
}

h2.product__title a:hover {
    opacity: 0.7 !important; /* Efecto de desvanecimiento suave al pasar el ratón */
}
/*Intentando modicficar el encabezado del sitio web*/
/* ESTILO PREMIUM PARA ICONOS DE ENCABEZADO */

/* 1. El Contenedor de cada icono */
.header__icons .icon {
    background-color: #ff6600 !important; /* Fondo Naranja Doña Gangas */
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important; /* Círculos perfectos */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 8px !important; /* Espacio entre ellos */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; /* Sombra para dar relieve */
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* 2. Efecto al pasar el ratón (Hover) */
.header__icons .icon:hover {
    transform: scale(1.1) !important; /* Crece un poquito */
    background-color: #e65c00 !important; /* Naranja un poco más oscuro */
}

/* 3. Transformar los iconos SVG a NEGRO */
.header__icons .icon img {
    /* Este filtro convierte cualquier color original del SVG a Negro Puro */
    filter: brightness(0) saturate(100%) !important; 
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* 4. Ajuste del globo de notificación (Carrito/Deseos) */
.header__icons .count {
    background-color: #000000 !important; /* Globo negro */
    color: #ffffff !important; /* Número blanco */
    font-size: 11px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    border: 2px solid #ffffff !important; /* Borde blanco para que resalte */
}

/* 5. Asegurar que no haya estilos heredados del tema que molesten */
.header__icons.ul_li {
    display: flex !important;
    align-items: center !important;
}
/*Posicionando el buscador del sitio web 20-04-2026*/
/* POSICIONAR BUSCADOR A LA DERECHA DEL ENCABEZADO */

/* 1. El contenedor padre: lo alineamos todo a la derecha */
.header__middle.ul_li_between {
    display: flex !important;
    justify-content: flex-end !important; /* Empuja todo a la derecha */
    align-items: center !important;
    gap: 20px !important; /* Espacio entre logo, buscador e iconos */
}

/* 2. El Logo: lo forzamos a quedarse a la izquierda */
.header__logo {
    margin-right: auto !important; /* Esto es el truco: empuja al resto a la derecha */
}

/* 3. El Buscador: Ajuste de tamaño y posición */
form.header__search-box {
    margin: 0 !important;
    flex: 0 1 450px !important; /* Tamaño máximo de la barra de búsqueda */
    order: 2 !important; /* Asegura que vaya después del logo */
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 40px !important;
    height: 45px !important;
}

/* 4. Los Iconos: se mantienen a la derecha del buscador */
.header__icons {
    order: 3 !important; /* Van al final de todo */
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
}

/* AJUSTE PARA MÓVIL: En pantallas pequeñas el espacio es poco */
@media (max-width: 768px) {
    .header__middle.ul_li_between {
        flex-wrap: wrap !important; /* Permite que el buscador baje si no cabe */
        justify-content: center !important;
    }
    
    .header__logo {
        margin: 0 auto 15px auto !important; /* Logo centrado arriba en móvil */
    }

    form.header__search-box {
        flex: 0 0 100% !important; /* Buscador ocupa todo el ancho en móvil */
        order: 4 !important; /* Baja debajo de los iconos */
    }
}
/* BUSCADOR NIVEL ELITE - DOÑA GANGAS */

/* 1. Estructura Principal con Efecto Elevado */
form.header__search-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    padding: 5px !important; /* Más aire interno */
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.1), 
        0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; /* Sombra multicapa pro */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    height: 54px !important; /* Un pelín más alto para dar importancia */
    max-width: 550px !important;
    position: relative !important;
}

/* 2. Glow al Activar (Brillo naranja suave) */
form.header__search-box:focus-within {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 
        0 20px 25px -5px rgba(255, 102, 0, 0.2), 
        0 10px 10px -5px rgba(255, 102, 0, 0.1) !important;
    border-color: #ff6600 !important;
}

/* 3. Input de Texto Refinado */
.searchbox {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 25px !important;
    font-size: 16px !important;
    letter-spacing: -0.3px !important; /* Letras un poco más juntas (estilo Apple) */
    font-weight: 400 !important;
    color: #1a1a1a !important;
    outline: none !important;
}

.searchbox::placeholder {
    color: #bbb !important;
    text-transform: uppercase !important; /* Placeholder en mayúsculas pequeñas */
    font-size: 11px !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* 4. El Botón "The Beast" (Lupa) */
form.header__search-box button {
    background: #111111 !important; /* Negro puro para máximo contraste pro */
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animación de brillo en el botón al pasar el ratón */
form.header__search-box button:hover {
    background: #ff6600 !important; /* Cambia a naranja al tocarlo */
    transform: rotate(90deg) !important; /* La lupa rota suavemente */
}

form.header__search-box button i {
    font-size: 18px !important;
    z-index: 2 !important;
}

/* 5. Separador Minimalista */
form.header__search-box::before {
    content: "" !important;
    position: absolute !important;
    right: 65px !important;
    height: 25px !important;
    width: 1px !important;
    background: #eee !important; /* Una línea fina que separa el texto del botón */
}

/* Ocultar Categorías para limpieza absoluta */
.header__search-box .select-box {
    display: none !important;
}
/* REDISEÑO TOP BAR PRO - DOÑA GANGAS */

/* 1. Altura Fina y Fondo Elegante */
.header__top-info-wrap {
    background-color: #1a1a1a !important; /* Negro antracita muy pro */
    padding: 0 !important;
    min-height: 38px !important; /* Altura reducida y elegante */
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* 2. Justificación y Alineación Vertical */
.header__top-info.ul_li_between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 38px !important;
    margin: 0 !important;
}

/* 3. Estilo de la Fecha y Redes Sociales */
.header__top-right.ul_li, 
.header__top-info .date, 
.header__social {
    display: flex !important;
    align-items: center !important;
    color: #cccccc !important; /* Gris suave para no cansar la vista */
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.header__social a {
    color: #ffffff !important;
    margin: 0 10px !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}

.header__social a:hover {
    color: #ff6600 !important; /* Naranja solo al pasar el ratón */
}

/* 4. Botón Login / Sign Up (Versión Minimalista) */
.login-sign-btn a.thm-btn {
    background: transparent !important;
    border-left: 1px solid rgba(255,255,255,0.1) !important; /* Separador fino */
    padding: 0 20px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: background 0.3s !important;
}

.login-sign-btn a.thm-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #ff6600 !important;
}

/* Eliminar duplicados de texto si el tema los genera en el span */
.login-sign-btn .btn-wrap span:nth-child(2) {
    display: none !important;
}

/* 5. Quitar márgenes negativos que traen los temas por defecto */
.mt-none-10, .mt-10 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/*Intentando cambiar el estilo del boton acceso*/
/* BOTÓN LOGIN PRO: SIN DUPLICADOS Y TEXTO FIJO */

/* 1. Estilo base del botón */
.login-sign-btn a.thm-btn {
    background: #ff6600 !important; /* Naranja permanente */
    height: 20px !important;
    padding: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    transition: background 0.3s ease !important;
    text-decoration: none !important;
    overflow: hidden !important; /* Corta cualquier clon que intente salir */
    border: none !important;
}

/* 2. Control total de los SPAN (los textos) */
.login-sign-btn a.thm-btn .btn-wrap span {
    color: #ffffff !important; /* Siempre blanco */
    font-size: 12px !important;
    font-weight: 700 !important;
    display: none !important; /* Primero ocultamos todos */
    transform: none !important; /* Matamos la animación de movimiento */
    transition: none !important;
    position: relative !important;
    top: 0 !important;
}

/* 3. Mostrar SOLO el primer SPAN (evita el duplicado) */
.login-sign-btn a.thm-btn .btn-wrap span:first-child {
    display: inline-block !important; /* Solo este se verá */
}

/* 4. Efecto HOVER: Fondo negro, texto sigue blanco */
.login-sign-btn a.thm-btn:hover {
    background: #000000 !important; /* Cambia a negro */
}

.login-sign-btn a.thm-btn:hover .btn-wrap span:first-child {
    color: #ffffff !important;
    transform: none !important;
}

/* 5. Asegurar que el contenedor no tenga márgenes raros */
.login-sign-btn {
    display: inline-flex !important;
    vertical-align: middle !important;
}
/* OCULTAR FECHA EN LA BARRA SUPERIOR */
.header__top-info .date {
    display: none !important;
}
/*Reducuiendo el tamaño del logo hacia la izquierda del encabezado*/
/* POSICIONAMIENTO RADICAL: MUÑEQUITA A LA IZQUIERDA Y COMPLETA */

/* 1. Preparamos el terreno naranja */
.header__middle {
    position: relative !important;
    min-height: 120px !important;
    height: 120px !important;
}

/* 2. Sacamos la muñequita del flujo para que no la corten */
.header__logo {
    position: absolute !important;
    left: 20px !important; /* Pegada a la izquierda */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centrado vertical perfecto */
    z-index: 9999 !important; /* Por encima de cualquier bloqueo */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Ajustamos el tamaño para que se vea de pies a cabeza */
.custom-logo {
    height: 100px !important; /* Un poco menos que los 120px del fondo para que no se corte */
    width: auto !important;
    max-height: 100px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 4. Movemos el buscador para que no se pegue a la muñequita */
.header__search-box {
    margin-left: 160px !important; /* Deja espacio para que la muñequita respire */
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .header__logo {
        left: 10px !important;
    }
    .custom-logo {
        height: 70px !important;
    }
    .header__middle {
        min-height: 90px !important;
    }
}
/* --- DISEÑO PRO: NOMBRE CENTRADO Y ESTRUCTURA MÓVIL --- */

/* 1. Estilo del contenedor de las letras (Escritorio) */
.nombre-central-dg {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 5 !important;
}

.nombre-central-dg img {
    height: 70px !important; /* Ajusta según el tamaño de tus letras */
    width: auto !important;
    object-fit: contain !important;
}

/* 2. ARREGLO PARA MÓVIL (La clave de la versión Pro) */
@media (max-width: 768px) {
    /* Forzamos a la fila naranja a tener dos niveles */
    .header__middle .container {
        display: flex !important;
        flex-wrap: wrap !important; /* Permite que los elementos salten de línea */
        justify-content: space-between !important;
        padding: 10px !important;
    }

    /* Fila 1 - Izquierda: Muñequita */
    .header__logo {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 40% !important; /* Ocupa menos de la mitad */
        order: 1 !important;
    }

    /* Fila 1 - Derecha: Letras */
    .nombre-central-dg {
        width: 50% !important;
        justify-content: flex-end !important;
        order: 2 !important;
    }
    
    .nombre-central-dg img {
        height: 40px !important; /* Más pequeño en móvil */
    }

    /* Fila 2: EL BUSCADOR (Baja solo) */
    .header__search-box {
        width: 100% !important; /* Ocupa todo el ancho */
        margin: 15px 0 5px 0 !important; /* Separación superior */
        order: 3 !important; /* Se va al final */
        display: flex !important;
    }

    /* Ajustamos el fondo naranja para que crezca y quepa todo */
    .header__middle {
        height: auto !important;
        min-height: 150px !important;
        padding-bottom: 15px !important;
    }
}
/*Intentando insertar imagen de las letras de Doña Gangas en el encabezado*/
/* ESTRUCTURA DE FONDO PARA LETRAS DOÑA GANGAS */

.header__middle { 
    position: relative !important; 
    z-index: 1;
    /* Mantén el color naranja de fondo aquí si quieres que se vea detrás */
    background-color: #ff6600 !important; 
}

.image-container-header {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw; 
    height: 100%;
    z-index: -1; /* Se queda al fondo */
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-background-header {
    /* Ajusta el tamaño de las letras aquí */
    height: 80% !important; 
    width: auto !important;
    object-fit: contain; /* Para que las letras no se estiren feo */
    opacity: 1;
}

.image-overlay-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Un degradado suave para que las letras resalten */
    background: linear-gradient(90deg, rgba(255,102,0,0.8) 0%, rgba(255,102,0,0) 50%, rgba(255,102,0,0.8) 100%);
}

/* Aseguramos que el contenido (muñequita y buscador) flote por encima */
.header__middle > .container {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
/* ELIMINAR FONDO NARANJA DEL ENCABEZADO */

.header__middle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* También quitamos el color si el tema lo aplica al contenedor interno */
.header__middle .container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Si existe algún degradado o imagen de fondo del tema, la anulamos */
.header__middle:before, 
.header__middle:after {
    display: none !important;
    background: none !important;
}
/*Intentado cuadrar la topografia de Doña Gangas*/
/* --- AJUSTE MILIMÉTRICO: DOÑA GANGAS --- */

@media (min-width: 992px) {
    .header__middle {
        background-image: url('https://xn--doagangas-m6a.com/wp-content/uploads/tipografia1.png') !important;
        background-repeat: no-repeat !important;      
        /* 46% mueve el logo un poco más a la izquierda del centro */
        background-position: 35% % !important; 
        
        /* Tamaño elegante */
        background-size: 150px auto !important; 
        
        min-height: 140px !important; 
        position: relative !important;
    }

    /* Mantenemos el Logo de la muñequita en su sitio */
    .header__logo {
        position: absolute !important;
        left: -1px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

    /* Mantenemos el Buscador en su sitio */
    form.header__search-box {
        position: absolute !important;
        right: 160px !important;
        top: 30% !important;
        transform: 
}

/* SEGURIDAD MÓVIL */
@media (max-width: 991px) {
    .header__middle {
        background-image: none !important;
    }
}
/*Alineando logo y topologia Doña Gangas version movil*/
/* --- AJUSTE MÓVIL: BAJAR LOGO Y LETRAS --- */
/* --- DISEÑO MÓVIL: LOGO + LETRAS + BUSCADOR TIPO PC --- */
@media (max-width: 991px) {
    /* 1. Contenedor: Espacio para que bajen los elementos */
    .header__middle .container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 25px 15px 15px 15px !important; /* Más aire arriba */
        height: auto !important;
    }

    /* 2. Logo de la Abuela (Bajado) */
    .header__logo {
        flex: 0 0 auto !important;
        width: 75px !important;
        margin-right: 12px !important;
        margin-top: 15px !important; 
        order: 1 !important;
    }

    /* 3. Letras Doña Gangas (Bajadas y niveladas) */
    .letras-gangas-movil {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important; 
        order: 2 !important;
    }

    .letras-gangas-movil img {
        height: 45px !important; /* Un poco más pequeño para que no sature */
        width: auto !important;
    }

    /* 4. EL BUSCADOR: Estilo PC adaptado a móvil */
    form.header__search-box {
        display: flex !important; 
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 3 !important;
        margin-top: 25px !important; /* Espacio con lo de arriba */
        background: #ffffff !important;
        border: 2px solid #e5e5e5 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        height: 48px !important; /* Altura cómoda */
    }

    /* Input (Donde se escribe) */
    .header__search-box input.searchbox {
        flex: 1 !important;
        border: none !important;
        background: white !important;
        padding: 0 15px !important;
        font-size: 15px !important;
        color: #333 !important;
    }

    /* Botón de la Lupa (Estilo PC) */
    .header__search-box button {
        background: #333333 !important;
        color: #ffffff !important;
        border: none !important;
        width: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }

    /* Ocultar selector de categorías en móvil para que sea limpio como PC */
    .header__search-box .select-box {
        display: none !important; 
    }
}

/* --- SEGURIDAD: EVITAR DUPLICADOS EN PC --- */
@media (min-width: 992px) {
    .letras-gangas-movil {
        display: none !important;
    }
}
/*Ajustar la tipografía version PC de la tienda*/
/* --- AJUSTE DE PRECISIÓN: DESPLAZAMIENTO IZQUIERDA --- */

@media (min-width: 992px) {
    .header__middle {
        background-image: url('https://xn--doagangas-m6a.com/wp-content/uploads/tipografia1.png') !important;
        background-repeat: no-repeat !important;
        
        /* 1. POSICIÓN: Bajamos a 42% para moverlo más a la izquierda */
        background-position: 27% 50% !important; 
        
        /* 2. TAMAÑO: Mantenemos el tamaño imponente que te gustó */
        background-size: 380px auto !important; 
        
        min-height: 150px !important; 
        display: flex !important;
        align-items: center !important;
    }

    /* 3. LOGO (Muñequita) */
    .header__logo {
        flex: 0 0 auto !important;
        margin-left: 40px !important; /* Le damos un poco más de aire al borde */
        z-index: 10 !important;
    }

    /* 4. BUSCADOR (Fijamos su ancho para que no "coma" espacio central) */
    form.header__search-box {
        margin-left: auto !important;
        margin-right: 40px !important;
        width: 340px !important; /* Un pelín más estrecho para liberar las letras */
        z-index: 10 !important;
    }
}
/*Ajustando botones flotantes*/
/* --- POSICIONAMIENTO QUIRÚRGICO DE ICONOS --- */

@media (min-width: 992px) {
    .header__icons.ul_li {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        
        /* 1. La clave: Lo movemos desde su sitio original */
        position: relative !important;
        top: -15px !important; /* Si quieres que SUBAN MÁS, pon -25px. Si quieres que BAJEN, pon -5px */
        
        margin: 0 !important;
        padding-right: 20px !important; /* Separación del borde derecho */
        z-index: 99 !important;
    }

    /* 2. Tamaño de los iconos */
    .header__icons .icon img {
        width: 25px !important;
        height: auto !important;
    }

    /* 3. Ajuste de las bolitas de notificación */
    .header__icons .count {
        background: #ff6600 !important;
        top: -5px !important;
        right: -8px !important;
    }
}
/* --- ESTILO PRO PARA BOTONES DUPLICADOS --- */

@media (min-width: px) {	
    /* Alineación del contenedor para 5 botones */
    .header__icons.ul_li {
        display: flex !important;
        gap: 15px !important;
        align-items: center !important;
        position: relative !important;
			  top: -16px !important;
    }

    /* Forzamos el estilo circular de producto a los nuevos */
    .extra-custom a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 6px 15px rgba(0,0,0,0.12) !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* CAMBIO DE ICONO: UBICACIÓN (Pin) */
    #btn-personalizado-loc img {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") !important;
        width: 22px !important;
    }

    /* CAMBIO DE ICONO: TRANSPORTE (Camión) */
    #btn-personalizado-tra img {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'%3E%3C/rect%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'%3E%3C/polygon%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E") !important;
        width: 24px !important;
    }

    /* HOVER: FONDO NARANJA E ICONO BLANCO */
    .extra-custom a:hover {
        background-color: #FF4E01 !important;
        transform: scale(1.1) translateY(-5px) !important;
        box-shadow: 0 10px 20px rgba(255, 78, 1, 0.3) !important;
    }

    #btn-personalizado-loc a:hover img {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") !important;
    }

    #btn-personalizado-tra a:hover img {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'%3E%3C/rect%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'%3E%3C/polygon%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E") !important;
    }
} 
/* --- OCULTAR BARRA DE HERRAMIENTAS SUPERIOR DE PRODUCTOS --- */

.woocommerce-toolbar-top {
    display: none !important;
}
/* --- OCULTAR SECCIÓN DE BREADCRUMB (TIENDA) --- */

section.breadcrumb-area {
    display: none !important;
}
/*Ajuste del logo muñeca a la altura del encabezado*/
/* --- AJUSTE DE ALTURA ENCABEZADO PC (LOGO Y BUSCADOR) --- */

@media (min-width: 992px) {
    /* 1. Alineamos el logo y el buscador en la misma franja horizontal */
    .header__middle.ul_li_between {
        display: flex !important;
        align-items: center !important; /* Centrado vertical relativo al logo */
        justify-content: space-between !important;
        min-height: 130px !important; /* La altura que definimos para tu diseño */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Ajuste específico del Logo para que no sea gigante y deje espacio */
    .header__logo img {
        max-height: 130px !important; /* Ajusta este valor si quieres que el logo sea más o menos alto */
        width: auto !important;
        transition: transform 0.3s ease;
    }

    /* 3. Posicionamiento del Buscador a la altura del logo */
    form.header__search-box {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        flex-grow: 0.6 !important; /* Le da un ancho equilibrado */
        max-width: 600px !important;
    }

    /* 4. Ocultar el texto móvil "Letras Gangas" en PC si estorba el buscador */
    .letras-gangas-movil {
        display: none !important;
    }

    /* 5. Espaciado de seguridad para que no se toquen */
    .header__logo {
        margin-right: 30px !important;
    }
}
/* --- ESTILO DEL BANNER VIDEO --- */

.video-banner-container {
    width: 100%;
    line-height: 0; /* Elimina espacio blanco extra abajo */
    overflow: hidden;
    background-color: #000; /* Fondo de seguridad */
}

.video-banner-element {
    width: 100% !important;
    height: auto !important;
    display: block;
    /* Ajusta este valor si quieres limitar la altura en PC */
    max-height: 450px; 
    object-fit: cover; /* Asegura que el video llene el espacio sin deformarse */
}

/* Ajuste para móviles: para que el video no se vea minúsculo */
@media (max-width: 767px) {
    .video-banner-element {
        min-height: 200px;
        object-fit: cover;
    }
}
/* --- BANNER VIDEO: IMPACTO TOTAL --- */

.video-banner-full-width {
    width: 100% !important;
    max-width: 100vw !important; /* Evita cualquier margen lateral */
    line-height: 0 !important; /* Elimina espacio en blanco debajo del video */
    overflow: hidden !important;
}

.video-banner-full-width video {
    width: 100% !important; /* Obliga al video a cubrir todo el ancho del sitio */
    height: auto !important;
    display: block !important;
    /* Ajuste de altura para PC: para que no ocupe demasiada pantalla vertical */
    max-height: 500px !important; 
    object-fit: cover !important; /* Mantiene la estética sin deformar el video */
}

/* Ajuste para que en móviles se vea bien */
@media (max-width: 767px) {
    .video-banner-full-width video {
        max-height: 300px !important; /* Más pequeño en móvil */
    }
}
/* --- ELIMINAR CONTENEDOR DE BANNER ESTÁTICO --- */

.dg-banner-shop {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* --- BANNER ESTÁTICO OCULTO (DOÑA GANGAS) --- */
/* Lo mantenemos en el código pero lo ocultamos de la vista */

.dg-banner-shop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important; /* Para que no se pueda hacer clic aunque sea invisible */
}
/* --- CONTROL DE VISIBILIDAD DEL VIDEO BANNER (HOME Y PORTAL) --- */

/* 1. Ocultamos el video en toda la web por defecto */

/* 2. Lo mostramos en la Home */
.home .video-banner-full-width {
    display: block !important;
}

/* 3. Lo mostramos específicamente en la página de Portal */
/* (Usamos la clase page-id si la conoces, o este selector de atributo) */
[class*="page-id-"] .video-banner-full-width,
.page-template-default .video-banner-full-width {
    /* Si ves que no aparece en /portal/, usaremos el ID específico */
    display: block !important;
}

/* --- AJUSTE DE MÁRGENES PARA QUE NO QUEDE HUECO BLANCO --- */

/* En las páginas donde NO hay video, el producto debe subir */
body:not(.home) .single-product #content .product {
    margin-top: 20px !important;
}

/* Si en el portal también hay productos y quieres el margen de 200px: */
.home .single-product #content .product {
    margin-top: 200px !important;
}
/* --- ALINEACIÓN FINAL CENTRADA EN BARRA NEGRA --- */

.header__icons.ul_li {
    /* Reducimos el margen para subirlos a la franja negra */
    margin-top: 15px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Estilo de botones circulares blancos */
.header__icons .icon {
    margin: 0 6px !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;
    width: 34px !important; /* Un pelín más pequeños para que quepan mejor */
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Iconos blancos */
.header__icons .icon img {
    filter: brightness(0) invert(1) !important;
    width: 16px !important;
}

/* Ajuste fino de los contadores naranjas */
.header__icons .count {
    background: #ff6600 !important;
    color: #fff !important;
    font-size: 9px !important;
    border-radius: 50% !important;
    padding: 1px 5px !important;
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
}

/* Para que no se muevan cuando la barra se queda fija al hacer scroll */
.header__cat-wrap.uk-active .header__icons {
    margin-top: 0px !important;
}
/*Ajustando las columnas de los productos de 4  5*/
/* ================================================================= */
/* 5 COLUMNAS - MÉTODO CLÁSICO WOOCOMMERCE (A PRUEBA DE FALLOS)      */
/* ================================================================= */

/* 1. Expandir el contenedor principal al 100% de la pantalla */
.woocommerce-content-wrap {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
}

/* 2. Quitar el grid problemático y restaurar el display normal */
.woocommerce ul.products, 
ul.products, 
ul.products.default-column {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. El truco matemático: 5 columnas = 18% de ancho + 2.5% de margen */
.woocommerce ul.products li.product, 
ul.products li.product {
    width: 18% !important; 
    max-width: none !important;
    float: left !important;
    margin-right: 2.5% !important;
    margin-bottom: 30px !important;
    clear: none !important;
}

/* 4. Quitar el margen al 5to producto para que no se baje de línea */
.woocommerce ul.products li.product:nth-child(5n), 
ul.products li.product:nth-child(5n) {
    margin-right: 0 !important;
}

/* 5. Obligar al 6to producto a empezar en una línea nueva */
.woocommerce ul.products li.product:nth-child(5n+1), 
ul.products li.product:nth-child(5n+1) {
    clear: both !important;
}

/* 6. Desbloquear las imágenes para que recuperen su tamaño normal */
ul.products li.product .product-holder,
ul.products li.product .product-holder img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ========================================== */
/* ADAPTACIÓN PARA TABLETS (3 COLUMNAS)       */
/* ========================================== */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product, 
    ul.products li.product {
        width: 31% !important;
        margin-right: 3.5% !important;
    }
    /* Resetear las reglas del paso 4 y 5 */
    .woocommerce ul.products li.product:nth-child(5n) { margin-right: 3.5% !important; }
    .woocommerce ul.products li.product:nth-child(5n+1) { clear: none !important; }
    
    /* Aplicar reglas para 3 columnas */
    .woocommerce ul.products li.product:nth-child(3n) { margin-right: 0 !important; }
    .woocommerce ul.products li.product:nth-child(3n+1) { clear: both !important; }
}

/* ========================================== */
/* ADAPTACIÓN PARA MÓVILES (2 COLUMNAS)       */
/* ========================================== */
@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    ul.products li.product {
        width: 48% !important;
        margin-right: 4% !important;
    }
    /* Resetear las reglas de la tablet */
    .woocommerce ul.products li.product:nth-child(3n) { margin-right: 4% !important; }
    .woocommerce ul.products li.product:nth-child(3n+1) { clear: none !important; }
    
    /* Aplicar reglas para 2 columnas */
    .woocommerce ul.products li.product:nth-child(2n) { margin-right: 0 !important; }
    .woocommerce ul.products li.product:nth-child(2n+1) { clear: both !important; }
}
/* ======================================================== */
/* OCULTAR ICONOS DUPLICADOS EN LA BARRA LATERAL/MÓVIL      */
/* ======================================================== */

.header__icons.mr-15 {
    display: none !important;
}
/* ======================================================== */
/* DAR ESPACIO ENTRE LA BARRA NEGRA Y EL CONTENIDO (TIENDA) */
/* ======================================================== */

.shop-area {
    margin-top: 40px !important; /* Ajusta este número si quieres más o menos espacio */
}
/* ======================================================== */
/* DAR ESPACIO EN LA PÁGINA DEL PRODUCTO INDIVIDUAL         */
/* ======================================================== */

/* 1. Empuja el bloque principal del producto hacia abajo */
.single-product div.product.type-product {
    margin-top: 40px !important; /* Ajusta este número a tu gusto */
}

/* 2. Empuja también la zona donde salen los mensajes verdes (Ej: "Añadido al carrito") */
.single-product .woocommerce-notices-wrapper {
    margin-top: 30px !important;
}
/* ======================================================== */
/* ESTILO "PRO" PARA BLOQUES DE PRODUCTOS WOOCOMMERCE       */
/* ======================================================== */

/* 1. Tarjetas de producto (Efecto moderno y limpio) */
.wc-block-grid__product {
    background-color: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Efecto Mágico al pasar el ratón (Sombra y elevación) */
.wc-block-grid__product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
    border-color: #ff6600 !important;
}

/* 2. Ajuste de Imágenes con zoom suave */
.wc-block-components-product-image {
    overflow: hidden !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
}
.wc-block-components-product-image img {
    transition: transform 0.4s ease !important;
}
.wc-block-grid__product:hover .wc-block-components-product-image img {
    transform: scale(1.08) !important; /* Pequeño zoom pro */
}

/* 3. Títulos limpios y centrados */
.wc-block-components-product-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
    margin-bottom: auto !important; /* Empuja el precio y botón hacia abajo */
    text-align: center !important;
}

.wc-block-components-product-title a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.wc-block-components-product-title a:hover {
    color: #ff6600 !important;
}

/* 4. Precios destacados */
.wc-block-components-product-price {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ff6600 !important; /* Naranja corporativo */
    text-align: center !important;
    margin: 15px 0 10px 0 !important;
    display: block !important;
}

/* 5. Botones de Compra (Premium / Tipo Píldora) */
.wc-block-grid__product-add-to-cart {
    margin-top: auto !important;
}

.wc-block-grid__product-add-to-cart .wp-element-button {
    background-color: #ff6600 !important;
    color: #fff !important;
    border-radius: 50px !important; /* Botón redondo y moderno */
    width: 100% !important;
    text-align: center !important;
    padding: 12px 15px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
    border: none !important;
    display: block !important;
}

.wc-block-grid__product-add-to-cart .wp-element-button:hover {
    background-color: #e65c00 !important; /* Naranja un tono más oscuro */
    transform: scale(1.02) !important;
}

/* 6. Estilo elegante para la Paginación (Los numeritos de abajo) */
.wc-block-components-pagination {
    margin-top: 40px !important;
}
.wc-block-components-pagination__page {
    background: #f5f5f5 !important;
    border: none !important;
    color: #555 !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}
.wc-block-components-pagination__page:hover {
    background: #e0e0e0 !important;
}
.wc-block-components-pagination__page--active {
    background: #ff6600 !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(255, 102, 0, 0.3) !important;
}
/* ======================================================== */
/* ESTILO "PRO" PARA EL CATÁLOGO DE PRODUCTOS (TIENDA)      */
/* ======================================================== */

/* 1. La caja de la tarjeta (Fondo blanco, bordes y sombra sutil) */
ul.products li.product {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    position: relative; /* Necesario para los badges flotantes */
}

/* Efecto al pasar el ratón (Elevación y cambio de borde) */
ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
    border-color: #ff6600 !important;
}

/* 2. Efecto Zoom en la imagen del producto */
ul.products li.product .product-holder {
    overflow: hidden !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
}

ul.products li.product .product-holder img {
    transition: transform 0.4s ease !important;
}

ul.products li.product:hover .product-holder img {
    transform: scale(1.08) !important;
}

/* 3. Título del producto (Limpio y elegante) */
ul.products li.product .product__title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-bottom: auto !important; /* Empuja los precios al fondo */
}

ul.products li.product .product__title a {
    color: #333 !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

ul.products li.product .product__title a:hover {
    color: #ff6600 !important;
}

/* 4. Precio destacado */
ul.products li.product .product__price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    text-align: center !important;
    margin: 15px 0 15px 0 !important;
    display: block !important;
}

/* Si el producto tiene un precio rebajado (tachado) */
ul.products li.product .product__price del {
    font-size: 13px !important;
    color: #999 !important;
    font-weight: normal !important;
    margin-right: 5px !important;
}

ul.products li.product .product__price ins {
    text-decoration: none !important;
    color: #ff6600 !important;
}

/* 5. Botón de "Añadir al carrito" tipo píldora */
ul.products li.product .boton-estilo-temu,
ul.products li.product .button.add_to_cart_button {
    background-color: #ff6600 !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* Redondeo completo */
    width: 100% !important; /* Ocupa todo el ancho */
    text-align: center !important;
    padding: 12px 15px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important; /* Espacio entre el icono y el texto */
    transition: background 0.3s ease, transform 0.2s ease !important;
}

ul.products li.product .boton-estilo-temu:hover,
ul.products li.product .button.add_to_cart_button:hover {
    background-color: #e65c00 !important;
    transform: scale(1.02) !important;
    color: white !important;
}

/* Ocultamos iconos extra del tema que puedan ensuciar el botón nuevo */
ul.products li.product .button i {
    display: none !important; 
}
/*Intentando cambiar los texto de ingles a español*/
/* ======================================================== */
/* ESTILO MINIMALISTA SUPER PRO SOBRE FONDO NARANJA (MY ACCOUNT) */
/* ======================================================== */

/* 1. Fondo Naranja para todo el contenedor principal */
#customer_login {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    background-color: #ff6600 !important; /* Tu naranja corporativo */
    padding: 60px 40px !important; /* Espacio generoso alrededor */
    border-radius: 15px !important; /* Bordes suaves para el contenedor */
    margin-top: 40px;
    margin-bottom: 50px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.1) !important; /* Sombra interior sutil */
}

/* 2. Tarjetas de Login y Registro (Minimalismo Puro: Blanco) */
#customer_login .u-column1, 
#customer_login .u-column2 {
    flex: 1 1 45%;
    background-color: #ffffff !important; /* Blanco puro para contraste */
    padding: 50px !important; /* Espacio interior elegante */
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; /* Sombra elegante para flotar */
    border: none !important; /* Sin bordes exteriores */
    transition: transform 0.3s ease !important;
}

/* Efecto hover sutil en la tarjeta */
#customer_login .u-column1:hover, 
#customer_login .u-column2:hover {
    transform: translateY(-5px) !important;
}

/* 3. Títulos Minimalistas (Negro nítido) */
#customer_login .account__title {
    font-size: 26px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 35px !important;
    text-align: center !important;
    color: #1a1a1a !important; /* Casi negro para nitidez */
}

/* 4. Etiquetas (Labels) sutiles y limpias */
#customer_login label {
    font-weight: 600 !important;
    color: #555555 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-transform: none !important; /* Evita mayúsculas forzadas */
}

#customer_login label .required {
    color: #ff6600 !important; /* Asterisco naranja */
}

/* 5. Inputs Minimalistas (Borde ultra sutil y enfoque naranja) */
#customer_login .woocommerce-Input {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid #eeeeee !important; /* Borde casi invisible */
    border-radius: 8px !important;
    font-size: 15px !important;
    background-color: #f9f9f9 !important; /* Gris muy tierno de fondo */
    color: #333 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

#customer_login .woocommerce-Input:focus {
    border-color: #ff6600 !important; /* Borde naranja intenso al escribir */
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1) !important; /* Glow naranja suave */
    outline: none !important;
}

/* 6. Botones de Acción "Píldora" (Naranja sobre Blanco) */
#customer_login .woocommerce-button {
    background-color: #ff6600 !important; /* Botón naranja llamativo */
    color: #ffffff !important;
    border-radius: 50px !important; /* Tipo Píldora total */
    padding: 16px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    border: none !important;
    width: 100% !important;
    margin-top: 25px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    cursor: pointer;
}

#customer_login .woocommerce-button:hover {
    background-color: #e65c00 !important; /* Naranja un tono más oscuro */
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3) !important; /* Sombra naranja */
}

/* 7. Checkbox y texto de "Recordarme" */
.woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    margin-top: 15px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #666 !important;
}

#customer_login .woocommerce-form__input-checkbox {
    margin-right: 10px !important;
    margin-top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #ff6600 !important; /* Color naranja para el check */
}

/* 8. Enlace de contraseña perdida y textos secundarios */
#customer_login .lost_password,
#customer_login .woocommerce-privacy-policy-text {
    text-align: center !important;
    margin-top: 20px !important;
    font-size: 13px !important;
    color: #888888 !important;
}

#customer_login a {
    color: #ff6600 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#customer_login a:hover {
    color: #1a1a1a !important; /* Negro al hover */
}

/* Texto de política de privacidad */
.woocommerce-privacy-policy-text p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #777 !important;
    margin-top: 15px !important;
}

/* Icono de mostrar contraseña */
.show-password-input::after {
    color: #ff6600 !important;
}

/* 9. Adaptación a Teléfonos Móviles */
@media (max-width: 991px) {
    #customer_login {
        padding: 40px 20px !important;
    }
}

@media (max-width: 768px) {
    #customer_login {
        flex-direction: column !important;
        gap: 20px !important;
    }
    #customer_login .u-column1, 
    #customer_login .u-column2 {
        flex: 1 1 100% !important;
        padding: 30px !important;
    }
}
/* ======================================================== */
/* CORRECCIÓN: TEXTO BLANCO PARA BOTONES ANIMADOS RADIOS    */
/* ======================================================== */

#customer_login .woocommerce-button span,
#customer_login .woocommerce-button .btn-wrap,
#customer_login .woocommerce-button .btn-wrap span {
    color: #ffffff !important; /* Fuerza el texto a blanco puro */
}

#customer_login .woocommerce-button:hover span,
#customer_login .woocommerce-button:hover .btn-wrap span {
    color: #ffffff !important; /* Mantiene el blanco al pasar el cursor */
}
/* ======================================================== */
/* ELIMINAR ANIMACIÓN DE MOVIMIENTO EN LOS BOTONES          */
/* ======================================================== */

/* 1. Bloqueamos cualquier movimiento del contenedor del texto */
#customer_login .woocommerce-button .btn-wrap {
    transform: none !important;
    transition: none !important;
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Ocultamos el texto duplicado que causa el efecto de deslizamiento */
#customer_login .woocommerce-button .btn-wrap span:nth-child(2) {
    display: none !important;
}

/* 3. Nos aseguramos de que el texto restante no se mueva al hacer hover */
#customer_login .woocommerce-button:hover .btn-wrap,
#customer_login .woocommerce-button:hover .btn-wrap span {
    transform: none !important;
    animation: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* ======================================================== */
/* AJUSTE REFINADO: ESPACIO SUTIL PARA EL CATÁLOGO          */
/* ======================================================== */

ul.products.three-column.clearfix, 
.woocommerce ul.products {
    margin-top: 40px !important; /* Espacio moderado y elegante */
    padding-top: 10px !important;
    clear: both !important;
}

/* Reset para el primer producto */
ul.products li.product.first {
    margin-top: 0 !important;
}
/*Solventado la lupa en todas las paginas*/
/* ======================================================== */
/* BLINDAJE TOTAL: LUPA UNIVERSAL (SVG INYECTADO)           */
/* ======================================================== */

/* 1. Atacamos CUALQUIER elemento que tenga la clase 'search' o 'lupa' */
[class*="fa-search"], 
[class*="search-icon"],
.search-btn i,
.header-search-form button i {
    display: inline-block !important;
    width: 1.2em !important; /* Se ajusta al tamaño del texto */
    height: 1.2em !important;
    background-color: currentColor !important; /* Toma el color del texto automáticamente */
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    vertical-align: middle !important;
}

/* 2. Anulamos el icono roto (cuadrado) para que no se vea detrás de nuestra lupa */
[class*="fa-search"]::before,
.search-btn i::before {
    content: "" !important;
    display: none !important;
}

/* 3. Corrección de color para el botón del buscador principal */
button[type="submit"] [class*="fa-search"],
.header-search-form button i {
    color: #ffffff !important;
}

/* VARIABLES DE COLOR */
:root {
    --naranja: #ff6600; /* Ajusta al naranja exacto de tu logo */
    --oscuro: #1a1a1a;
    --gris-texto: #cccccc;
}

.footer-professional {
    background-color: var(--oscuro);
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 60px;
    border-top: 4px solid var(--naranja);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr; /* La columna del logo es más ancha */
    gap: 40px;
    padding: 0 20px 40px 20px;
}

/* ESTILO DE LOGO Y PAGOS */
.footer-logo {
    max-width: 180px;
    margin-bottom: 25px;
    filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.3));
}

.secure-payment h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--gris-texto);
}

.payment-icons img {
    height: 30px;
    margin-right: 10px;
    filter: grayscale(100%); /* Efecto elegante */
    transition: 0.3s;
    opacity: 0.7;
}

.payment-icons img:hover {
    filter: grayscale(0%); /* Cobra color al pasar el mouse */
    opacity: 1;
}

/* ESTILO DE COLUMNAS */
.footer-column h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Línea naranja decorativa debajo de títulos */
.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--naranja);
    transition: width 0.3s;
}

.footer-column:hover h3::after {
    width: 60px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: var(--gris-texto);
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
    display: inline-block;
}

/* EFECTO HOVER EN LINKS */
.footer-column ul li a:hover {
    color: var(--naranja);
    transform: translateX(5px); /* Se desplaza un poquito a la derecha */
}

/* BARRA INFERIOR (COPYRIGHT) */
.footer-bottom {
    background-color: #111;
    padding: 20px 0;
    border-top: 1px solid #222;
}

.bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 13px;
    color: #666;
}

.legal-links a {
    color: #666;
    text-decoration: none;
    margin-left: 20px;
    transition: 0.3s;
}

.legal-links a:hover {
    color: var(--naranja);
}

/* RESPONSIVE (Móviles y Tablets) */
@media (max-width: 991px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bottom-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-column ul li a:hover {
        transform: translateY(-3px); /* En móvil mejor hacia arriba que a la derecha */
    }
}
/* 1. EL CONTENEDOR DE TODOS LOS PRODUCTOS */
/* Aseguramos que la cuadrícula estire todos los cuadros por igual */
.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    align-items: stretch; 
}

/* 2. CADA CUADRO DE PRODUCTO INDIVIDUAL */
/* Convertimos la tarjeta en una columna flexible */
.tarjeta-producto {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa el 100% de la altura de la fila más alta */
    padding: 15px;
    background-color: #ffffff;
    border-radius: 10px; /* Redondeo similar al de tu web */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra ligera opcional */
}

/* 3. LA IMAGEN */
/* Forzamos a que las imágenes no deformen el cuadro */
.tarjeta-producto img {
    height: 180px; /* Puedes ajustar este número según necesites */
    width: 100%;
    object-fit: contain; /* Evita que la foto se estire feo */
    margin-bottom: 15px;
}

/* 4. EL TÍTULO */
.tarjeta-producto .titulo-producto {
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 5. EL PRECIO Y EL BOTÓN (LA CLAVE DEL ALINEAMIENTO) */
/* Agrupamos el precio y el botón, y los empujamos al final */
.tarjeta-producto .zona-inferior {
    margin-top: auto; /* ¡ESTO EMPUJA TODO AL FONDO! */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo básico para que el botón ocupe todo el ancho */
.tarjeta-producto .boton-carrito {
    width: 100%;
    margin-top: 10px;
}
header h1 {
    display: none;
}
/* Elimina el título principal por clase o etiqueta */
h1.entry-title, 
.entry-title, 
.page-title, 
.post-title, 
h1.main-title {
    display: none !important;
}
/* Eliminar palito feo del encabezado 1 */
/* Elimina el contenedor de idiomas en TODO el sitio */
div[class*="header__lang"], 
div[class*="header__language"],
.header__lang, 
.ul_li.header__lang {
    display: none !important;
}
/* Contenedor principal usando Flexbox */
.contenedor-multimedia {
    display: flex;              /* Coloca los elementos en una fila */
    align-items: center;        /* Los centra verticalmente de forma perfecta */
    justify-content: center;    /* Centra ambos elementos horizontalmente en la página */
    gap: 20px;                  /* Añade un espacio de 20px entre la imagen y el video */
    flex-wrap: wrap;            /* Permite que se apilen uno debajo del otro en pantallas pequeñas (móviles) */
    width: 100%;
}

/* Ajuste responsivo para que no se desborden en pantallas pequeñas */
.contenedor-multimedia img,
.contenedor-multimedia video {
    max-width: 100%;
    height: auto;               /* Mantiene la proporción de la imagen y el video */
}
/* ======================================================== */
/* AJUSTE PARA MOSTRAR TÍTULO EN DETALLE DE PRODUCTO        */
/* ======================================================== */

/* Bajamos el contenedor de detalles para que no lo tape el menú */
.product-details {
    margin-top: 30px !important; /* Ajusta este valor si necesitas que baje más */
    padding-top: 10px !important;
}

/* En móviles a veces el espacio debe ser mayor */
@media (max-width: 768px) {
    .product-details {
        margin-top: 40px !important;
    }
}

/* Aseguramos que el título tenga su propio espacio */
.product_title.entry-title {
    display: block !important;
    padding-top: 5px !important;
    clear: both !important;
}
/*Ajustes version movil 24-04-2026*/
}
/*Ajuste degradado del encabezado guapo*/
div:has(> .header__middle), .container:has(> .header__middle) {
    background: linear-gradient(to right, #FFB74D, #D84315) !important;
    max-width: 100% !important;
    width: 100% !important;
}
/*botones guapos agregados debajo de productos de politicas de privacidad, etc*/
/* --- VARIABLES DE COLOR --- */
:root {
  --bg-card: #f4f7fc; /* Fondo azul/gris muy claro similar a la referencia */
  --circle-bg: #000000; /* Círculos negros */
  --icon-color: #ff8c00; /* Iconos naranja */
  --btn-bg: #ff8c00; /* Botón naranja */
  --btn-bg-hover: #ff9d2e; /* Naranja más claro para el efecto hover */
  --text-dark: #111111; /* Texto oscuro */
}

/* --- CONTENEDOR PRINCIPAL --- */
.info-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- ESTILOS DE LA TARJETA --- */
.info-card {
  background-color: var(--bg-card);
  border-radius: 12px;
  padding: 40px 30px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Sombra muy sutil */
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px); /* Pequeño salto de toda la tarjeta al pasar el cursor */
}

/* --- CÍRCULO E ICONO --- */
.icon-circle {
  background-color: var(--circle-bg);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.icon {
  width: 40px;
  height: 40px;
  color: var(--icon-color);
}

/* --- TÍTULO --- */
.card-title {
  color: var(--text-dark);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

/* --- BOTÓN "SABER MÁS" --- */
.btn-saber-mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--btn-bg);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 8px; /* Bordes ligeramente redondeados como la referencia */
  transition: all 0.3s ease; /* Transición suave para todos los efectos */
}

.btn-saber-mas .arrow {
  transition: transform 0.3s ease;
}

/* Efecto al pasar el cursor (Hover) */
.btn-saber-mas:hover {
  background-color: var(--btn-bg-hover);
  box-shadow: 0 6px 12px rgba(255, 140, 0, 0.3); /* Sombra naranja resplandeciente */
  transform: scale(1.05); /* El botón crece ligeramente */
}

/* Movimiento de la flecha en hover */
.btn-saber-mas:hover .arrow {
  transform: translateX(4px); /* La flecha se mueve a la derecha */
}

/* Efecto al hacer clic (Active) */
.btn-saber-mas:active {
  transform: scale(0.95); /* El botón se encoge simulando un hundimiento */
  box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3); /* La sombra se reduce */
}
/*Subiendo espacio del conteneor footer*/
/* SUBIR EL FOOTER Y ELIMINAR ESPACIOS SOBRANTES */
.footer {
    margin-top: -20px !important; /* Fuerza el footer hacia arriba */
    padding-top: 0 !important;
}

/* Ajuste del bloque de "Newsletter" (donde está el link de Canva) */
.newslater.newslater__border {
    padding-top: 10px !important; /* Reducimos de 30 a 10 */
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

/* Ajuste de los widgets del footer */
.footer__copyright.mt-15 {
    margin-top: 0 !important;
}

.footer__widget.mt-40 {
    margin-top: 15px !important; /* Reducimos el salto de los widgets */
}

/* Eliminar el margen negativo que trae el tema que a veces descoloca */
.row.mt-none-40 {
    margin-top: 0 !important;
}
/* =========================================
   FOOTER DOÑA GANGAS - EFECTOS Y BADGES
========================================= */

.dg-footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fdfaf6;
  padding: 50px 20px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  gap: 25px;
  color: #333;
}

/* --- Columnas --- */
.dg-col { flex: 1; min-width: 170px; }
.dg-col-logo { flex: 1.2; min-width: 220px; text-align: center; }

/* --- Títulos --- */
.dg-footer-title {
  font-size: 15px;
  font-weight: 800;
  color: #000;
  margin: 0 0 20px 0;
  padding-top: 15px;
  border-top: 2px solid #d4a373;
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
}

/* --- ETIQUETA SECURE PAY (NUEVO) --- */
.dg-secure-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #1a1a1a; /* Fondo oscuro elegante */
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 30px; /* Forma de píldora */
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  cursor: default;
}
.dg-secure-badge i {
  color: #00d26a; /* Candado verde confianza */
  font-size: 14px;
}
.dg-secure-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 210, 106, 0.2);
}

/* --- MÉTODOS DE PAGO --- */
.dg-payment-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.dg-payment-logo {
  height: 24px;
  width: auto;
  transition: transform 0.3s ease;
}
.dg-payment-icons img:hover {
  transform: scale(1.1); /* Efecto zoom en logos de pago */
}

/* --- LISTAS CON EFECTO HOVER Y ACTIVE (NUEVO) --- */
ul.dg-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
ul.dg-list li { list-style-type: none !important; margin-bottom: 12px !important; }
ul.dg-list a { 
  color: #555; 
  text-decoration: none; 
  font-size: 14.5px; 
  display: inline-flex; 
  align-items: center; 
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición súper suave */
}
ul.dg-list i { margin-right: 10px; color: #888; width: 20px; text-align: center; transition: color 0.3s ease;}

/* Efecto al pasar el ratón (Hover) - Se desliza a la derecha */
ul.dg-list a:hover {
  color: #d4a373;
  transform: translateX(8px); 
}
ul.dg-list a:hover i {
  color: #d4a373;
}
/* Efecto al hacer clic (Active) - Se hunde ligeramente */
ul.dg-list a:active {
  transform: translateX(4px) scale(0.96);
  color: #a3754b;
}

/* --- REDES SOCIALES ESTILO APP (NUEVO) --- */
.dg-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; 
  margin-top: 10px;
}
.dg-social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: #111; /* Cuadrado negro */
  color: #fff; /* Logo blanco */
  border-radius: 12px; /* Bordes redondeados como en tus imágenes */
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto Hover en redes: Levita e ilumina el borde */
.dg-social-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  color: #fff;
  background-color: #333; /* Se aclara un poco */
}
/* Efecto Active en redes: Efecto de botón presionado */
.dg-social-btn:active {
  transform: translateY(-1px) scale(0.92);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .dg-footer-wrapper { flex-direction: column; text-align: center; }
  ul.dg-list li { justify-content: center !important; }
}
/* Fuerza la visibilidad de los iconos en todo el sitio */
.dg-footer-wrapper .dg-socials a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegura que el contenedor de redes sociales no se oculte */
.dg-socials {
    display: flex !important;
    justify-content: center;
    gap: 15px;
}/* Fuerza la visibilidad de los iconos en todo el sitio */
.dg-footer-wrapper .dg-socials a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegura que el contenedor de redes sociales no se oculte */
.dg-socials {
    display: flex !important;
    justify-content: center;
    gap: 15px;
}/* Contenedor Principal */
.dg-footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: px 20px;
    font-family: sans-serif; /* O la fuente que uses */
    background-color: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

/* Columna del Logo */
.dg-col-logo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo el contenido de la columna */
    flex: 1;
    min-width: 340px;
    margin-bottom: 30px;
}

.dg-main-logo {
    width: 130px;
    height: auto;
    margin-bottom: 20px;
}

/* Botón Pago Seguro */
.dg-secure-badge {
    background-color: #1a1a1a;
    color: white;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1px;
}

.dg-secure-badge i {
    color: #00ff88; /* Verde del candado */
}

/* Logos de Pago */
.dg-payment-icons img {
    height: 25px; /* Ajusta el tamaño según necesites */
    width: auto;
}

/* Columnas de Menú */
.dg-col {
    flex: 1;
    min-width: 180px;
    padding: 0 15px;
    margin-bottom: 30px;
}

/* Títulos con la línea arriba */
.dg-footer-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 2px solid #d4a373; /* El color doradito de tu imagen */
    display: inline-block;
    width: 100%;
}

/* Listas */
.dg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dg-list li {
    margin-bottom: 12px;
}

.dg-list a {
    text-decoration: none;
    color: #666;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
}

.dg-list a:hover {
    color: #d4a373;
}

.dg-list i {
    width: 20px;
    text-align: center;
    color: #888;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .dg-footer-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .dg-col {
        width: 100%;
    }
    .dg-list a {
        justify-content: center;
    }
}/* ==========================================================================
   ESTRUCTURA DEL PIE DE PÁGINA - ALINEACIÓN FORZADA (ANTI-DESCUADRES)
   ========================================================================== */

/* 1. Cuadrícula Principal */
.dg-footer-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 30px !important;
    align-items: start !important; /* Obliga a no estirar las columnas hacia abajo */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Columna del Logo (Centrada según tu captura) */
.dg-col-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    gap: 15px !important;
}

/* 3. Columnas de Texto */
.dg-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Evita el salto vertical entre enlaces */
    text-align: left !important;
    height: 100% !important;
}

/* 4. Títulos */
.dg-footer-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* 5. Listas (Anula los espaciados del tema) */
.dg-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important; /* Distancia vertical exacta e inamovible entre lineas */
}

.dg-list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* 6. Enlaces (Alineación horizontal estricta) */
.dg-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Evita que el texto se vaya a la derecha */
    text-decoration: none !important;
    width: 100% !important;
    gap: 12px !important; /* Distancia horizontal exacta entre el icono y la primera letra */
}

/* 7. Iconos (El secreto del justificado perfecto) */
.dg-list i {
    min-width: 22px !important; /* Todos los iconos medirán exactamente 22px */
    max-width: 22px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* 8. Bloque de Redes Sociales */
.dg-socials {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-start !important;
}

/* 
/*Reforzando el icono de Instagram*/
/* Forzar Instagram derecho y visible */
.fa-instagram, .fa-brands.fa-instagram {
    display: inline-block !important;
    visibility: visible !important;
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important; /* Aquí le quitamos la cursiva */
}
/*Reforzando icono Tiktok*/
/* Forzar Instagram y TikTok derechos y visibles */
.fa-instagram, .fa-tiktok, .fa-brands.fa-instagram, .fa-brands.fa-tiktok {
    display: inline-block !important;
    visibility: visible !important;
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important; /* Cero cursiva */
    text-decoration: none !important;
}
/*Quitando duplicidad del icono de tiktok*/
/* Matar cualquier icono de TikTok que intente poner el tema automáticamente */
.fa-tiktok::before, .fa-tiktok::after {
    content: none !important;
    display: none !important;
}

/* Asegurar que el nuestro (el SVG) sea el único visible */
.fa-tiktok svg {
    display: block !important;
}
/* Alineación compacta para iconos del header */
.header__social.ml-25 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important; /* Espacio reducido para que estén más juntos */
    margin-left: 15px !important; /* Ajusta este margen si quieres mover el bloque entero */
}

.header__social.ml-25 a {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important; /* Borra márgenes internos del tema */
    padding: 2px !important; /* Un pequeño respiro para que no choquen */
    text-decoration: none !important;
}

/* Asegurar que Instagram no tenga margen derecho extra */
.header__social.ml-25 a i {
    margin-right: 0 !important;
}
/* Ajuste sutil para mover iconos a la izquierda y separarlos del botón */
.header__social.ml-25 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 5px !important;  /* Un toque hacia la izquierda */
    margin-right: 12px !important; /* Separación suave del botón Entrar */
}

.header__social.ml-25 a {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}
/*Ajustes por Jeffry 25-04-2026*/
/* --- FONDO DE LA PÁGINA --- */
body {
    background-color: #f0f2f5; 
    padding: 50px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- CUADRÍCULA --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.card-large { grid-column: span 2; grid-row: span 2; }
.card-tall  { grid-column: span 1; grid-row: span 2; }
.card-small { grid-column: span 1; grid-row: span 1; }
.card-wide  { grid-column: span 4; grid-row: span 1; }

/* --- DISEÑO DE LOS CUADROS --- */
.card {
    border-radius: 32px; 
    position: relative;
    overflow: hidden;
    text-decoration: none;
    padding: 35px;
    color: #FFFFFF; /* FUENTE BLANCA BASE */
    display: flex;
    flex-direction: column;
    
    /* Sombra base profunda + Borde interior brillante (Efecto Cristal) */
    box-shadow: 0 15px 30px rgba(0,0,0,0.08), inset 0 2px 2px rgba(255,255,255,0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Transición ultra fluida */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- ANIMACIÓN AL PASAR EL RATÓN --- */
.card:hover {
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 25px 45px rgba(0,0,0,0.15), inset 0 2px 2px rgba(255,255,255,0.5);
}

/* --- GRADIENTES VIBRANTES --- */
.bg-cocina { background: linear-gradient(1351deg, #F6D365 0%, #FDA085 100%); }
.bg-sonido { background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%); }
.bg-cuidado { background: linear-gradient(135deg, #DA22FF 0%, #9733EE 100%); }
.bg-tecnologia { background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%); }
.bg-hogar { background: linear-gradient(135deg, #2193B0 0%, #6DD5ED 100%); }

/* --- TEXTOS --- */
.card-content {
    z-index: 10;
    position: relative;
}

.card h2 {
    color: #FFFFFF; /* FUENTE BLANCA ASEGURADA PARA TÍTULOS */
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 7px 10px rgba(0,0,0,0.15); 
}

/* --- ETIQUETAS (PÍLDORAS) --- */
.badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: inline-block;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Todas las etiquetas con fuente blanca garantizada */
.badge-gold { background: rgba(255, 255, 255, 0.3); color: #FFFFFF; }
.badge-red { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.4); }
.badge-blue { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.4); }

/* --- COMPORTAMIENTO DE IMÁGENES --- */
.card-img {
    position: absolute;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 20px 20px rgba(0,0,0,0.4)); 
}

.card:hover .card-img {
    transform: scale(1.1) translateY(-10px) rotate(-2deg);
}

/* Posiciones exactas */
.floating-img { bottom: -5%; right: -5%; height: 90%; object-fit: contain; }
.center-img { bottom: 10%; left: 50%; transform: translateX(-50%); width: 85%; object-fit: contain; }
.card:hover .center-img { transform: translateX(-50%) scale(1.1) translateY(-10px); }
.bottom-right-img { bottom: -5%; right: -5%; height: 75%; object-fit: contain; }
.side-img { right: 2%; bottom: -10%; height: 130%; object-fit: contain; }

/* --- RESPONSIVIDAD MÓVIL --- */
@media (max-width: 992px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .card-large { grid-column: span 2; grid-row: span 2; }
    .card-tall { grid-column: span 1; grid-row: span 1; } 
    .card-wide { grid-column: span 2; }
}

@media (max-width: 600px) {
    .bento-grid { grid-template-columns: 1fr; }
    .card-large, .card-tall, .card-small, .card-wide { grid-column: span 1; grid-row: span 1; }
    .side-img { height: 100%; right: -5%; }
}
/* ============================================================
   TAMAÑOS DE FUENTE INDIVIDUALES POR PANEL
   ============================================================ */

/* 1. Panel de Cocina (Es grande, soporta un texto más grande) */
.bg-cocina h2 {
    font-size: 2.8rem; /* Más grande de lo normal */
    line-height: 0.4;  /* Ajusta el espaciado entre líneas si el texto baja */
}
.bg-cocina .badge {
    font-size: 0.9rem; /* Etiqueta un poco más grande */
}

/* 2. Panel de Sonido (Vertical) */
.bg-sonido h2 {
    font-size: 2.2rem;
	line-height: 0.2;  /* Ajusta el espaciado entre líneas si el texto baja */
}

/* 3. Panel de Cuidado Personal (Cuadro pequeño, texto en dos líneas) */
.bg-cuidado h2 {
    font-size: 1.5rem; /* Más pequeño para que quepa bien */
}

/* 4. Panel de Tecnología (Cuadro pequeño, una sola palabra larga) */
.bg-tecnologia h2 {
    font-size: 1.4rem; /* Ajustado para que "TECNOLOGÍA" no se corte */
    letter-spacing: -1px; /* Junta un poco las letras si es necesario */
}

/* 5. Panel de Hogar (Cuadro ancho horizontal) */
.bg-hogar h2 {
    font-size: 2.4rem;
}/* Reset básico para que el header ocupe todo el espacio sin márgenes */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: sans-serif;
  background-color: #ffffff; /* Restaurado al fondo blanco */
}

/* Estructura del encabezado */
.header-gallery {
  width: 100%;
  height: 80vh; /* Cambia a 100vh si quieres que ocupe TODA la pantalla */
  overflow: hidden;
  position: relative;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  /* La sombra interior ahora es un poco más suave para que encaje mejor con el fondo blanco */
  box-shadow: inset 0 0 60px rgba(0,0,0,0.3); 
}

/* Personalizar los botones de navegación */
.swiper-button-next, .swiper-button-prev {
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

.swiper-pagination-bullet {
  background: #ffffff;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.5); /* Sombra para que los puntitos se vean bien sobre fondos claros */
/* Busca esta parte en el código de tu banner y añádele el margin-top */
.banner-doña-gangas {
    /* ... el resto de tu código ... */
    margin-top: -30px !important; /* Ajusta este número (ej: -40px, -50px) hasta que pegue arriba */
	
}
	}
/*Heredar el boton de agregar al carrito en los Productos de la tienda debajo de los precios*/









/* --- CONTENEDOR GENERAL --- */
.contenedor-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espacio entre tarjetas */
  width: 100%;
  max-width: 500px; /* Ancho máximo para ordenador */
  margin: 0 auto;
  font-family: 'Arial', sans-serif; /* Cámbialo a la fuente de tu web */
}

/* --- ESTILO BASE DE LAS TARJETAS --- */
.tarjeta {
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: 25px;
  padding: 30px 25px;
  box-sizing: border-box;
  /* ESTA LÍNEA ES LA SOLUCIÓN A TU PROBLEMA: */
  overflow: hidden; /* Corta cualquier imagen que intente salirse de la tarjeta */
}

/* Gradientes de colores para cada fondo */
.fondo-cocina { background: linear-gradient(135deg, #ff9a76, #ffdb58); }
.fondo-sonido { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
.fondo-cuidado { background: linear-gradient(135deg, #bc4e9c, #f80759); } /* Ajusta el morado a tu gusto */

/* --- TEXTOS --- */
.contenido-texto {
  position: relative;
  z-index: 2; /* Mantiene el texto siempre por encima de las imágenes */
}

.etiqueta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.etiqueta-clara {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.titulo {
  color: white;
  font-size: 32px;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

/* --- IMÁGENES DE PRODUCTOS (MAGIA RESPONSIVE) --- */
.imagen-producto {
  position: absolute;
  z-index: 1; /* Por debajo del texto */
  height: auto;
  /* IMPORTANTE: No usamos 'px' para el width, usamos '%' */
}

/* Ajustes individuales de tamaño y posición por producto */
.img-cocina {
  width: 90%; /* Ocupa el 65% del ancho de la tarjeta en cualquier pantalla */
  bottom: -15%; /* La baja un poquito */
  right: -5%; /* La mueve a la derecha */
}

.img-sonido {
  width: 75%; /* El parlante es un poco más ancho */
  bottom: -25%; 
  right: -10%;
  transform: rotate(-15deg); /* Le da esa inclinación guay */
}

.img-cuidado {
  width: 35%; /* La afeitadora es más delgada */
  bottom: -10%;
  right: 15%; /* La centramos un poco más */
}

/* Volver a mostrar los botones de añadir al carrito */
a.action-cart.add_to_cart_button {
    display: inline-flex !important; /* Usa flex para que el icono y el texto se alineen bien */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Si por casualidad también se ocultó el icono interno, esto lo soluciona */
a.action-cart.add_to_cart_button i {
    display: inline-block !important;
    visibility: visible !important;
/* Vista solo para movil y tablets */
	/* =========================================================
   1. REGLAS BASE PARA LAS TARJETAS (Aplica a todas)
   ========================================================= */
.bento-grid .card {
    position: relative; /* Crucial: permite que las imágenes se posicionen relativas a su tarjeta */
    overflow: hidden;   /* Evita que las imágenes se salgan de los bordes redondeados */
    display: block;
    text-decoration: none;
    /* Asegúrate de tener aquí tus paddings y border-radius, ej: border-radius: 20px; */
}

.bento-grid .card-img {
    position: absolute;
    object-fit: contain; /* Evita que la imagen se deforme */
    transition: all 0.3s ease; /* Transición suave al cambiar de tamaño de pantalla */
}


/* =========================================================
   2. AJUSTES POR DEFECTO (ESCRITORIO / PANTALLAS GRANDES)
   ========================================================= */

/* COCINA */
.bg-cocina .card-img {
    width: 60%;      /* Ajusta el tamaño */
    bottom: -10%;    /* Ajusta la posición vertical */
    right: -5%;      /* Ajusta la posición horizontal */
}

/* SONIDO */
.bg-sonido .card-img {
    width: 80%;
    bottom: -15%;
    right: 10%;
    transform: rotate(-10deg); /* Puedes usar transform para rotar o mover */
}

/* CUIDADO PERSONAL */
.bg-cuidado .card-img {
    width: 40%;
    bottom: 0;
    right: 5%;
}

/* TECNOLOGÍA */
.bg-tecnologia .card-img {
    width: 50%;
    bottom: -5%;
    right: 5%;
}

/* HOGAR */
.bg-hogar .card-img {
    width: 70%;
    bottom: -10%;
    right: -5%;
}


/* =========================================================
   3. AJUSTES PARA TABLETS (Pantallas hasta 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    
    .bg-cocina .card-img {
        width: 70%; 
        bottom: -5%; 
        right: -10%; 
    }

    .bg-sonido .card-img {
        width: 90%;
        bottom: -10%;
        right: 5%;
    }

    .bg-cuidado .card-img {
        width: 50%;
        bottom: 5%;
        right: 0%;
    }

    .bg-tecnologia .card-img {
        width: 60%;
        bottom: 0%;
        right: 0%;
    }

    .bg-hogar .card-img {
        width: 85%;
        bottom: 0%;
        right: -10%;
    }
}


/* =========================================================
   4. AJUSTES PARA MÓVILES (Pantallas hasta 768px)
   ========================================================= */
@media (max-width: 768px) {
    
    /* Modifica estos valores a tu antojo para móviles */
    
    .bg-cocina .card-img {
        width: 80%;      /* En móviles suele ser mejor hacerlas más grandes */
        bottom: -10%; 
        right: -15%;     /* Puedes empujarlas más afuera de la tarjeta */
    }

    .bg-sonido .card-img {
        width: 100%;
        bottom: -20%;
        right: 0%;
    }

    .bg-cuidado .card-img {
        width: 60%;
        bottom: -5%;
        right: -5%;
    }

    .bg-tecnologia .card-img {
        width: 70%;
        bottom: -10%;
        right: -10%;
    }

    .bg-hogar .card-img {
        width: 110%;      /* Incluso puedes hacerlas más anchas que la tarjeta */
        bottom: -15%;
        right: -15%;
    }
/*Mejorando la vista movil 28/04/2026*/
/* AJUSTE PARA TIENDA EN 2 COLUMNAS (MÓVIL) */
@media only screen and (max-width: 768px) {
    /* 1. Forzar que el contenedor principal sea una rejilla de 2 */
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Aquí ocurre la magia de las 2 columnas */
        gap: 10px !important; /* Espacio entre productos */
        padding: 10px !important;
        list-style: none !important;
    }

    /* 2. Ajustar cada producto para que no se desborde */
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 3. Ajustar la imagen para que encaje bien */
    .product-holder img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* 4. Hacer que los textos (título y precio) sean más pequeños para que quepan */
    .product__title {
        font-size: 14px !important;
        margin: 5px 0 !important;
        line-height: 1.2 !important;
        height: 34px; /* Limita la altura para que los cuadros queden parejos */
        overflow: hidden;
    }

    .product__price .amount {
        font-size: 15px !important;
        font-weight: bold !important;
    }

    /* 5. Ocultar la descripción corta en móvil (ocupa demasiado espacio en 2 columnas) */
    .woocommerce-product-details__short-description {
        display: none !important;
    }

    /* 6. Ajustar los botones de acción (añadir al carrito, etc.) */
    .product__action {
        display: flex !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 5px 0 !important;
    }
    
    .product__action li a {
        padding: 8px !important;
        font-size: 12px !important;
    }

/* === ARREGLOS PAGINA LOST-PASSWORD === */

/* Campo email visible en lost-password */
body.lost-password .woocommerce-account input.input-text {
    border: 1px solid #cccccc !important;
    border-radius: 15px !important;
}

/* Boton naranja letras blancas en lost-password */
body.lost-password .woocommerce-account .button,
body.lost-password .woocommerce-account .woocommerce-Button {
    background-color: #f37021 !important;
    color: #ffffff !important;
}

body.lost-password .woocommerce-account .button:hover {
    background-color: #d4601a !important;
    color: #ffffff !important;
}

/* === OCULTAR ENVIOS EN PRIVACY-POLICY === */
body.privacy-policy .logo-envios-flotante {
    display: none !important;
}

/* ===== FIX BOTÓN ACCEDER - FONDO BLANCO LETRAS NARANJA ===== */
/* Sobreescribe el fondo naranja del tema y del CSS adicional */
button.thm-btn.woocommerce-form-login__submit,
.woocommerce-form-login__submit.thm-btn,
#customer_login .woocommerce-form-login__submit {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #f37021 !important;
    border: 2px solid #f37021 !important;
}

/* Sobreescribe el color del texto en los spans internos */
button.thm-btn.woocommerce-form-login__submit .btn-wrap span,
button.thm-btn.woocommerce-form-login__submit .btn-wrap,
#customer_login .woocommerce-form-login__submit .btn-wrap span,
#customer_login .woocommerce-form-login__submit .btn-wrap {
    color: #f37021 !important;
}

/* Efecto hover igual que REGISTRARSE */
button.thm-btn.woocommerce-form-login__submit:hover,
#customer_login .woocommerce-form-login__submit:hover {
    background: #f37021 !important;
    background-color: #f37021 !important;
    color: #ffffff !important;
}

button.thm-btn.woocommerce-form-login__submit:hover .btn-wrap span,
#customer_login .woocommerce-form-login__submit:hover .btn-wrap span,
#customer_login .woocommerce-form-login__submit:hover .btn-wrap {
    color: #ffffff !important;
}
	
	/* === FIX BOTN ACCEDER MVIL - Igual que Registrarse === */
	@media (max-width: 768px) {
		    button.thm-btn.woocommerce-form-login__submit,
		    .woocommerce-form-login__submit.thm-btn,
		#customer_login .woocommerce-form-login__submit {
			        background: #ffffff !important;
			        background-color: #ffffff !important;
			        border-radius: 50px !important;
			        border: none !important;
			        padding: 12px 30px !important;
			        display: inline-block !important;
			        min-width: 140px !important;
		}
		
		    button.thm-btn.woocommerce-form-login__submit .btn-wrap span,
		    button.thm-btn.woocommerce-form-login__submit .btn-wrap,
		    #customer_login .woocommerce-form-login__submit .btn-wrap span,
		#customer_login .woocommerce-form-login__submit .btn-wrap {
			        color: #f37021 !important;
			        font-weight: 900 !important;
		}
		
		    button.thm-btn.woocommerce-form-login__submit:hover,
		#customer_login .woocommerce-form-login__submit:hover {
			        background: #f37021 !important;
			        background-color: #f37021 !important;
		}
		
		    button.thm-btn.woocommerce-form-login__submit:hover .btn-wrap span,
		    button.thm-btn.woocommerce-form-login__submit:hover .btn-wrap,
		    #customer_login .woocommerce-form-login__submit:hover .btn-wrap span,
		#customer_login .woocommerce-form-login__submit:hover .btn-wrap {
			        color: #ffffff !important;
		}
	}
		}
		}
		}
		}
	}

/* FIX: Selects de Pas/Regin y Provincia en Checkout - texto dentro del campo */
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	    height: 45px !important;
	    display: flex !important;
	    align-items: center !important;
	    border: 1px solid #ccc !important;
	    border-radius: 4px !important;
	    box-sizing: border-box !important;
	    overflow: hidden !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
	    line-height: normal !important;
	    padding-left: 10px !important;
	    padding-right: 30px !important;
	    display: block !important;
	    width: 100% !important;
	    white-space: nowrap !important;
	    overflow: hidden !important;
	    text-overflow: ellipsis !important;
	    position: relative !important;
	    top: auto !important;
	    transform: none !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
	    height: 43px !important;
	    top: 0 !important;
	    right: 5px !important;
	    position: absolute !important;
}

.woocommerce-checkout .select2-container,
.woocommerce-page .select2-container {
	    width: 100% !important;
	    display: block !important;
}

/* Ocultar el select nativo correctamente */
.woocommerce-checkout select.country_select,
.woocommerce-checkout select.state_select,
.woocommerce-page select.country_select,
.woocommerce-page select.state_select {
	    opacity: 0 !important;
	    position: absolute !important;
	    height: 0 !important;
	    width: 0 !important;
	    pointer-events: none !important;
}
}
}
}
}
}

/* FIX CORREGIDO: Select2 en checkout - el tema aplica padding que rompe la altura */
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container--default .select2-selection--single {
	    padding: 0 !important;
	    height: auto !important;
	    min-height: 45px !important;
	    overflow: hidden !important;
	    display: flex !important;
	    align-items: center !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	    padding-top: 10px !important;
	    padding-bottom: 10px !important;
	    padding-left: 12px !important;
	    padding-right: 35px !important;
	    line-height: 1.5 !important;
	    width: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	    height: 100% !important;
	    top: 0 !important;
	    bottom: 0 !important;
	    right: 8px !important;
}
}
}
}

/* FIX DEFINITIVO: Altura select2 checkout - sobreescribir tema Radios y WooCommerce */
body .woocommerce-checkout .select2-container--default .select2-selection--single,
body .woocommerce-page .select2-container--default .select2-selection--single {
	    height: auto !important;
	    min-height: 46px !important;
	    padding: 0 !important;
	    display: flex !important;
	    align-items: center !important;
	    overflow: hidden !important;
	    box-sizing: border-box !important;
}

body .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body .woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	    padding: 12px 35px 12px 12px !important;
	    line-height: 1.4 !important;
	    height: auto !important;
	    width: 100% !important;
	    white-space: nowrap !important;
	    overflow: hidden !important;
	    text-overflow: ellipsis !important;
}

body .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
body .woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	    height: 100% !important;
	    width: 30px !important;
	    top: 0 !important;
	    right: 5px !important;
	    position: absolute !important;
	    display: flex !important;
	    align-items: center !important;
	    justify-content: center !important;
}
}
}
}

/* === TOPBAR: BOTONES PEGADOS A LA DERECHA (POSICIÓN ORIGINAL) === */

/* Ocultar la fecha, quitar margin extra del social */
.header__top-right .date { display: none !important; }
.header__top-right .header__social { margin-left: 0 !important; }
.header__top-right .dg-fs { margin-left: 0 !important; }

/* Escritorio (≥992px): todo pegado a la derecha, juntos */
@media (min-width: 992px) {
  .header__top-info.ul_li_between {
    justify-content: flex-end !important;
  }
  .header__top-info > ul.ul_li {
    display: none !important;
  }
  .header__top-right {
    margin-left: auto !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .header__top-right .login-sign-btn {
    display: inline-flex !important;
  }
}

/* Móvil/Tablet (≤991px): envíos izquierda, redes+botón derecha */
@media (max-width: 991px) {
  /* Quitar padding extra del container en topbar móvil */
  .header__top-info-wrap .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .header__top-info-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 10px !important;
  }
  .header__top-info.ul_li_between {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .header__top-right {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
  }
  /* Envíos gratis: pegado a la izquierda */
  .header__top-right .dg-fs {
    order: 1 !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    margin-right: auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 9px !important;
  }
  .header__top-right .dg-fs a {
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }
  /* Redes sociales: junto al botón, lado derecho */
  .header__top-right .header__social {
    order: 2 !important;
    display: flex !important;
    gap: 4px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  .header__top-right .header__social a { margin-left: 0 !important; font-size: 15px !important; }
  /* Botón ENTRAR/REGISTRARSE: extremo derecho */
  .header__top-right .login-sign-btn {
    order: 3 !important;
    display: inline-flex !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    flex-grow: 0 !important;
  }
  .header__top-right .login-sign-btn a.thm-btn {
    padding: 5px 8px !important;
    font-size: 9px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    max-width: 110px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-self: center !important;
  }
  .header__top-right .login-sign-btn a.thm-btn span.btn-wrap {
    display: inline-block !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    vertical-align: middle !important;
  }
  .header__top-right .login-sign-btn a.thm-btn span.btn-wrap > span:first-child {
    display: inline-block !important;
    max-width: 88px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
}

/* Móvil pequeño (≤575px) */
@media (max-width: 575px) {
  .dg-topbar-email { display: none !important; }
}

/* =====================================================
   MY-ACCOUNT: Ocultar logo flotante Envíos a toda España
   ===================================================== */
.woocommerce-account .logo-envios-flotante {
    display: none !important;
}

/* =====================================================
   TOPBAR EMAIL: Alinear ícono y correo profesionalmente
   ===================================================== */
.dg-topbar-email {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.dg-topbar-email span {
    font-weight: 600 !important;
    color: #e87722 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

.dg-topbar-email i,
.dg-topbar-email svg,
.dg-topbar-email img {
    flex-shrink: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    color: #e87722 !important;
}

.dg-topbar-email a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    color: #e87722 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.dg-topbar-email a:hover {
    color: #c45e0a !important;
    text-decoration: underline !important;
}

/* =====================================================
   LOST-PASSWORD: Ocultar barra Atención al cliente
   ===================================================== */
.woocommerce-lost-password .dg-topbar-email,
.woocommerce-lost-password .dg-force-topbar {
    display: none !important;
}

/* =====================================================
   LOST-PASSWORD: Botón Restablecer contraseña profesional
   ===================================================== */
.woocommerce-lost-password .woocommerce-ResetPassword .woocommerce-Button,
.woocommerce-lost-password form.lost_reset_password button[type="submit"],
.woocommerce-lost-password .woocommerce-Button.button {
    background-color: #e87722 !important;
    background: linear-gradient(135deg, #f59a3c 0%, #e87722 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(232, 119, 34, 0.4) !important;
    width: auto !important;
    min-width: 220px !important;
}

.woocommerce-lost-password .woocommerce-Button.button:hover {
    background: linear-gradient(135deg, #e87722 0%, #c45e0a 100%) !important;
    box-shadow: 0 6px 20px rgba(232, 119, 34, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Ocultar ícono carrito en botón lost-password */
.woocommerce-lost-password .woocommerce-Button.button::before {
    display: none !important;
    content: none !important;
}

/* === OCULTAR TTULO Y REDUCIR ESPACIO - GANGA DE LA SEMANA === */
/* Oculta el título de la página */
.entry-title,
h1.page-title,
.page-title,
h1.entry-title {
    display: none !important;
}
/* Ocultar el ttulo H2 "GANGA DE LA SEMANA" en la pgina */
article#post-5199 > h2 {
	    display: none !important;
}

/* Reducir el espacio en blanco por encima del contenido */
.blog-post-wrap {
	    margin-top: 0px !important;
}

.blog.pb-90 {
	    padding-top: 0px !important;
}

.section.blog,
section.blog {
	    padding-top: 0px !important;
	    margin-top: 0px !important;
}

/* Ocultar ttulo H2 "NOVEDADES" en la pgina /novedades/ */
article#post-5201 > h2 {
	    display: none !important;
} 
.header__cat ul_li *{
	z-index: 999999999;
	pointer-events: all;
}

#post-3924 > h2{
	display: none !important;
}
/* Ocultar titulo en la pagina de metodos de pago */
.METODOS DE PAGOS {
    display: none !important;
}