/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Fuente moderna */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.cbp-hrmenu .cbp-hrsub-tabs-names li a {
  padding: 8px 16px !important;
}

#header-search-btn .fullscreen-search #search_widget {
  margin: 100px auto auto !important;
}

.col.col-auto.col-md.right-nav.text-right {
  box-sizing: content-box !important;
}

@media (min-width: 992px) {
  #mobile-header .m-nav-btn>i {
    font-size: 1.8em !important;
  }
}

/* Recuadro blanco centrado al hacer hover - personalizado*/
#custom-text .ApImage {
  position: relative !important;
}

#custom-text .ApImage::after {
  content: '';
  position: absolute;
  width: 92%;
  /* borde casi al 100%, dejando 4% de margen total (2% a cada lado) */
  height: 92%;
  top: 50%;
  left: 50%;
  border: 2px solid white;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;

  transform: translate(-50%, -50%) scale(0);
  transform-origin: center center;

  transition: opacity 0.4s ease, transform 0.4s ease;
}

#custom-text .ApImage:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#custom-text .ApImage:hover .lazy {
  opacity: 0.9;
}

/************************************Perzonalizacion del tema quitar si se usa otra plantilla del warehouse***************************/
/*******************************Especial Menu*****************************************************************************************/


@media (min-width: 768px) {
  #header .container {
    max-width: 1140px !important;
  }

  .col.col-auto.col-mobile-btn.col-mobile-btn-menu.col-mobile-menu-push {
    position: absolute !important;
    float: left;
    margin-left: 180px;
  }

  /* .input-group height hack ELIMINADO - causaba desalineamiento del botón buscar */

  #mobile-header .m-nav-btn>span {
    display: inline;
    font-size: 15px;
    margin-left: 5px;
  }

  #header .container {
    max-width: 1280px !important;
  }

  .card-block {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }


}

.searchCustom {
  margin-top: -25px;
  margin-right: 20px;
}

.search-widget .search-btn {

  font-size: 1.8em;
  top: 10px;
}

/**menu superior top perzonalizado*/
.menu-personalizado {
  color: white;
  white-space: nowrap;
  font-family: sans-serif;
  font-size: clamp(12px, 2vw, 15px);
  /* máximo 15px */
}

.menu-personalizado .menu-item {
  margin: 0 8px;
  /* más separación entre categorías */
  padding: 2px 4px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.menu-personalizado .menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  /* línea fina */
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.menu-personalizado .menu-item:hover::after {
  transform: scaleX(1);
}

.menu-personalizado a {
  color: white !important;
}

/********************menu de links***************************/
.header-nav .block-iqitlinksmanager ul li a {
  position: relative;
  text-decoration: none;
  color: white !important;
  /* fuerza texto blanco */
}

.header-nav .block-iqitlinksmanager ul li a:hover {
  color: white !important;
  /* mantiene texto blanco en hover */
}

.header-nav .block-iqitlinksmanager ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: white;
  transition: width 0.3s ease;
}

.header-nav .block-iqitlinksmanager ul li a:hover::after {
  width: 100%;
}

/*************************************************************/


.cart-products-count-btn {
  background: #FF7F1E;
  color: #ffffff;
  position: relative;
  top: 2px;
}

/*quitar lña barra superior en la version movil*/
@media (max-width: 768px) {
  .header-nav {
    display: none !important;
  }
}

.tituloMenuMobile {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
}


/* 
 * MODERNIZACION TEMA WAREHOUSE 
 * ----------------------------
 */

/* 
 * MODERNIZACION TEMA WAREHOUSE 
 * ----------------------------
 */

/* 2. ESTILOS DE BOTONES MODERNOS (GLOBAL) */

