/* nv-tarjeta.css — tarjeta de producto de La Novedad (T3, §2.13 de la especificación).
   Replica la tarjeta «Diseño 3» de la tienda Nitro con valores medidos en lanovedad.com (coleccion.md §7 y la
   captura coleccion-tenis-desktop-full medida con Pillow el 2026-09-11): imagen 330×422 a 1440, cuadrito de
   16 px con paso de 32 px y radio 4, botón píldora de 282×40. Tarjeta PLANA: sin fondo, borde, sombra ni radio.
   Todo va bajo .nv-card: Blocksy pinta [data-products] .product (flex, 10 px entre hijos, alineación del
   personalizador) y .sale-price (tachado DETRÁS del precio actual, al 80 % y con 70 % de opacidad). Aquí se
   deshace solo dentro de la tarjeta, con la especificidad justa para ganar sin !important. */

.nv-card.product{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;
  margin:0;padding:0;list-style:none;text-align:left;background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate}
.nv-card.product>.nv-card__media,.nv-card.product>.nv-card__info{margin:0}
.nv-card.product.nv-card--centro{text-align:center}

/* ── Imagen: proporción «ASOS» de Nitro, alto = 127,78 % del ancho (18:23 → 330×422 a 1440, 165×211 a 375) ── */
.nv-card .nv-card__media{position:relative;display:block;width:100%;aspect-ratio:18/23;overflow:hidden;isolation:isolate;
  background:var(--nv-placeholder);border-radius:0}
.nv-card .nv-card__enlace{position:absolute;inset:0;display:block;overflow:hidden;border:0}
.nv-card .nv-card__img,.nv-card .nv-card__img2,.nv-card .nv-card__capa{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;margin:0;padding:0;border:0;border-radius:0;object-fit:cover;object-position:center}
.nv-card .nv-card__img2{z-index:1;opacity:0}
/* Capa del fundido al cambiar de color (nv-tarjeta.js): la foto nueva aparece ENCIMA de la vieja, así la
   tarjeta nunca queda en blanco mientras carga, que era lo que hacía parecer el cambio un fallo de carga. */
.nv-card .nv-card__capa{z-index:2;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
.nv-card .nv-card__capa.is-visible{opacity:1}
.nv-card .nv-card__badges{z-index:3}

/* 2.ª foto y zoom solo con ratón (Nitro: fundido .5s y escala 1.09 en 2s con cubic-bezier(0,0,.44,1.18)).
   Al elegir un color se apaga la 2.ª foto: con el ratón encima taparía la foto del color recién elegido. */
@media (hover:hover) and (min-width:1025px){
  .nv-card .nv-card__img,.nv-card .nv-card__img2{transition:transform 2s cubic-bezier(0,0,.44,1.18),opacity .5s ease}
  .nv-card .nv-card__capa{transition:transform 2s cubic-bezier(0,0,.44,1.18),opacity .5s cubic-bezier(.4,0,.2,1)}
  .nv-card .nv-card__media:hover .nv-card__img,.nv-card .nv-card__media:hover .nv-card__img2,
  .nv-card .nv-card__media:hover .nv-card__capa{transform:scale(1.09)}
  .nv-card.nv-card--img2:not(.nv-card--color) .nv-card__media:hover .nv-card__img2{opacity:1}
  .nv-card.nv-card--agotada .nv-card__badges{transition:opacity .3s ease}
  .nv-card.nv-card--agotada .nv-card__media:hover .nv-card__badges{opacity:0}
}

/* ── Tarjeta agotada: todos los badges al centro como píldoras blancas 30 px, radio 15, mín. 76 (TENIS VERO) ── */
.nv-card.nv-card--agotada .nv-card__badges{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);align-items:center}
.nv-card.nv-card--agotada .nv-badge{min-width:76px;height:30px;padding:0 12px;border-radius:15px;background:#fff;color:#222;line-height:1}

/* ── Información: 8 px de la imagen al texto y 6 px entre elementos (--product-space-img-txt / -elements) ── */
.nv-card .nv-card__info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 0;min-width:0}
.nv-card.nv-card--centro .nv-card__info{align-items:center}

