/* ==========================================================================
   MAVERICK 1997 — home-rails.css
   Carruseles de producto (#novedades / #mas-vendidos / #ofertas),
   tarjeta de producto y sección de reseñas.

   Valores tomados del prototipo. Tres prefijos, ninguno pisa a otro agente:
     .mvk-rail-*  carrusel y encabezado de sección
     .mvk-card-*  tarjeta de producto
     .mvk-rev-*   sección de reseñas

   Reglas que ordenan todo este archivo:
   · Sin border-radius, salvo los círculos (flechas, tilde) al 50% y los
     puntos del carrusel de reseñas, que son pastillas de 5px porque se
     estiran a 26px de ancho.
   · Un solo color: el rojo va únicamente en el importe de la cuota.
   · Nada arranca en opacity:0. Lo que anima al entrar usa .mvk-reveal (o la
     clase .is-scanning que agrega el JS). Sin JS se ve todo, quieto.
   · Los movimientos de posición usan las propiedades translate/scale, no
     transform: así el bloque de prefers-reduced-motion de main.css puede
     apagar animaciones sin descolocar las flechas ni abrir los overlays.

   ⚠️ No meter SVG acá. Los íconos viven en inc/icons.php.
   ========================================================================== */

/* ==========================================================================
   1. Sección de carrusel
   ========================================================================== */

.mvk-rail {
  padding: var(--mvk-sec-top) var(--mvk-pad) clamp(34px, 4.5vw, 62px);
  /* El pie linkea a #novedades, #mas-vendidos y #ofertas y el bloque promo +
     header es fijo: sin esto el título queda tapado. --mvk-hdr-offset ya vale
     102px en celular y 140px en escritorio; el fallback cubre el caso de que
     header.css no esté cargado en esa plantilla. */
  scroll-margin-top: calc(var(--mvk-hdr-offset, 102px) + 12px);
}

/* Novedades es la única sin aire arriba: se pega a la sección de categorías. */
.mvk-rail--novedades {
  padding-top: 0;
  margin-top: clamp(-8px, -1vw, 0px);
}

/* Ofertas cierra el bloque de las tres. */
.mvk-rail--ofertas {
  padding-bottom: var(--mvk-sec-bottom);
}

.mvk-rail-wrap {
  max-width: var(--mvk-max-wide);
  margin: 0 auto;
}

/* --- Encabezado centrado ------------------------------------------------- */

.mvk-rail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  border-top: 1px solid var(--mvk-black);
  padding-top: clamp(26px, 3vw, 44px);
  margin-bottom: clamp(30px, 4vw, 52px);
}

.mvk-rail--novedades .mvk-rail-head { gap: 18px; }

/* Misma escala que .mvk-cat-title: el token vale clamp(25px, 5.4vw, 74px). */
.mvk-rail-title {
  font-size: var(--mvk-h2-section);
}

.mvk-rail-sub {
  margin: 0;
  max-width: 40ch;
  font: 300 13.5px/1.6 var(--mvk-sans);
  color: var(--mvk-text-mid);
  text-wrap: pretty;
}

/* Enlace subrayado de #novedades */
.mvk-rail-link {
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mvk-black);
  border-bottom: 1.5px solid var(--mvk-black);
  padding-bottom: 6px;
}

.mvk-rail-link:hover {
  color: var(--mvk-black);
  border-bottom-color: var(--mvk-black);
}

/* Botón de #ofertas */
.mvk-rail-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--mvk-black);
  color: var(--mvk-black);
  font: 600 10.5px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, gap .3s var(--mvk-ease);
}

.mvk-rail-btn:hover,
.mvk-rail-btn:focus-visible {
  background: var(--mvk-black);
  color: var(--mvk-white);
  gap: 18px;
}

.mvk-rail-btn > * { width: 13px; height: 13px; flex: none; }

/* --- Rail ---------------------------------------------------------------- */

.mvk-rail-viewport {
  position: relative;
  max-width: var(--mvk-max);
  margin: 0 auto;
}

.mvk-rail-slides {
  display: flex;
  /* Con pocos productos quedan centrados; con muchos arrancan a la izquierda
     sin que se corte el primero. El fallback va antes por si el navegador no
     entiende la palabra clave `safe`. */
  justify-content: flex-start;
  justify-content: safe center;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  --mvk-rail-slide-w: calc((100% - 14px) / 2);
}

