/* ------------------------------------------------------------------
   DavideS' Bar Ristorante — menu pubblico
   Direzione grafica: base editoriale calda (carta avorio, oro brunito,
   titoli serif Cormorant) con dettagli contemporanei (schede arrotondate,
   ombre morbide, allergeni a pillola, foto grandi).
   Il blu del locale resta il colore d'accento principale.
   I font sono caricati con <link> in index.html, non con @import.
   ------------------------------------------------------------------ */

:root{
  /* colori */
  --navy:#023059;
  --navy-soft:#0a4478;
  --gold:#c9a227;        /* oro: solo grafica (filetti, bordi, indicatori) */
  --gold-light:#e3c044;
  --gold-text:#8a6a15;   /* oro leggibile: usato per i testi (5,06:1 su bianco) */
  --gold-wash:#f6efdd;
  --cream:#f7f4ee;
  --surface:#ffffff;
  --text:#1f1d1b;
  --text-soft:#6b6355;
  --line:#e8e1d4;
  --line-strong:#d8cdb8;
  --chip-bg:#f2ede3;
  --chip-text:#5f5647;

  /* tipografia */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* forma e profondità */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(31,29,27,.05), 0 1px 3px rgba(31,29,27,.05);
  --sh-2:0 2px 6px rgba(31,29,27,.05), 0 10px 24px rgba(31,29,27,.07);
  --sh-up:0 -2px 10px rgba(31,29,27,.07);

  /* spazio */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --wrap:760px;
  --tap:44px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:150px;   /* spazio per barra e pulsante Instagram */
}
h1,h2,h3,h4,p{margin:0;font-weight:400;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
img{display:block;max-width:100%;}
a{color:var(--navy);}

:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:var(--r-sm);}
.head-landing :focus-visible{outline-color:var(--gold-light);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---------------- barra superiore ---------------- */
.head-landing{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  max-width:var(--wrap);margin:0 auto;padding:6px 12px;
  display:flex;align-items:center;justify-content:center;position:relative;min-height:52px;
}
.head-brand{
  font-family:var(--serif);font-weight:600;font-size:21px;color:var(--navy);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.2;
}
.head-actions{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;}
.btn_share{
  color:var(--navy);font-family:var(--sans);font-weight:500;font-size:12px;
  min-height:var(--tap);padding:8px 12px;display:flex;align-items:center;gap:6px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);
  background:var(--chip-bg);transition:background .2s;
}
.btn_share:hover{background:var(--gold-wash);}
.btn_share svg{width:15px;height:15px;fill:var(--navy);}
.btn_languages{
  color:var(--navy);background:var(--chip-bg);border-radius:var(--r-pill);
  min-width:var(--tap);min-height:var(--tap);
  padding:5px 10px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:15px;
  transition:background .2s;
}
.btn_languages:hover{background:var(--gold-wash);}
.btn_languages .flag{font-size:18px;line-height:1;}
/* mentre il server traduce i piatti nuovi */
.btn_languages.translating{opacity:.6;}
.btn_languages.translating .flag{animation:trad-pulse 1.1s ease-in-out infinite;}
@keyframes trad-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn_languages .caret{border:4px solid transparent;border-top-color:var(--navy);margin-top:4px;}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);background:var(--surface);min-width:158px;
  box-shadow:var(--sh-2);border:1px solid var(--line);border-radius:var(--r-md);
  display:none;z-index:50;overflow:hidden;padding:4px;
}
.lang-menu.open{display:block;}
.lang-menu button{
  display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);
  padding:10px 12px;font-size:15px;color:var(--text);border-radius:var(--r-sm);
}
.lang-menu button:hover{background:var(--cream);}

