/* =====================================================================
   FUIX 2026-11-01 — SCHEDA PRODOTTO (CRO): mobile + tablet/desktop (solo DEV)
   File caricato solo sulla PDP da head.tpl (dopo custom_v2.css).
   ROLLBACK: togliere le 2 righe fuix-pdp-mobile.css/.js da head.tpl
   (o rollback del pacchetto in pdp_audit_20261102/).
   Struttura:
   - blocchi "@media (max-width:767.98px)" = SOLO mobile (ordine colonna, cuore, riga scorrevole,
     prezzo, disponibilita', fiducia in colonna, spazi). Invariati rispetto alla versione approvata.
   - regole fuori da un @media = CONDIVISE mobile/tablet/desktop (miniature colore, piastrelle taglia,
     pulsante carrello, voci fiducia): scritte una volta sola, stesso comportamento ovunque.
   - blocco finale "@media (min-width:768px)" = solo adattamenti tablet/desktop (griglia a piu' righe
     al posto delle righe scorrevoli, fiducia a due colonne, spaziature della colonna destra).
   - Nessuna regola tocca prezzi, logica sconti, checkout, carrello.
   ===================================================================== */

/* ---- Elementi solo mobile: nascosti altrove (cuore/condividi sulla galleria, testo corto spedizione) ---- */
.fx-heart,
.fx-share,
.fuix-trust-ship .fx-short {
  display: none;
}

