/* =========================================================
   0) FIX DEFINITIVO — Eliminar scroll horizontal
   =========================================================
   100vw incluye el ancho de la barra de scroll vertical,
   lo que causa desbordamiento horizontal en elementos que
   usan width:100vw (hero #carousel, .custom-carousel-wrapper).
   overflow-x:hidden en html+body lo elimina de raíz.
   ========================================================= */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* =========================================================
   1) HEADER LIMPIO (fondo transparente y sin sombras)
   ========================================================= */
#header,
#header .header-top,
#header .header-nav,
#header .header-top .container,
#header .header-banner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Menos separación por debajo de la cabecera */
#header {
  margin-bottom: 8px;
  /* puedes probar 0–12px */
}

/* Barras más finas */
#header .header-top,
#header .header-nav {
  padding: 6px 0;
  /* antes ~16–20px */
  border: 0;
}

/* =========================================================
   2) PROMO BAR (franja negra superior con texto en bucle)
   ========================================================= */
.promo-bar {
  background: #000;
  color: #fff;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  position: relative;
  z-index: 50;
  font-size: 14px;
  letter-spacing: .3px;
  font-weight: 500;
}

.promo-track {
  display: flex;
  gap: 12rem;
  /* separación entre repeticiones */
  width: max-content;
  white-space: nowrap;
  animation: promo-marquee 48s linear infinite;
  /* velocidad (más alto = más lento) */
  will-change: transform;
  padding-left: 100%;
  /* arranca fuera y entra */
}

.promo-track span {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  /* ayuda a la nitidez durante la animación */
}

@keyframes promo-marquee {
  0% {
    transform: translateX(0);
  }

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

/* Accesibilidad: respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .promo-track {
    animation: none;
    padding-left: 0;
  }
}

/* Móvil: promo bar un pelín más baja y texto más pequeño */
@media (max-width:576px) {
  .promo-bar {
    height: 36px;
    line-height: 36px;
    font-size: 12px;
  }
}

/* =========================================================
   3) LOGO (centrado y tamaño controlado)
   ========================================================= */
#_desktop_logo,
#_desktop_logo .logo,
#_desktop_logo img {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* Tamaño del logo (ajusta a tu gusto) */
#_desktop_logo img {
  max-height: 150px;
  /* ⇦ AJUSTA: 160–260px según te guste */
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* =========================================================
   4) MENÚ PRINCIPAL DEBAJO DEL LOGO (desktop)
   ========================================================= */
@media (min-width:992px) {

  /* Apilamos la fila del header y centramos logo + menú */
  #header .header-top .row {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* separación entre logo y menú (era 10px) */
  }

  /* Anulamos anchos de columnas para evitar "empujes" laterales */
  #header .header-top .col-md-2,
  #header .header-top .col-md-10 {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center !important;
  }

  /* El wrapper del menú ocupa todo el ancho disponible */
  #_desktop_top_menu_wrapper {
    width: 100% !important;
    margin-top: 2px;
  }

  /* Menú centrado en una sola fila */
  #_desktop_top_menu .top-menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    /* separación entre categorías */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Estilo de los enlaces del menú */
  #_desktop_top_menu .top-menu>li>a {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #222;
    text-decoration: none;
    padding: 2px 0;
    /* más compacto */
  }

  #_desktop_top_menu .top-menu>li>a:hover {
    color: #bf3a79 !important;
    /* color hover (ajústalo a tu paleta) */
  }
}

/* Versión móvil: se usa el menú hamburguesa del módulo */
@media (max-width:991px) {
  #_desktop_top_menu_wrapper {
    display: none;
  }

  #_mobile_top_menu_wrapper {
    display: block;
  }
}

/* =========================================================
   5) SLIDER A ANCHO COMPLETO (solo en home)
   ========================================================= */
/* Anular margenes/padding arriba para pegar el slider hacia la cabecera */
.page-home #wrapper,
.page-home #wrapper .container,
.page-home main,
.page-home #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hacer el carrusel a 100vw y eliminar el "encajonado" del .container */
.page-home #carousel {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  /* anulamos el margen del .container  */
  margin-right: -50vw;
  width: 100vw;
  /* ocupa todo el ancho de la ventana  */
  max-width: 100vw;
  margin-top: 0 !important;
  /* pegado arriba */
}

