/* Stile condiviso delle pagine di servizio (carrello, cassa, ricerca).
   Stessi token del resto del sito. */
:root{
  color-scheme: light;
  --ink:#361817; --ink-2:#5E4740; --ink-3:#8E7A6C;
  --plum:#6E2434; --plum-lt:#8C3143;
  --gold:#F2B93D; --gold-dk:#DFA529;
  --paper:#FCF6EE; --shell:#F6EADB;
  --apricot:#FFEFE2; --berry:#F9E4DC; --herb:#EBEEDA; --sky:#F0E5D3;
  --line:#E7D7C6; --line-2:#CEB6A2;
  --f-d:'Fredoka',system-ui,sans-serif;
  --f-b:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:8px; --r-lg:32px; --pill:100px;
  --pad:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
h1,h2,h3,h4{margin:0}
h1{font-family:var(--f-b);font-weight:900;font-size:clamp(30px,4.2vw,54px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
h2{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.06;letter-spacing:-.02em}
h3{font-family:var(--f-d);font-weight:600;font-size:19px;line-height:1.2}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:4px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(32px,4.4vw,64px) 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--plum)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:62ch;line-height:1.55}
.micro{font-size:13px}.mute{color:var(--ink-3)}
.ph{border-bottom:2px dotted var(--gold-dk);cursor:help}
.note{display:none}
body.notes .note{display:block;font-size:13px;line-height:1.5;color:var(--plum);background:var(--berry);border-radius:var(--r);padding:12px 14px;margin:16px 0}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 24px;border-radius:var(--r);background:var(--plum);color:#fff;font-weight:700;font-size:16px;transition:transform .2s var(--ease),background .2s;white-space:nowrap}
.btn:hover{background:var(--plum-lt);transform:translateY(-2px)}
.btn.lg{height:52px;padding:0 28px;font-size:17px}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--gold-dk)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.sm{height:40px;font-size:14.5px;padding:0 14px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;border-bottom:2px solid var(--gold);padding-bottom:2px}

