/* Finest Frozen Food - negozio B2B
   Oro del marchio come identita, navy freddo come colore delle azioni.
   Bodoni per i titoli e le cifre, Archivo per il resto. */

:root{
  --ground:#EDF2F5; --surface:#FFFFFF; --surface-2:#F6FAFB;
  --ink:#0D1A22; --ink-2:#3C4E59; --ink-3:#6B7F8B;
  --line:#DAE4E9; --line-soft:#E9EFF2;
  --gold:#8A6714; --gold-bright:#C4952F; --gold-wash:#F6EFDF;
  --chill:#1F6E8C; --chill-wash:#E4F0F5;
  --ok:#1C6E46; --ok-wash:#E3F1EA;
  --warn:#8E5410; --warn-wash:#F8EEE0;
  --crit:#992727; --crit-wash:#F9EAEA;
  --bar:#0D1A22; --bar-dim:#8FA7B4; --bar-line:#2B4553; --bar-deep:#12242E;
  --shadow:0 1px 2px rgba(13,26,34,.05), 0 8px 24px -12px rgba(13,26,34,.18);
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#081218; --surface:#0F1D26; --surface-2:#15252E;
    --ink:#E9F1F5; --ink-2:#A7BCC6; --ink-3:#78909C;
    --line:#22353F; --line-soft:#1A2A33;
    --gold:#D9A94A; --gold-bright:#EFC670; --gold-wash:#231C0C;
    --chill:#63B8D6; --chill-wash:#102630;
    --ok:#5DC894; --ok-wash:#0D2419;
    --warn:#D9A15E; --warn-wash:#26190C;
    --crit:#E58585; --crit-wash:#2A1414;
    --bar:#050D12; --bar-dim:#7D97A5; --bar-line:#22353F; --bar-deep:#0C1920;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance}
button{font:inherit; color:inherit; cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--chill); outline-offset:2px}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
.wrap.stretta{max-width:880px; padding-top:40px; padding-bottom:90px}

/* barra di servizio */
.utility{background:var(--bar); color:#CFDDE5; font-size:12.5px; border-bottom:2px solid var(--gold-bright)}
.utility .wrap{display:flex; align-items:center; gap:18px; min-height:38px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px}
.utility .sep{color:var(--bar-line)}
.utility strong{color:#fff; font-weight:600}
.utility .push{margin-left:auto; display:flex; align-items:center; gap:14px}
.utility a{color:var(--gold-bright); text-decoration:none; font-weight:600}
.utility a:hover{text-decoration:underline}

/* testata */
.masthead{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.masthead .wrap{display:flex; align-items:center; gap:28px; min-height:78px}
.brand{display:flex; align-items:baseline; gap:12px; text-decoration:none; flex:none}
.mark{font-family:"Bodoni Moda",Georgia,serif; font-weight:700; letter-spacing:-.02em; color:var(--gold); line-height:1; font-size:34px}
.brand .name{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-3); font-weight:600; line-height:1.3; max-width:96px}
.searchbar{flex:1; position:relative; max-width:520px; margin:0}
.searchbar input[type=search]{width:100%; height:44px; padding:0 16px 0 42px; font:inherit; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius)}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar svg{position:absolute; left:14px; top:13px; width:18px; height:18px; stroke:var(--ink-3); fill:none; stroke-width:1.8; pointer-events:none}
.mast-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.ghostbtn{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:9px 14px; font-size:13.5px; font-weight:500; text-decoration:none; display:inline-block}
.ghostbtn:hover{border-color:var(--ink-3)}
.acct{display:flex; flex-direction:column; line-height:1.25; text-align:right}
.acct b{font-size:13.5px; font-weight:600}
.acct span{font-size:11.5px; color:var(--ink-3)}

/* avvisi */
.avviso{margin:16px 0 0; padding:12px 16px; border-radius:var(--radius); font-size:14px; border:1px solid}
.avviso.errore{background:var(--crit-wash); border-color:var(--crit); color:var(--crit)}
.avviso.ok{background:var(--ok-wash); border-color:var(--ok); color:var(--ok)}

/* apertura */
.hero{background:var(--surface); border-bottom:1px solid var(--line); padding:52px 0 46px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(760px 320px at 88% -10%, var(--chill-wash), transparent 70%)}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:end}
.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.2em; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:18px}
.eyebrow::after{content:""; height:1px; width:56px; background:var(--gold-bright); opacity:.5}
.hero h1{font-family:"Bodoni Moda",Georgia,serif; font-weight:400; font-size:clamp(36px,5vw,58px); line-height:1.04; letter-spacing:-.015em; max-width:15ch}
.hero h1 em{font-style:italic; color:var(--gold)}
.hero p{margin:20px 0 0; max-width:52ch; color:var(--ink-2); font-size:16.5px}
.herostats{display:flex; border-left:1px solid var(--line)}
.herostats div{padding:0 26px}
.herostats div + div{border-left:1px solid var(--line)}
.herostats b{display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:34px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.herostats span{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600}

/* impianto negozio */
/* I 24px di lato sono quelli di .wrap: con "36px 0" sparivano, e sotto i
   1240px di schermo il catalogo toccava i bordi. */
.shop{display:grid; grid-template-columns:216px minmax(0,1fr); gap:40px; padding:36px 24px 150px}
.rail{position:sticky; top:102px; align-self:start}
.rail h3{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); font-weight:700; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.rail ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rail a{text-decoration:none; padding:9px 10px; border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; color:var(--ink-2)}
.rail a:hover{background:var(--surface-2); color:var(--ink)}
.rail a[aria-current="true"]{background:var(--gold-wash); color:var(--ink); font-weight:600; box-shadow:inset 2px 0 0 var(--gold-bright)}
.rail .n{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.railnote{margin-top:24px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:12.5px; color:var(--ink-2)}
.railnote b{display:flex; align-items:center; gap:7px; color:var(--ink); font-size:12.5px; margin-bottom:6px}

/* Albero dei reparti (madre/figlia da Dolibarr). Ogni voce e' una griglia
   a due colonne: il collegamento, e a destra la colonna della freccia.
   La freccia e' un pulsante a parte (dentro un link aprirebbe il
   reparto), e la colonna c'e' anche per le voci senza figlie: cosi' i
   numeri restano tutti in fila. Le figlie stanno sotto, su tutta la
   larghezza, chiuse finche' la voce non e' "aperto". */
.rail li{display:grid; grid-template-columns:minmax(0,1fr) 30px; position:relative}
.rail li > a{grid-column:1}
.rail .nome{min-width:0}
.rail .apri-ramo{grid-column:2; display:none; align-items:center; justify-content:center; padding:0; margin:0;
  background:none; border:0; border-radius:var(--radius); color:var(--ink-3); cursor:pointer; font:inherit}
.js .rail .apri-ramo{display:flex}
.rail .apri-ramo:hover{background:var(--surface-2); color:var(--ink)}
.rail .apri-ramo:focus-visible{outline:2px solid var(--gold-bright); outline-offset:-2px}
.rail .freccia{width:7px; height:7px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s ease}
.rail .apri-ramo[aria-expanded="true"] .freccia{transform:rotate(45deg); margin-top:-3px}
.rail .figlie{grid-column:1 / -1; display:none; flex-direction:column; list-style:none; margin:0; padding:0}
.rail li.aperto > .figlie{display:flex}
.rail li.figlia::before{content:""; position:absolute; left:12px; top:4px; bottom:4px; border-left:1px solid var(--line)}
.rail li.figlia > a{padding-left:24px; font-size:13.5px}
.rail li.livello-2 > a{padding-left:36px}
.rail li.livello-2::before{left:24px}
/* Il pulsante del menu esiste solo su telefono (vedi sotto). */
.rail-menu{display:none}

/* Le figlie in cima ai risultati: "All Breakfast & Bakery", "Filled
   Croissant", "Plain Croissant"... */
.sottoreparti{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 2px}
.sottoreparti a{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--line);
  border-radius:99px; background:var(--surface); color:var(--ink-2); font-size:13px; text-decoration:none}
.sottoreparti a:hover{border-color:var(--ink-3); color:var(--ink)}
.sottoreparti a[aria-current="true"]{background:var(--gold-wash); border-color:var(--gold-bright); color:var(--ink); font-weight:600}
.sottoreparti .n{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* Su telefono la colonna diventa un menu. Prima era una fila di
   etichette da trascinare di lato, e i clienti non ci si trovavano: ora
   un pulsante largo con il reparto in cui si e', e toccandolo l'elenco
   verticale si apre sotto, con le stesse frecce per le figlie. Voci alte
   44px: si prendono col dito. Senza JavaScript non c'e' il pulsante e
   l'elenco resta semplicemente aperto. */
@media (max-width:900px){
  .rail h3{display:none}
  .js .rail-menu{
    display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:9px 16px;
    background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
    font:inherit; text-align:left; cursor:pointer;
  }
  .rail-menu:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px}
  .rail.menu-aperto .rail-menu{border-color:var(--gold-bright); box-shadow:0 0 0 3px var(--gold-wash)}
  .rail-menu-icona{display:flex; flex-direction:column; gap:4px; width:18px; flex:none}
  .rail-menu-icona i{display:block; height:2px; border-radius:1px; background:currentColor}
  .rail-menu-testo{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
  .rail-menu-testo small{font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); font-weight:700}
  .rail-menu-testo b{font-size:15.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rail-menu .freccia{transform:rotate(45deg); margin-top:-4px; color:var(--ink-3)}
  .rail.menu-aperto .rail-menu .freccia{transform:rotate(-135deg); margin-top:4px}

  .js .rail:not(.menu-aperto) .rail-elenco{display:none}
  .rail-elenco{margin-top:8px; padding:6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
  .rail li{grid-template-columns:minmax(0,1fr) 46px}
  .rail a{min-height:46px; padding:10px 12px; font-size:15px}
  .rail li.figlia > a{font-size:14.5px}
  .rail .freccia{width:9px; height:9px}
  .rail li + li{border-top:1px solid var(--line)}
  .rail .figlie > li:first-child{border-top:1px solid var(--line)}
}

/* La colonna dei reparti scorre per conto suo. Con 27 reparti e' alta
   ~1240px: agganciata allo schermo, quelli in fondo non si raggiungevano
   finche' non finiva la pagina. Solo sopra i 900px, dove e' una colonna
   (sotto diventa la fila orizzontale). --testa e --barra le misura lo
   script accanto alla colonna: la testata va a capo sotto i 1100px (79 ->
   114px) e la barra dell'ordine, fissa in basso, copre il fondo. */
@media (min-width:901px){
  .rail{
    top:calc(var(--testa, 79px) + 23px);
    max-height:calc(100vh - var(--testa, 79px) - var(--barra, 0px) - 39px);
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:8px; margin-right:-8px;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .rail::-webkit-scrollbar{width:6px}
  .rail::-webkit-scrollbar-track{background:transparent}
  .rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
  .rail:hover::-webkit-scrollbar-thumb{background:var(--ink-3)}
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 3px var(--ok-wash)}

.results{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.results h2{font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:27px; letter-spacing:-.01em}
.results p{margin:0; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* schede prodotto */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; transition:border-color .18s, box-shadow .18s, transform .18s}
.card:hover{border-color:var(--ink-3); box-shadow:var(--shadow); transform:translateY(-2px)}
.card.in-order{border-color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--gold-bright)}
.thumb{height:132px; position:relative; display:grid; place-items:center; background:linear-gradient(155deg, var(--chill-wash), var(--surface-2)); border-bottom:1px solid var(--line-soft); overflow:hidden}
.thumb svg{width:52px; height:52px; stroke:var(--gold); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.thumb img{width:100%; height:100%; object-fit:cover}
.temp{position:absolute; top:10px; left:10px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.06em; background:var(--surface); color:var(--chill); border:1px solid var(--line); padding:3px 7px; border-radius:99px; font-variant-numeric:tabular-nums}
.ref{position:absolute; bottom:9px; right:10px; z-index:2; font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); font-weight:600; background:var(--surface); padding:1px 5px; border-radius:2px}
.cardbody{padding:14px; display:flex; flex-direction:column; gap:9px; flex:1}
.cat{font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; color:var(--gold)}
.card h3{font-size:15.5px; font-weight:600; line-height:1.32; letter-spacing:-.005em}
.spec{display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3)}
.spec span{background:var(--surface-2); border:1px solid var(--line-soft); padding:2px 7px; border-radius:var(--radius)}
.stock{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-top:auto}
.stock i{width:6px; height:6px; border-radius:50%; display:inline-block}
.s-ok{color:var(--ok)} .s-ok i{background:var(--ok)}
.s-low{color:var(--warn)} .s-low i{background:var(--warn)}
.s-out{color:var(--crit)} .s-out i{background:var(--crit)}

.pricerow{border-top:1px solid var(--line-soft); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface-2)}
.pricerow form{margin:0}
.price b{font-family:"Bodoni Moda",Georgia,serif; font-size:24px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; display:block; line-height:1.05}
.price small{font-size:11px; color:var(--ink-3); display:block; margin-top:2px}
.locked{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); font-weight:500}
.locked svg{width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:1.7; flex:none}

.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; flex:none}
.stepper button{border:0; background:none; width:32px; height:36px; font-size:17px; color:var(--ink-2); line-height:1}
.stepper button:hover{background:var(--surface-2); color:var(--ink)}
.stepper input[type=number]{width:42px; height:36px; border:0; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); text-align:center; font:inherit; font-weight:600; font-variant-numeric:tabular-nums; background:transparent; color:var(--ink); -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stepper.piccolo button{width:26px; height:30px; font-size:15px}
.stepper.piccolo input[type=number]{width:36px; height:30px}

