/* 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); }

/* Formulario "Añadir un mensaje" del detalle de pedido: el tema deja el select y el cuadro de texto sin borde visible */
select.form-control[data-role="product"],
textarea.form-control[data-role="msg-text"] {
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  background-color: #fff;
}
select.form-control[data-role="product"]:focus,
textarea.form-control[data-role="msg-text"]:focus {
  border-color: #0e0e0e;
  box-shadow: none;
  outline: 0;
}

/* ==========================================================================
   1.0.6 · Reglas generales (control central)
   Cambia aquí el color por defecto de enlaces y campos; menú, footer y componentes con clase
   propia (botones, tarjetas, pestañas, etc.) conservan sus colores especiales.
   ========================================================================== */
:root {
  --lg-link: #0e0e0e;          /* color por defecto de los enlaces del contenido */
  --lg-link-hover: #ff5a1f;    /* color al pasar el cursor */
  --lg-field-border: #b5b5b5;  /* borde de campos de formulario */
  --lg-field-border-focus: #0e0e0e;
}

/* Ningún enlace del sitio lleva subrayado (ni al pasar el cursor) */
a, a:hover, a:focus, a:active { text-decoration: none; }

/* Color por defecto de TODOS los enlaces. Mismo selector que la regla del tema (custom_s_1.css), que va antes,
   así que esta la sustituye. Cualquier enlace con clase propia y más específica (menú, footer oscuro,
   migas, botones, pestañas, tarjetas...) conserva su color especial. */
a:link:not(.nav-link):not(.btn),
a:visited:not(.nav-link):not(.btn) { color: var(--lg-link); }
a:link:hover:not(.nav-link):not(.btn),
a:visited:hover:not(.nav-link):not(.btn),
a:link:focus:not(.nav-link):not(.btn) { color: var(--lg-link-hover); }

/* Campos de formulario del contenido: borde visible (el tema los dejaba sin borde) */
#wrapper input.form-control:not([type="hidden"]),
#wrapper select.form-control,
#wrapper textarea.form-control,
#wrapper .custom-select {
  border: 1px solid var(--lg-field-border);
  border-radius: 4px;
  background-color: #fff;
}
#wrapper input.form-control:focus,
#wrapper select.form-control:focus,
#wrapper textarea.form-control:focus,
#wrapper .custom-select:focus {
  border-color: var(--lg-field-border-focus);
  box-shadow: none;
  outline: 0;
}
/* La cantidad del producto/carrito tiene su propio control */
#wrapper .bootstrap-touchspin input.form-control { border-color: transparent; }