:root{
  --ground:#FBFBFC; --surface:#FFFFFF; --surface-2:#F2F4F7; --surface-3:#E9EDF2;
  --ink:#14171C; --ink-2:#3D4551; --ink-3:#6B7482;
  --rule:#D9DEE5; --rule-strong:#B4BCC7;
  --accent:#1E4C7C; --accent-soft:#E7EEF6; --accent-ink:#173C61;
  --signal:#9C3D22; --signal-soft:#F8EDE8;
  --good:#2E6B4F; --good-soft:#E8F1EC;
  --serif:Cambria,"Source Serif Pro","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:Calibri,"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:Consolas,"SF Mono",Menlo,"Roboto Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101319; --surface:#171B22; --surface-2:#1E232B; --surface-3:#262C36;
    --ink:#E4E8EE; --ink-2:#AEB6C2; --ink-3:#828B99;
    --rule:#2A303A; --rule-strong:#3E4652;
    --accent:#84B4E4; --accent-soft:#182635; --accent-ink:#A8CBEC;
    --signal:#DC8F70; --signal-soft:#2C1E18;
    --good:#75C49A; --good-soft:#17251E;
  }
}
:root[data-theme="dark"]{
  --ground:#101319; --surface:#171B22; --surface-2:#1E232B; --surface-3:#262C36;
  --ink:#E4E8EE; --ink-2:#AEB6C2; --ink-3:#828B99;
  --rule:#2A303A; --rule-strong:#3E4652;
  --accent:#84B4E4; --accent-soft:#182635; --accent-ink:#A8CBEC;
  --signal:#DC8F70; --signal-soft:#2C1E18;
  --good:#75C49A; --good-soft:#17251E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; margin:0; padding:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px; margin:0 auto; padding:0 20px}
.prose{max-width:68ch}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
strong{font-weight:700} em{font-style:italic}
p{margin:0 0 15px}
ul,ol{margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:7px}

/* ── testata ─────────────────────────────── */
header.top{border-bottom:1px solid var(--rule); background:var(--surface)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand svg{flex:none}
.brand-name{font-family:var(--mono); font-size:13px; letter-spacing:.42em; font-weight:700; color:var(--accent)}
nav.menu{display:flex; gap:22px; flex-wrap:wrap}
nav.menu a{font-size:15px; text-decoration:none; color:var(--ink-2)}
nav.menu a:hover{color:var(--accent); text-decoration:underline}

/* ── sezioni ─────────────────────────────── */
main{padding-bottom:80px}
section{padding-top:52px}
h1{font-family:var(--serif); font-weight:700; font-size:clamp(32px,5.2vw,50px);
  line-height:1.08; letter-spacing:-.015em; margin:0 0 14px; text-wrap:balance}
h2{font-family:var(--serif); font-weight:700; font-size:clamp(24px,3.4vw,31px); line-height:1.18;
  margin:0 0 8px; text-wrap:balance; padding-bottom:11px; border-bottom:1px solid var(--rule-strong)}
h3{font-family:var(--serif); font-weight:700; font-size:20px; margin:28px 0 6px; text-wrap:balance}
h4{font-weight:700; font-size:15px; margin:20px 0 5px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px; font-weight:700}
.dek{font-family:var(--serif); font-size:clamp(18px,2.2vw,21px); line-height:1.5;
  color:var(--ink-2); margin:0 0 18px; max-width:60ch; font-style:italic}
.footnote{font-size:13.5px; color:var(--ink-3); line-height:1.5}

.hero{padding:64px 0 12px; border-bottom:3px double var(--rule-strong)}

/* ── schede prodotto ─────────────────────── */
.griglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin:26px 0}
.card{background:var(--surface); border:1px solid var(--rule); display:flex; flex-direction:column}
.card.primo{border-color:var(--accent); border-width:2px}
.card-hd{background:var(--surface-2); border-bottom:1px solid var(--rule); padding:9px 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); font-weight:700; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card.primo .card-hd{background:var(--accent-soft); color:var(--accent-ink); border-bottom-color:var(--accent)}
.card-bd{padding:18px 20px; flex:1; display:flex; flex-direction:column}
.card-bd h3{margin-top:0}
.card-bd > :last-child{margin-bottom:0}
.spinta{margin-top:auto; padding-top:14px}
.prezzo{font-family:var(--serif); font-size:30px; font-weight:700; margin:0 0 4px}
.prezzo small{font-size:15px; color:var(--ink-3); font-weight:400; font-family:var(--sans)}

.bottone{display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; padding:11px 24px; border:2px solid var(--accent)}
.bottone:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.bottone.vuoto{background:transparent; color:var(--accent)}
.bottone.vuoto:hover{background:var(--accent-soft)}

/* ── tabelle ─────────────────────────────── */
.tw{overflow-x:auto; margin:20px 0; border:1px solid var(--rule); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:520px}
th{background:var(--accent); color:#fff; text-align:left; padding:8px 14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
td{border-bottom:1px solid var(--rule); padding:9px 14px; vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--surface-2)}
td.k{font-weight:600; width:32%}

/* ── riquadri ────────────────────────────── */
.box{border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--surface);
  padding:16px 19px; margin:22px 0}
.box h4{margin-top:0; color:var(--accent)}
.box > :last-child{margin-bottom:0}
.box.attenzione{border-left-color:var(--signal)}
.box.attenzione h4{color:var(--signal)}

blockquote{margin:24px 0; padding:2px 0 2px 20px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--ink-2); font-style:italic}
blockquote p:last-child{margin-bottom:0}

/* ── piede ───────────────────────────────── */
footer.fondo{border-top:3px double var(--rule-strong); background:var(--surface); padding:30px 0 44px; margin-top:60px}
.fondo-griglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px}
.fondo h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px}
.fondo a{display:block; font-size:15px; margin-bottom:5px; color:var(--ink-2); text-decoration:none}
.fondo a:hover{color:var(--accent); text-decoration:underline}
.fondo .legale{font-size:13px; color:var(--ink-3); line-height:1.55; margin-top:26px;
  border-top:1px solid var(--rule); padding-top:16px}

@media print{ nav.menu, .bottone { display:none } }