@media (max-width: 767.98px) {

  /* ================= ORDINE (flex column gia' attivo) ================= */
  /* tutto cio' che non e' elencato sotto finisce in coda (ordine 80) */
  :where(#main .product-container > [class*="col-form_id-form_15874367062488778"] > *:not(.cw-brand):not(.product-detail-name)) { order: 80; }
  :where(#main .product-container .product-actions form) > *,
  :where(#main .product-container .product-variants) > *,
  :where(#main .product-container .product-add-to-cart) > *,
  :where(#main .product-container .product-quantity) > * { order: 80; }

  /* contenitori "trasparenti": i figli partecipano al flex della colonna */
  #main .product-container .product-actions,
  #main .product-container .product-actions > form,
  #main .product-container .product-variants,
  #main .product-container .product-add-to-cart { display: contents; }
  /* custom_v2.css imposta .product-quantity{display:block !important} */
  #main .product-container .product-add-to-cart .product-quantity { display: contents !important; }

  #main .product-container .leo-more-cdown { order: 5; }
  #main .product-container .product-variants .fuix-color-group { order: 10; }
  #main .product-container .product-variants .fuix-size-group { order: 20; }
  #main .product-container .product-prices { order: 30; }
  #main .product-container .product-quantity #product-availability { order: 40; }
  #main .product-container .product-quantity .fuix-trust-box { order: 50; }
  #main .product-container .product-quantity .product-minimal-quantity { order: 55; }
  #main .product-container .product-quantity .p-cartwapper { order: 60; }
  #main .product-container .product-discounts { order: 65; }
  #main .product-container .description-short { order: 70; }

  /* spaziatura laterale coerente con le altre voci della colonna (9px) */
  #product #main .product-container .product-variants .product-variants-item { margin-left: 9px !important; margin-right: 9px !important; width: auto !important; max-width: none !important; box-sizing: border-box; }
  #main .product-container .product-quantity > *,
  #main .product-container .product-discounts { margin-left: 9px; margin-right: 9px; }

  /* ================= CUORE / CONDIVIDI SULLA GALLERIA ================= */
  .fxg-main .fx-heart,
  .fxg-main .fx-share {
    display: flex;
    position: absolute;
    top: 6px;
    z-index: 6;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    color: #141414;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fxg-main .fx-heart { right: 56px; }
  .fxg-main .fx-share { right: 106px; }
  .fxg-main .fx-heart svg,
  .fxg-main .fx-share svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .fxg-main .fx-heart[aria-pressed="true"] svg { fill: #d6336c; stroke: #d6336c; }
  .fxg-main .fx-heart:focus-visible,
  .fxg-main .fx-share:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }

  /* wishlist originale: resta nel DOM (il cuore lo aziona) ma sparisce dal flusso */
  #main .product-container .product-quantity .leo-compare-wishlist-button {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

}

/* ================= COLORE ================= */
#product #main .product-variants .fuix-color-group {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
/* titolo gruppo ("Colore") sostituito da "Colore: Nome" su una riga */
#product #main .product-variants .fuix-color-group .control-label {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  margin: 0 !important;
}
#product #main .product-variants .fuix-color-group:not(:has(.fuix-selected-color-name:not(:empty))) .control-label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin: 0 0 4px !important;
  font-size: 13px !important;
}
#product #main .product-variants .fuix-color-group .fuix-selected-color-name {
  display: block;
  flex: 1 0 100%;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: #141414;
}
#product #main .product-variants .fuix-color-group .fuix-selected-color-name:empty { display: none; }
#product #main .product-variants .fuix-color-group .fuix-selected-color-name::before {
  content: attr(data-fuix-lbl) ": ";
  font-weight: 400;
  color: #6b6b66;
}

/* nessun "lampo" di pallini: ogni voce colore resta invisibile (stesso ingombro) finche' fuix-pdp-mobile.js
   non l'ha decisa (miniatura = .fx-has-img, oppure pallino = .fx-c-done). Vale anche per i colori che
   custom.js inietta dopo il caricamento. Se lo script non parte, compaiono comunque dopo 2,5 s */
#product #main .product-variants ul#group_2 li.input-container:not(.fx-has-img):not(.fx-c-done) {
  visibility: hidden;
  animation: fxColorsShow 0s linear 2.5s forwards;
}
@keyframes fxColorsShow { to { visibility: visible; } }

@media (max-width: 767.98px) {

  /* riga scorrevole */
  #product #main .product-variants ul#group_2 {
    flex: 1 0 100%;
    position: relative;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 2px 2px 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  #product #main .product-variants ul#group_2::-webkit-scrollbar { display: none; }
  #product #main .product-variants ul#group_2 li.input-container {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
/* colore unico: niente da scegliere, basta il nome ("Colore: ...") */
#product #main .product-variants .fuix-color-group:has(.fuix-selected-color-name:not(:empty)) ul#group_2:has(> li:only-child) { display: none !important; }
@media (max-width: 767.98px) {
  /* fallback = pallino attuale, area tocco ridotta in altezza */
  #product #main .product-variants ul#group_2 li.input-container label {
    width: 44px;
    height: 44px;
  }

}
/* miniatura prodotto (solo se fuix-pdp-mobile.js ha una immagine affidabile) */
#product #main .product-variants ul#group_2 li.fx-has-img label {
  width: 58px;
  height: 58px;
}
#product #main .product-variants ul#group_2 li.fx-has-img .color {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px !important;
  border: 1px solid #d8d8d8 !important;
  background-color: #fff !important;
  background-image: var(--fx-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box;
}
#product #main .product-variants ul#group_2 li.fx-has-img .input-color:checked + .color {
  border: 2px solid #141414 !important;
  outline: none !important;
  box-shadow: none !important;
}
#product #main .product-variants ul#group_2 li.fx-has-img.fuix-unavailable .color {
  opacity: .45;
  background-image: linear-gradient(135deg, transparent 46%, rgba(20, 20, 20, .55) 46%, rgba(20, 20, 20, .55) 54%, transparent 54%), var(--fx-img) !important;
  background-size: 100% 100%, contain !important;
}
#product #main .product-variants ul#group_2 li.fx-has-img.fuix-unavailable .input-color:checked + .color {
  opacity: 1;
  background-image: var(--fx-img) !important;
  background-size: contain !important;
}
/* pallino selezionato (fallback): anello piu' evidente */
#product #main .product-variants ul#group_2 li:not(.fx-has-img) .input-color:checked + .color {
  outline-width: 2px !important;
  outline-offset: 2px !important;
}
#product #main .product-variants .fuix-color-context-message,
#product #main .product-variants .fuix-size-context-message { margin-top: 4px; font-size: 12px; flex: 1 0 100%; }

/* ================= TAGLIA ================= */
#product #main .product-variants .fuix-size-group {
  display: block;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}
#product #main .product-variants .fuix-size-group > .control-label { display: none !important; }
/* la select resta nel DOM (fonte di verita'), ma non e' mostrata SOLO quando le piastrelle sono attive:
   fuix-pdp-mobile.js mette .fx-sz-ready sul gruppo dopo l'inizializzazione riuscita (e dopo ogni refresh AJAX) */
