/* ═══════════ CATÁLOGO ═══════════ */
.mp-tienda{ padding-block:var(--mp-e4) var(--mp-e7) }

.mp-migas{ margin-bottom:var(--mp-e3) }
.mp-migas__int{ color:var(--mp-tinta-3); font-size:.75rem; letter-spacing:.04em }
.mp-migas a:hover{ color:var(--mp-vino) }

.mp-tienda__tit{ font-size:clamp(1.75rem, 5vw, 2.5rem) }
.mp-tienda__desc{ margin-top:var(--mp-e2); max-width:var(--mp-ancho-tx) }
/* el reset del tema deja los <p> sin margen: acá sí hacen falta, es texto corrido */
.mp-tienda__desc p + p{ margin-top:.8em }

.mp-tienda__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--mp-e2); flex-wrap:wrap;
  margin-block:var(--mp-e4) var(--mp-e3);
  padding-bottom:var(--mp-e2);
  border-bottom:1px solid var(--mp-hilo);
}
.mp-tienda__cuenta{ color:var(--mp-tinta-2) }
.mp-tienda__cuenta strong{ color:var(--mp-tinta); font-weight:600 }

/* el selector de orden nativo, vestido: existe y se ve, no se esconde con CSS */
.mp-tienda__controles .woocommerce-ordering select,
.mp-tienda__controles select{
  appearance:none;
  background:transparent;
  border:0; border-bottom:1px solid var(--mp-hilo-firme);
  padding:.35rem 1.6rem .35rem .2rem;
  font-family:var(--mp-sans); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mp-tinta);
  cursor:pointer; border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%, calc(100% - 5px) 55%;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.mp-tienda__controles select:focus-visible{ outline-offset:4px }
.mp-tienda__controles{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap }

/* En el teléfono los tres controles no caben en una línea y caían uno bajo otro, cada
   uno con un ancho distinto y el botón de filtros 5 px corrido: cuatro renglones
   desalineados. `display:contents` disuelve la caja de los controles para que sus hijos
   entren en la misma retícula que el contador, y quedan dos filas parejas de orilla a
   orilla: [modelos · vistas] y [orden · filtros]. */
@media (max-width:639px){
  .mp-tienda__barra{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:.85rem .75rem;
  }
  .mp-tienda__controles{ display:contents }
  .mp-tienda__cuenta{ grid-area:1 / 1 }
  .mp-tienda__vistas{ grid-area:1 / 2; justify-self:end }
  .mp-tienda__controles .woocommerce-ordering{ grid-area:2 / 1; min-width:0 }
  .mp-tienda__controles .woocommerce-ordering select{ width:100% }
  .mp-filtros__abrir{ grid-area:2 / 2; justify-self:end; margin-left:0 }
}

/* ── retícula ── */
/* WooCommerce deja un clearfix (::before/::after con display:table) en la lista.
   Dentro de un grid esos pseudo-elementos se vuelven ÍTEMS y ocupan celdas:
   por eso el primer producto arrancaba en la segunda columna. */
/* Va con la misma especificidad que lo declara WooCommerce (.woocommerce ul.products::before),
   o la regla pierde y la celda se sigue ocupando. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{ content:none; display:none }

ul.products{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--mp-e4) var(--mp-e2);
}
@media (min-width:640px){ ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--mp-e5) var(--mp-e3) } }
@media (min-width:1024px){ ul.products{ grid-template-columns:repeat(4, minmax(0,1fr)) } }

/* ── la tarjeta ── */
/* Vertical 2:3 como las referencias: la foto es lo único que pesa.
   Una sola tipografía en toda la tarjeta. */
.mp-card{ display:flex; flex-direction:column; min-width:0 }

.mp-card__foto{
  position:relative; display:block;
  aspect-ratio:2/3;
  background:var(--mp-lino);
  overflow:hidden;
}
/* La imagen va posicionada, no con height:100%.
   El contenedor define su alto con aspect-ratio y no con una altura explícita, así que un
   porcentaje no tiene contra qué resolver: cae a `auto` y la foto cuadrada se queda en su
   alto natural, dejando una franja vacía abajo. */
.mp-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:2/3;   /* anula el `auto 1200/1200` que WordPress hereda de los atributos width/height */
  transition:transform var(--mp-medio) var(--mp-easing), opacity var(--mp-medio) var(--mp-easing);
}