/* ---------------- intestazione locale ---------------- */
.wrapper{max-width:var(--wrap);margin:0 auto;padding:0 var(--s2);}
.header-sec{text-align:center;padding:var(--s5) var(--s3) var(--s3);}
.logo_restaurant img{margin:0 auto;max-height:104px;width:auto;border-radius:var(--r-md);}
.logo_restaurant .logo_text{
  font-family:var(--serif);font-size:32px;font-weight:600;color:var(--navy);letter-spacing:.06em;
}
.header-sec hr{
  border:0;height:1px;width:56px;margin:var(--s3) auto;
  background:var(--gold);
}
.title_restaurant{
  font-family:var(--serif);font-size:20px;font-weight:500;font-style:italic;color:var(--text-soft);
  line-height:1.4;
}
/* pulsanti social nell'intestazione */
.shop_desc{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:0 var(--s3) var(--s4);}
.social_btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);padding:10px 18px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;
  color:var(--text-soft);text-decoration:none;
  transition:border-color .2s,box-shadow .2s;
}
.social_btn strong{color:var(--navy);font-weight:600;}
.social_btn:hover{box-shadow:var(--sh-2);}
.social_ico{
  width:26px;height:26px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.social_ico svg{width:16px;height:16px;fill:#fff;}
.ico_insta{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);}
.ico_tg{background:linear-gradient(180deg,#37bbfe,#007dbb);}

/* pulsante flottante: resta in vista ovunque, anche sopra le finestre */
.fab_insta{
  position:fixed;right:16px;z-index:70;
  bottom:calc(76px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:0 18px 0 10px;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);
  border-radius:var(--r-pill);text-decoration:none;
  box-shadow:0 4px 14px rgba(238,42,123,.35), 0 2px 6px rgba(31,29,27,.2);
  transition:transform .2s,box-shadow .2s;
}
.fab_insta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(238,42,123,.42);}
.fab_insta:active{transform:translateY(0);}
.fab_ico{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;}
.fab_ico svg{width:26px;height:26px;fill:#fff;}
.fab_txt{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;
}
.sep-dashed{display:none;}

/* ---------------- filtri alimentari ---------------- */
.filtri_box{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  margin-bottom:var(--s4);overflow:hidden;
}
.filtri_head{
  display:flex;align-items:center;gap:8px;width:100%;min-height:52px;
  padding:0 var(--s3);text-align:left;transition:background .2s;
}
.filtri_head:hover{background:var(--cream);}
.filtri_head.selected{background:var(--gold-wash);}
.filtri_titolo{
  flex:1;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text);
}
.filtri_conteggio{font-size:12px;font-weight:600;color:var(--navy);}
.filtri_head .chev{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--r-pill);background:var(--chip-bg);color:var(--navy);transition:transform .25s ease;
}
.filtri_head .chev svg{width:17px;height:17px;fill:currentColor;}
.filtri_head.selected .chev{transform:rotate(180deg);}
.filtri_corpo{display:none;padding:0 var(--s3) var(--s3);}
.filtri_corpo.open{display:block;}
.filtri_gruppo{display:flex;flex-wrap:wrap;gap:7px;padding-top:var(--s2);}
.filtro{
  font-size:13px;font-weight:500;color:var(--chip-text);background:var(--chip-bg);
  min-height:36px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;
}
.filtro:hover{background:var(--gold-wash);}
.filtro.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.filtri_piede{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line);}
.filtro_azzera{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--surface);border:1px solid var(--line-strong);
  min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-pill);
}
.filtri_avviso{font-size:12.5px;line-height:1.5;color:var(--text-soft);margin-top:var(--s2);}
.filtro_nota,.filtro_vuoto{
  background:var(--gold-wash);border-left:3px solid var(--gold);
  padding:12px var(--s3);border-radius:var(--r-md);margin-bottom:var(--s3);
  font-size:14px;line-height:1.5;color:var(--text);
}
.filtro_vuoto{font-family:var(--serif);font-size:18px;text-align:center;border-left:0;}
.cat_badge{
  font-size:12px;font-weight:600;color:var(--navy);background:var(--chip-bg);
  padding:2px 9px;border-radius:var(--r-pill);margin-right:8px;
}

