/**
 * Overrides visuales de Ekohunters para el módulo Catalog Search de
 * Superplus PRO. Se carga DESPUÉS del CSS del módulo comercial
 * (sp-product-filter-css como dependencia), así que estas reglas ganan
 * por orden de carga. Se mantienen los mismos !important que ya traía
 * el CSS fuente (necesarios para vencer la especificidad de WooCommerce
 * core en el grid de productos); no se añaden !important nuevos.
 *
 * Portado desde la copia custom (plugins/superplus-for-woocommerce-pro
 * antiguo), assets/css/sp-filter.css.
 */

/* Variables propias del CSS portado (declaradas aquí porque el módulo
   comercial no las define; sin esto, los var(--spwsv_color_filtros_*, fallback)
   de más abajo caían siempre al fallback gris en vez de al negro real). */
:root {
  --spwsv_color_filtros_blanco: #ffffff;
  --spwsv_color_filtros_negro: #000000;
  --spwsv_color_filtros_gris_oscuro: #333333;
  --spwsv_color_filtros_gris_medio: #666666;
  --spwsv_color_filtros_gris_claro: #eee;
  --spwsv_color_filtros_acento: #cccccc;
  --spwsv_color_filtros_color_texto: var(--spwsv_color_filtros_gris_oscuro);
  --spwsv_color_filtros_color_svg: #666666;
}

/* ─────────────────────────────────────────────
   1. Lista de productos / grid (catálogo y buscador)
   ───────────────────────────────────────────── */

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-wrapper--lateral .sp-filter-products-container,
.sp-filter-main .sp-filter-wrapper--lateral .sp-filter-products-container {
  width: calc(100% - 48px - 320px);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-wrapper--fixed .sp-filter-products-container,
.sp-filter-main .sp-filter-wrapper--fixed .sp-filter-products-container {
  width: 100%;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-products-container ul.products,
.sp-filter-main .sp-filter-products-container ul.products {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px !important;
  clear: unset !important;
  align-items: stretch !important;
}

.sp-filter-search-ajax.sp-filter-search-ajax .woocommerce ul.products::after,
.sp-filter-main .woocommerce ul.products::after,
.sp-filter-search-ajax.sp-filter-search-ajax .woocommerce ul.products::before,
.sp-filter-main .woocommerce ul.products::before {
  content: none !important;
}

@media (max-width: 1200px) {
  .sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid,
  .sp-filter-main #sp-filter-desktop-grid {
    display: none !important;
  }
  .sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-products-container ul.products,
  .sp-filter-main .sp-filter-products-container ul.products {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 767px) {
  .sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-products-container ul.products,
  .sp-filter-main .sp-filter-products-container ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* Selector de número de columnas (desktop) */
.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid,
.sp-filter-main #sp-filter-desktop-grid {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid .sp-filter-desktop-grid-btn,
.sp-filter-main #sp-filter-desktop-grid .sp-filter-desktop-grid-btn {
  padding: 4px;
  background-color: white;
  border: none;
  transition: invert 0.2s;
  display: flex;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid .sp-filter-desktop-grid-btn:hover,
.sp-filter-main #sp-filter-desktop-grid .sp-filter-desktop-grid-btn:hover {
  background-color: white;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid .sp-filter-desktop-grid-btn.active,
.sp-filter-main #sp-filter-desktop-grid .sp-filter-desktop-grid-btn.active {
  filter: invert(1);
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-desktop-grid #sp-filter-desktop-grid-inner,
.sp-filter-main #sp-filter-desktop-grid #sp-filter-desktop-grid-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─────────────────────────────────────────────
   2. Cards de producto: imagen cuadrada, badge exclusividad,
   animación de entrada, precio/título, ocultar botón carrito del loop.
   ───────────────────────────────────────────── */

.sp-filter-products-container ul.products li.product {
  position: relative;
}

.sp-filter-products-container ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
}

.sp-filter-products-container ul.products li.product .sp-exclusividad-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.sp-filter-products-container ul.products li.product .sp-exclusividad-badge .badge-text {
  font-size: 10px;
  padding: 5px 12px;
}

.sp-filter-products-container ul.products li.product.sp-card-enter {
  animation: sp_cse_card_fade_up 0.4s ease both;
}

@keyframes sp_cse_card_fade_up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-filter-products-container ul.products li.product > * {
  margin-top: 4px;
  margin-bottom: 4px;
}

.sp-filter-products-container ul.products li.product p.price,
.sp-filter-products-container ul.products li.product span.price {
  color: var(--spwsv_color_filtros_negro, #1a1a1a);
  font-size: 18px;
}

.sp-filter-products-container ul.products li.product h2.woocommerce-loop-product__title,
.sp-filter-products-container ul.products li.product .woocommerce-loop-product__title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--spwsv_color_filtros_negro, #1a1a1a);
  line-height: 1.3;
  padding: 0;
  margin: 0;
}

@media (max-width: 1024px) {
  .sp-filter-products-container ul.products li.product h2.woocommerce-loop-product__title,
  .sp-filter-products-container ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .sp-filter-products-container ul.products li.product h2.woocommerce-loop-product__title,
  .sp-filter-products-container ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
  }
  .sp-filter-products-container ul.products li.product p.price, .sp-filter-products-container ul.products li.product span.price{
    font-size: 14px;
  }
}

.sp-filter-products-container ul.products li.product .button.add_to_cart_button,
.sp-filter-products-container ul.products li.product a.added_to_cart.wc-forward {
  display: none !important;
}

.sp-filter-search-ajax.sp-filter-search-ajax .woocommerce ul.products li.product,
.sp-filter-main .woocommerce ul.products li.product,
.sp-filter-search-ajax.sp-filter-search-ajax .woocommerce-page ul.products li.product,
.sp-filter-main .woocommerce-page ul.products li.product {
  float: none;
  width: 100%;
  margin: 0;
}

/* ─────────────────────────────────────────────
   3. Botón "Filtro" (abre el sidebar como drawer/modal)
   ───────────────────────────────────────────── */

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil,
.sp-filter-main #sp_btn_filtrar_movil {
  z-index: 10;
  bottom: 30px;
  left: 30px;
  position: fixed;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 0;
  border: 2px solid var(--e-global-color-accent);
  background-color: var(--e-global-color-accent);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil:hover,
.sp-filter-main #sp_btn_filtrar_movil:hover {
  background-color: #ffffff;
  color: var(--e-global-color-accent);
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil svg,
.sp-filter-main #sp_btn_filtrar_movil svg {
  color: #ffffff !important;
  transition: color 0.3s;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil:hover svg,
.sp-filter-main #sp_btn_filtrar_movil:hover svg {
  color: var(--e-global-color-accent) !important;
}

