/* =====================================================================
   eptemas · BLACK FRIDAY — negro + amarillo de la marca (#fbdc01) + blanco.
   Todo va bajo html.ept-black-friday: sin esa clase este fichero no hace nada.
   Solo colores, fondos, sombras y decoraciones absolutas: nada cambia de tamaño (CLS).
   Sin JS: todo es CSS. Única animación: el brillo del botón amarillo del menú.
   ===================================================================== */

/* 1 · Barra de campaña: negra, texto blanco, acento amarillo */
html.ept-black-friday{--ept-barra-fondo:#000;--ept-barra-texto:#fff;--ept-barra-acento:#fbdc01}
/* resplandor amarillo detrás del texto + línea amarilla abajo (sombra interior: no suma alto) */
html.ept-black-friday #header .ept-barra{background:radial-gradient(ellipse 40% 140% at 50% 50%,rgba(251,220,1,.2),transparent 70%),#000;box-shadow:inset 0 -2px 0 #fbdc01}
html.ept-black-friday #header .ept-barra__cd{color:#fbdc01}
/* cuenta atrás en «pantalla» amarilla con brillo de neón: el alto extra es sombra, no padding */
html.ept-black-friday #header .ept-barra .ept-cd{background:#fbdc01;color:#000;border-radius:3px;box-shadow:0 -3px 0 #fbdc01,0 3px 0 #fbdc01,0 0 14px rgba(251,220,1,.55);font-weight:700;text-align:center}
/* PC: franjas diagonales negras y amarillas en los dos extremos */
@media (min-width:992px){
  html.ept-black-friday #header .ept-barra{background:repeating-linear-gradient(-45deg,#fbdc01 0 7px,#000 7px 14px) left/48px 100% no-repeat,repeating-linear-gradient(45deg,#fbdc01 0 7px,#000 7px 14px) right/48px 100% no-repeat,radial-gradient(ellipse 40% 140% at 50% 50%,rgba(251,220,1,.2),transparent 70%),#000}
}

/* 2 · Cabecera: negra. Barra superior aún más negra con el teléfono en amarillo */
html.ept-black-friday #header{background:#0b0b0b}
html.ept-black-friday #header .header-nav{background:#000;box-shadow:inset 0 -1px 0 rgba(251,220,1,.3)}
html.ept-black-friday #header .header-nav a:hover,
html.ept-black-friday #header .header-nav .block-iqitlinksmanager-2 a{color:#fbdc01}
/* fila del logo: textura «carbono» muy suave */
html.ept-black-friday #desktop-header .header-top{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px)}
/* cabecera fija al bajar (PC) */
html.ept-black-friday .sticky-desktop-wrapper #desktop-header.stuck-header{background:#0b0b0b}
html.ept-black-friday #iqitmegamenu-wrapper.stuck-menu{background:#000}

/* Logo: el JPG lleva el azul de marca de fondo, así que va sobre una «placa» azul con
   filo amarillo (sombras alrededor de la imagen; la imagen no se toca ni se mueve) */
html.ept-black-friday #header img.logo{border-radius:2px;box-shadow:0 0 0 7px #0a2f87,0 0 0 9px #fbdc01}

/* Buscador: borde amarillo y botón de la lupa amarillo (ya existía, transparente) */
html.ept-black-friday #desktop-header .form-search-control{border-color:#fbdc01}
html.ept-black-friday #desktop-header .search-widget .search-btn{background:#fbdc01;color:#000}

/* Iconos de cuenta y carrito: blancos, amarillos al pasar; contador amarillo */
html.ept-black-friday #desktop-header .header-btn:hover,
html.ept-black-friday #mobile-header .m-nav-btn:hover{color:#fbdc01}
html.ept-black-friday #header .cart-products-count-btn{background:#fbdc01;color:#000}

/* Cinta diagonal «BLACK FRIDAY» en la esquina derecha de la cabecera.
   Solo en pantallas ≥1440 px: ahí el margen lateral está vacío y no tapa nada.
   ::before = la banda (recortada con clip-path), ::after = el texto girado. */
@media (min-width:1440px){
  html.ept-black-friday #header .header-nav::before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:#fbdc01;clip-path:polygon(29px 0,63px 0,120px 57px,120px 91px);pointer-events:none;z-index:3}
  html.ept-black-friday #header .header-nav::after{content:"BLACK FRIDAY";position:absolute;top:31px;right:-9px;width:92px;font:700 9.5px/12px Montserrat,sans-serif;letter-spacing:.08em;color:#000;text-align:center;white-space:nowrap;transform:rotate(45deg);pointer-events:none;z-index:3}
}

/* 3 · Menú: negro con línea amarilla; al pasar o abrir, pestaña amarilla */
html.ept-black-friday #iqitmegamenu-horizontal{background:#000;border-top-color:#1f1f1f;box-shadow:inset 0 -2px 0 #fbdc01}
html.ept-black-friday #iqitmegamenu-horizontal .cbp-horizontal>ul>li>a:hover,
html.ept-black-friday #iqitmegamenu-horizontal .cbp-horizontal>ul>li.cbp-hropen>a{background:#fbdc01;color:#000}
html.ept-black-friday #iqitmegamenu-horizontal .cbp-hrsub-inner{box-shadow:inset 0 3px 0 #fbdc01}
/* Botón «Elige el mejor electrodoméstico»: amarillo con texto negro y un brillo
   que lo cruza cada 7 s (z-index -1: pasa por debajo del texto). Se recorta con clip-path y
   no con overflow:hidden (en un inline-block eso baja la línea base y la barra crece 9 px);
   con foco de teclado no se recorta, para no tapar el contorno de foco. */
html.ept-black-friday #iqitmegamenu-horizontal #cbp-hrmenu-tab-5>a{background:#fbdc01;color:#000}
html.ept-black-friday #iqitmegamenu-horizontal #cbp-hrmenu-tab-5>a:not(:focus-visible){clip-path:inset(0)}
html.ept-black-friday #iqitmegamenu-horizontal #cbp-hrmenu-tab-5>a::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-160%) skewX(-20deg);animation:ept-bf-brillo 7s ease-in-out 2s infinite;pointer-events:none;z-index:-1}
@keyframes ept-bf-brillo{0%{transform:translateX(-160%) skewX(-20deg)}22%,100%{transform:translateX(330%) skewX(-20deg)}}
html.ept-black-friday.ept-sin-anim #iqitmegamenu-horizontal #cbp-hrmenu-tab-5>a::after{animation:none;opacity:0}

/* 4 · Tira de iconos de categorías: negra; iconos amarillos al pasar (ya lo hace la tienda) */
html.ept-black-friday #header .ep-catbar{background:#141414;border-top-color:rgba(251,220,1,.18)}
html.ept-black-friday #header .ep-catbar__label{background:#000;color:#fbdc01;box-shadow:0 8px 16px rgba(0,0,0,.35),inset 0 -2px 0 #fbdc01}
html.ept-black-friday #header .ep-catbar__item:hover .ep-catbar__icon,
html.ept-black-friday #header .ep-catbar__item:focus-visible .ep-catbar__icon{background-color:rgba(251,220,1,.15)}
/* el destacado sigue amarillo, ahora con el icono negro */
html.ept-black-friday #header .ep-catbar__item--feat .ep-catbar__icon svg,
html.ept-black-friday #header .ep-catbar__item--feat .ep-catbar__icon svg *{stroke:#000;color:#000}

/* 5 · Cabecera del MÓVIL: negra con línea amarilla abajo; placa del logo más fina */
html.ept-black-friday #mobile-header,
html.ept-black-friday #mobile-header #mobile-header-sticky{background:#0b0b0b}
html.ept-black-friday #mobile-header #mobile-header-sticky{box-shadow:inset 0 -2px 0 #fbdc01}
@media (max-width:991.98px){
  html.ept-black-friday #header img.logo{box-shadow:0 0 0 4px #0a2f87,0 0 0 6px #fbdc01}
}

/* 6 · «Añadir al carrito» de la ficha: amarillo con texto negro y sombra negra «de cartel»
   (no ocupa sitio); al pasar, negro con texto amarillo. La tienda usa !important en color y
   fondo, así que aquí también hace falta. Los .btn-primary genéricos no se tocan: ya son
   amarillos con texto oscuro y algún módulo podría pintarlos de otro color. */
html.ept-black-friday #product .product-actions .add-to-cart{background:#fbdc01!important;color:#000!important;box-shadow:0 4px 0 #000}
html.ept-black-friday #product .product-actions .add-to-cart:hover{background:#000!important;color:#fbdc01!important;box-shadow:0 4px 0 #fbdc01}

/* 7 · Etiquetas de descuento: negras, % en amarillo (más grande) y «BLACK FRIDAY» pequeño
   encima. Van en posición absoluta sobre la foto: crecer no mueve nada. */
html.ept-black-friday #wrapper .product-flags .product-flag.discount{background:#0b0b0b;color:#fbdc01;font-size:.9rem;border-radius:6px;text-align:center;box-shadow:0 0 0 1.5px #fbdc01,0 3px 8px rgba(0,0,0,.3)}
html.ept-black-friday #wrapper .product-flags .product-flag.discount::before{content:"BLACK FRIDAY";display:block;font-size:8px;letter-spacing:.1em;color:#fff;margin-bottom:3px}
@media (max-width:767px){
  html.ept-black-friday.ept-sin-movil #wrapper .product-flags .product-flag.discount::before{display:none}
}

/* 8 · Portada: títulos de sección en negro con subrayado amarillo grueso
   (más ancho y estirado con transform: el alto en la página no cambia) */
html.ept-black-friday body#index .elementor-widget-heading .elementor-heading-title.page-title,
html.ept-black-friday body#index .ep-sec-title{color:#0b0b0b}
html.ept-black-friday body#index .elementor-widget-heading .elementor-heading-title::after,
html.ept-black-friday body#index .ep-sec-title::after{width:96px;background:#fbdc01;border-radius:2px;transform:scaleY(1.75);box-shadow:4px 2px 0 #0b0b0b}

/* Tarjetas «Compra por categoría»: iconos negros; al pasar, círculo negro e icono amarillo */
html.ept-black-friday body#index .ep-cats-native .elementor-icon{background:#f2f2f2}
html.ept-black-friday body#index .ep-cats-native .elementor-icon i,
html.ept-black-friday body#index .ep-cats-native .ep-cats-feat .elementor-icon i{background-color:#0b0b0b}
html.ept-black-friday body#index .ep-cats-native .ep-cats-feat .elementor-icon{background:#fff2bf}
html.ept-black-friday body#index .ep-cats-native .elementor-widget-icon-box:hover .elementor-icon{background:#0b0b0b}
html.ept-black-friday body#index .ep-cats-native .elementor-widget-icon-box:hover .elementor-icon i{background-color:#fbdc01}
html.ept-black-friday body#index .ep-cats-native .elementor-icon-box-title,
html.ept-black-friday body#index .ep-cats-native .elementor-icon-box-title a{color:#111}
html.ept-black-friday body#index .ep-cats-native .ep-cats-feat .elementor-icon-box-wrapper::after{background:#0b0b0b;color:#fbdc01}

/* Oferta de la semana: fondo negro con filo amarillo (sus textos ya son claros) */
html.ept-black-friday #wrapper .ep-deal--w{background:linear-gradient(135deg,#0b0b0b 0%,#262626 100%);box-shadow:0 12px 34px rgba(0,0,0,.25),inset 0 0 0 2px #fbdc01}
html.ept-black-friday #wrapper .ep-deal--w .ep-deal__badge,
html.ept-black-friday #wrapper .ep-deal--w .ep-deal__off,
html.ept-black-friday #wrapper .ep-deal--w .ep-deal__cta{color:#000}

/* Categorías y búsqueda: la tarjeta del título pasa de azul a negro con filo amarillo.
   En PC (≥1200) lleva «BLACK / FRIDAY» de fondo en dos líneas, a la derecha, solo el contorno
   amarillo tenue: ocupa ~120 px, así que no pisa ni los nombres largos de subcategoría
   («Lavavajillas de libre instalación Electrolux»). isolation crea la capa para que quede
   DETRÁS del título (z-index -1) sin mover nada. */
html.ept-black-friday body#category #js-product-list-header h1.page-title,
html.ept-black-friday body#search #js-product-list-header h1.page-title{background:linear-gradient(135deg,#0b0b0b 0%,#2a2a2a 100%);border-left-color:#fbdc01;box-shadow:0 6px 20px rgba(0,0,0,.18);isolation:isolate}
@media (min-width:1200px){
  html.ept-black-friday body#category #js-product-list-header h1.page-title::after,
  html.ept-black-friday body#search #js-product-list-header h1.page-title::after{content:"BLACK\A FRIDAY";white-space:pre;position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.75rem;line-height:.95;font-weight:700;letter-spacing:.06em;text-align:right;color:transparent;-webkit-text-stroke:1px rgba(251,220,1,.5);pointer-events:none;z-index:-1}
}

/* Subcategorías de la categoría: como las tarjetas de la portada (iconos negros sobre gris;
   al pasar, círculo negro e icono amarillo, que ya pone la tienda) */
html.ept-black-friday body#category .ep-subcats__title{color:#0b0b0b}
html.ept-black-friday body#category .ep-subcats__icon{background:#f2f2f2}
html.ept-black-friday body#category .ep-subcats__icon::before{background-color:#0b0b0b}
html.ept-black-friday body#category .ep-subcats__name,
html.ept-black-friday body#category .ep-subcats__card:hover .ep-subcats__name,
html.ept-black-friday body#category .ep-subcats__logo--texto{color:#111}
html.ept-black-friday body#category .ep-subcats__card:hover,
html.ept-black-friday body#category .ep-subcats__card:focus-visible{border-color:#0b0b0b;box-shadow:0 12px 28px rgba(0,0,0,.14)}
html.ept-black-friday body#category .ep-subcats__card:hover .ep-subcats__icon,
html.ept-black-friday body#category .ep-subcats__card:focus-visible .ep-subcats__icon{background:#0b0b0b}

/* 9 · Pie: negro con línea amarilla arriba; enlaces amarillos al pasar */
html.ept-black-friday #footer{background:#0b0b0b;box-shadow:inset 0 3px 0 #fbdc01}
html.ept-black-friday #footer #footer-copyrights{background:#000}
html.ept-black-friday #footer #footer-container-main a:hover,
html.ept-black-friday #footer .social-links._footer a:hover{color:#fbdc01}