.addbtn{border:1px solid var(--ink); background:var(--ink); color:var(--surface); border-radius:var(--radius); padding:9px 15px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; display:inline-block}
.addbtn:hover:not(:disabled){background:transparent; color:var(--ink)}
.addbtn:disabled{opacity:.35; cursor:not-allowed}
.empty{grid-column:1/-1; text-align:center; padding:64px 20px; color:var(--ink-3); border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface)}
.empty b{display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:22px; color:var(--ink-2); margin-bottom:6px; font-weight:500}

/* pagine interne */
.titolo{font-family:"Bodoni Moda",Georgia,serif; font-weight:400; font-size:clamp(30px,4vw,44px); line-height:1.08; letter-spacing:-.015em}
.sottotitolo{color:var(--ink-2); font-size:16px; max-width:56ch; margin:14px 0 0}
.sottotitolo a{color:var(--gold); font-weight:600}
.pannello{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:38px 40px}
.pannello.centrato{text-align:center}
.pannello.centrato .eyebrow{justify-content:center}
.pannello.centrato .sottotitolo{margin-left:auto; margin-right:auto}
.nota{font-size:13px; color:var(--ink-3); margin-top:18px}

.modulo{display:flex; flex-direction:column; gap:16px; margin-top:26px; max-width:420px}
.modulo.conferma{max-width:none; margin-top:28px}
.modulo label{display:flex; flex-direction:column; gap:6px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--ink-3)}
.modulo .opz{text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-3)}
.modulo input, .modulo textarea{font:inherit; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); color:var(--ink); text-transform:none; letter-spacing:0}
.modulo textarea{resize:vertical}
.primario{border:1px solid var(--ink); background:var(--ink); color:var(--surface); border-radius:var(--radius); padding:12px 22px; font-size:14.5px; font-weight:600; text-decoration:none; display:inline-block; text-align:center}
.primario:hover{background:transparent; color:var(--ink)}
.azioni{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.azioni.centrate{justify-content:center; margin-top:26px}
.linkbtn{border:0; background:none; color:var(--ink-3); font-size:12.5px; text-decoration:underline; padding:0}
.linkbtn:hover{color:var(--crit)}

/* tabelle */
.tabella{width:100%; border-collapse:collapse; margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tabella th{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:700; text-align:left; padding:12px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.tabella td{padding:13px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tabella tr:last-child td{border-bottom:0}
.tabella .num{text-align:right; font-variant-numeric:tabular-nums}
.tabella th.num{text-align:right}
.tabella .forte{font-weight:600}
.tabella .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.tabella form{margin:0; display:inline-flex}
.tabella .stepper{margin-left:auto}

/* riepilogo ordine */
.riepilogo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:20px; margin-top:22px; align-items:start}
.ricapitolo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:6px 18px}
.ricapitolo div{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-soft); gap:16px}
.ricapitolo div:last-child{border-bottom:0}
.ricapitolo span{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600}
.ricapitolo b{font-variant-numeric:tabular-nums; font-weight:600}
.ricapitolo .grande b{font-family:"Bodoni Moda",Georgia,serif; font-size:26px; color:var(--gold)}
.pagamento{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.pagamento p{margin:12px 0 0; font-size:13.5px; color:var(--ink-2)}
.badge{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.11em; font-weight:700; padding:5px 10px; border-radius:99px; border:1px solid}
.badge.attenzione{background:var(--warn-wash); border-color:var(--warn); color:var(--warn)}
.badge.conto{background:var(--ok-wash); border-color:var(--ok); color:var(--ok)}
.badge.stato0{background:var(--surface-2); border-color:var(--line); color:var(--ink-3)}
.badge.stato1{background:var(--chill-wash); border-color:var(--chill); color:var(--chill)}
.badge.stato2{background:var(--gold-wash); border-color:var(--gold-bright); color:var(--gold)}
.badge.stato3{background:var(--ok-wash); border-color:var(--ok); color:var(--ok)}
.badge.stato-1{background:var(--crit-wash); border-color:var(--crit); color:var(--crit)}

/* barra ordine */
.orderbar{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bar); color:#DDE8EE; border-top:2px solid var(--gold-bright)}
.orderbar .wrap{display:flex; align-items:center; gap:26px; padding:14px 24px; flex-wrap:wrap}
.orderbar form{margin:0}
.ob-lines{font-size:12.5px; color:var(--bar-dim)}
.ob-lines b{display:block; color:#fff; font-size:14px; font-weight:600}
.ob-fig{display:flex; gap:26px; margin-left:auto; align-items:flex-end}
.ob-fig div{text-align:right}
.ob-fig span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--bar-dim); font-weight:600}
.ob-fig b{font-family:"Bodoni Moda",Georgia,serif; font-size:20px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums}
.ob-fig .total b{color:var(--gold-bright); font-size:26px}
.checkout{border:0; background:var(--gold-bright); color:#1A1204; border-radius:var(--radius); padding:13px 24px; font-weight:700; font-size:14.5px; text-decoration:none; display:inline-block}
.checkout:hover{background:#E0B04C}
.ob-clear{border:0; background:none; color:var(--bar-dim); font-size:12.5px; text-decoration:underline; padding:0}
.ob-clear:hover{color:#fff}

/* chiusura */
.foot{background:var(--surface); border-top:1px solid var(--line); padding:34px 0 40px}
.foot .wrap{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; font-size:13px; color:var(--ink-3)}
.foot .colonna.larga{flex:1 1 240px}
.foot b{color:var(--ink); display:block; font-size:12px; text-transform:uppercase; letter-spacing:.13em; margin-bottom:8px}
.foot a{color:var(--ink-2); text-decoration:none; display:block; padding:2px 0}
.foot a:hover{color:var(--gold)}
.foot .mark{font-size:28px}
.foot p{margin:8px 0 12px; max-width:34ch}
.pill{border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-size:11.5px; color:var(--ink-2); display:inline-block}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .herostats{border-left:0; border-top:1px solid var(--line); padding-top:20px}
  .herostats div:first-child{padding-left:0}
  .shop{grid-template-columns:1fr; gap:22px}
  .rail{position:static}
  .railnote{display:none}
  .masthead .wrap{padding-top:12px; padding-bottom:12px; flex-wrap:wrap; gap:12px}
  .searchbar{order:3; flex-basis:100%; max-width:none}
  .riepilogo{grid-template-columns:1fr}
  .pannello{padding:26px 22px}
  .tabella{display:block; overflow-x:auto}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- navigazione principale ---------- */
.mainnav{display:flex; gap:20px; flex:none}
.mainnav a{text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2); padding:4px 0; border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--ink); border-bottom-color:var(--gold-bright)}

/* ---------- pagine editoriali ---------- */
.editoriale{padding-bottom:20px}
.editoriale h2{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:26px;
  letter-spacing:-.01em; margin:38px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
.editoriale p{margin:0 0 15px; max-width:66ch; color:var(--ink-2); font-size:15.5px}
.editoriale ul, .editoriale ol{margin:0 0 15px; padding-left:22px; max-width:66ch; color:var(--ink-2)}
.editoriale li{margin-bottom:9px}
.editoriale b{color:var(--ink)}
.editoriale a{color:var(--gold); font-weight:600}
.editoriale blockquote{
  margin:26px 0; padding:2px 0 2px 22px; border-left:2px solid var(--gold-bright);
  font-family:"Bodoni Moda",Georgia,serif; font-style:italic; font-size:21px;
  line-height:1.4; color:var(--ink); max-width:44ch;
}
.sottotitolo.grande{font-size:19px; max-width:62ch; line-height:1.5}
.min{font-size:13px; color:var(--ink-3)}

.pilastri{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin:22px 0 8px}
.pilastri > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.pilastri b{display:block; font-size:15px; margin-bottom:8px; color:var(--ink)}
.pilastri p{margin:0; font-size:14px}

.passi{list-style:none; padding:0; counter-reset:passo; max-width:none}
.passi li{counter-increment:passo; position:relative; padding-left:52px; margin-bottom:20px}
.passi li::before{
  content:counter(passo); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold); border:1px solid var(--gold-bright);
  font-family:"Bodoni Moda",Georgia,serif; font-size:17px; font-weight:600;
}
.passi b{display:block; margin-bottom:5px; font-size:15.5px}
.passi p{margin:0; font-size:14.5px}

.contatti{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin:24px 0 8px}
.contatti > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.contatti b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3); margin-bottom:8px; font-weight:700}
.contatti p{margin:0; font-size:15px; color:var(--ink); line-height:1.55}
.contatti a{color:var(--gold); font-weight:600; text-decoration:none}
.contatti a:hover{text-decoration:underline}

/* ---------- varie ---------- */
.avviso.nota{background:var(--gold-wash); border-color:var(--gold-bright); color:var(--gold)}
.tabellabox{overflow-x:auto; margin-top:26px}
.tabellabox .tabella{margin-top:0; min-width:620px}
.editoriale .azioni{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}

@media (max-width:1100px){ .mainnav{display:none} }