/* Aseguramos que todo el interior del slider llene el ancho/alto */
.page-home #carousel .carousel-inner,
.page-home #carousel .carousel-item,
.page-home #carousel .carousel-item figure,
.page-home #carousel img {
  width: 100%;
  display: block;
}

/* Altura del slider (puedes ajustar) */
.page-home #carousel .carousel-inner,
.page-home #carousel .carousel-item,
.page-home #carousel .carousel-item figure {
  height: 750px;
  /* ⇦ AJUSTA: 500–800px según tus fotos */
}

.page-home #carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Evitar scroll horizontal por el 100vw del carrusel */
.page-home #wrapper {
  overflow-x: hidden;
}

/* Si notas un minihueco en desktop, puedes "subir" un poco el slider */
@media (min-width:992px) {
  .page-home #carousel {
    margin-top: -6px;
  }

  /* prueba -4 / -10 si lo quieres más pegado */
}

/* Ocultar flechas del carrusel en toda la web */
#carousel .left.carousel-control,
#carousel .right.carousel-control,
#carousel .icon-prev,
#carousel .icon-next {
  display: none !important;
}

/* (Opcional) ocultar también los puntitos/indicadores */
#carousel .carousel-indicators {
  display: none !important;
}

#wrapper {
  padding-top: 0 !important;
  background: transparent !important;
  /* o blanco si prefieres */
}





/* DISENIO PRODUCTOS */

/* =========================================================
   6) DISEÑO PRODUCTOS - MISMO TAMAÑO PARA TODAS LAS IMÁGENES
   ========================================================= */

/* Contenedor de imagen del producto */
.product-thumbnail,
.thumbnail-container {
  position: relative;
  width: 100%;
  padding-bottom: 125%;
  /* Proporción 2:3 (ajusta según prefieras) */
  overflow: hidden;
  background: #f8f8f8;
  /* color de fondo mientras carga */
}

/* Imagen del producto */
.product-thumbnail img,
.thumbnail-container img,
.js-qv-product-cover,
.product-cover img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* Cubre todo el espacio sin deformar */
  object-position: center center !important;
  /* Centra la imagen */
}

/* Asegurar altura uniforme para las tarjetas de producto */
.product-miniature,
.product-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Información del producto con altura consistente */
.product-description {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.thumbnail-container {
  max-height: 600px;
  padding-bottom: 0 !important;
  height: 500px;
  max-width: 400px;
  /* 500 × 0.8 = 400 (proporción 4:5) */
}



/* Ocultar el enlace "Todos los productos" */
.all-product-link,
.allproducts-link,
a[href*="todos-los-productos"] {
  display: none !important;
}

/* Centrar el banner de la home */
.page-home a.banner {
  display: block;
  /* el <a> ocupa todo el ancho */
  text-align: center;
  /* centra el contenido inline */
}

.page-home a.banner img {
  display: block;
  margin: 0 auto !important;
  /* centra el <img> sí o sí */
  height: auto;
  max-width: 100%;
}

/* 1) Mueve el banner hacia abajo y acércalo al carrusel */
.page-home a.banner {
  display: block;
  margin: 40px auto 8px;
  /* ↑ espacio arriba | ↓ espacio abajo */
}

/* 2) Reduce el hueco que añade el contenedor del carrusel */
.page-home .custom-carousel-wrapper {
  margin-top: 0 !important;
  /* algunos temas meten 40px arriba */
  padding-top: 12px !important;
  /* en tu captura se veían 60px */
}

@media (min-width: 992px) {

  /* Baja el menú "visualmente" sin empujar el slider */
  #_desktop_top_menu_wrapper,
  #_desktop_top_menu {
    transform: translateY(22px);
  }

}

/* =========================================================
   7) CORRECCIÓN TAMAÑO IMAGEN PRINCIPAL (Ficha de producto y Quickview)
   ========================================================= */
#product .images-container .product-cover,
.quickview .product-cover,
#quickview-modal .product-cover,
.modal-body .product-cover {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  /* Separación con las miniaturas de abajo */
}

#product .images-container .product-cover img,
#product .images-container .product-cover .js-qv-product-cover,
.quickview .product-cover img,
.quickview .product-cover .js-qv-product-cover,
#quickview-modal .product-cover img,
#quickview-modal .product-cover .js-qv-product-cover,
.modal-body .product-cover img,
.modal-body .product-cover .js-qv-product-cover {
  position: relative !important;
  /* Anula el absolute que la hacía pequeña o invisible */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   8) COLORES FICHA DE PRODUCTO (Precio, Botón y Pestañas)
   ========================================================= */

