#_desktop_logo {
	top: 35px;
	right: 120px; }

#_ets_purchase_productadditon {
	padding-top: 150px; }

#ets_purchasetogether { 
	/* padding-top: 175px; */
	padding-top: 43px; }

.wishlist-button-add i {
	color: #0091f2 !important; }

div.cart-grid-right.col-xs-12.col-lg-4 {
	margin-top: 37px !important; }

#ybc-mnf-block {
	display: none; }

@media (max-width: 767px) {
    .blockcart.cart-preview i  {
		width: 12% !important;  }
}

/* Estilo base (escritorio) */
.product-variants .input-color + span.color {
    width: 140px !important;
    height: 140px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    margin-right: 10px;
    transition: all 0.3s ease;
}


/* Tablets (pantallas medianas) */
@media (max-width: 992px) {
    .product-variants .input-color + span.color {
        width: 90px !important;
        height: 90px !important;
        margin-right: 8px;
    }
}


/* Móviles (pantallas pequeñas) */
@media (max-width: 576px) {
    .product-variants .input-color + span.color {
        width: 90px !important;
        height: 90px !important;
        margin-right: 6px;
    }
}

/* Móviles muy pequeños / pantallas estrechas */
@media (max-width: 400px) {
    .product-variants .input-color + span.color {
        width: 65px !important;
        height: 65px !important;
        margin-right: 5px;
    }
}

/* Efecto al seleccionar */
.product-variants input.input-color:checked + span.color,
.product-variants input.input-color:hover + span.color {
    border: 2px solid #2fb5d2; /* Tu color azul corporativo */
    transform: scale(1.1);
}

.shipping-info-box {
  padding: 12px;
  margin: 15px 0;
  background: #f3f7ff;
  border: 1px solid #c9d6ff;
  border-radius: 6px;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 768px) {
  .shipping-info-box {
    font-size: 14px;
    padding: 10px;
  }
}
@media (max-width: 767px) {
    /* Oculta la etiqueta "Quantity" (Cantidad) en pantallas pequeñas (móviles) */
    .product-actions .control-label {
        display: none !important;
    }
}


/* 1. Creamos una capa oscura que cubra toda la web pero esté oculta por defecto */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Color negro con 70% de opacidad */
    z-index: 999; /* Se pone por encima de todo */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    pointer-events: none; /* Para que no impida hacer clicks mientras está invisible */
}

/* 2. Cuando el ratón pasa por encima de un widget, activamos la capa oscura */
body:has(.ybc-widget-item:hover)::before {
    opacity: 1;
    visibility: visible;
}

/* 3. Forzamos a que el widget seleccionado se mantenga por encima de la capa oscura */
.ybc-widget-item:hover {
    position: relative;
    z-index: 1000 !important; /* Un nivel más alto que la capa body::before */
    transform: translateY(-15px) scale(1.05); /* Elevación y zoom */
    transition: all 0.4s ease;
    filter: brightness(1.1); /* Brillo extra para resaltar */
}

/* 4. Opcional: Suavizar la salida del efecto */
.ybc-widget-item {
    transition: all 0.4s ease;
}


@media (max-width: 767px) {
    /* 1. Activamos el efecto al tocar (active) */
    body:has(.ybc-widget-item:active)::before {
        opacity: 1;
        visibility: visible;
    }

    .ybc-widget-item:active {
        position: relative;
        z-index: 1000 !important;
        transform: scale(1.1); /* Un zoom un poco mayor para móviles */
        transition: transform 0.2s ease;
    }

    /* 2. Evitamos que el efecto se quede "pegado" tras el click */
    .ybc-widget-item {
        -webkit-tap-highlight-color: transparent; /* Quita el cuadro azul feo de Android */
    }
}