/* ---------- banner promozionale ---------- */
.promo{border-bottom:1px solid var(--line)}
.promo .wrap{display:flex; align-items:center; gap:20px; padding:13px 24px; flex-wrap:wrap}
.promo-testo{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; flex:1}
.promo-testo b{font-size:15px; font-weight:700; letter-spacing:-.005em}
.promo-testo span{font-size:14px; opacity:.85}
.promo-btn{
  flex:none; text-decoration:none; font-size:13.5px; font-weight:700;
  padding:8px 16px; border-radius:var(--radius); border:1px solid currentColor;
}
.promo-btn:hover{background:currentColor}
.promo-btn:hover{color:var(--surface)}

.promo-oro{background:var(--gold-wash); color:var(--gold); border-bottom-color:var(--gold-bright)}
.promo-oro .promo-testo b{color:var(--ink)}
.promo-freddo{background:var(--chill-wash); color:var(--chill); border-bottom-color:var(--chill)}
.promo-freddo .promo-testo b{color:var(--ink)}
.promo-avviso{background:var(--warn-wash); color:var(--warn); border-bottom-color:var(--warn)}
.promo-avviso .promo-testo b{color:var(--ink)}

/* ---------- conto sospeso ---------- */
.blocco{
  margin-top:18px; background:var(--crit-wash); border:1px solid var(--crit);
  border-radius:var(--radius); padding:18px 20px;
}
.blocco-testa{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.blocco-testa svg{width:20px; height:20px; stroke:var(--crit); fill:none; stroke-width:1.8; stroke-linejoin:round; flex:none}
.blocco-testa b{font-size:15.5px; color:var(--crit)}
.blocco p{margin:0; color:var(--ink-2); font-size:14.5px; max-width:74ch}
.blocco-fatture{margin:12px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.blocco-fatture li{margin-bottom:4px}
.blocco-fatture b{color:var(--ink)}

.ricapitolo .omaggio{color:var(--ok)}
.primario:disabled{opacity:.4; cursor:not-allowed; background:var(--ink); color:var(--surface)}

/* ---------- gestione del team ---------- */
.sottotitolo-forte{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:22px;
  letter-spacing:-.01em; margin:0 0 4px; color:var(--ink);
  text-transform:none; letter-spacing:normal;
}
.tabella .nowrap{white-space:nowrap}
.tabella .nowrap form{display:inline-block; margin-left:8px}
.tabella .sub{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.ghostbtn.piccolo{padding:5px 10px; font-size:12.5px}
.riga-password td{background:var(--surface-2); padding-top:8px; padding-bottom:8px}
.linea{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0}
.linea .min{font-size:12.5px; color:var(--ink-3)}
.linea input[type=password]{
  font:inherit; padding:7px 11px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); color:var(--ink);
  min-width:260px; flex:1;
}

/* ---------- offerte a pacchetto ---------- */
.offerte{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.offerta{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--surface)}
.offerta-testa{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.offerta-testa svg{width:18px; height:18px; stroke:var(--ok); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.offerta-testa b{font-size:15.5px; color:var(--ink)}
.offerta-valore{
  margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px;
}
.offerta p{margin:8px 0 0; font-size:14px; color:var(--ink-2)}

.offerta.presa{border-color:var(--ok); background:var(--ok-wash)}
.offerta.presa .offerta-valore{background:var(--ok); color:var(--surface)}
.offerta.vicina{border-color:var(--gold-bright); background:var(--gold-wash)}
.offerta.vicina .offerta-valore{background:var(--gold-bright); color:#1A1204}

.mancanti{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.mancanti li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px 12px; font-size:14px;
}
.mancanti form{margin:0}

/* ---------- prodotti suggeriti ---------- */
.suggeriti{margin-top:44px; padding-top:30px; border-top:1px solid var(--line)}
.suggeriti h2{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:24px;
  letter-spacing:-.01em; margin-bottom:18px;
}
.suggeriti .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.suggeriti .thumb{height:110px}

/* ---------- venduto sfuso ---------- */
.sfuso-chip{
  align-self:flex-start; font-size:10px; text-transform:uppercase;
  letter-spacing:.12em; font-weight:700; color:var(--chill);
  background:var(--chill-wash); border:1px solid var(--chill);
  padding:3px 8px; border-radius:99px;
}
.da-aprire{font-weight:400; color:var(--ink-3); font-size:11.5px}

/* ---------- tracking della consegna ---------- */
.traccia-link{
  display:inline-block; margin-left:8px; font-size:12px; font-weight:700;
  color:var(--gold); text-decoration:none; border-bottom:1px solid currentColor;
}
.traccia-link:hover{color:var(--ink)}

.tracciamento{
  margin-top:28px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px;
}
.traccia-cifre{display:flex; gap:44px; flex-wrap:wrap; align-items:flex-end}
.traccia-cifre span{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; color:var(--ink-3); margin-bottom:4px;
}
.traccia-cifre b{
  font-family:"Bodoni Moda",Georgia,serif; font-size:44px; font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums;
}
.traccia-cifre .grande b{color:var(--gold); font-size:56px}
.traccia-cifre small{font-size:18px; font-weight:400; color:var(--ink-3)}

/* La fila di fermate che restano prima della tua. */
.fermate{display:flex; align-items:center; gap:10px; margin:26px 0 18px}
.fermate span{height:10px; border-radius:99px; flex:1}
.fermate .passata{background:var(--line)}
.fermate .da-fare{background:var(--chill)}
.fermate .tua{
  flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--gold-bright); border:3px solid var(--surface);
  box-shadow:0 0 0 2px var(--gold-bright);
}
.traccia-nota{margin:0; color:var(--ink-2); font-size:15px}
.traccia-nota .min{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-3)}

/* ---------- temi stagionali ----------
   Cambiano solo la tinta di accento e il velo dell apertura. L impianto,
   la leggibilita e il contrasto restano quelli: un tema non deve mai
   rendere piu difficile leggere un prezzo. */

body.tema-natale{
  --gold:#8C1F28; --gold-bright:#B8323C; --gold-wash:#F7E9EA;
  --chill:#1F5F3F; --chill-wash:#E6F1EA;
}
@media (prefers-color-scheme: dark){
  body.tema-natale{
    --gold:#E27078; --gold-bright:#F09098; --gold-wash:#2A1215;
    --chill:#6FC095; --chill-wash:#10241A;
  }
}

body.tema-pasqua{
  --gold:#7A6410; --gold-bright:#C2A62E; --gold-wash:#F8F3DC;
  --chill:#4A7C9B; --chill-wash:#E8F1F6;
}
@media (prefers-color-scheme: dark){
  body.tema-pasqua{
    --gold:#D9C05A; --gold-bright:#EBD87C; --gold-wash:#241F0B;
    --chill:#78B6D6; --chill-wash:#12242D;
  }
}

body.tema-primavera{
  --gold:#5C7A18; --gold-bright:#86A82F; --gold-wash:#F0F5E2;
  --chill:#2E8B84; --chill-wash:#E3F2F0;
}
@media (prefers-color-scheme: dark){
  body.tema-primavera{
    --gold:#A8C860; --gold-bright:#C2DC83; --gold-wash:#1A2109;
    --chill:#5FBDB4; --chill-wash:#0E2523;
  }
}

body.tema-estate{
  --gold:#9A6410; --gold-bright:#D89A2C; --gold-wash:#FBF1DE;
  --chill:#1B7FA8; --chill-wash:#E2F1F7;
}
@media (prefers-color-scheme: dark){
  body.tema-estate{
    --gold:#EAB554; --gold-bright:#F5CC79; --gold-wash:#251A08;
    --chill:#67C2E2; --chill-wash:#0F2831;
  }
}

body.tema-autunno{
  --gold:#8A4A12; --gold-bright:#C0762A; --gold-wash:#F8EEE1;
  --chill:#6B5A2E; --chill-wash:#F0ECE0;
}
@media (prefers-color-scheme: dark){
  body.tema-autunno{
    --gold:#DC9A55; --gold-bright:#EDB579; --gold-wash:#26170A;
    --chill:#BFAA72; --chill-wash:#221E12;
  }
}

body.tema-inverno{
  --gold:#4A6B84; --gold-bright:#6E93AF; --gold-wash:#ECF2F6;
  --chill:#2A6E8C; --chill-wash:#E3F0F5;
}
@media (prefers-color-scheme: dark){
  body.tema-inverno{
    --gold:#8FB4CE; --gold-bright:#AFCCE0; --gold-wash:#131E26;
    --chill:#63B8D6; --chill-wash:#102630;
  }
}


/* ================= scenografie stagionali =================
   Tutto qui dentro e decorazione: nessuna immagine da scaricare, nessuno
   script, nessun elemento cliccabile. Tre livelli <i> dentro .stagione,
   piu i due pseudo-elementi del contenitore.

   Il trucco della caduta infinita: ogni livello ha un motivo che si
   ripete, e si sposta di ESATTAMENTE una piastrella. A fine ciclo il
   disegno coincide con quello di partenza, quindi il salto non si vede.
   Se la traslazione non fosse un multiplo esatto della piastrella si
   noterebbe uno scatto a ogni giro. Per questo il livello e piu grande
   dell hero di una piastrella su ogni lato d ingresso: mentre scende
   deve continuare a coprire la scena.

   Regole che non si violano:
   - non si passa mai davanti a un prezzo o a un pulsante: la scena vive
     nell hero e non intercetta il puntatore;
   - chi ha chiesto meno animazioni non vede muoversi niente;
   - su telefono la scena si assottiglia invece di accumularsi.        */

.stagione{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  z-index:0; contain:paint;
}
.stagione i{position:absolute; display:block; will-change:transform; background-repeat:repeat}
.hero .wrap{position:relative; z-index:2}

body[class*="tema-"] .stagione::before,
body[class*="tema-"] .stagione::after{content:""}

/* ---------- NATALE ----------
   Neve su tre piani, ghirlanda di luci appesa al bordo alto, ramo di pino
   nell angolo e un orlo di neve posata in fondo. */

body.tema-natale .stagione i{animation:nevica linear infinite}

/* lontani: piccoli, fitti, lenti */
body.tema-natale .stagione i:nth-child(1){
  top:-300px; left:0; right:0; bottom:0;
  background-image:
    radial-gradient(2px 2px at 12% 18%,  var(--neve) 50%, transparent 51%),
    radial-gradient(2px 2px at 47% 62%,  var(--neve) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 33%,  var(--neve) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 88%, var(--neve) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 76%, var(--neve) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 8%,  var(--neve) 50%, transparent 51%);
  background-size:340px 300px;
  animation-duration:24s;
}
/* medi */
body.tema-natale .stagione i:nth-child(2){
  top:-240px; left:0; right:0; bottom:0;
  background-image:
    radial-gradient(3px 3px at 22% 40%, var(--neve) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 66% 12%, var(--neve) 50%, transparent 51%),
    radial-gradient(3px 3px at 90% 58%, var(--neve) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 40% 84%, var(--neve) 50%, transparent 51%);
  background-size:280px 240px;
  animation-duration:15s;
  opacity:.85;
}
/* vicini: grandi, radi, veloci, appena sfocati */
body.tema-natale .stagione i:nth-child(3){
  top:-340px; left:0; right:0; bottom:0;
  background-image:
    radial-gradient(4.5px 4.5px at 35% 25%, var(--neve) 50%, transparent 51%),
    radial-gradient(4px 4px at 75% 70%, var(--neve) 50%, transparent 51%),
    radial-gradient(4px 4px at 8% 52%, var(--neve) 50%, transparent 51%);
  background-size:420px 340px;
  animation-duration:9s;
  opacity:.65;
  filter:blur(.5px);
}
/* Ogni livello scende di una piastrella esatta: 300, 240, 340. */
body.tema-natale .stagione i:nth-child(1){--passo:300px}
body.tema-natale .stagione i:nth-child(2){--passo:240px}
body.tema-natale .stagione i:nth-child(3){--passo:340px}
@keyframes nevica{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,var(--passo),0)}
}

/* Ghirlanda: un festone appeso sotto la testata. Il filo scende in due
   archi e le lampadine stanno sui punti bassi della curva, ciascuna col
   suo attacco. A strisce di gradiente sembrava un codice a barre: qui e
   un disegno solo che si ripete ogni 160px, con l alone gia sfocato
   dentro l SVG (un filtro applicato a una copia delle lampadine, sotto
   quelle nitide). L intero festone pulsa piano, come le luci vere. */
body.tema-natale .stagione::before{
  position:absolute; left:0; right:0; top:0; height:30px;
  background:repeat-x left top/160px 30px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30' viewBox='0 0 160 30'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cg id='b'%3E%3Ccircle cx='20' cy='16' r='3.2' fill='%23D9434F'/%3E%3Ccircle cx='40' cy='18' r='3.2' fill='%23E8B44C'/%3E%3Ccircle cx='60' cy='16' r='3.2' fill='%233E9A68'/%3E%3Ccircle cx='100' cy='16' r='3.2' fill='%23E8B44C'/%3E%3Ccircle cx='120' cy='18' r='3.2' fill='%23D9434F'/%3E%3Ccircle cx='140' cy='16' r='3.2' fill='%233E9A68'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23b' filter='url(%23g)' opacity='.9'/%3E%3Cpath d='M0 3Q40 19 80 3 120 19 160 3' fill='none' stroke='%232E4A3C' stroke-width='1.6'/%3E%3Cpath d='M20 10v3M40 12v3M60 10v3M100 10v3M120 12v3M140 10v3' stroke='%232E4A3C' stroke-width='1.4'/%3E%3Cuse href='%23b'/%3E%3C/svg%3E");
  animation:respiro 5s ease-in-out infinite;
}
@keyframes respiro{0%,100%{opacity:.72} 50%{opacity:1}}

/* Ramo di pino, appena accennato nell angolo. */
body.tema-natale .stagione::after{
  position:absolute; right:-26px; bottom:-30px;
  width:300px; height:220px;
  background:no-repeat right bottom/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpath fill='%231F5F3F' d='M300 148c-26-4-52-2-78 6 18-16 30-36 36-58-26 14-50 32-70 54 8-24 10-49 6-74-20 22-34 48-42 76-4-26-14-50-30-70-4 30 0 60 12 88-18-16-40-27-63-32 14 24 34 44 58 57-22-2-44 2-64 12 26 12 54 17 82 15-16 8-30 20-40 35 30-4 58-16 82-34 14 12 30 21 48 26-8-16-12-33-13-50 24 4 50 2 76-6z'/%3E%3C/svg%3E");
  opacity:.13;
}

/* Cielo di giornata invernale sopra, neve posata sotto. Due toni: il
   verde del pino in alto che sfuma nel grigio-azzurro del cielo, cosi in
   tema chiaro i fiocchi hanno qualcosa su cui staccare. Su bianco puro
   non si vedevano. */
body.tema-natale .hero{
  background:
    linear-gradient(180deg, var(--cielo) 0%, var(--cielo2) 38%, transparent 74%),
    var(--surface);
}
body.tema-natale .hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px;
  z-index:1; pointer-events:none;
  background:radial-gradient(16px 11px at 50% 100%, var(--neve-orlo) 62%, transparent 63%) repeat-x 0 100%/44px 14px;
}

