/* =============================================================================
   PROBAR - CATALOG UI  (categorie, shop, ricerca, tag)
   -----------------------------------------------------------------------------
   Percorso: [child]/css/catalog-ui.css
   Caricato da functions.php su: shop, categorie prodotto, tag, ricerca.
   -----------------------------------------------------------------------------
   Risolve:
   - anteprime prodotto di altezze diverse (ora tutte 1:1, contenute)
   - swatch varianti senza stile fuori dalla scheda prodotto
   - card disallineate: titoli, prezzi e varianti ora su griglia costante
   ============================================================================= */

:root {
  --pb-gold: #FFCE53;
  --pb-gold-line: rgba(255, 206, 83, 0.14);
  --pb-gold-hover: rgba(255, 206, 83, 0.70);
  --pb-card-bg: #0d0d0d;
  --pb-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --pb-thumb-ratio: 1 / 1;      /* formato UNICO delle anteprime */

  /* --- ANTEPRIME PRODOTTO ---
     contain = immagine SEMPRE INTERA (le foto lunghe si vedono tutte).
     Nessun riquadro bianco: fondo trasparente, come i prodotti correlati.
     Quando renderai le foto quadrate, riempiranno il riquadro da sole.     */
  --pb-thumb-fit: contain;      /* prodotto SEMPRE intero, mai mozzato       */
  --pb-thumb-pad: 8px;          /* aria attorno al prodotto (stile galleria) */
  --pb-thumb-bg: #ffffff;       /* fondo bianco pulito: il letterbox dei     */
                                /* prodotti alti resta bianco, non nero       */
  --pb-thumb-radius: 12px;
}

/* ==========================================================================
   1. GRIGLIA DEI PRODOTTI - card di altezza uniforme
   Il segreto dell'ordine: ogni card e' una colonna flex e il titolo "spinge"
   prezzo e varianti sempre alla stessa altezza, qualunque sia la lunghezza
   del nome prodotto.
   ========================================================================== */
.woocommerce ul.products li.product,
ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  box-sizing: border-box;
  padding: 14px 14px 18px !important;
  border: 1px solid var(--pb-gold-line);
  border-radius: 14px;
  background-color: var(--pb-card-bg);
  transition: transform 0.7s var(--pb-ease),
              border-color 0.7s ease,
              box-shadow 0.7s var(--pb-ease);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--pb-gold-hover);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45),
                0 0 26px rgba(255, 206, 83, 0.14);
  }
}

/* ==========================================================================
   2. ANTEPRIME IMMAGINE - stesso formato per tutte
   --------------------------------------------------------------------------
   MODALITA' SELEZIONABILE con la variabile --pb-thumb-fit (in :root, sopra):

     contain (default)  -> l'immagine si vede SEMPRE INTERA, mai tagliata.
                           Le foto con proporzioni diverse lasciano un po' di
                           bianco ai lati: e' il prezzo del "niente tagli".
                           Su un catalogo con foto eterogenee e' la scelta piu'
                           sicura: nessun prodotto viene mai mostrato monco.

     cover              -> l'immagine RIEMPIE il riquadro, angoli arrotondati
                           sulla foto vera, zero bianco. Prezzo: le foto molto
                           verticali/orizzontali vengono ritagliate ai bordi.

   Per cambiare modalita' basta cambiare UNA riga in :root:
       --pb-thumb-fit: cover;
   e (facoltativo) azzerare padding e fondo bianco per la resa "a pieno":
       --pb-thumb-pad: 0px;
   ========================================================================== */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: var(--pb-thumb-ratio) !important;
  object-fit: var(--pb-thumb-fit, contain) !important;
  object-position: center center;
  background-color: var(--pb-thumb-bg, #ffffff);
  padding: var(--pb-thumb-pad);
  box-sizing: border-box;
  border-radius: var(--pb-thumb-radius, 12px) !important;
  margin: 0 0 12px 0 !important;
  transition: transform 1.1s var(--pb-ease);
}

/* Il wrapper del link: ritaglia sull'angolo arrotondato, cosi' l'arrotondamento
   e' pulito anche in modalita' "cover" (dove il padding e' zero e a curvare
   deve essere il bordo della foto stessa). */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-of-type {
  display: block;
  border-radius: var(--pb-thumb-radius, 12px);
  overflow: hidden;
  line-height: 0;
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover img {
    transform: scale(1.03);
  }
}

/* ==========================================================================
   3. TESTI DELLA CARD - gerarchia pulita e allineamenti costanti
   ========================================================================== */
/* Categoria sopra il nome */
.woocommerce ul.products li.product .abm-loop-cat,
.woocommerce ul.products li.product .posted_in a {
  color: var(--pb-gold) !important;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Nome prodotto: occupa lo spazio residuo -> allinea tutto il resto */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2em;
  margin: 4px 0 8px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
}