/* 1. Color del Precio */
.product-prices .current-price span {
  color: #bf3a79 !important;
}

/* 2. Color del botón Añadir al carrito */
.product-add-to-cart .add-to-cart {
  background-color: #bf3a79 !important;
  border-color: #bf3a79 !important;
}

/* Color del botón al pasar el ratón por encima (opcional) */
.product-add-to-cart .add-to-cart:hover {
  background-color: #000000 !important;
  /* Lo pongo negro, cámbialo si quieres */
  border-color: #000000 !important;
}

/* 3. Color de la pestaña "Detalles del producto" activa y su línea inferior */
.tabs .nav-tabs .nav-link.active {
  color: #bf3a79 !important;
  border-bottom: 3px solid #bf3a79 !important;
}

/* Color de las pestañas cuando pasas el ratón por encima */
.tabs .nav-tabs .nav-link:hover {
  color: #bf3a79 !important;
}

/* =========================================================
   1) ESTRUCTURA DE CABECERA (Izquierda y Derecha)
   ========================================================= */
@media (min-width: 992px) {
  #header .header-nav {
    position: absolute;
    top: 38px;
    /* Ajusta la altura respecto al logo */
    width: 100%;
    z-index: 100;
    background: transparent !important;
  }

  #header .header-nav .container {
    max-width: 100% !important;
    width: 100%;
    padding: 0 40px;
  }

  #header .header-nav .hidden-sm-down {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
  }

  /* Anulamos columnas de PrestaShop */
  #header .header-nav .col-md-5,
  #header .header-nav .right-nav {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0;
    margin: 0;
  }
}


/* =========================================================
   2) BUSCADOR MINIMALISTA (Estilo MaliaShop, lupa a la DERECHA)
   ========================================================= */

/* Contenedor del buscador */
#_desktop_search {
  width: 400px;
  margin: 0;
  position: relative !important;
  overflow: visible !important;
}

/* El formulario necesita position relative para anclar la lupa */
#search_widget form {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  /* block, no flex, para que absolute funcione bien */
}

/* ---- CAMPO DE TEXTO ---- */
#search_widget form input[type=text],
#search_widget form input[type=search] {
  border: none !important;
  border-bottom: 1px solid #c4c4c4 !important;
  background: transparent !important;
  padding: 8px 40px 8px 0 !important;
  /* derecha: hueco para la lupa */
  font-size: 16px !important;
  color: #333 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  height: 45px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  display: block !important;
}

/* Línea rosa al hacer clic */
#search_widget form input[type=text]:focus,
#search_widget form input[type=search]:focus {
  border-bottom: 1.5px solid #bf3a79 !important;
}

/* Quitar flechas/decoraciones del navegador */
#search_widget form input::-webkit-search-decoration,
#search_widget form input::-webkit-search-cancel-button,
#search_widget form input::-webkit-search-results-button,
#search_widget form input::-webkit-search-results-decoration,
#search_widget form input::-webkit-inner-spin-button,
#search_widget form input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  display: none !important;
}

/* ---- LUPA: posición absoluta a la DERECHA ---- */
#search_widget form>i.material-icons.search,
#search_widget form>.material-icons.search,
#search_widget form i.material-icons.search,
#search_widget .material-icons.search {
  position: absolute !important;
  left: auto !important;
  /* anula cualquier left del tema */
  right: 0 !important;
  /* la pega a la derecha */
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 26px !important;
  color: #4a4a4a !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: color 0.3s ease !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 1 !important;
}

/* Efecto rosa al pasar el ratón por la lupa o el buscador */
#search_widget form:hover>i.material-icons.search,
#search_widget form:hover i.material-icons.search,
#search_widget form i.material-icons.search:hover {
  color: #bf3a79 !important;
}

/* Si existe un botón submit (algunos temas lo tienen), también lo arreglamos */
#search_widget form button[type=submit] {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 35px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   3) ICONOS DEL HEADER (Estilo MaliaShop)
   =========================================================
   ORDEN DESEADO (izq → dcha):
   [📞 650 91 81 50]  [✉ correo]  [👤 usuario]  [🛒 carrito + badge]
   ========================================================= */

/* ---------- RESETEO GENERAL DE LOS 3 BLOQUES ---------- */
#_desktop_contact_link,
#_desktop_user_info,
#_desktop_cart {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}