body.tema-natale{
  --neve:rgba(92,134,172,.72);
  --neve-orlo:rgba(198,220,235,.85);
  --cielo:rgba(31,95,63,.09);
  --cielo2:rgba(74,107,132,.10);
  --luce-a:rgba(184,50,60,.8);
  --luce-b:rgba(212,160,60,.8);
}
@media (prefers-color-scheme: dark){
  body.tema-natale{
    --neve:rgba(226,240,250,.72);
    --neve-orlo:rgba(148,184,210,.3);
    --cielo:rgba(111,192,149,.10);
    --cielo2:rgba(143,180,206,.07);
    --luce-a:rgba(240,144,152,.9);
    --luce-b:rgba(240,200,110,.9);
  }
  body.tema-natale .stagione::after{opacity:.2}
}

/* ---------- AUTUNNO ----------
   Foglie che scendono di sbieco. Ogni livello e una piastrella unica con
   dentro due o tre foglie gia inclinate ad angoli diversi: cadono insieme
   senza sembrare un timbro ripetuto. Le piastrelle sono larghe apposta
   (600-900px): con piastrelle piccole si riempiva lo schermo di foglie e
   sembrava carta da parati, non vento. Piu alte che larghe, cosi lo
   scarto laterale resta dolce, intorno ai 25 gradi.
   La foglia ha nervatura e picciolo: senza, a 20px sembra un seme. */

body.tema-autunno .stagione i{animation:cadono linear infinite}

body.tema-autunno .stagione i:nth-child(1){
  top:-900px; left:-620px; right:0; bottom:0;
  --passo-x:620px; --passo-y:900px;
  background-size:620px 900px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='900' viewBox='0 0 620 900'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M0-13C-9-6-9 7 0 13 9 7 9-6 0-13Z'/%3E%3Cpath d='M0-9V17' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23C0762A' stroke='%238A4A12'%3E%3Cuse href='%23f' transform='translate(82 118) rotate(26) scale(1)'/%3E%3C/g%3E%3Cg fill='%23A8571C' stroke='%236B3410'%3E%3Cuse href='%23f' transform='translate(430 392) rotate(-42) scale(.85)'/%3E%3C/g%3E%3Cg fill='%23B58A2E' stroke='%237E5C16'%3E%3Cuse href='%23f' transform='translate(236 706) rotate(68) scale(.8)'/%3E%3C/g%3E%3C/svg%3E");
  animation-duration:22s;
  opacity:.75;
}
body.tema-autunno .stagione i:nth-child(2){
  top:-760px; left:-520px; right:0; bottom:0;
  --passo-x:520px; --passo-y:760px;
  background-size:520px 760px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='760' viewBox='0 0 520 760'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M0-13C-9-6-9 7 0 13 9 7 9-6 0-13Z'/%3E%3Cpath d='M0-9V17' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%239C3F14' stroke='%235E2409'%3E%3Cuse href='%23f' transform='translate(154 196) rotate(-16) scale(1.25)'/%3E%3C/g%3E%3Cg fill='%23CE8B33' stroke='%238A4A12'%3E%3Cuse href='%23f' transform='translate(392 566) rotate(54) scale(1.05)'/%3E%3C/g%3E%3C/svg%3E");
  animation-duration:15s;
  opacity:.85;
}
body.tema-autunno .stagione i:nth-child(3){
  top:-640px; left:-440px; right:0; bottom:0;
  --passo-x:440px; --passo-y:640px;
  background-size:440px 640px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='640' viewBox='0 0 440 640'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M0-13C-9-6-9 7 0 13 9 7 9-6 0-13Z'/%3E%3Cpath d='M0-9V17' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23B4571B' stroke='%23673008'%3E%3Cuse href='%23f' transform='translate(268 300) rotate(10) scale(1.7)'/%3E%3C/g%3E%3C/svg%3E");
  animation-duration:10s;
  opacity:.6;
  filter:blur(.5px);
}
@keyframes cadono{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--passo-x),var(--passo-y),0)}
}

/* Luce bassa da destra, ramo spoglio in alto a sinistra, foglie posate. */
body.tema-autunno .hero{
  background:radial-gradient(680px 300px at 96% 0%, var(--luce-obliqua), transparent 68%), var(--surface);
}
body.tema-autunno .stagione::before{
  position:absolute; left:0; right:0; bottom:0; height:30px;
  background:repeat-x left bottom/240px 30px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30' viewBox='0 0 240 30'%3E%3Cg fill='%238A4A12'%3E%3Cellipse cx='24' cy='27' rx='15' ry='6' transform='rotate(-12 24 27)'/%3E%3Cellipse cx='68' cy='29' rx='12' ry='5' transform='rotate(20 68 29)'/%3E%3Cellipse cx='118' cy='26' rx='16' ry='6' transform='rotate(-6 118 26)'/%3E%3Cellipse cx='168' cy='29' rx='11' ry='5' transform='rotate(34 168 29)'/%3E%3Cellipse cx='214' cy='27' rx='14' ry='6' transform='rotate(-22 214 27)'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.4;
}
body.tema-autunno .stagione::after{
  position:absolute; left:-40px; top:-50px; width:280px; height:190px;
  background:no-repeat left top/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 190'%3E%3Cg stroke='%236B3410' stroke-width='5' fill='none' stroke-linecap='round'%3E%3Cpath d='M-10 8c40 22 74 30 120 26'/%3E%3Cpath d='M42 20c8 20 14 32 26 42'/%3E%3Cpath d='M86 30c4 22 2 36-4 50'/%3E%3Cpath d='M118 33c14 14 24 20 40 24'/%3E%3C/g%3E%3Cg fill='%23C0762A'%3E%3Cellipse cx='70' cy='66' rx='9' ry='5' transform='rotate(58 70 66)'/%3E%3Cellipse cx='84' cy='84' rx='8' ry='4.5' transform='rotate(72 84 84)'/%3E%3Cellipse cx='160' cy='60' rx='9' ry='5' transform='rotate(24 160 60)'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.18;
}

body.tema-autunno{ --luce-obliqua:rgba(192,118,42,.14) }
@media (prefers-color-scheme: dark){
  body.tema-autunno{ --luce-obliqua:rgba(220,154,85,.12) }
  body.tema-autunno .stagione::after{opacity:.24}
  body.tema-autunno .stagione::before{opacity:.28}
}

/* ---------- INVERNO ----------
   Non e Natale: niente che cade, solo brina agli angoli e luce fredda.
   Serve a distinguerli quando il calendario passa il 6 gennaio. */
body.tema-inverno .hero{
  background:linear-gradient(180deg, var(--gelo-cielo) 0%, transparent 55%), var(--surface);
}
body.tema-inverno .stagione::before,
body.tema-inverno .stagione::after{
  position:absolute; opacity:.15;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%234A6B84' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M50 6v88M11 28l78 44M89 28L11 72'/%3E%3Cpath d='M50 20l-9-9M50 20l9-9M50 80l-9 9M50 80l9 9'/%3E%3Cpath d='M26 34l-12-2M26 34l-2-12M74 66l12 2M74 66l2 12'/%3E%3Cpath d='M74 34l12-2M74 34l2-12M26 66l-12 2M26 66l-2 12'/%3E%3C/g%3E%3C/svg%3E");
}
body.tema-inverno .stagione::before{left:-70px; top:-80px; width:260px; height:260px; transform:rotate(-12deg)}
body.tema-inverno .stagione::after{right:-70px; bottom:-80px; width:200px; height:200px; transform:rotate(18deg)}
body.tema-inverno{ --gelo-cielo:rgba(74,107,132,.08) }
@media (prefers-color-scheme: dark){
  body.tema-inverno{ --gelo-cielo:rgba(143,180,206,.09) }
  body.tema-inverno .stagione::before,
  body.tema-inverno .stagione::after{opacity:.2}
}

