/* Las variables --mm-* viven ahora en el plugin "Matmap Tokens"
   (matmap-tokens/assets/tokens.css), que se encola como dependencia de esta
   hoja. Antes se declaraban aquí en :root y colisionaban con las que
   declaraban matmap-related-crosssell y matmap-premium-account: la última
   hoja en cargar ganaba y las tarjetas cambiaban de color sin motivo. */

/* ===== Contención del componente =====
   El plugin no modifica html/body: así no oculta desbordamientos de Divi ni
   interfiere con drawers, elementos sticky o componentes de terceros. */
.mm-plp,.mm-results,.mm-grid{min-width:0;max-width:100%}
.mm-plp{position:relative}

/* ===== Toolbar ===== */
.mm-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--mm-border);margin-bottom:14px
}
.mm-toolbar__right{display:flex;gap:10px;align-items:center}
.mm-open-drawer{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--mm-border);
  border-radius:999px;background:#fff;text-decoration:none;font-weight:700;color:var(--mm-primary);
  box-shadow:var(--mm-shadow-soft); line-height:1;
  transition:box-shadow .15s,border-color .15s,transform .12s
}
.mm-open-drawer:hover{border-color:rgba(58,57,114,.25);box-shadow:0 6px 18px rgba(58,57,114,.14);transform:translateY(-1px)}
.mm-open-drawer:active{transform:scale(.97)}
.mm-open-drawer:focus-visible{outline:3px solid rgba(58,57,114,.28);outline-offset:2px}
.mm-open-drawer__icon{display:inline-flex}
.mm-open-drawer__label-desktop{display:none}
.mm-open-drawer__count{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--mm-primary);color:#fff;font-size:.72rem;font-weight:800
}
.mm-sort{display:none}
@media (min-width:981px){
  .mm-open-drawer__label-mobile{display:none}
  .mm-open-drawer__label-desktop{display:inline}
  .mm-sort{display:inline-flex;align-items:center;gap:8px}
}
.mm-sort select{
  padding:10px 12px;border:1px solid var(--mm-border);border-radius:12px;background:#fff;
  box-shadow:var(--mm-shadow-soft)
}
.mm-count{color:#707784;font-weight:600}
.mm-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mm-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:#f6f7fb;border:1px solid var(--mm-border);color:var(--mm-primary);font-weight:700
}
.mm-chip i{font-style:normal;opacity:.6}

/* Chips activos dentro del panel + Borrar todos */
.mm-active-chips-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--mm-border)
}
.mm-chipbar--inline{margin:0;flex:1}
.mm-clear-all-inline{background:none;border:0;padding:0;cursor:pointer;color:#6b7280;font-weight:700;text-decoration:none;white-space:nowrap}
.mm-clear-all-inline:hover{text-decoration:underline}

/* "Ver N más" en opciones largas */
.mm-opt-more{
  display:block;width:100%;text-align:left;background:none;border:0;padding:6px 2px;cursor:pointer;
  color:var(--mm-primary);font-weight:700
}
.mm-opt-more:hover{text-decoration:underline}

/* Cargar más productos */
.mm-load-more{
  display:block;width:100%;margin-top:16px;padding:14px 16px;border-radius:12px;font-weight:800;cursor:pointer;
  background:#f5f6fb;color:var(--mm-primary);border:1px solid var(--mm-border);box-shadow:var(--mm-shadow-soft);
  transition:background .12s,transform .12s
}
.mm-load-more:hover{background:#eef0fa}
.mm-load-more:active{transform:scale(.98)}
.mm-load-more:disabled{opacity:.6;cursor:default}

/* ===== Grid ===== */
/* Columnas del listado. El modulo las pasa en el atributo style del .mm-plp
   (--mm-cols-d/-t/-p) y aqui se elige la que toca. Antes cada instancia
   escribia su propio <style> con selectores de atributo y !important. */
/* align-items:stretch (por defecto) para que todas las tarjetas de la fila
   midan lo mismo. Con align-items:start cada una se ajustaba a su contenido y
   los botones acababan a alturas distintas: el numero de lineas de la ficha
   tecnica y la presencia o no de valoracion varian de un producto a otro. */
.mm-grid{--mm-cols:4;display:grid;gap:18px;grid-template-columns:repeat(var(--mm-cols),minmax(0,1fr))}
.mm-plp .mm-grid{--mm-cols:var(--mm-cols-d,4)}
@media (max-width:980px){ .mm-plp .mm-grid{--mm-cols:var(--mm-cols-t,2)} }
@media (max-width:767px){ .mm-plp .mm-grid{--mm-cols:var(--mm-cols-p,1)} }
@media (max-width:980px){.mm-grid{gap:16px}}
@media (max-width:767px){.mm-grid{gap:12px}}

/* ===== Card ===== */
.mm-card{
  min-width:0;background:#fff;border:1px solid var(--mm-border);border-radius:var(--mm-radius);
  overflow:hidden;box-shadow:var(--mm-shadow);display:flex;flex-direction:column;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.mm-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:#f3f4f6}
.mm-carousel,.mm-carousel__track,.mm-carousel__slide{height:100%}
.mm-carousel__track{display:flex;overflow:hidden;scroll-snap-type:x mandatory;align-items:stretch;touch-action:pan-y;outline:none}
.mm-carousel__slide{flex:0 0 100%;scroll-snap-align:center;display:flex}
.mm-card__img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;image-rendering:auto}
.mm-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%) scale(.96);
  background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(6px);
  border:1px solid rgba(58,57,114,.15); width:36px;height:36px;border-radius:99999px!important;
  display:grid;place-items:center;font-size:20px;color:var(--mm-primary);
  cursor:pointer;box-shadow:0 2px 10px rgba(17,24,39,.12);
  transition:opacity .18s,transform .18s,box-shadow .18s,border-color .18s
}
.mm-carousel__nav.is-prev{left:8px}
.mm-carousel__nav.is-next{right:8px}
@media (hover:hover){
  .mm-card__media .mm-carousel__nav{opacity:0;pointer-events:none}
  .mm-card__media:hover .mm-carousel__nav{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
}
.mm-carousel__nav:hover{box-shadow:0 6px 16px rgba(58,57,114,.2);border-color:rgba(58,57,114,.25)}
.mm-carousel__nav:focus{outline:none}
.mm-carousel__nav:focus-visible,.mm-carousel__track:focus-visible{outline:3px solid rgba(58,57,114,.38);outline-offset:-3px}
.mm-dots{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  display:flex;align-items:center;gap:0;padding:2px 5px;border-radius:999px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(5px);box-shadow:0 2px 8px rgba(17,24,39,.1)
}
.mm-dot{
  appearance:none;border:0;background:transparent;width:22px;height:22px;padding:0;position:relative;cursor:pointer;border-radius:999px
}
.mm-dot::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(0,0,0,.25);transition:width .16s ease,background .16s ease}
.mm-dot.is-active::after{width:14px;background:var(--mm-primary)}
.mm-dot:focus-visible{outline:2px solid rgba(58,57,114,.45);outline-offset:-2px}