/* Base para botones */
.btn {
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Efecto Hover General */
.btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Botón Primario (Naranja) */
.btn-primary {
  background: linear-gradient(135deg, #FF7F1E 0%, #ff9f55 100%) !important;
  color: white !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fa730e 0%, #ff8c33 100%) !important;
}

/* Botón Secundario (Oscuro) */
.btn-secondary {
  background: linear-gradient(135deg, #4a4a4a 0%, #2b2b2b 100%) !important;
  color: white !important;
}

/* Override Botones de Acción Extra (Lista deseos / Comparar) SOLO en Página de Producto */
.page-product .col-add-wishlist .btn-iqitwishlist-add,
.page-product .col-add-compare .btn-iqitcompare-add {
  background: linear-gradient(135deg, #8c8c8c 0%, #6b6b6b 100%) !important;
  color: white !important;
  border: none !important;
}

.page-product .col-add-wishlist .btn-iqitwishlist-add:hover,
.page-product .col-add-compare .btn-iqitcompare-add:hover {
  background: linear-gradient(135deg, #a1a1a1 0%, #7d7d7d 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Efecto de brillo al pasar el ratón */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}


/* modificaciones con antigravity */

/* 3. REORDENAMIENTO Y ESTILO BARRA SUPERIOR (MODERNO - TEXTO NARANJA) */

/* --- TÍTULO DEL PRODUCTO --- */
.page-product h1.page-title {
  font-size: 1.8rem !important;
  /* Reducido desde el tamaño enorme por defecto */
  line-height: 1.3;
  margin-bottom: 20px;
}

/* --- AJUSTES DEL BLOQUE DE PRECIO Y REFERENCIA (PÁGINA DE PRODUCTO) --- */

/* Contenedor principal de precios (flexbox para poder reordenar/alinear interior) */
.page-product .product-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fdfdfd;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

/* Modificar la apariencia de la Referencia para que parezca una etiqueta sutil sobre el precio */
.page-product .product-reference {
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #666;
}

.page-product .product-reference label {
  font-weight: 600;
  color: #333;
  margin-right: 5px;
}

.page-product .product-reference span {
  background: #eee;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  letter-spacing: 0.5px;
}

/* Ajustar el tamaño y margen del precio principal para que destaque dentro del recuadro */
.page-product .current-price-value {
  font-size: 2.2rem !important;
  font-weight: 700;
  color: #BF0019 !important;
  line-height: 1;
  margin-bottom: 5px;
  display: inline-block;
}

/* Cambiar texto de "Impuestos incluidos" a "IGIC incl." mediante CSS */
.page-product .tax-shipping-delivery-label {
  font-size: 0;
  /* Oculta el texto original y los espacios */
  color: #888;
  margin-top: 0;
  padding-top: 0;
  line-height: 0;
}

.page-product .tax-shipping-delivery-label::after {
  content: "IGIC incl.";
  /* Inserta el nuevo texto */
  font-size: 0.85rem;
  /* Restaura el tamaño de fuente solo para el pseudo-elemento */
  display: block;
  line-height: 1;
  font-weight: 500;
  color: #888;
  margin-top: -5px;
}

/* --- CUADRO PARA LA DESCRIPCIÓN Y DETALLES DEL PRODUCTO --- */
.page-product #description>.product-description,
.page-product #product-details {
  background: #fdfdfd;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-top: 15px;
}

/* --- TRADUCIR PESTAÑA REVIEWS A ESPAÑOL --- */
.page-product .iqitreviews-title {
  font-size: 0;
}

.page-product .iqitreviews-title::after {
  content: "Valoraciones";
  font-size: 1rem;
}

/* --- BOTONES DE PRODUCTO AGOTADO Y NOTIFICARME --- */
/* Hacer que el botón de añadir al carrito desactivado sea un naranja clarito pero visible */
.product-add-to-cart .add-to-cart[disabled],
.product-add-to-cart .add-to-cart:disabled,
.product-add-to-cart .add-to-cart.disabled {
  background: #fcae72 !important;
  /* Naranja más pálido */
  border-color: #fcae72 !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* Estilo de "cupón de recorte" para Fuera de Stock - RESTAURADO */
#product-availability .product-unavailable,
.product-unavailable,
.badge-danger.product-unavailable {
  background-color: #fff5f5 !important;
  /* Rojo muy flojito (fondo) */
  color: #d9534f !important;
  /* Rojo texto suave */
  border: 2px dashed #d9534f !important;
  /* Borde de recorte (discontinuo) */
  padding: 5px 12px !important;
  border-radius: 4px;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: 2px 2px 0px rgba(217, 83, 79, 0.1);
  /* Efecto relieve suave */
}

/* Estilar el botón de Notificarme usando el contenedor principal para máxima prioridad */
.product-out-of-stock .btn,
.product-out-of-stock .btn-secondary,
input[onclick*="addNotification"],
.js-mailalert-add,
#mailalerts_container button,
#mailalerts_container input[type="submit"],
.mailalerts-add-btn,
input.js-mailalert-add,
.product-add-to-cart .js-mailalert-add,
form.js-mailalert button,
form.js-mailalert input[type="submit"] {
  background: linear-gradient(135deg, #FF7F1E 0%, #ff9f55 100%) !important;
  border-color: #FF7F1E !important;
  color: white !important;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 1 !important;
}

.product-out-of-stock .btn:hover,
.product-out-of-stock .btn-secondary:hover,
input[onclick*="addNotification"]:hover,
.js-mailalert-add:hover,
#mailalerts_container button:hover,
#mailalerts_container input[type="submit"]:hover,
.mailalerts-add-btn:hover,
input.js-mailalert-add:hover,
.product-add-to-cart .js-mailalert-add:hover,
form.js-mailalert button:hover,
form.js-mailalert input[type="submit"]:hover {
  background: linear-gradient(135deg, #fa730e 0%, #ff8c33 100%) !important;
  border-color: #e66a0d !important;
}

/* --- OVERRIDES CHECKOUT (CARRITO) --- */
/* Botón Recargar (Cyan original) -> Gris oscuro moderno */
.cart-summary .btn-info,
.cart-summary .btn-primary,
.checkout-cart-summary .btn-info,
.btn-info,
button[name="update"] {
  background: linear-gradient(135deg, #4a4a4a 0%, #2b2b2b 100%) !important;
  border-color: #4a4a4a !important;
  color: white !important;
}

.cart-summary .btn-info:hover,
.cart-summary .btn-primary:hover,
.checkout-cart-summary .btn-info:hover,
.btn-info:hover,
button[name="update"]:hover {
  background: linear-gradient(135deg, #5c5c5c 0%, #3d3d3d 100%) !important;
  border-color: #5c5c5c !important;
}

/* Enlace "Continuar comprando" (Cyan original) -> Gris oscuro */
a.label i.fa-chevron-left,
a.label,
.cart-grid-body a[href*="index"],
.cart-grid-body a.label,
.cart-grid-actions a,
.checkout-cart-summary a,
#btn_continue_shopping,
.btn-link,
.btn-outline,
.btn-outline-primary,
.btn-outline-info {
  color: #4a4a4a !important;
  font-weight: 600;
  text-decoration: none !important;
}

.cart-grid-actions a,
.checkout-cart-summary a {
  border-color: #4a4a4a !important;
}

a.label:hover,
.cart-grid-body a[href*="index"]:hover,
.cart-grid-body a.label:hover,
.cart-grid-actions a:hover,
.checkout-cart-summary a:hover,
#btn_continue_shopping:hover,
.btn-link:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  color: #2b2b2b !important;
  border-color: #2b2b2b !important;
}

/* Forzar que los bordes de los botones "outline" se vuelvan grises */
a.btn.btn-outline,
a.btn.btn-outline-primary,
a.btn.btn-outline-info {
  border-color: #4a4a4a !important;
}

@media (min-width: 768px) {

  /* 1. Reordenar: Cabecera Principal (Logo) ARRIBA, Barra Enlaces ABAJO */
  #header {
    display: flex !important;
    flex-direction: column !important;
  }

  #header .header-top {
    order: 1 !important;
    z-index: 100 !important;
    position: relative !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Margen recuperado */
    margin-bottom: 10px !important;
  }

  /* ESTILO BASE BARRA SUPERIOR */
  .header-nav {
    order: 2 !important;
    background: #ffffff !important;
    /* Fondo BLANCO */

    /* LINEA SUPERIOR GRIS OSCURO, INFERIOR GRIS CLARO */
    border-top: 1px solid rgba(56, 56, 56, 0.22) !important;
    border-bottom: 1px solid #eaeaea !important;

    padding: 8px 0 !important;
    margin-top: 0 !important;
    color: #FF7F1E !important;
  }

  /* FORZAR TODO EL TEXTO A NARANJA, EXCEPTO SEPARADORES */
  .header-nav a,
  .header-nav span,
  .header-nav p,
  .header-nav div {
    color: #494745 !important;
  }

  /* SEPARADORES (Texto dentro de LI pero fuera de A) EN GRIS */
  .header-nav .block-iqitlinksmanager ul li {
    color: rgba(56, 56, 56, 0.66) !important;
    /* Color de las barritas separadoras */
  }

  /* Asegurar que el enlace de navegación sea color oscuro */
  .header-nav .block-iqitlinksmanager ul li a {
    color: #494745 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }

  /* NEGRITA PARA NOVEDADES Y OFERTAS (Color original destacado) */
  .header-nav a[href*="novedades"],
  .header-nav a[href*="new-products"],
  .header-nav a[href*="ofertas"],
  .header-nav a[href*="prices-drop"] {
    font-weight: 900 !important;
    /* EXTRA NEGRITA */
    color: #FF7F1E !important;
    /* VUELVE A SER NARANJA (como el resto pero más gordo) */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    display: inline-block !important;
  }
}

/* CONFIGURACIÓN DE ENLACES ESPECÍFICA */
.header-nav .block-iqitlinksmanager ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

.header-nav .block-iqitlinksmanager ul li {
  display: inline-block !important;
  padding: 0 !important;
}

.header-nav .block-iqitlinksmanager ul li a {
  padding: 4px 12px !important;
  /* Padding ajustado a letra más pequeña */
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Asegurar transición para enlaces de la izquierda también */
.header-nav a {
  transition: all 0.2s ease !important;
  padding: 4px 8px !important;
  /* Padding para que el hover se vea bien */
  border-radius: 4px !important;
  display: inline-block !important;
  /* Necesario para transform y padding */
}

/* Efecto Hover Moderno (PARA TODOS LOS ENLACES) */
.header-nav a:hover,
.header-nav .block-iqitlinksmanager ul li a:hover {
  background: rgba(255, 127, 30, 0.1) !important;
  color: #e66e10 !important;
  /* Un poco más oscuro al pasar el ratón */
  transform: translateY(-1px) !important;
}

/* Asegurar que el hover cambie también el color del texto hijo si lo hubiera */
.header-nav a:hover *,
.header-nav .block-iqitlinksmanager ul li a:hover * {
  color: #e66e10 !important;
}

/* Eliminar bordes o efectos viejos */
.header-nav .block-iqitlinksmanager ul li a::after {
  display: none !important;
}

/* FORZAR NARANJA EN NOVEDADES Y OFERTAS (fuera del media query para máxima prioridad) */
.header-nav .block-iqitlinksmanager ul li a[href*="novedades"],
.header-nav .block-iqitlinksmanager ul li a[href*="new-products"],
.header-nav .block-iqitlinksmanager ul li a[href*="ofertas"],
.header-nav .block-iqitlinksmanager ul li a[href*="productos-rebajados"],
.header-nav .block-iqitlinksmanager ul li a[href*="prices-drop"] {
  color: #FF7F1E !important;
  font-weight: 900 !important;
}

/* Ocultar Novedades y Ofertas en Móvil y Tablet */
@media (max-width: 991px) {
  .header-nav .block-iqitlinksmanager {
    display: none !important;
  }
}




/* ============================================================
   BOTÓN "TODAS LAS CATEGORÍAS" - Solo escritorio
   Envuelto en @media porque móvil y escritorio comparten clases
   ============================================================ */

@media (min-width: 992px) {

  #search_center_filter_toggler {
    display: none;
  }

  #mobile-header .col-mobile-btn-menu span.m-nav-btn,
  #mobile-header .col-mobile-menu-push span.m-nav-btn {
    background-color: #FF7F1E !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    border: none !important;
  }

  #mobile-header .col-mobile-btn-menu span.m-nav-btn:hover,
  #mobile-header .col-mobile-menu-push span.m-nav-btn:hover {
    background-color: #e66e10 !important;
    color: #ffffff !important;
  }

  /* Icono hamburguesa (fa-bars) y texto dentro → blancos */
  #mobile-header .col-mobile-btn-menu span.m-nav-btn i,
  #mobile-header .col-mobile-btn-menu span.m-nav-btn span,
  #mobile-header .col-mobile-menu-push span.m-nav-btn i,
  #mobile-header .col-mobile-menu-push span.m-nav-btn span {
    color: #ffffff !important;
  }

  /* Alinear texto "Categorías" con el icono */
  #mobile-header .col-mobile-btn-menu span.m-nav-btn>span,
  #mobile-header .col-mobile-menu-push span.m-nav-btn>span {
    position: relative;
    top: -3px;
  }
}


/* Botón "Añadir al carrito" en una sola línea */
.product-miniature .add-to-cart,
.product-miniature .ajax_add_to_cart_button,
.product-miniature button.add-to-cart {
  white-space: nowrap !important;
  font-size: 11px !important;
  padding: 8px 10px !important;
}

/* 4. BUSCADOR VISIBLE EN ESCRITORIO + CENTRADO FLEX */
@media (min-width: 992px) {


  /* CONTENEDOR PRINCIPAL FLUIDO Y FLEXIBLE */
  #header .header-top .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    /* Alinear por la base = buscador baja al nivel del texto */
    position: relative !important;
    width: 100% !important;
    max-width: 1400px !important;
    padding: 0 15px 10px 15px !important;
    /* padding-bottom para dar espacio */
  }

  /* 1. LOGO/MENU IZQUIERDA (Ocupar espacio natural) */
  .header-top>.col-md-2,
  .header-top>.col-lg-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 25% !important;
  }

  /* 2. DERECHA (Carrito/Cuenta) (Ocupar espacio natural) */
  .header-top>.col-md-5,
  /* Ajustar selectores según estructura real si cambia */
  .header-top>.right-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 25% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* 3. BUSCADOR EN EL CENTRO (Ocupar el resto) */
  #header-search-btn,
  .header-search-btn {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    /* Alinear buscador por la base */
    position: static !important;
    margin: 0 20px 0 5px !important;
  }

  /* Ocultar el botón de la lupa - DE FORMA AGRESIVA */
  #mobile-btn-search,
  .search-btn,
  #header-search-btn .search-btn,
  .header-search-btn>a {
    display: none !important;
  }

  /* MOSTRAR EL WIDGET DE BÚSQUEDA */
  #search_widget,
  .search-widget,
  #header-search-btn .fullscreen-search {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 800px !important;
    /* MÁS ANCHO (antes 600px) */
    margin: 25px auto auto auto !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: none !important;
  }

  /* Ajustar contenedor interno si hace falta */
  #header-search-btn .fullscreen-search #search_widget {
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* FORMULARIO: flex para centrar verticalmente el botón */
  #search_widget form,
  .search-widget form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    height: 45px !important;
    /* Igual que el input */
  }

  /* Si está dentro de .fullscreen-search, anular el estilo fullscreen */
  .fullscreen-search {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
  }

  /* ESTILO MODERNIZADO DEL INPUT */
  #search_widget form input[type="text"],
  .search-widget form input[type="text"] {
    background-color: #f8f9fa !important;
    /* Fondo gris muy claro */
    border: 1px solid #e2e6ea !important;
    border-radius: 50px !important;
    /* Bordes totalmente redondos */
    color: #495057 !important;
    height: 45px !important;
    /* Más alto */
    padding: 0 50px 0 20px !important;
    /* Padding para texto y botón */
    width: 100% !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    /* Sombra sutil */
  }

  /* Efecto Focus en el input */
  #search_widget form input[type="text"]:focus,
  .search-widget form input[type="text"]:focus {
    background-color: #ffffff !important;
    border-color: #FF7F1E !important;
    /* Color corporativo al enfocar */
    box-shadow: 0 4px 12px rgba(255, 127, 30, 0.15) !important;
    outline: none !important;
  }

  /* BOTÓN LUPA - centrado vertical con top:50% + translateY */
  #search_widget form button[type="submit"],
  .search-widget form button[type="submit"] {
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 35px !important;
    width: 35px !important;
    flex-shrink: 0 !important;
    background: #FF7F1E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    z-index: 100 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  #search_widget form button[type="submit"]:hover,
  .search-widget form button[type="submit"]:hover {
    background: #e66e10 !important;
    /* Oscurecer al hover */
  }

  #search_widget form button[type="submit"] i,
  .search-widget form button[type="submit"] i {
    font-size: 16px !important;
    /* Ajustar tamaño icono */
  }

  /* Ocultar botón cerrar */
  .search-close {
    display: none !important;
  }
}

/* Limpiar intentos anteriores de títulos inyectados */
.mobile-menu__header::before,
.mobile-menu__scroller::before {
  content: none !important;
  display: none !important;
}

/* Título en el encabezado del menú móvil - GLOBAL */
.mobile-menu__header-wrapper {
  position: relative;
}

.mobile-menu__header-wrapper::before {
  content: "Todas las categorías";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #494745;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
}

/* Iconos para las categorías del menú - GLOBAL */
.mobile-menu__link[href*="337-ordenadores"]::before {
  content: "\f108";
}

.mobile-menu__link[href*="338-integracion"]::before {
  content: "\f2db";
}

.mobile-menu__link[href*="339-movilidad"]::before {
  content: "\f3cd";
}

.mobile-menu__link[href*="340-perifericos"]::before {
  content: "\f11c";
}

.mobile-menu__link[href*="341-oficina"]::before {
  content: "\f1ad";
}

.mobile-menu__link[href*="342-software"]::before {
  content: "\f085";
}

.mobile-menu__link[href*="343-tpv"]::before {
  content: "\f788";
}

.mobile-menu__link[href*="345-imagen-y-sonido"]::before {
  content: "\f26c";
}

.mobile-menu__link[href*="346-gaming"]::before {
  content: "\f11b";
}

.mobile-menu__link[href*="348-videovigilancia"]::before {
  content: "\f03d";
}

.mobile-menu__link[href*="544-hogar"]::before {
  content: "\f015";
}

.mobile-menu__link::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 12px;
  width: 20px;
  display: inline-block;
  text-align: center;
  color: #FF7F1E;
  /* Naranja corporativo */
}