/* ---------- PRIMAVERA: petali portati verso l alto ---------- */
body.tema-primavera .stagione i:nth-child(3){display:none}
body.tema-primavera .stagione i{animation:volano linear infinite}
body.tema-primavera .stagione i:nth-child(1){
  top:0; left:-300px; right:0; bottom:-520px;
  --passo-x:300px; --passo-y:-520px;
  background-size:300px 520px;
  background-image:
    radial-gradient(5px 3px at 14% 12%, var(--petalo-a) 60%, transparent 61%),
    radial-gradient(4px 2.5px at 68% 46%, var(--petalo-b) 60%, transparent 61%),
    radial-gradient(4px 2.5px at 34% 78%, var(--petalo-a) 60%, transparent 61%);
  animation-duration:19s; opacity:.75;
}
body.tema-primavera .stagione i:nth-child(2){
  top:0; left:-260px; right:0; bottom:-460px;
  --passo-x:260px; --passo-y:-460px;
  background-size:260px 460px;
  background-image:
    radial-gradient(6px 3.5px at 46% 22%, var(--petalo-b) 60%, transparent 61%),
    radial-gradient(5px 3px at 12% 66%, var(--petalo-a) 60%, transparent 61%);
  animation-duration:13s; opacity:.6;
}
@keyframes volano{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--passo-x),var(--passo-y),0)}
}
body.tema-primavera .hero{
  background:radial-gradient(620px 280px at 8% 0%, var(--verde-nuovo), transparent 66%), var(--surface);
}
body.tema-primavera .stagione::before{
  position:absolute; right:-20px; top:-36px; width:240px; height:180px;
  background:no-repeat right top/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Cg stroke='%235C7A18' stroke-width='4' fill='none' stroke-linecap='round'%3E%3Cpath d='M250 6c-44 16-80 26-124 28'/%3E%3Cpath d='M196 16c-2 18-6 30-14 42'/%3E%3Cpath d='M154 28c2 20 0 32-6 44'/%3E%3C/g%3E%3Cg fill='%2386A82F'%3E%3Cellipse cx='182' cy='58' rx='8' ry='4' transform='rotate(64 182 58)'/%3E%3Cellipse cx='148' cy='72' rx='7' ry='3.5' transform='rotate(78 148 72)'/%3E%3Cellipse cx='214' cy='34' rx='8' ry='4' transform='rotate(40 214 34)'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.3;
}
body.tema-primavera .stagione::after{display:none}
body.tema-primavera{
  --petalo-a:rgba(222,146,170,.85); --petalo-b:rgba(160,198,96,.8);
  --verde-nuovo:rgba(92,122,24,.1);
}
@media (prefers-color-scheme: dark){
  body.tema-primavera{
    --petalo-a:rgba(238,190,205,.5); --petalo-b:rgba(190,220,140,.5);
    --verde-nuovo:rgba(168,200,96,.1);
  }
}

