/* ==========================================================
   PLP — jerarquía de lectura (referencia: 47 Street)
   Pedido del cliente, 2026-10-09. Aplica a TODAS las tarjetas de producto
   (.js-item-product): home, categorías, /productos, búsqueda y relacionados.
   Precio en negrita y protagonista; nombre regular, gris, secundario.
   Para sacarlo: quitar el <link> de plp-jerarquia.css en layouts/layout.tpl.
   ========================================================== */

.js-item-product .item-description {
  padding-top: 8px !important;
}

/* Nombre: secundario, sin negrita (pisa la clase .font-weight-bold del theme) */
.js-item-product .item-name,
.js-item-product .item-name.font-weight-bold {
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px;
  color: #6b6b6b;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 2px !important;
}

/* Precio: protagonista */
.js-item-product .item-price {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: #000;
  letter-spacing: 0;
}

/* Transferencia y cuotas: terciario */
.js-item-product .item-price-transfer-wrapper {
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: #8a8a8a;
  margin-top: 2px;
}
.js-item-product .item-price-transfer-amount {
  font-weight: 600;
  color: #6b6b6b;
}
.js-item-product .item-installments,
.js-item-product .item-installments * {
  color: #8a8a8a !important;
  font-weight: 400 !important;
  font-size: 11px !important;
}
.js-item-product .item-installments .product-installment-amount,
.js-item-product .item-installments .product-installment-value {
  color: #6b6b6b !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  .js-item-product .item-name,
  .js-item-product .item-name.font-weight-bold {
    font-size: 11px !important;
    line-height: 14px;
  }
  .js-item-product .item-price {
    font-size: 14px;
    line-height: 18px;
  }
  .js-item-product .item-price-transfer-wrapper,
  .js-item-product .item-installments,
  .js-item-product .item-installments * {
    font-size: 10px !important;
    line-height: 13px;
  }
}

/* ---- Home: la grilla v2 (home-products-grid-v2.tpl) trae sus propias reglas con
   !important (nombre/precio 12px, peso 400) y se carga DESPUÉS de este archivo.
   Estas repiten la jerarquía con una clase más (.home-grid-v2 .js-item-product)
   para ganarle. Mismos valores que arriba. (2026-10-09) ---- */
.home-grid-v2 .js-item-product .item-name,
.home-grid-v2 .js-item-product .item-name.font-weight-bold {
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px;
  color: #6b6b6b;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  margin-bottom: 2px !important;
}
.home-grid-v2 .js-item-product .item-price {
  display: block;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 20px;
  color: #000;
  letter-spacing: 0 !important;
}
.home-grid-v2 .js-item-product .item-price-transfer-wrapper {
  font-weight: 400;
  font-size: 11px !important;
  line-height: 14px;
  color: #8a8a8a;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .home-grid-v2 .js-item-product .item-name,
  .home-grid-v2 .js-item-product .item-name.font-weight-bold {
    font-size: 11px !important;
    line-height: 14px;
  }
  .home-grid-v2 .js-item-product .item-price {
    font-size: 14px !important;
    line-height: 18px;
  }
  .home-grid-v2 .js-item-product .item-price-transfer-wrapper {
    font-size: 10px !important;
    line-height: 13px;
  }
}

/* ---- Home: evitar las tarjetas "gigantes" antes de que arranque el carrusel (2026-10-09) ----
   Los .swiper-slide miden 100% de ancho por CSS base; hasta que Swiper inicializa
   (espera a external.js) cada tarjeta ocupa toda la fila. Acá se les da de entrada el
   ancho final (2 por vista en mobile, 4 en desktop, gap de 4px = mismo que el Swiper de
   home-products-grid-v2.tpl) SOLO mientras el contenedor no tiene la clase que pone
   Swiper al inicializar. Después Swiper setea width/margin inline y manda él.
   Si se cambian slidesPerView/spaceBetween en home-products-grid-v2.tpl, cambiar acá. */
.home-grid-v2__swiper:not(.swiper-container-horizontal) .swiper-slide {
  width: calc((100% - 4px) / 2);
  margin-right: 4px;
}
@media (min-width: 768px) {
  .home-grid-v2__swiper:not(.swiper-container-horizontal) .swiper-slide {
    width: calc((100% - 12px) / 4);
  }
}