/* ============================================================
   Village Pizza — menu bilingue
   Tutte le regole sono sotto .vpm: nessun conflitto col tema.
   Colori campionati dal volantino/pannello 2025.
   ============================================================ */

.vpm{
  --vpm-orange:#F4711F;
  --vpm-brown:#311A12;
  --vpm-grey:#4F4C4D;
  --vpm-cream:#FEEFE1;
  --vpm-red:#ED1C24;
  --vpm-font:"Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;
  --vpm-tail:26px;

  max-width:900px; margin:0 auto; padding:0 16px;
  font-family:var(--vpm-font); font-size:15px; line-height:1.4;
  color:var(--vpm-brown); background:#fff;
  -webkit-font-smoothing:antialiased;
}
.vpm *,.vpm *::before,.vpm *::after{box-sizing:border-box}
.vpm p{margin:0}
.vpm svg{max-width:100%; height:auto; display:block}
.vpm a{text-decoration:none}

/* ---------- testata ---------- */
.vpm-hero{padding:22px 0 8px; display:flex; align-items:flex-end; gap:10px}
.vpm-hero-main{flex:1; min-width:0; text-align:center}
.vpm-logo{width:min(250px,54vw); margin:0 auto}
.vpm-claim{
  font-weight:900; font-size:clamp(16px,4.5vw,26px); letter-spacing:-.01em;
  text-transform:uppercase; margin:16px 0 2px !important; color:var(--vpm-brown); line-height:1.15;
}
.vpm-tel{
  display:inline-block; color:var(--vpm-orange);
  font-weight:900; font-size:clamp(34px,10vw,58px); letter-spacing:-.02em; line-height:1;
}
.vpm-tel:hover{color:var(--vpm-brown)}
.vpm-scooter{flex:none; width:clamp(72px,19vw,132px); pointer-events:none}

/* ---------- bandiere ---------- */
.vpm-flags{display:flex; justify-content:center; gap:14px; padding:14px 0 4px}
.vpm-flag{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.vpm-flag svg{
  width:72px; height:48px; border-radius:4px;
  box-shadow:0 0 0 2px rgba(49,26,18,.18); opacity:.42; filter:saturate(.55);
  transition:opacity .15s, box-shadow .15s, filter .15s, transform .15s;
}
.vpm-flag b{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--vpm-grey); opacity:.55}
.vpm-flag[aria-current="true"] svg{opacity:1; filter:none; box-shadow:0 0 0 4px var(--vpm-orange); transform:translateY(-2px)}
.vpm-flag[aria-current="true"] b{color:var(--vpm-brown); opacity:1}
.vpm-flag:focus-visible svg{outline:3px solid var(--vpm-red); outline-offset:4px}
@media (max-width:400px){ .vpm-flag svg{width:62px; height:42px} }

/* ---------- barra fissa ---------- */
.vpm-bar{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:3px solid var(--vpm-brown); padding-top:8px;
  margin:0 -16px; padding-left:16px; padding-right:16px;
}
.vpm-bar-top{display:flex; align-items:center; gap:10px; padding-bottom:8px}
.vpm-bar-logo{width:82px; flex:none}
.vpm-search{
  flex:1; min-width:0; font-family:var(--vpm-font); font-size:15px; font-weight:500;
  padding:9px 12px; border:2px solid var(--vpm-brown); border-radius:6px;
  background:var(--vpm-cream); color:var(--vpm-brown); -webkit-appearance:none;
}
.vpm-search:focus{outline:none; border-color:var(--vpm-orange)}
.vpm-miniflags{display:flex; gap:6px; flex:none}
.vpm-miniflag svg{width:34px; height:23px; border-radius:3px; opacity:.4; box-shadow:0 0 0 1.5px rgba(49,26,18,.25)}
.vpm-miniflag[aria-current="true"] svg{opacity:1; box-shadow:0 0 0 2.5px var(--vpm-orange)}
@media (max-width:430px){ .vpm-bar-logo{width:58px} .vpm-miniflag svg{width:30px; height:20px} }

.vpm-filters{display:flex; gap:7px; padding-bottom:8px; overflow-x:auto; scrollbar-width:none}
.vpm-filters::-webkit-scrollbar{display:none}
.vpm-chip{
  font-family:var(--vpm-font); font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:7px 11px; border:2px solid var(--vpm-brown);
  border-radius:999px; background:#fff; color:var(--vpm-brown); cursor:pointer; white-space:nowrap;
}
.vpm-chip[aria-pressed="true"]{background:var(--vpm-brown); color:#fff}
.vpm-chip:focus-visible{outline:2px solid var(--vpm-orange); outline-offset:2px}

.vpm-nav{display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.vpm-nav::-webkit-scrollbar{display:none}
.vpm-nav a{
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--vpm-grey); padding:8px 11px 9px; white-space:nowrap; border-bottom:4px solid transparent;
}
.vpm-nav a.on{color:var(--vpm-brown); border-bottom-color:var(--vpm-orange)}

/* ---------- sezioni ---------- */
.vpm-section{padding-top:30px; scroll-margin-top:150px}
.vpm-banner{
  background:var(--vpm-orange); color:#fff; font-family:var(--vpm-font);
  font-weight:900; text-transform:uppercase; font-size:clamp(19px,5vw,27px);
  line-height:1; padding:11px 44px 12px 15px; margin:0 !important;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--vpm-tail)) 100%, 0 100%);
}
.vpm-sub{font-size:13px; font-weight:500; color:var(--vpm-grey); margin:8px 2px 0 !important}

