/* Product card #2 — Grid Layout "Product01" (us_grid_layout ID 223 → .layout_223).
 * Variante Figma "Highlighted" (vetro/glass).  File Library:
 *   Default → node 11:401     Hover → node 11:421
 *
 * La card 223 usa la STESSA classe .pmc-product-card della card 213, quindi
 * eredita struttura, radius, bordo, overlap prodotto (-44%) e altezza uguale
 * (min-height) dal componente base (layout_213.css). Qui si sovrascrivono
 * SOLO le differenze della variante glass, con scoping su `.layout_223` così
 * la card 213 non viene toccata.
 *
 * Differenze vs base 213:
 *   fondo    → vetro bianco translucido rgba(255,255,255,.5) + backdrop blur   (base = gradiente crema)
 *   hover    → fondo bianco pieno; testi RESTANO scuri; bottone chiaro          (base = fondo dark, testi bianchi)
 *   ombra    → Card Product/Default: 0 4 8 rgba(109,95,80,.22)                  (base = Shadow/M più marcata)
 *   prezzo   → Lora SemiBold Italic 16px                                        (base = Helvetica 20px)
 *   brand    → Helvetica Neue Regular 14px #3F3A35                              (scoped 223 = 500 #080707)
 *   titolo   → Lora SemiBold(600) Italic 18px                                   (scoped 223 = 700)
 *
 * Specificità: `.layout_223 .w-grid-item:hover .pmc-product-card …` (0,5,0)
 * + !important batte sia lo <style> scoped di Impreza (`.layout_223 .usg_*`
 * 0,2,0 !important) sia l'hover del componente base
 * (`.w-grid-item:hover .pmc-product-card .usg_*` 0,4,0 !important).
 */

/* ---- Fondo vetro (glass) ----
 * La base tiene i fondi sui pseudo (::before default, ::after hover) e li
 * incrocia in opacity: qui basta cambiarne il colore.  Il blur va sulla card:
 * ::before (bianco .5) tinge il backdrop sfocato → frosted; in hover ::after
 * (bianco pieno) copre tutto e il blur sparisce. */
.layout_223 .pmc-product-card.pmc-product-card {
  box-shadow: 0 4px 8px 0 rgba(109, 95, 80, 0.22) !important; /* Card Product/Default */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.layout_223 .pmc-product-card.pmc-product-card::before {
  background: rgba(
    255,
    255,
    255,
    0.5
  ); /* Card/Background/Alpha white 0.5 (default) */
}
.layout_223 .pmc-product-card.pmc-product-card::after {
  background: #fff; /* Card/Background/White (hover) */
}

/* ---- Hover: i testi RESTANO scuri (annulla l'hover bianco della base 213) ----
 * Stesso innesco della base: .w-grid-item:hover (l'intero item), vedi
 * layout_213.css. */
.layout_223 .w-grid-item:hover .pmc-product-card .usg_post_taxonomy_1,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_post_taxonomy_1 span {
  color: #3f3a35 !important;
}
.layout_223 .w-grid-item:hover .pmc-product-card .usg_post_title_1,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_product_field_1,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_product_field_1 del,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_product_field_1 ins,
.layout_223
  .w-grid-item:hover
  .pmc-product-card
  .usg_product_field_1
  .woocommerce-Price-amount,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_product_field_1 bdi,
.layout_223
  .w-grid-item:hover
  .pmc-product-card
  .usg_product_field_1
  .woocommerce-Price-currencySymbol {
  color: #080707 !important;
}
.layout_223 .w-grid-item:hover .pmc-product-card .usg_text_1,
.layout_223 .w-grid-item:hover .pmc-product-card .usg_text_1 .w-text-value {
  color: #766f67 !important;
}
/* icona "sync" resta grigia in hover (la base 213 la porterebbe a bianco) */
.layout_223 .w-grid-item:hover .pmc-product-card .usg_hwrapper_1 svg path {
  fill: #766f67 !important;
}
/* NB: il bottone in hover (gradiente chiaro #BFC2D5→#FFF, testo nero) è già
 * identico alla card 213 → ereditato dalla base, nessun override necessario. */

/* ---- Tipografia variante glass ---- */
/* Brand: Helvetica Neue Regular 14px, Text/Chorcoal #3F3A35 (scoped 223 lo mette 500 #080707) */
.layout_223 .pmc-product-card .usg_post_taxonomy_1,
.layout_223 .pmc-product-card .usg_post_taxonomy_1 span {
  font-family: var(
    --body-font-family,
    "Helvetica Neue",
    Arial,
    sans-serif
  ) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #3f3a35 !important;
}
/* Titolo: Lora SemiBold(600) Italic 18px (scoped 223 = 700) */
.layout_223 .pmc-product-card .usg_post_title_1 {
  font-size: 18px !important;
  font-weight: 600 !important;
}
/* Prezzo: Lora SemiBold(600) Italic 16px (base = Helvetica 20px). Colore #080707
 * già dalla base. In saldo il <del> resta con line-through standard. */
.layout_223 .pmc-product-card .usg_product_field_1,
.layout_223 .pmc-product-card .usg_product_field_1 del,
.layout_223 .pmc-product-card .usg_product_field_1 ins,
.layout_223 .pmc-product-card .usg_product_field_1 .woocommerce-Price-amount,
.layout_223 .pmc-product-card .usg_product_field_1 bdi,
.layout_223
  .pmc-product-card
  .usg_product_field_1
  .woocommerce-Price-currencySymbol {
  font-family: var(--h1-font-family, "Lora", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

@media (max-width: 600px) {
  .layout_223 .price bdi {
    color: #fff !important;
  }
}