/* Scheda prodotto delle camicie, dal mockup (Prodotto.html righe 1229-1260), 2026-10-20.
   Misure in strategia/sito-2.0/QA/confronto-mockup/SPEC-PRODOTTO-CARRELLO.md, parte 1.
   Dal 2026-10-27 vale per ogni scheda (maglieria, cravatte, cinture): stesse colonne, stessi passi, stesso riepilogo
   (assets/js/scheda-semplice.js per i prodotti che non sono camicie). */

/* ---------- impaginazione: due colonne uguali, ferma la galleria (non l'acquisto) ---------- */
.fiore-product__main { gap: clamp(32px, 4.4vw, 64px) !important; }
.fiore-product__main > .fiore-product__gallery, .fiore-product__main > .fiore-product__buy { flex-basis: 50% !important; }
@media (min-width: 782px) {
	.fiore-product__buy { position: static !important; }
	.fiore-product__gallery { position: sticky; top: 118px; }
}

/* ---------- testa: nome, prezzo, «La più venduta» ---------- */
.single-product .fiore-product__title { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.04; text-wrap: balance; }
.fiore-scheda__prezzo-riga { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fiore-scheda__prezzo-riga .fiore-product__price { margin: 0 !important; }
.single-product .fiore-product__price { font: 400 20px/1.2 var(--wp--preset--font-family--serif) !important; font-variant-numeric: tabular-nums; }
.fiore-stato { display: inline-block; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding: 6px 10px; font: 400 10.5px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* ---------- il modulo vero resta, nascosto dove serve ---------- */
.fiore-scheda-pronta table.variations, .fiore-scheda-pronta .tc-extra-product-options, .fiore-scheda-pronta .tm-epo-totals, .fiore-scheda-pronta .tc-totals-form {
	position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important;
}
.fiore-scheda-pronta .single_variation, .fiore-scheda-pronta .reset_variations, .fiore-riepilogo .quantity { display: none !important; }

/* ---------- i passi numerati ---------- */
.fiore-passi { list-style: none; margin: 0 0 18px; padding: 0; border-top: 2px solid var(--wp--preset--color--ink); }
.fiore-passo { border-bottom: 1px solid var(--wp--preset--color--line); }
.fiore-passo__testa { width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--wp--preset--color--ink); }
.fiore-passo__num { font: 400 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; color: var(--wp--preset--color--muted); }
.fiore-passo__titolo { font: 400 18px/1.2 var(--wp--preset--font-family--serif); }
.fiore-passo__valore { margin-left: auto; font: 400 12.5px/1.2 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--muted); text-align: right; }
.fiore-passo__segno { width: 16px; text-align: center; font: 300 20px/1 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--muted); }
.fiore-passo__corpo { padding: 0 0 18px; display: grid; gap: 10px; }
.fiore-passo__corpo[hidden] { display: none; }

/* passo della taglia */
.fiore-passo .fiore-size-guide__line { margin: 0; font: 400 12.5px/1.45 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--text); }
.fiore-passo .fiore-size-guide__line:is(:first-child, :has(.fiore-size-guide__open)) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fiore-passo .fiore-size-guide__line .fiore-size-guide__open { flex: 0 0 auto; font: 900 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--ink); padding-bottom: 4px; }
.fiore-passo .fiore-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.fiore-passo .fiore-pills button { min-width: 0; min-height: 46px; font: 400 14px/1 var(--wp--preset--font-family--sans); letter-spacing: .06em; border: 1px solid var(--wp--preset--color--muted); background: transparent; color: var(--wp--preset--color--ink); transition: background-color .2s, color .2s, border-color .2s; }
.fiore-passo .fiore-pills button[aria-pressed="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); }
.fiore-passo .fiore-pills button:disabled { opacity: 1; color: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--line); text-decoration: line-through; }
.fiore-taglia-info { margin: 0; font: 400 12.5px/1.45 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--text); }

