/**
 * Featured Products / Product Grid / Product Card — TShop
 * Migrado desde la sección Featured Products + ProductGrid.tsx + ProductCard.tsx.
 *
 * Card v2 (2026-07, referencias empi.re + chromeindustries.com): plana,
 * sin borde ni fondo; imagen sobre placa gris fija con mix-blend multiply;
 * badges superpuestos; SKU mono; swap de imagen en hover.
 */

/* Section */
.featured-products {
  padding-block: 2rem;
}

.featured-products__container {
  max-width: 90svw;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Este layout de encabezado se espeja en new-arrivals.css:
   si cambia aquí, cambiar allá. */
.featured-products__header {
  text-align: center;
  padding-block: 2rem;
  text-transform: uppercase;
}

.featured-products__title {
  font-family: var(--font-headline);
  /* Fluida: 30px en móvil → 36px desde ~1024 (antes: salto fijo en 768). */
  font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-surface);
  margin: 0 !important;
}

.featured-products__subtitle {
  margin: 0;
  font-size: 1rem;
  /* on-surface-variant (no outline): outline sobre surface da 4.1:1,
     bajo el AA de 4.5:1 para texto normal. */
  color: var(--on-surface-variant);
}

.featured-products__footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.featured-products__view-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  transition: color 0.3s ease-out;
}

.featured-products__view-more:hover {
  color: var(--primary);
}

.featured-products__view-more svg {
  transition: transform 0.3s ease-out;
}

.featured-products__view-more:hover svg {
  transform: translateX(0.75rem);
}

.featured-products__view-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Grid */
.product-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .product-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Empty state */
.product-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 4rem;
  text-align: center;
}

.product-grid-empty__icon-wrap {
  border-radius: 9999px;
  background-color: var(--surface-container-high);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.product-grid-empty__icon {
  height: 3rem;
  width: 3rem;
  color: var(--muted-foreground);
}

.product-grid-empty__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--on-surface);
}

.product-grid-empty__hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 24rem;
}

/* ==========================================================================
   Card v2 — plana
   ========================================================================== */

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/*
 * Placa de imagen FIJA clara en ambos esquemas: las fotos de producto
 * tienen fondo blanco y multiply las funde con la placa (el blanco
 * "desaparece"). En dark no se invierte: una foto de fondo blanco sobre
 * placa oscura se vería como un rectángulo blanco flotando.
 */
.product-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: rgb(233 239 240);
}

/* Badges superpuestos (estilo empi.re): categoría + estado. */
.product-card__badges {
  position: absolute;
  z-index: 10;
  top: 0.625rem;
  left: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  /* Que no intercepten el clic hacia la ficha de producto. */
  pointer-events: none;
}

/* Colores FIJOS: los badges viven sobre la placa clara fija, no sobre
   surface — no deben seguir el flip light/dark de la paleta. */
.product-card__badge {
  display: inline-block;
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-card__badge--cat {
  background-color: rgb(23 29 30);
  color: rgb(236 242 243);
}

.product-card__badge--sale {
  background-color: var(--success); /* success es fijo (no flip en dark) */
  color: var(--success-foreground);
}

.product-card__badge--new {
  background-color: rgb(255 221 184);
  color: rgb(101 62 0);
}

.product-card__badge--soldout {
  background-color: rgb(255 255 255 / 0.9);
  color: rgb(63 72 73);
  border: 1px solid rgb(111 121 122);
}

/* Backorder (dropshipping): se compra hoy, se importa 10–20 días. Mismo
   ámbar del aviso de compra internacional. */
.product-card__badge--backorder {
  background-color: rgb(255 255 255 / 0.9);
  color: #7c4a03;
  border: 1px solid rgb(180 83 9 / 0.45);
}

.product-card__quick-actions {
  position: absolute;
  z-index: 10;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  transform: translateY(-2.5rem);
  opacity: 0;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* focus-within: sin él, los botones rápidos reciben foco de teclado
   estando invisibles (opacity 0). */
.product-card:hover .product-card__quick-actions,
.product-card:focus-within .product-card__quick-actions {
  transform: translateY(0);
  opacity: 1;
}

/*
 * Doble clase (.product-card .__icon-btn = 0,2,0): en el catálogo el body
 * lleva la clase woocommerce y el CSS dinámico de Astra (.woocommerce-page
 * button…, 0,1,1) pisa nuestras clases sueltas. Su padding dejaba el
 * content-box del botón en 0 y el flexbox aplastaba el svg a width 0
 * (medido: iconos invisibles solo en catálogo, nunca en la home).
 */
.product-card .product-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
  border: none;
  background-color: rgb(255 255 255 / 0.85);
  color: rgb(23 29 30);
  cursor: pointer;
  transition:
    color 0.2s ease-out,
    transform 0.15s ease-out;
}

.product-card .product-card__icon-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Estados EXPLÍCITOS: Astra pinta button:hover/:focus globalmente. */
.product-card .product-card__icon-btn:hover,
.product-card .product-card__icon-btn:focus,
.product-card .product-card__icon-btn:active {
  background-color: rgb(255 255 255);
  color: rgb(23 29 30);
  transform: scale(1.1);
}

.product-card .product-card__icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
 * OJO: el picture NO puede llevar transform/opacity/filter — un ancestro
 * con transform crea un contexto de apilamiento que AÍSLA el blend de las
 * imágenes hijas: multiply deja de ver la placa y el fondo blanco de la
 * foto reaparece (medido en hover). El scale va en las imágenes mismas.
 */
.product-card__picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Funde el fondo blanco de la foto con la placa. */
  mix-blend-mode: multiply;
  transition:
    opacity 0.35s ease-out,
    transform 0.5s ease-out;
}