/* SOLO PARA ESCRITORIO (Pantallas mayores a 992px) */
@media (min-width: 992px) {
    
    /* 1. Contenedor principal: Transparente y centrado */
    .ets_mm_megamenu_content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 45px 0 !important;
        margin-bottom: -53px;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-right: -400px;
    }

    /* 2. Configuración de la cuadrícula para 9 COLUMNAS */
    .mm_menus_ul {
        border: none !important;
        grid-template-columns: repeat(9, auto) !important;
        gap: 15px 10px !important; /* Espaciado entre botones */
        align-items: center !important;
        width: 98% !important; 
        max-width: 1600px !important; 
        margin: 0 auto !important;
    }

    /* 3. Estilo de los botones (Manteniendo fuente 15px) */
    .mm_menus_li {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .mm_menus_li > a {
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.7) !important;
        backdrop-filter: blur(5px);
        color: #0056b3 !important;
        font-weight: 700 !important;
        font-size: 15px !important; 
        text-transform: uppercase;
        text-align: center;
        border-radius: 10px !important;
        padding: 10px 15px !important;
        border: 1px solid rgba(0, 136, 204, 0.2) !important;
        transition: all 0.4s ease;
        min-height: 45px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        white-space: nowrap; 
    }

    /* 4. El Efecto Brillo (Shine) */
    .mm_menus_li > a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
        transform: skewX(-20deg);
    }

    /* 5. Hover: Color corporativo y disparo de brillo */
    .mm_menus_li:hover > a {
        background: #0088cc !important;
        color: #ffffff !important;
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 136, 204, 0.3);
    }

    .mm_menus_li:hover > a::before {
        left: 150%;
        transition: all 0.7s ease;
    }
}

/* AJUSTE PARA MÓVIL - LIMPIEZA TOTAL DE ERRORES */
@media (max-width: 991px) {
    .ets_mm_megamenu_content {
        /* background: #ffffff !important; */
        /* margin-bottom: 0px !important; */
        /* margin-right: 0px !important; */ /* Anulamos el -400px para que no se salga de la pantalla */
        /* padding: 10px 0 !important; */
        /* width: 100% !important; */
        /* display: block !important; */ /* Reset de flexbox */
        /* position: relative !important; */
        /* left: 0 !important; */
    }

    .mm_menus_ul {
        display: block !important; /* Anulamos el grid en móvil */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mm_menus_li {
        width: 100% !important;
        display: block !important;
    }

    .mm_menus_li > a {
        background: transparent !important;
        color: #333 !important; /* Texto oscuro para lectura en blanco */
        font-size: 14px !important;
        padding: 15px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Separación sutil */
        border-radius: 0 !important;
        white-space: normal !important; /* Permitimos que el texto largo baje de línea */
        backdrop-filter: none !important;
        min-height: auto !important;
        justify-content: flex-start !important; /* Alineado a la izquierda como es normal en móviles */
    }

    /* Quitamos el efecto brillo en móvil para evitar parpadeos raros */
    .mm_menus_li > a::before {
        display: none !important;
    }
}


/*SLIDER RARO*/
/* Contenedor principal */
.beer-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.beer-slider img {
  width: 100%;
  display: block;
}

.beer-reveal {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  z-index: 1;
  border-right: 2px solid #fff;
  transition: border-color 0.4s ease; /* Para que la línea desaparezca suave */
}

/* Cuando se desliza, ocultamos la línea */
.beer-reveal.no-line {
  border-right-color: transparent;
}

.beer-reveal img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: block;
  width: auto; 
}

#BeerSlider .beer-reveal img {
    width: var(--main-width);
    max-width: none !important;
}

.beer-range {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  left: 0;
  width: 100%;
  cursor: ew-resize;
  -webkit-appearance: none;
  background: transparent;
  outline: none;
}

/* --- ESTILO DEL PUNTO AZUL (THUMB) --- */
.beer-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #0055ff;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: opacity 0.4s ease;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.beer-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #0055ff;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: opacity 0.4s ease;
}

/* Ocultar punto al deslizar */
.beer-range.grabbing::-webkit-slider-thumb { opacity: 0; }
.beer-range.grabbing::-moz-range-thumb { opacity: 0; }

.slider-info-text {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #0055ff, -1px -1px 0px #0055ff, 1px -1px 0px #0055ff, -1px 1px 0px #0055ff;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 1;
}

.slider-info-text.hidden {
  opacity: 0;
}


/*QUITAR QUICKVIEW*/
/* Contenedor del producto: aseguramos que la imagen no se salga al crecer */
.thumbnail-container {
    overflow: hidden;
}

/* Transición suave para la imagen */
.product-thumbnail img {
    transition: transform 0.5s ease;
}

/* Efecto Zoom al pasar el ratón o tocar */
.product-thumbnail:hover img {
    transform: scale(1.1); /* Ajusta a 1.2 si quieres más zoom */
}

