:root{
  /* Colori brand – puoi regolarli in 10s per allinearli al tuo tema */
  --brand: #e63946;         /* accento (bottoni, link) */
  --brand-ink: #ffffff;     /* testo su bottoni brand */
  --ink: #1f2937;           /* testo principale (grigio scuro) */
  --muted: #6b7280;         /* testo secondario */
  --bg: #f7f8fb;            /* sfondo pagine */
  --panel: #ffffff;         /* box bianchi */
  --border: #e5e7eb;        /* bordi leggeri */
  --shadow: 0 2px 8px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  padding:20px;
}

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 24px;
}
header h1{margin:0; font-size:1.6rem; font-weight:700; letter-spacing:.2px}
header a{color:var(--brand); text-decoration:none; font-weight:600}
header a:hover{opacity:.8}

/* Card/box */
.box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin:0 0 20px;
  box-shadow:var(--shadow);
}
.box h2{margin:0 0 12px; font-size:1.15rem; font-weight:700}

/* Griglia modulare (desktop→mobile) */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 820px){ .grid{grid-template-columns:1fr} }

/* Elenco prodotti nel carrello */
#carrelloContainer .prodotto{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
#carrelloContainer .prodotto:last-child{border-bottom:none}
.prodotto img{
  width:84px; height:auto; border-radius:10px; border:1px solid var(--border);
  background:#fafafa;
}
.prodotto h3{margin:0 0 6px; font-size:1rem}
.prodotto p{margin:0 0 8px; color:var(--muted)}
.prodotto button{
  --btn-bg:#ef4444;
  background:var(--btn-bg); color:#fff; border:0; padding:6px 10px;
  border-radius:8px; cursor:pointer; font-weight:600; font-size:.9rem;
}
.prodotto button:hover{filter:brightness(.92)}

/* Form controls */
label{font-weight:600}
select,input[type="number"],input[type="text"]{
  width:100%; padding:9px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--ink); outline:none;
}
select:focus, input:focus{box-shadow:0 0 0 3px rgba(230,57,70,.15); border-color:#d1d5db}
small.note{display:block; margin-top:4px; color:var(--muted); font-size:.85rem}

/* Totali */
.totale{font-size:1.25rem; font-weight:800; color:var(--ink)}
#totale{
  color:#d97706; /* arancione “attenzione” per importo finale */
  font-size:1.35rem; font-weight:900;
}

/* Bottoni generali */
button{
  background:var(--brand); color:var(--brand-ink);
  border:0; border-radius:12px; padding:10px 16px; font-weight:700; cursor:pointer;
  transition:transform .04s ease, filter .15s ease;
}
button:hover{filter:brightness(.95)}
button:active{transform:translateY(1px)}

/* Selettore corriere – opzioni leggibili */
#corriere option{padding:.25rem .5rem}

/* Helper per righe costo */
.riga-costo{display:flex; align-items:center; justify-content:space-between; gap:12px}
.riga-costo + .riga-costo{margin-top:6px}

/* Badge mini evidenza (volendo per peso o volumetrico) */
.badge{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  background:#f1f5f9; color:#334155; font-size:.75rem; border:1px solid var(--border);
}

/* Link */
a{color:var(--brand)}
a:hover{opacity:.85}

/* Riduci densità su mobile */
@media (max-width:480px){
  body{padding:14px}
  header h1{font-size:1.35rem}
  .box{padding:14px; border-radius:12px}
  .prodotto img{width:76px}
}