.mvk-rail-slide {
  flex: none;
  width: var(--mvk-rail-slide-w);
  scroll-snap-align: start;
  transition: opacity .75s cubic-bezier(.22, 1, .28, 1), translate .9s cubic-bezier(.22, 1, .28, 1), scale .9s cubic-bezier(.22, 1, .28, 1);
}

/* Entrada lateral del rail de novedades. La clase .is-scanning la pone el JS
   sólo si hay movimiento permitido: sin JS, todas las tarjetas se ven. */
.mvk-rail-slides.is-scanning .mvk-rail-slide:not(.is-inview) {
  opacity: 0;
  translate: 0 16px;
  scale: .985;
}

/* --- Flechas ------------------------------------------------------------- */

.mvk-rail-arrow {
  position: absolute;
  top: 38%;              /* a la altura de la foto, no del bloque de texto */
  translate: 0 -50%;
  z-index: 3;
  width: clamp(38px, 3vw, 48px);
  height: clamp(38px, 3vw, 48px);
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--mvk-black);
  color: var(--mvk-white);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--mvk-shadow-fab);
  transition: scale .3s var(--mvk-ease), opacity .3s ease;
}

.mvk-rail-arrow > * { width: 14px; height: 14px; }

.mvk-rail-arrow--prev { left: clamp(-20px, -1.4vw, -6px); }
.mvk-rail-arrow--next { right: clamp(-20px, -1.4vw, -6px); }

.mvk-rail-arrow:hover  { scale: 1.06; }
.mvk-rail-arrow:active { scale: .9; }

/* --- Pausa del rail que se mueve solo ------------------------------------ */

/* WCAG 2.2.2: el rail de novedades avanza cada 4,2 s, así que tiene que haber
   una forma explícita de pararlo. El botón lo muestra el JS y sólo cuando el
   autoplay realmente arrancó: sin JS (o con movimiento reducido) no hay nada
   que pausar y el control no aparece. */
.mvk-rail-motion {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.mvk-rail-motion[hidden] { display: none; }

.mvk-rail-pause {
  border: 0;
  border-bottom: 1px solid var(--mvk-black);
  background: transparent;
  padding: 0 0 5px;
  color: var(--mvk-black);
  font: 600 10px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .3s ease;
}

.mvk-rail-pause:hover { opacity: .62; }

@media (min-width: 760px) {
  .mvk-rail-slides {
    gap: 18px;
    --mvk-rail-slide-w: calc((100% - 18px) / 2);
  }
}

@media (min-width: 1080px) {
  .mvk-rail-slides {
    --mvk-rail-slide-w: calc((100% - 54px) / 4);
  }
}

/* ==========================================================================
   2. Tarjeta de producto
   ========================================================================== */

.mvk-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mvk-sans);
  color: var(--mvk-black);
}

/* --- Foto ---------------------------------------------------------------- */

.mvk-card-media {
  position: relative;
  aspect-ratio: 3 / 4;   /* 3:4 sin excepción */
  overflow: hidden;
  background: var(--mvk-white);
}

.mvk-card-photo {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

/* Patrón de cintas detrás de la foto. Base blanca como en el prototipo
   (card.patternStyle: "#fff url('brand/pattern-tape.png') 50% 0/cover") y como
   el mosaico de categorías, que ya usa --mvk-white. */
.mvk-card-pattern {
  position: absolute;
  inset: 0;
  background: var(--mvk-white) url('../img/pattern-tape.png') 50% 0 / cover no-repeat;
  opacity: .9;
  transition: opacity .8s ease;
}

.mvk-card-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  z-index: 1;
  filter: brightness(1.24) contrast(.94) saturate(0) drop-shadow(0 12px 24px rgba(12, 11, 11, .28));
  scale: 1;
  transition: scale 1.8s cubic-bezier(.22, 1, .28, 1), filter 1s ease, object-position 1.2s cubic-bezier(.22, 1, .28, 1), opacity .4s ease;
}

.mvk-card-media:hover .mvk-card-pattern,
.mvk-card-media:focus-within .mvk-card-pattern { opacity: 1; }

.mvk-card-media:hover .mvk-card-shot,
.mvk-card-media:focus-within .mvk-card-shot {
  object-position: center 8%;
  scale: 1.06;
  filter: brightness(1.32) contrast(.96) saturate(0) drop-shadow(0 16px 30px rgba(12, 11, 11, .34));
}

.mvk-card--out .mvk-card-shot { opacity: .45; }