/* Todas las fotos se cortan y se centran. La mezcla de packshot sobre blanco y foto de
   modelo sobre beige es un problema de fotografía, no de maquetación: se resuelve en el
   catálogo, no con reglas distintas por producto. El inventario de cuáles son producto
   suelto queda en el meta `_mp_encaje` para la corrección masiva de fotos. */
.mp-card__img{ object-fit:cover; object-position:center center }
.mp-card:hover .mp-card__img{ transform:scale(1.025) }

.mp-card__eti{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  font-size:.5625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.25rem .45rem;
  background:var(--mp-tinta); color:var(--mp-papel);
}
.mp-card__eti--oferta{ background:var(--mp-vino) }

.mp-card__agotado{
  position:absolute; inset:auto 0 0 0; z-index:2;
  background:rgba(251,250,247,.92); color:var(--mp-tinta-2);
  font-size:.5625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; padding:.4rem;
}

/* ── que la rejilla NO se desordene ──
   `align-content:start` es imprescindible desde que la tarjeta es una rejilla (lo
   necesita la banda de tallas): con filas `auto`, al estirarse la tarjeta para igualar
   su fila el sobrante se repartía ESTIRANDO las filas, y la tarjeta sin colores
   empujaba su propio texto hacia abajo. Medido en /vestidos/: mismo pie de foto
   (1882 px) y los títulos de la misma fila arrancando en 1894 y 1915. */
.mp-card{ align-content:start }
.mp-card__info{ padding-top:.75rem; display:grid; align-content:start; gap:.5rem }

.mp-card__nom{
  font-family:var(--mp-sans);
  font-size:.8125rem; font-weight:400; line-height:1.45;
  letter-spacing:.005em;
  margin:0;
  /* SIEMPRE dos líneas: los nombres cortos reservan el hueco y los largos se cortan,
     así el precio queda a la misma altura en toda la fila. */
  min-height:calc(2 * 1.45em);
  max-height:calc(2 * 1.45em);
  overflow:hidden;
}
/*
 * El corte se DESVANECE en vez de cortar a hacha.
 *
 * Aquí había un `-webkit-line-clamp` para lograr los puntos suspensivos, pero este
 * navegador se come el `display:-webkit-box` (lo computa `flow-root`) y el recorte
 * nunca se aplicaba: el título quedaba cortado en seco a media palabra («…Lycra Fria
 * Vu»). En vez de pelear con una propiedad que no responde, la última línea se apaga
 * con un degradado hacia el color del papel: se entiende que el nombre sigue, sin
 * depender del soporte de nada.
 *
 * Si el título cabe en una línea el degradado cae sobre el hueco vacío y no se ve.
 */
/*
 * El relleno se le gana a WooCommerce, no a mano.
 *
 * `woocommerce.css` trae `.woocommerce ul.products li.product h3 { padding:.5em 0 }`
 * —especificidad (0,2,3)— y aplastaba cualquier `padding:0` puesto sobre la clase
 * `.mp-card__nom` (0,1,0). Como la caja cuenta el relleno, de los 43,5 px de alto al
 * texto le quedaban 28,5: una línea y pico, y la segunda salía partida por la mitad.
 * Este selector iguala su forma y le suma la clase, así que manda.
 * El aire entre título y precio lo pone el `gap` de la rejilla.
 */
ul.products li.product h3.mp-card__nom{ padding:0 }

.mp-card__nom{ position:relative }
.mp-card__nom::after{
  content:""; position:absolute; right:0; bottom:0;
  width:3.5em; height:1.45em;
  background:linear-gradient(to right, rgba(251,250,247,0) 0%, var(--mp-papel) 72%);
  pointer-events:none;
}


.mp-card__nom a{ transition:color var(--mp-rapido) var(--mp-easing) }
.mp-card__precio{ font-size:.8125rem; font-weight:500; letter-spacing:.03em; color:var(--mp-tinta) }
.mp-card__precio del{ color:var(--mp-tinta-3); font-weight:400; margin-right:.35rem }
.mp-card__precio ins{ text-decoration:none; color:var(--mp-vino) }

/* colores: la foto ES el selector */
/* Una sola línea, con alto reservado exista o no (el marcado la imprime vacía).
   Con `wrap` y cinco miniaturas la fila saltaba a dos líneas en el ancho de un
   teléfono: 37 px de más en unas tarjetas sí y en otras no, que es exactamente lo
   que desordenaba la rejilla. Las que no caben se recortan; el «+N» ya avisa
   cuántos colores más hay. */