/* Título Jost 15/20/400 #27262c, sin text-transform (D19). Blocksy fija los títulos con --theme-font-*. */
.nv-card .nv-card__titulo{--theme-font-size:15px;--theme-font-weight:400;--theme-line-height:20px;--theme-heading-color:var(--nv-card-title);
  margin:0;padding:0;font-family:var(--nv-font);font-size:15px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:none;
  color:var(--nv-card-title);overflow-wrap:break-word;max-width:100%}
.nv-card .nv-card__titulo a{color:inherit;text-decoration:none;transition:color var(--nv-t-link) ease}
.nv-card .nv-card__titulo a:hover{color:var(--nv-hover-alt)}

/* Precio 15/500 lh 25,5 #4c4b51; en oferta primero el tachado 14/400 #bfbec8 y luego el actual #e33131, a 5 px.
   Flex con column-gap: el espacio en blanco que deja Woo entre <del> e <ins> no suma al hueco, y a 165 px
   (móvil) los dos precios bajan a dos líneas como en Shopify. */
.nv-card .nv-card__precio{--theme-font-size:15px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;row-gap:0;margin:0;
  font-family:var(--nv-font);font-size:15px;font-weight:500;line-height:25.5px;color:var(--nv-price)}
.nv-card.nv-card--centro .nv-card__precio{justify-content:center}
.nv-card .nv-card__precio .sale-price{display:contents}
.nv-card .nv-card__precio del{order:0;opacity:1;font-size:14px;font-weight:400;color:var(--nv-price-compare);text-decoration:line-through}
.nv-card .nv-card__precio ins{order:0;font-weight:500;color:var(--nv-price-sale-card);text-decoration:none;background:none}
.nv-card .nv-card__precio .woocommerce-Price-amount{white-space:nowrap}

/* ── Cuadritos de color (lemon-shop-swatches.php): 16 px dentro de un marco de padding 2 + borde 2 #fff → celda
   24, margen 4 → paso de 32 (medido). Radio 4 (medido en la esquina del negro). Hover y elegido: borde #151515. ── */
.nv-card .nv-card__colores{display:flex;flex-wrap:wrap;align-items:center;margin:0 -4px;padding:0}
.nv-card.nv-card--centro .nv-card__colores{justify-content:center}
.nv-card .nv-sw{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;min-width:0;min-height:0;margin:4px;padding:2px;border:2px solid #fff;border-radius:var(--nv-radius-sw);
  background:transparent;color:inherit;box-shadow:none;font-size:0;line-height:0;cursor:pointer;transition:border-color .2s ease}