.vpm-colhead{
  display:grid; grid-template-columns:1fr repeat(3,50px); gap:0 6px;
  padding:9px 8px 4px; font-size:8.7px; font-weight:800; white-space:nowrap;
  text-transform:uppercase; color:var(--vpm-orange);
}
.vpm-colhead.single{grid-template-columns:1fr 62px}
.vpm-colhead span{text-align:center}
.vpm-colhead.single span:last-child{text-align:right}

.vpm-item{
  display:grid; grid-template-columns:1fr repeat(3,50px); gap:0 6px; align-items:start;
  background:var(--vpm-cream); border-bottom:2.5px solid var(--vpm-brown); padding:7px 8px 6px;
}
.vpm-item.single{grid-template-columns:1fr 62px}
.vpm-item.hide{display:none}
.vpm-name{display:inline; font-weight:800; font-size:15.5px; line-height:1.2}
.vpm-ing{display:block; font-size:11.5px; font-weight:500; color:var(--vpm-grey); line-height:1.3; margin-top:2px}
.vpm-price{font-weight:700; font-size:14px; text-align:center; padding-top:1px; white-space:nowrap}
.vpm-item.single .vpm-price{text-align:right}
.vpm-price.no{color:var(--vpm-grey); opacity:.45; font-weight:500}
.vpm-unit{font-size:9px; font-weight:700; color:var(--vpm-grey); margin-left:1px}

.vpm-tag{
  display:inline-block; font-size:8.5px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 5px; border-radius:3px; margin-left:6px;
  vertical-align:2px; color:#fff;
}
.vpm-tag.veg{background:#4E8B3B}
.vpm-tag.hot{background:var(--vpm-red)}

.vpm-section.hide{display:none}
.vpm-empty{background:var(--vpm-cream); padding:26px 16px; text-align:center; font-weight:600; color:var(--vpm-grey); margin-top:18px}

/* ---------- box scuri ---------- */
.vpm-box{background:var(--vpm-brown); color:var(--vpm-cream); padding:16px 16px 14px; margin-top:10px}
.vpm-box h3{margin:0 0 10px !important; font-size:17px; font-weight:900; text-transform:uppercase; color:#fff; font-family:var(--vpm-font)}
.vpm-r{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid rgba(254,239,225,.22); font-size:14px; font-weight:600}
.vpm-r:last-child{border-bottom:0}

/* ---------- promo, orari, footer ---------- */
.vpm-promo{margin:36px 0 0; display:flex; justify-content:center}
.vpm-promo svg{width:min(560px,92%)}
.vpm-hours{background:var(--vpm-brown); color:var(--vpm-cream); text-align:center; padding:16px; margin-top:10px}
.vpm-hours-lbl{font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; opacity:.65}
.vpm-hours .d{font-size:15px; font-weight:900; text-transform:uppercase; margin-top:9px; color:#fff}
.vpm-hours .t{font-size:15px; font-weight:600}
.vpm-hours .t small{font-size:10.5px; opacity:.7}

.vpm-call{
  display:block; margin-top:18px; background:var(--vpm-orange); color:#fff;
  text-align:center; font-weight:900; font-size:19px; text-transform:uppercase;
  padding:15px; letter-spacing:.02em;
}
.vpm-call:hover{background:var(--vpm-red); color:#fff}

.vpm-foot{padding:26px 0 40px; font-size:12px; font-weight:500; color:var(--vpm-grey); line-height:1.7; text-align:center}
.vpm-foot a{color:var(--vpm-orange); font-weight:700}
.vpm-legend{margin-top:12px !important; font-size:11px; font-weight:600}
.vpm-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px}

@media (max-width:430px){
  .vpm-colhead, .vpm-item{grid-template-columns:1fr repeat(3,46px); gap:0 4px}
  .vpm-colhead.single, .vpm-item.single{grid-template-columns:1fr 56px}
  .vpm-colhead{font-size:8px}
  .vpm-price{font-size:12.5px}
  .vpm-name{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){ .vpm *{transition:none !important} }

@media print{
  .vpm-bar, .vpm-flags, .vpm-call, .vpm-scooter{display:none !important}
  .vpm-item{break-inside:avoid}
  .vpm{max-width:none; font-size:11px}
}