.mp-card__colores{
  display:flex; align-items:center; gap:.45rem; margin-top:0;
  flex-wrap:nowrap; height:40px; overflow:hidden;
}
@media (max-width:639px){
  .mp-card__colores{ height:32px; gap:.35rem }
  .mp-card__color img{ width:28px; height:28px }
  .mp-card__color-mas{ font-size:.625rem }
}
.mp-card__color{
  display:block; flex:0 0 auto;
  width:32px; height:32px; overflow:hidden; border-radius:50%;
  border:1px solid transparent;
  transition:border-color var(--mp-rapido) var(--mp-easing);
}
.mp-card__color img{ width:100%; height:100%; object-fit:cover }
.mp-card__color:hover{ border-color:var(--mp-hilo-firme) }
.mp-card__color.is-activo{ border-color:var(--mp-tinta) }
/* `flex-shrink:0` + `nowrap`: al poner la fila en una sola línea, flex comprimía el
   contador y «+10» se partía en «+1 / 0». Ni las miniaturas ni el contador se encogen. */
.mp-card__color-mas{
  flex:0 0 auto; white-space:nowrap;
  font-size:.6875rem; color:var(--mp-tinta-3); letter-spacing:.04em; padding-inline:.1rem;
}


.mp-tienda__vacio{
  padding-block:var(--mp-e6);
  text-align:center; max-width:46ch; margin-inline:auto;
}

/* paginación */
.woocommerce-pagination{ margin-top:var(--mp-e6) }
.woocommerce-pagination ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap;
}
.woocommerce-pagination a, .woocommerce-pagination span{
  display:block; min-width:2.25rem; padding:.5rem;
  text-align:center; font-size:.8125rem;
  border:1px solid transparent;
  font-variant-numeric:tabular-nums;
}
.woocommerce-pagination a:hover{ border-color:var(--mp-hilo-firme) }
.woocommerce-pagination .current{ border-color:var(--mp-tinta); font-weight:600 }

/* ═══════════ TRES VISTAS DEL CATÁLOGO ═══════════ */
.mp-tienda__vistas{ display:flex; align-items:center; gap:.1rem }
.mp-tienda__vista{
  display:flex; padding:.4rem; color:var(--mp-hilo-firme);
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-tienda__vista:hover{ color:var(--mp-tinta-2) }
.mp-tienda__vista.is-activa{ color:var(--mp-tinta) }

/* «normal» (2 en el teléfono, 4 en el escritorio) es lo que ya hace ul.products */
html[data-mp-vista="grande"] ul.products{ grid-template-columns:repeat(1, minmax(0,1fr)); gap:var(--mp-e5) }
@media (min-width:640px){
  html[data-mp-vista="grande"] ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--mp-e6) var(--mp-e4) }
}

html[data-mp-vista="compacta"] ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--mp-e3) .55rem }
@media (min-width:640px){ html[data-mp-vista="compacta"] ul.products{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
@media (min-width:1024px){ html[data-mp-vista="compacta"] ul.products{ grid-template-columns:repeat(6, minmax(0,1fr)) } }

/* en compacta la tarjeta se aprieta: el nombre baja de tamaño y los colores se achican
   (no se esconden: son la señal de que el modelo viene en más de un color) */
html[data-mp-vista="compacta"] .mp-card__nom{ font-size:.75rem }
html[data-mp-vista="compacta"] .mp-card__precio{ font-size:.75rem }
html[data-mp-vista="compacta"] .mp-card__colores{ height:26px; gap:.3rem }
html[data-mp-vista="compacta"] .mp-card__color{ width:22px; height:22px }
html[data-mp-vista="compacta"] .mp-card__color img{ width:100%; height:100% }
html[data-mp-vista="compacta"] .mp-card__color-mas{ font-size:.625rem; padding-inline:0 }
@media (max-width:639px){
  html[data-mp-vista="compacta"] .mp-card__colores{ height:22px; gap:.2rem }
  html[data-mp-vista="compacta"] .mp-card__color{ width:18px; height:18px }
  html[data-mp-vista="compacta"] .mp-card__color-mas{ font-size:.5625rem }
}
html[data-mp-vista="compacta"] .mp-card__eti{ font-size:.5rem; padding:.2rem .35rem }

/* en grande la foto manda, pero un 2:3 a media pantalla da tarjetas de casi 1000 px
   de alto: se abre un poco el encuadre para que entren dos filas en pantalla */
html[data-mp-vista="grande"] .mp-card__foto,
html[data-mp-vista="grande"] .mp-card__img{ aspect-ratio:3/4 }
html[data-mp-vista="grande"] .mp-card__nom{ font-size:1rem }
html[data-mp-vista="grande"] .mp-card__precio{ font-size:.9375rem }

/* ═══════════ FILTROS ═══════════ */
.mp-filtros__abrir{
  display:flex; align-items:center; gap:.45rem;
  padding:.35rem .8rem; margin-left:.3rem;
  border:1px solid var(--mp-hilo-firme); background:transparent; color:var(--mp-tinta);
  font-family:var(--mp-sans); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:border-color var(--mp-rapido) var(--mp-easing);
}
.mp-filtros__abrir:hover{ border-color:var(--mp-tinta) }
.mp-filtros__abrir.is-activo{ border-color:var(--mp-tinta); background:var(--mp-tinta); color:var(--mp-papel) }
.mp-filtros__cuenta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--mp-vino); color:#fff; font-size:.5625rem; font-weight:600;
}