/* Eliminar bloqueos de clics */
/* Esto asegura que cualquier capa invisible que tuviera la lupa no estorbe */
.quick-view {
    pointer-events: none;
}

/*EFECTO LUPA*/
/* Ocultamos la lupa antigua de PrestaShop */
.quick-view, .highlighted-informations {
    display: none !important;
}

/* Contenedor del producto: obligatorio para que la lupa no se salga */
.product-thumbnail {
    overflow: hidden !important;
    position: relative;
    cursor: zoom-in;
}

/* Suavidad en el movimiento */
.product-thumbnail img {
    transition: transform 0.1s ease-out; /* Tiempo corto para que la lupa sea fluida */
    display: block;
    width: 100%;
    height: auto;
}


/*DOBLE TOQUE*/
/* Solo aplicamos estos estilos en móviles */
@media (max-width: 767px) {
    .product-thumbnail {
        overflow: hidden !important;
        /* Permitir el scroll vertical por defecto */
        touch-action: pan-y;
    }

    .product-thumbnail img {
        /* Un pelín más rápido para que no haya lag al seguir el dedo */
        transition: transform 0.1s ease-out;
        will-change: transform;
    }

    /* Ocultamos cualquier icono de lupa o botón flotante que traiga el tema en móvil */
    .quick-view, .cart-button-container, .highlighted-informations {
        display: none !important;
    }
}

/* --- NUEVA CORRECCIÓN DE DESBORDAMIENTO (ESCRITORIO Y MÓVIL) --- */

/* Forzamos que el contenedor del producto corte el zoom en cualquier versión */
.product-miniature, .thumbnail-container {
    overflow: hidden !important;
    position: relative;
    z-index: 1;
}

/* Aseguramos que la descripción (precio/botones) esté siempre por encima de la imagen */
.product-description {
    position: relative !important;
    z-index: 10 !important; 
    background: #ffffff; /* Evita que la imagen se vea por debajo si hay transparencias */
}

/* Ajuste específico para que la imagen no pise elementos inferiores */
.product-thumbnail a {
    display: block;
    overflow: hidden;
}



/* CORRECCIÓN DEFINITIVA DESBORDAMIENTO LUPA */

/* Forzamos a que el artículo completo actúe como un marco cerrado */
article.product-miniature, 
.product-miniature {
    overflow: hidden !important;
    position: relative !important;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* El enlace que envuelve la imagen debe ser el que corte el zoom */
.product-thumbnail,
.product-thumbnail a {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2;
}

/* La imagen debe estar por debajo de la información del producto */
.product-thumbnail img {
    z-index: 1;
}

/* La zona de precio y botones SIEMPRE por encima y con fondo sólido */
.product-description {
    position: relative !important;
    z-index: 10 !important; 
    background: #ffffff !important; /* Evita que la imagen se vea por detrás al ampliar */
    margin-top: auto; /* Empuja la descripción siempre al fondo del contenedor */
}

/* AJUSTE PARA EL BLOG DE ECOWASHER */

/* Estilos para el Blog Ecowasher */
/* --- ESTILOS BLOG ECOWASHER PROFESIONAL --- */

.blog-dynamic-container {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
}

/* Caja de Introducción */
.blog-intro-box {
    background-color: #f0f7fd;
    padding: 25px;
    border-radius: 12px;
    border-left: 6px solid #007bc4;
    margin-bottom: 40px;
}

/* Cabecera: Número y Título alineados */
.blog-step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    margin-top: 30px;
}

