/* ============================================================
   EUFORIA — Stile card prodotto (loop WooCommerce)
   File:   assets/css/woo-loop.css  ·  handle: euforia-woo-loop
   Server: wp-content/themes/hello-elementor-child/assets/css/woo-loop.css
   ------------------------------------------------------------
   Stila ul.products li.product ovunque (home shortcode, archivi,
   categorie, ricerca) con la card minimal del mock/reference D&G.
   Griglia forzata a CSS grid (gap controllato). Regola di linea:
   griglie = SOLO still life -> object-fit:contain su tile.
   Scope HOME: .euf-loop-prestige (Ceramiche: categoria + nome, niente
   prezzo, testo più piccolo) / .euf-loop-ess (Essentials: nome+prezzo mini).
   ============================================================ */
:root {
  --paper: #FFFFFF;
  --grey: #ECECEA;
  --t-straw: #F1ECD8;
  --t-teal: #E2EFEC;
  --ink: #2B2723;
  --ink-soft: #6E6557;
  --ink-mut: #9C9486;
  --gold: #BE8F39;
  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'Quicksand', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- GRIGLIA: grid con gap controllato (un po' di spazio, meno del mock) ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  gap: 26px 18px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products.columns-1 {
  grid-template-columns: 1fr;
}

.woocommerce ul.products.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.woocommerce ul.products.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.woocommerce ul.products.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.woocommerce ul.products.columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.woocommerce ul.products.columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: center;
  list-style: none;
}

.woocommerce ul.products li.product::before {
  display: none;
}

/* eventuale bullet */

/* WooCommerce aggiunge un clearfix (::before + ::after) su ul.products. Con la lista in
   display:grid quei due pseudo-elementi NON spariscono: diventano CELLE della griglia →
   una cella vuota in testa (::before) e una in coda (::after), cioè "il primo e l'ultimo
   spazio bianco" della griglia archivio. Li spegniamo: i prodotti partono a filo e non
   restano buchi iniziali/finali. Vale anche in flex (home Prestige): lì toglie un phantom gap. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

@media(max-width:1024px) {

  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(max-width:640px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
}

/* ---------- MEDIA: tile neutro, still life CONTENUTO, formato rettangolare ---------- */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* wrapper front/back stampato dal PHP: <span class="euf-media has-back"> */
.woocommerce ul.products li.product .euf-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 1 / 1.3;
  background: var(--grey);
  /* formato rettangolare */
}

.woocommerce ul.products li.product .euf-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* still life intero */
  padding: 8% 8% 6%;
  margin: 0;
  border-radius: 0;
  transition: opacity .5s var(--ease), transform .9s var(--ease);
  -webkit-user-drag: none;
  user-select: none;
  /* niente drag nativo dell'immagine */
}

.woocommerce ul.products li.product .euf-media .euf-front {
  opacity: 1;
  z-index: 1;
}

.woocommerce ul.products li.product .euf-media .euf-back {
  opacity: 0;
  z-index: 2;
  transform: scale(1.02);
}

/* HOVER: crossfade verso la 2ª immagine (solo se esiste: .has-back) */
.woocommerce ul.products li.product:hover .euf-media.has-back .euf-front {
  opacity: 0;
}

.woocommerce ul.products li.product:hover .euf-media.has-back .euf-back {
  opacity: 1;
  transform: scale(1);
}

/* senza 2ª immagine: micro-zoom */
.woocommerce ul.products li.product:hover .euf-media:not(.has-back) img {
  transform: scale(1.03);
}

/* tile ~70% grigio / 30% pastello (deterministico; definitivo con pa_sfondo-scheda) */
.woocommerce ul.products li.product:nth-child(4n+2) .euf-media {
  background: var(--t-straw);
}

.woocommerce ul.products li.product:nth-child(6n+4) .euf-media {
  background: var(--t-teal);
}

/* FALLBACK: se il blocco PHP del wrapper NON è installato, stila la miniatura nuda
   (miniatura = figlia diretta del link; col wrapper l'img sta dentro .euf-media) */
.woocommerce ul.products li.product a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.3;
  object-fit: contain;
  background: var(--grey);
  padding: 8% 8% 6%;
  border-radius: 3px;
  margin: 0;
  transition: transform .6s var(--ease);
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
  transform: scale(1.03);
}

/* ---------- CATEGORIA (eyebrow, stampata dal PHP prima del titolo) ---------- */
.woocommerce ul.products li.product .euf-pcat {
  display: none;
  /* di default nascosta; accesa in Prestige */
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mut);
  line-height: 1;
  padding-top: 16px;
}

