/* =========================================================================
   Principal Relocation — catalogo servizi (shop + pagina prodotto)
   Mediaera, novembre 2026

   Dove incollarlo:  Avada > Opzioni > Codice personalizzato > CSS personalizzato
                     (oppure in fondo a style.css del child theme Avada)

   Costruito sulla LIST VIEW di Avada, non sulla grid view: la grid view di
   Avada non stampa affatto l'estratto del prodotto, la list view sì.
   Qui la list view viene trasformata in una griglia di card.
   Verificare quindi che Avada > Opzioni > WooCommerce > vista di default
   sia impostata su "List".
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. Variabili
   ---------------------------------------------------------------------- */
:root {
  --prc-teal-dark:  #0B4651;
  --prc-teal:       #00677A;
  --prc-ink:        #1C2B2F;
  --prc-body:       #41585D;
  --prc-muted:      #5E7175;
  --prc-line:       #E3E8E9;
  --prc-gold:       #CEBB0F;
  --prc-card-radius: 6px;
}


/* =========================================================================
   1. LA GRIGLIA
   Avada impagina i prodotti con i float e la classe .products-4.
   Qui i float vengono azzerati e si passa a CSS grid.
   ========================================================================= */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 30px !important;
  padding: 0 !important;
  list-style: none;
}

/* Avada assegna larghezze percentuali e margini ai singoli li: vanno tolti,
   altrimenti si sommano alla griglia e le colonne si disallineano. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  border: 1px solid var(--prc-line);
  border-radius: var(--prc-card-radius);
  background: #FFFFFF;
  box-sizing: border-box;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.woocommerce ul.products li.product:hover {
  border-color: #C9D5D8;
  box-shadow: 0 2px 10px rgba(11, 70, 81, .07);
}

/* IMPORTANTE — Avada mette la classe .clearfix su ul.products, e il clearfix
   funziona con ::before/::after che hanno content:"". In un contenitore grid
   quei due pseudo-elementi diventano celle a tutti gli effetti: ::before
   occupa la prima cella in alto a sinistra e spinge tutti i prodotti avanti
   di una posizione, lasciando un buco nella prima riga e un prodotto
   solitario nell'ultima. Vanno disattivati. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

/* Avada inserisce dei <li> vuoti per chiudere le righe dei float: in griglia
   diventano celle vuote con il bordo. */
.woocommerce ul.products li.product.fusion-clearfix,
.woocommerce ul.products li.product:empty {
  display: none !important;
}

@media (max-width: 1100px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 680px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr !important; gap: 14px; }
}


/* =========================================================================
   2. LA CARD
   Struttura Avada:
     li.product
       .fusion-product-wrapper
         a.product-images > .featured-image > img
         .fusion-product-content
           .product-details > .product-details-container > h3.product-title
           .product-excerpt.product-list
             .fusion-content-sep
             .product-excerpt-container > .post-content
             .product-buttons > .product-buttons-container + .yith-ywraq-add-to-quote
   ========================================================================= */

.woocommerce ul.products li.product .fusion-product-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 18px;
  box-sizing: border-box;
}

.woocommerce ul.products li.product .fusion-product-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Linea separatrice di Avada fra titolo ed estratto: non serve nella card. */
.woocommerce ul.products li.product .fusion-content-sep,
.woocommerce ul.products li.product .product-border {
  display: none !important;
}

/* Blocco prezzo/rating: vuoto in modalità preventivo, lascia solo spazio morto. */
.woocommerce ul.products li.product .fusion-price-rating,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
  display: none !important;
}


/* -------------------------------------------------------------------------
   2a. Chip icona al posto dell'immagine segnaposto
   Le icone sono SVG inline nel CSS: nessun file da caricare, nessuna
   richiesta HTTP in più, nessun plugin.

   FUNZIONA COSÌ: l'immagine segnaposto viene nascosta con un selettore sul
   nome del file. Il giorno in cui un prodotto riceve una foto vera, il suo
   src non corrisponde più e l'immagine torna visibile da sola — ma vedere
   anche il paragrafo 6 prima di passare alle foto.
   ---------------------------------------------------------------------- */

.woocommerce ul.products li.product a.product-images {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-radius: 5px;
  background-color: #EEF1F2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px 17px;
  overflow: hidden;
}