/* El SVG de #sp_btn_filtrar_movil (catálogo) trae fill="white" fijo en
   cada <path> (atributo HTML, no currentColor), así que `color` en CSS
   no lo afecta. Se sobreescribe directamente el fill por atributo. */
.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil svg path,
.sp-filter-main #sp_btn_filtrar_movil svg path {
  fill: #ffffff !important;
  transition: fill 0.3s;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil:hover svg path,
.sp-filter-main #sp_btn_filtrar_movil:hover svg path {
  fill: var(--e-global-color-accent) !important;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_btn_filtrar_movil.animate-filter:after,
.sp-filter-main #sp_btn_filtrar_movil.animate-filter:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top: 0%;
  position: absolute;
  transform: scale(0);
  z-index: -1;
  background-color: var(--e-global-color-accent);
  animation-delay: 0.2s;
  transition: all 1s;
  border: 2px solid var(--e-global-color-accent);
  animation-name: sp_cse_scale_filter;
  animation-duration: 8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes sp_cse_scale_filter {
  0% { transform: scale(0); }
  10% { transform: scale(2); }
  20% { transform: scale(0); }
  30% { transform: scale(2); }
  40% { transform: scale(0); }
  50% { transform: scale(2); }
  60% { transform: scale(0); }
  100% { transform: scale(0); }
}

.sp-filter-main.sp-filter-wrapper--lateral #sp_btn_filtrar_movil,
.sp-filter-main.sp-filter-wrapper--lateral .menu-close,
.sp-filter-main.sp-filter-wrapper--lateral .sp-filter-overlay {
  display: none;
}

.sp-filter-search-ajax__form button.sp-filter-search-ajax__filter-button.sp-filter-sidebar-lateral {
  display: none !important;
}