/* Cambios solo para Tablet y Escritorio (Pantallas >= 768px) */
@media (min-width: 768px) {

  /* Ajuste de ancho de la columna del logo */
  .col-mobile-logo {
    flex: 0 0 400px !important;
    max-width: 400px !important;

    /* Color de precio global para listados (Home y Categorías) */
    .product-price,
    .product-price-and-shipping .product-price,
    .products-list .product-price {
      color: #BF0019 !important;
    }
  }

  /* Color de precio global para listados (Home y Categorías) */
  .product-price,
  .product-price-and-shipping .product-price,
  .products-list .product-price {
    color: #BF0019 !important;
  }
}

/* ============================================================
   REDISEÑO DEL FOOTER (DARK TECH MINIMALIST)
   ============================================================ */

/* Contenedor principal del footer */
#footer {
  background-color: #121212 !important;
  /* Gris casi negro profundo */
  color: #f1f1f1 !important;
  /* Texto blanco suave de alta legibilidad */
  border-top: none !important;
}

#footer p,
#footer span,
#footer div,
#footer li {
  color: #e0e0e0 !important;
  /* Forzar el texto interno a leerse siempre bien */
}

#footer-container-main {
  background-color: transparent !important;
  border: none !important;
  padding-top: 50px !important;
  padding-bottom: 30px !important;
}

