/* La Fenice Ortofrutta - stile comune di sito e app (una sola fonte, 02/11/2026)

   Colori e font dell'app: verde foglia, lime del logo, arancio, rosso pomodoro. */

:root{

  --verde:#1f7a3f; --verde-scuro:#17301f; --verde-cassa:#1d5b30; --lime:#c4dc3c;

  --arancio:#f28c1c; --rosso:#b8301f; --carta:#fffdf4; --fondo:#f3f6ee; --bianco:#ffffff;

  --linea:#e1e8d8; --sunk:#f0f4ea; --testo:#17301f; --muted:#4a5f50;

  --r:18px;

}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{margin:0;background:var(--fondo);color:var(--testo);font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}

a{color:var(--verde)}

a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}

img{max-width:100%;display:block}

.cond{font-family:'Archivo',sans-serif;font-stretch:68%;font-weight:800;letter-spacing:-.005em}

.wide{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:900}

.hand{font-family:'Permanent Marker',cursive;font-weight:400}

.num{font-variant-numeric:tabular-nums}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}



/* ---------- barra in alto ---------- */

.top{position:sticky;top:0;z-index:20;background:var(--bianco);border-bottom:1px solid var(--linea)}

.top-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:0 32px;min-height:76px}

.salta{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--verde-scuro);color:#fff;padding:10px 14px;border-radius:10px}

.salta:focus{left:12px}

.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--verde);flex:none}

.marchio img{width:34px;height:60px;object-fit:contain}

.parola{display:flex;flex-direction:column;line-height:1;white-space:nowrap}

.parola b{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:900;font-size:25px;text-transform:uppercase;letter-spacing:.03em;color:var(--verde-scuro)}

.parola small{margin-top:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:#b04a0c}

.schede{display:flex;gap:6px}

.scheda{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;padding:0 16px;border-radius:999px;color:var(--testo);text-decoration:none;font-weight:700}

.scheda:hover{background:var(--sunk)}

.schede .sep{width:1px;align-self:center;height:24px;background:var(--linea);margin:0 8px}

.scheda[aria-current="page"]{background:var(--verde-scuro);color:#fff}

.spazio{flex:1}

/* account e carrello in alto a destra */

.conto{position:relative;font-size:14px;line-height:1.3;text-align:right}

.entra{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--verde);color:#fff;font-weight:700;text-decoration:none}

.menu-conto summary{list-style:none;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:0 12px;border-radius:12px}

.menu-conto summary::-webkit-details-marker{display:none}

.menu-conto summary:hover{background:var(--sunk)}

.menu-conto summary small{color:var(--muted)}

.menu-conto-box{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--bianco);border:1px solid var(--linea);border-radius:14px;box-shadow:0 12px 28px rgba(15,50,25,.18);padding:6px;display:flex;flex-direction:column;text-align:left;z-index:40}

.menu-conto-box a,.menu-conto-box button{display:block;min-height:44px;padding:11px 12px;border-radius:10px;color:var(--testo);text-decoration:none;font:inherit;font-weight:600;background:none;border:0;text-align:left;cursor:pointer}

.menu-conto-box a:hover,.menu-conto-box button:hover{background:var(--sunk)}

.carr{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--testo);background:var(--sunk)}

.badge{position:absolute;top:-2px;right:-4px;min-width:20px;height:20px;border-radius:999px;background:var(--rosso);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}

.badge[hidden]{display:none}



/* ---------- pulsanti ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;border:0;font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s ease,filter .12s ease}

.btn:active{transform:scale(.97)}

.btn-lime{background:var(--lime);color:var(--verde-scuro)}

.btn-verde{background:var(--verde);color:#fff}

.btn-velo{background:rgba(255,255,255,.14);color:#fff}

.btn-chiaro{background:var(--sunk);color:var(--testo)}



/* ---------- cassette e cartellini ---------- */

.crate{position:relative;display:block;border-radius:6px;border:10px solid var(--verde-cassa);background:#2e1a08;box-shadow:inset 0 8px 14px rgba(0,0,0,.35),0 2px 0 #123d20,0 10px 18px rgba(15,50,25,.15);overflow:visible}

.crate .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:1px}

.crate .ombra{position:absolute;inset:0;box-shadow:inset 0 8px 14px rgba(0,0,0,.35);pointer-events:none}

.tag{position:absolute;right:8px;bottom:-14px;background:var(--carta);color:var(--testo);border-radius:4px;padding:6px 9px 7px;box-shadow:0 2px 6px rgba(0,0,0,.25);text-align:right;line-height:1}

.tag .prezzo{display:block;font-family:'Permanent Marker',cursive;font-size:18px;letter-spacing:.01em}

.tag .um{display:block;font-size:10px;font-weight:600;margin-top:3px}

.tag s{display:block;font-size:11px;margin-bottom:3px}

.tag.off{background:var(--rosso);color:#fff}

.piu{position:absolute;left:8px;top:8px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--verde);font:inherit;font-size:26px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}