/* --- Etiqueta ------------------------------------------------------------ */

.mvk-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
  font: 600 10px/1 var(--mvk-sans);
  /* Rótulo chico en mayúsculas: regla 4, de .2em a .32em. Es el gemelo exacto
     de .mvk-pdp-badge (product.css), que ya está en .2em: los dos se ven en la
     MISMA pantalla —la etiqueta de la ficha y la de las tarjetas de "Completá
     tu look"—, y con dos trackings distintos se leen como dos sistemas
     tipográficos conviviendo. Si se toca uno hay que tocar el otro. */
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mvk-black);
  background: var(--mvk-white);
  padding: 7px 10px;
}

/* Sin stock: se invierte */
.mvk-card-badge--out {
  color: var(--mvk-white);
  background: var(--mvk-black);
}

/* --- Overlay "Agregar rápido" -------------------------------------------- */

.mvk-card-quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none;         /* en celular no hay hover: no se muestra */
  place-items: center;
  height: 46px;
  background: rgba(12, 11, 11, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  translate: 0 101%;
  transition: translate .5s cubic-bezier(.22, 1, .28, 1);
}

.mvk-card-quick-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--mvk-white);
  font: 600 10.5px/1 var(--mvk-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
}

.mvk-card-quick-btn:hover { color: var(--mvk-white); }

@media (min-width: 760px) {
  .mvk-card-quick { display: grid; }

  /* Entre 760 y 1079px el hover no es confiable: queda siempre visible. */
  .mvk-card-quick { translate: 0 0; }
}

@media (min-width: 1080px) {
  .mvk-card-quick { translate: 0 101%; }

  .mvk-card-media:hover .mvk-card-quick,
  .mvk-card-media:focus-within .mvk-card-quick { translate: 0 0; }
}

/* --- Datos --------------------------------------------------------------- */