/* Modificar el color de los bordes o HRs si existen */
#footer hr {
  border-top-color: #2a2a2a !important;
}

/* Títulos de las columnas */
#footer .block-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 25px !important;
  border-bottom: none !important;
  /* Quitar borde por defecto */
  position: relative !important;
  padding-bottom: 10px !important;
}

/* Subrayado naranja sutil en los títulos */
#footer .block-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: #FF7F1E !important;
  /* Naranja corporativo */
  border-radius: 2px;
}

/* Limpiar bloques de enlaces */
#footer .block-contact,
#footer .block-links,
#footer .block-iqitlinksmanager {
  border: none !important;
}

/* Estilo base de los enlaces */
#footer .block-links ul li a,
#footer .block-iqitlinksmanager ul li a,
#footer a {
  color: #f1f1f1 !important;
  font-size: 0.95rem !important;
  padding: 6px 0 !important;
  display: inline-block !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Eliminar viñetas ">" o iconos de lista */
#footer .block-links ul li a::before,
#footer .block-iqitlinksmanager ul li a::before,
#footer .block-links ul li::before,
#footer .block-iqitlinksmanager ul li::before {
  content: none !important;
  display: none !important;
}

/* Efecto Hover Moderno: Color y Desplazamiento */
#footer .block-links ul li a:hover,
#footer .block-iqitlinksmanager ul li a:hover {
  color: #FF7F1E !important;
  /* Color corporativo */
  transform: translateX(8px) !important;
  /* Se mueve un poco a la derecha */
}