.sp-filter-no-products #sp_btn_filtrar_movil {
  display: none;
}

/* Botones "Aplicar filtros" / "Restablecer" al fondo del sidebar. Sin el
   width:100% del wrapper base, el botón hereda el ancho de un ancestro
   no acotado (el modal completo) en vez del sidebar (320px). */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-apply-wrapper,
.sp-filter-main .sp-filter-apply-wrapper {
  width: 100%;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 12px;
  padding: 8px 0 4px;
  flex-shrink: 0;
  background-color: var(--spwsv_color_filtros_blanco);
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-apply,
.sp-filter-main #sp-filter-apply {
  width: 100%;
  padding: 12px 20px;
  background-color: var(--spwsv_color_filtros_negro);
  color: var(--spwsv_color_filtros_blanco);
  border: 2px solid var(--spwsv_color_filtros_negro);
  border-radius: 0;
  font-weight: 600;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-apply:hover,
.sp-filter-main #sp-filter-apply:hover {
  background-color: var(--spwsv_color_filtros_blanco);
  color: var(--spwsv_color_filtros_negro);
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-reset,
.sp-filter-main #sp-filter-reset {
  width: 100%;
  padding: 12px 20px;
  background-color: var(--spwsv_color_filtros_blanco);
  color: var(--spwsv_color_filtros_negro);
  border: 2px solid var(--spwsv_color_filtros_negro);
  border-radius: 8px;
  font-weight: 600;
  margin-top: 10px;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp-filter-reset:hover,
.sp-filter-main #sp-filter-reset:hover {
  background-color: var(--spwsv_color_filtros_negro);
  color: var(--spwsv_color_filtros_blanco);
}

.sp-filter-search-ajax.sp-filter-search-ajax .contenedor_filtros_superior,
.sp-filter-main .contenedor_filtros_superior {
  margin-bottom: 32px;
  display: flex;
  gap: 60px;
  justify-content: space-between;
}

.sp-filter-search-ajax.sp-filter-search-ajax #sp_contenedor_etiquetas,
.sp-filter-main #sp_contenedor_etiquetas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