.conta{position:absolute;left:8px;top:8px;height:44px;border-radius:999px;background:var(--lime);color:var(--verde-scuro);font-weight:800;display:flex;align-items:center;gap:8px;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.3)}

.conta button{width:32px;height:32px;border-radius:50%;border:0;background:var(--verde-scuro);color:#fff;font:inherit;font-size:18px;font-weight:700;cursor:pointer}



/* ---------- riquadri ---------- */

.box{background:var(--bianco);border-radius:var(--r);padding:22px 24px}

.etichetta{display:block;font-size:14px;font-weight:600;color:var(--muted)}



/* ---------- barra carrello ---------- */

.pillola{position:fixed;right:32px;bottom:28px;z-index:30;min-height:60px;border-radius:999px;background:var(--verde-scuro);color:#fff;font-size:16px;font-weight:700;padding:0 10px 0 24px;display:flex;align-items:center;gap:16px;text-decoration:none;box-shadow:0 12px 28px rgba(15,50,25,.35)}

.pillola b{background:var(--lime);color:var(--verde-scuro);border-radius:999px;padding:10px 18px}

.pillola[hidden]{display:none}

body.con-pillola .piede{padding-bottom:84px}



/* ---------- piede (compatto) ---------- */

.piede{background:var(--verde-scuro);color:#cfdcc8;margin-top:56px;font-size:14.5px}

.piede-in{max-width:1280px;margin:0 auto;padding:22px 32px 18px;display:grid;grid-template-columns:auto 1fr;gap:10px 40px;align-items:center}

.piede a{color:#fff;text-decoration:none}

.piede a:hover{text-decoration:underline}

.logo-piede{display:flex;align-items:center;gap:12px}

.logo-piede img{width:auto;height:56px}

.logo-piede b{display:block;font-family:'Archivo',sans-serif;font-stretch:68%;font-weight:800;font-size:22px;color:#fff;line-height:1}

.logo-piede small{display:block;color:#b9c8b2;font-size:13px;margin-top:3px}

.piede-tel{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end;margin:0}

.piede-tel span{color:#b9c8b2}

.piede-link{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 20px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;font-size:13.5px}

.piede-link .legale{margin-left:auto;color:#9fb397}

/* ---------- schede in basso e menu Altro (telefono) ---------- */

.basso{display:none}

.altro{position:fixed;inset:0;z-index:60}

.altro[hidden]{display:none}

.altro-bg{position:absolute;inset:0;background:rgba(15,35,20,.45)}

.altro-box{position:absolute;left:0;right:0;bottom:0;background:var(--bianco);border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px}

.altro-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

.altro-h b{font-size:28px}

.altro-h .btn{min-height:44px;padding:0 16px}

.altro-box a,.altro-box button:not(.btn){display:flex;align-items:center;min-height:52px;padding:0 12px;border-radius:12px;color:var(--testo);text-decoration:none;font:inherit;font-size:17px;font-weight:700;background:none;border:0;cursor:pointer;width:100%;text-align:left}

.altro-box a:hover{background:var(--sunk)}

#altro-conto{border-top:1px solid var(--linea);margin-top:6px;padding-top:6px}



@media (max-width:1180px){

  .top .schede{display:none}

  .basso{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bianco);border-top:1px solid var(--linea);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}

  .basso a,.basso button{flex:1;position:relative;font:inherit;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;border-radius:12px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:700}

  .basso .badge{top:2px;right:calc(50% - 26px)}

  .basso a[aria-current="page"],.basso button[aria-current="page"]{color:var(--verde);background:var(--sunk)}

  body{padding-bottom:76px}

  .pillola{bottom:84px}

  .top .carr{display:none}

}

@media (max-width:860px){

  .top-in{padding:0 16px;min-height:64px;gap:10px}

  .marchio img{width:26px;height:46px}

  .parola b{font-size:20px}

  .parola small{font-size:9.5px;letter-spacing:.14em}

  .menu-conto summary small{display:none}

  .menu-conto summary b{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  .entra{padding:0 14px;font-size:14px}

  .pillola{left:12px;right:12px;justify-content:space-between}

  .piede-in{grid-template-columns:1fr;padding:18px 16px 14px;gap:10px}

  .piede-tel{justify-content:flex-start;gap:4px 16px}

  .piede-link .legale{margin-left:0}

  .logo-piede img{height:44px}

}

@media (max-width:400px){ .parola small{display:none} }





/* ---------- animazioni (02/11) ---------- */

/* comparsa allo scorrimento: la classe .anim la mette il JS, cosi' senza JS si vede tutto */

.anim{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}

.anim.vis{opacity:1;transform:none}

@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45)}65%{transform:scale(.9)}100%{transform:scale(1)}}

.badge.pop{animation:pop .5s ease}

.carr.pop{animation:pop .5s ease}

.btn:hover{filter:brightness(1.05)}

.btn:active{transform:scale(.96)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.anim{opacity:1;transform:none}}