/* =====================================================================
   LISTADO — barra superior
   Se carga solo en páginas de listado, desde catalog/listing/product-list.tpl
   con {block name='stylesheets' append}, igual que product-page.css en la
   ficha. Así no viaja a home, carrito ni CMS.

   Diseño tomado de facileds-modern (.fl-listing__toolbar): una sola línea
   dentro de una caja con borde de 1px y radio, recuento a la izquierda y
   herramientas a la derecha. Sin selector de rejilla/lista.

   Los tokens --ml-c-* viven en custom.css, que sí se carga en todas las
   páginas; van con valor de reserva por si algún día se mueven.
   ===================================================================== */

#js-product-list-top.ml-lbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  /* Menos padding a la derecha: los botones ya traen el suyo. */
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--ml-c-sand, #d4dce6);
  border-radius: 10px;
  background: #fff;
}

/* El recuento cede espacio antes que los botones: en móvil el texto se
   recorta con puntos suspensivos en lugar de empujar la fila a dos líneas. */
#js-product-list-top .ml-lbar__count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 13px/1.2 "Outfit", "Helvetica", sans-serif;
  color: var(--ml-c-mist, #7f868c);
}

#js-product-list-top .ml-lbar__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ─── Botones de la barra (ordenar / filtrar) ─── */
#js-product-list-top .ml-lbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ml-c-sand, #d4dce6);
  border-radius: 8px;
  background: #fff;
  color: var(--ml-c-ink, #101215);
  font: 500 12.5px/1 "Outfit", "Helvetica", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease;
}

#js-product-list-top .ml-lbar__btn:hover {
  border-color: var(--ml-c-ink, #101215);
}

#js-product-list-top .ml-lbar__btn:focus-visible {
  outline: 2px solid var(--ml-c-ink, #101215);
  outline-offset: 2px;
}

#js-product-list-top .ml-lbar__btn svg {
  flex: 0 0 auto;
  opacity: 0.7;
}

/* El chevron gira al desplegar. */
#js-product-list-top .ml-lbar__btn .ml-lbar__chev {
  transition: transform 0.2s ease;
}

#js-product-list-top .ml-lbar__btn[aria-expanded="true"] .ml-lbar__chev {
  transform: rotate(180deg);
}

/* ─── Botón de filtrar ───
   Doble condición para que aparezca:
     1. SÓLO móvil. En escritorio los filtros van desplegados en la columna
        izquierda, así que un botón de filtrar ahí sobraría.
     2. Sólo si el JS encontró el toggle real de dropfindfilters (.is-ready).
        Sin módulo de filtros activo no se pinta un botón muerto.
   Por eso el estado por defecto es oculto y son las dos condiciones juntas
   las que lo revelan. */
#js-product-list-top .ml-lbar__filter {
  display: none;
}

@media (max-width: 767px) {
  #js-product-list-top .ml-lbar__filter.is-ready {
    display: inline-flex;
  }
}

/* Contador de filtros activos, replicado del widget. */
#js-product-list-top .ml-lbar__badge:empty {
  display: none;
}

#js-product-list-top .ml-lbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ml-c-ink, #101215);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

/* ─── Desplegable de orden ───
   Se conservan las clases originales (.products-sort-order, .select-title,
   .select-list) porque custom.css y el JS del tema las referencian; aquí solo
   se reescribe el aspecto. */
#js-product-list-top .products-sort-order.dropdown {
  position: relative;
}

/* Anclado a la derecha del botón. La clase .dropdown-menu-right de Bootstrap
   no llega a aplicarse porque custom.css fija left:0 en .dropdown-menu; con el
   botón pegado al borde derecho de la barra, el menú se salía de la pantalla
   (medido: right=500 con viewport de 390). El max-width lo remata en móviles
   estrechos. */
#js-product-list-top .products-sort-order .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--ml-c-sand, #d4dce6);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 18, 21, 0.1);
}

#js-product-list-top .products-sort-order .dropdown-menu .select-list {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ml-c-ink, #101215);
  font: 400 13px/1.3 "Outfit", "Helvetica", sans-serif;
  text-decoration: none;
}

#js-product-list-top .products-sort-order .dropdown-menu .select-list:hover {
  background: var(--ml-c-warm, #eaedf3);
}

#js-product-list-top .products-sort-order .dropdown-menu .select-list.current {
  font-weight: 600;
  background: var(--ml-c-warm, #eaedf3);
}