.blog-step-number {
    background-color: #007bc4;
    color: #ffffff !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.blog-step-header h3 {
    margin: 0 !important;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

/* Cuerpo del texto alineado con el título */
.blog-step-content {
    padding-left: 53px; 
    margin-bottom: 35px;
}

/* Cajas de Tips/Consejos con colores */
.blog-advice-box {
    padding: 15px 20px;
    border-radius: 10px;
    margin: 20px 0;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Variantes de color para las cajas */
.box-blue { background-color: #e8f4ff; border: 1px solid #d1e9ff; }
.box-yellow { background-color: #fff9e6; border: 1px solid #ffecb3; }
.box-red { background-color: #fff0f0; border: 1px solid #ffdada; }

/* Banner CTA */
.blog-cta-banner {
    background-color: #007bc4;
    color: #ffffff !important;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    margin: 50px 0;
}

.blog-cta-banner h3 { color: #ffffff !important; font-size: 24px; margin-bottom: 15px; }

.blog-cta-button {
    display: inline-block;
    background-color: #7cd320;
    color: #ffffff !important;
    padding: 12px 35px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .blog-step-content { padding-left: 0; }
}

/* --- ESTILOS UNIFICADOS BOTONES SLIDER (ID 112 & 114) --- */

/* 1. LIMPIEZA DE LOS CONTENEDORES */
.msl_layer_front.msl_layer_112,
.msl_layer_front.msl_layer_115,
.msl_layer_front.msl_layer_119,
.msl_layer_front.msl_layer_121,
.msl_layer_front.msl_layer_123,
.msl_layer_front.msl_layer_125,
.msl_layer_front.msl_layer_127,
.msl_layer_front.msl_layer_114,
.msl_layer_112.active,
.msl_layer_115.active,
.msl_layer_119.active,
.msl_layer_121.active,
.msl_layer_123.active,
.msl_layer_125.active,
.msl_layer_127.active,
.msl_layer_114.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. DISEÑO DEL BOTÓN CON EFECTO 3D REALISTA */
.msl_layer_112.mls_layer_type_front_button,
.msl_layer_115.mls_layer_type_front_button,
.msl_layer_119.mls_layer_type_front_button,
.msl_layer_121.mls_layer_type_front_button,
.msl_layer_123.mls_layer_type_front_button,
.msl_layer_125.mls_layer_type_front_button,
.msl_layer_127.mls_layer_type_front_button,
.msl_layer_114.mls_layer_type_front_button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 40px !important; 
    color: #ffffff !important;
    text-decoration: none !important;
    
    /* Fondo con degradado y relieve 3D */
    background: linear-gradient(180deg, #007a7b 0%, #005a5b 100%) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3), /* Brillo superior interno */
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),        /* Sombra inferior interna */
        0 6px 0 #004041,                          /* Grosor del botón */
        0 10px 20px rgba(0, 0, 0, 0.3) !important; /* Sombra al suelo */
    
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    overflow: hidden !important; 
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Forzar estilo del texto y span interior para ambos */
.msl_layer_112.mls_layer_type_front_button a,
.msl_layer_112.mls_layer_type_front_button span,
.msl_layer_115.mls_layer_type_front_button a,
.msl_layer_115.mls_layer_type_front_button span
.msl_layer_119.mls_layer_type_front_button a,
.msl_layer_119.mls_layer_type_front_button span
.msl_layer_121.mls_layer_type_front_button a,
.msl_layer_121.mls_layer_type_front_button span
.msl_layer_123.mls_layer_type_front_button a,
.msl_layer_123.mls_layer_type_front_button span
.msl_layer_125.mls_layer_type_front_button a,
.msl_layer_125.mls_layer_type_front_button span
.msl_layer_127.mls_layer_type_front_button a,
.msl_layer_127.mls_layer_type_front_button span
.msl_layer_114.mls_layer_type_front_button a,
.msl_layer_114.mls_layer_type_front_button span {
    color: #ffffff !important;
    font-size: 17px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-family: inherit;
}

/* 3. EL EFECTO REFLEJO (Brillo que cruza) */
.msl_layer_112.mls_layer_type_front_button::after,
.msl_layer_115.mls_layer_type_front_button::after,
.msl_layer_119.mls_layer_type_front_button::after,
.msl_layer_121.mls_layer_type_front_button::after,
.msl_layer_123.mls_layer_type_front_button::after,
.msl_layer_125.mls_layer_type_front_button::after,
.msl_layer_127.mls_layer_type_front_button::after,
.msl_layer_114.mls_layer_type_front_button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: brilloReflejoUnificado 4s infinite;
}

@keyframes brilloReflejoUnificado {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* 4. EFECTO HOVER Y CLICK (Sensación de pulsado) */
.msl_layer_112.mls_layer_type_front_button:hover,
.msl_layer_115.mls_layer_type_front_button:hover,
.msl_layer_119.mls_layer_type_front_button:hover,
.msl_layer_121.mls_layer_type_front_button:hover,
.msl_layer_123.mls_layer_type_front_button:hover,
.msl_layer_125.mls_layer_type_front_button:hover,
.msl_layer_127.mls_layer_type_front_button:hover,
.msl_layer_114.mls_layer_type_front_button:hover {
    transform: translateY(2px) !important;
    background: linear-gradient(180deg, #008a8b 0%, #006a6b 100%) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #004041, 
        0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.msl_layer_112.mls_layer_type_front_button:active,
.msl_layer_115.mls_layer_type_front_button:active,
.msl_layer_119.mls_layer_type_front_button:active,
.msl_layer_121.mls_layer_type_front_button:active,
.msl_layer_123.mls_layer_type_front_button:active,
.msl_layer_125.mls_layer_type_front_button:active,
.msl_layer_127.mls_layer_type_front_button:active,
.msl_layer_114.mls_layer_type_front_button:active {
    transform: translateY(6px) !important; /* El botón baja hasta el nivel del grosor */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        0 0px 0 #004041, 
        0 2px 5px rgba(0, 0, 0, 0.2) !important;
}



/* --- ESTILOS BOTONES AÑADIR CARRITO --- */
/* 1. DISEÑO DEL BOTÓN "Añadir al Carrito" con Efecto 3D Realista */
.btn.btn-primary.add-to-cart {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 30px !important; /* Ajusta el padding según el texto y el icono */
    color: #ffffff !important;
    
    /* Fondo con degradado de tu color primario */
    background: linear-gradient(180deg, #00a0ff 0%, #0070c0 100%) !important; /* Degradado de tu color #0091f2 */
    
    /* Sombras para el efecto 3D */
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3), /* Brillo en el borde superior interno */
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),        /* Sombra en el borde inferior interno (profundidad) */
        0 6px 0 #005a90,                          /* El "grosor" del botón (efecto bloque) */
        0 10px 20px rgba(0, 0, 0, 0.3) !important; /* Sombra arrojada al suelo */
    
    border-radius: 5px !important; /* Esquinas ligeramente redondeadas para un botón de acción */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    overflow: hidden !important; 
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Borde sutil */
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* Relieve en el texto */
    font-size: 16px !important; /* Tamaño de fuente estándar para botón de añadir */
}

/* 2. EFECTO DE BRILLO (SHIMMER) para el botón de Añadir al Carrito */
.btn.btn-primary.add-to-cart::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3), /* Brillo más sutil */
        transparent
    ) !important;
    animation: brilloCart 3s infinite !important; /* Animación específica para este botón */
}

@keyframes brilloCart {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* 3. EFECTO HOVER Y CLICK (Sensación de pulsado real) */
.btn.btn-primary.add-to-cart:hover {
    transform: translateY(1px) !important; /* Baja un poco al rozarlo */
    background: linear-gradient(180deg, #00b0ff 0%, #0080d0 100%) !important; /* Más brillante al pasar el ratón */
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #005a90, 
        0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn.btn-primary.add-to-cart:active {
    transform: translateY(4px) !important; /* Se "hunde" al hacer clic */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        0 1px 0 #005a90, 
        0 2px 5px rgba(0, 0, 0, 0.2) !important;
}



/* --- ESTILOS BOTONES AÑADIR CARRITO EN CATEGORIAS --- */
/* 1. DISEÑO BASE 3D - Usando ID para máxima prioridad */
#ets_addToCart.btn.btn-primary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 30px !important;
    color: #ffffff !important;
    
    /* Degradado con tu azul primario #0091f2 */
    background: linear-gradient(180deg, #0091f2 0%, #0076c5 100%) !important;
    
    /* Sombras 3D: Brillo superior, sombra interna y grosor inferior */
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4), /* Brillo arista superior */
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),        /* Sombra profundidad interna */
        0 6px 0 #005a96,                          /* El "bloque" o grosor del botón */
        0 10px 20px rgba(0, 0, 0, 0.3) !important; /* Sombra proyectada */
    
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 2. EFECTO REFLEJO (SHIMMER) */
#ets_addToCart.btn.btn-primary::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    ) !important;
    animation: brilloCarrito 4s infinite !important;
}

@keyframes brilloCarrito {
    0% { left: -150%; }
    25% { left: 150%; }
    100% { left: 150%; }
}

/* 3. INTERACCIÓN (HOVER Y CLICK) */
#ets_addToCart.btn.btn-primary:hover {
    transform: translateY(1px) !important; /* Baja ligeramente al tocarlo */
    background: linear-gradient(180deg, #1aa3ff 0%, #0081d7 100%) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #005a96, 
        0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

#ets_addToCart.btn.btn-primary:active {
    transform: translateY(4px) !important; /* Se "hunde" al pulsar */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        0 1px 0 #005a96, 
        0 2px 5px rgba(0, 0, 0, 0.2) !important;
}



/* ================================================================
   ESTILOS 3D AQUA - REDONDEADOS Y CON BRILLO
   ================================================================ */

/* 1. EFECTOS BASE (Con Borde Redondeado) */
.btn.btn-primary, 
.btn.btn-secondary {
    position: relative !important;
    overflow: hidden !important; 
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    /* BORDE REDONDO COMO CATEGORÍAS */
    border-radius: 50px !important; 
    z-index: 1 !important;
}

/* 2. PRIMARY (AZUL) */
.btn.btn-primary {
    background: linear-gradient(180deg, #0091f2 0%, #0076c5 100%) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 4px 0 #005a96 !important;
}

/* 3. SECONDARY (TURQUESA) */
.btn.btn-secondary {
    background: linear-gradient(180deg, #74d2d8 0%, #4fb9c0 100%) !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15),
        0 4px 0 #3a8e94 !important;
}

/* 4. EFECTO REFLEJO (BRILLO VISIBLE) */
.btn.btn-primary::after,
.btn.btn-secondary::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -150% !important;
    width: 60px !important; /* Brillo tipo rayo de luz */
    height: 200% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    ) !important;
    transform: rotate(25deg) !important;
    animation: brilloBotones 4s infinite !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

@keyframes brilloBotones {
    0% { left: -150%; }
    25% { left: 150%; }
    100% { left: 150%; }
}

/* 5. INTERACCIONES */
.btn.btn-primary:hover, .btn.btn-secondary:hover {
    transform: translateY(1px) !important;
    opacity: 0.95;
}

.btn.btn-primary:active, .btn.btn-secondary:active {
    transform: translateY(3px) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}



/* ================================================================
   ELIMINAR BLOQUEO DE CARGA (VELOCIDAD INSTANTÁNEA)
   ================================================================ */

/* Forzamos a que el contenido sea visible aunque el módulo diga que no */
.plw_content {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Anulamos la clase que bloquea la página mientras carga */
.plw_content:not(.plw_page_loaded) {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ocultamos el spinner o icono de carga para que no estorbe */
.plw_loader_wrapper, 
.plw_loading_animation {
    display: none !important;
    visibility: hidden !important;
}
/* ================================================================
   ELIMINAR SPINNER INFINITO (.plw_content_center)
   ================================================================ */

/* Ocultamos el contenedor del spinner y el spinner mismo */
.plw_content_center, 
.plw_loader_wrapper, 
.plw_loading_animation,
.plw_content_center_inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; /* Para que puedas hacer clic a través de él */
}

/* Quitamos cualquier animación de rotación que gaste CPU */
.plw_content_center {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Forzamos que el cuerpo de la web sea visible inmediatamente */
body {
    overflow: auto !important; /* Por si el cargador bloquea el scroll */
}



/* ================================================================
   REPARACIÓN DEL MENÚ - VOLVIENDO A LO QUE FUNCIONA
   ================================================================ */

@media (max-width: 991px) {
    /* 1. Aseguramos el fondo limpio y blanco */
    .mm_menus_ul {
        background: #ffffff !important;
        /* padding-top: 60px !important; */
        border: none !important;
    }

    /* 2. El botón: Volvemos al estilo que te gustaba pero con mejor margen */
    .mm_menus_li > a {
        display: block !important;
        background: #f0f9ff !important; 
        border: 1px solid #d0ebff !important;
        border-radius: 50px !important;
        margin: 8px 15px !important;
        padding: 15px 10px !important; /* Más aire arriba/abajo, menos a los lados */
        color: #0076c0 !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-transform: uppercase;
        font-size: 13px !important;
        box-shadow: 0 4px 8px rgba(0, 145, 242, 0.1) !important;
        position: relative !important;
    }

    /* 3. El brillo tipo "gota" (Solo si no estorba al texto) */
    .mm_menus_li > a::after {
        content: "" !important;
        position: absolute;
        top: 4px;
        left: 25%;
        width: 50%;
        height: 8px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
    }

    /* 4. ARREGLAR EL ICONO AZUL CORTADO (De la Imagen 2) */
    .ybc-menu-toggle {
        display: inline-block !important;
        background: #0091f2 !important;
        border-radius: 50% !important;
        width: 45px !important;
        height: 45px !important;
        padding: 10px !important;
        margin: 10px !important;
        box-shadow: 0 4px 10px rgba(0, 145, 242, 0.3) !important;
        line-height: 1 !important;
    }

    /* Forzamos que las rayitas del icono se vean bien dentro */
    .ybc-menu-toggle .icon-bar {
        background-color: white !important;
        width: 20px !important;
        height: 2px !important;
        display: block !important;
        margin: 3px auto !important;
    }

    /* 5. Ajustar el botón de ATRÁS / CERRAR para que no flote mal */
    .close_menu {
        background: #333 !important;
        color: white !important;
        padding: 10px 20px !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
    }
}



/* ================================================================
   AJUSTE DE MARGEN ESPECÍFICO PARA MÓVIL
   ================================================================ */

@media (max-width: 991px) {
    .ets_mm_megamenu.hook-default {
        clear: none !important;
        float: left !important;
        padding: 20px !important; /* Añadido 'px' para que sea válido */
        margin-top: 50px !important; /* Cambio de -50px a 50px */
    }
}



/* --- RESET PARA EL BOTÓN DE NEWSLETTER (INPUT SUBMIT) --- */

input.btn.btn-primary[name="submitNewsletter"] {
    position: static !important;
    overflow: visible !important;
    background: #0091f2 !important; /* Tu azul sólido original */
    box-shadow: none !important;    /* Eliminamos el efecto 3D */
    transform: none !important;     /* Eliminamos movimientos */
    transition: background 0.2s ease !important;
}

/* Eliminamos cualquier intento de brillo en este botón específico */
input.btn.btn-primary[name="submitNewsletter"]::after,
input.btn.btn-primary[name="submitNewsletter"]::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Efecto hover sencillo para el newsletter */
input.btn.btn-primary[name="submitNewsletter"]:hover {
    background: #0076c5 !important;
    transform: none !important;
    box-shadow: none !important;
}



TITULOS EN MOVIMIENTO PRUEBA DE CODIGO:
.product-miniature .product-title,
.product-miniature h3.product-title,
.product-miniature .product_name {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: left !important;
  height: 24px !important;
  line-height: 24px !important;
  position: relative !important;
  max-width: 100% !important;
}

.product-miniature .product-title a,
.product-miniature h3.product-title a,
.product-miniature .product_name a {
  display: inline-flex !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  padding-left: 35px !important;
  animation: titulo-pelicula 16s linear infinite !important;
  font-size: 0 !important;
  font-weight: 600 !important;
}

/* Primera copia visible del título */
.product-miniature .product-title a::before,
.product-miniature h3.product-title a::before,
.product-miniature .product_name a::before {
  content: attr(title);
  font-size: 15px !important;
  line-height: 24px !important;
  padding-right: 60px !important;
}

/* Segunda copia para que el bucle no haga salto */
.product-miniature .product-title a::after,
.product-miniature h3.product-title a::after,
.product-miniature .product_name a::after {
  content: attr(title);
  font-size: 15px !important;
  line-height: 24px !important;
  padding-right: 60px !important;
}

@keyframes titulo-pelicula {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.product-miniature .product-title a:hover,
.product-miniature h3.product-title a:hover,
.product-miniature .product_name a:hover {
  animation-play-state: paused !important;
}

/* Ocultar solo la etiqueta "out of stock" en PrestaShop 1.7.8 */
.product-flags li.product-flag.out_of_stock,
li.product-flag.out_of_stock {
    display: none !important;
}

/* Mostrar el módulo al entrar en la página y ocultarlo a los 5 segundos */
.ph-social-link-block.displayAfterBodyOpeningTag,
.ph-social-link-block.displayBeforeBodyClosingTag {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: ocultarModuloSocial 0.4s ease forwards;
    animation-delay: 5s;
}

@keyframes ocultarModuloSocial {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}