/* Ajustes del bloque de contacto */
#footer .contact-rich {
  color: #a0a0a0 !important;
}

#footer .contact-rich strong {
  color: #ffffff !important;
  font-size: 1.1rem;
  margin-bottom: 15px;
  display: inline-block;
  letter-spacing: 0.5px;
}

#footer .contact-rich .icon i {
  color: #FF7F1E !important;
  /* Iconos de contacto en naranja */
  font-size: 1.2rem;
}

#footer .contact-rich .data a,
#footer .contact-rich .data span {
  color: #f1f1f1 !important;
  transition: color 0.3s ease;
  font-size: 0.95rem !important;
}

#footer .contact-rich .data a:hover {
  color: #FF7F1E !important;
}

/* Eliminar texto gris de "Copyright" que pueda estar hardcodeado en spans */
#footer-copyrights span,
#footer-copyrights p {
  color: inherit !important;
}

/* Bloque Footer Copyright (Barra super inferior) */
#footer-copyrights {
  background-color: #080808 !important;
  /* Aún más oscuro para diferenciar la base (casi negro puro) */
  border-top: 1px solid #1a1a1a !important;
  padding: 15px 0 !important;
  color: #666666 !important;
  /* Texto muy sutil */
}

#footer-copyrights p,
#footer-copyrights strong,
#footer-copyrights a {
  color: #777777 !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
}