/* Prezzo */
.woocommerce ul.products li.product .price {
  margin: 0 0 10px 0 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Prezzo di LISTINO (barrato) -> oro brillante, mai spento */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del *,
.woocommerce ul.products li.product .price del bdi,
.woocommerce ul.products li.product .price del span,
.woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-currencySymbol {
  color: var(--pb-gold) !important;
  opacity: 1 !important;
  text-decoration: line-through !important;
  font-weight: 500;
}

/* Prezzo di VENDITA (attuale) -> bianco */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins *,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce ul.products li.product .price ins span,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins .woocommerce-Price-currencySymbol {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* ==========================================================================
   4. SWATCH VARIANTI NEL LOOP  <-- richiesta 4
   Stesse identiche regole della scheda prodotto (sezione 9 di
   single-product.css), qui rese disponibili anche in categoria/ricerca.
   ========================================================================== */
ul.products .cfvsw-swatches-container,
.woocommerce ul.products .cfvsw-swatches-container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;      /* nel loop gli swatch stanno centrati */
  gap: 8px !important;
  margin: 4px 0 0 0 !important;
}

ul.products .cfvsw-swatches-option {
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.3s ease, color 0.3s ease !important;
}

/* Swatch TESTUALI (es. 30cm / 45cm): riquadro nero adattato al testo */
ul.products .cfvsw-swatches-option.cfvsw-label-option {
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  min-width: auto !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  white-space: nowrap;
  text-align: center;
}

ul.products .cfvsw-swatches-option.cfvsw-label-option * {
  color: inherit !important;
  background: transparent !important;
}

/* Swatch COLORE: lo sfondo E' il colore del prodotto, non si tocca */
ul.products .cfvsw-swatches-option:not(.cfvsw-label-option) {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

ul.products .cfvsw-swatches-option:hover {
  border-color: var(--pb-gold) !important;
}

ul.products .cfvsw-swatches-option.cfvsw-label-option:hover {
  color: var(--pb-gold) !important;
}

/* Selezionato -> bordo oro */
ul.products .cfvsw-swatches-option.cfvsw-selected-swatch,
ul.products .cfvsw-swatches-option[aria-checked="true"] {
  border: 2px solid var(--pb-gold) !important;
  box-shadow: none !important;
}

ul.products .cfvsw-swatches-option.cfvsw-label-option.cfvsw-selected-swatch {
  background-color: #0d0d0d !important;
  color: var(--pb-gold) !important;
}

/* Non disponibile */
ul.products .cfvsw-swatches-option.cfvsw-out-of-stock,
ul.products .cfvsw-swatches-option.cfvsw-disabled,
ul.products .cfvsw-swatches-option.cfvsw-swatches-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed;
}

/* Link "Svuota" nel loop: non serve */
ul.products .reset_variations,
ul.products a.reset_variations {
  display: none !important;
}

/* ==========================================================================
   5. BADGE SCONTO - allineato all'angolo della cornice immagine
   ========================================================================== */
.woocommerce ul.products li.product {
  position: relative;
}

.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 20px;
  left: 20px;
  right: auto;
  margin: 0;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-color: #0d0d0d;
  color: var(--pb-gold);
  border: 1px solid var(--pb-gold);
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}

/* ==========================================================================
   6. ACCESSIBILITA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product img,
  .woocommerce ul.products li.product:hover img {
    transition: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   7. FINE ELENCO: via il box "Non ci sono altri prodotti", dentro il CTA
   Il messaggio di Astra (.ast-shop-load-more.no-more) e' un vicolo cieco:
   dice all'utente che non c'e' altro e lo lascia li'. Al suo posto mettiamo
   un invito a scrivere su WhatsApp (stampato da functions.php).
   ========================================================================== */
.ast-shop-pagination-infinite .ast-shop-load-more.no-more,
span.ast-shop-load-more.no-more,
.ast-shop-load-more.no-more.active {
  display: none !important;
}

.abm-wa-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 40px 0 8px;
  padding: 0;
  text-align: center;
  clear: both;
}

.abm-wa-cta .abm-wa-kicker {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  letter-spacing: 0.4px;
  margin: 0;
}

/* Il pulsante riusa prestige-btn-outline (stessa classe della home):
   bordo oro, riempimento dorato che scorre da sinistra al passaggio del mouse */
.abm-wa-cta a.prestige-btn-outline {
  margin: 0 auto;
}

@media (max-width: 768px) {
  .abm-wa-cta { margin: 30px 0 4px; }
  .abm-wa-cta a.prestige-btn-outline { padding: 13px 26px; font-size: 11px; }
}