#_desktop_contact_link #contact-link,
#_desktop_user_info .user-info,
#_desktop_cart .blockcart {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Forzar el blockcart y su .header a alinearse como los demás iconos */
#_desktop_cart .blockcart,
#_desktop_cart .blockcart .header {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 28px !important;
  line-height: 0 !important;
}

#_desktop_cart {
  display: flex !important;
  align-items: center !important;
  height: 28px !important;
}

/* ---------- OCULTAR MATERIAL ICONS DE PRESTASHOP ---------- */
#_desktop_user_info .user-info i.material-icons,
#_desktop_user_info .user-info a i,
#_desktop_cart .blockcart i.material-icons,
#_desktop_cart .blockcart i.material-icons.shopping-cart,
#_desktop_contact_link i.material-icons,
#_desktop_contact_link #contact-link i {
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
  visibility: hidden !important;
}

/* Ocultar TODOS los textos (Carrito, Iniciar sesión, etc.) */
#_desktop_cart .blockcart .hidden-sm-down,
#_desktop_cart .blockcart span.hidden-sm-down,
#_desktop_user_info .user-info a span.hidden-sm-down,
#_desktop_contact_link a span {
  display: none !important;
  font-size: 0 !important;
}

/* ---------- ORDEN DE LOS ICONOS (correo → usuario → carrito) ---------- */
@media (min-width: 992px) {
  #header .header-nav .right-nav {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
  }

  /* Teléfono primero (pseudo-elemento, order 0) */
  #header .header-nav .right-nav::before {
    content: "650 91 81 50";
    /* ☎ + número */
    order: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 12px !important;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%234a4a4a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>') left center/24px 24px no-repeat !important;
    padding-left: 32px !important;
  }

  /* Correo = 1er icono */
  #_desktop_contact_link {
    order: 1 !important;
  }

  /* Usuario = 2º icono */
  #_desktop_user_info {
    order: 2 !important;
  }

  /* Carrito = 3er icono (último) */
  #_desktop_cart {
    order: 3 !important;
  }
}

/* ---------- CONTACTO / CORREO (Sobre) ---------- */
#_desktop_contact_link #contact-link a,
#_desktop_contact_link a {
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%234a4a4a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>') center/contain no-repeat !important;
  transition: all 0.3s ease !important;
  vertical-align: middle !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#_desktop_contact_link #contact-link a:hover,
#_desktop_contact_link a:hover {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23bf3a79" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>') !important;
}

/* ---------- MI CUENTA (Persona) ---------- */
/* Evitar icono duplicado ocultando el enlace de cerrar sesión del header */
#_desktop_user_info .user-info a.logout,
#_mobile_user_info .user-info a.logout {
  display: none !important;
}

#_desktop_user_info .user-info a,
#_desktop_user_info a {
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%234a4a4a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>') center/contain no-repeat !important;
  transition: all 0.3s ease !important;
  vertical-align: middle !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#_desktop_user_info .user-info a:hover,
#_desktop_user_info a:hover {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23bf3a79" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>') !important;
}

/* ---------- CARRITO DE COMPRA (carrito, no bolsa) ---------- */
#_desktop_cart .blockcart .header,
#_desktop_cart .blockcart a {
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%234a4a4a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>') center/contain no-repeat !important;
  transition: all 0.3s ease !important;
  vertical-align: middle !important;
  line-height: 0 !important;
  overflow: visible !important;
}

#_desktop_cart .blockcart .header:hover,
#_desktop_cart .blockcart a:hover {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23bf3a79" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>') !important;
}

/* Badge/bolita con el número de productos ENCIMA del carrito */
#_desktop_cart .cart-products-count {
  font-size: 10px !important;
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  left: auto !important;
  background-color: #bf3a79 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  z-index: 20 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   4) RESULTADOS DEL BUSCADOR (Autocompletado / Dropdown)
   =========================================================
   NOTA: El archivo custom.js del tema debe tener permisos 644.
   Si devuelve 403, el autocompletado no funcionará.
   ========================================================= */

/* --- Overflow visible en TODOS los contenedores padre --- */
#header,
#header .header-top,
#header .header-nav,
#header .header-nav .container,
#header .header-nav .hidden-sm-down,
#header .header-nav .col-md-5,
#header .header-nav .col-md-7,
#_desktop_search,
#search_widget,
#search_widget form {
  overflow: visible !important;
}

