*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
:root{--primary:#C1121F;--accent:#2A9D8F;--bg:#111;--card:#1E1E1E;--text:#F4F4F4}
a,button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--primary)}
.brand{font-weight:700}
.nav{display:flex;gap:.5rem;flex:1}
.link{background:transparent;border:0;color:#fff;font-weight:600;padding:.5rem .75rem}
.link:hover{background:rgba(255,255,255,.12);border-radius:.5rem}
.actions{display:flex;align-items:center}
.primary{background:var(--accent);border:0;color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-weight:700}
.badge{background:#111;color:#fff;border-radius:999px;padding:.125rem .5rem;margin-right:.5rem;display:inline-block;min-width:1.5rem;text-align:center}
main{padding:1rem}
.hero{padding:3rem 1rem;text-align:center;background:var(--card);border-radius:.75rem}
.view h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid #333;border-radius:.5rem;padding:1rem}
.card h3{margin:.2rem 0}
.card .price{font-weight:700;margin:.5rem 0}
.card .add{width:100%}
table.cart{width:100%;border-collapse:collapse;margin-top:.5rem}
table.cart th,table.cart td{padding:.5rem;border-bottom:1px solid #333;text-align:left}
table.cart td.qty{white-space:nowrap}
.cart-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
#cart-summary{margin-top:1rem}
#cart-summary .totals{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.notice{padding:.5rem .75rem;background:#3b2f00;border:1px solid #8a6d3b;border-radius:.25rem;margin-top:.75rem}
.ok{padding:.5rem .75rem;background:#123a1b;border:1px solid #2a9d8f;border-radius:.25rem;margin-top:.75rem}
.danger{padding:.5rem .75rem;background:#3a0f12;border:1px solid #c1121f;border-radius:.25rem;margin-top:.75rem}
.form{margin-top:1rem;display:grid;gap:.75rem;max-width:520px}
.form label{display:grid;gap:.25rem}
.form input,.form textarea{padding:.5rem;border-radius:.35rem;border:1px solid #333;background:#1a1a1a;color:var(--text)}
.form .row{display:flex;gap:1rem}
.form .inline{display:flex;align-items:center;gap:.4rem}
.form-actions{margin-top:.5rem}
.footer{padding:1rem;color:#999}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.logo{height:32px;width:auto}


body.watermark::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('assets/logo.png') center/min(60vmin, 70%) no-repeat;
  opacity:0.08;
  pointer-events:none;
  z-index:0;
  filter:grayscale(20%);
}
.topbar, main, footer{position:relative; z-index:1;}

/* Header logo sizing */
.topbar .logo{height:32px;width:auto;margin-right:.5rem}
/* Watermark: single big circular logo */
body.watermark::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('assets/logo_circle.png') center / min(80vmin, 90%) no-repeat;
  opacity:0.08;
  pointer-events:none;
  z-index:0;
  filter:grayscale(0%);
}
.topbar, main, footer{position:relative; z-index:1;}

/* --- Home hero translucent bar + socials --- */
.hero{ 
  background: rgba(0,0,0,0.35); 
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.hero p.lead{font-size:1.05rem;color:#ddd;margin-top:.5rem}
.hero .cta{margin-top:1rem}
.home-socials{display:flex;gap:.75rem;justify-content:center;margin-top:1rem;flex-wrap:wrap;opacity:.95}
.home-socials a{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:.5rem;border:1px solid #333;background:rgba(0,0,0,0.3);color:#f4f4f4;text-decoration:none}
.home-socials a:hover{border-color:#555;background:rgba(0,0,0,0.45)}
.home-socials svg{width:18px;height:18px}
.home-copy{max-width:860px;margin:1.25rem auto 0;line-height:1.65;color:#eaeaea}
.home-copy h3{margin:.2rem 0 .4rem 0}
.home-copy p{margin:.4rem 0}

/* --- Hero background photo + double CTA --- */
.hero{
  position:relative;
  background:
    linear-gradient( to bottom, rgba(0,0,0,.55), rgba(0,0,0,.45) ),
    url('assets/hero.jpg') center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}
.hero .cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.hero .secondary{background:transparent;border:1px solid #ccc;color:#fff}
.hero .secondary:hover{border-color:#fff}
.hero small.caption{display:block;color:#bbb;margin-top:.75rem;font-size:.85rem;opacity:.9}

/* --- Home reviews block --- */
.home-reviews{
  max-width:860px;
  margin:1.25rem auto 0;
  text-align:center;
  color:#eee;
  line-height:1.5;
}
.home-reviews .stars{
  font-size:1.4rem;
  color:#FFD700; /* gold */
  letter-spacing:.1rem;
  margin-bottom:.35rem;
}
.home-reviews .review-link{
  color:#2A9D8F;
  font-weight:600;
  text-decoration:none;
}
.home-reviews .review-link:hover{text-decoration:underline}

/* --- Modal & Drawer --- */
#chooser-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10000}
#chooser-modal[hidden]{display:none;}
.chooser-panel{background:rgba(20,20,20,.8);border:1px solid rgba(255,255,255,.15);border-radius:.7rem;max-width:620px;width:92%;padding:1rem;box-shadow:0 16px 42px rgba(0,0,0,.6)}
.chooser-panel h3{margin:.1rem 0 .2rem}
.muted{opacity:.9}
.chooser-price{margin:.4rem 0 .6rem;font-weight:600}
.chooser-variants{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.chooser-variants label{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.35);padding:.4rem .6rem;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;cursor:pointer}
.chooser-qty{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #333;border-radius:.5rem;overflow:hidden;margin:.5rem 0}
.chooser-qty button{background:#222;border:0;color:#fff;padding:.45rem .75rem;cursor:pointer}
.chooser-qty input{width:64px;text-align:center;background:#111;border:0;color:#fff;padding:.45rem}
.outline{width:100%;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:.6rem .8rem;border-radius:.6rem;cursor:pointer;margin:.4rem 0}
.primary{background:#16a34a;border:1px solid #12893e;color:#fff;padding:.6rem .9rem;border-radius:.6rem;cursor:pointer}
.chooser-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem}
/* Drawer */
#extras-drawer{position:fixed;top:0;right:0;height:100%;width:360px;background:#121212;border-left:1px solid #2a2a2a;z-index:10001;box-shadow:-16px 0 42px rgba(0,0,0,.55);transition:transform .25s ease}
#extras-drawer[hidden]{transform:translateX(110%);}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem;border-bottom:1px solid #2a2a2a}
.drawer-body{padding:.8rem;display:grid;grid-template-columns:1fr;gap:.5rem;max-height:calc(100% - 56px);overflow:auto}
.drawer-body label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#161616;border:1px solid #2a2a2a;border-radius:.5rem;padding:.5rem .6rem}
.drawer-body input[type="checkbox"]{margin-right:.5rem}
/* Card choose button */
.card .add-min{display:none}
.card .choose{background:#16a34a;border:1px solid #12893e;color:#fff;padding:.5rem .8rem;border-radius:.6rem;cursor:pointer;margin-top:.4rem}

/* -- Watermark transparency for product cards -- */
.card{
  background: rgba(20,20,20,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.menu-cat h3{opacity:.95}

/* Category tabs */
.cat-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.cat-tabs .tab{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:#fff;padding:.35rem .7rem;border-radius:999px;cursor:pointer}
.cat-tabs .tab:hover{background:rgba(0,0,0,.5)}
/* More transparent cards */
.card{background:rgba(20,20,20,.45)!important}

/* Sticky top bar */
header, .topbar, nav.site-nav, .navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
}
main { scroll-margin-top: 72px; }
body { scroll-padding-top: 72px; }

.cart-table th,.cart-table td{border-bottom:1px solid rgba(255,255,255,.08);padding:.5rem}
.cart-table th{opacity:.85;text-align:left}
.cart-table .mini{opacity:.8;font-size:.9em;margin-top:.15rem}
#clear-cart{background:#222;border:1px solid #444;color:#eee;padding:.5rem .8rem;border-radius:.5rem;cursor:pointer}
#send-wa.primary{padding:.6rem .9rem}

#cart-summary{margin:.5rem 0 0}

/* Transparent hero banner */
.transparent-hero{background:transparent!important;}
.transparent-hero *{background:transparent!important;}

.hint{font-weight:600; color:#fff; opacity:0.9; font-size:.85em; opacity:.8; margin-left:.35rem}

.hint-pill{display:inline-block;padding:.05rem .4rem;border-radius:1rem;font-size:.85em;opacity:.9;background:#222;border:1px solid #2a2a2a;margin-left:.35rem}


/* --- Drawer layout tweaks --- */
#extras-drawer{max-width:720px;width:min(92vw,720px)}
#extras-drawer .drawer-body{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap:.6rem;
  max-height: 50vh;
  overflow:auto;
  padding:.6rem .8rem;
}
#extras-drawer .chip{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:10px;padding:.45rem .55rem;
}
#extras-drawer .drawer-footer{
  position:sticky;bottom:0;background:var(--bg);
}


/* --- Install modal (icons) --- */
#install-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999}
#install-modal[hidden]{display:none}
#install-modal .modal{width:min(520px,92vw);background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden}
#install-modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
#install-modal .modal-body{padding:1rem}
#install-modal .modal-body h4{margin:.6rem 0 .3rem;font-size:1.05rem}
#install-modal .modal-body ol{margin:.3rem 0 1rem 1.1rem}
#install-modal .modal-footer{padding:.9rem 1rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
#install-modal .close{background:none;border:0;color:#fff;font-size:1.25rem;cursor:pointer}
.step-ico{display:inline-flex;width:1.1em;justify-content:center;margin-right:.25em;font-weight:bold}

/* === Griglia "pillole" ingredienti extra === */
#extras-drawer .drawer-body.extras-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
  max-height: min(60vh, 520px);
  overflow: auto;
  padding-bottom: .5rem;
}
#extras-drawer .extra-pill{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid #2a2a2a; border-radius:12px; background:#101010;
}
#extras-drawer .extra-pill .left{ display:inline-flex; align-items:center; gap:.5rem; }
#extras-drawer .extra-pill .price{ opacity:.9; }
#extras-drawer input[type="checkbox"]{ transform:scale(1.05); }
#extras-drawer .extra-pill:has(input:checked){ border-color:#3aa655; box-shadow: inset 0 0 0 1px #3aa655; }

input.invalid{ outline: 2px solid red; }