/* Centrar subrayado móvil si la caja del título centra - Evitamos problemas en Warehouse */
@media (max-width: 767px) {
  #footer .block-title::after {
    left: 15px;
  }
}

/* ============================================================
   ESTILOS DE PESTAÑAS (TABS - ESTILO BOCADILLO / PILL)
   ============================================================ */

/* Contenedor del listado de pestañas */
.product-tabs .nav-tabs,
.nav-tabs {
  border-bottom: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  /* Para móvil: carrusel */
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  -webkit-overflow-scrolling: touch;
}

/* Ocultar barra de scroll en navegadores webkit */
.product-tabs .nav-tabs::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar {
  display: none;
}

/* Opciones individuales */
.product-tabs .nav-tabs .nav-item,
.nav-tabs .nav-item {
  margin-bottom: 0 !important;
  margin-right: 15px !important;
  /* Separación compacta */
  white-space: nowrap !important;
}

/* Botones de pestaña (Estado Inactivo) */
.product-tabs .nav-tabs .nav-link,
.nav-tabs .nav-link {
  background-color: #f1f1f1 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  color: #555 !important;
  transition: all 0.3s ease !important;
  position: relative;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.5px !important;
}

.product-tabs .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
  background-color: #e2e2e2 !important;
  color: #333 !important;
}

