/* ===== FoLaRi · sistema brand (dal Brandbook) ===== */
:root{
  --terracotta:#C84C22;
  --crema:#FAF4E5;
  --blu:#203E6D;
  --marrone:#735239;
  --salmone:#E5975C;
  --carta:#95AFC7;
  --crema-2:#F1E8D2;        /* tinta crema più calda per superfici */
  --line:#E3D7BD;           /* bordi tenui su crema */
  --radius:18px;
  --shadow:0 8px 24px rgba(115,82,57,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#caa888;                 /* fondo scuro caldo: stacca il "telefono" su desktop */
  color:var(--blu);
  display:flex;flex-direction:column;align-items:center;
  min-height:100dvh;
}

/* Cornice telefono */
.phone{
  position:relative;
  width:100%;max-width:430px;
  min-height:100dvh;
  background:var(--crema);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
@media(min-width:480px){
  body{padding:22px 0}
  .phone{border-radius:34px;min-height:820px}
}
.hint{color:#fff;opacity:.85;font-size:12px;margin:10px 0 22px;text-align:center}

/* Script (wordmark) */
.script{font-family:'Lobster',cursive;font-weight:400;letter-spacing:.5px}

/* ===== layout app ===== */
#app{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:78px}
@media(min-width:480px){#app{min-height:880px}}
.screen{padding:0 16px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== header ===== */
.topbar{
  position:sticky;top:0;z-index:5;
  background:var(--crema);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--line);
}
.brand{font-size:30px;color:var(--terracotta);line-height:1}
.brand-logo{height:34px;width:auto;display:block}
.greet{font-size:13px;color:var(--marrone);text-align:right;line-height:1.2}
.greet b{display:block;color:var(--blu);font-size:15px}
.iconbtn{background:none;border:none;color:var(--blu);padding:6px;cursor:pointer;display:flex}

.backbar{
  position:sticky;top:0;z-index:5;background:var(--crema);
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
}
.backbar h1{font-size:17px;margin:0;color:var(--blu)}
.backbar .sub{font-size:12px;color:var(--marrone)}

/* ===== card generiche ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.spesa{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--carta);color:var(--blu);
  border:none;border-radius:14px;padding:12px 14px;margin:14px 0 0;width:100%;
  font:inherit;cursor:pointer;
}
.spesa .lbl{font-size:12.5px;opacity:.9}
.spesa .val{font-size:18px;font-weight:700}

/* banner notifiche push */
.pushbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:12px;color:var(--blu);font-size:13px}
.pushbar>span{display:flex;align-items:center;gap:7px;font-weight:500}
.pushbar.on{background:#d6ecd9;border-color:#bfe0c6;color:#2f6b43}
.pushbtn{background:var(--terracotta);color:var(--crema);border:none;border-radius:10px;padding:7px 15px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.pushtests{display:flex;gap:6px}
.pushtests button{background:#fff;border:1px solid #bfe0c6;color:#2f6b43;border-radius:9px;padding:6px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}

/* banner ordine aperto */
.openbar{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:linear-gradient(180deg,#fff, #fdf8ec);
  border:1px dashed var(--carta);border-radius:14px;padding:12px 14px;margin-top:12px;cursor:pointer;font:inherit;color:var(--blu);
}
.openbar .ic{background:var(--carta);color:var(--blu);border-radius:12px;padding:8px;display:flex}
.openbar .t{font-weight:600;font-size:14px}
.openbar .s{font-size:12px;color:var(--marrone)}
.openbar .chev{margin-left:auto;color:var(--marrone)}

/* ===== CTA principale ===== */
.cta-solito{
  width:100%;margin-top:16px;border:none;cursor:pointer;
  background:var(--terracotta);color:var(--crema);
  border-radius:var(--radius);padding:18px 18px;
  display:flex;align-items:center;gap:14px;box-shadow:0 10px 22px rgba(200,76,34,.32);
  font:inherit;text-align:left;
}
.cta-solito:active{transform:scale(.99)}
.cta-solito .ic{background:rgba(250,244,229,.18);border-radius:14px;padding:10px;display:flex}
.cta-solito .big{font-size:18px;font-weight:700;letter-spacing:.3px}
.cta-solito .small{font-size:13px;opacity:.92}

/* ===== sezioni ===== */
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;gap:8px;color:var(--blu);font-weight:600;font-size:15px;margin-bottom:10px}
.sec-h .muted{color:var(--marrone);font-weight:500;font-size:12.5px;margin-left:auto}

/* riga prodotto */
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:8px}
.row+.row{margin-top:0}
.thumb{width:42px;height:42px;border-radius:11px;background:var(--crema-2);display:flex;align-items:center;justify-content:center;color:var(--blu);flex:0 0 auto}
.row .info{min-width:0;flex:1}
.row .name{font-weight:600;font-size:14px;color:var(--blu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:12px;color:var(--marrone)}
.row .price{font-weight:700;font-size:14px;color:var(--blu);white-space:nowrap}
.row .price .old{display:block;font-weight:500;font-size:11px;color:#b08968;text-decoration:line-through}

.badge{display:inline-block;background:var(--salmone);color:#5a3417;border-radius:999px;font-size:10.5px;font-weight:600;padding:2px 8px;vertical-align:middle}
.badge.soon{background:var(--salmone);color:#5a3417}
.badge.up{background:var(--salmone);color:#5a3417;margin-top:4px}

.addbtn{margin-left:auto;background:var(--crema);border:1.5px solid var(--terracotta);color:var(--terracotta);
  width:34px;height:34px;border-radius:11px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.addbtn:active{background:var(--terracotta);color:#fff}

/* nudge */
.nudge{background:var(--carta);border:none;border-radius:var(--radius);padding:14px;margin-top:8px;color:var(--blu)}
.nudge .h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.nudge .body{display:flex;align-items:center;gap:12px;margin-top:10px}
.nudge .txt{font-size:12.5px;color:#26405f}
.nudge .go{margin-left:auto;background:var(--blu);color:var(--crema);border:none;border-radius:11px;padding:9px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}

/* ---- "Da riordinare presto": card "ne hai altri N" ---- */
.soonmore{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--crema-2);border:1px dashed var(--salmone);border-radius:14px;padding:11px 12px;margin-bottom:8px;color:var(--blu);font:inherit;cursor:pointer}
.soonmore .sm-ic{width:42px;height:42px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--terracotta);flex:0 0 auto}
.soonmore .sm-t{flex:1;font-size:14px;font-weight:600;line-height:1.25}
.soonmore .sm-t b{color:var(--terracotta)}
.soonmore .sm-t small{display:block;font-size:12px;font-weight:500;color:var(--marrone)}
.soonmore>.svg.sm{color:var(--marrone)}
.soonmore.less{justify-content:center;background:none;border-style:solid;border-color:var(--line)}
.soonmore.less .sm-t{flex:0 0 auto;color:var(--marrone)}

/* ---- "Lo prendi ancora altrove?" — card ad alto impatto ---- */
.altrove{position:relative;overflow:hidden;margin-top:8px;border-radius:var(--radius);padding:16px;color:var(--crema);
  background:linear-gradient(135deg,var(--terracotta) 0%,var(--salmone) 100%);box-shadow:0 10px 26px rgba(200,76,34,.34)}
.altrove::after{content:'';position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.10)}
.al-top{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.al-ic{width:48px;height:48px;border-radius:14px;background:rgba(250,244,229,.20);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--crema)}
.al-ic .svg{width:26px;height:26px}
.al-head{line-height:1.2;min-width:0}
.al-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(250,244,229,.85)}
.al-kicker .svg{display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:3px}
.al-title{display:block;margin-top:2px;font-size:18px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-text{position:relative;z-index:1;margin:11px 0 13px;font-size:13px;line-height:1.4;color:rgba(250,244,229,.92)}
.al-cta{position:relative;z-index:1;width:100%;background:var(--crema);color:var(--terracotta);border:none;border-radius:13px;padding:13px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.al-cta:active{transform:scale(.99)}

/* icone inline dentro testo (cuore "nessun preferito") */
.pref-empty .svg{display:inline-block;vertical-align:-3px;width:15px;height:15px;color:var(--terracotta);margin:0 1px}

/* ricerca */
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:20px;color:var(--marrone)}

/* sidebar desktop: nascosta su mobile */
.sidebar{display:none}

/* ===== bottom nav ===== */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;height:66px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);z-index:20}
.nav button{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--marrone);font:inherit;font-size:11px}
.nav button.active{color:var(--terracotta)}

/* ===== carrello ===== */
.cart-list{padding:14px 16px 0}
.citem{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.citem.oos{opacity:.96;background:#fbf4e6;border-style:dashed}
.citem .info{flex:1;min-width:0}
.citem .name{font-weight:600;font-size:14px;color:var(--blu)}
.citem .meta{font-size:12px;color:var(--marrone);margin-top:1px}
.citem .line2{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stepper button{width:34px;height:34px;border:none;background:var(--crema);color:var(--terracotta);font-size:18px;cursor:pointer}
.stepper .q{min-width:34px;text-align:center;font-weight:700;color:var(--blu)}
.citem .lp{font-weight:700;color:var(--blu)}
.removex{background:none;border:none;color:#b08968;cursor:pointer;padding:4px;display:flex}
.oos-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.chip{border:1px solid var(--carta);background:#fff;color:var(--blu);border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--carta);color:var(--blu);border-color:var(--carta)}
.chip.sub{border-color:var(--terracotta);color:var(--terracotta)}

.deliverybox{margin:6px 16px 0;background:var(--crema-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;color:var(--blu)}
.deliverybox .t{font-weight:600;font-size:13.5px}
.deliverybox .s{font-size:12px;color:var(--marrone)}

/* barra totale */
.checkout{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:20}
.checkout .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.checkout .tot .l{color:var(--marrone);font-size:13px}
.checkout .tot .v{font-size:22px;font-weight:700;color:var(--blu)}
.btn-primary{width:100%;background:var(--terracotta);color:var(--crema);border:none;border-radius:14px;padding:16px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 8px 18px rgba(200,76,34,.3)}
.btn-primary:active{transform:scale(.99)}

/* placeholder viste */
.placeholder{padding:60px 26px;text-align:center;color:var(--marrone)}
.placeholder .script{font-size:40px;color:var(--terracotta);display:block;margin-bottom:8px}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--blu);color:var(--crema);
  padding:11px 16px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:var(--shadow);z-index:30;max-width:88%;text-align:center}

/* success */
.success{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--terracotta);color:var(--crema);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:40;animation:fade .3s ease}
.success .check{width:84px;height:84px;border-radius:50%;background:rgba(250,244,229,.16);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.success h2{margin:0 0 6px;font-size:24px}
.success p{margin:0 0 26px;opacity:.95;font-size:15px;line-height:1.4}
.success .ghost{background:var(--crema);color:var(--terracotta);border:none;border-radius:14px;padding:14px 26px;font:inherit;font-weight:700;cursor:pointer}

/* ===== Login ===== */
.login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:32px;text-align:center;gap:13px}
.login-brand{font-size:56px;color:var(--terracotta);line-height:1}
.login-logo{height:120px;width:auto;max-width:88%;margin:0 auto 8px}
.login-sub{color:var(--marrone);font-size:15px;margin-bottom:6px}
.login-input{width:100%;max-width:320px;border:1px solid var(--line);border-radius:14px;padding:14px;font:inherit;font-size:16px;color:var(--blu);background:#fff;outline:none;text-align:center}
.login-input::placeholder{color:#a9966f}
.login-input:focus{border-color:var(--terracotta)}
.login-btn{width:100%;max-width:320px;background:var(--terracotta);color:var(--crema);border:none;border-radius:14px;padding:15px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.login-btn:active{transform:scale(.99)}
.login-hint{font-size:12.5px;color:var(--marrone);margin-top:10px}

.svg{width:22px;height:22px;display:block}
.svg.sm{width:18px;height:18px}
.svg.lg{width:26px;height:26px}

/* ===== Catalogo ===== */
.ptitle{font-size:21px;font-weight:700;color:var(--blu)}
.searchwrap{padding:10px 16px 0}
.searchfield{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;color:var(--marrone)}
.searchfield input{border:none;outline:none;background:none;font:inherit;color:var(--blu);width:100%}
.searchfield input::placeholder{color:#a9966f}

.deptgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.deptcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:var(--blu);font:inherit;font-size:11.5px;font-weight:600;text-align:center}
.deptcard .deptic{width:46px;height:46px;border-radius:14px;background:var(--crema-2);display:flex;align-items:center;justify-content:center;color:var(--blu)}
.deptcard:active{background:var(--crema-2)}

.assort-cta{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-top:14px;color:var(--blu);font:inherit;cursor:pointer}
.assort-cta .ac-txt{flex:1;line-height:1.25}
.assort-cta .ac-txt b{font-size:14px;display:block}
.assort-cta .ac-txt small{font-size:12px;color:var(--marrone)}
.assort-cta .svg.lg{color:var(--terracotta)}
.assort-cta .svg.sm{color:var(--marrone)}

.seg{display:flex;gap:6px;background:var(--crema-2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.seg button{flex:1;border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--marrone);padding:8px;border-radius:9px;cursor:pointer}
.seg button.on{background:#fff;color:var(--terracotta);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ===== Profilo (sezione di controllo) ===== */
.pcard{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:6px}
.pavatar{width:48px;height:48px;border-radius:50%;background:var(--terracotta);color:var(--crema);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:0 0 auto}
.pcard b{display:block;color:var(--blu);font-size:16px}
.pcard small{color:var(--marrone);font-size:12.5px}
.prow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:8px;color:var(--blu);font:inherit;cursor:pointer}
.prow .pic{width:38px;height:38px;border-radius:11px;background:var(--crema);color:var(--terracotta);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.prow .pic .svg{width:20px;height:20px}
.prow .ptxt{flex:1;line-height:1.25}
.prow .ptxt b{font-size:14px;display:block}
.prow .ptxt small{font-size:12px;color:var(--marrone)}
.prow>.svg.sm{color:var(--marrone)}

/* ---- I tuoi dati: form anagrafica + indirizzi ---- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:8px}
.formcard .fc-h{font-weight:700;color:var(--blu);font-size:14px;margin-bottom:10px}
.fld{display:block;margin-bottom:11px}
.fld:last-of-type{margin-bottom:14px}
.fld>span{display:block;font-size:12px;color:var(--marrone);font-weight:600;margin:0 2px 5px}
.fld>input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font:inherit;font-size:15px;color:var(--blu);background:var(--crema);outline:none}
.fld>input::placeholder{color:#a9966f}
.fld>input:focus{border-color:var(--terracotta);background:#fff}
.frow{display:flex;gap:10px}
.frow .fld{flex:1}
.lockfld{margin-bottom:11px}
.lockfld>span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--marrone);font-weight:600;margin:0 2px 5px}
.lockfld>span .svg{width:13px;height:13px;color:#a8551f}
.lockfld .lockval{border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:15px;color:var(--marrone);background:var(--crema-2);font-weight:600}
.lockhint{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:#a8551f;background:rgba(168,85,31,.07);border-radius:10px;padding:8px 10px;margin:2px 0 14px;line-height:1.35}
.lockhint .svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}
.btn-secondary{width:100%;background:var(--crema);color:var(--blu);border:1.5px solid var(--blu);border-radius:13px;padding:13px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.btn-secondary:active{background:var(--blu);color:var(--crema)}
.addrcard{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin-bottom:8px}
.addrcard .ac-i{width:40px;height:40px;border-radius:11px;background:var(--crema-2);color:var(--blu);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.addrcard .ac-t{flex:1;line-height:1.3;min-width:0}
.addrcard .ac-t b{display:block;color:var(--blu);font-size:14px}
.addrcard .ac-t small{color:var(--marrone);font-size:12px}
.addrcard .ac-del{background:none;border:none;color:#a8551f;padding:6px;cursor:pointer;flex:0 0 auto;display:flex}

.deptback{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--marrone);font:inherit;font-size:13px;cursor:pointer;padding:8px 0 2px}
.dept-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--blu);margin:4px 0 12px}

.ctrl{margin-left:auto;flex:0 0 auto}
.oosrow{opacity:.92;border-style:dashed}

/* barra ordine aperto (sopra la nav) */
.orderbar{position:fixed;left:50%;transform:translateX(-50%);bottom:66px;width:100%;max-width:430px;
  background:var(--blu);color:var(--crema);border:none;cursor:pointer;font:inherit;z-index:19;
  display:flex;align-items:center;gap:12px;padding:11px 16px;box-shadow:0 -6px 16px rgba(32,62,109,.18);
  border-radius:16px 16px 0 0}
.orderbar .ic{background:rgba(250,244,229,.16);border-radius:10px;padding:7px;display:flex}
.orderbar .s{font-size:12px;opacity:.85}
.orderbar .see{margin-left:auto;display:flex;align-items:center;gap:3px;font-weight:600;font-size:13px}

/* ===== Ordini / Fatture ===== */
.listcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.lc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lc-nm{font-weight:700;color:var(--blu);font-size:15px}
.lc-dt{font-size:12px;color:var(--marrone);margin-top:3px}
.lc-sum{font-size:12.5px;color:var(--marrone);margin-top:6px}
.lc-ft{display:flex;justify-content:space-between;align-items:center;margin-top:11px}
.lc-tot{font-weight:700;color:var(--blu);font-size:16px}
.reorder-btn{display:inline-flex;align-items:center;gap:6px;background:var(--crema);border:1.5px solid var(--terracotta);color:var(--terracotta);border-radius:11px;padding:8px 13px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.reorder-btn .svg{width:16px;height:16px}
.reorder-btn:active{background:var(--terracotta);color:#fff}
.lc-actions{display:flex;gap:8px;margin-top:10px}
.oc-btn{flex:1;border:none;border-radius:11px;padding:10px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;background:var(--terracotta);color:var(--crema)}
.oc-btn.ghost{background:var(--crema);color:var(--blu);border:1.5px solid var(--blu)}
.oc-btn:active{transform:scale(.99)}
.odhead{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.odtot{font-weight:700;color:var(--blu);font-size:18px}
.odtot small{font-size:11px;font-weight:600;color:var(--marrone)}
.odq{margin-left:auto;font-weight:700;color:var(--terracotta);font-size:15px;flex:0 0 auto}
.odlt{margin-left:auto;font-weight:700;color:var(--blu);font-size:14px;flex:0 0 auto}
.addmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--crema);color:var(--blu);border:1.5px dashed var(--blu);border-radius:13px;padding:13px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:2px}
.addmore .svg{width:18px;height:18px}
.invhead{display:flex;justify-content:space-between;align-items:center;background:var(--carta);color:var(--blu);border-radius:14px;padding:11px 14px;margin:12px 16px 2px;font-size:13px}

.st{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st.draft{background:#efe6d2;color:#735239}
.st.confirmed{background:#dbe6f3;color:#203e6d}
.st.shipping,.st.partial{background:#f7e0c8;color:#9a5a22}
.st.done,.st.paid{background:#d6ecd9;color:#2f6b43}
.st.unpaid{background:#f3d9cd;color:#a8451f}
.st.cancel{background:#e7e1d6;color:#8a8276}

/* ===== Preferiti + Offerte ===== */
.favbtn{background:none;border:none;color:#c9b48f;cursor:pointer;padding:4px;flex:0 0 auto;display:flex;align-items:center}
.favbtn.on{color:var(--terracotta)}
.badge.offer{background:var(--terracotta);color:var(--crema)}

.offerscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px}
.offercard{flex:0 0 144px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px}
.offthumb{position:relative;height:54px;border-radius:10px;background:var(--crema-2);display:flex;align-items:center;justify-content:center;color:var(--blu);margin-bottom:2px}
.offbadge{position:absolute;top:-7px;right:-7px;background:var(--terracotta);color:var(--crema);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.offname{font-weight:600;font-size:13px;color:var(--blu);line-height:1.2;min-height:31px}
.offprice b{color:var(--terracotta);font-size:15px}
.offprice s{color:#b08968;font-size:12px;margin-left:4px}
.offuntil{font-size:11px;color:var(--marrone)}
.offadd{margin-top:auto;background:var(--terracotta);color:var(--crema);border:none;border-radius:10px;padding:7px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}

/* ===== Dashboard spesa ===== */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.kcard.wide{grid-column:1 / -1}
.kl{font-size:12px;color:var(--marrone);display:flex;align-items:center;gap:5px}
.kv{font-size:28px;font-weight:700;color:var(--blu);margin-top:2px}
.kv2{font-size:20px;font-weight:700;color:var(--blu);margin-top:3px}
.kdelta{font-size:12.5px;font-weight:600;margin-top:4px}
.kdelta.up{color:#a8451f}
.kdelta.down{color:#2f6b43}
.kcard.save{background:#d6ecd9;border-color:#bfe0c6}
.kcard.save .kl,.kcard.save .kv2{color:#2f6b43}

.bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:124px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px 6px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.barcol .bar{width:60%;max-width:26px;background:var(--salmone);border-radius:6px 6px 0 0}
.barcol:last-child .bar{background:var(--terracotta)}
.barcol span{font-size:11px;color:var(--marrone)}

.dephint{font-size:11.5px;color:var(--marrone);margin:-4px 2px 10px}
.deptrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;width:100%;background:none;border:none;font:inherit;text-align:left;cursor:pointer;padding:0}
.deptrow .dn{font-size:13px;color:var(--blu);width:88px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deptrow .dbar{flex:1;height:9px;background:var(--crema-2);border-radius:999px;overflow:hidden}
.deptrow .dbar>div{height:100%;background:var(--blu);border-radius:999px}
.deptrow .dp{font-size:12.5px;font-weight:700;color:var(--blu);width:60px;text-align:right;flex:0 0 auto}
.deptrow .dchev{color:var(--marrone);flex:0 0 auto;display:flex;transition:transform .15s}
.deptrow.open .dchev{transform:rotate(90deg)}
.deptrow.open .dbar>div{background:var(--terracotta)}
.deptdetail{margin:0 0 12px 0;padding:4px 10px;background:var(--crema-2);border-radius:12px}
.ddrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ddrow:last-child{border-bottom:none}
.ddrow .ddn{flex:1;font-size:12.5px;color:var(--blu);line-height:1.3}
.ddrow .ddn small{color:var(--marrone)}
.ddrow .dda{font-weight:700;color:var(--blu);font-size:12.5px;flex:0 0 auto}
.ddempty{font-size:12px;color:var(--marrone);padding:10px 0;text-align:center}

.pwrow,.toprow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.pwrow:last-child,.toprow:last-child{border-bottom:none}
.pwrow{justify-content:space-between}
.pwn{font-size:13px;color:var(--blu)}
.pwv{font-size:12.5px;font-weight:600;white-space:nowrap}
.pwv s{color:#b08968;font-weight:500;margin:0 4px}
.pwv.down{color:#2f6b43}
.pwv.up{color:#a8451f}
.toprow .ti{width:22px;height:22px;border-radius:50%;background:var(--crema-2);color:var(--blu);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.toprow .tn{flex:1;font-size:13px;color:var(--blu)}
.toprow .tn small{color:var(--marrone)}
.toprow .ta{font-weight:700;color:var(--blu);font-size:13px}

/* ===================================================================
   DESKTOP (≥880px): sidebar a sinistra + colonna contenuto centrata.
   Geometria: cornice centrata (--frame), sidebar (--side).
   Centro colonna contenuto = 50vw + (--side)/2  → barre fisse e .screen allineate.
   =================================================================== */
@media (min-width:880px){
  :root{ --frame:100vw; --side:240px; --content:1100px;
         /* padding laterale per allineare il contenuto delle barre alla colonna delle card */
         --col-pad: max(16px, calc(50vw - var(--content)/2 - var(--side)/2 + 16px)); }

  body{ padding:0; background:var(--crema); }
  .phone{ max-width:none; width:100%; border-radius:0; box-shadow:none;
          min-height:100dvh; overflow:visible; }
  #app{ padding-left:var(--side); padding-top:66px; padding-bottom:28px; min-height:100dvh; }

  /* ---- nav bottom nascosta; sidebar persistente a sinistra ---- */
  .nav{ display:none; }
  .sidebar{
    display:flex; flex-direction:column;
    position:fixed; left:calc((100vw - var(--frame))/2); top:0; bottom:0;
    width:var(--side); height:100dvh; background:#fff; border-right:1px solid var(--line);
    padding:0 12px 18px; z-index:25;
  }
  .sidebar.hidden{ display:none; }
  .sidebar.hidden + #app{ padding-left:0; }     /* login / niente sidebar → contenuto pieno */
  /* logo identico all'header del sito: stessa altezza (56) e posizione (13px top, clamp(16,4vw,40) left) */
  .sb-logo{ align-self:flex-start; height:56px; width:auto; display:block;
            margin:13px 0 24px; margin-left:calc(clamp(16px, 4vw, 40px) - 12px); }
  .sb-nav{ display:flex; flex-direction:column; gap:4px; }
  .sb-nav button{ display:flex; align-items:center; gap:13px; width:100%;
    background:none; border:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
    color:var(--marrone); padding:12px 14px; border-radius:12px; text-align:left; }
  .sb-nav button .svg{ width:22px; height:22px; }
  .sb-nav button:hover{ background:var(--crema); }
  .sb-nav button.active{ background:var(--crema-2); color:var(--terracotta); }

  /* ---- colonna contenuto centrata e leggibile ---- */
  .screen, .cart-list{ max-width:var(--content); margin-left:auto; margin-right:auto; width:100%; }
  /* width:100% necessario: #app è flex-column, senza larghezza l'item con margin auto si rimpicciolisce */
  .searchwrap{ max-width:var(--content); width:100%; margin-left:auto; margin-right:auto; }
  .invhead{ max-width:calc(var(--content) - 32px); width:100%; margin-inline:auto; }   /* banda riepilogo = larghezza card */

  /* ---- header (saluto / titolo) fisso, largo come le card, saluto a destra ----
     centratura con left/right + margin auto (relativa all'area contenuto REALE,
     senza lo scrollbar) → niente disallineamento né striscia che spunta a sinistra */
  .topbar, .backbar{
    position:fixed; top:0; z-index:15;
    left:var(--side); right:0; width:auto; max-width:calc(var(--content) - 32px);
    margin:0 auto; transform:none;
    padding-inline:16px;
  }
  .topbar > div, .topbar > .greet{ margin-left:auto; }   /* saluto allineato a destra */
  .topbar .iconbtn{ display:none; }            /* il profilo è nella sidebar */
  .topbar .brand-logo{ display:none; }         /* logo già nella sidebar (niente doppione) */

  /* ---- barre fisse → larghe come le card (colonna contenuto), ancorate al fondo ----
     stessa centratura del header: left/right + margin auto (no vw → no scrollbar) */
  .orderbar, .checkout{
    left:var(--side); right:0; width:auto; max-width:calc(var(--content) - 32px);
    margin-inline:auto; transform:none; bottom:0;
    padding-inline:16px;
  }
  .toast{ left:calc(50vw + 120px); transform:translateX(-50%); bottom:24px; }
  .success{ left:calc(50vw + 120px); transform:translateX(-50%);
            width:calc(var(--frame) - var(--side)); max-width:840px; }

  /* ---- più aria sulle griglie ---- */
  .deptgrid{ grid-template-columns:repeat(4,1fr); }

  /* offerte: su desktop riempiono la riga (no scroll orizzontale come su mobile) */
  .offerscroll{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; overflow:visible; padding:2px; }
  .offerscroll .offercard{ flex:initial; width:auto; }
  .offerscroll .offthumb{ height:84px; }

  /* ---- micro-hover desktop ---- */
  .listcard:hover, .deptcard:hover, .row:hover, .prow:hover, .assort-cta:hover, .soonmore:hover{
    border-color:var(--salmone);
  }
  a, button{ -webkit-tap-highlight-color:transparent; }
}