/* Tarjeta compacta: cada separación es explícita. No hay min-height invisible,
   flex expansivo ni margin-top:auto que conviertan altura sobrante en blanco. */
.mm-card__body{padding:14px;display:flex;flex-direction:column;gap:0;flex:1 1 auto}
.mm-card__kicker{
  color:#6b7280;font-size:.7rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
/* El titulo es un <p>, no un <h3>: el aspecto no puede depender de eso.
   `font:inherit` neutraliza el tamano y el peso que cada etiqueta trae de
   serie, y el padding cubre a los temas que separan parrafos con padding en
   vez de margen — Divi es uno. Todo lo que se ve lo pone el <a> de dentro. */
.mm-card__title{margin:0;padding:0;font:inherit;color:inherit}
.mm-card__title a{
  color:#3A3971;font-weight:700;text-decoration:none;
  font-size:clamp(1rem,.98rem + .22vw,1.12rem);line-height:1.24;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.mm-card__title a:hover{text-decoration:underline}
.mm-card__title a:focus-visible{outline:3px solid rgba(58,57,114,.28);outline-offset:3px;border-radius:4px}
.mm-card__specs{
  color:#687182;font-size:.82rem;font-weight:600;line-height:1.4;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.mm-rating{display:flex;align-items:center;gap:7px;margin-top:9px;line-height:1}
.mm-card__price{
  color:#e67f19;font-weight:800;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;
  font-size:clamp(1.04rem,1rem + .28vw,1.18rem);line-height:1.15;letter-spacing:.005em;
  margin-top:13px
}
.mm-card__price .woocommerce-Price-amount{color:#e67f19;font-weight:800}
.mm-card__unit{color:#3A3971;font-weight:700;font-size:.82em}
.mm-card__vat{color:#8b93a1;font-weight:500;font-size:.73rem}
.mm-card__delivery{display:flex;align-items:flex-start;gap:6px;color:#687182;font-size:.82rem;line-height:1.35;margin-top:8px}
.mm-card__delivery svg{flex:0 0 auto;margin-top:1px}
.mm-card__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:10px 14px;border-radius:11px;background:#3A3971;color:#fff;
  text-decoration:none;font-weight:800;box-shadow:0 2px 8px rgba(58,57,114,.18);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  /* auto: empuja el boton al fondo para que quede a la misma altura en todas
     las tarjetas de la fila, tengan mas o menos texto. */
  margin-top:auto;padding-top:10px
}
.mm-card__btn:focus-visible{outline:3px solid rgba(58,57,114,.32);outline-offset:2px}
.mm-card__btn:active{transform:scale(.98)}
@media (hover:hover){
  .mm-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(17,24,39,.12);border-color:rgba(58,57,114,.2)}
  .mm-card__btn:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(58,57,114,.25);transform:translateY(-1px)}
}

/* ===== Drawer ===== */
.mm-fh{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;
  position:sticky;top:-16px;margin-left:-18px;margin-right:-18px;padding:16px 18px 10px;
  background:#fff;z-index:5;border-bottom:1px solid var(--mm-border)
}
.mm-fh__heading{display:flex;flex-direction:column;gap:2px}
.mm-fh__title{margin:0;color:var(--mm-primary);font-size:22px;font-weight:800}
.mm-fh__count{margin:0;color:#707784;font-weight:600;font-size:.92rem}

/* Acordeón */
.mm-accordion__head{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:14px 2px;background:transparent;border:0;cursor:pointer;font-weight:700;color:var(--mm-primary);text-align:left
}
.mm-accordion__head:focus-visible{outline:3px solid rgba(58,57,114,.28);outline-offset:2px;border-radius:10px}
.mm-accordion__meta{display:inline-flex;align-items:center;gap:8px}
.mm-accordion__count{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--mm-primary);color:#fff;font-size:.72rem;font-weight:800
}
.mm-accordion__chev{transform:rotate(90deg);transition:transform .2s}
.mm-accordion.is-open .mm-accordion__chev{transform:rotate(-90deg)}
.mm-accordion__body{display:none;padding:0 2px 12px}
.mm-accordion.is-open .mm-accordion__body{display:block}

/* Campos UI */
.mm-input,.mm-select{
  width:100%;padding:10px 12px;border:1px solid var(--mm-border);border-radius:12px;background:#fff;box-shadow:var(--mm-shadow-soft)
}
.mm-field{display:flex;flex-direction:column;gap:6px}
.mm-field--inline{flex-direction:row;align-items:center}
.mm-field__label{color:#000;min-width:84px}

/* Facetas */
.mm-options{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:8px}
.mm-opt{
  position:relative;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--mm-border);
  border-radius:12px;background:#fff;cursor:pointer;user-select:none;box-shadow:var(--mm-shadow-soft);
  transition:border-color .15s,box-shadow .15s,transform .1s
}
.mm-opt:hover{border-color:var(--mm-border-strong);box-shadow:0 6px 18px rgba(17,24,39,.09);transform:translateY(-1px)}
.mm-opt__chk{position:absolute;opacity:0;pointer-events:none}
.mm-opt__box{width:18px;height:18px;border:2px solid var(--mm-primary);border-radius:4px;display:inline-block}
.mm-opt__chk:checked + .mm-opt__box{background:var(--mm-primary);box-shadow:inset 0 0 0 3px #fff}
.mm-opt__label{flex:1;line-height:1.2}
.mm-opt__count{opacity:.65;font-size:12px}
.mm-opt--hidden{display:none!important}
.mm-opt--disabled{opacity:.5;cursor:not-allowed}
.mm-opt--disabled .mm-opt__box{border-color:#cfd4dc}

/* ===== Precio bonito ===== */
.mm-price-fields{display:flex;gap:10px;margin-bottom:12px}
.mm-price-field{flex:1;display:flex;flex-direction:column;gap:6px}
.mm-price-field__label{font-size:.82rem;font-weight:700;color:#6b7280}
.mm-price-field__box{
  display:flex;align-items:center;gap:6px;border:1px solid var(--mm-border);border-radius:12px;
  background:#fff;padding:8px 10px;box-shadow:var(--mm-shadow-soft)
}
.mm-price-field__currency{color:#6b7280;font-weight:700}
.mm-price-field__box input{
  border:0;outline:0;width:100%;padding:0;font-size:1rem;color:var(--mm-text);
  -moz-appearance:textfield;appearance:textfield
}
.mm-price-field__box input::-webkit-outer-spin-button,
.mm-price-field__box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mm-price-range{display:flex;flex-direction:column;gap:10px}
.mm-price-range__labels{
  display:flex;justify-content:space-between;gap:10px;align-items:center;color:#6b7280;
  font-weight:700
}
.mm-price-range__track{position:relative;height:28px}
.mm-range{
  position:absolute;left:0;right:0;top:0;bottom:0;margin:0;width:100%;height:28px;
  background:transparent;pointer-events:all;-webkit-appearance:none;appearance:none;z-index:1;touch-action:none
}
.mm-range.is-active{z-index:3}
.mm-range:last-of-type{z-index:2}
.mm-range::-webkit-slider-runnable-track{height:8px;background:transparent}
.mm-range::-moz-range-track{height:8px;background:transparent}
.mm-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px;background:#e69130;border:0;box-shadow:0 0 0 2px #fff;position:relative;margin-top:-5px}
.mm-range::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:#e69130;border:0;box-shadow:0 0 0 2px #fff}
.mm-range__track{
  position:absolute;left:0;right:0;top:10px;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#f2dfc8,#f2dfc8)
}
.mm-range__fill{position:absolute;top:10px;height:8px;border-radius:999px;background:#e9b47a;left:0;width:100%}
.mm-btn--ghost{
  background:#f5f6fb;color:#444;border:1px solid var(--mm-border);border-radius:10px;
  padding:10px 14px;font-weight:700;transition:background .12s,transform .12s
}
.mm-btn--ghost:active{transform:scale(.97);background:#eceef5}

/* ===== Drawer & acciones ===== */
.mm-no-scroll{overflow:hidden}
/* Oculta el widget flotante de contacto (plugin gestor-popups-leads-mod)
   mientras el panel de filtros está abierto — mismo patrón que ya usa el
   sitio para los popups de ayuda al reaccionar a body.mm-no-scroll. */
body.mm-no-scroll .contact-widget-button,
body.mm-no-scroll .contact-widget-submenu{ display:none !important; }
.mm-drawer{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.mm-drawer__overlay{position:absolute;inset:0;background:rgba(17,24,39,.45);opacity:0;transition:opacity .2s}
.mm-drawer__panel{
  position:absolute;right:0;top:0;bottom:0;width:min(92vw,420px);
  background:#fff;border-left:1px solid var(--mm-border);box-shadow:-10px 0 30px rgba(17,24,39,.18);
  transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;overflow:auto;padding:16px 18px
}
.mm-filters{
  display:flex;flex-direction:column;min-height:100%;
  /* Aire de seguridad: deja hueco para el footer sticky */
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
  /* y un pequeño aire arriba para que no quede apelotonado */
  padding-top:4px;
}
.mm-accordion:last-of-type{margin-bottom:8px}
.mm-options:last-child{margin-bottom:8px}

/* Footer / CTA */
.mm-actions{
  margin-top:auto;position:sticky;bottom:0;background:linear-gradient(180deg, rgba(255,255,255,.65), #fff 20%);
  padding:16px 14px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  border-top:1px solid var(--mm-border);box-shadow:0 -6px 18px rgba(17,24,39,.08)
}
.mm-actions .mm-btn--primary{width:100%;text-align:center}
.mm-actions .mm-clear{text-align:center}
.mm-actions::before{
  content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
  background:linear-gradient(180deg, rgba(17,24,39,.06), rgba(17,24,39,0));
}

/* Enlaces/botones */
.mm-link{color:#6b7280;text-decoration:none;font-weight:700}
.mm-link:hover{text-decoration:underline}
.mm-btn{appearance:none;border:0;padding:12px 16px;border-radius:12px;font-weight:800;cursor:pointer}
.mm-btn--primary{
  background:#3A3971;color:#fff;box-shadow:0 3px 10px rgba(58,57,114,.22);padding:14px 16px;
  transition:filter .12s,transform .12s,box-shadow .12s
}
.mm-btn--primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 18px rgba(58,57,114,.22)}
.mm-btn--primary:active{transform:scale(.97);filter:brightness(.97)}

.mm-drawer.is-open{pointer-events:auto}
.mm-drawer.is-open .mm-drawer__overlay{opacity:1}
.mm-drawer.is-open .mm-drawer__panel{transform:translateX(0)}
.mm-icon-btn{appearance:none;border:0;background:transparent;cursor:pointer}
.mm-drawer__close{color:#3A3971;font-size:20px;line-height:1;padding:6px;border-radius:8px}
.mm-drawer__close:hover{background:#f5f6fb}

/* Paginación */
.mm-pagination{display:flex;gap:10px;justify-content:center;margin-top:16px}
.mm-pagination .mm-page{
  min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#111827;
  border:1px solid var(--mm-border);text-decoration:none;box-shadow:var(--mm-shadow-soft);
  transition:transform .1s ease,box-shadow .1s ease,color .1s ease,border-color .1s ease,background .1s ease
}
.mm-pagination .mm-page:hover{border-color:var(--mm-primary);color:var(--mm-primary);box-shadow:0 3px 10px rgba(58,57,114,.12)}
.mm-pagination .disabled{opacity:.5;pointer-events:none}
.mm-pagination .mm-page:focus{outline:none}
.mm-pagination .mm-page:focus-visible{outline:2px solid rgba(58,57,114,.35);outline-offset:2px}
.mm-pagination .mm-page.first{font-size:15px}
.mm-pagination .mm-page-status{display:grid;place-items:center;padding:0 4px;font-size:14px;color:#4B5563;white-space:nowrap}

/* Loading — ver el bloque "Estados de carga" al final de esta hoja. */
.mm-loading [data-mm-results]{opacity:.55;transition:opacity .15s ease}

/* Valoraciones */
.mm-stars{position:relative;display:inline-block;line-height:1;font-size:16px}
.mm-stars__bg{color:#b8bdc7;opacity:.85}
.mm-stars__fg{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:var(--mm-secondary)}
.mm-rating__count{font-size:.9rem;color:#6b7280}


/* ===== Densidad móvil ===== */
@media (max-width:767px){
  .mm-card__media{aspect-ratio:16/10}
  .mm-card__body{padding:12px}
  .mm-card__kicker{font-size:.67rem;margin-bottom:5px}
  .mm-card__title a{font-size:1rem;line-height:1.22}
  .mm-card__specs{font-size:.8rem;margin-top:8px;-webkit-line-clamp:2}
  .mm-card__price{margin-top:11px}
  .mm-card__delivery{margin-top:7px;font-size:.8rem}
  .mm-card__btn{margin-top:10px;min-height:42px;padding:9px 12px}
  .mm-carousel__nav{width:38px;height:38px}
}
@media (max-width:480px){
  .mm-grid{gap:10px}
  .mm-dots{bottom:6px}
}

@media (prefers-reduced-motion:reduce){
  .mm-card,.mm-card__btn,.mm-carousel__nav,.mm-dot::after,.mm-drawer__overlay,.mm-drawer__panel{transition:none!important}
  .mm-card:hover,.mm-card__btn:hover{transform:none!important}
  .mm-carousel__track{scroll-behavior:auto!important}
}

/* ===== Drawer a pantalla completa en móvil ===== */
@media (max-width:767px){
  .mm-drawer__panel{
    left:0;right:0;width:100%;max-width:100%;height:100%;border-left:0;border-radius:0
  }
}

/* ===== Stock badges ===== */
.mm-badge{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:800; line-height:1.2;
  background:#111827; color:#fff; box-shadow:var(--mm-shadow-soft);
  z-index:2; font-size:.85rem; letter-spacing:.01em;
  /* Textos largos (p.ej. "Disponible bajo reserva") no deben desbordar la
     tarjeta en columnas estrechas (2 columnas en móvil) */
  max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:480px){
  .mm-badge{ font-size:.72rem; padding:5px 8px; }
}
/* Colores semánticos de Matmap Tokens: el naranja es color de marca y se
   reserva para "más vendido", no para avisos de stock. */
.mm-badge--oos{ background:var(--mm-bad-bg); color:var(--mm-bad); }
.mm-badge--backorder{ background:var(--mm-warn-bg); color:var(--mm-warn); }
.mm-badge--low{ background:var(--mm-warn-bg); color:var(--mm-warn); }
.mm-badge--bestseller{ background:var(--mm-accent); color:#fff; }
.mm-badge--new{ background:var(--mm-brand); color:#fff; }

.mm-card.is-oos .mm-card__media{ filter:grayscale(.2) opacity(.95); }
.mm-card.is-oos .mm-card__title a{ color:#6b7280; }
.mm-card.is-oos .mm-card__price{ opacity:.85; }

/* ===== Brand badge ===== */
.mm-card__brand{
  position:absolute; top:8px; right:8px; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 5px rgba(17,24,39,.18);
  text-decoration:none;
  overflow:hidden;
  transition:box-shadow .15s
}
.mm-card__brand:hover{ box-shadow:0 3px 10px rgba(17,24,39,.25) }
.mm-card__brand:focus-visible{ outline:2px solid rgba(58,57,114,.35); outline-offset:2px }
.mm-card__brand-logo{
  display:block; width:28px; height:28px;
  object-fit:contain; object-position:center
}
/* Columnas estrechas (2 en móvil): iconos algo más pequeños para que quepan */
@media (max-width:480px){
  .mm-card__brand{ width:32px; height:32px; top:6px; right:6px; }
  .mm-card__brand-logo{ width:22px; height:22px; }
  .mm-carousel__nav{ width:36px; height:36px; font-size:18px; }
}

.mm-card__brand-name{
  font-size:.55rem; font-weight:800; color:var(--mm-primary);
  text-align:center; line-height:1; padding:2px
}
.mm-card.is-oos .mm-card__brand{ opacity:.5 }

/* ===== Compatibilidad con wishlist de terceros =====
   Este plugin no crea ni estiliza el botón de favoritos. Únicamente desplaza
   su propia etiqueta si otro plugin inserta un botón en la esquina izquierda. */
.mm-card__media:has(.mmpa-wishlist-btn, .yith-wcwl-add-to-wishlist, .tinv-wraper) .mm-badge{
  left:52px;max-width:calc(100% - 112px)
}
@media (max-width:480px){
  .mm-card__media:has(.mmpa-wishlist-btn, .yith-wcwl-add-to-wishlist, .tinv-wraper) .mm-badge{
    left:44px;max-width:calc(100% - 92px)
  }
}


/* ===== 1.9.12 · Facetas premium y estables ===== */
.mm-drawer__panel{
  width:min(94vw,460px);padding:0 20px;background:#fbfbfd;
  border-left:1px solid rgba(58,57,114,.10);box-shadow:-18px 0 48px rgba(17,24,39,.18)
}
.mm-filters{padding-top:0;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.mm-fh{
  top:0;margin:0 -20px 2px;padding:18px 20px 14px;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(58,57,114,.10)
}
.mm-fh__title{font-size:1.24rem;letter-spacing:-.015em}
.mm-fh__count{font-size:.86rem;color:#737987}
.mm-active-chips-row{padding:12px 0 14px;margin-bottom:0;border-bottom:1px solid rgba(58,57,114,.10)}
.mm-chip{background:#f3f2fa;border-color:rgba(58,57,114,.14);padding:7px 10px;font-size:.82rem}

.mm-accordion{border-bottom:1px solid rgba(58,57,114,.10)}
.mm-accordion__head{
  min-height:54px;padding:15px 0;font-size:.9rem;letter-spacing:.005em;
  color:#37366f;font-weight:800
}
.mm-accordion__count{
  min-width:22px;height:22px;background:#eeedf7;color:#3A3971;border:1px solid rgba(58,57,114,.12);
  font-size:.72rem
}
.mm-accordion__chev{font-size:0;width:20px;height:20px;display:grid;place-items:center;transform:none}
.mm-accordion__chev::before{
  content:"";width:6px;height:6px;border-right:1.8px solid #3A3971;border-bottom:1.8px solid #3A3971;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease
}
.mm-accordion.is-open .mm-accordion__chev{transform:none}
.mm-accordion.is-open .mm-accordion__chev::before{transform:rotate(225deg) translate(-1px,-1px)}
.mm-accordion__body{padding:0 0 16px}

.mm-field--inline{flex-direction:column;align-items:stretch;gap:0}
.mm-field--inline .mm-field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mm-input,.mm-select{
  min-height:44px;border:1px solid #dde0e8;border-radius:12px;background:#fff;box-shadow:none;color:#222632
}
.mm-select{padding:11px 13px}
.mm-input:focus,.mm-select:focus{outline:0;border-color:rgba(58,57,114,.46);box-shadow:0 0 0 3px rgba(58,57,114,.09)}

.mm-facet-hint{margin:-2px 0 9px;color:#8a909d;font-size:.76rem;line-height:1.35}
.mm-search{position:relative;margin-bottom:10px}
.mm-search::before{
  content:"";position:absolute;left:14px;top:50%;width:11px;height:11px;border:1.6px solid #89909d;
  border-radius:999px;transform:translateY(-58%);pointer-events:none;z-index:1
}
.mm-search::after{
  content:"";position:absolute;left:24px;top:25px;width:6px;height:1.6px;background:#89909d;
  transform:rotate(45deg);transform-origin:left center;pointer-events:none;z-index:1
}
.mm-search .mm-input{padding-left:38px;background:#fff}

.mm-options{
  display:block;overflow:hidden;border:1px solid #e0e3ea;border-radius:14px;background:#fff;
  box-shadow:0 5px 18px rgba(17,24,39,.045)
}
.mm-opt{
  min-height:46px;padding:10px 12px;border:0;border-bottom:1px solid #eceef3;border-radius:0;
  background:#fff;box-shadow:none;transform:none;gap:11px;transition:background .14s ease,color .14s ease
}
.mm-opt:last-child{border-bottom:0}
.mm-opt:hover{border-color:transparent;background:#f8f8fc;box-shadow:none;transform:none}
.mm-opt.is-selected{background:#f3f2fa;color:#302f67}
.mm-opt.is-selected .mm-opt__label{font-weight:750}
.mm-opt__box{
  position:relative;flex:0 0 auto;width:19px;height:19px;border:1.7px solid #7373a4;border-radius:5px;background:#fff;
  transition:background .14s,border-color .14s,box-shadow .14s
}
.mm-opt__box::after{
  content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(.7);opacity:0;transition:opacity .12s,transform .12s
}
.mm-opt__chk:checked + .mm-opt__box{background:#3A3971;border-color:#3A3971;box-shadow:none}
.mm-opt__chk:checked + .mm-opt__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.mm-opt__chk:focus-visible + .mm-opt__box{outline:3px solid rgba(58,57,114,.18);outline-offset:2px}
.mm-opt__label{font-size:.88rem;color:inherit;line-height:1.3}
.mm-opt__count{
  min-width:28px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:#f2f3f7;color:#737987;font-size:.72rem;font-weight:700;opacity:1
}
.mm-opt.is-selected .mm-opt__count{background:#fff;color:#3A3971}
.mm-opt--disabled{opacity:1;background:#fafafd;color:#adb1ba;cursor:not-allowed}
.mm-opt--disabled:hover{background:#fafafd}
.mm-opt--disabled .mm-opt__box{border-color:#d5d8df;background:#f5f6f8}
.mm-opt--disabled .mm-opt__count{background:#f2f3f5;color:#b2b5bd}
.mm-opt--hidden{display:flex!important}
.mm-opt-more{
  width:auto;margin:9px 0 0;padding:7px 10px;border-radius:999px;background:#f1f1f7;
  color:#3A3971;font-size:.78rem;text-align:center
}
.mm-opt-more:hover{text-decoration:none;background:#e9e8f3}

.mm-price-fields{gap:10px;margin-bottom:11px}
.mm-price-field__box{min-height:43px;border-color:#dde0e8;box-shadow:none}
.mm-price-range{gap:9px}
.mm-price-range__labels{font-size:.8rem}
.mm-range__track,.mm-range__fill{height:6px;top:11px}

.mm-actions{
  z-index:6;margin-left:-20px;margin-right:-20px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-top:1px solid rgba(58,57,114,.10);
  box-shadow:0 -10px 24px rgba(17,24,39,.07);gap:9px
}
.mm-actions::before{display:none}
.mm-actions .mm-btn--primary{min-height:48px;border-radius:12px;box-shadow:0 5px 14px rgba(58,57,114,.21)}
.mm-actions .mm-clear{font-size:.84rem}

@media (max-width:767px){
  .mm-drawer__panel{padding:0 16px}
  .mm-fh{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .mm-actions{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .mm-filters{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ===== 1.9.14 · Facetas útiles: cero resultados nunca visibles ===== */
.mm-drawer__panel{
  width:min(94vw,448px);background:#fff;border-left:1px solid #e8e9ef;
  box-shadow:-22px 0 54px rgba(31,34,55,.16)
}
.mm-fh{background:rgba(255,255,255,.97);border-bottom-color:#e7e8ee}
.mm-accordion{border-bottom-color:#e9eaf0}
.mm-accordion__head{min-height:58px;padding:17px 0;color:#32316b;font-size:.92rem}
.mm-accordion__body{padding:0 0 18px}

.mm-facet-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-1px 0 10px;color:#767d8b;font-size:.74rem;line-height:1.35
}
.mm-facet-meta__mode{
  flex:0 0 auto;padding:4px 8px;border:1px solid #e5e4ef;border-radius:999px;
  background:#f7f6fb;color:#555487;font-size:.68rem;font-weight:700;letter-spacing:.01em
}
.mm-search{margin-bottom:9px}
.mm-search .mm-input{
  min-height:42px;border-color:#e0e2e9;border-radius:11px;background:#fbfbfd;
  box-shadow:none;font-size:.84rem
}
.mm-search .mm-input:focus{background:#fff;border-color:#7776a4;box-shadow:0 0 0 3px rgba(58,57,114,.08)}

.mm-options{
  overflow:hidden;border:1px solid #e3e5ec;border-radius:13px;background:#fff;
  box-shadow:none
}
.mm-opt{
  min-height:45px;padding:9px 11px;border-bottom:1px solid #eef0f4;
  gap:10px;background:#fff;transition:background .14s ease
}
.mm-opt:hover{background:#f8f8fb}
.mm-opt.is-selected{
  position:relative;background:#f4f3fa;color:#302f67
}
.mm-opt.is-selected::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:#3A3971
}
.mm-opt__label{font-size:.87rem}
.mm-opt__count{
  min-width:27px;height:22px;padding:0 7px;background:#f4f5f7;color:#737987;
  font-size:.69rem
}
.mm-opt.is-selected .mm-opt__count{background:#fff;color:#3A3971}
.mm-opt--unavailable{
  background:#fafbfc;color:#a7acb6;cursor:not-allowed
}
.mm-opt--unavailable:hover{background:#fafbfc}
.mm-opt--unavailable .mm-opt__box{border-color:#d8dbe2;background:#f5f6f8}
.mm-opt--unavailable .mm-opt__count{background:#f1f2f4;color:#b1b5bd}
.mm-opt.is-incompatible{
  background:#fff8ef;color:#78542b
}
.mm-opt.is-incompatible::before{background:#e69130}
.mm-opt.is-incompatible .mm-opt__count{background:#fff;color:#a76418}

.mm-facet-controls{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px
}
.mm-facet-control,.mm-opt-more,.mm-unavailable-toggle{
  width:auto;margin:0;padding:6px 9px;border:0;border-radius:8px;background:#f5f5f9;
  color:#3A3971;font-size:.74rem;font-weight:750;line-height:1.2;text-align:left;
  box-shadow:none
}
.mm-facet-control:hover,.mm-opt-more:hover,.mm-unavailable-toggle:hover{
  background:#ecebf4;text-decoration:none
}
.mm-unavailable-toggle{background:transparent;color:#7a808d;padding-left:2px;padding-right:2px}
.mm-unavailable-toggle:hover{background:transparent;color:#3A3971;text-decoration:underline}

.mm-accordion__count{
  min-width:21px;height:21px;background:#3A3971;color:#fff;border-color:#3A3971;
  box-shadow:0 2px 7px rgba(58,57,114,.16)
}
.mm-actions{
  background:rgba(255,255,255,.98);border-top-color:#e7e8ee;
  box-shadow:0 -9px 25px rgba(31,34,55,.07)
}
.mm-actions .mm-btn--primary{border-radius:11px;box-shadow:0 5px 13px rgba(58,57,114,.18)}

@media (max-width:767px){
  .mm-drawer__panel{width:100vw;max-width:none;border-left:0}
  .mm-facet-meta{margin-bottom:9px}
  .mm-opt{min-height:47px;padding:10px 11px}
  .mm-facet-controls{margin-top:8px}
}
.mm-facet-meta [data-mm-facet-available].is-warning{color:#a76418;font-weight:750}
.mm-facet-empty{flex:1 1 100%;padding:9px 10px;border-radius:9px;background:#faf6f0;color:#8c652f;font-size:.75rem;line-height:1.35}


/* 1.9.14: una faceta no debe ofrecer decisiones que devuelven 0 resultados.
   El nodo se conserva para que AJAX pueda reactivarlo cuando cambie el contexto. */
.mm-opt.mm-opt--zero{display:none!important}



/* =====================================================================
   Carruseles de ficha de producto (relacionados / venta cruzada)
   ---------------------------------------------------------------------
   Venía de matmap-related-crosssell, que declaraba estas mismas clases en
   su propia hoja con valores distintos. Ahora hay una sola definición.
   ===================================================================== */
.mm-carousel-block{margin:32px 0}
.mm-block__title{
  margin:0 0 14px;font-size:1.25rem;font-weight:800;color:var(--mm-brand);line-height:1.25
}

/* Columnas visibles. El módulo las pasa en el atributo style del elemento
   (--vis-d/-t/-p) y aquí se elige la que toca por ancho de pantalla. Así no
   hace falta escribir un <style> por cada carrusel dentro del HTML. */
.mm-slider{position:relative;--vis:var(--vis-d,5)}
@media (max-width:980px){ .mm-slider{--vis:var(--vis-t,3)} }
@media (max-width:767px){ .mm-slider{--vis:var(--vis-p,1)} }

/* El viewport ES el scroller: en móvil es lo que permite el gesto nativo. */
.mm-slider__viewport{
  position:relative;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--mm-fade),#000 calc(100% - var(--mm-fade)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--mm-fade),#000 calc(100% - var(--mm-fade)),transparent 100%);
}
.mm-slider__viewport::-webkit-scrollbar{display:none}
/* Si no hay desplazamiento posible, fuera máscara (y el JS oculta controles). */
.mm-slider__viewport.is-noscroll{-webkit-mask-image:none;mask-image:none}

.mm-slider__track{
  display:flex!important;flex-wrap:nowrap!important;
  align-items:stretch;gap:18px;padding:2px
}
.mm-slider__slide{
  box-sizing:border-box;
  flex:0 0 calc((100% - (var(--vis) - 1) * 18px) / var(--vis));
  min-width:0;scroll-snap-align:start
}

.mm-slider__nav{
  position:absolute;top:calc(50% - 20px);transform:translateY(-50%);
  z-index:2;width:42px;height:42px;
  display:grid;place-items:center;
  font-size:22px;line-height:1;
  background:var(--mm-brand);color:#fff;border:0;
  border-radius:var(--mm-r-md);
  box-shadow:var(--mm-sh-2);
  cursor:pointer;transition:background var(--mm-ease),transform var(--mm-ease)
}
.mm-slider__nav:hover{background:var(--mm-brand-ink)}
.mm-slider__nav:focus-visible{outline:3px solid rgba(58,57,113,.38);outline-offset:2px}
.mm-slider__nav.is-prev{left:-18px}
.mm-slider__nav.is-next{right:-18px}
@media (hover:hover){
  .mm-slider .mm-slider__nav{opacity:0;pointer-events:none;transition:opacity var(--mm-ease)}
  .mm-slider:hover .mm-slider__nav,
  .mm-slider:focus-within .mm-slider__nav{opacity:1;pointer-events:auto}
}

.mm-slider__dots{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px}
.mm-slider__dot{
  width:8px;height:8px;border-radius:var(--mm-r-full);
  background:var(--mm-line-strong);cursor:pointer;
  transition:transform var(--mm-ease),background var(--mm-ease)
}
.mm-slider__dot.is-active{background:var(--mm-brand);transform:scale(1.15)}

@media (max-width:980px){
  .mm-slider__track{gap:16px}
  .mm-slider__slide{flex-basis:calc((100% - (var(--vis) - 1) * 16px) / var(--vis))}
  .mm-slider__nav.is-prev{left:-12px}
  .mm-slider__nav.is-next{right:-12px}
}
@media (max-width:767px){
  .mm-slider__track{gap:12px}
  .mm-slider__slide{flex-basis:calc((100% - (var(--vis) - 1) * 12px) / var(--vis))}
  .mm-slider__nav{display:none!important}   /* en móvil manda el gesto */
  .mm-slider__dot{width:10px;height:10px}
}

/* En el carrusel la tarjeta es más estrecha: la ficha técnica a una línea. */
.mm-card--compact .mm-card__specs{-webkit-line-clamp:1}
.mm-card--compact{cursor:pointer}

/* =====================================================================
   Estados de carga
   ---------------------------------------------------------------------
   Antes el único aviso era bajar la opacidad de los resultados, y si la
   petición fallaba no pasaba absolutamente nada: se quedaba el listado
   anterior y el cliente creía que su filtro no daba resultados.
   ===================================================================== */

/* La altura del listado se reserva desde el JS (min-height en línea con la
   altura real que tenía), para que la página no pegue un salto al sustituir
   los resultados. Aquí solo suavizamos la transición. */
[data-mm-results]{transition:min-height .2s ease}

/* --- Skeleton --- */
.mm-skeleton-grid{display:grid;gap:18px;grid-template-columns:repeat(var(--mm-cols,4),minmax(0,1fr))}
@media (max-width:980px){.mm-skeleton-grid{gap:16px}}
@media (max-width:767px){.mm-skeleton-grid{gap:12px}}

.mm-skel-card{
  border:1px solid var(--mm-line);border-radius:var(--mm-r-lg);
  background:var(--mm-paper);overflow:hidden;box-shadow:var(--mm-sh-1)
}
.mm-skel-card__media{aspect-ratio:3/2}
.mm-skel-card__body{padding:14px;display:flex;flex-direction:column;gap:9px}

.mm-skel{
  background:linear-gradient(90deg,#EDEDF3 25%,#F7F7FB 50%,#EDEDF3 75%);
  background-size:200% 100%;
  animation:mmShimmer 1.4s linear infinite;
  border-radius:6px
}
.mm-skel--line{height:12px}
@keyframes mmShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .mm-skel{animation:none;background:#EDEDF3}
}

/* --- Aviso de error con reintento --- */
.mm-error{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0;padding:14px 16px;
  border:1px solid #EBC0B9;border-radius:var(--mm-r-md);
  background:var(--mm-bad-bg);color:var(--mm-bad);
  font-size:.92rem;line-height:1.45
}
.mm-error__msg{flex:1;min-width:200px}
.mm-error__retry{
  background:var(--mm-bad);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:700;
  padding:9px 16px;border-radius:var(--mm-r-sm);
  transition:background var(--mm-ease)
}
.mm-error__retry:hover{background:#9C2E22}
.mm-error__retry:focus-visible{outline:3px solid rgba(184,56,42,.4);outline-offset:2px}

/* Solo para lectores de pantalla: anuncia "128 productos" al filtrar. */
.mm-sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}


/* ===== Alturas iguales en una fila =====
   La tarjeta ocupa toda la celda y el cuerpo crece, de modo que el boton
   (siempre el ultimo hijo) se va al fondo con margin-top:auto. Asi los
   botones de una misma fila quedan alineados aunque unas tarjetas tengan
   valoracion y otras no, o la ficha tecnica ocupe una linea mas. */
.mm-grid > .mm-card,
.mm-slider__slide > .mm-card{ height:100%; }

.mm-card__btn{ margin-top:auto; }

/* La separacion minima se pone en el elemento ANTERIOR al boton, no en el
   boton. Ponerla como `.mm-card__delivery + .mm-card__btn{margin-top:12px}`
   tenia mas especificidad que `margin-top:auto` y lo anulaba: las tarjetas
   quedaban a la misma altura pero los botones seguian desalineados. */
.mm-card__body > *:nth-last-child(2){ margin-bottom:12px; }


/* ===== 2.4.3 · Los filtros, por encima de la cabecera =====

   Historia corta, porque me costó dos intentos: la cabecera del sitio
   (#mh-header) es fixed con z-index 99990 y este panel iba en 9999, así que la
   cabecera pintaba siempre encima y se comía la franja de arriba del panel —
   justo donde vive la ✕, que además es sticky. No había forma de cerrarlo.

   Los dos intentos de meter el panel POR DEBAJO de la cabecera fallaron:
     · bajar su `top` movía también su suelo, y con él el botón «Ver
       resultados», que se pega abajo (roto en móvil);
     · desplazar el contenido con `padding-top` dejaba un hueco blanco enorme
       sobre el título.

   Lo correcto es lo que hace cualquier panel de filtros: ponerse ENCIMA de
   todo. El velo ya bloquea la página, la cabecera no se usa mientras filtras,
   y así no hay nada que medir, ni huecos, ni suelos que se muevan. Escritorio
   y móvil se comportan igual. */

.mm-drawer{ z-index: 100000; }

/* Sticky arriba del panel, que ahora es arriba de la pantalla. El -1px evita
   la rendija de subpíxel por la que se cuela el contenido al desplazar. */
.mm-fh{
  position: sticky;
  top: -1px;
  z-index: 7;
}

/* El pie manda sobre la cabecera del panel: si el contenido fuera tan corto
   que los dos sticky llegaran a tocarse, el que tiene que ganar es el botón. */
.mm-actions{ z-index: 8; }

/* Hueco para la barra de estado del móvil (la hora, la cobertura): sin esto
   el título queda pegado al borde de arriba en pantallas con muesca. */
.mm-drawer__panel{ padding-top: env(safe-area-inset-top, 0px); }

/* El área táctil de la ✕ era de 20px de icono con 6 de padding: pequeña de
   más para el pulgar. WCAG pide 24, y en móvil se agradecen 44. */
.mm-drawer__close{
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: -4px -6px -4px 0;
}
.mm-drawer__close:focus-visible{
  outline: 3px solid rgba(58,57,114,.32); outline-offset: 2px;
}


/* ===== 2.6.0 · Acceso permanente a filtros y orden ====================

   Móvil: dock flotante inferior. Escritorio: barra bajo la cabecera.
   Aparece solo cuando la barra original ha salido de pantalla. Al ser
   position:fixed no ocupa sitio en el flujo, así que no provoca CLS.

   El desplegable de orden es propio en ambos tamaños: el nativo desentona.
   El <select> sigue existiendo, oculto, porque es quien guarda el valor y
   dispara el evento que ya sabe filtrar — el menú solo escribe en él. */

.mm-plp-sticky{
  position: fixed;
  /* Por encima del corazón de la wishlist (z-index:9999 !important sobre cada
     tarjeta) y de la cabecera (99990). Por debajo del panel de filtros. */
  z-index: 99995;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.mm-plp-sticky[hidden]{ display: none; }
.mm-plp-sticky.is-on{ opacity: 1; pointer-events: auto; }
.mm-plp-sticky.is-hidden{ opacity: 0; pointer-events: none; }

.mm-plp-sticky__inner{
  display: flex; align-items: center;
  background: #fff; color: var(--mm-primary, #3A3971);
}

/* Los dos controles se ven como controles: borde, fondo y estado de pulsado.
   Antes eran texto suelto sobre blanco y no invitaban a hacer clic. */
.mm-plp-sticky__btn,
.mm-plp-sticky__sortbtn{
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(58,57,114,.16);
  background: #fff; cursor: pointer;
  color: var(--mm-primary, #3A3971);
  font-weight: 700; font-size: .9rem;
  font-family: inherit; line-height: 1;
  border-radius: 10px; padding: 10px 14px;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.mm-plp-sticky__btn:hover,
.mm-plp-sticky__sortbtn:hover{
  background: #f5f5fb; border-color: rgba(58,57,114,.32);
}
.mm-plp-sticky__btn:active,
.mm-plp-sticky__sortbtn:active{ transform: translateY(1px); }

.mm-plp-sticky__ico{ display: inline-flex; flex: 0 0 auto; }
.mm-plp-sticky__txt{ white-space: nowrap; }
.mm-plp-sticky__chev{ font-size: .62rem; opacity: .55; margin-left: 2px; }

.mm-plp-sticky__sort select{ display: none; }
.mm-plp-sticky__sort{ position: relative; display: flex; }

.mm-plp-sticky__n{
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--mm-accent, #E69130); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}

.mm-plp-sticky__sep{
  width: 1px; align-self: stretch; margin: 10px 0;
  background: rgba(58,57,114,.14); flex: 0 0 auto;
}

.mm-plp-sticky__total{
  font-size: .86rem; font-weight: 700; color: #4b5563;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-plp-sticky__btn:focus-visible,
.mm-plp-sticky__sortbtn:focus-visible{
  outline: 3px solid rgba(58,57,114,.30); outline-offset: 2px;
}

/* ── El menú de orden ─────────────────────────────────────────────────── */

.mm-plp-sticky__menu{
  position: absolute; z-index: 2;
  margin: 0; padding: 7px; list-style: none;
  background: #fff; border: 1px solid rgba(58,57,114,.12);
  border-radius: 14px; box-shadow: 0 14px 40px rgba(17,24,39,.18);
  min-width: 224px;
}
.mm-plp-sticky__menu[hidden]{ display: none; }

.mm-plp-sticky__op{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: #3f4451;
  white-space: nowrap; outline: none;
  transition: background .12s, color .12s;
}
.mm-plp-sticky__op + .mm-plp-sticky__op{ margin-top: 2px; }
.mm-plp-sticky__op:hover,
.mm-plp-sticky__op:focus{ background: #f3f2fa; color: var(--mm-primary, #3A3971); }

.mm-plp-sticky__op.is-sel{
  color: var(--mm-primary, #3A3971); font-weight: 800; background: #f0effa;
}
/* El check como elemento propio del flex, alineado a la derecha, no pegado
   al final del texto. */
.mm-plp-sticky__op.is-sel::after{
  content: '✓'; font-size: .8rem; line-height: 1; flex: 0 0 auto;
}

/* ── Móvil y tablet: dock flotante inferior ───────────────────────────── */
@media (max-width: 1024px){
  .mm-plp-sticky{
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(8px);
  }
  .mm-plp-sticky.is-on{ transform: translateY(0); }

  .mm-plp-sticky__inner{
    height: 54px; border-radius: 14px;
    border: 1px solid rgba(58,57,114,.10);
    box-shadow: 0 6px 22px rgba(17,24,39,.16);
  }
  /* Dentro del dock los controles son las dos mitades: sin borde propio, que
     el borde es el del dock. */
  .mm-plp-sticky__btn,
  .mm-plp-sticky__sort{ flex: 1 1 0; height: 100%; }
  .mm-plp-sticky__btn,
  .mm-plp-sticky__sortbtn{
    width: 100%; height: 100%; justify-content: center;
    border: 0; border-radius: 0; padding: 0; background: transparent;
  }
  .mm-plp-sticky__btn:active,
  .mm-plp-sticky__sortbtn:active{ transform: none; background: #f5f5fb; }

  .mm-plp-sticky__total,
  .mm-plp-sticky__val{ display: none; }

  .mm-plp-sticky__menu{
    bottom: calc(100% + 10px); left: 0; right: 0; min-width: 0;
  }
  .mm-plp-sticky__op{ padding: 13px 14px; font-size: .92rem; }
}

/* ── Escritorio: barra compacta bajo la cabecera ──────────────────────── */
@media (min-width: 1025px){
  .mm-plp-sticky{
    left: 0; right: 0;
    top: var(--mm-plp-sticky-top, 0px);
    transform: translateY(-10px);
    /* La barra flota sobre el listado, y sin una sombra clara se leía como
       parte de la página. Esto la despega. */
    background: #fff;
    box-shadow: 0 6px 20px rgba(17,24,39,.10);
    border-bottom: 1px solid rgba(58,57,114,.12);
  }
  .mm-plp-sticky.is-on{ transform: translateY(0); }

  .mm-plp-sticky__inner{
    height: 62px; gap: 14px;
    max-width: var(--mm-container, 1280px);
    margin: 0 auto; padding: 0 24px;
  }
  .mm-plp-sticky__sep{ display: none; }

  /* Filtrar es la acción principal: se distingue del resto. */
  .mm-plp-sticky__btn{
    background: var(--mm-primary, #3A3971); color: #fff;
    border-color: var(--mm-primary, #3A3971);
    box-shadow: 0 2px 8px rgba(58,57,114,.22);
  }
  .mm-plp-sticky__btn:hover{
    background: #2f2e5e; border-color: #2f2e5e;
    box-shadow: 0 4px 14px rgba(58,57,114,.28);
  }
  .mm-plp-sticky__n{ background: var(--mm-accent, #E69130); }

  .mm-plp-sticky__total{ margin-right: auto; font-size: .9rem; }

  .mm-plp-sticky__val{
    font-weight: 700; color: #6b7280; white-space: nowrap;
  }
  .mm-plp-sticky__val::before{
    content: ''; display: inline-block; width: 1px; height: 12px;
    background: rgba(58,57,114,.18); margin: 0 8px -1px 2px;
  }

  /* El envoltorio ocupa todo el alto de la barra para que el menú cuelgue
     de la barra y no del botón: si no, arranca unos píxeles por encima del
     borde inferior y se ve montado encima. */
  .mm-plp-sticky__sort{ height: 100%; align-items: center; }
  .mm-plp-sticky__menu{ top: calc(100% + 10px); right: 0; }
}

@media (prefers-reduced-motion: reduce){
  .mm-plp-sticky,
  .mm-plp-sticky__menu{ transition: none; transform: none !important; }
}

/* El widget de contacto flotante (gestor-popups-leads-mod) vive abajo a la
   derecha, justo donde aparece el dock en móvil. Mientras el dock está a la
   vista se sube por encima de él. */
@media (max-width: 1024px){
  body.mm-plp-sticky-on .contact-widget-button,
  body.mm-plp-sticky-on .contact-widget-submenu{
    transform: translateY(-66px);
    transition: transform .18s ease;
  }
}