/* highlight */
.tn-highlight mark { background:#fff3a3; padding:0 .15em; border-radius:0; }
.tn-hidden { display:none !important; }

/* badge */
.tn-match-badge{
  position:absolute; top:.5rem; left:.5rem;
  padding:.25rem .5rem; font-size:.75rem; font-weight:600;
  background:#ffe082; color:#111; border-radius:4px; z-index:3;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  pointer-events:none;
}

/* === Grid de productos: imágenes consistentes ===================== */
/* 1) El contenedor de la imagen define la relación de aspecto       */
/*    Elegí 1/1 (cuadrado). Cambiá a 4/3, 3/2, etc si preferís.      */
.js-product-table .js-item-product a,
.js-product-table .js-item-product .item-link,
.js-product-table .js-item-product .product-image,
.js-product-table .js-item-product .product-item__image {
  display: block;
  aspect-ratio: 1 / 1;   /* ← cuadrado uniforme */
  overflow: hidden;
  padding: 0 !important; /* anulamos el padding-top/padding 25% del hack anterior */
  position: relative;
}

/* 2) La imagen ocupa todo el contenedor y se centra */
.js-product-table .js-item-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Modo A: mostrar la imagen completa, sin cortar */
  object-position: center center;
  display: block;
}

/* 3) Fallback para navegadores sin aspect-ratio (muy antiguos) */
@supports not (aspect-ratio: 1 / 1) {
  .js-product-table .js-item-product a,
  .js-product-table .js-item-product .item-link,
  .js-product-table .js-item-product .product-image,
  .js-product-table .js-item-product .product-item__image {
    position: relative;
  }
  .js-product-table .js-item-product a::before,
  .js-product-table .js-item-product .item-link::before,
  .js-product-table .js-item-product .product-image::before,
  .js-product-table .js-item-product .product-item__image::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
  }
  .js-product-table .js-item-product img {
    position: absolute; inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
  }
}