/* ─── Móvil ─── */
@media (max-width: 767px) {
  #js-product-list-top.ml-lbar {
    padding: 7px 7px 7px 12px;
    gap: 8px;
  }

  #js-product-list-top .ml-lbar__count {
    font-size: 12px;
  }

  #js-product-list-top .ml-lbar__btn {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* =====================================================================
   MASTERLED — REDISEÑO DE LA MINIATURA DE PRODUCTO Y SU REJILLA
   Va al final de custom.css a propósito: las reglas de .products.row están
   repartidas por el fichero (L10365, L16655, L16716, L22389…) y casi todas
   llevan !important, así que este bloque tiene que ser el último en hablar.
   ===================================================================== */

/* ─────────── REJILLA ───────────
   6 columnas por encima de 1920, 5 hasta 1920, y bajando por anchura. */
.products.row {
  --ml-grid-gap: 14px;
  display: grid !important;
  gap: var(--ml-grid-gap) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  container-type: normal !important;
  container-name: none !important;
  margin: 1rem 0 !important;
  width: 100%;
  justify-content: stretch !important;
}

@media (min-width: 1921px) {
  .products.row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1500px) {
  .products.row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1200px) {
  .products.row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --ml-grid-gap: 10px;
  }
}

@media (max-width: 360px) {
  .products.row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* ─────────── TARJETA ─────────── */
.ml-card {
  --ml-c-ink: #101215;
  --ml-c-mist: #7f868c;
  --ml-c-sand: #d4dce6;
  --ml-c-warm: #eaedf3;
  --ml-c-danger: #B03A2E;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ml-c-sand);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  padding-inline: 0 !important;
}

.ml-card:hover {
  border-color: var(--ml-c-ink);
  box-shadow: 0 14px 32px rgba(16, 18, 21, .10);
  transform: translateY(-2px);
}

/* Imagen 1:1, como el hero de la ficha */
.ml-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  /* Es flex item: sin min-height:0 la altura intrínseca de la foto estira
     la caja y se pierde el 1:1 (mismo caso que la tira del mosaico). */
  flex: 0 0 auto;
  min-height: 0;
  /* !important: reglas heredadas fijan `height: 365px` a .thumbnail-container
     desde varios selectores con id (#products .thumbnail-container), que ganan
     por especificidad. La clase se conserva porque productcomments la busca. */
  height: auto !important;
}

.ml-card__thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* La foto va embebida, no a sangre: con fondo blanco no se nota, pero las
   de fondo oscuro chocaban contra el borde y las esquinas redondeadas de la
   tarjeta mientras el resto del contenido sí llevaba margen. */
.ml-card__img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  border-radius: 9px;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}

.ml-card:hover .ml-card__img {
  /*transform: scale(1.05);*/
}

.ml-card__seal {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
}

.ml-card__seal img {
  width: 34px;
  height: auto;
}

/* Etiquetas */
.ml-card__flags {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: calc(100% - 72px);
}

.ml-card .ml-tag {
  display: inline-block;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #fff;
  white-space: nowrap;
}

.ml-card .ml-tag--outlet {
  background: #ffb71b;
  color: #101215;
}

.ml-card .ml-tag--new {
  background: #00bb1f;
}

.ml-card .ml-tag--sale {
  background: var(--ml-c-danger);
}

/* Iconos de características */
.ml-card__icons {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 36px);
}

.ml-card .ml-ico {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(16, 18, 21, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
}

.ml-card .ml-ico img {
  width: 15px;
  height: 15px;
}

.ml-card .ml-ico::after {
  content: attr(data-ml-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 5;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ml-c-ink);
  color: #fff;
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
  pointer-events: none;
}

.ml-card .ml-ico:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Corazón de favoritos, esquina superior derecha */
.ml-card__fav {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
}

.ml-card__fav .ml-fav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ml-c-ink);
  /* Sin círculo: un halo blanco mantiene legible el contorno sobre la foto */
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, .95));
  transition: color .18s ease, transform .12s ease;
}
.ml-card__fav .ml-fav-icon > svg {
  width:18px !important;
  height: 18px !important;
}

.ml-card__fav .ml-fav-icon:hover {
  color: var(--ml-c-danger);
}

/* Sobre foto oscura el corazón pasa a blanco (lo decide el muestreo de
   luminancia de custom.js, que añade .is-on-dark). El halo se invierte
   para que siga recortando contra el fondo. */
