/* ============================================================
   ChiWeé — Design System dal Figma (lato CLIENTE)
   Caricato DOPO style.css SOLO dalle pagine cliente: ridefinisce
   variabili, font e componenti base. Admin e operatore non lo
   caricano e restano sul vecchio stile.
   Palette campionata dal file Figma "CHIWEE" (in attesa dei
   valori esatti dall'inspect: aggiornare qui quando arrivano).
   ============================================================ */

:root{
  /* — palette Figma — */
  --bosco:#24382A;          /* verde bosco scurissimo: titoli, bottoni scuri, footer */
  --bosco-2:#1C2E22;        /* variante ancora piu' scura (hover, gradienti)          */
  --terra:#C9603C;          /* terracotta: CTA, voci attive, accenti                  */
  --terra-d:#B4512F;        /* terracotta hover                                       */
  --crema:#F8F4EB;          /* fondo pagina                                           */
  --verde-ok:#3E7C48;       /* prezzi, conferme                                       */
  --salmone-bg:#F8E3D6;     /* chip tenui (articoli, piu' affollato)                  */
  --salmone-tx:#B65C3B;
  --teal-bg:#E3F0E9;        /* fascia oraria consigliata                              */
  --teal-bd:#5B917E;
  --teal-tx:#2F7061;
  --rosso:#E8432D;          /* sconto                                                 */
  --ocra-bg:#F6E8C6;        /* badge "in attesa"                                      */
  --ocra-tx:#A9822F;

  /* — rimappatura delle variabili storiche usate da style.css — */
  --pri:var(--verde-ok);
  --pri-d:var(--bosco);
  --acc:var(--terra);
  --bg:var(--crema);
  --card:#FFFFFF;
  --line:#E9E2D4;
  --ink:#26332B;
  --muted:#8B8677;
  --green:#EAF3E8;
  --ok:var(--verde-ok);

  /* — tipografia — */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* — movimento: transizioni fluide e lineari — */
  --ease:cubic-bezier(.25,.6,.3,1);
  --t-fast:.16s;
  --t-med:.28s;

  /* — ombre discrete: il Figma e' quasi flat, bordi + ombra leggerissima — */
  --shadow-sm:0 1px 2px rgba(36,56,42,.05);
  --shadow-md:0 6px 18px -8px rgba(36,56,42,.12);
  --shadow-lg:0 16px 34px -14px rgba(36,56,42,.18);
}

html{background:var(--crema)}
body{font-family:var(--ui);color:var(--ink);background:var(--crema)}

/* ── titoli: serif Lora come nel Figma ─────────────────────── */
h1,h2,h3,.serif,.wordmark,.omc-title,.ds-date,.cat-head b,
.login-card h1,.qh-title,.ord-title,.ordr-nome,.acc-name{
  font-family:var(--serif);
}
h1{font-weight:700;color:var(--bosco);letter-spacing:-.01em;font-size:1.9rem}
h2{font-weight:700;color:var(--bosco);letter-spacing:-.005em}
.page-head h1{font-size:1.75rem}
@media(min-width:861px){ .page-head h1{font-size:2.1rem} h1{font-size:2.1rem} }
.page-head h1 .ico{display:none}   /* i titoli del Figma sono puliti, senza icona */

