/* Product card — Grid Layout "Product" (us_grid_layout ID 213 → .layout_213).
 *
 * Classe da mettere in "Extra class name" sul wrapper esterno della card
 * (vwrapper:1 → .usg_vwrapper_1) nel Grid Layout - Product.
 *
 * Stati Figma:  Default → node 195:8008   Hover → node 195:8053
 *
 * Struttura reale della card (verificata renderizzando il grid via wp-cli):
 *   .usg_vwrapper_1  ← card (qui va .pmc-product-card)
 *     .usg_post_taxonomy_2  → pill categoria (bg azzurro, testo #253970) — INVARIATA su hover
 *     .usg_vwrapper_2       → contenuto (padding)
 *       .usg_post_taxonomy_1 → brand
 *       .usg_post_title_1    → titolo
 *       .usg_product_field_1 → PREZZO (markup Woo: del/ins > .woocommerce-Price-amount > bdi)
 *       .usg_hwrapper_1      → riga "Already purchased": svg (fill #766F67) + .usg_text_1
 *       .usg_btn_1 .w-btn    → bottone
 *
 * Il fondo/bordo/ombra della card NON sono impostati da Impreza (lo scoped
 * <style> non tocca .usg_vwrapper_1): arrivano tutti da qui.
 *
 * Transizione morbida: i gradienti non fanno tween in CSS → i due fondi stanno
 * su ::before (default) e ::after (hover) e si incrociano in opacity. Colori
 * testo, icona e bottone transitano con la stessa durata/easing (--pmc-ease).
 *
 * INNESCO HOVER: `.w-grid-item:hover` (l'intero item del grid), NON la card.
 * La card ha il link Impreza su tutta la superficie (.has-link +
 * .w-vwrapper-link) e il prodotto sporge sopra il bordo: hover e click
 * devono coprire tutta l'area, immagine compresa. layout_223.css segue lo
 * stesso innesco nei suoi override.
 */

.pmc-product-card.pmc-product-card {
  --pmc-ease: 0.5s cubic-bezier(0.22, 1, 0.36, 1); /* morbido, ease-out */
  position: relative;
  border-radius: 24px !important;
  border: 1px solid #fff !important;
  background: transparent !important; /* fondi sui pseudo, per il crossfade */
  box-shadow: 0 8px 20px 0 rgba(182, 160, 120, 0.5) !important; /* Shadow/M */
  transition: box-shadow var(--pmc-ease);
}

