/**
 * Fase 2 — Rediseño Abasto: catálogo (listados) y ficha de producto.
 * Requiere abasto-brand.css (tokens + fuentes) cargado antes.
 */

/* ---------- Breadcrumb ---------- */

nav.breadcrumb {
  font-family: var(--abasto-font-text);
  color: var(--abasto-muted);
  font-size: 13px;
}

nav.breadcrumb a {
  color: var(--abasto-muted);
}

nav.breadcrumb a:hover {
  color: var(--abasto-azul);
}

/* ---------- Flags (Nuevo, Oferta, Fuera de stock, etc.) ---------- */

.product-flag {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px !important;
  color: var(--abasto-blanco) !important;
  background: var(--abasto-negro);
  padding: 4px 10px;
  border-radius: 4px;
}

.product-flag.on-sale,
.product-flag.discount,
.product-flag.discount-amount,
.product-flag.discount-percentage {
  background: var(--abasto-rojo);
}

.product-flag.new {
  background: var(--abasto-azul);
}

.product-flag.out_of_stock,
.product-flag.out-of-stock {
  background: var(--abasto-tierra-oscuro);
}

/* ---------- Catálogo: cards de producto ---------- */

.product-miniature {
  font-family: var(--abasto-font-text);
}

.product-miniature .thumbnail-container {
  border: 1px solid var(--abasto-linea);
  border-radius: var(--abasto-radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-miniature:hover .thumbnail-container {
  border-color: var(--abasto-azul);
  box-shadow: 0 8px 20px rgba(28, 28, 27, 0.08);
}

.product-miniature .brand-title a {
  font-family: var(--abasto-font-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--abasto-muted);
}

.product-miniature .product-title a {
  font-family: var(--abasto-font-text);
  font-weight: 600;
  color: var(--abasto-negro);
}

.product-miniature .product-title a:hover {
  color: var(--abasto-azul);
}

.product-miniature .product-price-and-shipping .price {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  color: var(--abasto-azul);
  font-size: 18px;
}

.product-miniature .product-price-and-shipping .regular-price {
  color: var(--abasto-muted);
  text-decoration: line-through;
  font-size: 13px;
}

.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-price-and-shipping .discount-amount {
  background: var(--abasto-rojo);
  color: var(--abasto-blanco);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.product-miniature .btn.add-to-cart {
  background: var(--abasto-azul);
  border-color: var(--abasto-azul);
  font-family: var(--abasto-font-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 4px;
}

.product-miniature .btn.add-to-cart:hover {
  background: var(--abasto-azul-oscuro);
  border-color: var(--abasto-azul-oscuro);
}

/* ---------- Ficha de producto ---------- */

.productpage_title {
  font-family: var(--abasto-font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--abasto-negro);
  letter-spacing: 0.005em;
}

.product-manufacturer,
.product-reference,
.product-quantities,
.product-condition {
  font-family: var(--abasto-font-text);
  font-size: 14px;
}

.product-manufacturer .label,
.product-reference .label,
.product-quantities .label,
.product-condition .label {
  color: var(--abasto-muted);
  font-weight: 600;
}

.product-manufacturer a {
  color: var(--abasto-azul);
  font-weight: 600;
}

/* precio y compra (listos para cuando se desactive el modo catálogo) */

.product-prices .current-price-value {
  font-family: var(--abasto-font-display);
  font-weight: 800;
  color: var(--abasto-azul);
  font-size: 32px;
}

.product-prices .regular-price {
  color: var(--abasto-muted);
  text-decoration: line-through;
}

.product-prices .discount {
  background: var(--abasto-rojo);
  color: var(--abasto-blanco);
  font-family: var(--abasto-font-text);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
}

.product-add-to-cart .btn.add-to-cart {
  background: var(--abasto-rojo);
  border-color: var(--abasto-rojo);
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 4px;
  padding: 12px 28px;
}

.product-add-to-cart .btn.add-to-cart:hover {
  background: #b81f26;
  border-color: #b81f26;
}

#product-availability .product-available {
  color: #1f7a3d;
}

#product-availability .product-unavailable {
  color: var(--abasto-rojo);
}

/* ---------- Pestañas (Descripción / Detalles / Opiniones) ---------- */

.nav.nav-tabs {
  border-bottom: 2px solid var(--abasto-linea);
}

.nav.nav-tabs a {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
  color: var(--abasto-muted);
}

.nav.nav-tabs li.active a,
.nav.nav-tabs a.active {
  color: var(--abasto-azul);
  border-bottom: 2px solid var(--abasto-rojo);
}

.data-sheet dt.name {
  font-family: var(--abasto-font-text);
  font-weight: 600;
  color: var(--abasto-negro);
}

.data-sheet dd.value {
  font-family: var(--abasto-font-text);
  color: var(--abasto-muted);
}

/* ---------- Reassurance (íconos de confianza) ---------- */

.blockreassurance_product .block-title {
  font-family: var(--abasto-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--abasto-azul) !important;
  font-size: 13px !important;
}

.blockreassurance_product p {
  font-family: var(--abasto-font-text) !important;
  color: var(--abasto-muted) !important;
  font-size: 12px !important;
}