:root{
  --mm-primary:#3a3972;
  --mm-secondary:#e69130;
  --mm-text:#111827;
  --mm-muted:#6B7280;
  --mm-bg:#ffffff;
  --mm-surface:#f8fafc;
  --mm-border:rgba(17,24,39,.12);
  --mm-radius:16px;

  /* ancho del desvanecido lateral del slider externo */
  --mm-fade:28px;
}

/* ===================== Card ===================== */
.mm-card{
  background:#fff;
  border:1px solid var(--mm-border);
  border-radius:var(--mm-radius);
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

/* Media (imagen) — ratio consistente y cover SIEMPRE */
.mm-card__media{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:4 / 3;        /* ratio fijo para unificar alturas */
  background:#f3f4f6;
}
.mm-carousel,
.mm-carousel__track,
.mm-carousel__slide{width:100%;height:100%}
.mm-carousel__track{
  display:flex;
  overflow:hidden;
  scroll-snap-type:x mandatory;
  align-items:stretch;
  touch-action:auto;         /* no bloquear scroll vertical */
}
.mm-carousel__slide{flex:0 0 100%;scroll-snap-align:center;display:flex}
.mm-card__img{
  width:100%;
  height:100%;
  object-fit:cover;          /* que SIEMPRE rellene */
  object-position:center center;
  display:block;
  background:transparent;
  image-rendering:auto;
}

/* Controles carrusel interno */
.mm-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%) scale(.96);
  background:rgba(255,255,255,.92);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{outline:2px solid rgba(58,57,114,.4);outline-offset:2px}

/* Dots carrusel interno */
.mm-dots{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;gap:6px;padding:4px 8px;border-radius:14px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(5px);
  box-shadow:0 2px 8px rgba(17,24,39,.1)
}
.mm-dot{width:6px;height:6px;border-radius:999px;background:rgba(0,0,0,.25);cursor:pointer}
.mm-dot.is-active{background:var(--mm-primary)}

/* Body */
.mm-card__body{padding:14px;display:flex;flex-direction:column;gap:10px}
.mm-card__title{margin:0}
.mm-card__title a{
  color:#3a3972;font-weight:700;text-decoration:none;
  font-size:clamp(1rem,.98rem + .25vw,1.15rem);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.mm-card__title a:hover{text-decoration:underline}
.mm-card__price{color:#e69130;font-weight:400;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:clamp(.98rem,.96rem + .18vw,1.06rem);line-height:1.2}
.mm-card__price .woocommerce-Price-amount{color:#e69130;font-weight:400}
.mm-card__unit{color:#3a3972;font-weight:500}
.mm-card__vat{color:#e69130;font-weight:400;font-size:.95em}
.mm-card__btn{
  display:inline-block;text-align:center;padding:10px 12px;border-radius:10px;
  background:#3a3972;color:#fff;text-decoration:none;font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease
}
@media (hover:hover){.mm-card__btn:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(58,57,114,.25);transform:translateY(-1px)}}

/* Cabeceras de bloque */
.mm-fh__title{margin:0 0 10px;font-size:20px;font-weight:800}

/* ===================== Slider externo ===================== */
.mm-slider{position:relative}

/* El viewport ES el scroller (clave para móvil) */
.mm-slider__viewport{
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  /* desvanecido lateral sin overlay */
  -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%);

  box-shadow:
    inset var(--mm-fade) 0 20px -20px rgba(17,24,39,.12),
    inset calc(-1*var(--mm-fade)) 0 20px -20px rgba(17,24,39,.12);
}
.mm-slider__viewport::-webkit-scrollbar{display:none}

/* sin scroll => sin máscara y se ocultan controles por JS */
.mm-slider__viewport.is-noscroll{-webkit-mask-image:none;mask-image:none;box-shadow:none}

/* Track 1 fila */
.mm-slider__track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:18px;
  padding:2px 2px;
}

/* Cada slide ocupa 1/N del viewport */
.mm-slider__slide{
  box-sizing:border-box;
  flex:0 0 calc(100% / var(--vis,5));  /* por defecto 5 en desktop */
  min-width:0;
  scroll-snap-align:start;
}

/* Flechas externas */
.mm-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  font-size:22px; line-height:1;
  background:var(--mm-primary); color:#fff; border:0;
  box-shadow:0 4px 14px rgba(17,24,39,.18);
  cursor:pointer; transition:filter .18s, transform .18s, box-shadow .18s;
}
.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}
  .mm-slider:hover .mm-slider__nav{opacity:1; pointer-events:auto}
}

/* Dots externos */
.mm-slider__dots{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin-top:10px;
}
.mm-slider__dot{
  width:8px;height:8px;border-radius:999px;background:rgba(17,24,39,.2);
  cursor:pointer; transition:transform .15s, background .15s;
}
.mm-slider__dot.is-active{background:var(--mm-primary); transform:scale(1.05)}

/* Responsivo */
@media (max-width:980px){
  .mm-slider__track{gap:16px}
  .mm-slider{ --vis: 3 }                 /* tablet: 3 visibles */
  .mm-slider__nav{width:40px;height:40px}
  .mm-slider__nav.is-prev{ left:-14px }
  .mm-slider__nav.is-next{ right:-14px }
}
@media (max-width:767px){
  .mm-slider{ --vis: 1 }                 /* móvil: 1 visible */
  .mm-slider__track{gap:12px}
  .mm-slider__nav{display:none !important}  /* nunca flechas en móvil */
  .mm-slider__dot{width:12px;height:12px}
}

/* Los dos módulos comparten estilos; no forzamos diferencias */