.product-card:hover .product-card__image {
  transform: scale(1.04);
}

/*
 * Swap en hover: con multiply el blanco es "transparente", así que un
 * crossfade normal dejaría ver la imagen base a través de la segunda.
 * La base se apaga solo cuando existe una imagen hover (:has) YA CARGADA:
 * [data-src] marca "pendiente" (product-card.js lo quita en onload) — sin
 * esa guarda, el primer hover apagaría la base contra una imagen aún
 * descargándose y la card quedaría en blanco un instante.
 */
.product-card__image--hover {
  opacity: 0;
}

.product-card:hover
  .product-card__picture:has(.product-card__image--hover:not([data-src]))
  .product-card__image:not(.product-card__image--hover),
.product-card:focus-within
  .product-card__picture:has(.product-card__image--hover:not([data-src]))
  .product-card__image:not(.product-card__image--hover) {
  opacity: 0;
}

.product-card:hover .product-card__image--hover:not([data-src]),
.product-card:focus-within .product-card__image--hover:not([data-src]) {
  opacity: 1;
}

/* Contenido bajo la imagen, alineado al borde de la placa. */
.product-card__info {
  padding: 0.875rem 0.125rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.product-card__tech-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.125rem;
}

/* El toque "technical" del brand: el SKU es dato real para makers. */
.product-card__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.product-card__rating {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #eab308;
  font-size: 0.75rem;
}

.product-card__rating span {
  font-weight: 700;
  color: var(--on-surface);
}

.product-card__title {
  margin: 0;
  /* Explícita: Astra estiliza h1-h6 con la fuente de su customizer
     (Montserrat) — el heading NO hereda la del brand (medido). */
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 líneas reservadas: alinea precios entre cards vecinas. */
  min-height: calc(2 * 1.25em);
}

.product-card__manufacturer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #3b82f6;
}

.product-card__manufacturer span {
  font-weight: 600;
  color: var(--on-surface-variant);
}

/* Aviso de importación bajo pedido (todo lo que no es Seeed Studio). */
.product-card__intl {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #b45309;
}

.product-card__intl svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.product-card__intl span {
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .product-card__intl {
    color: #fbbf24;
  }
}

.product-card__footer {
  padding: 0.625rem 0.125rem 0.25rem;
  margin-top: auto;
}

.product-card__pricing-row {
  display: flex;
  /* wrap: en cards angostas (~200px a 320 de viewport) precio + botón
     no caben en una fila; el botón baja en vez de desbordar. */
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-card__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-card__price-compare {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.product-card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* Doble clase: mismo motivo que __icon-btn (CSS dinámico de Astra en
   páginas WooCommerce con especificidad 0,1,1). */
.product-card .product-card__add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  /* Sin esto hereda la fuente de botones del customizer de Astra
     (serif — medido 2026-07-28), no la del brand. */
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out,
    opacity 0.2s ease-out;
  flex-shrink: 0;
}

/* Estados EXPLÍCITOS (Astra pinta button:hover/:focus globalmente).
   inverse-primary + on-primary-container contrastan bien en ambos
   esquemas (teal claro/fondo oscuro y viceversa). */
.product-card .product-card__add-to-cart:hover,
.product-card .product-card__add-to-cart:focus,
.product-card .product-card__add-to-cart:active {
  background-color: var(--inverse-primary);
  color: var(--on-primary-container);
}

.product-card .product-card__add-to-cart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.product-card .product-card__add-to-cart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .product-card__image,
  .product-card__quick-actions,
  .featured-products__view-more svg {
    transition: none;
  }
}