.mvk-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvk-card-name {
  margin: 0;
  font-family: var(--mvk-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .02em;  /* positivo: los títulos de sección van en -.02em */
  text-wrap: pretty;
}

.mvk-card-sizes {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.mvk-card-size {
  font: 500 10.5px/1 var(--mvk-sans);
  letter-spacing: .14em;
  color: var(--mvk-text-mid);
}

/* Los agotados no se ocultan: se tachan. El prototipo los pinta #C9C5C0, que
   sobre la tarjeta blanca da 1.72:1 y no se lee (WCAG 1.4.3). Se usa
   --mvk-text-mid (#6B6B6B, 5.33:1): sigue siendo un gris apagado y el tachado
   más el texto para lectores de pantalla marcan el estado. */
.mvk-card-size--gone {
  color: var(--mvk-text-mid);
  text-decoration: line-through;
}

.mvk-card-prices {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mvk-card-price {
  font: 600 21px/1 var(--mvk-sans);
  letter-spacing: -.02em;
}

/* Rango de precios de un producto variable: lo arma WooCommerce.
   Fondo claro ⇒ --mvk-text-soft-light (#767676), no el #9A958E de fondo oscuro. */
.mvk-card-price del { color: var(--mvk-text-soft-light); font-weight: 400; font-size: 12px; }
.mvk-card-price ins { text-decoration: none; }

.mvk-card-old {
  font: 400 12px/1 var(--mvk-sans);
  color: var(--mvk-text-soft-light);
  text-decoration: line-through;
}

.mvk-card-off {
  background: var(--mvk-black);
  color: var(--mvk-white);
  font: 600 9.5px/1 var(--mvk-sans);
  /* Mismo chip que .mvk-pdp-precio__off (product.css): mismo fondo negro,
     mismo blanco, mismo porcentaje de rebaja y, ahora sí, mismo tracking.
     Regla 4 pide de .2em a .32em y esto estaba en .14em. En la ficha los dos
     se ven a 300px de distancia. */
  letter-spacing: .2em;
  padding: 4px 6px;
}

.mvk-card-quota {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1.4 var(--mvk-sans);
  color: var(--mvk-text-mid);
}

/* Importe de la cuota sin interés: el único rojo de todo el sitio. */
.mvk-card-quota-amount {
  font-weight: 600;
  color: var(--mvk-red);
}

.mvk-card-dots {
  display: flex;
  gap: 7px;
  margin-top: 2px;
}

.mvk-card-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* El aro va por box-shadow para no cambiar el tamaño del punto. El prototipo
     usa rgba(0,0,0,.18) (1.53:1): un swatch blanco o crudo desaparecía sobre la
     tarjeta. Con .45 el aro da 3.4:1 y cumple WCAG 1.4.11. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  display: inline-block;
  flex: none;
  /* Los puntos son informativos: no filtran ni cambian la foto, así que no
     pueden fingir que se puede hacer clic. */
  cursor: default;
}

/* ==========================================================================
   3. Reseñas
   ========================================================================== */

.mvk-rev {
  position: relative;
  background: var(--mvk-black);
  color: var(--mvk-white);
  padding: 30px 16px 34px;
  overflow: hidden;
}

.mvk-rev-tape {
  position: absolute;
  inset: 0;
  /* Textura sobre el negro: acá el patrón va sin color de base, porque
     cualquier fondo al 5% levantaría el negro de la sección. */
  background: url('../img/pattern-tape.png') 50% 50% / 1100px auto repeat;
  opacity: .05;
  pointer-events: none;
}

.mvk-rev-inner {
  position: relative;
  max-width: var(--mvk-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 760px) {
  .mvk-rev       { padding: clamp(52px, 7vw, 120px) var(--mvk-pad); }
  .mvk-rev-inner { gap: clamp(28px, 4vw, 54px); }

  /* En iOS el fondo fijo da tirones: sólo se activa de tablet para arriba. */
  .mvk-rev-tape { background-attachment: fixed; }
}

/* --- Cabecera ------------------------------------------------------------ */

.mvk-rev-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding-bottom: clamp(16px, 2vw, 26px);
}

.mvk-rev-head-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mvk-rev-eyebrow {
  font: 500 10px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.mvk-rev-title {
  font-size: clamp(26px, 4.6vw, 62px);
  line-height: .94;      /* los carruseles usan .92 */
}

.mvk-rev-title em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  text-transform: none;
  font-weight: 400;
}

.mvk-rev-score {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mvk-rev-avg {
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
}

.mvk-rev-score-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mvk-rev-stars {
  display: flex;
  gap: 3px;
  font: 400 13px/1 system-ui;
  color: var(--mvk-white);
}

.mvk-rev-stars--empty { color: rgba(255, 255, 255, .28); }

.mvk-rev-count {
  font: 400 11px/1 var(--mvk-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* --- Cita ---------------------------------------------------------------- */

.mvk-rev-stage {
  position: relative;
  min-height: clamp(180px, 20vw, 250px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 30px);
}

.mvk-rev-item {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 30px);
}

/* Sin JS se leen las tres citas, una debajo de otra. El JS marca el contenedor
   como carrusel y recién ahí se muestra una sola. */
.mvk-rev-stage.is-carousel .mvk-rev-item { display: none; }

.mvk-rev-stage.is-carousel .mvk-rev-item.is-active {
  display: flex;
  animation: mvkFade .5s ease both;
}

.mvk-rev-quote {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 3.2vw, 44px);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--mvk-white);
  text-wrap: pretty;
}

/* Textos guía, mientras no haya reseñas reales. */
.mvk-rev-quote--empty { color: rgba(255, 255, 255, .55); }

.mvk-rev-by {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mvk-rev-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, .5);
}

.mvk-rev-author {
  font: 500 11.5px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.mvk-rev-meta {
  font: 300 11.5px/1 var(--mvk-sans);
  color: rgba(255, 255, 255, .5);
}

/* --- Puntos y flechas ---------------------------------------------------- */

.mvk-rev-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.mvk-rev-controls[hidden] { display: none; }

.mvk-rev-dots,
.mvk-rev-arrows {
  display: flex;
  gap: 10px;
}

/* Único radio no circular del área: la pastilla se estira a 26px. */
.mvk-rev-dot {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .3);
  transition: width .45s var(--mvk-ease), background .3s ease;
}

.mvk-rev-dot.is-active {
  width: 26px;
  background: var(--mvk-white);
}

/* Huecas y con borde: distintas de las del carrusel, que son macizas. */
.mvk-rev-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: var(--mvk-white);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.mvk-rev-arrow > * { width: 13px; height: 13px; }

.mvk-rev-arrow:hover,
.mvk-rev-arrow:focus-visible {
  background: var(--mvk-white);
  border-color: var(--mvk-white);
  color: var(--mvk-black);
}

/* --- Franja de fotos ----------------------------------------------------- */

.mvk-rev-photos {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mvk-rev-track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}

.mvk-rev-photo {
  position: relative;
  flex: none;
  width: clamp(150px, 15vw, 210px);
  aspect-ratio: 4 / 5;   /* la de producto es 3:4; ésta no */
  margin: 0 16px 0 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  background: rgba(255, 255, 255, .05) center / cover no-repeat;
  border: 0;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, rgba(0, 0, 0, .55) 84%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, rgba(0, 0, 0, .55) 84%, transparent 100%);
}