#product #main .product-variants .fuix-size-group.fx-sz-ready select.form-control-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
/* FALLBACK (senza JS / init fallita / script lento): prima dell'init la select originale e' nascosta e le
   piastrelle visibili (identico all'aspetto normale, nessun lampo ne' salto). Se .fx-sz-ready non arriva entro
   2,8 s, a farlo e' solo il CSS: la select torna visibile (nativa, pienamente funzionante con i listener di
   PrestaShop) e le piastrelle spariscono. Le animazioni ripartono sugli elementi ridisegnati da un refresh AJAX;
   con la classe presente non si applicano. steps(1,end): nessuna interpolazione, il passaggio e' netto allo scadere dei 2,8 s (nella select il
   0% e' lo stato nascosto, il 100% implicito lo stile normale). */
#product #main .product-variants .fuix-size-group:not(.fx-sz-ready) .fuix-size-native {
  animation: fxNativeShow 2.8s steps(1, end) 1 forwards;
}
@keyframes fxNativeShow {
  0% { height: 0; margin: 0; padding: 0; opacity: 0; visibility: hidden; }
}
#product #main .product-variants .fuix-size-group:not(.fx-sz-ready) .fuix-size-tiles {
  animation: fxTilesOff 2.8s steps(1, end) 1 forwards;
}
@keyframes fxTilesOff {
  100% { height: 0; margin: 0; padding: 0; opacity: 0; visibility: hidden; }
}
#product #main .product-variants .fuix-size-group:not(.fx-sz-ready) .fuix-size-title {
  animation: fxTitleOff 2.8s steps(1, end) 1 forwards;
}
@keyframes fxTitleOff {
  100% { visibility: hidden; }
}
.fuix-size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.3;
}
.fuix-size-head .fuix-size-title { color: #6b6b66; }
.fuix-size-head .fuix-size-current { color: #141414; font-weight: 600; }
.fuix-size-head .fuix-size-current.is-empty { font-weight: 400; color: #6b6b66; }
.fuix-size-head .fuix-sizeguide-link {
  flex: 0 0 auto;
  color: #141414;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13px;
  padding: 4px 0;
}
.fuix-size-tiles {
  position: relative;
  display: flex;
  /* riga unica scorrevole con il dito (come Amazon): se le taglie non entrano, l'ultima resta
     tagliata sul bordo (invito a scorrere); fuix-pdp-mobile.js porta in vista la taglia scelta */
  flex-wrap: nowrap;
  gap: 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fuix-size-tiles::-webkit-scrollbar { display: none; }
.fuix-size-tiles .fuix-size-tile {
  flex: 0 0 auto;
  min-width: 48px;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  color: #141414;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* selezionata: fondo chiaro, bordo scuro piu' marcato (box-shadow: nessuno spostamento di layout).
   Mai nero pieno: resta distinta dal pulsante "Aggiungi al carrello" */
.fuix-size-tiles .fuix-size-tile.is-selected {
  background: #f1f1ef;
  border-color: #141414;
  box-shadow: inset 0 0 0 1px #141414;
  color: #141414;
  font-weight: 700;
}
.fuix-size-tiles .fuix-size-tile.is-disabled {
  border: 1px dashed #d4d4d4;
  background: #fff;
  color: #b3b3b3;
  font-weight: 400;
  text-decoration: line-through;
  cursor: not-allowed;
}
.fuix-size-tiles .fuix-size-tile:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }

@media (max-width: 767.98px) {
  /* ================= PREZZO (della combinazione selezionata) ================= */
  #main .product-container .product-prices {
    margin: 4px 9px 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
  }
  #main .product-container .product-prices .product-price { order: 1; margin: 0 !important; }
  #main .product-container .product-prices .product-discount { order: 2; margin: 0 !important; }
  #main .product-container .product-prices .tax-shipping-delivery-label { order: 3; flex: 1 0 100%; margin: 2px 0 0 !important; font-size: 12px; }

  /* ================= DISPONIBILITA' (separata dalla fiducia) ================= */
  #main .product-container .product-quantity #product-availability {
    display: block;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 13px;
    line-height: 1.3;
  }
  #main .product-container .product-quantity #product-availability:empty { display: none; }

  /* ================= FIDUCIA compatta ================= */
  #main .product-container .product-quantity .fuix-trust-box {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-top: 8px;
    border-top: 1px solid #ececec;
  }
  .fuix-trust-box--eu .fuix-trust-item { font-size: 12.5px; line-height: 1.3; }
}
.fuix-trust-box--eu .fuix-trust-pay,
.fuix-trust-box--eu .fuix-trust-sizeguide { display: none !important; }
.fuix-trust-box--eu .fuix-trust-ship .fx-long { display: none; }
.fuix-trust-box--eu .fuix-trust-ship .fx-short { display: inline; }
/* ordine voci: spedizione, consegna, reso, originali */
.fuix-trust-box--eu .fuix-trust-ship { order: 1; }
.fuix-trust-box--eu .fuix-trust-item:nth-child(2) { order: 2; }
.fuix-trust-box--eu .fuix-trust-item:nth-child(4) { order: 3; }
.fuix-trust-box--eu .fuix-trust-item:nth-child(1) { order: 4; }
@media (max-width: 767.98px) {
  /* USA: testo invariato, solo piu' compatto (colonna singola) */
  .fuix-trust-box:not(.fuix-trust-box--eu) { grid-template-columns: 1fr; }
  .fuix-trust-box:not(.fuix-trust-box--eu) .fuix-trust-item { font-size: 12.5px; line-height: 1.3; }

}
/* ================= QUANTITA' + CARRELLO ================= */
#main .product-container .product-quantity > .control-label { display: none !important; }
#main .product-container .product-quantity .p-cartwapper {
  display: flex !important;
  width: auto !important;
  box-sizing: border-box;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}