/* --- El contenedor del dropdown (jQuery UI Autocomplete) --- */
ul.ui-autocomplete,
.ui-autocomplete,
.ui-menu,
#search_widget .ui-autocomplete,
#ui-id-1 {
  position: absolute !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  max-height: 350px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-width: 400px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Permitir que JS lo oculte (sin display: block !important) */
.ui-autocomplete {
  display: none;
}

/* --- Cada resultado (li) --- */
ul.ui-autocomplete li,
.ui-autocomplete .ui-menu-item {
  display: block !important;
  visibility: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f2f2f2 !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  list-style: none !important;
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
  background: #fff !important;
}

/* --- Wrapper/enlace dentro de cada li --- */
ul.ui-autocomplete li a,
ul.ui-autocomplete li div,
ul.ui-autocomplete li .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  color: #333 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- Hover en los resultados --- */
ul.ui-autocomplete li:hover,
ul.ui-autocomplete li:hover a,
ul.ui-autocomplete li:hover .ui-menu-item-wrapper,
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus {
  background-color: #fdf2f7 !important;
  color: #333 !important;
}

/* --- Imagen del producto en resultados --- */
ul.ui-autocomplete li img,
.ui-autocomplete .ui-menu-item img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border-radius: 3px !important;
  display: block !important;
  visibility: visible !important;
}

/* --- Nombre del producto --- */
ul.ui-autocomplete li .product-name,
ul.ui-autocomplete li span,
.ui-autocomplete .ui-menu-item span {
  font-size: 13px !important;
  color: #333 !important;
  display: inline !important;
  visibility: visible !important;
}

/* --- Precio del producto --- */
ul.ui-autocomplete li .price,
ul.ui-autocomplete li .product-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #bf3a79 !important;
  margin-left: 4px !important;
  display: inline !important;
  visibility: visible !important;
}

/* =========================================================
   8) ETIQUETAS DE PRODUCTO (Nuevo, Fuera de stock, etc.)
   Estilo compacto inspirado en MaliaShop
   ========================================================= */

/* Contenedor de flags */
.product-flags,
ul.product-flags,
.js-product-flags {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 10 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: auto !important;
  max-width: 70% !important;
  right: auto !important;
}

/* Todas las etiquetas: estilo base compacto (tipo MaliaShop) */
.product-flags .product-flag,
.product-flags li.product-flag,
.product-miniature .product-flags .product-flag,
.product-miniature .product-flag,
.product-miniature .product-flags li.product-flag {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border-radius: 2px !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* NUEVO → Rosa de marca */
.product-flags .product-flag.new,
.product-flags li.product-flag.new,
.product-miniature .product-flag.new {
  background-color: #bf3a79 !important;
}

/* FUERA DE STOCK / AGOTADO → Burdeos oscuro */
.product-flags .product-flag.out_of_stock,
.product-flags li.product-flag.out_of_stock,
.product-miniature .product-flag.out_of_stock,
.product-flags .product-flag[class*="out-of-stock"],
.product-flags .product-flag[class*="agotado"] {
  background-color: #7a1a3e !important;
}

/* DESCUENTO / REBAJA → Rosa oscuro */
.product-flags .product-flag.discount,
.product-flags .product-flag.on-sale,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
  background-color: #bf3a79 !important;
}

/* PACK → gris oscuro elegante */
.product-flags .product-flag.pack,
.product-flags li.product-flag.pack {
  background-color: #4a4a4a !important;
}

/* =========================================================
   9) COLORES DE BOTONES GLOBALES (cyan -> rosa)
   ========================================================= */