.mvk-rev-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(12, 11, 11, 0), rgba(12, 11, 11, .78));
  font: 500 9.5px/1.3 var(--mvk-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* --- Nota y botón -------------------------------------------------------- */

.mvk-rev-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mvk-rev-note {
  font: 300 12.5px/1.6 var(--mvk-sans);
  color: rgba(255, 255, 255, .5);
  max-width: 52ch;
}

.mvk-rev-open {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: var(--mvk-white);
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.mvk-rev-open:hover,
.mvk-rev-open:focus-visible {
  background: var(--mvk-white);
  color: var(--mvk-black);
  border-color: var(--mvk-white);
}

/* --- Formulario ---------------------------------------------------------- */

.mvk-rev-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
  animation: mvkPdpIn .5s var(--mvk-ease) both;
}

.mvk-rev-form[hidden] { display: none; }

.mvk-rev-form-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvk-rev-form-note {
  font: 300 12.5px/1.6 var(--mvk-sans);
  color: rgba(255, 255, 255, .55);
  max-width: 56ch;
}

.mvk-rev-label {
  font: 500 9px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.mvk-rev-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mvk-rev-picker {
  display: flex;
  gap: 4px;
}

.mvk-rev-star {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: 400 21px/1 system-ui;
  color: rgba(255, 255, 255, .28);
  transition: color .25s ease, scale .3s var(--mvk-ease);
}

.mvk-rev-star.is-active { color: var(--mvk-white); }

.mvk-rev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 20px);
}

@media (min-width: 760px) {
  .mvk-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mvk-rev-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvk-rev-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .04);
  color: var(--mvk-white);
  font: 400 14.5px/1 var(--mvk-sans);
  outline: none;
  transition: border-color .3s ease;
}

.mvk-rev-area {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .04);
  color: var(--mvk-white);
  font: 400 14px/1.6 var(--mvk-sans);
  outline: none;
  resize: vertical;
  transition: border-color .3s ease;
}

.mvk-rev-input:focus,
.mvk-rev-area:focus { border-color: var(--mvk-white); }

.mvk-rev-status {
  margin: 0;
  font: 400 12px/1.5 var(--mvk-sans);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
}

/* 🚨 NADA de display:none acá, por más que "no se ve" sea lo que queremos.
   Este <p> es role="status" (template-parts/reviews.php) y rails.js le escribe
   adentro los errores del formulario de reseñas con say(). Un nodo con
   display:none está FUERA del árbol de accesibilidad: la mutación que le mete
   el texto no genera anuncio, y "aparecer con el texto ya puesto" tampoco. O
   sea que quien navega con lector de pantalla apretaba Enviar, no pasaba nada
   audible y no había forma de enterarse de que faltaba el nombre.

   Es el mismo orden invertido que ya se corrigió a mano en product.js y en
   cart.js (mostrar PRIMERO, escribir DESPUÉS), sólo que acá el ocultamiento lo
   hacía el CSS y no se podía arreglar del lado del JavaScript: mostrar exige
   escribir, porque el disparador es :empty.

   La solución es el mismo recorte que .screen-reader-text de main.css: el nodo
   sigue en el árbol —así el anuncio funciona— pero no dibuja nada y, por ser
   position:absolute, tampoco consume el gap del flex de .mvk-rev-form, que es
   lo único que el display:none estaba resolviendo de verdad. */
.mvk-rev-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mvk-rev-send {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mvk-rev-submit {
  height: 52px;
  padding: 0 30px;
  border: 0;
  background: var(--mvk-white);
  color: var(--mvk-black);
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .25s ease;
}

.mvk-rev-submit:hover { opacity: .86; }

.mvk-rev-send-note {
  font: 300 11.5px/1.5 var(--mvk-sans);
  color: rgba(255, 255, 255, .4);
}

/* --- Agradecimiento ------------------------------------------------------ */

.mvk-rev-thanks {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, .2);
  animation: mvkPdpIn .5s var(--mvk-ease) both;
}

.mvk-rev-thanks[hidden] { display: none; }