/* passo della personalizzazione */
.fiore-pers { display: grid; gap: 10px; }
.fiore-pers__voce { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--wp--preset--color--line); cursor: pointer; transition: border-color .2s; }
.fiore-pers__voce.is-on, .fiore-pers__voce:hover { border-color: var(--wp--preset--color--ink); }
.fiore-pers__voce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fiore-pers__box { width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--wp--preset--color--ink); display: grid; place-items: center; }
.fiore-pers__voce input:checked + .fiore-pers__box { background: var(--wp--preset--color--ink); }
.fiore-pers__voce input:checked + .fiore-pers__box::after { content: "✓"; color: #fff; font: 700 12px/1 var(--wp--preset--font-family--sans); }
.fiore-pers__voce input:focus-visible + .fiore-pers__box { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.fiore-pers__voce b { display: block; font: 400 16px/1.25 var(--wp--preset--font-family--serif); }
.fiore-pers__voce small { display: block; margin-top: 3px; font: 400 12.5px/1.45 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--text); }
.fiore-pers__pannello { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 16px; border: 1px solid var(--wp--preset--color--ink); border-top: 0; margin-top: -10px; }
.fiore-pers__pannello[hidden] { display: none; }
.fiore-pers__campo { display: grid; gap: 8px; align-content: start; }
.fiore-etichetta { font: 400 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.fiore-pers__lettere { height: 44px; padding: 0 12px; border: 1px solid var(--wp--preset--color--muted); border-radius: 0; font: 400 17px/1 var(--wp--preset--font-family--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); width: 100%; box-sizing: border-box; }
.fiore-pers__lettere:focus { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 0; border-color: var(--wp--preset--color--ink); }
.fiore-pers__bottoni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fiore-scelta { min-height: 44px; padding: 6px 8px; border: 1px solid var(--wp--preset--color--ink); background: transparent; color: var(--wp--preset--color--ink); cursor: pointer; font: 600 13px/1.2 var(--wp--preset--font-family--sans); display: grid; justify-items: center; gap: 6px; transition: background-color .2s, color .2s; }
.fiore-scelta--corsivo { font: italic 600 16px/1 var(--wp--preset--font-family--serif); } /* è lo stile del ricamo, non un titolo */
.fiore-scelta[aria-checked="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.fiore-scelta img { width: 46px; height: 46px; object-fit: contain; background: #fff; }
.fiore-pers__pallini { display: flex; gap: 8px; flex-wrap: wrap; }
.fiore-pallino { width: 30px; height: 30px; padding: 3px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer; }
.fiore-pallino span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); }
.fiore-pallino[aria-checked="true"] { border-color: var(--wp--preset--color--ink); }
.fiore-pers__avviso { grid-column: 1 / -1; margin: 0; padding: 10px 12px; background: var(--wp--preset--color--paper-alt); font: 400 12.5px/1.45 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); }
.fiore-pers__chiudi { justify-self: start; background: none; border: 0; padding: 4px 0; cursor: pointer; font: 900 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* ---------- riepilogo «La tua camicia» e bottone ---------- */
.fiore-riepilogo { display: grid; gap: 14px; padding: 22px; background: var(--wp--preset--color--paper-alt); margin-bottom: 24px; }
.fiore-riepilogo .fiore-etichetta { font-size: 11.5px; }
.fiore-riepilogo__righe { margin: 0; display: grid; gap: 6px; }
.fiore-riepilogo__righe > div { display: flex; justify-content: space-between; gap: 16px; font: 400 14px/1.4 var(--wp--preset--font-family--sans); }
.fiore-riepilogo__righe dt { color: var(--wp--preset--color--text); }
.fiore-riepilogo__righe dd { margin: 0; color: var(--wp--preset--color--ink); text-align: right; }
.fiore-riepilogo__totale { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--wp--preset--color--line-strong); padding-top: 10px; font: 400 14px/1 var(--wp--preset--font-family--sans); }
.fiore-riepilogo__totale .fiore-prezzo { font: 400 22px/1 var(--wp--preset--font-family--serif); font-variant-numeric: tabular-nums; }
.fiore-riepilogo .woocommerce-variation-add-to-cart, .fiore-riepilogo .variations_button { display: block; margin: 0; }
.fiore-riepilogo .single_add_to_cart_button { width: 100%; min-height: 54px; font-size: 13px !important; opacity: 1 !important; cursor: pointer !important; }
.fiore-riepilogo__errore { margin: 0; font: 400 13px/1.4 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); }
.fiore-riepilogo__errore:empty { display: none; }
.fiore-riepilogo .fiore-reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; font: 400 12.5px/1.35 var(--wp--preset--font-family--sans); }
.fiore-riepilogo .fiore-reassure li::before { flex-basis: 18px; height: 18px; }
.fiore-riepilogo .fiore-product__ask { margin: 0; }
.fiore-riepilogo .fiore-product__ask a { font: 900 12px/1 var(--wp--preset--font-family--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink); border-bottom: 2px solid var(--wp--preset--color--ink); padding-bottom: 5px; display: inline-block; }

/* ---------- voci sotto: come nel mockup, più leggere ---------- */
.single-product .fiore-accordion summary { font: 400 12.5px/1 var(--wp--preset--font-family--sans); letter-spacing: .14em; padding: 16px 0; }
.single-product .fiore-accordion summary::after { font-size: 20px; font-weight: 300; }

@media (max-width: 760px) {
	.fiore-product__main > .fiore-product__gallery, .fiore-product__main > .fiore-product__buy { flex-basis: 100% !important; }
	.single-product .fiore-product__title { font-size: 26px; }
	.fiore-passo__titolo { font-size: 17px; }
	.fiore-passo__testa { padding: 15px 0; }
	.fiore-pers__pannello { grid-template-columns: 1fr; padding: 14px; }
	.fiore-riepilogo { padding: 18px 16px; }
	.fiore-riepilogo .fiore-reassure { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.fiore-passo .fiore-pills button, .fiore-scelta, .fiore-pers__voce { transition: none; }
}

/* il bottone resta vivo anche prima della taglia (mockup): dice lui cosa manca */
.woocommerce .fiore-product .fiore-riepilogo button.button.alt.single_add_to_cart_button,
.woocommerce .fiore-product .fiore-riepilogo button.button.alt.single_add_to_cart_button.disabled { opacity: 1 !important; background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--paper) !important; border: 1px solid var(--wp--preset--color--ink) !important; }
.woocommerce .fiore-product .fiore-riepilogo button.button.alt.single_add_to_cart_button:hover { background: transparent !important; color: var(--wp--preset--color--ink) !important; }

.fiore-passo__errore { margin: 0; padding: 8px 10px; border-left: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--paper-alt); font: 700 13px/1.4 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); }
.fiore-riepilogo .added_to_cart, .fiore-riepilogo .wc-forward { display: none !important; } /* dopo l aggiunta in sottofondo c e il cassetto */

/* Revisione del 2026-10-20, voci 8, 9 e 12: galleria a tutta colonna (WooCommerce la ferma a 512 px), colonna
   d'acquisto senza il rientro del modulo, niente fascia bianca fra «Hai un dubbio?» nero e il piede. */
.fiore-product form.cart { padding-inline: 0 !important; margin-inline: 0 !important; }
main.fiore-product { padding-bottom: 0 !important; }
