/* LEGEND - tarjetas de producto (listados, renglones de la home, relacionados). Archivo del agente de tarjetas: subir la version al editar. */

/* 1.0.3 - Recuadro de imagen estandar. Estandar medido en /36-rock (1366px): imagen 221 x 247 px en columna de 233 px
   (miniatura 236 x 264) => relacion 236/264 (0.894). Se expresa como aspect-ratio, no en pixeles, para que escale en movil.
   - Imagen mas grande (modelo/personaje): se ajusta al alto del recuadro, ancho proporcional, pegada arriba (centrada en horizontal).
   - Imagen mas pequena/cuadrada (croptop): contain, nunca se recorta ni se deforma, pegada arriba.
   - "En stock" y los iconos quedan dentro del recuadro (el tema ya los superpone abajo; al quitar la franja extra caen sobre la imagen). */
.product-miniature .thumbnail-container a.product-thumbnail { aspect-ratio: auto; height: auto; } /* el tema fija aspect-ratio con width/height de la miniatura (236/305) */
.product-miniature .thumbnail-container .product-thumbnail picture {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 236 / 264;
  overflow: hidden;
}
.product-miniature .thumbnail-container .product-thumbnail picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center top;
}

/* Segunda imagen (hover): se superpone exactamente sobre la primera, no se apila debajo */
.product-miniature .thumbnail-container .product-thumbnail picture + picture {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  width: auto;
}

/* El tema pone una pildora blanca en los iconos y un badge verde de stock; que se lean sobre la imagen */
.product-miniature-grid .product-functional-buttons-bottom { bottom: .4rem; border-radius: 3px; }
.product-miniature-grid .product-availability { bottom: .4rem; }
.product-miniature-grid .product-availability .badge { margin-top: 0 !important; }

/* Pantalla tactil (sin hover): iconos siempre visibles en columna, arriba a la derecha; stock abajo a la izquierda */
@media (hover: none) {
  .product-miniature-grid .product-availability {
    position: absolute;
    left: .4rem;
    bottom: .4rem;
    transform: none;
  }
  .product-miniature-grid .product-functional-buttons-bottom {
    opacity: 1;
    transform: none;
    left: auto;
    right: .4rem;
    top: .4rem;
    bottom: auto;
    min-width: 0;
    padding: 0;
    background: rgba(255, 255, 255, .85);
  }
  .product-miniature-grid .product-functional-buttons-links { display: flex; flex-direction: column; }
  .product-miniature-grid .product-functional-buttons a { padding: .45rem .5rem; }
  .product-miniature-grid .product-functional-buttons i { font-size: 1.1rem; }
}

/* 1.0.4 - Sin la linea de marca ("LEGEND", .product-brand: la imprime la plantilla de miniatura aunque iqitthemeed_pl_grid_brand este en 0) */
.product-miniature .product-brand { display: none !important; }

/* 1.0.4 - Bloque de texto alineado por renglon: tarjeta en columna, el bloque de texto crece y el boton de compra queda pegado abajo.
   El nombre reserva N lineas (min-height en lh, con respaldo en em) para que precio y boton queden a la misma altura aunque el
   nombre ocupe 1, 2 o 3 lineas. Medido: nombres reales llegan a 3 lineas en listados/home/relacionados grandes (24.5px, line-height 1.2)
   y a 2 lineas en los relacionados compactos (12px, line-height 1.3). */
.product-miniature-grid { display: flex; flex-direction: column; height: 100%; }
.product-miniature-grid .product-description { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-miniature-grid .product-title {
  --lgc-lines: 3;
  min-height: calc(var(--lgc-lines) * 1.2em);
  min-height: calc(var(--lgc-lines) * 1lh);
}
.product-miniature-grid .product-add-cart { margin-top: auto; }
.lgp-grid-b .product-miniature-grid .product-title,
.lgp-grid-b .product-title { --lgc-lines: 2; min-height: calc(var(--lgc-lines) * 1.3em); min-height: calc(var(--lgc-lines) * 1lh); }