/* ─────────────────────────────────────────────
   4. Sidebar de filtros (drawer/lateral, overlay, header, listas, select2)
   ───────────────────────────────────────────── */

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar,
.sp-filter-main .sp-filter-sidebar {
  width: 320px;
  max-width: 640px;
  background-color: var(--spwsv_color_filtros_blanco, #fff);
  padding: 15px;
  transition: left 0.5s, visibility 0.5s;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral,
.sp-filter-main .sp-filter-sidebar--lateral {
  width: 320px;
  max-width: 640px;
  position: relative;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  left: auto;
  visibility: visible;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-apply-wrapper,
.sp-filter-main .sp-filter-apply-wrapper {
  /* position:fixed respecto al viewport, con el mismo max-width que el
     sidebar (320px, ver .sp-filter-sidebar más arriba): no depende de
     containing blocks (sticky no lo es de forma fiable), ni de flujo
     flex/flex-shrink, ni de que este wrapper sea hermano exacto de
     .sp-filter-sidebar-scroll en el HTML real. Siempre queda fijo al
     fondo del viewport, con el ancho del sidebar y nunca más ancho. */
  position: fixed;
  left: 0;
  bottom: 0;
  width:min(100%, 380px);
  box-sizing: border-box;
  padding: 30px;
  z-index: 10;

  /* Visibilidad controlada explícitamente (ver hooks.js), NO heredada
     de la visibility del sidebar padre: eso es lo que causaba el
     parpadeo (aparecía antes de que acabase de entrar el modal y
     desaparecía después de que ya se viera cerrado). Por defecto
     oculto; cada contexto decide cuándo se muestra más abajo. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* Contexto 1: sidebar lateral fijo en desktop -> siempre visible,
   sin animación (no hay modal que esperar).
   NOTA: mismos prefijos de selector que la regla "oculta" de arriba
   (.sp-filter-search-ajax.sp-filter-search-ajax / .sp-filter-main),
   para igualar especificidad (3 clases) y así SÍ ganar por venir después. */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral .sp-filter-apply-wrapper,
.sp-filter-main .sp-filter-sidebar--lateral .sp-filter-apply-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Contexto 2: drawer/modal en móvil -> visible SOLO mientras el
   propio botón lleva la clase .sp-apply-visible, que hooks.js añade
   y quita sincronizado con la apertura/cierre real del modal.
   Misma razón: igualamos especificidad (3 clases) para ganarle a la
   regla "oculta" de arriba. */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-apply-wrapper.sp-apply-visible,
.sp-filter-main .sp-filter-apply-wrapper.sp-apply-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease 0.15s, visibility 0s linear 0.15s;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-apply-placeholder,
.sp-filter-main .sp-filter-apply-placeholder {
  display: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-placeholder,
.sp-filter-main .sp-filter-sidebar-placeholder {
  flex-shrink: 0;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-scroll,
.sp-filter-main .sp-filter-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Reserva espacio para el .sp-filter-apply-wrapper, que ahora es
     absolute y ya no ocupa sitio en el flujo flex de este contenedor. */
  padding-bottom: 76px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-scroll::-webkit-scrollbar,
.sp-filter-main .sp-filter-sidebar-scroll::-webkit-scrollbar {
  display: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--fixed,
.sp-filter-main .sp-filter-sidebar--fixed {
  /* width: min(100%, 380px) en vez de width:100% + max-width por separado:
     una sola declaración, sin depender de que un max-width gane por
     especificidad/orden de carga sobre otra regla. En mobile real
     (viewport < 380px) el resultado es 100% de forma natural; en
     desktop/tablet nunca pasa de 380px, así que cualquier hijo con
     width:100% (el botón "Aplicar Filtros", etc.) queda acotado a esa
     misma columna en cualquier modo, sin números mágicos por breakpoint. */
  width: min(100%, 380px);
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  border-radius: 0;
  left: -100%;
  padding: 20px;
  box-sizing: border-box;
  z-index: 99999;
  visibility: hidden;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-overlay,
.sp-filter-main .sp-filter-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-overlay.active,
.sp-filter-main .sp-filter-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header,
.sp-filter-main .sp-filter-sidebar-header {
  font-size: 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 12px 0px;
  margin: 24px 0px;
  margin-top: 0px;
  border-bottom: 1px solid var(--spwsv_color_filtros_negro, #1a1a1a);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-wrapper--fixed .sp-filter-sidebar-header,
.sp-filter-main .sp-filter-wrapper--fixed .sp-filter-sidebar-header {
  margin-top: 32px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header .menu-title,
.sp-filter-main .sp-filter-sidebar-header .menu-title {
  flex-grow: 1;
  text-align: center;
  font-size: 20px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header .menu-close,
.sp-filter-main .sp-filter-sidebar-header .menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  display: flex;
  transition: color 0.3s;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header .menu-close:hover,
.sp-filter-main .sp-filter-sidebar-header .menu-close:hover {
  background: transparent;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header .menu-close span.txt_cerrar,
.sp-filter-main .sp-filter-sidebar-header .menu-close span.txt_cerrar {
  font-weight: 400;
  font-size: 16px;
  color: var(--spwsv_color_filtros_color_texto, #333);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar-header .menu-close span.icono_cerrar,
.sp-filter-main .sp-filter-sidebar-header .menu-close span.icono_cerrar {
  font-weight: 300;
  line-height: 0;
  font-size: 28px;
  color: var(--spwsv_color_filtros_gris_oscuro, #666);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--fixed,
.sp-filter-main .sp-filter-sidebar--fixed {
  left: -100%;
  visibility: hidden;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--fixed.active,
.sp-filter-main .sp-filter-sidebar--fixed.active {
  left: 0;
  visibility: visible;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--fixed .sp-filter-sidebar-scroll,
.sp-filter-main .sp-filter-sidebar--fixed .sp-filter-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--fixed .sp-filter-sidebar-scroll::-webkit-scrollbar,
.sp-filter-main .sp-filter-sidebar--fixed .sp-filter-sidebar-scroll::-webkit-scrollbar {
  display: none;
}

body.sp-filter-active {
  overflow-y: hidden;
}

body.sp-search-active {
  overflow: hidden;
}

@media (max-width: 767px) {
  .sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar,
  .sp-filter-main .sp-filter-sidebar {
    padding: 10px;
  }
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label,
.sp-filter-main .sp-filter-sidebar .sp-category-item label,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item,
.sp-filter-main .sp-filter-sidebar .sp-category-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar ul,
.sp-filter-main .sp-filter-sidebar ul {
  list-style-type: none;
  padding-inline-start: 32px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item > ul,
.sp-filter-main .sp-filter-sidebar .sp-filter-item > ul {
  padding-inline-start: 16px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item,
.sp-filter-main .sp-filter-sidebar .sp-filter-item {
  margin-bottom: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--spwsv_color_filtros_gris_claro, #e5e7eb);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item:first-of-type,
.sp-filter-main .sp-filter-sidebar .sp-filter-item:first-of-type {
  padding-top: 0;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item p,
.sp-filter-main .sp-filter-sidebar .sp-filter-item p {
  margin-block-end: 0.5em;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item p strong,
.sp-filter-main .sp-filter-sidebar .sp-filter-item p strong {
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item p.toggle,
.sp-filter-main .sp-filter-sidebar .sp-filter-item p.toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item p.toggle:before,
.sp-filter-main .sp-filter-sidebar .sp-filter-item p.toggle:before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  margin-left: auto;
  margin-right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--spwsv_color_filtros_gris_oscuro, #666);
  border-bottom: 2px solid var(--spwsv_color_filtros_gris_oscuro, #666);
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-filter-item p.toggle.active:before,
.sp-filter-main .sp-filter-sidebar .sp-filter-item p.toggle.active:before {
  transform: rotate(-135deg);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .ocultar-campos,
.sp-filter-main .sp-filter-sidebar .ocultar-campos {
  display: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral .sp-filter-sidebar-header,
.sp-filter-main .sp-filter-sidebar--lateral .sp-filter-sidebar-header {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 14px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--spwsv_color_filtros_gris_claro, #e5e7eb);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral .sp-filter-sidebar-header .menu-title,
.sp-filter-main .sp-filter-sidebar--lateral .sp-filter-sidebar-header .menu-title {
  flex-grow: 0;
  text-align: left;
  font-size: 1.15em;
  font-weight: 600;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar--lateral .sp-filter-sidebar-header .menu-close,
.sp-filter-main .sp-filter-sidebar--lateral .sp-filter-sidebar-header .menu-close {
  display: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item,
.sp-filter-main .sp-filter-sidebar .sp-category-item,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item,
.sp-filter-main .sp-filter-sidebar .sp-brand-item {
  gap: 4px;
}

/* Select "Ordenar por" */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar select,
.sp-filter-main .sp-filter-sidebar select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--spwsv_color_filtros_gris_claro, #e5e7eb);
  border-radius: 6px;
  background-color: var(--spwsv_color_filtros_blanco, #fff);
  color: var(--spwsv_color_filtros_color_texto, #333);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar select:hover,
.sp-filter-main .sp-filter-sidebar select:hover,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar select:focus,
.sp-filter-main .sp-filter-sidebar select:focus {
  border-color: var(--spwsv_color_filtros_gris_oscuro, #666);
  outline: none;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar select option,
.sp-filter-main .sp-filter-sidebar select option {
  background-color: var(--spwsv_color_filtros_blanco, #fff);
  color: var(--spwsv_color_filtros_color_texto, #333);
  padding: 10px 0px;
  font-size: 14px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar select option:checked,
.sp-filter-main .sp-filter-sidebar select option:checked {
  background-color: #f3f4f6;
  color: var(--spwsv_color_filtros_color_texto, #333);
  font-weight: bold;
}

/* Select2 (selectWoo) para el select "Ordenar por" */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container,
.sp-filter-main .sp-filter-sidebar .select2-container {
  width: 100% !important;
  font-family: inherit;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default .select2-selection--single,
.sp-filter-main .sp-filter-sidebar .select2-container--default .select2-selection--single {
  height: auto;
  padding: 10px 14px;
  border: 1px solid var(--spwsv_color_filtros_gris_claro, #e5e7eb);
  border-radius: 6px;
  background-color: var(--spwsv_color_filtros_blanco, #fff);
  transition: border-color 0.2s ease;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default:hover .select2-selection--single,
.sp-filter-main .sp-filter-sidebar .select2-container--default:hover .select2-selection--single,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default.select2-container--open .select2-selection--single,
.sp-filter-main .sp-filter-sidebar .select2-container--default.select2-container--open .select2-selection--single,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default.select2-container--focus .select2-selection--single,
.sp-filter-main .sp-filter-sidebar .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--spwsv_color_filtros_gris_oscuro, #666);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered,
.sp-filter-main .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--spwsv_color_filtros_color_texto, #333);
  font-size: 14px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow,
.sp-filter-main .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 10px;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow b,
.sp-filter-main .sp-filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--spwsv_color_filtros_gris_oscuro, #666) transparent transparent transparent;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.sp-filter-main .sp-filter-sidebar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--spwsv_color_filtros_gris_oscuro, #666) transparent;
}

/* Select2 anexa el dropdown al <body>, fuera de .sp-filter-sidebar y de
   .sp-filter-search-ajax: estos 2 selectores no llevan scope a propósito. */
.select2-container {
  z-index: 100000;
}

.select2-dropdown {
  border: 1px solid var(--spwsv_color_filtros_gris_oscuro, #666);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  font-family: inherit;
}

.select2-container--default .select2-results__option {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--spwsv_color_filtros_color_texto, #333);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--spwsv_color_filtros_negro, #1a1a1a);
  color: var(--spwsv_color_filtros_blanco, #fff);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #f3f4f6;
  color: var(--spwsv_color_filtros_color_texto, #333);
  font-weight: 600;
}

/* Checkboxes personalizados (categorías, marcas, atributos) */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label input[type="checkbox"],
.sp-filter-main .sp-filter-sidebar .sp-category-item label input[type="checkbox"],
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"],
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"],
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label input[type="checkbox"],
.sp-filter-main .sp-filter-sidebar .sp-brand-item label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--spwsv_color_filtros_acento, #1a1a1a);
  border-radius: 4px;
  background-color: var(--spwsv_color_filtros_blanco, #fff);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:hover,
.sp-filter-main .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:hover,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:hover,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:hover,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:hover,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:hover {
  border-color: var(--spwsv_color_filtros_gris_oscuro, #666);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:checked,
.sp-filter-main .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:checked,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:checked,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:checked,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:checked,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:checked {
  background-color: var(--spwsv_color_filtros_negro, #1a1a1a);
  border-color: var(--spwsv_color_filtros_negro, #1a1a1a);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:checked::after,
.sp-filter-main .sp-filter-sidebar .sp-category-item label input[type="checkbox"]:checked::after,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:checked::after,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label input[type="checkbox"]:checked::after,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:checked::after,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid var(--spwsv_color_filtros_blanco, #fff);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label,
.sp-filter-main .sp-filter-sidebar .sp-category-item label,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label {
  padding: 2px 0;
  color: var(--spwsv_color_filtros_color_texto, #333);
  transition: color 0.15s ease;
}

.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-category-item label:hover,
.sp-filter-main .sp-filter-sidebar .sp-category-item label:hover,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-attributte-item label:hover,
.sp-filter-main .sp-filter-sidebar .sp-attributte-item label:hover,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-sidebar .sp-brand-item label:hover,
.sp-filter-main .sp-filter-sidebar .sp-brand-item label:hover {
  color: var(--spwsv_color_filtros_negro, #1a1a1a);
}

/* ─────────────────────────────────────────────
   5. Modal de búsqueda (.sp-filter-search-ajax): shell, header, form,
   input, botón lupa, botón filtro, carrito, cerrar.
   ───────────────────────────────────────────── */

.sp-filter-search-ajax::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}

.sp-filter-search-ajax .sp-filter-search-ajax__header {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  background-color: #fff;
  padding-bottom: 10px;
}

.sp-filter-search-ajax .sp-filter-search-ajax__header .custom-logo-link img {
  max-width: 130px;
  height: 48px;
  object-fit: contain;
  object-position: left;
}

.sp-filter-search-ajax .sp-filter-search-ajax__header .sp-wsv-site-name-link {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--spwsv_color_filtros_negro, #1a1a1a);
  text-decoration: none;
}

.sp-filter-search-ajax__header_inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 8px 10px 20px;
  gap: 10px;
}

.sp-filter-search-ajax__header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sp-filter-search-ajax__cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* .header_inner es flex + space-between con 3 hijos (logo, carrito,
     cerrar): sin esto el carrito queda centrado en vez de agrupado junto
     al botón cerrar en el extremo derecho. */
  margin-left: auto;
  color: var(--spwsv_color_filtros_negro, #1a1a1a);
  transition: opacity 0.2s ease;
}

.sp-filter-search-ajax__cart-link:hover {
  opacity: 0.6;
}

/* Botón cerrar (X) del modal: hereda el estilo del comercial
   (sp-filter.css), salvo el font-size fijo en :hover, que se anula
   para que tome el tamaño de fuente por defecto del botón/tema. */
.sp-filter-search-ajax__close-button:hover {
  font-size: revert;
}

.sp-filter-search-ajax__form {
  max-width: 636px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1.5px solid var(--spwsv_color_filtros_gris_oscuro, #666);
  padding-bottom: 6px !important;
}

.sp-filter-search-ajax .sp-filter-search-ajax__form,
.sp-filter-search-ajax .sp-filter-main {
  padding: 0px 20px;
}

.sp-filter-search-ajax__input,
input.sp-filter-search-ajax__input,
input[type="search"].sp-filter-search-ajax__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  font-size: 20px;
  line-height: 1.5;
  box-sizing: border-box;
  background: transparent;
}

.sp-filter-search-ajax__input:focus,
.sp-filter-search-ajax__input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.sp-filter-search-ajax__input::-webkit-search-decoration,
.sp-filter-search-ajax__input::-webkit-search-cancel-button,
.sp-filter-search-ajax__input::-webkit-search-results-button,
.sp-filter-search-ajax__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.sp-filter-search-ajax__button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sp-filter-search-ajax__button svg {
  fill: #000000 !important;
}

.sp-filter-search-ajax__button:hover {
  opacity: 0.6;
}

.sp-filter-search-ajax__form button.sp-filter-search-ajax__filter-button {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background-color: var(--spwsv_color_filtros_negro, #1a1a1a);
  color: var(--spwsv_color_filtros_blanco, #fff);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.sp-filter-search-ajax__form button.sp-filter-search-ajax__filter-button.sp-visible {
  display: flex;
}

.sp-filter-search-ajax__form button.sp-filter-search-ajax__filter-button:hover {
  background-color: var(--spwsv_color_filtros_gris_oscuro, #666);
  transform: scale(1.04);
}

.sp-filter-search-ajax--loading .sp-filter-search-ajax__results {
  opacity: .6;
  pointer-events: none;
}

.sp-filter-search-ajax__results {
  background-color: #fff;
}

/* Animación de carga del buscador a pantalla completa: el overlay base
   (.filter_sp_loading::before, en sp-filter.css del módulo) es
   position:absolute y solo cubre la caja de .sp-filter-search-ajax__results
   (o de .sp-filter-search-ajax__recommended), es decir, una sección, no
   toda la pantalla. Aquí lo forzamos a fixed + 100vw/100vh SOLO dentro del
   buscador modal, sin tocar el comportamiento del catálogo. El spinner
   (::after) ya usa position:fixed y queda centrado igual en ambos casos. */
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-search-ajax__results.filter_sp_loading::before,
.sp-filter-search-ajax.sp-filter-search-ajax .sp-filter-search-ajax__recommended.filter_sp_loading::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

@media (max-width: 768px) {
  .sp-filter-search-ajax__header_inner {
    padding: 10px 8px 10px 20px;
  }
}

/* ─────────────────────────────────────────────
   6. Bloque "Productos populares/recomendados" del modal (carrusel Splide)
   ───────────────────────────────────────────── */

.sp-filter-search-ajax__recommended {
  background-color: #ffffff;
  padding: 14px 20px 20px;
  width: 100%;
}

.sp-filter-search-ajax__recommended-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sp-filter-search-ajax__recommended-title {
  text-align: left;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--spwsv_color_filtros_negro);
}

@media (max-width: 480px) {
  .sp-filter-search-ajax__recommended-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

.sp-filter-search-ajax .splide__track {
  padding-top: 4px !important;
}

.sp-filter-search-ajax .splide {
  padding: 0 32px;
}

@media (max-width: 768px) {
  .sp-filter-search-ajax .splide {
    padding: 0 67px;
  }
}

@media (max-width: 480px) {
  .sp-filter-search-ajax .splide {
    padding: 0 40px;
  }
}

.sp-recommended-slider-container {
  position: relative;
}

/* Evitar que WooCommerce rompa el layout de Splide */
.sp-filter-search-ajax__recommended .splide__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
}

.sp-filter-search-ajax__recommended .splide__slide {
  box-sizing: border-box;
  overflow: visible !important;
}

/* Tarjeta de producto dentro del slide — compacta, estilo catálogo */
.sp-filter-search-ajax__recommended .splide__slide li.product {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background-color: var(--spwsv_color_filtros_blanco);
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.2s ease;
  padding: 0;
  text-align: left;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: unset !important;
  max-height: unset !important;
  overflow: hidden;
}

/* Anula el hover de elevación/sombra que trae el comercial (sp-filter.css
   del módulo, no tocado): sin editar ese archivo, reafirmamos aquí los
   valores base para ese mismo estado, ganando por orden de carga. */
.sp-filter-search-ajax__recommended .splide__slide li.product:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.sp-filter-search-ajax__recommended .splide__slide li.product a img {
  display: block;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--spwsv_color_filtros_gris_claro);
}

.sp-filter-search-ajax__recommended .splide__slide li.product .sp-exclusividad-badge {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  top: auto !important;
  right: auto !important;
  z-index: 9;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .sp-exclusividad-badge .badge-text {
  font-size: 8px !important;
  padding: 3px 8px !important;
  border-width: 1px !important;
}

.sp-filter-search-ajax__recommended .splide__slide li.product h2.woocommerce-loop-product__title,
.sp-filter-search-ajax__recommended .splide__slide li.product .woocommerce-loop-product__title {
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--spwsv_color_filtros_negro);
  margin: 8px 0 2px;
  flex-grow: 0;
  line-height: 1.3;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .price {
  font-family: inherit;
  color: var(--spwsv_color_filtros_gris_medio);
  font-weight: 600;
  font-size: 0.85em;
  margin: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.3em;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .price del {
  color: var(--spwsv_color_filtros_gris_medio);
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.6;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .button.add_to_cart_button,
.sp-filter-search-ajax__recommended .splide__slide li.product a.button,
.sp-filter-search-ajax__recommended .splide__slide li.product a.added_to_cart.wc-forward {
  display: none !important;
}

.sp-filter-search-ajax__recommended .splide__slide li.product span.onsale,
.sp-filter-search-ajax__recommended .splide__slide li.product > span.onsale {
  display: inline-block !important;
  width: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: fit-content !important;
  padding: 2px 7px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: absolute !important;
  top: auto !important;
  left: 6px !important;
  right: auto !important;
  bottom: 6px !important;
  margin: 0 !important;
  background-color: #000000 !important;
  border-radius: 100px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  text-align: center !important;
  z-index: 9 !important;
  transform: none !important;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .sp-recommended-img-wrap {
  overflow: visible;
}

.sp-filter-search-ajax__recommended .splide__slide li.product .sello_recomendacion_woocommerce_loop {
  margin: 0 !important;
}

.sp-filter-search-ajax__recommended .splide__slide li.product a img.sello_imagen {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Flechas de Splide — estilo minimalista, sin fondo ni borde */
.sp-filter-search-ajax__recommended .splide__arrow {
  width: 28px;
  height: 28px;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  opacity: 1;
  box-shadow: none !important;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.sp-filter-search-ajax__recommended .splide__arrow svg {
  fill: var(--spwsv_color_filtros_negro);
  transition: fill 0.3s ease;
}

.sp-filter-search-ajax__recommended .splide__arrow:hover {
  background-color: transparent !important;
  opacity: 0.55;
}

.sp-filter-search-ajax__recommended .splide__arrow:hover svg {
  fill: var(--spwsv_color_filtros_negro);
}

.sp-filter-search-ajax__recommended .splide__arrow:disabled {
  display: none;
}
#sp-recommended-splide .splide__track {
    padding-top: 0;
    margin-bottom: 0;
    overflow: hidden; /* Garantiza que los elementos fuera de la vista no alteren el ancho */
}
.sp-filter-search-ajax__results{
  min-height: 100%;
}