/* Botones principales (Suscribirse, Iniciar Sesión, Finalizar compra, Enviar, Seleccionar Archivo, etc.) */
.btn-primary,
.btn-info,
.btn-secondary,
.checkout.cart-detailed-actions .btn-primary,
#submit-login,
#submit-account,
.form-control-valign .btn-primary,
button.btn-primary[type="submit"],
.contact-form .btn-primary,
.block_newsletter form input[type="submit"],
.cart-detailed-actions .btn-primary {
  background-color: #bf3a79 !important;
  border-color: #bf3a79 !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

/* Botón de "Seleccionar archivo" (Contacto): Negro por defecto, Rosa al hover */
.custom-file button,
.btn-tertiary,
.custom-file-input::-webkit-file-upload-button,
.custom-file-input::file-selector-button,
.bootstrap-filestyle .btn-default,
.input-group .input-group-btn>.btn {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

.custom-file button:hover,
.btn-tertiary:hover,
.custom-file-input::-webkit-file-upload-button:hover,
.custom-file-input::file-selector-button:hover,
.bootstrap-filestyle .btn-default:hover,
.input-group .input-group-btn>.btn:hover {
  background-color: #bf3a79 !important;
  border-color: #bf3a79 !important;
  color: #fff !important;
}

/* Solo para el color del texto (como precios o enlaces específicos) */
.cart-item .product-price,
.product-price,
#blockcart-modal .product-name,
#blockcart-modal .cart-products-count,
.quick-view {
  background-color: transparent !important;
  color: #000 !important;
  border-color: transparent !important;
}

.cart-item .product-price:hover,
.product-price:hover,
#blockcart-modal .product-name:hover,
#blockcart-modal .cart-products-count:hover,
.quick-view:hover {
  color: #bf3a79 !important;
}

/* Hover de botones principales: rosa un poco más oscuro o negro */
.btn-primary:hover,
.btn-info:hover,
.btn-secondary:hover,
.checkout.cart-detailed-actions .btn-primary:hover,
#submit-login:hover,
#submit-account:hover,
.form-control-valign .btn-primary:hover,
button.btn-primary[type="submit"]:hover,
.contact-form .btn-primary:hover,
.block_newsletter form input[type="submit"]:hover,
.cart-detailed-actions .btn-primary:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
}

/* Textos específicos (copyright, email, login) que antes eran azules, los pasamos a negro por defecto */
#footer .text-sm-center a,
.block-contact a[href^="mailto:"],
.contact-rich a[href^="mailto:"],
.forgot-password a,
.no-account a {
  color: #000 !important;
}

/* Enlaces generales: repetimos la regla para asegurar que el hover rosa aplique en toda la web a lo que no sea negro */
a:hover,
#footer a:hover,
.footer-container li a:hover,
.block-contact a:hover,
#wrapper .links a:hover,
a:active,
a:focus,
.active>a,
a.active {
  color: #bf3a79 !important;
}

/* Excepciones (para no romper otras webs/cosas) */
#header .header-nav a,
#_desktop_top_menu .top-menu a {
  color: inherit;
}

/* Checkbox o selectores visuales que también sean cyan */
.custom-checkbox input[type="checkbox"]:checked+span {
  background-color: #bf3a79 !important;
}

.custom-radio input[type="radio"]:checked+span {
  background-color: #bf3a79 !important;
}

/* =========================================================
   9.5) MI CUENTA Y LISTAS DE DESEOS (Links e Iconos)
   ========================================================= */

/* Textos e iconos en negro por defecto */
body#my-account #content .links a span.link-item,
body#my-account #content .links a i,
body#my-account .page-footer a,
body#my-account .text-sm-center a,
body[id*="wishlist"] a,
body[id*="wishlist"] .page-footer a,
body[id*="wishlist"] .text-sm-center a,
body[id*="wishlist"] .wishlist-list-title,
body[id*="wishlist"] .wishlist-add-to-cart {
  color: #000000 !important;
  transition: color 0.3s ease !important;
}

/* Hover en rosa */
body#my-account #content .links a:hover span.link-item,
body#my-account #content .links a:hover i,
body#my-account .page-footer a:hover,
body#my-account .text-sm-center a:hover,
body[id*="wishlist"] a:hover,
body[id*="wishlist"] .page-footer a:hover,
body[id*="wishlist"] .text-sm-center a:hover,
body[id*="wishlist"] .wishlist-list-title:hover,
body[id*="wishlist"] .wishlist-add-to-cart:hover {
  color: #bf3a79 !important;
}

/* Forzar SVG icons (si hubiera en la wishlist como el de "Crear nueva lista") */
body[id*="wishlist"] i,
body[id*="wishlist"] .material-icons {
  color: #000000 !important;
  transition: color 0.3s ease !important;
}

body[id*="wishlist"] a:hover i,
body[id*="wishlist"] a:hover .material-icons,
body#my-account #content .links a:hover i,
body#my-account #content .links a:hover .material-icons {
  color: #bf3a79 !important;
}

/* =========================================================
   10) VERSIÓN MÓVIL — Logo, Iconos, Búsqueda, Hero, Menú
   ========================================================= */