/* los filtros puestos, sobre la grilla */
.mp-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:var(--mp-e3) }
.mp-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .7rem; border:1px solid var(--mp-hilo-firme);
  font-size:.75rem; color:var(--mp-tinta-2);
  transition:border-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-chip:hover{ border-color:var(--mp-tinta); color:var(--mp-tinta) }
.mp-chip--limpiar{ border-style:dashed; color:var(--mp-vino) }

/* el panel */
.mp-filtros__cuerpo{ flex:1 1 auto; overflow-y:auto; padding:0 var(--mp-gutter) }
.mp-filtros__grupo{ border-bottom:1px solid var(--mp-hilo) }
.mp-filtros__grupo summary{
  padding-block:1rem; cursor:pointer; list-style:none;
  font-size:.75rem; font-weight:600; letter-spacing:var(--mp-track-etq); text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.mp-filtros__grupo summary::-webkit-details-marker{ display:none }
.mp-filtros__grupo summary::after{ content:"+"; font-size:1.05rem; color:var(--mp-tinta-3) }
.mp-filtros__grupo[open] summary::after{ content:"–" }

.mp-filtros__opciones{ display:flex; flex-direction:column; padding-bottom:.9rem }
.mp-filtros__opcion{
  display:flex; align-items:center; gap:.6rem; padding-block:.42rem;
  font-size:.875rem; color:var(--mp-tinta-2); cursor:pointer;
}
.mp-filtros__opcion:hover{ color:var(--mp-tinta) }
/* la casilla real queda accesible para el teclado, pero lo que se ve es el cuadrito */
.mp-filtros__opcion input{
  position:absolute; width:1px; height:1px; opacity:0; margin:0;
}
.mp-filtros__marca{
  width:15px; height:15px; flex:0 0 auto;
  border:1px solid var(--mp-hilo-firme); background:transparent;
  transition:background-color var(--mp-rapido) var(--mp-easing), border-color var(--mp-rapido) var(--mp-easing);
}
.mp-filtros__marca{ position:relative }
.mp-filtros__marca--radio{ border-radius:50% }
.mp-filtros__opcion:has(input:checked){ color:var(--mp-tinta) }
.mp-filtros__opcion:has(input:checked) .mp-filtros__marca{
  background:var(--mp-tinta); border-color:var(--mp-tinta);
}
/* el ticket, dibujado con el borde de una caja girada */
.mp-filtros__opcion:has(input:checked) .mp-filtros__marca::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--mp-papel); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.mp-filtros__opcion:has(input:checked) .mp-filtros__marca--radio::after{
  left:3px; top:3px; width:7px; height:7px; border:0; border-radius:50%;
  background:var(--mp-papel); transform:none;
}
/* el foco del teclado se ve en el cuadrito, ya que la casilla real está oculta */
.mp-filtros__opcion input:focus-visible + .mp-filtros__marca{ outline:2px solid var(--mp-vino); outline-offset:2px }
.mp-filtros__nombre{ flex:1 1 auto; min-width:0 }
.mp-filtros__n{ color:var(--mp-tinta-3); font-size:.75rem; font-variant-numeric:tabular-nums }