/* Pestaña activa: efecto "Pill" naranja y sombra */
.product-tabs .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #FF7F1E 0%, #ff9f55 100%) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(255, 127, 30, 0.3) !important;
}

/* Efecto "Bocadillo": triangulito hacia abajo apuntando a la caja */
.product-tabs .nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #ff9f55 transparent transparent transparent;
  display: block;
}

/* Panel de contenido (el "recuadro" que se abre debajo del bocadillo) */
.product-tabs .tab-content,
.tab-content {
  background-color: #fcfcfc !important;
  border: 1px solid #eaeaea !important;
  border-radius: 12px !important;
  padding: 25px !important;
  margin-top: 5px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02) !important;
}

/* Corrección para asegurar que la flecha de la clase activa apunta directamente al contenedor */
.product-tabs .tabs {
  position: relative;
}

/* ============================================================
   REDISEÑO BLOQUES REASEGURO - MODERN SOFT CARD 
   ============================================================ */

/* Anular la sección para que fluya de nuevo con la web base blanca */
.elementor-element-pj9eqwb {
  background-color: transparent !important;
  padding-top: 30px !important;
  padding-bottom: 50px !important;
  margin-bottom: 0 !important;
  width: auto !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
}

/* Aplicar diseño de Tarjeta Suave (Soft Card) a los recuadros internos */
.elementor-element-pj9eqwb .elementor-text-editor>div {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: default;
}