.woocommerce ul.products li.product a.product-images .featured-image {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Le tre immagini segnaposto oggi in uso. */
.woocommerce ul.products li.product a.product-images img[src*="Relocation-Service-sm"],
.woocommerce ul.products li.product a.product-images img[src*="Immigration-Service-sm"],
.woocommerce ul.products li.product a.product-images img[src*="relocation-package-program"] {
  display: none !important;
}

/* Rollover e spinner di Avada sopra l'immagine: fuori scala in un chip da 32px. */
.woocommerce ul.products li.product a.product-images .cart-loading,
.woocommerce ul.products li.product a.product-images .fusion-rollover,
.woocommerce ul.products li.product a.product-images .fusion-rollover-content {
  display: none !important;
}

/* Relocation — tetto di casa */
.woocommerce ul.products li.product.product_cat-relocation a.product-images {
  background-color: #E6F2F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300677A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6 8 6'/%3E%3Cpath d='M6.5 10v9h11v-9'/%3E%3C/svg%3E");
}

/* Immigration — passaporto */
.woocommerce ul.products li.product.product_cat-immigration a.product-images {
  background-color: #EDF1F6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A6B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3Cpath d='M9 16.5h6'/%3E%3C/svg%3E");
}

/* Packages — scatola */
.woocommerce ul.products li.product[class*="product_cat-packages"] a.product-images {
  background-color: #F7F3DC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5F00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='1.5'/%3E%3Cpath d='M3.5 11.5h17'/%3E%3Cpath d='M12 7.5v12'/%3E%3C/svg%3E");
}


/* -------------------------------------------------------------------------
   2b. Titolo ed estratto
   ---------------------------------------------------------------------- */

.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .product-details-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  min-height: 0 !important;
}

.woocommerce ul.products li.product h3.product-title,
.woocommerce ul.products li.product .product-title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
}

.woocommerce ul.products li.product h3.product-title a {
  color: var(--prc-ink);
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.woocommerce ul.products li.product h3.product-title a:hover {
  color: var(--prc-teal);
}

.woocommerce ul.products li.product .product-excerpt,
.woocommerce ul.products li.product .product-excerpt-container {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .product-excerpt {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Le descrizioni brevi hanno lunghezze molto diverse (da 1 a 6 righe).
   Il clamp a 3 righe tiene le card allineate; il testo completo resta nel
   DOM, quindi resta indicizzabile. */
.woocommerce ul.products li.product .product-excerpt-container .post-content,
.woocommerce ul.products li.product .product-excerpt-container p {
  margin: 0 0 16px !important;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--prc-muted);
}

.woocommerce ul.products li.product .product-excerpt-container .post-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* -------------------------------------------------------------------------
   2c. Riga pulsanti — spinta in fondo alla card così tutte si allineano
   ---------------------------------------------------------------------- */

/* Attenzione: list view e grid view di Avada annidano i pulsanti in modo
   diverso. In list view .product-buttons-container è VUOTO e i pulsanti sono
   figli diretti di .product-buttons; in grid view stanno dentro il container.
   Entrambi vengono resi riga flex, così la regola vale nei due casi. */
.woocommerce ul.products li.product .product-buttons,
.woocommerce ul.products li.product .product-buttons-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.woocommerce ul.products li.product .product-buttons {
  margin-top: auto !important;   /* incolla la riga in fondo alla card */
}

/* Il container della list view è vuoto di ELEMENTI ma contiene un nodo di
   testo (uno spazio), quindi :empty non lo intercetta. Senza questa regola
   si porta via 14px di gap come cella fantasma. */
.woocommerce ul.products li.product .product-buttons-container:not(:has(*)) {
  display: none !important;
}

/* Divisori di float di Avada: in flex mandano "Details" a capo. */
.woocommerce ul.products li.product .product-buttons .clear,
.woocommerce ul.products li.product .product-buttons br {
  display: none !important;
}

/* Avada floata a sinistra sia il pulsante sia "Details", con !important.
   Finché restano floatati escono dal flusso e non si allineano fra loro. */
.woocommerce ul.products li.product .product-buttons a,
.woocommerce ul.products li.product .add-request-quote-button,
.woocommerce ul.products li.product a.show_details_button,
.woocommerce ul.products li.product .yith-ywraq-add-to-quote,
.woocommerce ul.products li.product .yith-ywraq-add-button {
  float: none !important;
  flex: 0 0 auto !important;
}

/* I due wrapper YITH sono blocchi alti 118px contro i 45 del pulsante che
   contengono: "Details" finiva allineato al centro di una riga molto più
   alta del pulsante, cioè sotto di esso. */
.woocommerce ul.products li.product .yith-ywraq-add-to-quote,
.woocommerce ul.products li.product .yith-ywraq-add-button {
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* NOTA — nel CSS già presente sul sito c'è la regola
     div.product-buttons div.yith-ywraq-add-to-quote a { min-width: 270px }
   che allargava il pulsante fino a occupare tutta la card. Qui viene
   riportato a una misura che contiene l'etichetta senza troncarla.
   Se un domani il testo del pulsante diventa più lungo, alzare il valore. */
.woocommerce ul.products li.product .add-request-quote-button,
.woocommerce ul.products li.product a.button {
  display: inline-block !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
  white-space: nowrap;
  text-align: center;
  margin: 0 !important;
  padding: 11px 16px !important;
  min-height: 44px;              /* area di tocco su mobile */
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  border-radius: 4px;
  background: var(--prc-gold) !important;
  /* Il testo bianco sull'oro #CEBB0F dà un contrasto di 1,96:1, sotto la
     soglia WCAG di 4,5:1. Con il testo scuro si arriva a 7,5:1.
     Se il cliente vuole conservare il testo bianco va scurito l'oro. */
  color: var(--prc-ink) !important;
  text-shadow: none !important;
  border: 0 !important;
}

.woocommerce ul.products li.product .add-request-quote-button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: #BCAA0D !important;
  color: var(--prc-ink) !important;
}

/* "Details" — da pulsante a link di servizio, senza l'icona di Avada. */
.woocommerce ul.products li.product a.show_details_button {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--prc-teal) !important;
  text-decoration: none;
}

.woocommerce ul.products li.product a.show_details_button:hover {
  color: var(--prc-teal-dark) !important;
  text-decoration: underline;
}

.woocommerce ul.products li.product a.show_details_button:before,
.woocommerce ul.products li.product a.show_details_button .fusion-button-icon-divider,
.woocommerce ul.products li.product a.show_details_button i {
  display: none !important;
}

/* Messaggi YITH "già nella lista": non devono allargare la card. */
.woocommerce ul.products li.product .yith_ywraq_add_item_product_message,
.woocommerce ul.products li.product .yith_ywraq_add_item_response_message,
.woocommerce ul.products li.product .yith_ywraq_add_item_browse_message {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 8px 0 0 !important;
}


/* =========================================================================
   3. BARRA FILTRI
   Il markup viene dallo snippet PHP (prc-shop-functions.php).
   Senza quello snippet questo blocco semplicemente non si applica.
   ========================================================================= */

.prc-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  padding: 14px 0;
  border-top: 1px solid var(--prc-line);
  border-bottom: 1px solid var(--prc-line);
}