/* Due fondi sovrapposti: ::before = default (crema), ::after = hover (blu/dark) */
.pmc-product-card.pmc-product-card::before,
.pmc-product-card.pmc-product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--pmc-ease);
}
.pmc-product-card.pmc-product-card::before {
  background: linear-gradient(128.25deg, #fff3df 0%, #e9d8b8 70.59%);
  opacity: 1;
}
.pmc-product-card.pmc-product-card::after {
  background: linear-gradient(128.25deg, #9db3c7 0%, #373b56 70.59%);
  opacity: 0;
}
/* Innesco hover = INTERO grid item (.w-grid-item), non solo il box card:
 * la card ha il link Impreza su tutta la superficie (.w-vwrapper-link, vedi
 * sotto) e il prodotto sporge sopra la card → hover e click devono reagire
 * su tutta l'area del prodotto, immagine compresa. */
.w-grid-item:hover .pmc-product-card.pmc-product-card::before {
  opacity: 0;
}
.w-grid-item:hover .pmc-product-card.pmc-product-card::after {
  opacity: 1;
}

/* Contenuto sopra i fondi */
.pmc-product-card.pmc-product-card > * {
  position: relative;
  z-index: 1;
}

/* Transizione colore/fill su tutto ciò che cambia in hover */
.pmc-product-card .usg_post_taxonomy_1,
.pmc-product-card .usg_post_taxonomy_1 span,
.pmc-product-card .usg_post_title_1,
.pmc-product-card .usg_product_field_1,
.pmc-product-card .usg_product_field_1 *,
.pmc-product-card .usg_text_1,
.pmc-product-card .usg_text_1 *,
.pmc-product-card .usg_hwrapper_1 svg path,
.pmc-product-card .usg_btn_1,
.pmc-product-card .usg_btn_1 .w-btn-label {
  transition: color var(--pmc-ease), fill var(--pmc-ease),
    background var(--pmc-ease), border-color var(--pmc-ease);
}

/* Prezzo in saldo: WooCommerce mette il prezzo attuale in <ins>, che di default
 * il browser sottolinea. Figma non ha sottolineatura → la rimuovo (il <del>
 * mantiene il line-through standard del prezzo barrato). */
.pmc-product-card .usg_product_field_1 ins {
  text-decoration: none;
}

/* ---- Hover: tutti i testi → bianco (brand, titolo, prezzo, already purchased) ---- */
.w-grid-item:hover .pmc-product-card .usg_post_taxonomy_1,
.w-grid-item:hover .pmc-product-card .usg_post_taxonomy_1 span,
.w-grid-item:hover .pmc-product-card .usg_post_title_1,
.w-grid-item:hover .pmc-product-card .usg_post_title_1 a,
.w-grid-item:hover .pmc-product-card .usg_product_field_1,
.w-grid-item:hover .pmc-product-card .usg_product_field_1 del,
.w-grid-item:hover .pmc-product-card .usg_product_field_1 ins,
.w-grid-item:hover
  .pmc-product-card
  .usg_product_field_1
  .woocommerce-Price-amount,
.w-grid-item:hover .pmc-product-card .usg_product_field_1 bdi,
.w-grid-item:hover
  .pmc-product-card
  .usg_product_field_1
  .woocommerce-Price-currencySymbol,
.w-grid-item:hover .pmc-product-card .usg_text_1,
.w-grid-item:hover .pmc-product-card .usg_text_1 .w-text-value {
  color: #fff !important;
}

/* Icona "sync" della riga already purchased → bianca (batte il fill inline #766F67) */
.w-grid-item:hover .pmc-product-card .usg_hwrapper_1 svg path {
  fill: #fff !important;
}

/* ---- Posizione prodotto (Figma node 495:4622) ----
 * Nel Grid Layout l'immagine prodotto (.w-image.usg_image_1) è un fratello
 * PRIMA della card, quindi di default sta tutta sopra la card senza
 * sovrapporsi. In Figma invece il prodotto sporge dal bordo superiore e la
 * metà bassa si sovrappone alla card (sopra il fondo crema).
 *
 * margin-bottom negativo → tira su la card sotto l'immagine (overlap).
 * È in % così scala con la larghezza della card (~419px desktop): -44% ≈ -184px.
 * z-index sopra la card così il prodotto viene dipinto sopra il gradiente.
 * pointer-events:none → i click passano al link della card sottostante. */
.w-grid-item:has(.pmc-product-card) .w-image.usg_image_1 {
  position: relative;
  z-index: 3;
  margin-bottom: -44%;
  pointer-events: none;
}

/* ---- Card di altezza uguale ----
 * Il contenuto della card varia (brand, titolo su più righe, prezzo in saldo)
 * → altezze diverse. Il grid us_product_list (JS Impreza) NON allarga la riga
 * al contenuto più alto in modo affidabile, quindi flex-grow non basta.
 * min-height forza tutte le card almeno a questa altezza (la più alta attuale
 * è ~386px): tutte pari, bottoni allineati. Il contenuto resta ancorato in
 * basso (card = valign_bottom); lo spazio extra va sopra, nella zona prodotto. */
.pmc-product-card.pmc-product-card {
  min-height: 390px;
}

/* ---- Prezzo nero (Figma node 9:210, #080707) ----
 * Di default WooCommerce/tema colora il prezzo in saldo (<ins>) col colore
 * link (blu). Figma lo vuole nero come il resto → forzo bdi/ins/amount. */
.pmc-product-card .usg_product_field_1,
.pmc-product-card .usg_product_field_1 bdi,
.pmc-product-card .usg_product_field_1 ins,
.pmc-product-card .usg_product_field_1 .woocommerce-Price-amount,
.pmc-product-card .usg_product_field_1 .woocommerce-Price-currencySymbol {
  color: #080707 !important;
}

/* La pill categoria (.usg_post_taxonomy_2) resta invariata su hover — da design. */

/* ---- Bottone "Add to cart": reagisce all'hover dell'ITEM ----
 * NB: nel DOM reale w-btn / us-btn-style_1 / usg_btn_1 sono sullo STESSO <a>
 * (non annidati), quindi si targetta .usg_btn_1 direttamente. */
.w-grid-item:hover .pmc-product-card .usg_btn_1 {
  background: linear-gradient(270deg, #bfc2d5 0%, #fff 100%) !important;
  border-color: #fff !important;
}
.w-grid-item:hover .pmc-product-card .usg_btn_1,
.w-grid-item:hover .pmc-product-card .usg_btn_1 .w-btn-label {
  color: #000 !important;
}

/* ---- Link su TUTTA la card (Impreza "Link" sul vwrapper → .has-link) ----
 * Impreza aggiunge <a class="w-vwrapper-link"> come ultimo figlio della card,
 * ma il suo CSS base non arriva nel CSS compilato della pagina → l'anchor
 * resta inline ad area zero. Lo stilizzo qui: overlay assoluto su tutta la
 * card. Il contenuto (.usg_vwrapper_2) diventa trasparente ai click
 * (pointer-events:none) così ovunque si clicchi si finisce sull'overlay,
 * TRANNE i link veri (titolo, bottone) che restano cliccabili. */
.pmc-product-card.pmc-product-card > .w-vwrapper-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pmc-product-card.has-link .usg_vwrapper_2 {
  pointer-events: none;
  /* sopra l'overlay (position:absolute z-index:1): i link interni devono
   * vincere l'hit-test, il resto passa sotto via pointer-events:none.
   * position:relative È OBBLIGATORIA: senza, z-index viene ignorato e
   * l'overlay (positioned) dipinge sopra, catturando anche il click sul
   * bottone "aggiungi al carrello" → apriva la scheda prodotto. */
  position: relative;
  z-index: 2;
}
.pmc-product-card.has-link .usg_vwrapper_2 a {
  pointer-events: auto;
}

/* Estensione dell'area cliccabile sopra la card, dove sporge il prodotto
 * (l'immagine 213 sporge ~63–120px secondo il breakpoint: 60px è il minimo
 * sicuro che non invade la riga sopra). Solo desktop: sotto 1025px
 * l'immagine è nascosta dallo scoped CSS del grid. */
@media (min-width: 1025px) {
  .pmc-product-card.pmc-product-card > .w-vwrapper-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 60px;
  }
}

/* ---- Immagine prodotto 213 (.usg_hwrapper_2, background scoped) ----
 * Sibling PRIMA della card con margin-bottom:-45% e z-index:3 (scoped CSS del
 * grid): senza pointer-events:none blocca hover e click sulla zona di overlap.
 * Click-through → passano all'overlay link della card sottostante (stessa
 * logica di .usg_image_1 per il grid 223, vedi sopra). */
.layout_213 .w-grid-item .usg_hwrapper_2 {
  pointer-events: none;
}

.layout_213 .us-btn-style_3 {
  padding-inline: 8px !important;
}