.ml-card__fav.is-on-dark .ml-fav-icon {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.ml-card__fav.is-on-dark .ml-fav-icon:hover {
  color: white;
}
.ml-card__fav .favorito  {
  & svg {
    & path {
      color:#222 !important;
      stroke: #222 !important;
      fill: #222 !important;
    }
  }
}

.ml-card__fav.is-on-dark .favorito  {
  & svg {
    & path {
      color:white !important;
      stroke: white !important;
      fill: white !important;
    }
  }
}

.ml-card__fav .ml-fav-icon:active {
  transform: scale(.9);
}

/* Contorno mientras no es favorito.
   Hay que apuntar al <path>: el SVG del módulo trae fill/stroke como
   ATRIBUTOS de presentación en el path, y una regla sobre el <svg> no los
   pisa (el atributo del hijo gana sobre el valor heredado). */
.ml-card__fav .icon-heart,
.ml-card__fav .icon-heart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
}

/* Relleno rojo en cuanto lo es (.favorito lo alterna el JS del módulo;
   .fill viene ya del render cuando estaba guardado). */
.ml-card__fav .ml-fav-icon.favorito {
  color: var(--ml-c-danger);
}

.ml-card__fav .ml-fav-icon.favorito .icon-heart,
.ml-card__fav .ml-fav-icon.favorito .icon-heart path,
.ml-card__fav .icon-heart.fill,
.ml-card__fav .icon-heart.fill path {
  fill: currentColor;
}

/* estimateddelivery también cuelga del hook: fuera de la esquina */
.ml-card__fav .ml-add-favorite~* {
  display: none !important;
}

/* ─────────── CUERPO ─────────── */
.ml-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  padding: 12px 13px 13px;
  min-width: 0;
}

.ml-card__ref {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ml-c-mist);
}

.ml-card .ml-card__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500 !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ml-card .ml-card__title a {
  color: var(--ml-c-ink);
  text-decoration: none;
}

.ml-card .ml-card__title a:hover {
  text-decoration: underline;
}

.ml-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.ml-card .ml-card__price-now {
  font-family: 'Quicksand', 'Outfit', sans-serif;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: var(--ml-c-ink);
  line-height: 1.1;
}

.ml-card .ml-card__price-old {
  font-size: 12px !important;
  color: var(--ml-c-mist);
  text-decoration: line-through;
}