/* ---------------- riquadro OGGI ---------------- */
.oggi_box{margin-bottom:var(--s5);}
.oggi_head{text-align:center;margin-bottom:var(--s4);}
.oggi_title{
  font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.22em;
  color:var(--navy);text-transform:uppercase;line-height:1;
}
.oggi_head:after{
  content:"";display:block;width:40px;height:2px;background:var(--gold);
  margin:var(--s2) auto 0;border-radius:var(--r-pill);
}
.oggi_group{margin-bottom:var(--s4);}
.oggi_group_title{
  font-family:var(--sans);font-size:11px;font-weight:600;color:var(--gold-text);
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:var(--s2);padding-left:2px;
}
.oggi_items{display:flex;flex-direction:column;gap:var(--s3);}

/* scheda grande: una per riga */
.oggi_card{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);
}
.oggi_photo{position:relative;}
.oggi_photo picture{display:block;}
.oggi_photo img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;}
.oggi_photo .caption_img{
  position:absolute;right:10px;bottom:10px;
  background:rgba(2,48,89,.82);color:#fff;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;
}
.oggi_photo .no-photo{
  width:100%;aspect-ratio:16/10;background:var(--gold-wash);
  display:flex;align-items:center;justify-content:center;
}
.oggi_photo .no-photo svg{width:64px;height:64px;opacity:.5;}
.oggi_body{padding:var(--s3) var(--s3) var(--s3);}
.oggi_name{
  font-family:var(--serif);font-size:24px;font-weight:600;color:var(--text);
  line-height:1.25;letter-spacing:.005em;
}
.oggi_desc{font-size:15px;line-height:1.6;color:var(--text-soft);margin-top:6px;}
.oggi_price{
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);margin-top:var(--s2);
}
.oggi_link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 var(--s3);margin-top:var(--s2);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);box-shadow:var(--sh-1);transition:background .2s,border-color .2s;
}
.oggi_link:hover{background:var(--gold-wash);border-color:var(--gold);}

/* ---------------- etichette allergeni e tag ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2);}
.chips_lbl{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);margin-right:2px;
}
.chip{
  font-size:12px;font-weight:500;color:var(--chip-text);background:var(--chip-bg);
  padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;
}
.list_legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s1);}
.tagicon{
  width:24px;height:24px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:#fff;
}
.tagicon-congelato{background:#2f93ad;}
.tagicon-abbattuto{background:#2f6fd0;}
.tagicon-vegetariano{background:#4a9d4a;}
.tagicon-vegano{background:#3f9b3f;}
.tagicon-senzaglutine{background:#b07d05;}
.tagicon-piccante{background:#d9392b;}
.tagicon-senzalattosio{background:#2b3d8f;}
.tagicon-biologico{background:#5e9c26;}

/* ---------------- menù a prezzo fisso ---------------- */
.fixed_menu{margin:0 0 var(--s4);}
.fixed_title{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--gold-text);text-transform:uppercase;text-align:center;margin-bottom:var(--s2);
}
.fixed_list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1);}
.fixed_card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--surface);padding:14px var(--s3);
  border-radius:var(--r-md);box-shadow:var(--sh-1);
  border-left:3px solid var(--gold);
}
.fixed_label{font-size:14.5px;line-height:1.45;color:var(--text);}
.fixed_price{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);white-space:nowrap;}

/* ---------------- carta menu ---------------- */
.pg_menu{margin-bottom:var(--s5);}
.menu_name{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--s2) 0 var(--s3);position:relative;
}
.menu_name .menu_icon{display:flex;align-items:center;justify-content:center;}
.menu_name .menu_icon svg{width:18px;height:18px;fill:var(--gold);}
.title_menuname{
  font-family:var(--serif);font-weight:600;font-size:22px;color:var(--navy);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
}

