/* ============================================================
   KOMMERCE — estensioni
   Continua style.css (palette e tipografia del moodboard) con
   tutto quello che la bozza statica non aveva: avvisi, paginazione,
   aggiunte, gift card, area cliente, accesso, stato dell'ordine.
   ============================================================ */

/* ---------- utilità ---------- */
[hidden]{display:none !important}
.nota-centrata{text-align:center; margin-top:32px; font-size:.84rem; color:var(--tortora)}
.titolo-medio{font-size:clamp(2.1rem,4vw,3.2rem)}
.pagina-testata{margin-bottom:clamp(30px,3.6vw,52px)}
.pagina-testata h1{font-size:clamp(2.3rem,4.4vw,3.6rem)}
.testata--sx{text-align:left; margin-left:0}
.campo--vuoto{display:none}

/* ---------- le quattro stagioni ---------- */
.stagioni{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
.stagione-chip{
  display:block; padding:11px 20px; border:1px solid var(--linea); background:transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.stagione-chip b{
  display:block; font-family:var(--serif); font-size:1.08rem; font-weight:400; color:var(--inchiostro);
}
.stagione-chip span{
  display:block; font-size:0.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tortora); margin-top:2px; font-weight:500;
}
.stagione-chip:hover{border-color:var(--ottone)}
.stagione-chip.is-on{background:var(--bosco); border-color:var(--bosco)}
.stagione-chip.is-on b{color:#F6F2EA}
.stagione-chip.is-on span{color:var(--ottone-chiaro)}
.stagione-avviso{
  margin-top:22px; font-size:.82rem; color:var(--tortora-scuro);
  border-left:2px solid var(--ottone); padding-left:14px; max-width:62ch;
}
.stagione-avviso a{margin-left:6px}

/* fuori stagione: si vede, ma non si ordina */
.fuori-stagione{
  display:inline-block; margin-bottom:20px; padding:12px 18px;
  border:1px solid rgba(176,141,87,.45); background:rgba(176,141,87,.08);
  font-size:.84rem; color:var(--tortora-scuro);
}
.fuori-stagione b{color:var(--ottone-testo)}

/* la griglia dello shop mentre arrivano i nuovi risultati */
#shop-risultati{transition:opacity .25s var(--ease)}
#shop-risultati.is-carico{opacity:.35; pointer-events:none}

/* fascia oraria non più raggiungibile: si vede che c'è, ma è spenta */
.metodo--spento{opacity:.55; cursor:not-allowed; background:var(--avorio-2)}
.metodo--spento input{cursor:not-allowed}
.metodo--spento b{text-decoration:line-through; text-decoration-thickness:1px}
.fascia__motivo{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; white-space:normal;
  color:var(--ottone-testo); font-style:normal; text-align:right; max-width:180px; line-height:1.5;
}
.fascia__motivo:empty{display:none}
@media (min-width:760px){ .campo--vuoto{display:block} }

.elenco-punti{margin:0; padding:0}
.elenco-punti li{position:relative; padding-left:20px; margin-bottom:9px}
.elenco-punti li::before{
  content:''; position:absolute; left:2px; top:.75em; width:5px; height:5px;
  border-radius:50%; background:var(--ottone); opacity:.75;
}

.testo-lungo h2{font-size:clamp(1.5rem,2.4vw,2rem); margin:2em 0 .7em}
.testo-lungo h3{font-size:clamp(1.15rem,1.8vw,1.4rem); margin:1.8em 0 .6em}
.testo-lungo ul{margin:0 0 1.3em}
.testo-lungo li{position:relative; padding-left:20px; margin-bottom:9px}
.testo-lungo li::before{
  content:''; position:absolute; left:2px; top:.78em; width:5px; height:5px;
  border-radius:50%; background:var(--ottone); opacity:.7;
}
.testo-lungo a{color:var(--ottone-testo); text-decoration:underline; text-underline-offset:3px}

/* ---------- selettore di lingua ---------- */
.lingue{display:flex; align-items:center; gap:2px; margin-right:6px}
.lingue a{
  font-size:.7rem; letter-spacing:.1em; padding:6px 7px; color:var(--tortora);
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lingue a:hover{color:var(--inchiostro)}
.lingue a.is-on{color:var(--inchiostro); border-bottom-color:var(--ottone)}
@media (max-width:820px){ .lingue{display:none} }

.menu-mobile__lingue{display:flex; gap:14px; margin-top:26px}
.menu-mobile__lingue a{font-size:.72rem !important; letter-spacing:.2em; padding:0 !important}

/* ---------- avvisi ---------- */
.avvisi{padding-top:26px; display:grid; gap:12px}
.avviso{
  display:flex; gap:14px; align-items:flex-start; padding:16px 20px;
  border:1px solid var(--linea); background:#fff; font-size:.86rem; line-height:1.7;
}
.avviso svg{width:17px; flex:0 0 auto; margin-top:3px}
.avviso p{margin:0}
.avviso ul{margin:6px 0 0; padding-left:0}
.avviso li{position:relative; padding-left:16px}
.avviso li::before{content:'·'; position:absolute; left:4px; color:var(--ottone-testo)}
.avviso--ok{border-color:rgba(110,122,102,.4); background:rgba(110,122,102,.07); color:var(--salvia-testo)}
.avviso--ok svg{color:var(--salvia-testo)}
.avviso--ko{border-color:rgba(180,85,63,.35); background:rgba(180,85,63,.06); color:#8F4331}
.avviso--ko svg{color:#B4553F}
.avviso--info{border-color:rgba(176,141,87,.4); background:rgba(176,141,87,.06); color:var(--tortora-scuro)}
.avviso--info svg{color:var(--ottone-testo)}

.toast.is-ko{background:#8F4331}

/* ---------- paginazione ---------- */
.paginazione{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:clamp(40px,5vw,66px); flex-wrap:wrap;
}
.paginazione a, .paginazione span{
  min-width:42px; height:42px; display:grid; place-items:center; padding:0 12px;
  font-size:.8rem; color:var(--testo); border:1px solid var(--linea);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.paginazione a:hover{border-color:var(--ottone); color:var(--inchiostro)}
.paginazione .is-on{background:var(--bosco); border-color:var(--bosco); color:var(--avorio)}
.paginazione__off{opacity:.35}
.paginazione svg{width:15px}

/* ---------- schede e liste dati ---------- */
.scheda{
  border:1px solid var(--linea); background:#fff; padding:clamp(22px,2.6vw,32px); margin-bottom:20px;
}
.scheda h3{font-size:1.22rem; margin-bottom:16px}
.scheda--ottone{border-color:rgba(176,141,87,.45); background:rgba(176,141,87,.05)}

.dati-lista{display:grid; grid-template-columns:auto 1fr; gap:8px 22px; margin:0; font-size:.87rem}
.dati-lista dt{color:var(--tortora); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; padding-top:4px}
.dati-lista dd{margin:0; color:var(--inchiostro)}

.pillola{
  display:inline-block; padding:4px 12px; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--linea); color:var(--tortora); border-radius:100px;
}
.pillola--ok{border-color:rgba(95,106,88,.55); color:var(--salvia-testo); background:rgba(95,106,88,.09)}
.pillola--attesa{border-color:rgba(176,141,87,.5); color:var(--ottone-testo); background:rgba(176,141,87,.08)}
.pillola--ko{border-color:rgba(180,85,63,.4); color:#B4553F; background:rgba(180,85,63,.06)}

/* ---------- stato dell'ordine ---------- */
.avanzamento{margin:0 0 clamp(28px,3vw,44px)}
.avanzamento .barra{display:block; height:2px; background:var(--linea); position:relative; overflow:hidden}
.avanzamento .barra i{
  position:absolute; inset:0 auto 0 0; background:var(--ottone);
  transition:width 1.2s var(--ease);
}
.avanzamento ul{display:flex; justify-content:space-between; margin-top:14px; gap:8px}
.avanzamento li{
  font-size:0.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tortora);
  text-align:center; flex:1;
}
.avanzamento li.is-on{color:var(--inchiostro)}

.ordine-griglia{display:grid; gap:clamp(20px,2.4vw,30px); align-items:start}
@media (min-width:900px){ .ordine-griglia{grid-template-columns:1.55fr .95fr} }

.ordine-riga{
  display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--linea);
}
.ordine-riga:last-of-type{border-bottom:0}
.ordine-riga img{width:56px; height:56px; object-fit:cover}
.riga-ordine__senza-foto{
  display:block; width:56px; height:56px; background:var(--avorio-3); border:1px solid var(--linea);
}
.ordine-riga b{display:block; color:var(--inchiostro); font-weight:400; font-size:.94rem}
.ordine-riga small{display:block; font-size:.79rem; color:var(--tortora)}
.ordine-riga .prezzo{font-size:.94rem}

.cronologia{margin:0; padding:0; list-style:none}
.cronologia li{position:relative; padding:0 0 20px 26px; border-left:1px solid var(--linea)}
.cronologia li:last-child{border-left-color:transparent; padding-bottom:0}
.cronologia li::before{
  content:''; position:absolute; left:-4.5px; top:6px; width:8px; height:8px;
  border-radius:50%; background:var(--ottone);
}
.cronologia b{display:block; color:var(--inchiostro); font-weight:400}
.cronologia span{font-size:.79rem; color:var(--tortora)}
.cronologia p{margin:6px 0 0; font-size:.85rem}

/* ---------- carrello: pagina ---------- */
.carrello-pagina__azioni{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px;
}
.link-freccia--inv{flex-direction:row-reverse}

.riga-biglietto{margin:-6px 0 22px; padding-left:96px}
.riga-biglietto summary{
  font-size:.76rem; letter-spacing:.1em; color:var(--ottone-testo); cursor:pointer;
  padding:6px 0; list-style:none;
}
.riga-biglietto summary::-webkit-details-marker{display:none}
.riga-biglietto summary::before{content:'+ '; }
.riga-biglietto[open] summary::before{content:'– '; }
.riga-biglietto textarea{
  width:100%; margin:10px 0; padding:12px 14px; border:1px solid var(--linea);
  background:#fff; font:inherit; font-size:.88rem; color:var(--inchiostro); resize:vertical;
}
@media (max-width:640px){ .riga-biglietto{padding-left:0} }

.confezione-box{
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-top:28px; padding:20px 24px; border:1px solid var(--linea); background:var(--avorio-2);
}
.confezione-box b{display:block; color:var(--inchiostro); font-weight:400}
.confezione-box span{font-size:.84rem; color:var(--tortora)}

.riepilogo__iva{font-size:.77rem; color:var(--tortora); margin:-6px 0 18px; text-align:right}

/* ---------- formati come bottoni (ora sono radio) ---------- */
.varianti__scelte label{
  padding:12px 20px; border:1px solid var(--linea); font-size:0.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tortora-scuro); cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  user-select:none;
}
.varianti__scelte label:hover{border-color:var(--tortora)}
.varianti__scelte label:has(input:checked),
.varianti__scelte label.is-on{border-color:var(--bosco); background:var(--bosco); color:#F6F2EA}
.varianti__scelte input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.varianti__scelte label:focus-within{outline:2px solid var(--ottone); outline-offset:2px}

.qta-grande input[type=number]{
  width:56px; min-height:54px; border:0; background:none; text-align:center;
  font:inherit; font-size:.95rem; color:var(--inchiostro); appearance:textfield;
}
.qta-grande input::-webkit-outer-spin-button,
.qta-grande input::-webkit-inner-spin-button{appearance:none; margin:0}

/* ---------- aggiunte al prodotto ---------- */
.aggiunte{margin:6px 0 28px; border-top:1px solid var(--linea); padding-top:24px}
.aggiunte__titolo{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tortora); margin-bottom:16px;
}
.aggiunte__gruppo{margin-bottom:22px}
.aggiunte__gruppo > span{
  display:block; font-size:.78rem; letter-spacing:.08em; color:var(--ottone-testo); margin-bottom:10px;
}
.aggiunta{border:1px solid var(--linea); background:#fff; margin-bottom:10px; transition:border-color .3s var(--ease)}
.aggiunta:hover{border-color:var(--beige-sabbia)}
.aggiunta > label{
  display:grid; grid-template-columns:22px 52px 1fr auto; gap:14px; align-items:center;
  padding:14px 18px; cursor:pointer;
}
.aggiunta > label:not(:has(img)){grid-template-columns:22px 1fr auto}
.aggiunta input[type=checkbox]{
  width:17px; height:17px; accent-color:var(--salvia); margin:0; cursor:pointer;
}
.aggiunta img{width:52px; height:52px; object-fit:cover}
.aggiunta b{display:block; color:var(--inchiostro); font-weight:400; font-size:.94rem}
.aggiunta small{display:block; font-size:.81rem; color:var(--tortora); line-height:1.65}
.aggiunta em{font-style:normal; font-size:.85rem; color:var(--ottone-testo); white-space:nowrap}
.aggiunta__testo{padding:0 18px 16px}
.aggiunta__testo textarea, .aggiunta__testo input{
  width:100%; padding:11px 14px; border:1px solid var(--linea); background:var(--avorio);
  font:inherit; font-size:.88rem; color:var(--inchiostro); resize:vertical;
}
.aggiunta__testo label{
  display:block; font-size:.75rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tortora); margin-bottom:7px;
}
.aggiunta__conta{font-size:.75rem; color:var(--tortora); text-align:right; margin-top:5px}

/* su schermo stretto il prezzo va a capo sotto al testo */
@media (max-width:560px){
  .aggiunta > label{grid-template-columns:20px 44px 1fr; gap:11px; padding:13px 14px}
  .aggiunta > label:not(:has(img)){grid-template-columns:20px 1fr}
  .aggiunta img{width:44px; height:44px}
  .aggiunta b{font-size:.9rem; line-height:1.4}
  .aggiunta small{font-size:.72rem}
  .aggiunta em{grid-column:1 / -1; text-align:right; margin-top:-4px}
}

.aggiunte-riepilogo[hidden]{display:none !important}
.aggiunte-riepilogo{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:14px 18px; background:var(--avorio-2); font-size:.86rem; margin-bottom:22px;
}
.aggiunte-riepilogo b{font-family:var(--serif); font-size:1.25rem; color:var(--inchiostro); font-weight:400}

.riga__aggiunte{margin:6px 0 0; font-size:.8rem; color:var(--salvia-testo); line-height:1.7}
.riga__aggiunte span{display:block}

/* ---------- gift card ---------- */
.gift-hero{
  display:grid; gap:clamp(26px,3vw,52px); align-items:center;
}
@media (min-width:900px){ .gift-hero{grid-template-columns:1fr .9fr} }

.gift-card{
  position:relative; padding:clamp(30px,4vw,48px); text-align:center;
  border:1px solid rgba(176,141,87,.5); background:linear-gradient(150deg, var(--avorio-2), var(--avorio-3));
  box-shadow:var(--ombra-card);
}
.gift-card::before{
  content:''; position:absolute; inset:9px; border:1px solid rgba(176,141,87,.3); pointer-events:none;
}
.gift-card__importo{font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.8rem); color:var(--inchiostro); line-height:1}
.gift-card__codice{
  font-size:1.05rem; letter-spacing:0.2em; color:var(--ottone-testo); margin:18px 0 0; font-weight:400;
}
.gift-card__saldo{margin-top:22px; font-size:.86rem; color:var(--testo)}
.gift-card__nota{font-size:.79rem; color:var(--tortora); margin-top:14px}

.gift-tagli{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0}
.gift-tagli label{
  border:1px solid var(--linea); padding:12px 20px; cursor:pointer; font-size:.9rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.gift-tagli label:hover{border-color:var(--beige-sabbia)}
.gift-tagli label.is-on{border-color:var(--ottone); background:rgba(176,141,87,.08); color:var(--inchiostro)}
.gift-tagli input{position:absolute; opacity:0; pointer-events:none}

/* ---------- accesso e area cliente ---------- */
.accesso{
  max-width:470px; margin:0 auto; padding:clamp(30px,4vw,46px);
  border:1px solid var(--linea); background:#fff;
}
.accesso h1{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:10px}
.accesso__nota{font-size:.86rem; color:var(--tortora); margin-bottom:28px}
.accesso__piede{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--linea);
  font-size:.85rem; text-align:center;
}
.accesso__piede a{color:var(--ottone-testo); text-decoration:underline; text-underline-offset:3px}
.accesso .btn{width:100%}
.accesso__ricorda{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.accesso__ricorda label{display:flex; gap:9px; align-items:center; font-size:.82rem; cursor:pointer}

.account{display:grid; gap:clamp(24px,3vw,44px); align-items:start}
@media (min-width:900px){ .account{grid-template-columns:250px 1fr} }

.account__lato{border:1px solid var(--linea); background:#fff}
.account__io{padding:24px; border-bottom:1px solid var(--linea)}
.account__iniziali{
  width:44px; height:44px; border-radius:50%; background:var(--bosco); color:var(--avorio);
  display:grid; place-items:center; font-size:.86rem; letter-spacing:.06em; margin-bottom:12px;
}
.account__io b{display:block; color:var(--inchiostro); font-weight:400}
.account__io span{font-size:.82rem; color:var(--tortora); word-break:break-all}
.account__menu{padding:10px 0}
.account__menu a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 24px; font-size:.88rem; color:var(--testo);
  border-left:2px solid transparent; transition:all .3s var(--ease);
}
.account__menu a:hover{background:var(--avorio-2); color:var(--inchiostro)}
.account__menu a.is-on{border-left-color:var(--ottone); color:var(--inchiostro); background:var(--avorio-2)}
.account__menu small{font-size:.78rem; color:var(--tortora)}
.account__menu form{margin:10px 24px 14px}
.account__menu form button{font-size:.78rem; color:var(--tortora); text-decoration:underline; text-underline-offset:3px}

.numeri-fila{display:grid; gap:14px; margin-bottom:26px}
@media (min-width:560px){ .numeri-fila{grid-template-columns:repeat(3,1fr)} }
.numero-box{border:1px solid var(--linea); background:#fff; padding:22px}
.numero-box b{display:block; font-family:var(--serif); font-size:1.9rem; color:var(--inchiostro); line-height:1}
.numero-box span{display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tortora); margin-top:8px}

.tabella{width:100%; border-collapse:collapse; font-size:.87rem}
.tabella th{
  text-align:left; font-family:var(--sans); font-weight:400; font-size:.71rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tortora);
  padding:0 14px 12px; border-bottom:1px solid var(--linea);
}
.tabella td{padding:15px 14px; border-bottom:1px solid var(--linea); vertical-align:middle}
.tabella tr:last-child td{border-bottom:0}
.tabella td:first-child, .tabella th:first-child{padding-left:0}
.tabella td:last-child, .tabella th:last-child{padding-right:0; text-align:right}
.tabella a{color:var(--inchiostro); border-bottom:1px solid var(--linea)}
.tabella a:hover{border-bottom-color:var(--ottone)}
.tabella-scroll{overflow-x:auto}

/* ---------- notifiche push ---------- */
.push{border:1px solid var(--linea); background:#fff; padding:24px}
.push__stato{font-size:.86rem; color:var(--tortora); margin:10px 0 18px}
.push__stato.is-ok{color:var(--salvia-testo)}
.push__stato.is-ko{color:#B4553F}

/* ---------- banner installazione ---------- */
.banner-installa{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:16px 20px; background:var(--bosco); color:var(--avorio);
  box-shadow:var(--ombra-morbida); opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.banner-installa[hidden]{display:none !important}
.banner-installa.is-on{opacity:1; transform:none}
.banner-installa__testo b{display:block; font-family:var(--serif); font-size:1.05rem; font-weight:400}
.banner-installa__testo span{font-size:.78rem; color:var(--beige-sabbia)}
.banner-installa__azioni{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.banner-installa__x{color:var(--beige-sabbia); display:grid; place-items:center}
.banner-installa__x svg{width:16px}
@media (max-width:620px){
  .banner-installa{left:10px; right:10px; bottom:10px; padding:14px 16px; gap:12px}
  .banner-installa__testo span{display:none}
}

/* ---------- ricerca ---------- */
.cerca-form{display:flex; gap:12px; max-width:520px; margin-top:30px; flex-wrap:wrap}
.cerca-form input{
  flex:1 1 240px; padding:14px 18px; border:1px solid var(--linea);
  background:#fff; font:inherit; font-size:.95rem; color:var(--inchiostro);
}

/* ---------- form: aiuti e bottoni ---------- */
.campo__aiuto{display:block; font-size:.78rem; color:var(--tortora); margin-top:7px; line-height:1.65}
.form__bottoni{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.privacy--piccola{font-size:.82rem; margin:14px 0}
.blocco-fattura{margin-top:18px; padding-top:18px; border-top:1px solid var(--linea)}
.nota-pagamento{
  margin-top:18px; padding:18px 20px; background:var(--avorio-2);
  font-size:.84rem; line-height:1.8;
}
.nota-pagamento b{color:var(--inchiostro)}
.metodo--statico{cursor:default}
.metodo--statico svg{width:18px; color:var(--ottone-testo); margin-top:4px}

.checkout__accedi{
  padding:15px 20px; border:1px solid rgba(176,141,87,.4); background:rgba(176,141,87,.06);
  font-size:.86rem; margin-bottom:26px;
}
.checkout__accedi a{color:var(--ottone-testo); text-decoration:underline; text-underline-offset:3px}

.indirizzi-salvati{margin-bottom:22px}
.indirizzi-salvati > div{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.indirizzo-chip{
  text-align:left; border:1px solid var(--linea); background:#fff; padding:11px 16px;
  transition:border-color .3s var(--ease);
}
.indirizzo-chip:hover, .indirizzo-chip.is-on{border-color:var(--ottone)}
.indirizzo-chip b{display:block; font-size:.82rem; color:var(--inchiostro); font-weight:400}
.indirizzo-chip span{font-size:.79rem; color:var(--tortora)}

.btn.is-carico{opacity:.6; pointer-events:none}

/* ---------- filtri shop ---------- */
.filtro--intestazione{display:flex; justify-content:space-between; align-items:center}
.filtro--intestazione h4{margin:0}
.filtri--sx{justify-content:flex-start; margin-bottom:40px}
.filtri a{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; padding:10px 18px;
  border:1px solid var(--linea); color:var(--tortora); transition:all .3s var(--ease);
}
.filtri a:hover{border-color:var(--beige-sabbia); color:var(--inchiostro)}
.filtri a.is-on{background:var(--bosco); border-color:var(--bosco); color:var(--avorio)}
.chip a{display:grid; place-items:center}

/* ---------- workshop ---------- */
.ws__img{aspect-ratio:16/10; margin-bottom:24px}
.ws__plus{margin:22px 0 0; border-bottom:0; padding-bottom:0}
.ws--passato{opacity:.55}

/* ---------- pacchetti su fondo scuro ---------- */
.pacchetto--scuro{background:transparent; border-color:rgba(246,242,234,.18)}
.pacchetto--scuro h3, .pacchetto--scuro .pacchetto__prezzo{color:#F6F2EA}
/* sul fondo bosco il tortora sparisce (2.5:1): serve un chiaro */
.pacchetto--scuro .pacchetto__da,
.pacchetto--scuro .pacchetto__prezzo small{color:rgba(246,242,234,.78)}
.pacchetto--scuro-top{background:rgba(246,242,234,.05); border-color:var(--ottone)}

/* ---------- spazi (ex business) ---------- */
.spazi-settori{display:grid; gap:16px; margin-top:34px}
@media (min-width:700px){ .spazi-settori{grid-template-columns:repeat(2,1fr)} }
.settore{
  display:flex; gap:16px; align-items:flex-start; padding:22px 24px;
  border:1px solid var(--linea); background:#fff;
}
.settore svg{width:22px; color:var(--ottone-testo); flex:0 0 auto; margin-top:3px}
.settore b{display:block; color:var(--inchiostro); font-weight:400; margin-bottom:5px}
.settore span{font-size:.84rem; line-height:1.75}

/* ---------- mappa incorporata ---------- */
.mappa iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.35) contrast(1.05)}

/* ---------- stampa ---------- */
@media print{
  .site-header,.annuncio,.footer,.strisciaCta,.wa,.velo,.carrello,.toast,
  .banner-installa,.briciole,.menu-mobile,.cerca{display:none !important}
  body{background:#fff}
  .scheda{border-color:#ddd; box-shadow:none}
}

/* Il logo caricato dal fiorista: non conosciamo le sue proporzioni,
   quindi gli diamo un'altezza e lo lasciamo respirare. */
.logo--suo{width:auto; height:auto; max-height:clamp(42px,6vw,64px); object-fit:contain}
.footer__logo .logo--suo{max-height:56px}

/* Le pagine di consegna per comune: i numeri che uno cerca prima di
   ordinare, leggibili senza scorrere. */
.dati-consegna{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin:0 0 28px; padding:22px; border:1px solid var(--linea)}
.dati-consegna dt{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tortora); margin-bottom:6px}
.dati-consegna dd{margin:0; font-family:var(--serif); font-size:1.4rem; color:var(--inchiostro)}
.elenco-luoghi{line-height:2.2}
.elenco-luoghi a{border-bottom:1px solid var(--linea)}

/* ============================================================
   La home a blocchi
   Il negozio la compone dal pannello: apertura, promesse,
   vetrina, categorie, racconto, journal, invito. Stessa grafica
   dell'atelier, ma nessuna parola scritta nel codice.
   ============================================================ */
.sezione--hero{padding-top:clamp(40px,6vw,86px)}
.sezione--hero h1{font-size:clamp(2.4rem,7vw,4rem); margin-bottom:14px}
.sezione--stretta{padding-top:clamp(22px,3vw,34px); padding-bottom:clamp(22px,3vw,34px)}
.hero__foto{width:100%; height:auto; margin-top:clamp(24px,4vw,44px); object-fit:cover; max-height:60vh}

.promesse{display:grid; grid-template-columns:1fr; gap:14px; margin:0; padding:0; list-style:none}
.promesse li{display:flex; align-items:center; gap:12px; font-size:.95rem; color:var(--testo)}
.promesse svg{width:18px; color:var(--salvia-testo); flex:none}
@media (min-width:760px){ .promesse{grid-template-columns:repeat(3,1fr)} }

.sezione--verde{background:var(--bosco); color:var(--avorio)}
.sezione--verde h2{color:var(--avorio)}
.sezione--verde .lead{color:rgba(251,249,244,.86)}

/* Il modulo del reso: si spunta quello che torna indietro. */
.riga-reso{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linea)}
.riga-reso:last-child{border-bottom:0}
.riga-reso__scelta{display:flex; align-items:center; gap:12px; cursor:pointer; min-height:44px}
.riga-reso__scelta input{width:20px; height:20px; accent-color:var(--bosco); flex:none}
.riga-reso__scelta small{display:block; color:var(--tortora); font-size:.84rem}
.riga-reso__quanti{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--tortora)}
.riga-reso__quanti input{width:64px; min-height:44px; text-align:center; border:1px solid var(--linea-campo); padding:6px}

/* Il prezzo più basso dei trenta giorni: piccolo ma leggibile, sotto
   il prezzo. Obbligatorio accanto a uno sconto annunciato. */
.pdp__minimo{font-size:.82rem; color:var(--tortora); margin:-6px 0 12px}

/* ============================================================
   La superficie (WebGL)
   Il canvas sta sopra l'immagine e la copre: se non si accende —
   niente scheda video, contesto perso, «riduci le animazioni» —
   l'immagine resta lì dov'era e non se ne accorge nessuno.
   ============================================================ */
.superficie{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:1;
}
.ha-superficie{position:relative; overflow:hidden}
.ha-superficie img{opacity:0; transition:opacity .4s ease}
.ha-superficie > *:not(.superficie){position:relative; z-index:2}

@media (prefers-reduced-motion: reduce){
  .superficie{display:none}
  .ha-superficie img{opacity:1}
}

/* La hero che può diventare superficie: l'altezza la decide
   l'immagine, così il canvas non fa saltare la pagina (CLS). */
.hero__superficie{margin-top:clamp(24px,4vw,44px)}
.hero__superficie .hero__foto{margin-top:0}

/* ============================================================
   Il prodotto che si gira
   Il palcoscenico è lo stesso riquadro della foto: che ci sia un
   giro, un modello o niente, l'immagine sta esattamente dove
   stava. Nessun salto quando gli script arrivano (CLS = 0).
   ============================================================ */
.tre{position:relative; width:100%; height:100%}
.tre img{width:100%; height:100%; object-fit:cover; display:block}

/* si gira solo quando il giro è davvero pronto */
.tre[data-giro].giro--vivo{touch-action:pan-y}
.tre.giro--pronto{cursor:grab}
.tre.giro--mano{cursor:grabbing; user-select:none}
.tre:focus-visible{outline:2px solid var(--bosco); outline-offset:3px}

/* In alto, non in fondo: in fondo allo schermo ci stanno il banner
   «installa», le barre dei cookie e le CTA appiccicate, e un bottone
   coperto da un altro bottone è un bottone che non c'è. */
.tre__comandi{
  position:absolute; left:0; right:0; top:0;
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
  padding:14px; pointer-events:none;
}
.tre__btn{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:11px 18px;
  background:rgba(255,255,255,.92); border:1px solid var(--linea); color:var(--inchiostro);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  backdrop-filter:blur(6px);
}
.tre__btn:hover{background:#fff}
.tre__btn[disabled]{opacity:.6; cursor:progress}
.tre__btn svg{width:17px; height:17px; flex:none}

/* quanto manca dei fotogrammi: una riga, non una rotella */
.tre__barra{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:transparent; opacity:0; transition:opacity .2s;
}
.tre.giro--carica .tre__barra{opacity:1}
.tre__barra::after{
  content:''; display:block; height:100%; width:var(--quanto,0%);
  background:var(--bosco); transition:width .25s;
}

.tre__aiuto{
  position:absolute; left:0; right:0; bottom:14px; margin:0;
  text-align:center; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--inchiostro); opacity:0; transition:opacity .25s; pointer-events:none;
}
.tre.giro--pronto .tre__aiuto{opacity:.72}
.tre.giro--mano .tre__aiuto,
.tre.modello--vivo .tre__aiuto{opacity:0}

/* il modello vero prende il posto della foto, stessa cornice */
.tre model-viewer{
  position:absolute; inset:0; width:100%; height:100%;
  background:var(--avorio-3); --poster-color:transparent;
}
.tre.modello--vivo img{visibility:hidden}
.tre.modello--carica .tre__btn{cursor:progress}

@media (prefers-reduced-motion: reduce){
  .tre__barra::after, .tre__aiuto{transition:none}
}