/* ============================================================
   Echando Raíces — cards de producto (listados de catálogo)
   Añadido 2026-07-23, a partir del diseño aprobado por Victoria
   (variante D final: card crema, sin bordes redondeados, sin
   botón por defecto, botón con borde que se rellena en hover,
   badges siempre a la derecha, alturas iguales por defecto).

   Ver custom-product-cards.js para el porqué de este enfoque
   (CSS + JS encima del marcado nativo, sin tocar
   catalog/_partials/miniatures/product.tpl — no se ha podido
   editar ese archivo desde este entorno) y para el detalle de las
   decisiones tomadas (categoría, fuera de stock, etc).

   Nota sobre los !important: el tema aplica reglas de mayor
   especificidad a estas mismas clases nativas (.product-flags,
   .regular-price, .price, .product-title...), pensadas para su
   diseño por defecto (badges sobre la imagen, etc). Se usa
   !important en las propiedades de maquetación en conflicto,
   igual que ya se hace en custom-footer.css / custom-theme.css
   por el mismo motivo.

   IMPORTANTE sobre alturas iguales:
   PrestaShop monta el listado con Bootstrap (.products.row en
   flexbox), y por defecto los flex-items se estiran para igualar
   al más alto de la fila (align-items normal = stretch). Eso es
   justo el efecto dominó que Victoria pidió evitar: si dejáramos
   ese comportamiento, al crecer una card en hover empujaría/
   estiraría a sus vecinas. Por eso se fuerza align-items:flex-start
   en la fila y height:auto en la card — así cada card mide lo que
   ocupa su contenido, y la altura igual por defecto se consigue por
   diseño (el nombre reserva siempre 2 líneas, ver .hr-nombre a).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@1,500;1,600&display=swap');

.products,
#js-product-list .products {
  align-items: flex-start !important;
}

/* Separación entre cards (añadido 2026-07-23, a petición de Victoria):
   mínimo 16px en escritorio y 32px en móvil, igual en horizontal que
   en vertical. Bootstrap ya daba algo de aire horizontal por el
   padding de columna (15px a cada lado = 30px), pero ningún espacio
   vertical entre filas — de ahí que se viera todo pegado al bajar de
   fila. Se controla todo con esta única variable para que horizontal
   y vertical coincidan siempre. */
:root {
  --hr-card-gap: 32px;
  /* Sistema de bordes redondeados — sitio completo (2026-07-29),
     validado con Victoria sobre la propuesta del carrito. */
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}
@media (min-width: 768px) {
  :root {
    --hr-card-gap: 16px;
  }
}
/* Corrección 2026-07-23 (bug reportado por Victoria: "en Novedades
   tienes que dejar margen entre una fila y otra"): estas reglas
   apuntaban a ".products.row" (exige las dos clases "products" Y
   "row" a la vez). El bloque de "Productos destacados" sí las trae
   juntas, pero el de "Novedades" (módulo nativo ps_newproducts) monta
   su listado con el contenedor en <div class="products"> a secas, sin
   la clase "row" — así que ahí ni el margen vertical entre filas ni el
   padding horizontal de las cards se estaban aplicando. Se quita el
   ".row" del selector para que funcione en cualquier listado de la
   home, tenga o no esa clase extra. */
.products {
  margin-left: calc(var(--hr-card-gap) / -2) !important;
  margin-right: calc(var(--hr-card-gap) / -2) !important;
}
.products > .product {
  padding-left: calc(var(--hr-card-gap) / 2) !important;
  padding-right: calc(var(--hr-card-gap) / 2) !important;
  margin-bottom: var(--hr-card-gap) !important;
}