.mvk-rev-check {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mvk-white);
  color: var(--mvk-black);
  display: grid;
  place-items: center;
}

.mvk-rev-check > * { width: 20px; height: 20px; }

.mvk-rev-thanks-text {
  font: 300 13.5px/1.6 var(--mvk-sans);
  color: rgba(255, 255, 255, .8);
  text-wrap: pretty;
}

/* ==========================================================================
   4. Movimiento reducido
   main.css ya apaga animaciones y transform. Acá se neutraliza lo que usa
   las propiedades translate/scale, que aquel bloque no toca.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mvk-rail-slides { scroll-behavior: auto; }

  .mvk-rail-slide,
  .mvk-card-shot,
  .mvk-rev-photo,
  .mvk-rev-track {
    translate: none !important;
    scale: none !important;
  }

  .mvk-rail-arrow { translate: 0 -50% !important; scale: none !important; }
}

/* --------------------------------------------------------------------------
   Señuelo antispam del formulario de reseñas

   Se saca de la pantalla en vez de usar display:none o visibility:hidden:
   los robots detectan esos dos y saltean el campo, que es justo lo que no
   queremos. Así sigue en el DOM, es "rellenable" para un robot, y ninguna
   persona lo ve ni lo alcanza tabulando (el input ya lleva tabindex="-1").
   -------------------------------------------------------------------------- */

.mvk-rev-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   La tarjeta reacciona a la pantalla donde esta, por variable
   ==========================================================================
   Categorias, Nuevos ingresos, Mas vendidos y Sale son la misma plantilla de
   catalogo con una clase distinta en el <main> (ver archive-product.php). Lo
   que las diferencia visualmente es la TARJETA.

   🚨 NO SE PUEDE ESCRIBIR `.mvk-shop--sale .mvk-card-off` — Y ES UNA REGLA
   BUENA. El verificador corta el build si una clase se define en dos archivos
   de area, asi que un selector que cruce .mvk-shop-- con .mvk-card- deja el
   componente con dos dueños peleandose. El dia que alguien cambie la tarjeta
   en un archivo, la mitad del sitio no se entera.

   La salida es la que usa el resto del tema: el catalogo declara VARIABLES
   sobre su contenedor y la tarjeta las consume desde aca, con un valor por
   defecto que es exactamente lo de siempre. Cada archivo sigue tocando solo
   sus clases, y el enganche es un nombre de variable, que no es de nadie.
   ========================================================================== */

/* El porcentaje pesa mas en la pantalla de rebajas, donde es el dato principal. */
.mvk-card-off {
  font-size: var(--mvk-card-off-size, inherit);
  font-weight: var(--mvk-card-off-weight, inherit);
}

/* El precio de lista cede cuando la pantalla es la comparacion. */
.mvk-card-old { opacity: var(--mvk-card-old-op, 1); }

/* La etiqueta se invierte en Nuevos ingresos, donde "Nuevo" es lo que se vino a
   mirar. La de sin stock no entra: es informacion, no enfasis. */
.mvk-card-badge:not(.mvk-card-badge--out) {
  background: var(--mvk-card-badge-bg, var(--mvk-white));
  color: var(--mvk-card-badge-fg, var(--mvk-black));
}

/*
 * El puesto en "Mas vendidos".
 *
 * El contador se incrementa siempre —no cuesta nada— y el numero solo se dibuja
 * donde el catalogo define --mvk-card-rank. Sin esa variable, content resuelve
 * a `none` y el pseudo-elemento ni se genera.
 *
 * Se numera por CSS y no por PHP porque la grilla la dibuja el loop de
 * WooCommerce a traves de esta misma tarjeta, la compartida con la portada y
 * los carruseles: pasarle un indice obligaria a tocar esa cadena entera por un
 * dato que existe en una sola pantalla.
 *
 * ⚠️ En la pagina 2 vuelve a empezar en 1. Con ocho productos no se llega; el
 * dia que el catalogo crezca, el numero pasa a PHP con el offset real.
 */
.mvk-card { counter-increment: mvk-puesto; }

.mvk-card-media::after {
  content: var(--mvk-card-rank, none);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  background: var(--mvk-black);
  color: var(--mvk-white);
  font-family: var(--mvk-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  pointer-events: none;
}

/* Con el puesto puesto, la etiqueta se corre a la derecha para no pisarlo. */
.mvk-card-badge { inset-inline: var(--mvk-card-badge-x, 14px auto); }