.ml-card .ml-card__discount {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ml-c-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ml-card .ml-card__discount--outlet {
  background: #ffb71b !important;
  color: #101215;
}

.ml-card .ml-card__stock {
  margin: 0;
  font-size: 10.5px;
  color: var(--ml-c-mist);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ml-card .ml-card__stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  flex: 0 0 auto;
}

.ml-card .ml-card__stock.reservar::before {
  background: #f59e0b;
}

/* ─────────── COMPRA / VARIANTES ─────────── */
.ml-card__buy {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
  padding-top: 9px;
  min-width: 0;
}

.ml-card .ml-card__add {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  /* Mismo azul que el CTA de la ficha de producto (.add-to-cart). */
  background: #1d2a55;
  color: #fff;
  font: 500 11px/1 'Outfit', 'Helvetica', sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.ml-card .ml-card__add:hover {
  background: #16204a;
  color: #fff;
}

.ml-card .ml-card__add--oos {
  background: #f59e0b;
  color: #101215;
}

/* ─── Comprar vs reservar ───
   El botón lleva SIEMPRE los dos iconos de la ficha y aquí se enseña uno u
   otro. Así el JS cambia de modo al elegir variante con una sola clase, sin
   reconstruir marcado ni volver a inyectar SVG. */
.ml-card .ml-card__ico--book {
  display: none;
}

.ml-card .ml-card__add--oos .ml-card__ico--buy {
  display: none;
}

.ml-card .ml-card__add--oos .ml-card__ico--book {
  display: inline-block;
}

/* ─── Punto de stock por variante ───
   Verde con existencias, naranja cuando la variante se sirve por reserva.
   Mismos colores que .ml-card__stock, para que el listado hable un idioma. */
.ml-card .ml-vsel__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
}

.ml-card .ml-vsel__dot.is-out {
  background: #f59e0b;
}

/* El punto vive DENTRO de la etiqueta: el .ml-vsel__opt es un
   space-between entre etiqueta y precio, y como hijo suelto el punto habría
   quedado separado del texto. */
.ml-card .ml-vsel__opt-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ml-card .ml-card__add[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ml-card .ml-card__add.is-loading {
  opacity: .6;
  pointer-events: none;
}

/* Con selector de variante el botón es cuadrado */
.ml-card__buy--variant .ml-card__add {
  flex: 0 0 38px;
  width: 38px;
  padding: 0;
}

/* ─── Móvil: el DESPLEGABLE a ancho de tarjeta ───
   El problema son las etiquetas de variante, que no caben en los ~90px del
   selector. Lo que se ensancha es la lista, NO la fila: el selector y el botón
   de añadir siguen uno al lado del otro.

   El truco es mover el bloque contenedor. .ml-vsel__menu es absolute con
   left:0/right:0, así que basta con que .ml-vsel deje de ser el ancestro
   posicionado y lo sea la fila entera: la lista pasa a medir lo que mide la
   fila —el ancho útil de la tarjeta— sin tocar la maquetación de los botones.
   El bottom:calc(100%+5px) hace entonces que abra por encima de toda la fila. */
@media (max-width: 767px) {
  .ml-card .ml-card__buy--variant {
    position: relative;
  }

  .ml-card .ml-card__buy--variant .ml-vsel {
    position: static;
  }
}

/* Selector de variantes */
.ml-card .ml-vsel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ml-card .ml-vsel--static {
  display: flex;
  align-items: center;
  padding: 0 11px;
  min-height: 38px;
  border: 1px solid var(--ml-c-sand);
  border-radius: 9px;
  background: var(--ml-c-warm);
  font-size: 11.5px;
  color: var(--ml-c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-card .ml-vsel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ml-c-sand);
  border-radius: 9px;
  background: #fff;
  color: var(--ml-c-ink);
  font: 500 11.5px/1.2 'Quicksand', 'Helvetica', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease;
}

.ml-card .ml-vsel__toggle:hover,
.ml-card .ml-vsel.is-open .ml-vsel__toggle {
  border-color: var(--ml-c-ink);
}

.ml-card .ml-vsel__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-card .ml-vsel__caret {
  flex: 0 0 auto;
  color: var(--ml-c-mist);
  transition: transform .18s ease;
}

.ml-card .ml-vsel.is-open .ml-vsel__caret {
  transform: rotate(180deg);
}

.ml-card .ml-vsel__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 20;
  max-height: 208px;
  margin: 0;
  padding: 5px !important;
  list-style: none;
  overflow-y: auto;
  border: 1px solid var(--ml-c-sand);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 18, 21, .16);
}

.ml-card .ml-vsel__menu li {
  margin: 0;
}

.ml-card .ml-vsel__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ml-c-ink);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}

.ml-card .ml-vsel__opt:hover:not(.is-disabled) {
  background: var(--ml-c-warm);
}

.ml-card .ml-vsel__opt.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ml-card .ml-vsel__opt-price {
  flex: 0 0 auto;
  font-weight: 600;
}
@media(max-width:599px) {
  .ml-card__img {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .ml-card__flags {
    top:6px;
    left:6px;
  }
  .ml-card__fav {
    top:6px;
    right: 6px;
    & .ml-fav-icon {
      width:18px;
      height:18px;

    }
  }
  .ml-card__icons {
    right:6px;
    bottom:6px;
  }
  .ml-card .ml-vsel__menu {
    margin: 0 -10px !important;
    padding:2px !important;
    border-radius: 6px !important;
  }
}
@media (max-width: 420px) {
  .ml-card .ml-card__title {
    font-size: 13px;
  }

  .ml-card .ml-card__price-now {
    font-size: 20px !important;
  }
}

/* =====================================================================
   FILTROS (dropfindfilters) — apilado en móvil
   El panel es .dff-filters__inner, position:fixed con z-index 1060 puesto
   por el módulo. Ese valor queda por debajo de varias capas del tema
   (.ml-products-panel 1100, .dropdown-search-overlay 9999), y en Safari iOS
   se colaba por detrás del listado.

   Va con !important porque el CSS del módulo se enlaza DESPUÉS que custom.css
   y, a igual especificidad, ganaría el suyo.

   El z-index se pone en .dff-filters__inner y no en .dff-filters: el padre es
   position:static, donde z-index no tiene ningún efecto.
   ===================================================================== */
@media (max-width: 767px) {
  .dff-filters__inner {
    z-index: 10000 !important;
  }
}