/**
 * CP-FIX-NUEVOS · Sección PRODUCTOS NUEVOS del home.
 *
 * Reconstrucción PROPIA del tema de la caja legada `[latest_products]` (plugin
 * rafas-latest-products). Namespace .mhw-newprods -> CERO colisión/dependencia con el CSS
 * legado (.latest-products / .products-container / .product-button). Rojo único #e11414
 * (DEC-5). Card horizontal (foto izq + contenido der), 1 columna en móvil, 2 columnas en
 * desktop ≥1440 (fiel al breakpoint del plugin). El eco tipográfico gris del título reusa
 * el lenguaje racing de Promociones (Barlow Semi Condensed, ya cargada por header-racing.css).
 * Se encola SOLO en el home cuando la sección va a renderizar (ver product-shortcodes.php).
 */

.mhw-newprods {
  max-width: 1180px;
  margin: 44px auto 48px;
  padding: 0 16px;
  box-sizing: border-box;

  /* N3 — TIPOGRAFÍA. Este archivo no declaraba NINGUNA font-family, así que la card entera
     caía al stack del sistema (medido: '-apple-system, BlinkMacSystemFont…' en título, código,
     precio y botón) mientras el resto del sitio usa Barlow. Se alinea a las familias YA
     encoladas por header-racing.css — CERO @font-face nuevo, cero petición extra.
     Los tokens se declaran AQUÍ y no en :root a propósito: son el equivalente local de
     --v3-cond/--v3-mono de card-v2.css, y esta sección NO debe depender de ese archivo
     (mismo criterio que el resto del namespace .mhw-newprods). Ningún nodo de la sección se
     renderiza fuera de este ancestro, así que no hay riesgo de perder el token. */
  --np-sans: 'Barlow', system-ui, sans-serif;
  --np-cond: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --np-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* NOTA: la cabecera y el título dorsal (.mhw-newprods-head / .mhw-newprods-title[::before])
   viven en theme.css como FUENTE ÚNICA compartida con Promociones (patrón "dorsal" racing),
   para que ambas secciones queden idénticas. Aquí no se re-declaran (evita duplicación). */

/* --- Grilla: 1 columna; 2 columnas en desktop ≥1440 (fiel al plugin) --- */
.mhw-newprods-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: stretch;
}
@media screen and (min-width: 1440px) {
  .mhw-newprods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mhw-newprods-item {
  list-style: none;
  margin: 0;
}

/* --- Card: horizontal, fondo blanco, sombra suave --- */
.mhw-newprods-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.14);
  padding: 12px;
  box-sizing: border-box;
}

/* Media: columna (foto arriba, logo de marca abajo), ancho fijo.
   N2: 120 -> 144 en móvil y 160 -> 184 en desktop (Rafael pidió más aire para la foto).
   El aspect-ratio 1/1 de .mhw-newprods-photo NO se toca (decisión cerrada), así que la caja
   crece en los dos ejes a la vez y la foto gana 24px de lado en móvil. */
.mhw-newprods-media {
  width: 144px;
  min-width: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mhw-newprods-media {
    width: 184px;
    min-width: 184px;
  }
}
/* N1 — la FOTO enlaza a la ficha. El <a> se interpone entre .mhw-newprods-media (flex column)
   y la <img>, así que tiene que ocupar el ancho completo para no alterar la geometría; el
   line-height:0 evita el hueco fantasma que deja una <img> inline dentro de un bloque. */
.mhw-newprods-photolink {
  display: block;
  width: 100%;
  line-height: 0;
}
/* O3: caja de foto de proporción FIJA. Sin esto la altura la dictaba la proporción
   intrínseca de cada imagen (el catálogo tiene 651x650, 700x466, 378x493…) y la card sin
   miniatura —que cae al placeholder de Woo— medía distinto que sus vecinas (medido: 124px
   vs 208px en 390). Con aspect-ratio + object-fit:contain la caja mide IGUAL siempre y
   ninguna foto se deforma (las no cuadradas se ajustan dentro, sin recorte). */