.nv-card .nv-sw:hover,.nv-card .nv-sw.is-sel{border-color:var(--nv-border-strong);background:transparent;color:inherit}
.nv-card .nv-sw:focus-visible{outline:2px solid var(--nv-accent);outline-offset:1px}
.nv-card .nv-sw__c{position:relative;display:block;width:16px;height:16px;border-radius:var(--nv-radius-sw);background:var(--sw,#e5e5e5);overflow:hidden}
/* Blanco: colors.css de la tienda le pone un borde de 1 px #ccc; sin él desaparece sobre el fondo blanco. */
.nv-card .nv-sw--claro .nv-sw__c{box-shadow:inset 0 0 0 1px #ccc}
/* Color sin ninguna variación disponible: diagonal fina, como Nitro (TENIS STAR «Gris oscuro»). */
.nv-card .nv-sw--agotado .nv-sw__c::after{content:"";position:absolute;left:50%;top:50%;width:70%;height:1px;background:#151515;
  transform:translate(-50%,-50%) rotate(-45deg)}
.nv-card .nv-sw--agotado.nv-sw--oscuro .nv-sw__c::after{background:#fff}
/* «+N»: enlaza a la ficha (sw_click 2 de Nitro). Cuántos cuadritos van antes lo decide lemon-shop-swatches.php. */
.nv-card .nv-sw-mas{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;height:24px;margin:4px;
  padding:0 2px;font-family:var(--nv-font);font-size:12px;font-weight:500;line-height:1;color:var(--nv-ink);text-decoration:none}
.nv-card .nv-sw-mas:hover{color:var(--nv-hover-alt)}
/* Dos recuentos en el mismo HTML (la caché de página guarda uno para todos los visitantes) y aquí se elige cuál
   se ve: «ancho» (6 + «+N») solo desde 1025 px y «corto» (hasta 5, o 4 + «+N») en 1024 o menos. El corte del
   RECUENTO (1024) no es el del TAMAÑO del cuadrito (767): a 768, con la rejilla de 4 de §2.15, la tarjeta mide
   173 px y en su fila (181 con el margen de −4) caben 5 celdas de 32, no las 7 de 6 + «+N». Medido con el tope
   de 6 desde 768: SANDALIAS ALINNA (768) y TENIS ESTAMPADO (834) partían en dos filas y su botón bajaba 32 px. */
.nv-card .nv-sw--corto,.nv-card .nv-sw-mas--sin-ancho,.nv-card .nv-sw-mas__corto{display:none}
@media (max-width:1024px){
  .nv-card .nv-sw--ancho,.nv-card .nv-sw-mas--sin-corto,.nv-card .nv-sw-mas__ancho{display:none}
  .nv-card .nv-sw--corto,.nv-card .nv-sw-mas--sin-ancho{display:inline-flex}
  .nv-card .nv-sw-mas__corto{display:inline}
}

/* ── Botón: contorno 2 px #151515, radio 40, 15/500, alto 40, ancho = tarjeta − 48 (282 de 330), icono 16 a 4 px.
   Al pasar el ratón se rellena de #000 desde el centro (scale 0 → 1) y el texto pasa a blanco.
   Mínimo 164 px, o la tarjeta entera si es más estrecha. Con calc(100% − 48px) a secas, en la rejilla de 4 de
   tableta (tarjeta de 173 px a 768 y de 190 a 834) y a 1024 con la barra lateral de hoy (154) el botón quedaba
   más estrecho que su texto y lo cortaba (medido: 16 de 16 a 768 y a 1024). Contenido natural medido en Chrome
   (Jost 15/500 + icono 16 + hueco 4): «Compra rápida» 119,6 px, «Agregar al carrito» 137,2, «Ver más» 73,2.
   164 = 137,2 + padding 8 + 8 + borde 2 + 2, con 6,8 px de holgura. Desde una tarjeta de 212 px manda el calc,
   como en la especificación (1440: 282 de 330; 1024 con la rejilla de 4: 189 de 237). El padding de 8 no se ve,
   porque el contenido va centrado: solo retrasa el corte cuando el botón es estrecho. ── */
.nv-card .nv-card__boton{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;
  width:max(calc(100% - 48px),min(100%,164px));height:40px;min-height:40px;margin:0;padding:0 8px;overflow:hidden;
  font-family:var(--nv-font);font-size:15px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
  color:var(--nv-ink);background:#fff;border:2px solid var(--nv-ink);border-radius:var(--nv-radius-pill);box-shadow:none;
  transition:color var(--nv-ease),border-color var(--nv-ease)}
.nv-card .nv-card__boton::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;border-radius:inherit;transform:scale(0);
  transition:transform var(--nv-ease)}
.nv-card .nv-card__boton:hover,.nv-card .nv-card__boton:focus-visible{color:#fff;background:#fff;border-color:#000}
.nv-card .nv-card__boton:hover::before,.nv-card .nv-card__boton:focus-visible::before{transform:scale(1)}
.nv-card .nv-card__boton .nv-i{width:16px;height:16px;font-size:16px}
.nv-card .nv-card__boton.loading{opacity:.6;pointer-events:none}
/* Tras añadir, Woo inserta «Ver carrito» junto al botón; en Nitro se abre el mini carrito (T8) y no hay enlace. */
.nv-card .added_to_cart{display:none}

/* ── Móvil (≤767): cuadrito 14 px en celda 22 (pr_item_config swatch_color_size_mb; bee-swatch.css lo aplica a
   ≤767) y botón a todo el ancho, 36 de alto y 14 px (medido 165×36 a 375). ── */
@media (max-width:767px){
  .nv-card .nv-sw{width:22px;height:22px}
  .nv-card .nv-sw__c{width:14px;height:14px}
  .nv-card .nv-sw-mas{min-width:22px;height:22px}
  .nv-card .nv-card__boton{width:100%;height:36px;min-height:36px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .nv-card .nv-card__img,.nv-card .nv-card__img2,.nv-card .nv-card__capa,.nv-card .nv-card__boton,.nv-card .nv-card__boton::before{transition:none}
  .nv-card .nv-card__media:hover .nv-card__img,.nv-card .nv-card__media:hover .nv-card__img2,.nv-card .nv-card__media:hover .nv-card__capa{transform:none}
}