.prc-filterbar__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}

.prc-filterbar__search input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px 10px 38px;
  font-size: 14px;
  color: var(--prc-ink);
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7175' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
  background-size: 16px 16px;
  border: 1px solid #D7E0E2;
  border-radius: 4px;
}

.prc-filterbar__search input[type="search"]:focus {
  outline: 2px solid var(--prc-teal);
  outline-offset: 1px;
  border-color: var(--prc-teal);
}

.prc-chip {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #D7E0E2;
  background: #FFFFFF;
  color: var(--prc-teal-dark);
}

.prc-chip:hover { border-color: #B7D3D9; background: #F4F8F9; }

.prc-chip.is-active {
  background: var(--prc-teal-dark);
  border-color: var(--prc-teal-dark);
  color: #FFFFFF;
}

.prc-chip--relocation  { background: #E6F2F4; border-color: #C6E0E5; color: #065A68; }
.prc-chip--immigration { background: #EDF1F6; border-color: #D3DEEA; color: #2A4A6B; }
.prc-chip[class*="--packages"] { background: #F7F3DC; border-color: #E6DEB0; color: #6B5F00; }

.prc-chip--relocation.is-active,
.prc-chip--immigration.is-active,
.prc-chip[class*="--packages"].is-active {
  background: var(--prc-teal-dark);
  border-color: var(--prc-teal-dark);
  color: #FFFFFF;
}

@media (max-width: 680px) {
  .prc-filterbar { gap: 8px; }
  .prc-filterbar__search { flex: 1 1 100%; }
  .prc-chip { padding: 8px 13px; font-size: 13px; }
}

/* Il selettore vista griglia/lista di Avada va nascosto: la griglia è ora
   gestita da questo CSS e passare a "grid" farebbe sparire le descrizioni. */
.fusion-grid-view,
.fusion-list-view,
.woocommerce .fusion-woo-product-view {
  display: none !important;
}


/* =========================================================================
   4. PAGINA PRODOTTO
   ========================================================================= */

/* 4a. Galleria con la sola immagine segnaposto: si nasconde e il testo
       prende tutta la larghezza. Con :has() la regola si disattiva da sola
       quando il prodotto riceve una foto vera.
       Se servisse supportare browser senza :has(), sostituire il blocco con
       la versione incondizionata indicata sotto. */
.single-product .avada-single-product-gallery-wrapper:has(img[src*="Relocation-Service-sm"]),
.single-product .avada-single-product-gallery-wrapper:has(img[src*="Immigration-Service-sm"]),
.single-product .avada-single-product-gallery-wrapper:has(img[src*="relocation-package-program"]) {
  display: none !important;
}

/* Versione incondizionata (nasconde sempre la galleria):
.single-product .avada-single-product-gallery-wrapper { display: none !important; }
*/

.single-product .summary.entry-summary {
  width: 100% !important;
  max-width: 780px;
  float: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.single-product h1.product_title {
  margin: 0 0 16px !important;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--prc-teal-dark);
}

/* Prezzo e disponibilità: vuoti in modalità preventivo. */
.single-product .summary p.price,
.single-product .summary .avada-availability,
.single-product .summary .product-border {
  display: none !important;
}

.single-product .woocommerce-product-details__short-description {
  margin: 0 0 26px !important;
  font-size: 17px;
  line-height: 1.65;
  color: var(--prc-body);
}

.single-product .summary .add-request-quote-button,
.single-product .summary a.button {
  display: inline-block;
  padding: 14px 24px !important;
  min-height: 48px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--prc-gold) !important;
  color: var(--prc-ink) !important;   /* vedi nota sul contrasto al par. 2c */
  text-shadow: none !important;
  border: 0 !important;
}

.single-product .summary .add-request-quote-button:hover,
.single-product .summary a.button:hover {
  background: #BCAA0D !important;
  color: var(--prc-ink) !important;
}

.single-product .product_meta {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--prc-line);
  font-size: 14px;
  color: var(--prc-muted);
}

.single-product .product_meta a { font-weight: 500; text-decoration: none; }

/* 4b. Tab "Description"
   Oggi contiene lo stesso identico testo della descrizione breve. Lo snippet
   PHP rimuove la tab quando i due testi coincidono e la rimette da sola
   quando il cliente scrive una descrizione estesa diversa.
   Questo blocco è la formattazione della tab quando c'è. */
.single-product .woocommerce-tabs {
  margin: 36px 0 0 !important;
  padding: 0 !important;
}

.single-product .woocommerce-tabs .panel {
  max-width: 780px;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

.single-product .woocommerce-tabs h3.fusion-woocommerce-tab-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--prc-teal-dark);
  margin: 0 0 12px !important;
}

/* 4c. Prodotti correlati — compatti, su fondo tinta */
.single-product section.related.products {
  margin: 44px -30px 0;
  padding: 32px 30px 36px;
  background: #F4F8F9;
  border-top: 1px solid var(--prc-line);
}

.single-product section.related.products .fusion-title h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: 21px;
  font-weight: 700;
  color: var(--prc-teal-dark);
  background: none !important;
}