/* ── header: barra BIANCA con nav testuale (Figma) ─────────── */
header.topbar{
  background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:none;
  padding:.65rem 1.2rem;gap:1.4rem;
}
.brand{color:var(--ink)}
.brand-logo{height:42px;width:42px;border-radius:50%;box-shadow:none}
.wordmark{font-weight:700;font-size:1.22rem;color:var(--bosco);letter-spacing:0}
.top-links{display:flex;flex:1;justify-content:flex-end;gap:.4rem}
.top-links a{
  display:inline-flex;align-items:center;padding:.5rem .75rem;border-radius:8px;
  color:var(--ink);font-weight:600;font-size:.95rem;position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.top-links a .ico{display:none}          /* nav solo testuale come nel Figma */
.top-links a:hover{background:var(--crema);color:var(--bosco)}
.top-links a.active{color:var(--terra);background:transparent}
/* trattino corto e centrato sotto la voce attiva (Figma): elemento vero. La
   scivolata fra le voci non usa piu' le View Transition (lasciavano fasce del
   colore di fondo sulla barra durante il cambio pagina): la fa lo script in
   web_base.html, che memorizza al tocco la posizione del trattino attivo e la
   pagina nuova lo fa partire da li'. */
.nav-dash{
  position:absolute;left:50%;transform:translateX(-50%);bottom:.15rem;
  width:26px;height:2.5px;border-radius:2px;background:var(--terra);
}
/* la voce Profilo sostituisce l'avatar tondo */
.user-avatar{
  width:auto;height:auto;border-radius:8px;background:transparent;color:var(--ink);
  font-weight:600;font-size:.95rem;padding:.5rem .75rem;box-shadow:none;margin-left:0;
  display:inline-flex;align-items:center;position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.user-avatar:hover{background:var(--crema);color:var(--bosco);transform:none}
.user-avatar.active{color:var(--terra)}

/* nav visibile ANCHE su mobile (il Figma mobile ha le voci in alto, niente tabbar) */
@media(max-width:860px){
  header.topbar{padding:.55rem .8rem;gap:.6rem}
  .wordmark{display:none}                 /* su schermi stretti resta il logo tondo */
  .top-links{gap:0;justify-content:flex-end}
  .top-links a,.user-avatar{font-size:.83rem;padding:.45rem .5rem}
  .nav-dash{width:22px}
}
nav.tabbar{display:none!important}       /* la bottom bar non esiste nel Figma */
.cart-bar{bottom:0!important}            /* senza tabbar la barra carrello poggia in basso */

/* ── footer: banda verde bosco (Figma) ─────────────────────── */
/* Pagina alta almeno quanto lo schermo con il footer SEMPRE in fondo: se il contenuto
   e' poco il main si allunga (flex:1) e la banda verde chiude la viewport, senza crema
   vuota sotto; se il contenuto e' tanto il footer scorre normalmente dopo di esso.
   100dvh segue le barre del browser mobile che compaiono/scompaiono. */
html{min-height:100%}
/* Niente zoom quando si tocca due volte in fretta: premendo + e − a raffica il
   telefono lo interpretava come doppio tap e ingrandiva la pagina. 'manipulation'
   toglie SOLO quel gesto: scorrimento e zoom con due dita restano. */
html,body{touch-action:manipulation}
/* touch-action non si eredita: va messa anche sui comandi che si toccano in sequenza */
button,a,label,select,input,.btn,.ai-plus,.ai-minus,.ai-qty-hit,.ai-un,.cat-chip,
.cr-plus,.cr-minus,.cr-del,.om-slot,.oc-card,.art-item,.t-arrow,.sheet-grab,.cb-open{
  touch-action:manipulation;
}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* Sui comandi: niente lampo grigio al tocco e — tenendo premuto per ripetere +/− —
   niente selezione del testo, niente lente/menu copia di iOS. */
button,.btn,.ai-plus,.ai-minus,.ai-qty-hit,.ai-un,.cat-chip,.cr-plus,.cr-minus,.cr-del,
.om-slot,.sheet-grab,.cb-open,.t-arrow,.ai-lbl,.ai-sign,.ai-nd{
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
/* lo stacco dal contenuto e' padding del main, NON margine del footer: cosi' con poco
   contenuto la banda verde chiude esattamente la viewport senza scroll di troppo */
body > main.container{flex:1 0 auto;width:100%;padding-bottom:2.5rem}
footer.foot{
  background:var(--bosco);color:#E9E4D6;margin-top:0;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.35rem clamp(1rem,4vw,2.5rem);font-size:.8rem;text-align:left;
}
footer.foot .powered{display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;
  color:#E9E4D6;opacity:.92;margin:0}
footer.foot .powered:hover{opacity:1}
footer.foot .powered span{font-size:.8rem;letter-spacing:0;text-transform:none;color:#E9E4D6}
footer.foot .powered img{height:15px;width:auto}
@media(max-width:600px){
  footer.foot{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ── bottoni: primario terracotta, maiuscoletto (Figma) ────── */
button,.btn{
  background:var(--terra);color:#fff;border:0;border-radius:10px;
  font-family:var(--ui);font-weight:700;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
button:hover,.btn:hover{background:var(--terra-d)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{background:#CFC9BB}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover{background:var(--crema);color:var(--bosco);border-color:#D8D0BE}
/* bottone scuro (AGGIUNGI, stepper del catalogo) */
.btn-dark{background:var(--bosco);color:#fff}
.btn-dark:hover{background:var(--bosco-2)}
/* CTA maiuscola stile "INVIA ORDINE →" — colori espliciti cosi' vale anche sui link <a> */
.btn-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  text-transform:uppercase;letter-spacing:.06em;font-size:.88rem;font-weight:700;
  padding:.95rem 1.2rem;border-radius:10px;
  background:var(--terra);color:#fff;border:0;
}
.btn-cta:hover{background:var(--terra-d);color:#fff}

/* ── link e focus ──────────────────────────────────────────── */
a{transition:color var(--t-fast) var(--ease)}
.signup-link,.forgot-link a:hover{color:var(--terra)}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--terra);outline-offset:2px;
}

/* ── campi form ────────────────────────────────────────────── */
input,textarea,select{
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  font-family:var(--ui);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--terra);box-shadow:0 0 0 3px rgba(201,96,60,.14);outline:none;
}
label{color:var(--ink)}
/* etichette maiuscolette stile Figma (NOTE SULL'ORDINE, QUANTITA'...) */
.eyebrow{
  display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
}

/* ── flash ─────────────────────────────────────────────────── */
.flash{border-radius:10px;font-weight:600}
.flash-success{background:var(--teal-bg);border:1px solid #CBE3D6;color:var(--teal-tx)}
.flash-error{background:#FAECEB;border:1px solid #F0D5D5;color:#933422}

/* ── badge di stato (Figma: pallino + testo maiuscoletto) ──── */
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.24rem .6rem;border-radius:999px;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-confermato{background:#E7F1E4;color:#3A7D44}
.badge-in-attesa,.badge-in_attesa{background:var(--ocra-bg);color:var(--ocra-tx)}
.badge-evaso{background:#E7EFE9;color:#4A6A56}
.badge-annullato{background:#F8DED9;color:#B44B36}

/* ── card generiche: bordo netto, ombra minima (Figma flat) ── */
.acc-card,.acc-hero,.ordr-card,.ord-card,.qr-hero,.qr-box,.login-card{
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease);
}
.ord-card:hover,.qr-hero:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#D8D0BE}
.login-card{border-top:1px solid var(--line)}   /* via la banda colorata sopra */

/* ── riquadro ritiro (mercato-box) in chiave Figma ─────────── */
.mercato-box{background:#EAF2E6;border:0;color:#3A5741;border-radius:14px;
  padding:.85rem 1rem;font-size:.95rem;line-height:1.5}
.mercato-box .ico{color:var(--verde-ok);margin-right:.15rem;vertical-align:-.18em}
.mercato-box b{color:var(--bosco)}
.mercato-box .deadline{color:var(--terra)}

/* ── modal glass: titoli serif, CTA nuove ──────────────────── */
.omc-title{font-weight:700;color:var(--bosco)}
.omc-primary{background:var(--terra);box-shadow:0 12px 24px -10px rgba(201,96,60,.55)}
.omc-primary:hover{background:var(--terra-d);box-shadow:0 14px 28px -10px rgba(201,96,60,.6)}
.omc-ghost{color:var(--bosco);background:rgba(255,255,255,.6);border-color:#D8D0BE}
.omc-danger{background:linear-gradient(180deg,#E0594A,#C0392B)}

/* ============================================================
   F4 — I miei ordini + dettaglio (Figma)
   ============================================================ */
.oc-head{display:block}
.oc-sub{margin:.2rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.5;max-width:52ch}
.oc-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.1rem}
@media(min-width:721px){ .oc-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .oc-grid{grid-template-columns:repeat(3,1fr)} }
.oc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.05rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;cursor:pointer;
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.oc-card:hover{box-shadow:0 8px 22px -10px rgba(38,51,43,.22)}
.oc-card:active{transform:scale(.995)}
.oc-card .qrb-frame{cursor:zoom-in}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
/* titoletto "#49 | Giovedì 23 luglio" come nel Figma: Inter bold quasi nero, NON serif */
.oc-title{font-family:var(--ui);font-size:1.02rem;font-weight:700;color:var(--ink);
  margin:0 0 .7rem;line-height:1.25;letter-spacing:0}
.oc-body{display:flex;gap:.9rem;align-items:flex-start}
/* riquadro QR bordato scuro con la scritta sotto (Figma) — usato in elenco e dettaglio */
.qrb-frame{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  border:2px solid var(--bosco);border-radius:12px;padding:.5rem;background:#fff}
.qrb-frame img{display:block;border:0;border-radius:4px}
.qrb-lbl{display:inline-flex;align-items:center;gap:.28rem;font-size:.6rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bosco);white-space:nowrap}
.qrb-lbl .ico{width:11px;height:11px}
.oc-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.oc-ritiro{display:inline-flex;align-items:center;gap:.35rem;background:var(--bosco);color:#fff;
  font-size:.76rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.oc-ritiro .ico{width:13px;height:13px}
.oc-art{display:inline-flex;background:var(--salmone-bg);color:var(--salmone-tx);
  font-size:.74rem;font-weight:700;padding:.28rem .65rem;border-radius:999px}
.oc-tot{margin-top:.15rem}
.oc-tot span{display:block;font-size:.74rem;color:var(--muted)}
.oc-tot b{font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.oc-apri{display:inline-flex;align-items:center;gap:.4rem;margin-top:.2rem;
  padding:.5rem .95rem;border-radius:10px;font-size:.85rem;font-weight:700}
.oc-apri .ico{width:14px;height:14px}
.oc-mod{margin-top:.75rem}   /* niente linea di separazione (come nel Figma) */
.oc-mod-txt{display:block;font-size:.78rem;color:#D0872F;font-weight:600;line-height:1.45}
.oc-mod-txt b{color:#D0872F;white-space:nowrap}
.oc-mod-txt .ico{width:13px;height:13px;margin-right:.15rem;vertical-align:-.15em}
/* stesso colore della scritta sopra ("Puoi modificare l'ordine entro…") */
.oc-mod-link{display:inline-block;margin-top:.4rem;font-size:.78rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:#D0872F}
.oc-mod-link:hover{color:#B87424}
/* Archivio */
.arch-h{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--bosco);
  margin:1.6rem 0 .7rem}
.arch-list{display:flex;flex-direction:column;gap:.55rem}
.arch-card{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:.75rem .95rem;box-shadow:var(--shadow-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease)}
.arch-card:hover{border-color:#D8D0BE;box-shadow:var(--shadow-md)}
.arch-body{flex:1;min-width:0}
.arch-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-weight:800;font-size:.95rem;color:var(--ink)}
.arch-sub{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.arch-meta{font-size:.78rem;color:var(--muted);margin-top:.05rem}
.arch-arrow{flex:0 0 auto;font-size:1.5rem;color:#C9C2B2;line-height:1}

/* Pagina davvero ferma quando il pop-up quantita' e' aperto: il solo
   overflow:hidden non basta (su iOS il body continua a scorrere sotto). */
html.stop-scroll{overflow:hidden}
html.stop-scroll body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* Lo SFONDO sfocato copre SEMPRE tutta la pagina (anche l'area dietro la tastiera:
   senza questo restava una striscia nitida fra pop-up e tastiera). A spostarsi e'
   solo la CARD, che il JS centra nell'area visibile sopra la tastiera. */
#qta-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  display:block;overflow:hidden;overscroll-behavior:none;touch-action:none;padding:0}
/* centrata con i margini automatici, NON con transform: la card ha gia' una sua
   animazione d'ingresso che usa transform e cancellerebbe la centratura */
#qta-modal .ord-modal-card{position:absolute;left:0;right:0;margin:0 auto;
  top:var(--qm-top,15%);width:min(430px,calc(100% - 1.6rem));
  max-height:var(--qm-maxh,90%);overflow:auto;overscroll-behavior:contain;
  padding:1.3rem 1.3rem 1.1rem}
@media(max-height:520px){                     /* poco spazio: pop-up piu' compatto */
  #qta-modal .omc-title{font-size:1.1rem;margin-bottom:.2rem}
  #qta-modal .omc-text{margin-bottom:.3rem}
  #qta-modal #qm-input{font-size:1.35rem;padding:.4rem .5rem}
  #qta-modal .qm-hint{margin-bottom:.5rem}
  #qta-modal .omc-btn{padding:.6rem 1rem}
}

/* pop-up "scrivi la quantita'": alternativa ai tanti tocchi su +/- */
.qm-row{display:flex;align-items:center;gap:.6rem;justify-content:center;margin:.2rem 0 .5rem}
#qm-input{
  width:150px;text-align:center;font-size:1.6rem;font-weight:800;color:var(--bosco);
  border:2px solid var(--line);border-radius:12px;padding:.55rem .6rem;background:#fff;margin:0;
}
#qm-input:focus{outline:0;border-color:var(--verde-ok)}
.qm-unita{font-size:1.05rem;font-weight:700;color:var(--muted)}
.qm-hint{margin:0 0 1rem;font-size:.8rem;color:var(--muted);text-align:center}
/* la quantita' nel carrello si tocca per scriverla */
.cr-qty-edit{cursor:pointer;border-bottom:1px dashed var(--line)}
.cr-qty-edit:hover{color:var(--terra)}
.ai-lbl-qty{cursor:pointer}

/* invito a prenotare per la prossima data quando questa e' chiusa */
.os-cta{display:inline-flex;width:auto;margin-top:.7rem;padding:.7rem 1.1rem;font-size:.82rem}

/* avviso dell'admin su una data particolare (chiusura o cambio giorno) */
.ecc-avviso{display:flex;align-items:flex-start;gap:.7rem;margin:0 0 1rem;
  background:#EAF2E6;border-radius:14px;padding:.8rem 1rem}
.ecc-avviso.is-chiuso{background:#FBEAE2}
.ecc-avviso .ea-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:#fff;color:var(--verde-ok)}
.ecc-avviso.is-chiuso .ea-ico{color:var(--terra)}
.ecc-avviso .ea-ico .ico{width:18px;height:18px}
.ecc-avviso .ea-txt{flex:1;min-width:0;font-size:.86rem;color:#3A5741;line-height:1.45}
.ecc-avviso.is-chiuso .ea-txt{color:#7A4630}
.ecc-avviso .ea-txt b{display:block;color:var(--bosco);margin-bottom:.1rem}
.ecc-avviso.is-chiuso .ea-txt b{color:var(--terra-d)}

/* banner "stai modificando l'ordine #N" nella pagina ordine */
.mod-banner{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem;
  background:#FBF3DC;border:1px solid #EBD48D;border-radius:14px;padding:.7rem .9rem}
.mod-banner .mb-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:#F2DFA6;color:#7A5F22}
.mod-banner .mb-ico .ico{width:18px;height:18px}
.mod-banner .mb-txt{flex:1;min-width:0;font-size:.85rem;color:#6B5220;line-height:1.4}
.mod-banner .mb-txt b{color:#4F3D16}
.mod-banner .mb-esci{flex:0 0 auto;font-size:.78rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#7A5F22;border:1.5px solid #D9BE6F;border-radius:9px;
  padding:.4rem .7rem;transition:background var(--t-fast) var(--ease)}
.mod-banner .mb-esci:hover{background:#F2DFA6;color:#6B5220}

/* card ordine con MODIFICHE IN CORSO (bozza sul dispositivo): spenta e non apribile,
   il tocco riprende la modifica */
.oc-card.in-modifica > *:not(.oc-editing){opacity:.45;filter:saturate(.7)}
.oc-editing{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin:-0.35rem 0 .6rem;background:#FBF3DC;border:1px solid #EBD48D;border-radius:10px;
  padding:.45rem .65rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#7A5F22}
.oc-editing .oce-cta{color:#B4512F;white-space:nowrap}

/* stato vuoto "non hai ancora ordini": card centrata con icona, testo e CTA */
.oc-empty{max-width:420px;margin:1.6rem auto 0;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-sm);padding:2.2rem 1.6rem;text-align:center}
.oc-empty .oce-ico{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:#EAF2E6;color:var(--verde-ok);margin-bottom:.9rem}
.oc-empty .oce-ico .ico{width:30px;height:30px;stroke-width:1.7}
.oc-empty h2{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--bosco);margin:0 0 .45rem}
.oc-empty p{margin:0 0 1.25rem;font-size:.9rem;color:var(--muted);line-height:1.55}
.oc-empty .btn-cta{display:inline-flex}
/* dettaglio ordine: intestazione Figma — [‹] Ordine #N .... [Riordina], stato sotto */
.ord-head{align-items:center;gap:.7rem;margin-bottom:.35rem;flex-wrap:nowrap}
.ord-head h1{flex:1;min-width:0;font-family:var(--serif);font-size:1.95rem;font-weight:700;
  color:var(--bosco);letter-spacing:-.01em;line-height:1.1}
.btn-riordina{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:#F2DFA6;color:#7A5F22;border:0;border-radius:12px;
  padding:.62rem 1.1rem;font-size:.95rem;font-weight:700;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn-riordina .ico{width:16px;height:16px;stroke-width:2.2}
@media(max-width:520px){
  /* con l'icona il bottone deve restare di fianco al titolo: piu' compatto */
  .btn-riordina{padding:.55rem .8rem;font-size:.88rem;gap:.35rem}
  .btn-riordina .ico{width:14px;height:14px}
}
.btn-riordina:hover{background:#EBD48D;color:#6B5220}
.btn-riordina:active{transform:scale(.97)}
.ord-stato{margin-bottom:.9rem}
@media(min-width:861px){ .ord-head h1{font-size:2.3rem} }

/* dettaglio: QR nudo a sinistra + spiegazione a destra, come nello screenshot Figma
   (stessa disposizione anche su telefono: QR compatto, card bianca SENZA bordo) */
.qr-box{display:flex;align-items:center;gap:1rem;background:#fff;border:0;
  border-radius:18px;padding:1rem 1.1rem;box-shadow:var(--shadow-sm);margin-top:.9rem}
.qr-grande{flex:0 0 auto;width:132px;height:132px;display:block;cursor:zoom-in;border-radius:4px}
@media(max-width:520px){
  .qr-box{gap:.8rem;padding:.9rem 1rem}
  .qr-grande{width:96px;height:96px}
  .qrb-txt b{font-size:.95rem;white-space:nowrap}   /* una riga, come nel mock */
  .qrb-txt p{font-size:.78rem}
}
.qrb-txt{flex:1;min-width:0}
.qrb-txt b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--ink);
  margin-bottom:.2rem}
.qrb-txt p{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}

/* dettaglio: gli articoli NON hanno un contenitore bianco (poggiano sul crema) */
.ordx-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;margin-top:1.3rem}
.ordx-h{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--bosco);margin:0 0 .5rem}
.ordx-riga{padding:.6rem 0;border-bottom:1px solid var(--line)}
.ordx-riga:last-of-type{border-bottom:0}
.ordx-nome{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.35rem}
.ordx-sc{display:inline-block;margin-left:.35rem;background:var(--rosso);color:#fff;
  font-family:var(--ui);font-size:.68rem;font-weight:800;padding:.1rem .45rem;border-radius:6px;vertical-align:middle}
/* 3 colonne su UNA riga anche su telefono (nel Figma stanno in linea) */
/* colonne dell'articolo DISTRIBUITE su tutta la larghezza: quantita' a sinistra,
   prezzo al centro, totale allineato al bordo destro */
.ordx-cols{display:flex;gap:.7rem;flex-wrap:nowrap;justify-content:space-between}
.ordx-col{flex:0 1 auto;min-width:0}
.ordx-col:last-child{text-align:right}
.ordx-col .eyebrow{font-size:.6rem}
.ordx-col b{display:block;font-size:.88rem;font-weight:700;color:var(--ink);margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:520px){
  .ordx-col b{font-size:.95rem}
}
.ordx-col .ordx-verde{color:var(--verde-ok)}
.ordx-col s{color:var(--muted);font-weight:500;font-size:.82rem}
.ordx-note{margin:.8rem 0 .2rem}
.ordx-note-box{margin-top:.3rem;background:#FAF8F2;border:1px solid #EEE9DA;border-radius:10px;
  padding:.6rem .75rem;font-size:.88rem;color:var(--ink);line-height:1.45}
.ordx-card .ordr-totale{margin-top:.9rem}
.ordx-disc{margin:.55rem 0 0;font-size:.72rem;color:var(--muted);line-height:1.45}
/* niente linea sopra la sezione "Annulla questo ordine" (arancione/rossa) */
.annulla-box{padding-top:0;border-top:0;margin-top:1.5rem}
.annulla-box .small{color:var(--muted)}

/* ============================================================
   F5 — Registrazione a passi (wizard Figma)
   ============================================================ */
.wz-body{background:var(--crema)}
.wz-wrap{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:18px 14px;padding-top:max(18px,env(safe-area-inset-top));
  padding-bottom:max(18px,env(safe-area-inset-bottom))}
.wz-card{width:min(430px,100%);background:#FDFBF6;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-md);padding:1.3rem 1.25rem 1.1rem;overflow:hidden}
.wz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.wz-logo{width:40px;height:40px;border-radius:50%}
.wz-brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--bosco)}
.wz-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.wz-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.wz-passo{font-size:.78rem;color:var(--muted)}
.wz-passo b{color:var(--ink)}
.wz-bar{height:4px;border-radius:99px;background:#EDE5D8;overflow:hidden;margin-bottom:1.2rem}
.wz-bar span{display:block;height:100%;width:20%;border-radius:99px;background:var(--terra);
  transition:width .4s var(--ease)}
.wz-title{font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--bosco);
  letter-spacing:-.01em;line-height:1.15;margin:0 0 .45rem}
.wz-sub{margin:0 0 1.1rem;font-size:.9rem;color:var(--muted);line-height:1.5}
/* campo con icona a sinistra */
.wz-field{position:relative;display:block;margin:0}
.wz-field .wz-ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--muted);
  display:flex;pointer-events:none}
.wz-field .wz-ico .ico{width:17px;height:17px}
.wz-field input{padding:.85rem 1rem .85rem 2.6rem;font-size:1rem;border-radius:12px;margin:0}
/* ── invito alle notifiche push: striscia discreta sopra il contenuto ── */
.push-invito{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--terra);
  border-radius:12px;padding:.65rem .9rem;margin:0 0 1rem;
  box-shadow:0 2px 10px rgba(36,56,42,.06)}
.push-invito .pi-ico{display:flex;color:var(--terra)}
.push-invito .pi-ico .ico{width:20px;height:20px}
.push-invito .pi-txt{flex:1;min-width:200px;font-size:.88rem;line-height:1.35}
.push-invito .pi-txt b{display:block;color:var(--bosco)}
.push-invito .pi-btns{display:flex;gap:.45rem}
.push-invito .pi-si{background:var(--terra);color:#fff;border:0;border-radius:9px;
  padding:.5rem .95rem;font-weight:700;cursor:pointer}
.push-invito .pi-no{background:transparent;color:var(--muted);border:0;padding:.5rem .4rem;
  cursor:pointer;font-weight:600}
.push-invito.ok{border-left-color:var(--verde-ok)}
.push-invito.ok .pi-ico{color:var(--verde-ok)}

/* ── cartellino "installa l'app": fisso in basso, mai invadente ── */
.app-invito{position:fixed;left:.8rem;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:.7rem;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;
  box-shadow:0 8px 30px rgba(36,56,42,.18);max-width:520px;margin:0 auto;
  animation:appInvitoSu .35s var(--ease, ease) both}
@keyframes appInvitoSu{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.app-invito .app-logo{width:38px;height:38px;border-radius:9px;flex:0 0 auto}
.app-invito .app-txt{flex:1;min-width:0;font-size:.85rem;line-height:1.35;color:var(--ink)}
.app-invito .app-txt b{display:block;color:var(--bosco)}
.app-invito .app-btns{display:flex;flex-direction:column;gap:.3rem;flex:0 0 auto}
.app-invito .app-si{background:var(--terra);color:#fff;border:0;border-radius:9px;
  padding:.45rem .9rem;font-weight:700;cursor:pointer}
.app-invito .app-no{background:transparent;color:var(--muted);border:0;padding:.2rem .4rem;
  cursor:pointer;font-weight:600;font-size:.8rem}

/* cambio password obbligatorio: la card del wizard dentro l'area cliente */
.cambia-pwd-card{max-width:440px;margin:1rem auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:1.4rem 1.3rem;box-shadow:0 10px 34px rgba(36,56,42,.08)}
.cambia-pwd-card .wz-req li.muted{color:var(--muted)}

/* nome + cognome: due campi distinti, ognuno con la sua etichetta sopra */
.wz-duo{display:grid;gap:.75rem}
.wz-lab-t{display:block;font-size:.78rem;font-weight:700;color:var(--ink);margin:0 0 .3rem}
/* campo da correggere: con due campi vicini deve saltare all'occhio quale */
.wz-field input.wz-ko,.wz-field input.wz-ko:focus{border-color:#B4432E;box-shadow:0 0 0 3px rgba(180,67,46,.13)}
/* autocomplete comune: tendina attaccata al campo */
.wz-combo{position:relative}
.wz-tendina{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:.3rem;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(36,56,42,.14);max-height:262px;overflow:auto}
.wz-tendina li{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.55rem .65rem;border-radius:8px;cursor:pointer;font-size:.92rem}
.wz-tendina li b{font-weight:600;color:var(--ink)}
.wz-tendina li span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.wz-tendina li:hover,.wz-tendina li.on{background:#f6f2e9}
.wz-tel{display:flex;gap:.5rem}
.wz-prefisso{flex:0 0 auto;display:flex;align-items:center;padding:0 .9rem;border:1px solid var(--line);
  border-radius:12px;background:#fff;font-weight:700;color:var(--ink)}
.wz-field-tel{flex:1}
.wz-hint{margin:.45rem 0 0;font-size:.78rem;color:var(--muted)}
.wz-err{margin:.5rem 0 0;font-size:.82rem;font-weight:600;color:#B4432E;line-height:1.4}
/* illustrazione del passo: SVG disegnato, angoli morbidi e larghezza piena */
.wz-art{display:block;width:100%;height:auto;margin-top:1.1rem;border-radius:14px}
/* password: requisiti dal vivo */
.wz-plabel{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.8rem}
.wz-req{list-style:none;margin:.2rem 0 0;padding:0}
.wz-req li{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);padding:.12rem 0}
.wz-req li .ico{width:14px;height:14px;color:#CFC9BB}
.wz-req li.ok{color:var(--verde-ok)}
.wz-req li.ok .ico{color:var(--verde-ok)}
/* piedi */
.wz-foot{display:flex;gap:.6rem;margin-top:1.2rem}
.wz-back{flex:0 0 auto;background:transparent;border:0;color:var(--muted);font-weight:700;
  font-size:.9rem;padding:.8rem .7rem;border-radius:10px}
.wz-back:hover{background:var(--crema);color:var(--ink)}
.wz-next{flex:1}
.wz-login{margin:.9rem 0 0;text-align:center;font-size:.85rem;color:var(--muted)}
/* animazione tra i passi: entra da destra (avanti) o da sinistra (indietro) */
@keyframes wzInRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes wzInLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.wz-in-right{animation:wzInRight .3s var(--ease) both}
.wz-in-left{animation:wzInLeft .3s var(--ease) both}
@keyframes wzShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}50%{transform:translateX(-2px)}}
.wz-shake{animation:wzShake .4s ease}
@media (prefers-reduced-motion: reduce){
  .wz-in-right,.wz-in-left,.wz-shake{animation:none}
}

/* ── ingresso morbido dei contenuti (fluido e lineare) ─────── */
@keyframes cwFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up{animation:cwFadeUp var(--t-med) var(--ease) both}
@media (prefers-reduced-motion: reduce){
  .fade-up{animation:none}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   F2 — Nuovo ordine (Figma): testata, catalogo, carrello
   ============================================================ */

/* ── testata: card "quando" + card "Dove ci trovi?" ────────── */
.testata-ordine{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:1rem}
@media(min-width:861px){ .testata-ordine{grid-template-columns:1fr 1.25fr;align-items:stretch} }
.t-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;
  box-shadow:var(--shadow-sm)}
.t-chip{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:.8rem;font-weight:600;color:var(--ink)}
.t-chip .ico{width:1.35em;height:1.35em;color:var(--terra);stroke-width:2.1}   /* pin piu' grande */
/* data: stesso font e stesso COLORE di "Dove ci trovi?" (sans bold, ink) */
.t-data{font-family:var(--ui);font-size:1.4rem;font-weight:800;color:var(--ink);
  margin-top:.5rem;letter-spacing:-.015em;line-height:1.2}
/* giorno del mercato con l'iniziale maiuscola ("Sabato 15 agosto"): solo qui,
   le frasi discorsive e le email restano minuscole */
.t-data::first-letter{text-transform:uppercase}
.t-data-nav{display:flex;align-items:center;gap:.5rem;margin-top:.45rem}
.t-data-nav .t-data{margin-top:0;flex:1;text-align:center}
.t-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--bosco);flex:0 0 auto;
  transition:background var(--t-fast) var(--ease)}
.t-arrow svg{width:17px;height:17px}
.t-arrow:hover{background:var(--crema)}
.t-arrow.is-off{opacity:.3;pointer-events:none}
.t-select{margin-top:.55rem;font-size:.86rem;padding:.5rem .6rem}
/* "Prenota entro": arancio-oro come nel Figma (icona e testo dello stesso colore) */
.t-deadline{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-size:.84rem;font-weight:600;color:#D0872F}
.t-deadline .ico{width:1.05em;height:1.05em;color:#D0872F;stroke-width:2.1}
.t-deadline b{font-weight:700;color:#D0872F}
.t-deadline.t-chiuso{color:#933422}
.t-deadline.t-chiuso .ico{color:#933422}
/* Figma: icona+titolo/indirizzo sopra, poi riga "Orario: …" con il bottone Mappa a destra */
.t-dove{display:flex;flex-direction:column;justify-content:center;gap:.7rem}
.t-dove-head{display:flex;align-items:center;gap:.85rem}
.t-dove-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:#FBEAE2;
  display:flex;align-items:center;justify-content:center;color:var(--terra)}
.t-dove-ico .ico{width:22px;height:22px}
.t-dove-txt{flex:1;min-width:0}
.t-dove-txt b{display:block;font-size:.95rem;color:var(--ink)}
.t-dove-txt span{font-size:.8rem;color:var(--muted);line-height:1.35}
.t-dove-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.t-orario{font-size:.86rem;color:var(--ink);font-weight:500}
.t-mappa{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .9rem;border-radius:10px;font-size:.85rem;font-weight:700}
.t-mappa .ico{width:14px;height:14px}

/* ── ricerca: pill con lente ───────────────────────────────── */
.searchbar input{
  border-radius:999px;padding:.68rem 1rem .68rem 2.5rem;font-size:.95rem;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat .95rem center/16px;
}

/* ── chip categorie: pill bianche, attiva terracotta piena.
      Stanno SEMPRE dentro la larghezza dello schermo: si distribuiscono nella
      banda (flex:1) e, se proprio non entrano, vanno a capo — mai scroll. ── */
#cat-chips{width:auto;margin:0 0 .35rem;padding:.45rem 0;background:var(--crema);gap:.4rem;
  flex-wrap:wrap;overflow:visible}
#cat-chips .cat-chip{flex:1 1 auto;justify-content:center;min-width:0}
.cat-chip{background:#fff;border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.85rem;padding:.44rem .9rem;border-radius:999px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.cat-chip:hover{border-color:#D8D0BE}
.cat-chip.on{background:var(--terra);border-color:var(--terra);color:#fff;box-shadow:none}
.cat-chip .cat-emoji .ico{stroke-width:2}

/* ── intestazioni sezione: serif + conteggio ───────────────── */
.cat-section{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.cat-section:first-of-type{border-top:0;margin-top:.2rem}
.cat-head{font-family:var(--serif);font-size:1.28rem;font-weight:700;color:var(--bosco);gap:.5rem}
.cat-head .cat-emoji{color:var(--bosco)}
.cat-head .cat-emoji .ico{width:20px;height:20px}
.cat-head .cat-count{background:#fff;border:1px solid var(--line);color:var(--muted);
  min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:0 .45rem;font-size:.72rem}

/* ── il catalogo NON ha un contenitore bianco nel Figma: le card
      poggiano direttamente sullo sfondo crema ──────────────── */
.catalogo{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}

/* ── griglia e card prodotto (Figma) ───────────────────────── */
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.75rem}
/* Card ad altezza UNIFORME: la foto e' sganciata dal flusso (assoluta a sinistra),
   cosi' le proporzioni dell'immagine non allungano la scheda; l'altezza dipende solo
   dal testo, ed e' garantita da min-height uguale per tutti (con o senza toggle). */
.art-item{
  position:relative;display:block;min-height:138px;
  padding-left:104px;                     /* colonna della foto */
  background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;                        /* la foto tocca i bordi della card */
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease),
             transform var(--t-med) var(--ease);
}
.art-item:hover{box-shadow:var(--shadow-md);transform:none}
.art-item.in-cart{border-color:var(--bosco);background:#fff;box-shadow:var(--shadow-sm)}
.art-item.esaurito{opacity:1}
.art-item.esaurito .ai-foto{filter:grayscale(1);opacity:.85}
.art-item.esaurito .ai-desc{color:var(--muted)}
/* sconto BEN in risalto: bordo rosso pieno, fondo caldo, alone tenue e
   badge angolare con la percentuale intera ("−15%") */
.art-item.is-sconto{border:2px solid var(--rosso);
  background:linear-gradient(180deg,#FFFDFA,#FFF6F1);
  box-shadow:0 4px 16px -6px rgba(232,67,45,.25)}
.art-item.is-sconto:hover{box-shadow:0 6px 20px -6px rgba(232,67,45,.32)}
.ai-sconto-badge{position:absolute;top:0;right:0;z-index:2;
  background:var(--rosso);color:#fff;font-size:.8rem;font-weight:800;
  padding:.26rem .75rem;border-radius:0 0 0 12px;letter-spacing:.01em;
  box-shadow:0 3px 8px -2px rgba(232,67,45,.4)}
/* solo la PRIMA riga del nome lascia posto al badge (le righe successive
   usano tutta la larghezza: niente titoli incolonnati) */
.art-item.is-sconto .ai-desc::before{content:"";float:right;width:60px;height:1.1em}
/* foto a tutto bordo, altezza sempre pari a quella della card */
.ai-foto{position:absolute;left:0;top:0;bottom:0;width:104px;height:100%;
  object-fit:cover;border-radius:0;background:#EDE9DE}
.ai-foto-empty{display:flex;align-items:center;justify-content:center;color:#C4BEAE}
.ai-foto-empty .ico{width:28px;height:28px;stroke-width:1.6}
.ai-main{min-width:0;height:100%;display:flex;flex-direction:column;gap:.1rem;
  padding:.55rem .65rem}                  /* compatto ma leggibile */
/* nome su max 2 righe, con l'altezza SEMPRE riservata: cosi' un nome corto e uno
   lungo producono card della stessa altezza */
.ai-desc{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.18;
  min-height:2.36em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* riga prezzo: prezzo a sinistra, toggle unita' a destra (come nel Figma).
   min-height = altezza del toggle, cosi' le card SENZA toggle restano identiche */
.ai-prezzo-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  flex-wrap:nowrap;min-height:39px}   /* = altezza della riga quando c'e' il toggle */
.ai-prezzo{min-width:0;white-space:nowrap}
/* toggle unita' IDENTICO al Figma: traccia crema con margine interno.
   Il colore terracotta e' un CURSORE (.ai-un-thumb) che SCIVOLA da una voce
   all'altra; i bottoni restano trasparenti e cambia solo il colore del testo. */
.ai-unita-toggle{position:relative;display:inline-flex;gap:0;background:#EDE5D8;border:0;
  border-radius:9px;overflow:visible;padding:3px;flex:0 0 auto}
.ai-un-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:0;border-radius:6px;
  background:var(--terra);
  transition:left .3s cubic-bezier(.3,.85,.35,1.1),width .3s cubic-bezier(.3,.85,.35,1.1)}
.ai-un{position:relative;z-index:1;border:0;border-radius:6px;background:transparent;color:#7A756A;
  font-size:.78rem;font-weight:800;padding:.3rem .7rem;cursor:pointer;line-height:1.1;
  transition:color .22s var(--ease)}
.ai-un:hover{background:transparent;color:#5C574C}
.ai-un + .ai-un{border-left:0}
.ai-un.on{background:transparent;color:#fff;box-shadow:none}
@media (prefers-reduced-motion: reduce){ .ai-un-thumb{transition:none} }
.ai-prezzo{font-size:1.04rem}
.ai-prezzo .ai-val{color:var(--verde-ok);font-weight:700}
.ai-prezzo .ai-val.is-sc{color:var(--rosso)}
.ai-prezzo .ai-old{color:var(--muted);text-decoration:line-through;font-size:.84rem;margin-right:.15rem}
.ai-prezzo .ai-per{color:var(--muted);font-size:.82rem}
.ai-min{font-size:.78rem;color:var(--muted)}
.ai-stock{font-size:.76rem;font-weight:700;color:var(--terra)}
/* ── AZIONE: la barra "Aggiungi" SI DIVIDE nei due bottoni ──────────
   I due bottoni scuri esistono sempre. A riposo sono larghi il 50% e
   attaccati (raggi complementari): sembrano una barra unica con sopra
   l'etichetta bianca "+ Aggiungi". Con .in-cart si stringono a 34px e
   scorrono ai lati: la barra si apre e in mezzo compare la quantita'.  */
.ai-azione{position:relative;margin-top:auto;padding-top:.35rem;
  display:flex;align-items:center;justify-content:space-between;gap:0}
.ai-minus,.ai-plus{
  width:50%;height:34px;flex:0 0 auto;border:0;font-size:1.2rem;line-height:1;
  background:var(--bosco);color:#fff;box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  transition:width .38s var(--ease),border-radius .38s var(--ease),background var(--t-fast) var(--ease);
}
.ai-minus{border-radius:9px 0 0 9px}
.ai-plus{border-radius:0 9px 9px 0}
.art-item.in-cart .ai-minus,.art-item.in-cart .ai-plus{width:34px;border-radius:9px}
.ai-minus:hover,.ai-plus:hover{background:var(--bosco-2)}
/* i segni − + si accendono solo quando i due bottoni si sono separati */
.ai-sign{opacity:0;transform:scale(.7);
  transition:opacity .2s var(--ease) .12s,transform .26s var(--ease) .12s}
.art-item.in-cart .ai-sign{opacity:1;transform:none}
/* etichette al centro: "+ Aggiungi" (sopra la barra unita) e la quantita' */
.ai-lbl{position:absolute;inset:.35rem 0 0 0;display:flex;align-items:center;justify-content:center;
  gap:.4rem;pointer-events:none;transition:opacity .22s var(--ease),transform .3s var(--ease)}
.ai-lbl-add{color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;font-weight:700}
.ai-lbl-add .ico{width:14px;height:14px;stroke-width:2.6}
.ai-lbl-qty{color:var(--ink);font-weight:700;font-size:.95rem;opacity:0;transform:scale(.86)}
.art-item.in-cart .ai-lbl-add{opacity:0;transform:scale(.9)}
.art-item.in-cart .ai-lbl-qty{opacity:1;transform:none;transition-delay:.1s}
/* si tocca SOLO il numero (l'etichetta e' larga quanto la barra: se prendesse lei
   i clic coprirebbe i bottoni + e −) */
.ai-qty-hit{font-weight:inherit;font-size:inherit;color:inherit}
.art-item.in-cart .ai-qty-hit{pointer-events:auto;cursor:pointer;
  padding:.18rem .55rem;border-radius:8px;transition:background var(--t-fast) var(--ease)}
.art-item.in-cart .ai-qty-hit:hover{background:rgba(38,51,43,.08)}
.art-item.in-cart .ai-qty-hit:active{background:rgba(38,51,43,.14)}
.art-item.qty-bump .ai-lbl-qty{transform:scale(1.14);transition-duration:.12s;transition-delay:0s}
@media (prefers-reduced-motion: reduce){
  .ai-minus,.ai-plus,.ai-sign,.ai-lbl{transition:none}
}
/* prodotto non ordinabile: riquadro a TUTTA larghezza come prima (dentro .ai-azione
   e' un flex item, senza flex-basis si stringeva sul testo), testo centrato */
.ai-nd{flex:1 1 100%;width:100%;
  display:flex;align-items:center;justify-content:center;height:34px;
  background:#EFEAE0;color:#9A937F;border-radius:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-align:center}

/* ── layout a 2 colonne col carrello sidebar (desktop) ─────── */
@media(min-width:861px){
  .ordine-layout{display:grid;grid-template-columns:1fr 330px;gap:1.1rem;align-items:start}
  .carrello{position:sticky;top:calc(var(--topbar-h,58px) + 14px);
    max-height:calc(100dvh - var(--topbar-h,58px) - 28px);overflow:auto}
  .cart-bar,.cart-backdrop,.sheet-grab{display:none!important}
}

/* ── carrello: card bianca (sidebar) / bottom-sheet (mobile) ─ */
.carrello{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.05rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.sheet-grab{width:100%;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--muted);padding:.1rem 0 .35rem;cursor:pointer}
.sheet-grab svg{width:22px;height:22px}
.sheet-grab:hover{background:transparent;color:var(--bosco)}
.sheet-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.4rem}
.sheet-head h2{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--bosco);margin:0}
.crt-pill{margin-left:auto;background:var(--salmone-bg);color:var(--salmone-tx);
  font-size:.72rem;font-weight:700;padding:.24rem .6rem;border-radius:999px;white-space:nowrap}

/* cambio del totale: la cifra nuova ENTRA con uno scatto verticale (dal basso se
   il totale sale, dall'alto se scende) e si assesta. Niente conteggio progressivo. */
@keyframes tot-su{
  0%{transform:translateY(60%);opacity:0}
  55%{transform:translateY(-9%);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@keyframes tot-giu{
  0%{transform:translateY(-60%);opacity:0}
  55%{transform:translateY(9%);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
#tot-doc,#bar-tot{display:inline-block;will-change:transform}
#tot-doc.tot-su,#bar-tot.tot-su{animation:tot-su .34s cubic-bezier(.25,.9,.3,1.05)}
#tot-doc.tot-giu,#bar-tot.tot-giu{animation:tot-giu .34s cubic-bezier(.25,.9,.3,1.05)}
@media (prefers-reduced-motion: reduce){
  #tot-doc.tot-su,#bar-tot.tot-su,#tot-doc.tot-giu,#bar-tot.tot-giu{animation:none}
}

/* pop del contatore articoli: quando aggiungi un prodotto la pill "scoppietta"
   (scala con overshoot + lampo verde) e torna da sola ai suoi colori */
@keyframes pill-pop{
  0%{transform:scale(1)}
  30%{transform:scale(1.32);background:var(--verde-ok);color:#fff}
  70%{transform:scale(1.06);background:var(--verde-ok);color:#fff}
  100%{transform:scale(1)}
}
.crt-pill.pill-pop,.cb-pill.pill-pop{
  animation:pill-pop .55s cubic-bezier(.3,.85,.35,1.15)}
@media (prefers-reduced-motion: reduce){
  .crt-pill.pill-pop,.cb-pill.pill-pop{animation:none}
}
.sheet-actions{display:flex;align-items:center;gap:.3rem}
.sheet-close{display:none}
.cart-clear{display:inline-flex;align-items:center;gap:.3rem;background:transparent;
  border:1px solid var(--line);color:var(--muted);font-size:.74rem;font-weight:700;
  padding:.3rem .55rem;border-radius:8px}
.cart-clear:hover{background:#FAECEB;color:#933422;border-color:#F0D5D5}
.cart-clear .ico{width:13px;height:13px}
/* stato vuoto: ampio e centrato come nel Figma */
.crt-empty{text-align:center;padding:2.4rem .8rem 2.6rem}
.crt-empty-ico{display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;border-radius:50%;background:var(--crema);color:#B9B29E;margin-bottom:.85rem}
.crt-empty-ico .ico{width:30px;height:30px;stroke-width:1.5}
.crt-empty b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:700;color:var(--ink)}
.crt-empty p{margin:.3rem auto 0;font-size:.8rem;color:var(--muted);line-height:1.45;max-width:24ch}
/* righe: compatte — nome, "Totale: € X" e stepper sulla stessa banda */
.cart-rows{margin:.25rem 0 .4rem;max-height:none}
.cart-row{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
  padding:.45rem 0;background:transparent}
.cart-row:last-child{border-bottom:0}
.cr-main{align-items:center}
.cr-desc{font-family:var(--serif);font-weight:700;font-size:.95rem;line-height:1.2}
.cr-line{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.15rem}
.cr-tot{min-width:0}
.cr-subtot{font-size:.82rem;color:var(--muted)}
.cr-subtot b{color:var(--bosco);font-size:.9rem}
.cr-sc{color:var(--rosso);font-weight:700}
.cr-step{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto}
.cr-step button{width:29px;height:29px;border-radius:7px;background:var(--bosco);color:#fff;font-size:1.05rem}
.cr-step button:hover{background:var(--bosco-2)}
.cr-qty{min-width:48px;text-align:center;font-weight:700;font-size:.85rem;white-space:nowrap}
.cr-del{background:transparent;border:0;color:#C9B9B2;width:26px;height:26px}
.cr-del:hover{background:#FAECEB;color:#B44B36;border:0}
.cr-del .ico{width:15px;height:15px}
/* totale + note + CTA */
.cart-tot{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.25rem}
.cart-tot .grand{display:flex;align-items:baseline;justify-content:space-between}
.cart-tot .grand span{font-size:.92rem;font-weight:600;color:var(--ink)}
.cart-tot .grand b{font-size:1.45rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.crt-note{margin:.3rem 0 0;font-size:.7rem;color:var(--muted);line-height:1.45}
#order-form{margin-top:.75rem}
#order-form textarea{font-size:.85rem;min-height:64px}
#order-form .eyebrow{margin-bottom:.3rem}
#btn-salva{margin-top:.6rem}
#btn-salva .ico{width:15px;height:15px}

/* ── F3: pop-up "Quando vuoi ritirare l'ordine?" (Figma) ───── */
.orario-modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(36,56,42,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:.6rem;animation:cwFadeUp .22s var(--ease);
}
.orario-modal.closing{opacity:0;transition:opacity .2s var(--ease)}
.om-card{
  position:relative;background:#FDFBF6;border-radius:20px;box-shadow:var(--shadow-lg);
  width:min(560px,100%);max-height:min(94dvh,860px);overflow:auto;
  padding:1.6rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom));
}
.om-close{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.om-close:hover{background:var(--crema);color:var(--ink)}
.om-close .ico{width:16px;height:16px}
.om-title{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--bosco);
  margin:0 0 .4rem;padding-right:2.4rem;line-height:1.2}
.om-sub{margin:0 0 1.1rem;font-size:.88rem;color:var(--muted);line-height:1.5}
.om-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.2rem}
.om-slot{
  display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.7rem .8rem;
  cursor:pointer;margin:0;transition:border-color var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.om-slot input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.om-time{font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.om-lvl{font-size:.66rem;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.om-consigliato .om-lvl{color:var(--teal-tx)}
.om-affollato .om-lvl{color:var(--salmone-tx)}
/* stato selezionato: riempimento tenue + bordo del suo colore (Figma) */
.om-slot:has(input:checked){border-color:var(--teal-bd);background:var(--teal-bg);
  box-shadow:0 0 0 1px var(--teal-bd)}
.om-affollato:has(input:checked){border-color:var(--salmone-tx);background:var(--salmone-bg);
  box-shadow:0 0 0 1px var(--salmone-tx)}
.om-slot:hover{border-color:#D8D0BE}
@media(max-width:400px){ .om-time{font-size:.92rem} }

/* ── mobile: bottom-sheet con maniglia + barra collassata ──── */
@media(max-width:860px){
  .carrello{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:60;
    transform:translateY(105%);transition:transform .34s var(--ease);
    border-radius:20px 20px 0 0;border-bottom:0;max-height:88dvh;overflow:auto;
    box-shadow:0 -12px 40px -12px rgba(36,56,42,.35);
    padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  }
  body.cart-open .carrello{transform:none}
  .cart-backdrop{position:fixed;inset:0;z-index:55;background:rgba(36,56,42,.35);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.cart-open .cart-backdrop{opacity:1;pointer-events:auto}
  body.cart-open{overflow:hidden}
  /* Tendina carrello come nel Figma: freccia verde grande, "Carrello" serif,
     pill articoli, riga "Totale stimato" e bottone INVIA ORDINE gia' pronto. */
  .cart-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;width:auto;display:block;
    background:#fff;border:1px solid var(--line);border-bottom:0;
    border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -12px rgba(36,56,42,.3);
    padding:.3rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
    transition:transform .3s var(--ease);
  }
  body.cart-open .cart-bar{transform:translateY(110%)}
  /* la parte "apri" e' un bottone: niente colore ereditato dai bottoni pieni */
  .cb-open{display:block;width:100%;padding:0;background:transparent;color:var(--ink);
    border:0;border-radius:0;text-align:left;cursor:pointer}
  .cb-open:hover,.cb-open:active{background:transparent;transform:none}
  .cb-grab{display:flex;justify-content:center;color:var(--pri-d);padding:0 0 .1rem}
  .cb-grab svg{width:34px;height:11px}   /* piatta e larga: poco spazio sopra "Carrello" */
  .cb-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
  .cb-title{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.1}
  .cb-pill{background:var(--salmone-bg);color:var(--salmone-tx);font-size:.78rem;font-weight:700;
    padding:.28rem .7rem;border-radius:999px;white-space:nowrap}
  .cb-tot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:.3rem}
  .cb-tot span{font-size:.95rem;color:var(--muted)}
  .cb-tot b{font-size:1.35rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  #bar-invia{margin-top:.7rem}
  #bar-invia .ico{width:15px;height:15px}
  .cart-bar.is-empty #bar-invia{display:none}   /* carrello vuoto: tendina compatta */
  /* barra categorie a TUTTA l'ampiezza dello schermo (full-bleed), con le chip
     distribuite dentro: su telefono niente icona (come nel Figma mobile), cosi'
     entrano tutte in una riga senza scorrimento */
  #cat-chips{width:100vw;margin-left:calc(50% - 50vw);margin-right:0;
    padding-left:.7rem;padding-right:.7rem;border-radius:0;gap:.35rem}
  #cat-chips .cat-chip{padding:.44rem .5rem;font-size:.82rem;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  #cat-chips .cat-chip .cat-emoji{display:none}
  /* Niente spazio vuoto dopo il footer: il vecchio CSS riservava 80/132px in fondo
     al body per la tabbar (rimossa nel redesign). Ora la pagina finisce ESATTAMENTE
     col footer e la barra del carrello si ferma alla sua fine: e' il footer stesso a
     riservare l'altezza della barra (--cartbar-h, misurata da ordine.js), cosi' la
     banda verde arriva fino in fondo e non copre nessun testo. */
  body,body:has(.cart-bar){padding-bottom:0}
  body > main.container{padding-bottom:1.2rem}   /* stessa specificita' della regola base */
  body:has(.cart-bar) footer.foot{padding-bottom:calc(var(--cartbar-h,64px) + .6rem)}

  /* ── gerarchia testi e tocchi piu' generosi su telefono ──── */
  .ai-desc{font-size:1.1rem}                        /* nome prodotto ben in evidenza */
  .ai-prezzo{font-size:1.02rem}
  .ai-prezzo .ai-per{font-size:.8rem}
  .ai-min{font-size:.79rem}
  .ai-un{font-size:.76rem;padding:.28rem .58rem}    /* toggle resta in linea col prezzo */
  .ai-prezzo-row{min-height:38px}                   /* = altezza riga col toggle */
  .ai-lbl-add{font-size:.8rem}                      /* bottone AGGIUNGI da pollice */
  .ai-minus,.ai-plus{height:40px;font-size:1.3rem}
  .art-item.in-cart .ai-minus,.art-item.in-cart .ai-plus{width:40px;border-radius:10px}
  .ai-nd{height:40px}
  .ai-lbl-qty{font-size:1rem}                       /* quantita' ordinata leggibile */
  .ai-foto{width:108px}
  .art-item{padding-left:108px;min-height:148px}
  .cat-head{font-size:1.4rem}
  /* righe carrello: leggibili senza tornare ingombranti */
  .cr-desc{font-size:1.06rem}
  .cr-subtot{font-size:.9rem}
  .cr-subtot b{font-size:1rem}
  .cr-step button{width:40px;height:40px;border-radius:9px;font-size:1.25rem}
  .cr-qty{font-size:.98rem;min-width:56px}
  .cart-tot .grand b{font-size:1.6rem}
}

/* ── pannello ACCOUNT DI TEST (solo per il tester, dentro il profilo) ────────
   Sta nella scheda del profilo come le altre: stessa card, stesso ritmo. Il
   filo ocra a sinistra e' l'unico segno che quella e' roba da laboratorio.
   Ogni modalita' e' una .tst-riga: aggiungerne altre non cambia il resto. */
.acc-test{border-left:4px solid #D9A43C}
.acc-test .acc-h .ico{color:#B4862A}
.tst-riga{
  display:flex; align-items:center; gap:1rem; padding:.75rem 0;
  border-top:1px solid var(--linea, #E9E2D4);
}
.tst-clic{cursor:pointer}
.tst-txt{flex:1; min-width:0}
.tst-txt b{display:block; font-size:.92rem}
.tst-txt em{display:block; font-style:normal; font-size:.79rem; color:var(--muted); line-height:1.5; margin-top:.1rem}
.tst-sw{width:22px; height:22px; flex:0 0 auto; accent-color:#C9603C}
/* interruttore a due posizioni (di prova / effettivi) */
.tst-seg{display:flex; background:#F1ECE0; border-radius:10px; padding:3px; flex:0 0 auto}
.tst-seg-b{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  padding:.4rem .7rem; border-radius:8px; font-size:.82rem; font-weight:700; color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.tst-seg-b.on{background:#C9603C; color:#fff}
.tst-select{
  border:1px solid var(--linea, #E9E2D4); border-radius:10px; padding:.5rem .6rem;
  font-family:inherit; font-size:.85rem; max-width:min(60vw, 300px); background:#fff;
}
.tst-ordini{border-top:1px solid var(--linea, #E9E2D4); padding-top:.75rem; margin-top:.2rem}
.tst-ordini > b{font-size:.92rem}
.tst-lista{list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.tst-lista li{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  background:#FBF8F1; border-radius:10px; padding:.45rem .6rem; font-size:.85rem;
}
.tst-lista a{font-weight:800; text-decoration:none; color:var(--bosco, #24382A)}
.tst-data-o{color:var(--muted); font-size:.8rem}
.tst-flip{
  margin-left:auto; border:1px solid #D9A43C; background:#FBF3DF; color:#7A5A16;
  border-radius:8px; padding:.32rem .6rem; font-size:.78rem; font-weight:700;
  font-family:inherit; cursor:pointer;
}
.tst-flip:hover{background:#F1E0B8}
.badge.chip-prova{background:#F1E0B8; color:#7A5A16; border:1px dashed #D9A43C}
@media (max-width:560px){
  .tst-riga{flex-wrap:wrap}
  .tst-seg, .tst-select{margin-left:auto}
}

/* riassunto in cima al pannello di collaudo: dice a colpo d'occhio se sta agendo */
.tst-riassunto{
  display:flex; gap:.55rem; align-items:flex-start; border-radius:10px;
  padding:.6rem .75rem; font-size:.85rem; line-height:1.5; margin-bottom:.3rem;
}
.tst-riassunto .ico{width:17px; height:17px; flex:0 0 auto; margin-top:.1rem}
.tst-riassunto.is-on{background:#FBF3DF; color:#7A5A16; border:1px solid #E9D9A8}
.tst-riassunto.is-off{background:#EAF2E6; color:#2F5E33; border:1px solid #CFE3D2}
/* riga di stato REALE sotto ogni impostazione (come nelle impostazioni operatore):
   verde = sta agendo adesso, ocra = attiva ma non serve, grigia = spenta */
.tst-vivo{
  display:block; margin-top:.35rem; padding:.35rem .55rem; border-radius:8px;
  font-size:.77rem; line-height:1.45;
}
.tst-on{background:#EAF2E6; color:#2F5E33}
.tst-prova{background:#F1E0B8; color:#7A5A16}
.tst-pronta{background:#FCF3DC; color:#8C6D2E}
.tst-off,.tst-attesa{background:#F3F0E8; color:#6E6858}