/* ---------------- categorie (fisarmonica) ---------------- */
.container_cat{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.head_cat_wrap{margin:0;}
.head_cat_wrap + .head_cat_wrap .head_cat,
.body_cat + .head_cat_wrap .head_cat{border-top:1px solid var(--line);}
.head_cat{
  position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:56px;background:var(--surface);text-align:left;padding:0 var(--s3);
  transition:background .2s;
}
.head_cat:hover{background:var(--cream);}
.title_cat{
  position:relative;flex:1;font-family:var(--serif);font-size:20px;font-weight:600;
  color:var(--navy);padding:14px 0 14px 16px;letter-spacing:.02em;
}
.title_cat:before{
  content:"";position:absolute;left:0;top:50%;width:7px;height:7px;
  background:var(--gold);border-radius:var(--r-pill);transform:translateY(-50%);
}
.head_cat .chev{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-pill);
  color:var(--navy);background:var(--chip-bg);transition:transform .25s ease,background .2s;
}
.head_cat .chev svg{width:18px;height:18px;fill:currentColor;}
.head_cat.selected{background:var(--gold-wash);}
.head_cat.selected .chev{transform:rotate(180deg);background:rgba(201,162,39,.28);}
.body_cat{display:none;padding:0 var(--s3) var(--s1);}
.body_cat.open{display:block;}
.desc_cat{font-size:14.5px;line-height:1.6;color:var(--text-soft);padding:var(--s2) 0 0;}

/* barra categoria "appiccicata" durante lo scorrimento */
#fixed_category{
  position:fixed;left:0;right:0;top:59px;z-index:30;display:none;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:2px solid var(--gold);
  font-family:var(--serif);font-weight:600;font-size:19px;color:var(--navy);
  letter-spacing:.02em;padding:12px var(--s3) 12px 28px;
  box-shadow:0 4px 12px rgba(31,29,27,.05);
}
#fixed_category.show{display:block;}
#fixed_category:before{
  content:"";position:absolute;left:14px;top:50%;width:7px;height:7px;
  background:var(--gold);border-radius:var(--r-pill);transform:translateY(-50%);
}

/* ---------------- piatto ---------------- */
.item-menu{padding:var(--s3) 0;border-top:1px solid var(--line);}
.item-menu:first-child{border-top:0;}
.image-wrapper{margin-bottom:var(--s2);position:relative;border-radius:var(--r-md);overflow:hidden;}
.image-wrapper .caption_img{
  position:absolute;right:8px;bottom:8px;
  background:rgba(2,48,89,.82);color:#fff;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;
}
.image-wrapper picture{display:block;}
.image-wrapper img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;}
.image-wrapper .no-photo{
  width:100%;aspect-ratio:2/1;background:var(--gold-wash);
  display:flex;align-items:center;justify-content:center;
}
.image-wrapper .no-photo svg{width:56px;height:56px;opacity:.5;}
.title_piatto{
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--text);line-height:1.25;
}
.desc_piatto{font-size:15px;line-height:1.6;color:var(--text-soft);margin-top:5px;}
.price{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);}
.footer_item{margin-top:var(--s2);}

/* ---------------- informazioni del locale ---------------- */
.info_box{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:var(--s4) var(--s3);margin-bottom:var(--s5);text-align:center;
}
.info_titolo{
  font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.2em;
  color:var(--navy);text-transform:uppercase;margin-bottom:var(--s1);
}
.info_titolo:after{
  content:"";display:block;width:34px;height:2px;background:var(--gold);
  margin:var(--s2) auto var(--s3);border-radius:var(--r-pill);
}
.info_riga{
  display:flex;flex-direction:column;gap:3px;padding:var(--s2) 0;
  border-top:1px solid var(--line);
}
.info_riga:first-of-type{border-top:0;}
.info_et{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-soft);
}
.info_val{font-family:var(--serif);font-size:19px;color:var(--text);line-height:1.4;}
.info_link{
  display:inline-block;margin-top:4px;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);
  min-height:auto;padding:4px 0;
}