@media (max-width: 991px) {

  /* ---------- BARRA PRINCIPAL DEL HEADER MÓVIL ---------- */
  /* Forzar que el header global crezca con el logo gigante y no monte el contenido de abajo */
  #header,
  #header .header-nav,
  .header-nav .container {
    height: auto !important;
    min-height: 120px !important;
  }

  #mobile-header-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    width: 100% !important;
    gap: 0 !important;
    background: #fff !important;
    position: relative !important;
    z-index: 1000 !important;
    min-height: 100px !important;
  }

  /* Hamburguesa (izquierda) */
  #mobile-header-bar #menu-icon {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  #mobile-header-bar #menu-icon i {
    font-size: 30px !important;
    color: #333 !important;
    line-height: 1 !important;
  }

  /* Logo (centro) */
  #mobile-header-bar #_mobile_logo,
  #mobile-header-bar .top-logo {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 6px !important;
    min-width: 0 !important;
  }

  #_mobile_logo img,
  #mobile-header-bar .top-logo img,
  #_mobile_logo img,
  .top-logo img {
    max-height: 95px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Contenedor de iconos (derecha) */
  .mobile-header-icons {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---------- ICONO LUPA (búsqueda) ---------- */
  #mobile-search-toggle {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #mobile-search-toggle svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #333 !important;
    transition: stroke 0.3s ease !important;
    display: block !important;
  }

  #mobile-search-toggle:active svg {
    stroke: #bf3a79 !important;
  }

  /* ---------- OCULTAR MATERIAL ICONS DEL TEMA EN MÓVIL ---------- */
  #_mobile_user_info .user-info i.material-icons,
  #_mobile_user_info .user-info a i,
  #_mobile_cart .blockcart i.material-icons,
  #_mobile_cart .blockcart i.material-icons.shopping-cart {
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    visibility: hidden !important;
  }

  /* Ocultar textos en los iconos móviles */
  #_mobile_user_info .user-info a span,
  #_mobile_user_info .user-info a .hidden-sm-down,
  #_mobile_cart .blockcart .hidden-sm-down,
  #_mobile_cart .blockcart span.hidden-sm-down {
    display: none !important;
    font-size: 0 !important;
  }

  /* ---------- ICONO USUARIO MÓVIL (SVG persona) ---------- */
  #_mobile_user_info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_mobile_user_info .user-info {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_mobile_user_info .user-info a,
  #_mobile_user_info a {
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>') center/contain no-repeat !important;
    line-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---------- ICONO CARRITO MÓVIL (SVG carrito) ---------- */
  #_mobile_cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_mobile_cart .blockcart,
  #_mobile_cart .blockcart .header {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
    line-height: 0 !important;
  }

  #_mobile_cart .blockcart .header,
  #_mobile_cart .blockcart a {
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    display: block !important;
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>') center/contain no-repeat !important;
    line-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Badge/bolita del carrito móvil */
  #_mobile_cart .cart-products-count {
    font-size: 9px !important;
    position: absolute !important;
    top: -5px !important;
    right: -6px !important;
    left: auto !important;
    background-color: #bf3a79 !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 20 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* ---------- PANEL DE BÚSQUEDA MÓVIL ---------- */
  #mobile-search-panel {
    width: 100% !important;
    padding: 10px 15px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    z-index: 999 !important;
  }

  #mobile-search-panel form {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f9f9f9 !important;
  }

  #mobile-search-panel form input[type="text"] {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    color: #333 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #mobile-search-panel form input::placeholder {
    color: #999 !important;
  }

  #mobile-search-panel form button {
    flex: 0 0 auto !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mobile-search-panel form button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #555 !important;
  }

  /* ---------- MENÚ HAMBURGUESA (overlay limpio) ---------- */
  #mobile_top_menu_wrapper {
    position: relative !important;
    z-index: 998 !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  /* Ocultar el header top completamente en móvil para evitar que se vea
     detrás del menú desplegable u otros elementos */
  #header .header-top {
    position: relative !important;
    z-index: 997 !important;
    background: #fff !important;
  }

  /* ---------- SLIDER/HERO VISIBLE EN MÓVIL ---------- */
  .page-home #carousel {
    display: block;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 260px;
    min-height: 260px;
    background-color: transparent;
  }

  .page-home #carousel .carousel-inner {
    display: block;
    visibility: visible;
    opacity: 1;
    height: 260px;
    min-height: 260px;
    overflow: hidden;
  }

  .page-home #carousel .carousel-item {
    display: none;
    visibility: visible;
    opacity: 1;
  }

  .page-home #carousel .carousel-item.active {
    display: block;
  }

  .page-home #carousel .carousel-item,
  .page-home #carousel .carousel-item figure {
    height: 260px;
    min-height: 260px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .page-home #carousel img {
    width: 100vw;
    height: 100%;
    max-width: 100vw;
    min-height: 260px;
    object-fit: cover;
    object-position: center top;
    /* Enfocar la parte de arriba de la foto (las manos) y recortar la franja gris de abajo */
    display: block;
  }

  /* El carousel no debe estar oculto por hidden-sm-down u otras clases del tema */
  #carousel.hidden-sm-down,
  .page-home #carousel.hidden-sm-down {
    display: block;
    visibility: visible;
  }

  /* Otras fotos importantes de la home (Banners) */
  .page-home .banner,
  .page-home .banner img {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: auto;
  }

  /* Evitar que el wrapper oculte contenido */
  .page-home #wrapper {
    overflow-x: hidden;
  }
}