/* Limpiar fondos residuales grises o bordes de la estructura Elementor */
.elementor-element-pj9eqwb .elementor-column,
.elementor-element-pj9eqwb .elementor-column-wrap,
.elementor-element-pj9eqwb .elementor-widget-wrap,
.elementor-element-pj9eqwb .elementor-widget-container,
.elementor-element-pj9eqwb .elementor-text-editor {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Hover suave interactivo sobre la tarjeta completa */
.elementor-element-pj9eqwb .elementor-text-editor>div:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12) !important;
}

/* Títulos oscuros y limpios */
.elementor-element-pj9eqwb .elementor-text-editor h3,
.elementor-element-pj9eqwb .elementor-text-editor h3 strong {
  color: #222222 !important;
  font-weight: 700 !important;
  letter-spacing: 0px !important;
}

/* Textos secundarios legibles */
.elementor-element-pj9eqwb .elementor-text-editor p {
  color: #666666 !important;
}

/* Transformar SVGs originales a Naranja Corporativo */
.elementor-element-pj9eqwb .elementor-text-editor svg [stroke="#000000"],
.elementor-element-pj9eqwb .elementor-text-editor svg [stroke="#000"] {
  stroke: #FF7F1E !important;
}

.elementor-element-pj9eqwb .elementor-text-editor svg [fill="#000000"],
.elementor-element-pj9eqwb .elementor-text-editor svg [fill="#000"] {
  fill: #FF7F1E !important;
}

/* ============================================================
   CORRECCIÓN SELECTOR DE CANTIDAD (TOUCHSPIN) - FINAL
   ============================================================ */

/* Reducir drásticamente el tamaño de los botones de flecha (Warehouse Touchspin) */
.bootstrap-touchspin .input-group-btn-vertical .btn-touchspin,
.bootstrap-touchspin .btn-touchspin {
  padding: 0 !important;
  /* Sin padding para centrar mejor */
  height: 21px !important;
  /* Ajustado para sumar 41px con el de abajo */
  line-height: normal !important;
  border-radius: 0 6px 0 0 !important;
  box-shadow: none !important;
  background: #f8f9fa !important;
  border: 1px solid #ddd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: -1px !important;
  margin-bottom: 0 !important;
  width: 40px !important;
}

/* Botón de abajo (flecha abajo) */
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  border-radius: 0 0 6px 0 !important;
  /* Redondeado solo abajo/derecha */
  margin-top: -1px !important;
  /* Evitar doble borde */
}

/* Anular efectos Hover de botones principales */
.bootstrap-touchspin .input-group-btn-vertical .btn-touchspin:hover {
  transform: none !important;
  box-shadow: none !important;
  background-color: #eeeeee !important;
}

/* Ajustar el tamaño del icono (flechita) */
.bootstrap-touchspin .input-group-btn-vertical .btn-touchspin i {
  font-size: 10px !important;
  /* Un pelín más grande */
  color: #666 !important;
  margin: 0 !important;
  /* Forzar sin márgenes */
  position: static !important;
  /* Anular posicionamiento absoluto si lo hubiera */
}

/* Ajustar el cuadro del número (input) */
.bootstrap-touchspin input.form-control {
  height: 41px !important;
  /* Altura total igual a la suma de los dos botones (21+21-1) */
  border-radius: 6px 0 0 6px !important;
  background-color: #fcfcfc !important;
  border: 1px solid #ddd !important;
  text-align: center;
  padding: 0 !important;
}

#mobile-header-sticky.stuck-down {
  border-bottom: solid 1px #d8d5d5 !important;
}

/* ============================================================
   INDICADOR DE SCROLL HORIZONTAL EN TABS DE CATEGORÍAS (MÓVIL)
   ============================================================ */

@media (max-width: 991px) {

  /* Contenedor relativo para posicionar el indicador */
  .tabs-links {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Degradado fade a la derecha para indicar que hay más contenido */
  .tabs-links::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
    pointer-events: none;
    z-index: 10;
  }

  /* Flecha animada encima del degradado */
  .tabs-links::before {
    content: '\203A';
    /* › carácter flecha derecha */
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 22px;
    color: #FF7F1E;
    font-weight: 700;
    z-index: 11;
    pointer-events: none;
    animation: scroll-hint-bounce 1.4s ease-in-out infinite;
  }

  @keyframes scroll-hint-bounce {

    0%,
    100% {
      right: 8px;
      opacity: 1;
    }

    50% {
      right: 4px;
      opacity: 0.6;
    }
  }
}