.mp-filtros__form{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0 }
.mp-filtros__pie{ flex:0 0 auto; padding:1.1rem var(--mp-gutter) 1.4rem; border-top:1px solid var(--mp-hilo) }
.mp-filtros__pie .mp-drawer__checkout{ width:100%; border:0; cursor:pointer; font-family:var(--mp-sans) }

/* estrellas en la tarjeta: sólo aparecen si el producto tiene opiniones de verdad */
/* altura fija: con o sin opiniones la fila mide lo mismo, así una prenda valorada no
   estira a las tres que tiene al lado */
.mp-card__estrellas{
  display:flex; align-items:center; gap:.35rem; margin-top:.15rem;
  min-height:1.15rem;
}
.mp-card__resenas{ font-size:.6875rem; color:var(--mp-tinta-3) }
html[data-mp-vista="compacta"] .mp-card__estrellas{ display:none }

/* ═══════════ FAVORITOS ═══════════ */
/* El corazón de la tarjeta va sobre la foto, arriba a la derecha: el lado izquierdo
   ya lo ocupan las etiquetas de «Nuevo» y «Oferta». */
.mp-fav{
  display:flex; align-items:center; justify-content:center;
  padding:.35rem; background:none; border:0; cursor:pointer;
  color:var(--mp-tinta-2);
  transition:color var(--mp-rapido) var(--mp-easing), transform var(--mp-rapido) var(--mp-easing);
}
.mp-fav:hover{ color:var(--mp-vino) }
.mp-fav svg{ display:block; transition:fill var(--mp-rapido) var(--mp-easing) }
.mp-fav.is-guardado{ color:var(--mp-vino) }
.mp-fav.is-guardado svg path{ fill:currentColor }

.mp-fav--flotante{
  position:absolute; top:.35rem; right:.35rem; z-index:3;
  color:var(--mp-tinta);
}
/* sobre la foto hace falta un respaldo: hay prendas oscuras y otras casi blancas */
.mp-fav--flotante::before{
  content:""; position:absolute; inset:0;
  background:var(--mp-papel); opacity:.82; border-radius:50%;
  transition:opacity var(--mp-rapido) var(--mp-easing);
}
.mp-fav--flotante svg{ position:relative }
.mp-fav--flotante:hover::before{ opacity:1 }

/* la tarjeta es el marco del corazón flotante */
.mp-card{ position:relative }

/* un latido corto al guardar, para que se note que quedó */
@keyframes mp-latido{ 40%{ transform:scale(1.22) } 70%{ transform:scale(.94) } 100%{ transform:scale(1) } }
.mp-fav.late svg{ animation:mp-latido .42s var(--mp-easing) }
@media (prefers-reduced-motion: reduce){ .mp-fav.late svg{ animation:none } }

/* El contador del corazón no lleva el color del carrito —ese avisa de una compra en
   curso, este sólo cuenta— y se pega más al ícono: con el carrito al lado, la burbuja
   del carrito quedaba a 3 px de la del corazón y las dos se leían como una sola. */
.mp-cab__cuenta--favs{
  background:var(--mp-tinta);
  top:-1px; right:-2px;
  min-width:14px; height:14px; line-height:14px; font-size:.5rem;
}
/* el apretón de antes ya no hace falta: los íconos tienen tamaño fijo en cabecera.css */

/* ── la página ── */
/* El alto y el ancho los pone `page-favoritos.php`, que usa el mismo armazón que el
   catálogo. Acá sólo va lo propio de favoritos. */