/* Avada mette uno sfondo pieno al titolo "Related products": qui non serve. */
.single-product section.related.products .fusion-title,
.single-product section.related.products .title-sep-container,
.single-product section.related.products .awb-title-spacer {
  background: none !important;
  border: 0 !important;
}

@media (max-width: 680px) {
  .single-product section.related.products { margin-left: -15px; margin-right: -15px; padding: 24px 15px 28px; }
  .single-product h1.product_title { font-size: 28px; }
}


/* =========================================================================
   5. PAGINAZIONE
   ========================================================================= */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce .fusion-woo-pagination { margin-top: 10px; }


/* =========================================================================
   6. QUANDO ARRIVANO LE FOTO
   Da fare per categoria intera, mai per singoli prodotti (una categoria a
   metà sembra incompleta, non ricca).

   Per riportare l'immagine a blocco 4:3 su una categoria — esempio
   Immigration — aggiungere in fondo:

   .woocommerce ul.products li.product.product_cat-immigration a.product-images {
     width: 100%;
     height: auto;
     aspect-ratio: 4 / 3;
     margin: -20px -20px 16px !important;
     width: calc(100% + 40px);
     border-radius: var(--prc-card-radius) var(--prc-card-radius) 0 0;
     background-image: none;
     background-color: #EEF1F2;
   }
   .woocommerce ul.products li.product.product_cat-immigration a.product-images img {
     display: block !important;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   Specifiche da dare a chi produce le immagini:
   - 1200 x 900 px (4:3), JPG, sotto i 400 KB
   - nome file = slug del servizio (airport-pickup.jpg)
   - testo alternativo = nome del servizio
   - tutte fotografie oppure tutte illustrazioni, mai mescolate
   - nessun testo dentro l'immagine
   ========================================================================= */