/* ---------- ESTATE: si aggiunge luce, non materia ---------- */
body.tema-estate .stagione i{display:none}
body.tema-estate .hero{
  background:
    radial-gradient(520px 360px at 92% -20%, var(--sole), transparent 62%),
    radial-gradient(900px 300px at 20% 120%, var(--riverbero), transparent 70%),
    var(--surface);
}
body.tema-estate .stagione::before{
  position:absolute; right:4%; top:-110px; width:320px; height:320px;
  background:conic-gradient(from 0deg, transparent 0 7deg, var(--raggio) 7deg 10deg, transparent 10deg 30deg);
  opacity:.75;
  animation:gira 100s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
body.tema-estate .stagione::after{display:none}
body.tema-estate{
  --sole:rgba(216,154,44,.16); --riverbero:rgba(27,127,168,.08);
  --raggio:rgba(216,154,44,.26);
}
@media (prefers-color-scheme: dark){
  body.tema-estate{
    --sole:rgba(234,181,84,.13); --riverbero:rgba(103,194,226,.07);
    --raggio:rgba(234,181,84,.11);
  }
}

/* ---------- PASQUA: pastelli e un accenno di prato ---------- */
body.tema-pasqua .stagione i{display:none}
body.tema-pasqua .hero{
  background:linear-gradient(180deg, var(--pastello) 0%, transparent 58%), var(--surface);
}
body.tema-pasqua .stagione::before{
  position:absolute; left:0; right:0; bottom:0; height:20px;
  background:repeating-linear-gradient(90deg,
    transparent 0 18px, var(--filo-erba) 18px 20px, transparent 20px 34px);
  opacity:.4;
  -webkit-mask-image:linear-gradient(0deg, #000, transparent);
  mask-image:linear-gradient(0deg, #000, transparent);
}
/* Tre uova appoggiate nel prato, nell angolo in basso a destra. Prima
   stavano sotto ai numeri dell hero e sembravano una macchia: qui sono
   piu piccole, spinte nell angolo e con il contorno, cosi si capisce
   cosa sono. */
body.tema-pasqua .stagione::after{
  position:absolute; right:18px; bottom:0; width:112px; height:64px;
  background:no-repeat right bottom/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 64'%3E%3Cg stroke='%237A6410' stroke-width='1.4'%3E%3Cellipse cx='26' cy='42' rx='14' ry='19' fill='%23E8D9A0'/%3E%3Cellipse cx='57' cy='47' rx='12' ry='16' fill='%23AFC9DA' stroke='%234A7C9B'/%3E%3Cellipse cx='86' cy='44' rx='13' ry='18' fill='%23E3C6A8' stroke='%238A6A45'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.7;
}
body.tema-pasqua{
  --pastello:rgba(194,166,46,.08); --filo-erba:rgba(92,122,24,.5);
}
@media (prefers-color-scheme: dark){
  body.tema-pasqua{
    --pastello:rgba(217,192,90,.08); --filo-erba:rgba(168,200,96,.4);
  }
}

/* ---------- il filo che lega le pagine interne ----------
   L hero c e solo sul catalogo. Perche il tema non sparisca altrove, il
   bordo basso della testata prende il segno della stagione: pochi pixel,
   uguali su tutte le pagine. */
body[class*="tema-"] .masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  pointer-events:none;
}
body.tema-natale .masthead::after{
  height:2px; opacity:.85;
  background:repeating-linear-gradient(90deg,
    var(--luce-a) 0 10px, transparent 10px 22px,
    var(--luce-b) 22px 32px, transparent 32px 46px);
}
body.tema-autunno .masthead::after{
  background:linear-gradient(90deg,#8A4A12,#C0762A 30%,#B58A2E 60%,#8A4A12); opacity:.55;
}
body.tema-inverno .masthead::after{
  background:linear-gradient(90deg,transparent,#6E93AF 40%,#AFCCE0 60%,transparent); opacity:.6;
}
body.tema-primavera .masthead::after{
  background:linear-gradient(90deg,#5C7A18,#86A82F 50%,#2E8B84); opacity:.5;
}
body.tema-estate .masthead::after{
  background:linear-gradient(90deg,#D89A2C,#1B7FA8); opacity:.5;
}
body.tema-pasqua .masthead::after{
  background:repeating-linear-gradient(90deg,#C2A62E 0 14px,#4A7C9B 14px 28px); opacity:.45;
}

/* ---------- misura e rispetto ---------- */

/* Su schermo stretto: meno strati, scena piu rada, via le scenografie
   d angolo. Un telefono ha meno pixel e meno batteria. */
@media (max-width:760px){
  .stagione i:nth-child(3){display:none}
  body.tema-autunno .stagione i{opacity:.5}
  body.tema-natale .stagione::after,
  body.tema-autunno .stagione::after,
  body.tema-inverno .stagione::before,
  body.tema-primavera .stagione::before{display:none}
  body.tema-estate .stagione::before{width:200px; height:200px; top:-70px}
}

/* Chi ha chiesto meno animazioni non vede muoversi niente: spariscono i
   livelli che esistono solo per il movimento, restano le scene ferme. */
@media (prefers-reduced-motion: reduce){
  .stagione i{display:none}
}

/* ---------- paginazione ---------- */
.pagine{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:34px 0 0; flex-wrap:wrap;
}
.pagine a, .pagine span{
  min-width:40px; text-align:center; padding:9px 12px; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2); text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.pagine a:hover{border-color:var(--ink-3); color:var(--ink)}
.pagine .qui{background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:700}
.pagine .salto{border:0; background:none; color:var(--ink-3); min-width:20px; padding:9px 2px}

/* ═══════════════════════════════════════════════════════════════════════
   TELEFONO E TABLET
   Chi ordina lo fa spesso col telefono in mano, in cucina, di fretta e
   magari con le mani fredde. Qui si sistemano le cose che a schermo
   grande non si notano e su un telefono danno fastidio ogni volta.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:1100px){
  /* La navigazione non deve sparire: senza, per arrivare a Contatti
     bisogna scorrere fino in fondo alla pagina. Diventa una riga che
     scorre di lato.

     E la testata deve andare a capo gia da qui, non da 900px: la riga
     sotto chiede alla navigazione di occupare tutta la larghezza, e in
     una fila che non va a capo un elemento largo il 100% non ci sta.
     Fra 901 e 1100 pixel sfondava, e a sfondare non era la navigazione
     soltanto: si portava dietro l'intera pagina, che scorreva di lato. */
  .masthead .wrap{flex-wrap:wrap}
  .mainnav{
    display:flex; order:4; flex-basis:100%; margin:0 -20px;
    padding:0 20px 2px; gap:20px; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{white-space:nowrap; padding:8px 0}
}

@media (max-width:760px){
  /* Su 375px, 24px di margine per lato sono 48px buttati. */
  .wrap{padding:0 16px}
  .orderbar .wrap, .promo .wrap, .utility .wrap{padding-left:16px; padding-right:16px}

  /* Un campo sotto i 16px fa ingrandire la pagina da solo su iPhone,
     e poi tocca al dito rimetterla a posto. */
  input[type=search], input[type=text], input[type=email],
  input[type=password], input[type=number], input[type=date],
  textarea, select{font-size:16px}

  /* Bersagli tattili: 44px e la misura sotto la quale si sbaglia. */
  .stepper button{width:44px; height:44px; font-size:20px}
  .stepper input[type=number]{width:52px; height:44px}
  .stepper.piccolo button{width:38px; height:38px; font-size:17px}
  .stepper.piccolo input[type=number]{width:44px; height:38px}
  .addbtn, .ghostbtn, .primario, .checkout{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
  .linkbtn{padding:8px 0; min-height:32px}

  /* La testata fissa mangia troppo schermo quando va a capo:
     resta in alto solo la riga del marchio. */
  /* Non piu sticky, ma serve un ancoraggio: la striscia stagionale e un
     ::after in posizione assoluta, e senza questo si stacca e finisce a
     meta pagina. */
  .masthead{position:relative}
  .rail{position:static}

  /* Spazio sotto: la barra ordine e fissa e su due righe diventa alta. */
  .shop{padding-bottom:170px}
  .wrap.stretta{padding-bottom:150px}

  /* L apertura si compatta: il titolo grande su tre righe e i numeri
     sotto occupano tutta la prima schermata senza dire niente. */
  .hero{padding:32px 0 28px}
  .hero .wrap{gap:24px}
  .herostats{padding-top:16px}
  .herostats div{padding:0 18px}
  .herostats div:first-child{padding-left:0}
  .herostats b{font-size:26px}

  /* Due schede per riga anche su schermo stretto: scorrere 48 prodotti
     uno sotto l altro e una passeggiata troppo lunga. */
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .thumb{height:104px}
  .card h3{font-size:14px}
  .cardbody{padding:11px; gap:7px}
  .pricerow{padding:10px 11px; flex-wrap:wrap; gap:8px}
  .price b{font-size:20px}
  .spec{font-size:11px}

  /* La barra ordine su telefono: i numeri contano piu delle etichette. */
  .orderbar .wrap{gap:12px; padding-top:10px; padding-bottom:10px}
  .ob-fig{gap:16px; width:100%; justify-content:space-between}
  .ob-fig b{font-size:17px}
  .ob-fig .total b{font-size:21px}
  .checkout{width:100%; text-align:center}
  .ob-lines{flex:1}

  .titolo{font-size:28px}
  .riepilogo{gap:14px}
  .traccia-cifre{gap:28px}
  .traccia-cifre b{font-size:34px}
  .traccia-cifre .grande b{font-size:42px}
}

@media (max-width:400px){
  /* Sotto i 400px una scheda per riga resta piu leggibile di due strette. */
  .grid{grid-template-columns:1fr}
  .thumb{height:150px}
}

/* ═══════════════════════════════════════════════════════════════════════
   CORREZIONI MOBILE — dopo averla misurata davvero a 375px
   La pagina risultava larga 3347px: la colonna dei reparti non si
   restringeva e trascinava tutto. In grid e flex gli elementi non
   scendono sotto la larghezza del contenuto se non lo si dice.
   ═══════════════════════════════════════════════════════════════════ */

.shop > .rail, .shop > main{min-width:0}

@media (max-width:900px){
  /* Questa e la riga che risolve lo sbordamento: senza min-width:0 la
     lista dei reparti impone la propria larghezza a tutta la pagina. */
  .rail{min-width:0; max-width:100%; overflow:hidden}
}

@media (max-width:760px){
  /* Le regole generiche perdevano contro selettori piu specifici scritti
     prima: qui si ripetono con la stessa forma, altrimenti su iPhone
     ogni tocco su un campo ingrandisce la pagina. */
  .searchbar input[type=search],
  .modulo input, .modulo textarea, .modulo select,
  .stepper input[type=number],
  .linea input[type=password],
  .filtri input[type=search]{font-size:16px}

  /* Anche i collegamenti semplici devono essere prendibili col dito,
     non solo i pulsanti. */
  .utility a, .foot a, .mainnav a, .traccia-link{
    display:inline-block; min-height:36px; line-height:36px;
  }
  .foot a{padding:2px 0}

  /* Prima si vedeva il primo prodotto dopo 1043px di scorrimento.
     L apertura si accorcia e i numeri passano in fila. */
  .hero{padding:22px 0 20px}
  .hero h1{font-size:26px; max-width:none}
  .hero p{font-size:14.5px; margin-top:12px}
  .eyebrow{margin-bottom:12px}
  .herostats{gap:0; padding-top:14px; margin-top:14px}
  .herostats b{font-size:22px}
  .herostats span{font-size:9.5px; letter-spacing:.08em}
  .shop{padding-top:20px}
  .results{margin-bottom:12px}
  .results h2{font-size:21px}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — recuperare la prima schermata
   Misurato: 1016px di intestazioni prima del primo prodotto, e solo due
   schede visibili. Su un telefono la prima schermata deve contenere
   prodotti, non slogan.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:760px){

  /* Barra di servizio: andava a capo su quattro righe. Al telefono
     servono il numero e l accesso; il resto sta nelle pagine dedicate. */
  .utility .wrap{gap:10px; min-height:0; padding-top:5px; padding-bottom:5px}
  .utility .sep{display:none}
  .utility .wrap > span:not(:first-child){display:none}
  .utility .push{margin-left:auto; gap:10px}
  .utility .push > span{display:none}

  /* Banner promozionale: titolo e pulsante, il resto si legge dentro. */
  .promo .wrap{gap:8px; padding-top:9px; padding-bottom:9px}
  .promo-testo{gap:2px; flex-direction:column}
  .promo-testo b{font-size:13.5px; line-height:1.3}
  .promo-testo span{display:none}
  .promo-btn{padding:6px 12px; font-size:12.5px; min-height:0}

  /* Testata: marchio e accesso sulla stessa riga, ricerca sotto. */
  .masthead .wrap{gap:10px; padding-top:9px; padding-bottom:9px; min-height:0}
  .brand .mark{font-size:26px}
  .brand .name{display:none}
  .mast-actions{gap:8px}
  .mast-actions .ghostbtn{padding:8px 12px; font-size:13px}
  .searchbar input[type=search]{height:40px}
  .mainnav{padding-top:0; padding-bottom:0}
  .mainnav a{font-size:13.5px}

  /* La colonna reparti e' un menu chiuso (vedi in alto): poco spazio. */
  .shop{gap:14px}

  /* Due schede per riga, piu compatte: si passa da due prodotti visibili
     a sei, e la pagina si dimezza. */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .thumb{height:92px}
  .temp{font-size:9px; padding:2px 5px; top:6px; left:6px}
  .ref{font-size:9px; bottom:5px; right:6px}
  .cardbody{padding:9px; gap:5px}
  .cat{font-size:9px; letter-spacing:.1em}
  .card h3{font-size:13px; line-height:1.28}
  .spec{gap:5px; font-size:10px}
  .spec span{padding:1px 5px}
  .stock{font-size:11px}
  .pricerow{padding:9px; flex-direction:column; align-items:stretch; gap:7px}
  .price b{font-size:18px}
  .price small{font-size:10px}
  .addbtn{width:100%; padding:9px 10px; font-size:12.5px}
  .stepper{width:100%; justify-content:space-between}
  .stepper input[type=number]{flex:1; width:auto}
  .locked{font-size:11.5px; gap:5px}
}

/* Sotto i 340px (telefoni molto stretti) si torna a una colonna:
   due schede diventerebbero illeggibili. */
@media (max-width:340px){
  .grid{grid-template-columns:1fr}
  .thumb{height:140px}
}

/* Ultimo affinamento mobile, sempre a misura presa. */
@media (max-width:760px){
  /* Le tre cifre dell apertura sono decorazione: al telefono stanno
     sopra il catalogo e costano 82px di scorrimento. Restano su tablet. */
  .herostats{display:none}
  .hero{padding:18px 0 16px}
  .hero p{font-size:14px; margin-top:10px}

  /* Marchio e pulsanti sulla stessa riga: erano su due. */
  .masthead .wrap{align-items:center}
  .brand{min-height:40px; align-items:center}
  .mast-actions{margin-left:auto; order:2}
  .searchbar{order:3; flex-basis:100%}
  .mainnav{order:4; padding-bottom:0}
  .mainnav a{padding:6px 0}

  /* I due bersagli rimasti sotto misura. */
  .promo-btn{min-height:38px; display:inline-flex; align-items:center}
}

@media (min-width:761px) and (max-width:1100px){
  /* Tablet: la griglia respira meglio con schede piu strette. */
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ═══════════════════════════════════════════════════════════════════════
   CASSA SUL TELEFONO
   La tabella dell ordine era larga 620px e scorreva di lato: per leggere
   il prezzo bisognava trascinare. Alla cassa non va bene. Sul telefono
   ogni riga diventa una scheda, con le etichette che prima stavano in
   testa alle colonne.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .tabellabox{overflow-x:visible; margin-top:18px}
  .tabellabox .tabella{min-width:0; border:0; background:none}
  .tabellabox .tabella thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;   /* resta per chi usa lo screen reader */
  }
  .tabellabox .tabella tbody{display:block}
  .tabellabox .tabella tr{
    display:grid; grid-template-columns:1fr auto; gap:8px 12px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:14px; margin-bottom:10px;
    align-items:center;
  }
  .tabellabox .tabella td{
    display:block; border:0; padding:0; text-align:left;
  }
  /* Nome del prodotto: prima riga, tutta larghezza. */
  .tabellabox .tabella td:first-child{grid-column:1 / -1}

  /* Le celle numeriche mostrano l etichetta che prima era in testa. */
  .tabellabox .tabella td[data-et]{position:relative; padding-left:0}
  .tabellabox .tabella td[data-et]::before{
    content:attr(data-et) " ";
    font-size:10px; text-transform:uppercase; letter-spacing:.1em;
    font-weight:700; color:var(--ink-3); display:block; margin-bottom:2px;
  }
  .tabellabox .tabella td.cella-qta{grid-column:1 / -1}
  .tabellabox .tabella td.cella-qta::before{margin-bottom:5px}
  .tabellabox .tabella .stepper{margin-left:0; width:100%; justify-content:space-between}
  .tabellabox .tabella td[data-et="Price"]{grid-column:1}
  .tabellabox .tabella td[data-et="VAT"]{grid-column:2; text-align:right}
  .tabellabox .tabella td[data-et="Net"]{grid-column:1 / -1; font-size:19px}
  .tabellabox .tabella td[data-et="Net"]::before{display:inline; margin:0 6px 0 0}
  .tabellabox .tabella td.cella-togli{grid-column:1 / -1; text-align:right}
  .tabellabox .tabella .vuoto{padding:22px 10px}
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGO AZIENDALE
   Il logo vero al posto della scritta ricostruita. E oro su fondo
   trasparente: funziona sia sul chiaro sia sullo scuro senza ritocchi.
   ═══════════════════════════════════════════════════════════════════ */

.brand{align-items:center; gap:0}
.logo{
  display:block; height:52px; width:auto; max-width:100%;
}
.logo-fiocco{display:none; height:38px; width:auto}
.logo-piede{height:46px; margin-bottom:4px}

/* Sui temi stagionali il logo resta oro: e il marchio, non decorazione.
   Nessun filtro, nessuna tinta: si lascia com'e. */

@media (max-width:1100px){
  .logo{height:44px}
}

@media (max-width:760px){
  /* Al telefono il logo intero, centrato, su una riga tutta sua in cima.
     Prima restava solo il fiocco, 30px in un angolo, e il marchio non si
     vedeva. Sotto vengono i pulsanti dell'account (larghi uguali, sulla
     loro riga), poi la ricerca e la navigazione. */
  .brand{order:0; flex:0 0 100%; justify-content:center; min-height:0; padding:4px 0 2px}
  .logo{display:block; width:210px; height:auto; max-width:72vw}
  .logo-fiocco{display:none}
  .mast-actions{order:1; flex:0 0 100%; margin-left:0; justify-content:center; flex-wrap:wrap}
  /* Larghi quanto il testo, poi si allargano insieme. Con Team, Account
     col credito e My orders su 320px non ci stanno: si va a capo invece
     di sbordare. */
  .mast-actions .ghostbtn{flex:1 1 auto; max-width:200px; white-space:nowrap}
  .logo-piede{height:40px}
}

/* ---------- scheda di un ordine gia fatto ---------- */
.rif-ordine{
  font-weight:700; color:var(--gold); text-decoration:none;
  border-bottom:1px solid currentColor;
}
.rif-ordine:hover{color:var(--ink)}

.ordine-testa{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:16px 0 4px;
}
.ordine-testa .min{color:var(--ink-3); font-size:13px}

/* Consegna e sconti non sono merce: si distinguono senza gridarlo. */
.riga-servizio td{color:var(--ink-3)}
.riga-servizio td b{font-weight:500}

.ordine-totali{margin-top:18px; max-width:340px; margin-left:auto}

/* ---------- scheda con due formati (cartone / sfuso) ---------- */
.pricerow.formati{flex-direction:column; align-items:stretch; gap:10px}
.scelta-formato{display:flex; flex-direction:column; gap:6px}

.formato{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:4px 10px; padding:9px 11px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
}
.formato:hover{border-color:var(--ink-3)}
.formato input{
  grid-row:1 / 3; width:16px; height:16px; margin:0; accent-color:var(--gold);
}
.formato-nome{font-size:13.5px; font-weight:600; color:var(--ink)}
.formato-prezzo{
  font-family:"Bodoni Moda",Georgia,serif; font-size:19px; font-weight:600;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; text-align:right;
}
.formato-stato{grid-column:2 / 4; font-size:11px; font-weight:600}
.formato-carrello{
  grid-column:2 / 4; font-size:11px; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:.08em;
}

/* Quello scelto si vede: e da li che parte l'ordine. */
.formato:has(input:checked){
  border-color:var(--gold-bright); background:var(--gold-wash);
  box-shadow:inset 0 0 0 1px var(--gold-bright);
}
.formato.esaurito{opacity:.5; cursor:not-allowed}
.formato.esaurito .formato-prezzo{color:var(--ink-3)}

.pricerow.formati .addbtn{width:100%}

/* ---------- conto: credito e fatture ---------- */
.pastiglia-credito{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  background:var(--ok); color:var(--surface); font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

.conto-cifre{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px; margin-bottom:22px;
}
.conto-cifre > div{
  background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--line); border-radius:var(--radius); padding:16px 18px;
}
.conto-cifre span{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; color:var(--ink-3); margin-bottom:3px;
}
.conto-cifre b{
  display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:34px;
  font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums;
}
.conto-cifre small{font-size:12px; color:var(--ink-3)}
.conto-cifre .allerta{border-top-color:var(--crit)}
.conto-cifre .allerta b{color:var(--crit)}
/* Il credito e una buona notizia: si vede che lo e. */
.conto-cifre .buono{border-top-color:var(--ok); background:var(--ok-wash)}
.conto-cifre .buono b{color:var(--ok)}

.riquadro-conto{margin-top:26px}
.riquadro-conto h2{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:22px;
  letter-spacing:-.01em; margin-bottom:6px;
}
.riga-scaduta td{background:var(--crit-wash)}
.riga-scaduta .sub{color:var(--crit)}

/* ---------- fatture del cliente ---------- */

.filtri-fatture{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  margin:26px 0 4px; padding:18px 20px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
}
.campo-filtro{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo-filtro.cresce{flex:1; min-width:180px}
.campo-filtro > span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); font-weight:700;
}
.campo-filtro select,
.campo-filtro input[type=search]{
  font:inherit; font-size:14px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); max-width:100%;
}
.filtri-fatture .ghostbtn{padding:9px 16px}

.barra-fatture{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:24px;
}
.conta-fatture{font-size:14px; color:var(--ink-2)}
.conta-fatture b{color:var(--ink); font-weight:700}
.da-pagare{color:var(--crit); font-weight:600}
.azioni-fatture{display:flex; align-items:center; gap:16px}
.primario.piccolo{padding:8px 16px; font-size:13.5px}

.tabella-fatture .sel{width:34px; padding-right:0}
.tabella-fatture input[type=checkbox]{width:17px; height:17px; accent-color:var(--gold); cursor:pointer}

/* Il link al PDF deve sembrare un pulsante, non una parola sottolineata:
   e' la cosa per cui il cliente e' venuto su questa pagina. */
.scarica{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2);
  font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.scarica:hover{border-color:var(--gold-bright); color:var(--gold); background:var(--gold-wash)}
.scarica svg{flex:none}

.nota-fatture{margin-top:14px; color:var(--ink-3)}

/* Solo per chi legge con lo screen reader: l'intestazione della colonna
   delle caselle non ha testo visibile, ma senza non si capisce cos'e'. */
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:760px){
  /* In tabella-scheda la casella e il PDF vanno messi in fondo alla
     scheda, non nascosti: sono le due cose che si toccano. */
  .filtri-fatture{flex-direction:column; align-items:stretch}
  .campo-filtro, .campo-filtro.cresce{width:100%}
  .filtri-fatture .ghostbtn{width:100%}
  .barra-fatture{flex-direction:column; align-items:flex-start; gap:10px}
  .azioni-fatture{width:100%; justify-content:space-between}
  .tabella-fatture .sel{width:auto}
  .scarica{padding:9px 14px}
}

/* Schede dell'area conto: saldo, fatture, ordini. Sono tre pagine che si
   somigliano, e senza un filo che le lega il cliente non sa che ci sono. */
.schede-conto{
  display:flex; gap:4px; flex-wrap:wrap;
  margin:18px 0 4px; border-bottom:1px solid var(--line);
}
.schede-conto a{
  padding:10px 16px; font-size:14px; font-weight:600; text-decoration:none;
  color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.schede-conto a:hover{color:var(--ink)}
.schede-conto a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold-bright)}
@media (max-width:520px){
  .schede-conto a{flex:1; text-align:center; padding:10px 6px; font-size:13px}
}

/* Area di tocco intorno alla casella: la casella resta della sua misura,
   ma il dito ha 44px su cui atterrare. Il margine negativo annulla il
   padding, cosi la riga non si alza. */
.picca{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 12px; margin:-14px -12px; cursor:pointer;
}
.picca input[type=checkbox]{margin:0}

/* ---------- saldo del conto con carta ---------- */
.paga-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-top:20px; padding:18px 20px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
}
.paga-cifra span{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); font-weight:700;
}
.paga-cifra b{
  display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:30px;
  font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; margin-top:4px;
}
.paga-cifra small{display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3)}
.paga-nota{margin-top:12px; color:var(--ink-3)}
.riquadro-pagato{font-size:15px}
.riquadro-pagato b{display:block; margin-bottom:2px}

/* ---------- chi sono e come entro ---------- */
.conto-chi{
  display:flex; gap:28px; flex-wrap:wrap; margin:20px 0 4px; padding:16px 20px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
}
.conto-chi span{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); font-weight:700;
}
.conto-chi b{display:block; margin-top:3px; font-size:14.5px}

