/* ==========================================================================
   iCase — CARD DE PRODUCTO DE RIO, RESTILIZADA  ·  "Bloque"
   Archivo: static/css/icase-grid.css
   Requiere: icase-tokens.css

   Rio ya tiene una card completa: variantes de color, quickshop, etiquetas,
   cuotas y precio con transferencia. Se usa en el home, en categoría, en la
   búsqueda y en los relacionados.

   Este archivo NO la reemplaza: la reviste. Un solo lugar para las cuatro
   pantallas, y sobrevive a las actualizaciones del tema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor
   -------------------------------------------------------------------------- */
.item-product {
  background: var(--ic-paper);
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: var(--ic-s5);
}

/* --------------------------------------------------------------------------
   Imagen — el único elemento con esquinas blandas del sistema
   -------------------------------------------------------------------------- */
.item-product .item-image,
.item-product .item-image-featured,
.item-product .product-item-image-container,
.item-product .js-item-image-container {
  border-radius: var(--ic-r-case);
  overflow: hidden;
  background: var(--ic-mist);
}
.item-product img { transition: transform var(--ic-t-slow) var(--ic-ease-out); }
@media (hover: hover) { .item-product:hover img { transform: scale(1.04); } }

/* Etiquetas de oferta / promo */
.item-floating-elements .label,
.item-product .label {
  border-radius: var(--ic-r-ui) !important;
  font-family: var(--ic-mono);
  font-size: var(--ic-fs-xs) !important;
  font-weight: var(--ic-fw-medium) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px !important;
}
.item-product .label-accent { background: var(--ic-flame) !important; color: #fff !important; }
.item-product .label-default,
.item-product .label-secondary { background: var(--ic-ink) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Nombre
   -------------------------------------------------------------------------- */
.item-product .js-item-name,
.item-product .item-name {
  font-family: var(--ic-font);
  font-size: var(--ic-fs-body) !important;
  font-weight: var(--ic-fw-semi) !important;
  letter-spacing: -0.015em;
  line-height: 1.3 !important;
  color: var(--ic-ink) !important;
  margin-top: var(--ic-s4) !important;
}
.item-product:hover .js-item-name { color: var(--ic-blue-deep) !important; }

/* --------------------------------------------------------------------------
   Precios — alineados en columna con tabular-nums
   -------------------------------------------------------------------------- */
.item-product .item-price-container { margin-top: 4px !important; margin-bottom: 4px !important; }
.item-product .item-price,
.item-product .js-price-display {
  font-size: 1.125rem !important;
  font-weight: var(--ic-fw-black) !important;
  letter-spacing: -0.03em;
  color: var(--ic-ink) !important;
  font-variant-numeric: tabular-nums;
}
.item-product .price-compare,
.item-product .js-compare-price-display {
  font-size: var(--ic-fs-sm) !important;
  color: var(--ic-ink-3) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

/* Precio con transferencia: la palanca fuerte, en verde */
.item-product .js-payment-discount-price-container,
.item-product [class*="payment-discount"] {
  color: var(--ic-ok) !important;
  font-weight: var(--ic-fw-semi) !important;
  font-size: var(--ic-fs-sm) !important;
}

/* Cuotas en monoespaciada */
.item-product .item-installments,
.item-product [class*="installment"] {
  font-family: var(--ic-mono) !important;
  font-size: var(--ic-fs-xs) !important;
  letter-spacing: .03em;
  color: var(--ic-ink-3) !important;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Variantes de color
   -------------------------------------------------------------------------- */
.item-colors { margin-top: var(--ic-s3) !important; gap: 5px; }
.item-colors-bullet {
  width: 15px; height: 15px;
  border-radius: var(--ic-r-ui) !important;
  border: 1px solid var(--ic-line) !important;
}
.item-colors-bullet.selected,
.item-colors-bullet:hover { border-color: var(--ic-ink) !important; }
.item-colors-bullet-more {
  font-family: var(--ic-mono); font-size: 10px;
  color: var(--ic-ink-3); border: 0 !important;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.item-product .btn,
.item-btn-quickshop {
  border-radius: var(--ic-r-ui) !important;
  font-family: var(--ic-font) !important;
  font-weight: var(--ic-fw-bold) !important;
  letter-spacing: -0.01em;
  border-width: 1.5px !important;
}
.item-product .btn-primary {
  background: var(--ic-blue) !important;
  border-color: var(--ic-blue) !important;
  color: #fff !important;
}
.item-product .btn-primary:hover { background: var(--ic-blue-hover) !important; }
.item-product .btn-secondary,
.item-product .btn-default {
  background: transparent !important;
  border-color: var(--ic-ink) !important;
  color: var(--ic-ink) !important;
}
.item-product .btn-secondary:hover { background: var(--ic-ink) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Estantes del home
   -------------------------------------------------------------------------- */
.ic-shelf { padding-block: var(--ic-section-y); }
.ic-shelf--mist { background: var(--ic-mist); }
.ic-shelf__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ic-s5) var(--ic-s4); }
@media (min-width: 768px)  { .ic-shelf__grid { grid-template-columns: repeat(4, 1fr); gap: var(--ic-s7) var(--ic-s5); } }
/* Neutraliza las columnas de Bootstrap que trae la card de Rio */
.ic-shelf__grid > .item-product,
.ic-shelf__grid > .js-item-product {
  width: 100% !important; max-width: 100% !important;
  flex: none !important; padding-left: 0 !important; padding-right: 0 !important;
  margin-bottom: 0 !important;
}