/* Causa raíz del bug "las fotos salen más pequeñas" (corregido
   2026-07-23): el propio <article class="product-miniature"> ya es
   flex (flex-direction: row) en el tema nativo. Su único hijo real,
   .thumbnail-container, es por tanto un flex-item en el eje principal
   (horizontal) — sin flex-grow/width, un flex-item se dimensiona por
   su contenido ("fit-content"), no por el ancho disponible, así que
   cada card salía con un ancho distinto según su propio contenido en
   vez de ocupar toda la columna. */
.hr-card {
  height: auto !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hr-card .thumbnail-container {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #efe3d2 !important;
  border: none !important;
  border-radius: var(--hr-radius-card) !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hr-card .thumbnail-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.hr-card .thumbnail-top {
  position: relative;
}
/* La imagen salía más pequeña que la card (corregido 2026-07-23):
   el tema trae ".product-miniature .thumbnail-container
   .product-thumbnail { position:relative; height:calc(100% - 70px) }",
   pensado para cuando .thumbnail-container tenía una altura fija (ver
   la nota de "alturas iguales" más arriba, donde se cambia a
   height:auto). Con la altura del contenedor en auto, ese cálculo de
   porcentaje queda indeterminado y el navegador termina resolviendo un
   ancho menor que el real a través del aspect-ratio. Se fuerza
   width/height explícitos para que no dependa de ese cálculo. */
.hr-card .thumbnail-top .product-thumbnail {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  /* Corrección 2026-07-29 (Victoria eligió "Opción A, a sangre" para las
     fotos de producto): antes se redondeaban las 4 esquinas de la imagen
     igual que la card (10px), lo que dejaba ver un pequeño triángulo del
     fondo crema en las esquinas inferiores — dos piezas superpuestas en
     vez de una sola. "A sangre" de verdad es solo arriba (para casar con
     las esquinas superiores de la card, que sí son redondeadas) y recto
     abajo, donde la imagen sigue directamente en la franja de
     nombre/precio sin ningún corte visible. */
  border-top-left-radius: var(--hr-radius-card);
  border-top-right-radius: var(--hr-radius-card);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.hr-card .thumbnail-top .product-thumbnail img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Se ocultan lupa (vista rápida) y favoritos: no forman parte del
   diseño aprobado. Se ocultan por CSS (no se borran del DOM) para
   no perder esa funcionalidad si se decide recuperarla más adelante. */
.hr-card .quick-view,
.hr-card .highlighted-informations,
.hr-card .wishlist-button-add {
  display: none !important;
}

/* Enlace que cubre toda la card y lleva a la ficha de producto
   (menos el botón "Añadir al carrito", que va por encima con
   z-index para seguir siendo clicable). */
.hr-card .hr-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hr-card .product-description {
  /* Sin z-index aquí a propósito: si esta caja tuviera su propio
     z-index (aunque fuera 0) crearía un contexto de apilamiento
     propio, y el z-index:2 del botón de abajo quedaría "atrapado"
     dentro de ese contexto sin poder ganarle de verdad al overlay
     clicable (z-index:1) que está fuera, en .thumbnail-container.
     Así, el botón compite directamente con el overlay en el mismo
     nivel y gana. */
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 16px 18px !important;
  margin: 0 !important;
  /* El tema pinta esta caja de blanco por defecto (pensada para ir
     sobre un fondo de página claro). Se deja transparente para que
     se vea el crema de .thumbnail-container por debajo — corregido
     2026-07-23, Victoria lo detectó en la web real. */
  background: transparent !important;
  text-align: left;
}

.hr-card .hr-precio-zona {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  min-height: 51px;
  margin: 0 0 16px !important;
}
.hr-card .hr-fila-superior {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 4px;
  min-height: 22px;
  width: 100%;
}

/* Las 3 columnas reales del listado (col-xl-4) son más estrechas que
   el mockup de 4 columnas en el que se aprobó el diseño — con precio
   + 2 badges no siempre cabe todo en una línea. Se deja que
   .hr-fila-superior envuelva (arriba) en vez de recortar o solapar;
   en el caso más común (0-1 badge) sigue cabiendo en una sola línea
   y no afecta a la altura. Con 2 badges + un precio largo, la card
   puede quedar unos px más alta que sus vecinas en esa fila concreta
   — pendiente de revisar con Victoria si compensa acortar badges o
   asumirlo. */
.hr-card .hr-badges {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 5px;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}
.hr-card .hr-badges .product-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  /* line-height:1 (en vez de heredar ~20px) + centrado por flex:
     antes se veía más margen abajo que arriba porque la altura de
     línea del texto no quedaba centrada de verdad dentro del badge,
     solo el padding lo era — corregido 2026-07-23. */
  line-height: 1 !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #221200 !important;
  white-space: nowrap;
  list-style: none !important;
}
.hr-card .hr-badges .product-flag.new {
  background: var(--hr-badge-nuevo, #5b7fd6) !important;
}
.hr-card .hr-badges .product-flag.discount {
  background: var(--hr-badge-oferta, #b98fe0) !important;
}
.hr-card .hr-badges .product-flag.out_of_stock {
  background: var(--hr-badge-agotado, #d98a3d) !important;
}
.hr-card .hr-badges .product-flag.online-only,
.hr-card .hr-badges .product-flag.pack {
  background: var(--hr-badge-oferta, #b98fe0) !important;
}

.hr-card .hr-precio-antes {
  position: static !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  color: rgba(34, 18, 0, 0.65) !important;
}
.hr-card .hr-precio,
.hr-card .hr-precio-inline {
  position: static !important;
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #221200 !important;
  text-align: left;
}
.hr-card .hr-precio-abajo {
  display: flex !important;
}

.hr-card .hr-cat {
  margin: 0 0 2px !important;
  color: var(--hr-color-acento, #581f7c);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.hr-card .hr-nombre {
  margin: 0 !important;
}
.hr-card .hr-nombre a {
  display: -webkit-box !important;
  overflow: hidden;
  min-height: 44px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: 'Noto Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: #221200 !important;
  text-align: left;
  text-decoration: none !important;
  text-transform: none !important;
}

/* El botón crece EN EL FLUJO normal (empuja lo que venga debajo,
   p. ej. la fila siguiente) solo en la card con el ratón encima —
   como la fila ya no se estira (ver arriba), sus vecinas no se
   mueven. */
.hr-card .hr-btn-slot {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
}
.hr-card .thumbnail-container:hover .hr-btn-slot,
.hr-card .thumbnail-container:focus-within .hr-btn-slot {
  max-height: 48px;
  margin-top: 14px;
  opacity: 1;
}
.hr-card .hr-btn-slot form {
  margin: 0 !important;
}

/* Estilo de botón unificado (2026-07-23, a petición de Victoria: "el
   estilo de los botones debe ser igual siempre... de momento los
   dejamos todos sin bordes"). Antes este botón era un "hueco"
   (fondo igual al crema de la card + borde violeta que se rellenaba
   en hover) — con el borde quitado se volvía invisible por defecto
   (el fondo #efe3d2 es idéntico al de la propia card, sin ningún
   borde que lo delimitara). Se pasa al mismo esquema de color que
   .hr-cta-button ("Ver CBD" y el resto de botones de la home): violeta
   claro + texto oscuro por defecto, violeta fuerte + texto claro en
   hover — mismo tratamiento en todos los botones del sitio, sin
   bordes ni esquinas redondeadas. */
.hr-card .hr-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 !important;
  padding: 10px !important;
  border: none !important;
  border-radius: var(--hr-radius-accion) !important;
  background: var(--hr-color-acento-claro, #c79ce2) !important;
  color: var(--hr-color-texto-oscuro, #221200) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hr-card .hr-btn:hover,
.hr-card .hr-btn:focus {
  background: var(--hr-color-acento, #581f7c) !important;
  color: var(--hr-color-texto-sobre-acento, #e6dacc) !important;
}