.modulo-conto{display:flex; flex-direction:column; gap:14px; max-width:420px; margin-top:14px}
.modulo-conto label{display:flex; flex-direction:column; gap:6px}
.modulo-conto label > span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); font-weight:700;
}
.modulo-conto input{
  font:inherit; font-size:16px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
}
.modulo-conto input:focus{outline:2px solid var(--gold-bright); outline-offset:1px}
.modulo-conto button{align-self:flex-start}

@media (max-width:760px){
  .paga-barra{flex-direction:column; align-items:stretch}
  .paga-barra .primario{width:100%}
  .conto-chi{flex-direction:column; gap:14px}
  .modulo-conto{max-width:none}
  .modulo-conto button{width:100%}
}

/* Quanti posti squadra restano: accanto al titolo, non nascosto in fondo. */
.posti{
  margin-left:10px; font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--ink-3); background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; padding:4px 10px;
  vertical-align:middle; white-space:nowrap;
}

/* Il link per chi ha perso la password, sotto il modulo di accesso. */
.sotto-accesso{margin:14px 0 0; text-align:center}
.sotto-accesso a{color:var(--ink-3); text-decoration:underline}
.sotto-accesso a:hover{color:var(--gold)}

/* Il pannello per saldare senza uscire dalla schermata dell'ordine.
   Ha il colore dell'allarme, non quello dell'azione principale: e' un
   ostacolo da togliere, non la cosa che il cliente e venuto a fare. */
.salda-qui{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-top:26px; padding:20px 24px;
  border:1px solid var(--crit); border-radius:var(--radius);
  background:var(--crit-wash);
}
.salda-testo{flex:1; min-width:260px}
.salda-testo b{display:block; font-size:16px; color:var(--crit); margin-bottom:4px}
.salda-testo p{margin:0; font-size:14px; color:var(--ink-2); max-width:56ch}
.salda-qui .primario{white-space:nowrap}
.salda-nota{margin-top:10px; color:var(--ink-3)}

@media (max-width:640px){
  .salda-qui{flex-direction:column; align-items:stretch; gap:16px}
  .salda-qui .primario{width:100%}
}

/* --- data di consegna, in fondo all'ordine ---------------------------- */
/* Il cliente sceglie fra le date che gli spettano, non fra tutte: quello
   che non vede non puo nemmeno chiederlo per sbaglio. */
.campo-consegna select{
  font:inherit; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface-2); color:var(--ink);
  text-transform:none; letter-spacing:0; max-width:340px;
}
.campo-consegna select:focus{outline:2px solid var(--gold-bright); outline-offset:1px}
.nota-consegna{margin:-6px 0 0; color:var(--ink-3)}
.nota-consegna b{color:var(--ink-2)}
.data-consegna{margin:14px 0 0; font-size:15px; color:var(--ink-2)}
.data-consegna b{color:var(--ink)}

@media (max-width:640px){
  .campo-consegna select{max-width:none; width:100%}
}
/* Una chiusura che toglie un giorno al cliente va detta: senza, lo cerca
   nell'elenco, non lo trova e telefona. */
.nota-chiusura{margin:-2px 0 0; color:var(--warn)}
.nota-chiusura b{color:var(--warn)}
/* Il gemello di .opz: dice che il campo va compilato, con lo stesso peso
   con cui l'altro dice che si puo saltare. */
.modulo .obbl{
  text-transform:none; letter-spacing:0; font-weight:600; color:var(--crit);
}
/* Figure dentro una pagina scritta dal pannello. */
.figura-pagina{margin:26px 0; padding:0}
.figura-pagina img{width:100%; height:auto; border-radius:var(--radius); display:block}
.figura-pagina figcaption{margin-top:8px; font-size:13px; color:var(--ink-3)}
.riga-pagina{border:0; border-top:1px solid var(--line); margin:32px 0}
/* Presentazione del reparto, sopra ai prodotti. */
.descr-reparto{
  margin:10px 0 0; max-width:62ch; color:var(--ink-2);
  font-size:14.5px; line-height:1.6;
}


/* --- finestrella del prodotto ------------------------------------------ */
/* Quello che nella griglia non ci sta: la descrizione, e la possibilita di
   dire quante ne vuole invece di premere "Add" cinque volte. */
.card .thumb.apri-scheda{display:block; text-decoration:none; color:inherit; cursor:pointer}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a:hover{color:var(--gold)}
.card h3 a:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:2px}

.scheda-finestra{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); padding:0;
  width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 64px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.scheda-finestra::backdrop{background:rgba(5,13,18,.72)}
/* Una barra di scorrimento sola. Chrome da' gia' a un <dialog> aperto il
   suo overflow:auto: con quello del riquadro interno, con una descrizione
   lunga le barre erano due, una accanto all'altra. Ora la finestra non
   scorre e il contenuto prende l'altezza che resta. display:flex solo da
   aperta, se no la finestra si vedrebbe anche chiusa. */