#main .product-container .product-quantity .p-cartwapper .qty {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
#main .product-container .product-quantity .p-cartwapper .qty select#quantity_wanted.fuix-qty-select,
#main .product-container .product-quantity .p-cartwapper .qty input#quantity_wanted {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 52px !important;
  padding: 0 26px 0 12px !important;
  font-size: 16px !important;
  text-align: left !important;
  background-position: right 8px center !important;
}
#main .product-container .product-quantity .p-cartwapper .add {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
#main .product-container .product-quantity .p-cartwapper .add button.add-to-cart {
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#main .product-container .product-quantity .product-minimal-quantity:empty { display: none; }


@media (max-width: 767.98px) {
  /* ================= SPAZI ================= */
  #main .product-container h1.product-detail-name { margin-bottom: 6px !important; }
  #main .product-container .description-short { margin-top: 14px !important; }
}

/* ============ TABLET / DESKTOP (>=768px): stesse regole condivise, ma a piu' righe invece che a scorrimento ============ */
@media (min-width: 768px) {

  /* COLORE: miniature a capo su piu' righe (nessuna riga scorrevole); pallini di riserva come oggi */
  #product #main .product-variants .fuix-color-group {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  #product #main .product-variants .fuix-color-group .fuix-selected-color-name {
    margin-bottom: 8px;
    font-size: 14px;
  }
  #product #main .product-variants ul#group_2 {
    flex: 1 0 100%;
    margin: 0 !important;
    padding: 2px !important;
  }
  #product #main .product-variants ul#group_2:has(> li.fx-has-img) { gap: 8px !important; }

  /* TAGLIA: tessere a capo su piu' righe invece della riga scorrevole */
  #product #main .product-variants .fuix-size-group { margin-bottom: 16px !important; }
  .fuix-size-head { margin-bottom: 8px; font-size: 14px; }
  #product #main .product-variants .fuix-size-tiles {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding: 2px;
  }
  .fuix-size-tiles .fuix-size-tile { min-width: 56px; }

  /* FIDUCIA: due colonne, 4 voci, separata dal pulsante da un filo sottile */
  #main .product-container .product-quantity .fuix-trust-box {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    column-gap: 20px;
    row-gap: 6px;
    margin: 14px 0 6px !important;
    padding-top: 12px;
    border-top: 1px solid #ececec;
  }
  .fuix-trust-box--eu .fuix-trust-item { font-size: 13px; line-height: 1.35; }

  /* CARRELLO: stessa riga quantita' + pulsante dell'approvato mobile, un filo piu' staccata dalle varianti */
  #main .product-container .product-quantity .p-cartwapper { margin-top: 8px !important; flex-wrap: wrap; }
  #main .product-container .product-quantity .p-cartwapper .add { display: contents; }
  #main .product-container .product-quantity .p-cartwapper .add button.add-to-cart { flex: 1 1 0; width: auto !important; max-width: none !important; min-width: 0; }
  #main .product-container .product-quantity .p-cartwapper .add .leo-compare-wishlist-button { flex: 1 0 100%; margin: 0 !important; }
}

/* telefoni molto stretti (<=359px): il testo del pulsante non entra con 16px, si riduce per non essere tagliato */
@media (max-width: 359.98px) {
  #main .product-container .product-quantity .p-cartwapper .add button.add-to-cart {
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }
}