/* Cierra el @media (max-width: 991px) */

/* =========================================================
   9) PAGINACIÓN (Quitar el color azul y dejarlo negro)
   ========================================================= */
.pagination .current a,
.pagination .current a.js-search-link {
  color: #000000 !important;
}

.pagination a:hover,
.pagination a.js-search-link:hover,
.pagination .current a:hover,
.pagination .current a.js-search-link:hover {
  color: #bf3a79 !important;
}

/* =========================================================
   11) QUICK VIEW Y MINIATURAS (THUMBNAILS)
   ========================================================= */
/* Asegurar que la imagen principal del producto sea visible en Vista Rápida */
.quickview .product-cover,
.quickview .product-cover img,
#quickview-modal .product-cover,
#quickview-modal .product-cover img,
.modal-body .product-cover,
.modal-body .product-cover img {
  display: block !important;
  max-width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Borde negro al seleccionar miniatura (en vez de azul/cyan) */
.product-images .thumb.selected,
.product-images .thumb:hover,
.quickview .product-images .thumb.selected,
.quickview .product-images .thumb:hover {
  border-color: #000000 !important;
}

/* =========================================================
   12) ICONO CERRAR SESIÓN
   ========================================================= */
/* Contenedor flexible para añadir el icono con ::before */
body#my-account .text-sm-center a[href*="mylogout"],
body#my-account .page-footer a[href*="mylogout"],
body[id*="wishlist"] .text-sm-center a[href*="mylogout"],
body[id*="wishlist"] .page-footer a[href*="mylogout"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Icono principal (negro) */
body#my-account .text-sm-center a[href*="mylogout"]::before,
body#my-account .page-footer a[href*="mylogout"]::before,
body[id*="wishlist"] .text-sm-center a[href*="mylogout"]::before,
body[id*="wishlist"] .page-footer a[href*="mylogout"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

/* Icono hover (rosa) */
body#my-account .text-sm-center a[href*="mylogout"]:hover::before,
body#my-account .page-footer a[href*="mylogout"]:hover::before,
body[id*="wishlist"] .text-sm-center a[href*="mylogout"]:hover::before,
body[id*="wishlist"] .page-footer a[href*="mylogout"]:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23bf3a79" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>');
}

/* =========================================================
   13) OCULTAR PESTAÑA DETALLES DEL PRODUCTO
   ========================================================= */
/* Oculta tanto el enlace de la pestaña (y su contenedor li si lo hay) como su panel de contenido */
.tabs .nav-tabs .nav-link[href="#product-details"],
.tabs .nav-tabs .nav-item:has(.nav-link[href="#product-details"]),
.product-tabs .nav-link[href="#product-details"],
#product-details {
  display: none !important;
}

/* =========================================================
   14) OCULTAR MÓDULO DE COMENTARIOS / RESEÑAS
   ========================================================= */
/* Oculta los botones de escribir reseña, la sección de comentarios abajo y las estrellas si las hubiera */
#product-comments-list-header,
#product-comments-list,
.product-comments-additional-info,
.product-actions .product-comments-additional-info,
#empty-product-comment,
.empty-product-comment,
#product-comments-list-footer,
.product-comments-list-footer,
.post-product-comment,
a.post-product-comment,
button.post-product-comment,
.product-comments-list,
#product-quickview-comments,
.comments-note,
.grade-stars,
div[id^="product-comments"],
div[class*="product-comment"] {
  display: none !important;
}

/* =========================================================
   15) ANTI-ROBO DE IMÁGENES (Prevenir arrastrar y seleccionar)
   ========================================================= */
img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}