/* ---------------- barra inferiore ---------------- */
.section-menu-fixed{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--sh-up);
}
.mfix-inner{max-width:var(--wrap);margin:0 auto;display:flex;}
.external_button{width:34%;display:flex;align-items:stretch;}
.menu-fixed{width:66%;display:flex;}
.btn_mfix,.external_button .btn_home{
  position:relative;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:60px;padding:8px 2px;text-decoration:none;
}
.btn_mfix svg,.external_button .btn_home svg{width:21px;height:21px;fill:var(--text-soft);transition:fill .2s;}
.btn_mfix span,.external_button .btn_home span{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
}
.btn_mfix:before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:3px;background:var(--gold);border-radius:var(--r-pill);transition:width .25s ease;
}
.btn_mfix.selected:before{width:28px;}
.btn_mfix.selected svg{fill:var(--navy);}
.btn_mfix.selected span{color:var(--navy);}

/* ---------------- modali a scorrimento ---------------- */
.modalescroll{
  position:fixed;inset:0;z-index:60;display:none;background:rgba(31,29,27,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.modalescroll.open{display:block;}
.modalescroll .box{
  max-width:var(--wrap);margin:0 auto;background:var(--cream);height:100%;
  display:flex;flex-direction:column;
}
.modalescroll .head_modal{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 14px;
}
.modalescroll .head_modal .label{
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--text-soft);text-transform:uppercase;
}
.modalescroll .head_modal .x{
  background:var(--surface);width:var(--tap);height:var(--tap);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--text);
  box-shadow:var(--sh-1);
}
.title_modalbox{
  font-family:var(--serif);font-weight:600;font-size:26px;color:var(--navy);
  letter-spacing:.18em;text-align:center;padding:var(--s1) var(--s2) var(--s3);text-transform:uppercase;
}
.modalescroll .body_modal{flex:1;overflow:auto;padding:0 var(--s3) 100px;-webkit-overflow-scrolling:touch;}

/* modale MENU: schede carte + elenco categorie */
.tab_menu{display:flex;gap:var(--s1);margin-bottom:var(--s3);}
.menu_app_item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1);transition:background .2s;
}
.menu_app_item .ico{
  width:38px;height:38px;background:var(--chip-bg);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
}
.menu_app_item .ico svg{width:20px;height:20px;fill:var(--navy);}
.menu_app_item .title_menuapp{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--text-soft);text-transform:uppercase;text-align:center;
}
.menu_app_item.selected{background:var(--navy);}
.menu_app_item.selected .ico{background:rgba(255,255,255,.16);}
.menu_app_item.selected .ico svg{fill:var(--gold-light);}
.menu_app_item.selected .title_menuapp{color:#fff;}
.cat_link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:var(--tap);padding:15px var(--s3);margin-bottom:var(--s1);
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1);
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);text-align:left;
  transition:background .2s;
}
.cat_link:hover{background:var(--gold-wash);}
.cat_link .dot{width:7px;height:7px;background:var(--gold);flex:none;margin-right:12px;border-radius:var(--r-pill);}
.cat_link .arrow{color:var(--text-soft);font-size:17px;}

/* modale LEGENDA */
.leg_row{
  display:flex;gap:12px;padding:var(--s2) var(--s3);margin-bottom:var(--s1);
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1);
}
.leg_row .tagicon{flex:none;}
.leg_row b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--text);}
.leg_row p{font-size:14px;line-height:1.55;color:var(--text-soft);}

