/*
 * WebCreare Commerce — card prodotto (Fase 5).
 * Richiede le custom properties di theme.css. Vive dentro due contesti diversi:
 * 1) le grid della Home (.wc-product-section__grid in home.css);
 * 2) ".products", il contenitore che il tema classic usa per liste prodotto non
 *    ridisegnate da noi (categoria, ricerca, marca, fornitore) — la card sostituisce
 *    l'intero markup di catalog/_partials/miniatures/product.tpl ma quel contenitore
 *    resta quello del tema classic, quindi la griglia a 3 colonne va data qui.
 */

/*
 * !important qui: il tema classic definisce ".products" con un selettore più specifico
 * (es. "#products .products, .featured-products .products, ..." in theme.css) che vince a
 * prescindere dall'ordine di caricamento dei fogli di stile. Sovrascrivere un layout di
 * classic che non controlliamo è uno dei pochi casi in cui !important è la scelta giusta.
 */
.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* Se il tema classic avvolge ogni prodotto in una propria colonna Bootstrap (width/flex-basis
   fissi in percentuale, tipico di quel markup), neutralizziamo quella larghezza qui: deve
   riempire per intero la cella che le assegna la grid sopra, non restringersi ulteriormente. */
.products > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

.wc-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-md);
  overflow: hidden;
  transition: box-shadow var(--wc-transition), border-color var(--wc-transition);
}

.wc-product-card:hover {
  box-shadow: var(--wc-shadow-md);
  border-color: transparent;
}

.wc-product-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.wc-product-card__badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--wc-color-secondary);
}

.wc-product-card__badge--discount,
.wc-product-card__badge--sale {
  background: var(--wc-color-accent);
}

.wc-product-card__badge--new {
  background: var(--wc-color-primary);
}

.wc-product-card__badge--online-only,
.wc-product-card__badge--pack {
  background: var(--wc-color-text-muted);
}

.wc-product-card__badge--out_of_stock {
  background: #9CA3AF;
}

.wc-product-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wc-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--wc-transition), transform var(--wc-transition), color var(--wc-transition), background var(--wc-transition);
}

.wc-product-card:hover .wc-product-card__wishlist,
.wc-product-card__wishlist:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.wc-product-card__wishlist:hover {
  background: #fff;
  color: var(--wc-color-accent);
}

.wc-product-card__wishlist[aria-pressed='true'] {
  color: var(--wc-color-accent);
  opacity: 1;
  transform: translateY(0);
}

.wc-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wc-color-surface);
  padding: 12px;
}

.wc-product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, non cover: mostra il prodotto intero invece di ritagliarlo (coerente con la
     stessa scelta fatta per l'immagine hero in home.css). Il padding del genitore
     (.wc-product-card__media) dà il margine attorno, "inset: 0" lo rispetta già da solo. */
  object-fit: contain;
  transition: opacity 320ms ease, transform 320ms ease;
}

.wc-product-card__image--primary {
  opacity: 1;
}

.wc-product-card__image--hover {
  opacity: 0;
}

.wc-product-card:hover .wc-product-card__image--primary {
  opacity: 0;
}

.wc-product-card:hover .wc-product-card__image--hover {
  opacity: 1;
}

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

.wc-product-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.wc-product-card__name {
  color: var(--wc-color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wc-product-card__name:hover {
  color: var(--wc-color-hover, var(--wc-color-primary));
}

.wc-product-card__rating {
  min-height: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #F5A623;
  font-size: 12px;
}

.wc-product-card__rating:empty {
  display: none;
}

.wc-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.wc-product-card__price-now {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--wc-color-text);
  font-variant-numeric: tabular-nums;
}

.wc-product-card__price-old {
  font-size: 13px;
  color: var(--wc-color-text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.wc-product-card__form {
  margin-top: 6px;
}

.wc-product-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--wc-transition), transform var(--wc-transition), background var(--wc-transition);
}

.wc-product-card:hover .wc-product-card__cta,
.wc-product-card__cta:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.wc-product-card__cta:hover {
  background: var(--wc-color-primary);
}

.wc-product-card__cta--outline {
  background: none;
  border: 1px solid var(--wc-color-border);
  color: var(--wc-color-text-muted);
  cursor: default;
  opacity: 1;
  transform: none;
}

/* Dispositivi senza hover (touch): wishlist e CTA sempre visibili */
@media (hover: none) {
  .wc-product-card__wishlist,
  .wc-product-card__cta {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive: griglia ".products" (categoria/ricerca/marca/fornitore) ---------- */

@media (max-width: 860px) {
  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .products {
    grid-template-columns: 1fr !important;
  }
}