.scheda-finestra{overflow:hidden}
.scheda-finestra[open]{display:flex; flex-direction:column}
.scheda-finestra > div{overflow:auto; min-height:0; flex:1 1 auto; overscroll-behavior:contain}
.scheda-chiudi{
  position:absolute; top:10px; right:24px; z-index:2;
  width:34px; height:34px; border-radius:50%; line-height:1;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-size:22px; cursor:pointer;
}
.scheda-chiudi:hover{color:var(--ink); border-color:var(--ink-3)}
.scheda-attesa, .scheda-vuota{padding:60px 30px; text-align:center; color:var(--ink-3)}

.scheda-prodotto{display:grid; grid-template-columns:300px 1fr; gap:0}
.scheda-foto{
  position:relative; background:var(--surface-2); display:flex;
  align-items:center; justify-content:center; padding:0; min-height:280px;
}
.scheda-foto img{width:100%; height:100%; object-fit:cover; display:block}
.scheda-foto svg{width:64px; height:64px; fill:none; stroke:var(--ink-3); stroke-width:1.5; opacity:.5}
.scheda-foto .temp{
  position:absolute; top:12px; left:12px; font-size:11px; font-weight:600;
  background:var(--chill-wash); color:var(--chill);
  padding:3px 8px; border-radius:20px;
}
.scheda-testo{padding:28px 30px 30px}
.scheda-nome{
  font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:25px;
  line-height:1.15; letter-spacing:-.01em; margin:4px 0 6px;
}
.scheda-nome:focus{outline:none}
.scheda-rif{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px; color:var(--ink-3); margin-bottom:14px;
}
.scheda-descrizione{
  font-size:14.5px; line-height:1.65; color:var(--ink-2);
  margin:14px 0 4px; max-width:52ch;
}
/* La descrizione e' HTML ripulito (vedi class/testo.class.php): paragrafi,
   grassetti, elenchi e titoletti, niente altro. */
.scheda-descrizione p{margin:0 0 10px}
.scheda-descrizione ul, .scheda-descrizione ol{margin:0 0 12px; padding-left:20px}
.scheda-descrizione li{margin:3px 0}
.scheda-descrizione li::marker{color:var(--gold)}
.scheda-descrizione strong{color:var(--ink); font-weight:600}
.scheda-descrizione h4{
  margin:16px 0 6px; font-size:12px; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.12em;
}
.scheda-descrizione > :last-child{margin-bottom:0}
/* Con una descrizione lunga la riga diventa alta e la foto si stirava per
   tutta l'altezza, tagliata a caso. Nella finestrella resta ferma in alto
   con la sua misura mentre il testo scorre. */
.scheda-finestra .scheda-foto{
  position:sticky; top:0; align-self:start;
  height:min(440px, calc(100vh - 66px));
}
.scheda-nodescr{font-size:13.5px; color:var(--ink-3); margin:14px 0 4px}

.scheda-dati{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
  margin:18px 0 0; font-size:13.5px;
}
.scheda-dati dt{color:var(--ink-3)}
.scheda-dati dd{margin:0; color:var(--ink); font-weight:500}

.scheda-azione{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:14px;
}
.scheda-prezzo b{font-size:24px; font-weight:600}
.scheda-prezzo small{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.scheda-gia{margin:0; font-size:13px; color:var(--gold)}
.scheda-aggiungi{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.scheda-qta{
  display:flex; flex-direction:column; gap:5px;
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  font-weight:600; color:var(--ink-3);
}
.scheda-qta input{
  width:84px; font:inherit; font-size:15px; text-align:center;
  padding:10px 8px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); color:var(--ink);
}
.scheda-aggiungi .primario{flex:1; min-width:170px}
.scheda-azione .locked{flex:none}
.indietro{
  display:inline-block; margin-bottom:18px; font-size:13.5px;
  color:var(--ink-3); text-decoration:none;
}
.indietro:hover{color:var(--gold)}

@media (max-width:640px){
  .scheda-prodotto{grid-template-columns:1fr}
  .scheda-foto{min-height:200px; max-height:230px}
  /* Una colonna: la foto ferma in alto coprirebbe il testo. */
  .scheda-finestra .scheda-foto{position:static; height:auto}
  .scheda-testo{padding:20px 20px 24px}
  .scheda-aggiungi .primario{width:100%; flex-basis:100%}
  .scheda-finestra{width:100vw; max-width:100vw; max-height:92vh; border-radius:0}
}

/* Tracking: la mappa del furgone, solo quando e' entro il raggio dal cliente.
   z-index 0 crea un contesto: i livelli di Leaflet (z-index 400 e oltre)
   restano dentro la mappa e non passano sopra la testata del sito. */
.mappa-tracking { height: 340px; border-radius: 14px; overflow: hidden; margin: 20px 0 8px; border: 1px solid #dae4e9; position: relative; z-index: 0; }
.mk-mappa { background: none; border: none; }
.mk-mappa svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
@media (max-width: 600px) { .mappa-tracking { height: 280px; } }

/* Prova di consegna: foto, firma, colli, tentativi mancati */
.prova { margin: 28px 0 10px; padding: 20px; border: 1px solid rgba(218, 228, 233, .35); border-radius: 14px; }
.prova-titolo { font-size: 20px; margin: 0 0 14px; }
.prova-sotto { font-size: 15px; margin: 22px 0 8px; }
.prova-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.prova-fatti span, .prova-firma > span, .prova-colli > span { display: block; font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.prova-fatti b { font-weight: 600; }
.prova-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.prova-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.prova-firma { margin: 6px 0 14px; }
.prova-firma img { max-width: 280px; width: 100%; background: #fff; border-radius: 8px; padding: 6px; display: block; }
.prova-colli { margin: 6px 0 14px; }
.prova-colli .collo { display: inline-block; margin: 4px 6px 0 0; padding: 3px 10px; border-radius: 999px; background: rgba(28, 110, 70, .18); font-size: 13px; }
.prova-colli .collo.mancato { background: rgba(153, 39, 39, .22); }
.prova-tentativi { list-style: none; padding: 0; margin: 0 0 16px; }
.prova-tentativi li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(218, 228, 233, .25); }
.prova-tentativi img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.prova-tentativi div > b, .prova-tentativi div > span { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   NEGOZIO CHIUSO PER MANUTENZIONE
   Pagina sola, senza testata ne' menu: ogni collegamento porterebbe di
   nuovo qui. Il logo in alto, due righe che dicono cosa succede e quando
   si torna, e come raggiungerci nel frattempo. Si accende dal pannello.
   ═══════════════════════════════════════════════════════════════════ */
.manut-corpo{min-height:100vh; display:flex; flex-direction:column}
.manut{
  flex:1; width:100%; max-width:600px; margin:0 auto; padding:56px 24px 64px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.manut-logo{width:250px; max-width:70vw; height:auto; margin-bottom:38px}
.manut-segno{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold); margin-bottom:22px;
}
.manut-segno svg{width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.manut h1{font-family:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:38px; line-height:1.15; letter-spacing:-.01em}
.manut-testo{margin-top:18px; color:var(--ink-2); font-size:16.5px; line-height:1.6}
.manut-testo p{margin:0 0 12px}
.manut-quando{
  margin:10px 0 0; padding:10px 16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); font-weight:600; font-size:15px;
}
.manut-contatti{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px}
.manut-contatti .ghostbtn{padding:12px 18px; font-size:14.5px}
.manut-orari{margin:14px 0 0; font-size:13px; color:var(--ink-3)}
/* Solo per chi guarda l'anteprima dal pannello. */
.manut-anteprima{
  background:var(--gold-wash); color:var(--gold); border-bottom:1px solid var(--gold-bright);
  padding:10px 16px; text-align:center; font-size:13.5px; font-weight:600;
}
.manut-anteprima a{margin-left:10px}
/* Sul sito, a chi ha il pannello aperto mentre il negozio e' chiuso. */
.manut-striscia{
  background:var(--crit); color:#fff; padding:9px 24px; font-size:13.5px; text-align:center;
}
.manut-striscia a{color:#fff; font-weight:700; margin-left:12px; white-space:nowrap}
@media (prefers-color-scheme: dark){ .manut-striscia{color:#1a0b0b} .manut-striscia a{color:#1a0b0b} }
@media (max-width:760px){
  .manut{padding:36px 18px 48px}
  .manut-logo{width:210px; margin-bottom:28px}
  .manut h1{font-size:30px}
  .manut-testo{font-size:15.5px}
  .manut-contatti{flex-direction:column; align-items:stretch; width:100%}
  .manut-contatti a{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   OBBLIGHI DI LEGGE
   Riga in fondo a ogni pagina con i dati della societa' (nome, numero,
   sede legale, partita IVA) e le pagine legali; il richiamo ai termini
   accanto al pulsante d'ordine; la stampa pulita delle pagine legali.
   ═══════════════════════════════════════════════════════════════════ */
.foot .foot-legale{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  justify-content:space-between; align-items:baseline; gap:10px 24px; font-size:12px;
}
.foot .foot-legale p{margin:0; max-width:none; flex:1 1 420px; line-height:1.55}
.foot .foot-legale nav{display:flex; gap:4px 18px; flex-wrap:wrap}
.foot .foot-legale nav a{display:inline-block}
.nota-legale{margin:14px 0 0; font-size:12.5px; color:var(--ink-3)}
.nota-legale a{color:var(--ink-2)}

/* Stampa (o PDF) di una pagina: solo il testo, nero su bianco anche col
   tema scuro, senza testata, menu, piede e pulsanti. */
@media print{
  :root{
    --ground:#fff; --surface:#fff; --surface-2:#fff;
    --ink:#000; --ink-2:#222; --ink-3:#444; --line:#bbb; --gold:#5a430d;
  }
  body{background:#fff; color:#000}
  .utility, .promo, .masthead, .orderbar, .manut-striscia, .stagione,
  .editoriale .azioni, .foot .wrap:not(.foot-legale){display:none !important}
  .foot{border:0; padding:12px 0 0; background:#fff}
  .foot .foot-legale{border-top:1px solid #bbb; margin-top:0}
  .foot .foot-legale nav{display:none}
  .wrap.stretta{max-width:none; padding:0}
  a{color:#000}
}

/* --- allergeni nella scheda prodotto ----------------------------------- */
/* Vengono dalla scheda Dolibarr (class/allergeni.class.php). Ben visibili:
   la legge li vuole a disposizione prima dell'acquisto, e un cuoco li
   cerca con gli occhi, non leggendo tutta la descrizione. */
.scheda-allergeni{
  margin:18px 0 0; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface-2); max-width:52ch;
}
.scheda-allergeni h3{
  margin:0 0 10px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-3);
}
.allergeni-riga{display:flex; gap:6px 12px; align-items:baseline; flex-wrap:wrap; margin:0 0 8px}
.allergeni-riga > span{font-size:13px; font-weight:600; color:var(--ink); min-width:92px}
.allergeni-chip{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.allergeni-chip li{
  font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:99px;
  background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn);
}
.allergeni-chip.tracce li{font-weight:600; background:transparent; color:var(--ink-2); border-color:var(--line)}
.allergeni-nessuno{margin:0 0 8px; font-size:13.5px; color:var(--ok); font-weight:600}
.allergeni-ingredienti{margin:10px 0 0; font-size:13px; line-height:1.6; color:var(--ink-2)}
.allergeni-ingredienti > span{font-weight:600; color:var(--ink); margin-right:4px}
.allergeni-ingredienti strong{color:var(--ink)}
.allergeni-manca{margin:0; font-size:13.5px; color:var(--warn)}