.mhw-newprods-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.mhw-newprods-brand {
  width: 80px;
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mhw-newprods-brandlogo {
  max-width: 100%;
  width: 80px;
  height: auto;
  display: inline-block;
}

/* Cuerpo: título rojo subrayado, Código, precio rojo, botón */
.mhw-newprods-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 4px 0 14px;
  box-sizing: border-box;
}
.mhw-newprods-name {
  margin: 0 0 6px;
  padding: 0 0 5px;
  width: 100%;
  font-family: var(--np-cond);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: #e11414;
  word-break: break-word;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
@media screen and (min-width: 768px) {
  .mhw-newprods-name {
    font-size: 1.15rem;
  }
}
/* N1 — el TÍTULO enlaza a la ficha. Hereda color y pierde el subrayado: el enlace no debe
   cambiar NADA del aspecto (el subrayado del título ya lo aporta el border-bottom del h3).
   N2 (guarda) — recorte a 2 líneas + min-height de 2 líneas, EXACTAMENTE el tratamiento que
   ya usa la card compartida de /tienda/ y de PROMOCIONES (.mhw-v3-grid .title, card-v2.css).
   Sin esto la guarda de "2 líneas" es inalcanzable con títulos reales (medido a 390px, ANTES
   de esta ronda y con la caja de 120px: 3.1 / 3.1 / 3.1 / 5.1 líneas) y las cards quedan de
   alturas distintas en móvil, que es 1 columna y no las iguala por fila. El min-height fija
   el alto aunque el título ocupe 1 sola línea -> las 4 cards miden igual sea cual sea el
   largo del nombre. 2.6em = 2 líneas x line-height 1.3, así escala con el font-size. */
.mhw-newprods-namelink {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  color: inherit;
  text-decoration: none;
}
.mhw-newprods-sku {
  margin: 0 0 4px;
  font-family: var(--np-mono);
  font-size: 0.85rem;
  color: #555;
}
.mhw-newprods-sku strong {
  color: #000;
}
.mhw-newprods-price {
  margin: 6px 0 12px;
  font-family: var(--np-cond);
  font-size: 1.1rem;
  font-weight: 700;
  color: #e11414;
}
/* N8 — get_price_html() vacío (producto sin precio): antes la fila NO se imprimía y quedaba
   un hueco mudo con un botón sin cifra. Ahora se pinta "Consultar precio", pero NO con el
   tratamiento de un precio: no es una cifra, así que va en gris y sin el peso del precio rojo
   (si no, a distancia se lee como si el producto costara algo). */
.mhw-newprods-price--ask {
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
}
@media screen and (min-width: 768px) {
  .mhw-newprods-price {
    font-size: 1.4rem;
  }
}
.mhw-newprods-price .woocommerce-Price-amount,
.mhw-newprods-price .amount {
  color: #e11414;
}

/* O2 — Producto EN OFERTA: get_price_html() entrega <del> (precio original) + <ins> (precio
   vigente). Mismo lenguaje visual que la card v2 de promos —original tachado, gris y menor;
   vigente en rojo— pero declarado aquí, en el namespace propio: esta sección NO depende de
   card-v2.css. Igual que en v2, el tachado/gris va sobre el .amount interno (el <del> solo
   aporta el espaciado), porque es ese span el que contiene el texto del precio. */
.mhw-newprods-price del {
  text-decoration: none;
  margin-right: 6px;
}
.mhw-newprods-price del .woocommerce-Price-amount,
.mhw-newprods-price del .amount {
  font-size: 0.72em;
  font-weight: 600;
  color: #777;
  text-decoration: line-through;
}
.mhw-newprods-price ins {
  text-decoration: none;
  background: none;
}
.mhw-newprods-price ins .woocommerce-Price-amount,
.mhw-newprods-price ins .amount {
  color: #e11414;
}
/* N5 — el CTA medía 129x35. El estándar propio del proyecto para blancos táctiles es 44px de
   alto mínimo (precedente F3), así que se sube POR PADDING (10px -> 15px), sin tocar el
   tamaño de letra ni el radio: 15.2px de línea + 30px = 45.2px. El botón de PROMOCIONES no se
   toca: vive en la card COMPARTIDA con /tienda/ (card-v2.css) y este archivo no lo alcanza. */
.mhw-newprods-btn {
  margin-top: auto;
  display: inline-block;
  background: #e11414;
  color: #fff;
  border-radius: 40px;
  padding: 15px 22px;
  font-family: var(--np-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
}
.mhw-newprods-btn:hover,
.mhw-newprods-btn:focus {
  background: #c20f0f;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .mhw-newprods-btn {
    font-size: 1rem;
    padding: 15px 26px;   /* N5: 16px de línea + 30px = 46px (≥44) */
  }
}