.demo{background:var(--ink);color:#F6EDE7;font-size:13px;padding:9px var(--pad);display:flex;gap:10px 20px;align-items:center;justify-content:center;flex-wrap:wrap}
.demo b{font-weight:700}
.demo label{display:inline-flex;gap:7px;align-items:center;cursor:pointer;font-size:12.5px}
.ann{background:var(--plum);color:#fff;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px var(--pad)}
.ann .ico{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:6px}

.nav{position:sticky;top:0;z-index:70;background:var(--paper);transition:box-shadow .3s}
.nav.on{box-shadow:0 4px 20px -12px rgba(54,24,23,.4)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:96px;gap:14px;transition:min-height .3s var(--ease)}
.nav.on .wrap{min-height:74px}
.navL{display:flex;gap:24px;align-items:center}
.navL a{font-size:14px;font-weight:600;position:relative;padding:6px 0}
.navL a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.navL a:hover::after,.navL a[aria-current="page"]::after{transform:scaleX(1)}
.mark{justify-self:center;display:block;line-height:0}
.mark img{display:block;height:66px;width:auto;transition:height .3s var(--ease)}
.nav.on .mark img{height:48px}
.navR{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.navR button,.navR a{display:inline-flex;align-items:center;gap:8px;height:48px;min-width:48px;padding:0 12px;border-radius:var(--r);font-size:14px;font-weight:600;transition:background .2s}
.navR button:hover,.navR a:hover{background:var(--shell)}
.cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--pill);background:var(--plum);color:#fff;font-size:12px;font-weight:800}
.cnt.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.burger{display:none}
.mpanel{position:fixed;inset:0;z-index:130;background:var(--paper);padding:14px var(--pad) 40px;overflow:auto}
.mpanel .top{display:flex;justify-content:space-between;align-items:center;min-height:60px}
.mpanel .top .mark img{height:40px}
.mpanel nav a{display:flex;justify-content:space-between;align-items:center;min-height:62px;border-bottom:1px solid var(--line);font-family:var(--f-d);font-weight:600;font-size:25px}

.crumb{background:var(--paper);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--ink-3);padding:12px 0}
.crumb li{display:flex;gap:8px;align-items:center}
.crumb li+li::before{content:"/";color:var(--line-2)}
.crumb a{font-weight:600;color:var(--ink-2)}
.crumb [aria-current]{color:var(--ink);font-weight:700}

/* moduli */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13.5px;font-weight:700}
.field input,.field select,.field textarea{min-height:48px;border:2px solid var(--line-2);border-radius:var(--r);background:var(--paper);padding:10px 14px;font:inherit;font-size:16px;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--plum);box-shadow:0 0 0 3px rgba(110,36,52,.14)}
.field .err{font-size:12.5px;font-weight:700;color:#A3242F}
.field.bad input,.field.bad select{border-color:#A3242F}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;min-height:44px}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--plum)}

footer{background:var(--ink);color:#E9DDD6;font-size:14.5px;margin-top:auto}
footer .band{border-bottom:1px solid rgba(233,221,214,.14);padding:16px var(--pad);text-align:center;font-size:13px;font-weight:600}
footer .flogo{display:flex;justify-content:center;padding:46px 0 4px}
footer .flogo img{display:block;height:112px;width:auto}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:48px 0 32px}
footer h4{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
footer li{padding:5px 0;color:rgba(233,221,214,.78)}
footer a:hover{color:#fff}
footer .legal li{font-size:13px;color:rgba(233,221,214,.55)}
footer .fbar{border-top:1px solid rgba(233,221,214,.14);padding:20px 0 36px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:rgba(233,221,214,.5)}
footer .pay{display:flex;gap:8px;flex-wrap:wrap}
footer .pay span{height:26px;padding:0 10px;display:grid;place-items:center;border:1px solid rgba(233,221,214,.25);border-radius:var(--r);font-size:10.5px;font-weight:700}
footer .lk{display:flex;gap:18px;flex-wrap:wrap}

/* riquadro carrello: scende dall'alto sotto l'icona carrello dell'header, mai in basso (li ci sono chat e barra fissa).
   cart.js calcola --tt (top), --tr (destra) e --ta (beccuccio); i valori di riserva valgono se lo script non c'e */
.toast{position:fixed;top:var(--tt,104px);right:var(--tr,24px);z-index:120;width:352px;max-width:calc(100vw - 20px);background:var(--ink);color:#F6EDE7;border-radius:20px;padding:18px;transform:translateY(-8px) scale(.97);transform-origin:calc(100% - var(--ta,22px) - 7px) 0;opacity:0;visibility:hidden;pointer-events:none;transition:transform .15s var(--ease),opacity .15s var(--ease),visibility 0s .15s;box-shadow:0 24px 44px -20px rgba(0,0,0,.6)}
.toast.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .22s var(--ease),opacity .18s var(--ease),visibility 0s}
.toast.ar::before{content:'';position:absolute;top:-6px;right:var(--ta,22px);width:14px;height:14px;background:var(--ink);border-radius:3px 0 0 0;transform:rotate(45deg)}
.toast .t{display:flex;gap:11px;align-items:center;font-weight:700;font-size:15px}
.toast .t .ico{color:var(--gold)}
.toast .pb{height:8px;background:rgba(246,237,231,.16);border-radius:var(--pill);margin:14px 0 10px;overflow:hidden}
.toast .pb i{display:block;height:100%;width:0;background:var(--gold);border-radius:var(--pill);transition:width .7s var(--ease)}
.toast .pb i.full{background:#8FBF7A}
.toast .m{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:rgba(246,237,231,.75)}
.toast .m a{color:#fff;font-weight:700;border-bottom:2px solid var(--gold);white-space:nowrap;align-self:flex-end}
.toast .m b{color:#fff;font-weight:800;white-space:nowrap}
.toast .x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:rgba(246,237,231,.6);background:transparent;transition:background .2s,color .2s}
.toast .x:hover{background:rgba(246,237,231,.12);color:#fff}
.toast .x svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.toast .x::after{content:'';position:absolute;inset:-7px}
.toast :focus-visible{outline-color:var(--gold)}
.toast .t span{padding-right:26px}

@media (max-width:900px){
  .navL,.navR .d{display:none}
  .burger{display:inline-grid;place-items:center;width:48px;height:48px;justify-self:start}
  .mark img,.nav.on .mark img{height:50px}
  .nav .wrap,.nav.on .wrap{min-height:80px}
  footer .flogo img{height:92px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{position:static}
  .nav .wrap,.nav.on .wrap{grid-template-columns:48px 1fr auto;min-height:72px}
  .mark img,.nav.on .mark img{height:44px}
  .demo,.ann{font-size:11.5px}
  footer .cols{grid-template-columns:1fr 1fr;gap:24px}
  .toast{left:10px;right:10px;top:max(var(--tt,10px),calc(10px + env(safe-area-inset-top)));width:auto;max-width:none;border-radius:18px;padding:14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}