/* modale CONDIVIDI (riquadro centrale) */
.modalbox{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(31,29,27,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:var(--s3);
}
.modalbox.open{display:flex;}
.modalbox .box{
  background:var(--surface);width:min(460px,100%);padding:var(--s3) var(--s4) var(--s4);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.modalbox .title_modalbox{padding:var(--s1) 0 var(--s3);font-size:22px;}
.share_row{
  display:flex;align-items:center;gap:14px;min-height:var(--tap);padding:14px var(--s2);
  border-radius:var(--r-md);font-size:16px;color:var(--text);text-decoration:none;transition:background .2s;
}
.share_row:hover{background:var(--cream);}
.share_row .ico{
  width:32px;height:32px;border-radius:var(--r-pill);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:15px;flex:none;
}
.share_row .arrow{margin-left:auto;color:var(--text-soft);}
.ico-fb{background:#1877f2;}
.ico-wa{background:#128c3e;}
.ico-mail{background:#2f7fe0;}

/* ---------------- schermi larghi ---------------- */
@media (min-width:600px){
  .oggi_items{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start;}
  .oggi_items .oggi_card:first-child{grid-column:1 / -1;}
  .oggi_title{font-size:36px;}
  .wrapper{padding:0 var(--s4);}
  .header-sec{padding-top:48px;}
}
@media (min-width:820px){
  .image-wrapper img{aspect-ratio:2/1;}
}
@media (max-width:380px){
  .head-brand{font-size:17px;letter-spacing:.06em;}
  .btn_share span{display:none;}
  .oggi_title{font-size:26px;letter-spacing:.18em;}
  .oggi_name{font-size:21px;}
  .title_cat{font-size:18px;}
  .title_piatto{font-size:20px;}
}

/* ---------------- il Piatto Ricco ----------------
   Gli ingredienti disponibili sono la parte che conta: stanno grandi e in
   alto. Gli esempi vengono dopo, più contenuti, per non farli sembrare tre
   piatti fra cui scegliere. */
.ricco_box{margin-bottom:var(--s5);}
.ricco_libero{
  text-align:center;font-family:var(--serif);font-size:19px;line-height:1.5;
  color:var(--navy);max-width:34em;margin:0 auto var(--s4);
}
.ricco_sottotitolo{
  font-family:var(--sans);font-size:11px;font-weight:600;color:var(--gold-text);
  text-transform:uppercase;letter-spacing:.18em;margin:var(--s4) 0 var(--s2);
}
.ricco_ingredienti{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.ricco_ing{
  background:#fff;border:1px solid rgba(2,48,89,.14);border-radius:var(--r-pill);
  padding:9px 16px;font-size:15px;color:var(--navy);box-shadow:var(--sh-1);
  display:flex;align-items:center;gap:10px;
}
/* con la foto la pillola diventa una piccola scheda: l'immagine tonda a
   sinistra, il nome accanto. Senza foto resta una pillola di testo. */
.ricco_ing.con_foto{padding:5px 16px 5px 5px;}
.ricco_ing img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto;
}
.ricco_esempi{display:grid;gap:var(--s3);}
.ricco_esempio{
  background:#fff;border-radius:var(--r-2);overflow:hidden;box-shadow:var(--sh-1);
  display:grid;grid-template-columns:minmax(0,140px) 1fr;align-items:stretch;
}
.ricco_esempio:has(.ricco_testo:only-child){grid-template-columns:1fr;}
.ricco_foto{position:relative;}
.ricco_foto img{width:100%;height:100%;object-fit:cover;display:block;}
/* La dicitura sulle foto generate. Sta su tutta la larghezza perché il testo
   è una frase, non un'etichetta: deve leggersi, non decorare. */
.ricco_illustrativa{
  position:absolute;left:0;right:0;bottom:0;background:rgba(2,48,89,.88);color:#fff;
  font-size:10px;line-height:1.35;letter-spacing:.04em;
  padding:5px 8px;text-align:center;
}
.ricco_testo{padding:var(--s3);}
.ricco_testo h4{
  font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);margin:0 0 4px;
}
.ricco_frase{font-size:14px;color:var(--muted);margin:0 0 var(--s2);line-height:1.45;}
.ricco_composizione{font-size:14px;color:var(--text);margin:0 0 6px;line-height:1.5;}
.ricco_valori{font-size:13px;color:var(--gold-text);margin:0;}
.ricco_nota{
  font-size:12px;color:var(--muted);line-height:1.5;margin:var(--s3) 0 0;
  text-align:center;max-width:38em;margin-inline:auto;
}

@media (min-width:760px){
  .ricco_esempi{grid-template-columns:repeat(3,1fr);}
  .ricco_esempio{grid-template-columns:1fr;}
  .ricco_foto{aspect-ratio:16/10;}
}
@media (max-width:420px){
  .ricco_esempio{grid-template-columns:1fr;}
  .ricco_foto{aspect-ratio:16/10;}
  .ricco_libero{font-size:17px;}
}