.mp-favs{ padding-block:0 var(--mp-e6) }
.mp-favs__vacio{ padding-block:var(--mp-e5) }
.mp-favs__vacio-tit{ font-size:var(--mp-t-medio); margin-bottom:.6rem }
.mp-favs__ir{
  display:inline-block; margin-top:var(--mp-e3);
  padding:.75rem 1.4rem; background:var(--mp-tinta); color:var(--mp-papel);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-favs__ir:hover{ background:var(--mp-vino); color:var(--mp-papel) }
.mp-favs__cargando{ padding-block:var(--mp-e5); color:var(--mp-tinta-3) }

/*
 * Quitar de favoritos SE PUEDE DESHACER.
 *
 * Era la única acción del sitio que destruía algo de un toque y sin vuelta atrás: el
 * corazón queda sobre la foto, en una retícula de prendas parecidas, y un dedo que
 * resbala borraba la prenda guardada sin decir nada. Ahora la tarjeta no desaparece:
 * se apaga en su sitio con un «deshacer» encima, y recién se va cuando la clienta
 * recarga o vuelve a entrar. Lo guardado ya se actualizó igual, así que si se va sin
 * deshacer el resultado es el mismo que antes.
 */
.mp-card.is-quitada > *{ opacity:.25; transition:opacity var(--mp-rapido) var(--mp-easing) }
.mp-card.is-quitada .mp-rapida{ display:none }
.mp-card__quitada{
  grid-area:1 / 1; align-self:center; justify-self:center; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:1rem 1.15rem; text-align:center;
  background:var(--mp-papel); box-shadow:0 2px 20px rgba(30,27,25,.13);
}
/* el aviso es hijo de la tarjeta, así que la regla de arriba también lo apagaría */
.mp-card.is-quitada > .mp-card__quitada{ opacity:1 }
.mp-card__quitada-txt{ font-size:.75rem; letter-spacing:.06em; color:var(--mp-tinta-2) }
.mp-card__deshacer{
  background:none; border:0; padding:0 0 2px; cursor:pointer;
  font-family:var(--mp-sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-tinta); border-bottom:1px solid currentColor;
}
.mp-card__deshacer:hover{ color:var(--mp-vino) }

/* ═══════════ PRENDAS POR TIPO DE CUERPO ═══════════ */
/* Cierra el círculo: la ficha dice a qué figura le queda bien, esa figura tiene su
   página con consejos, y la página termina mostrando qué comprar. */
.mp-cuerpo-prendas{
  margin-top:var(--mp-e6); padding-top:var(--mp-e5);
  border-top:1px solid var(--mp-hilo);
}
/* La plantilla de página encierra el contenido en la columna de lectura (66ch), que es
   lo correcto para un texto y demasiado angosto para una retícula de productos: cuatro
   tarjetas quedaban apretadas en media pantalla. La grilla se sale de esa columna y se
   centra respecto de la página, sin depender del ancho exacto del contenedor.
   El ancho usa 100vw menos los márgenes, que deja sobra para la barra de desplazamiento
   y evita el desborde horizontal clásico de 100vw. */
@media (min-width:900px){
  .mp-ancho--texto .mp-cuerpo-prendas{
    position:relative; left:50%; transform:translateX(-50%);
    width:min(var(--mp-ancho), calc(100vw - var(--mp-gutter) * 2));
  }
}
.mp-cuerpo-prendas__tit{ font-size:clamp(1.3rem,3vw,1.8rem); margin-bottom:.4rem }
.mp-cuerpo-prendas__tit em{ font-style:normal; color:var(--mp-vino) }
.mp-cuerpo-prendas__bajada{ margin-bottom:var(--mp-e4); max-width:52ch }
.mp-cuerpo-prendas__pie{ margin-top:var(--mp-e4); text-align:center }
.mp-cuerpo-prendas__todo{
  display:inline-block; padding:.75rem 1.5rem;
  border:1px solid var(--mp-tinta-2); color:var(--mp-tinta);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  transition:border-color var(--mp-rapido) var(--mp-easing), background-color var(--mp-rapido) var(--mp-easing);
}
.mp-cuerpo-prendas__todo:hover{ border-color:var(--mp-tinta); background:var(--mp-lino) }

/* ═══════════ COMPRA RÁPIDA EN LA TARJETA ═══════════
   Una BANDA al pie de la foto, a sangre. Nada de cajas.

   El primer intento fue una caja con borde negro que contenía cinco botones con su
   propio borde: seis rectángulos apilados sobre la prenda, en un sitio donde todo lo
   demás son hilos de 1px y tipografía espaciada. Se veía como un formulario pegado
   encima de la foto. Acá la banda no tiene borde ni márgenes: se apoya en el filo de
   la imagen, el fondo es papel casi opaco y las tallas son TEXTO, no botones.        */
.mp-card{ display:grid; grid-template-columns:1fr; position:relative }
.mp-card > .mp-card__foto{ grid-area:1 / 1 }
.mp-card > .mp-rapida{ grid-area:1 / 1; align-self:end; z-index:3 }
.mp-card > .mp-card__info{ grid-area:2 / 1 }

/* el contenedor no tapa la foto: sólo reciben clic sus hijos */
.mp-rapida{ pointer-events:none }
.mp-rapida__boton,
.mp-rapida__tallas{ pointer-events:auto }

/* ── la banda ── */
.mp-rapida__boton{
  display:block; width:100%; padding:.72rem .5rem;
  background:rgba(251,250,247,.94); color:var(--mp-tinta);
  border:0; box-shadow:0 -1px 0 var(--mp-hilo);
  font-family:var(--mp-sans);
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-rapida__boton:hover{ background:var(--mp-tinta); color:var(--mp-papel) }
.mp-rapida__boton.is-cargando{ opacity:.6; pointer-events:none }
.mp-rapida.is-abierta .mp-rapida__boton{ display:none }

/* ── las tallas: texto repartido, sin bordes ── */
.mp-rapida__tallas{
  /* agrupadas al centro, no estiradas de borde a borde: repartir cinco tallas en
     635 px las deja tan separadas que parecen caídas ahí por accidente */
  display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem;
  padding:.35rem .25rem;
  background:rgba(251,250,247,.96);
  border:0; box-shadow:0 -1px 0 var(--mp-hilo);
}
.mp-rapida__talla{
  flex:0 1 auto; min-width:44px; padding:.42rem .6rem;
  background:transparent; border:0; color:var(--mp-tinta);
  font-family:var(--mp-sans);
  font-size:.75rem; letter-spacing:.08em; line-height:1.2;
  cursor:pointer;
  transition:color var(--mp-rapido) var(--mp-easing);
}
.mp-rapida__talla:hover{
  color:var(--mp-vino);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
}
/* agotada: se lee, pero se nota que no está */
.mp-rapida__talla.is-agotada{
  color:var(--mp-tinta-2); opacity:.42;
  text-decoration:line-through; text-decoration-thickness:1px;
  cursor:not-allowed;
}
.mp-rapida__talla.is-agotada:hover{ color:var(--mp-tinta-2) }

.mp-rapida__cargando,
.mp-rapida__ver{
  display:block; width:100%; text-align:center;
  font-size:.6875rem; letter-spacing:.08em; padding:.45rem;
  color:var(--mp-tinta-2);
}

/* ── escritorio: la banda se asoma al pasar el mouse ──
   Entra con un desvanecido y un desplazamiento de 6px, no de golpe: sobre una vitrina
   de fotos, un bloque que aparece seco se lee como un error de carga.
   Y cuando el JS ya trajo las tallas, el botón intermedio sobra: se pasa el mouse y se
   elige, un gesto en vez de dos. El botón queda de respaldo si las tallas no cargan. */
@media (hover:hover) and (min-width:700px){
  .mp-rapida{
    opacity:0; transform:translateY(6px);
    transition:opacity .26s var(--mp-easing), transform .26s var(--mp-easing);
  }
  .mp-card:hover .mp-rapida,
  .mp-card:focus-within .mp-rapida,
  .mp-rapida.is-abierta{ opacity:1; transform:none }

  .mp-rapida.tiene-tallas .mp-rapida__boton{ display:none }
  /* algo más liviana que en el teléfono, pero SIN `backdrop-filter`: fuerza
     composición en GPU, cuesta caro en un móvil y sobre un fondo ya casi opaco no
     se nota. (De paso colgaba las capturas de verificación.) */
  .mp-rapida__tallas{ background:rgba(251,250,247,.93) }
}
/* en un teléfono no existe «pasar el mouse»: si se esconde, no se descubre nunca */
@media (max-width:699px){
  .mp-rapida{ opacity:1 }
  .mp-rapida__boton{ font-size:.625rem; padding:.6rem .4rem; letter-spacing:.1em }
  .mp-rapida__talla{ font-size:.6875rem }
  /* compacta en teléfono: tarjetas de ~110 px; la banda partía «Añadir al carrito» en
     dos líneas y tapaba un tercio de la foto. Ahí se entra a la prenda tocando la foto. */
  html[data-mp-vista="compacta"] .mp-rapida{ display:none }
}



/* La vista «compacta» del catálogo esconde los colores; esa preferencia es de la grilla,
   no de las filas de recomendados de la ficha, donde el color es justo lo que falta */
html[data-mp-vista] .mp-fila__item .mp-card__colores{ display:flex }