/* ---------- NOME + PREZZO (centrati) ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-d) !important;
  font-weight: 400;
  font-size: 19px;
  color: var(--ink) !important;
  line-height: 1.15;
  padding: 16px 8px 4px;
  margin: 0;
  text-align: center;
  text-transform: none;
  letter-spacing: .005em;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-b) !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink) !important;
  display: block;
  margin: 0;
  text-align: center;
}

.woocommerce ul.products li.product .price del {
  color: var(--ink-mut);
  font-weight: 400;
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* niente bottone nel loop (il PHP lo toglie dal DOM; rete di sicurezza) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}

/* ---------- HOME · Prestige (Ceramiche): categoria + nome, testo più piccolo, no prezzo ---------- */
.euf-loop-prestige ul.products li.product .euf-pcat {
  display: block;
}

.euf-loop-prestige ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px;
  padding-top: 5px;
  /* più piccolino; la categoria porta lo spazio sopra */
}

.euf-loop-prestige ul.products li.product .price {
  display: none !important;
}

/* Prestige = CAROSELLO a riga singola (come il mock): 4 in fila su desktop,
   scorre in orizzontale se ce ne sono di più → mai un orfano in seconda riga.
   Sostituisce la griglia globale solo per questa sezione. */
.euf-loop-prestige ul.products {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity; /* mai "mandatory": auto-snap durante il load = LCP non misurabile (NO_LCP su PageSpeed) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.euf-loop-prestige ul.products::-webkit-scrollbar {
  height: 0;
}

.euf-loop-prestige ul.products li.product {
  flex: 0 0 calc((100% - 54px) / 4);
  scroll-snap-align: start;
  /* 4 visibili (3 gap da 18px) */
}

@media(max-width:1024px) {
  .euf-loop-prestige ul.products li.product {
    flex-basis: calc((100% - 18px) / 2);
  }

  /* 2 visibili */
}

/* ---------- HOME · Essentials: nome + prezzo mini ---------- */
.euf-loop-ess ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  padding-top: 14px;
}

.euf-loop-ess ul.products li.product .price {
  font-size: 12px;
  color: var(--ink-soft) !important;
}

@media(prefers-reduced-motion:reduce) {
  .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    transition: none !important;
  }
}

/* ============================================================
   FASE 1 — CARD SU FONDO BIANCO (temporaneo)
   Le foto del cliente arrivano su fondo bianco: in Fase 1 le tile
   tornano bianche con una leggera ombra. Il sistema tile 70/30
   (grigio + pastelli, futuro pa_sfondo-scheda) resta sopra ma qui
   viene neutralizzato. ► Per riattivare i tile: cancellare QUESTO blocco.
   ============================================================ */
.woocommerce ul.products li.product .euf-media,
.woocommerce ul.products li.product:nth-child(4n+2) .euf-media,
.woocommerce ul.products li.product:nth-child(6n+4) .euf-media {
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 39, 35, .05);
  border: 1px solid #EFEDE8;
}

/* fallback miniatura nuda (se il wrapper PHP non è installato) */
.woocommerce ul.products li.product a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 39, 35, .05);
  border: 1px solid #EFEDE8;
}

/* la 2ª foto (hover) non deve "bucare" il fondo bianco */
.woocommerce ul.products li.product .euf-media .euf-back {
  background: #fff;
}

/* ---------- sottotitolo attributi-variante (card gemelle, es. Oro vs Platino) ---------- */
.woocommerce ul.products li.product .euf-var-attrs {
  display: block;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  line-height: 1.2;
  margin: 2px 8px 0;
  text-transform: none;
}

.woocommerce ul.products li.product .euf-var-attrs .euf-var-metal {
  color: var(--gold);
  font-weight: 700;
}

/* ---------- foto più grandi nella tile (meno aria attorno allo still life) ---------- */
.woocommerce ul.products li.product .euf-media img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
  padding: 4% 4% 3%;
}

/* mobile: tile quasi quadrata (le foto SONO quadrate) + padding minimo
   → l'oggetto si vede ~25-30% più grande */
@media(max-width:640px) {
  .woocommerce ul.products li.product .euf-media,
  .woocommerce ul.products li.product a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1.05;
  }

  .woocommerce ul.products li.product .euf-media img,
  .woocommerce ul.products li.product a.woocommerce-loop-product__link>img.attachment-woocommerce_thumbnail {
    padding: 2%;
  }
}