/* HEYPOKE — stile comune.
   Token: mare #378ADD (Viareggio) · corallo #F0997B (Pietrasanta) ·
   inchiostro #17303F · carta #FDFBF7 · sabbia #F4ECDF.
   Font: Bricolage Grotesque (display) · Instrument Sans (testo) ·
   IBM Plex Mono (codici ordine e prezzi, stile scontrino). */

:root {
  --carta: #FDFBF7;
  --inchiostro: #17303F;
  --inchiostro-60: rgba(23, 48, 63, .6);
  --inchiostro-35: rgba(23, 48, 63, .35);
  --inchiostro-12: rgba(23, 48, 63, .12);
  --mare: #378ADD;
  --mare-scuro: #2568AC;
  --corallo: #F0997B;
  --corallo-scuro: #C86F50;
  --sabbia: #F4ECDF;
  --ok: #2E7D5B;
  --attenzione: #C23B3B;
  --sede: var(--mare);          /* sovrascritto via [data-sede] */
  --sede-scuro: var(--mare-scuro);
  --f-display: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif;
  --f-testo: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Menlo", monospace;
}
[data-sede="pietrasanta"] { --sede: var(--corallo); --sede-scuro: var(--corallo-scuro); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-testo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.contenitore { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
.testata {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.marchio {
  font-family: var(--f-display); font-weight: 800; font-size: 24px;
  letter-spacing: -.02em; text-decoration: none; line-height: 1;
}
.marchio .hey { color: var(--inchiostro); }
.marchio .poke { color: var(--mare); }
.testata nav { display: flex; gap: 8px; }
.testata nav a {
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.testata nav a.pieno { background: var(--inchiostro); color: var(--carta); }
.testata nav a:not(.pieno):hover { background: var(--sabbia); }

/* ---- onda divisoria (firma) ---- */
.onda { display: block; width: 100%; height: 18px; }

/* ---- bottoni ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border: 0; border-radius: 14px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  background: var(--inchiostro); color: var(--carta);
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.sede { background: var(--sede); }
.btn.sede:hover { background: var(--sede-scuro); }
.btn.fantasma { background: transparent; color: var(--inchiostro); border: 2px solid var(--inchiostro-12); }
.btn.fantasma:hover { border-color: var(--inchiostro-35); transform: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.blocco { width: 100%; }

/* ---- chip di scelta (configuratore) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 46px; padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--inchiostro-12); background: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .1s, background .1s;
}
.chip:hover { border-color: var(--inchiostro-35); }
.chip[aria-pressed="true"] {
  border-color: var(--sede); background: var(--sede); color: #fff;
}
.chip[disabled] {
  opacity: .4; cursor: not-allowed; text-decoration: line-through;
}
.chip .allerg { font-size: 11px; font-weight: 500; opacity: .65; }
.chip .sovra { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; }

/* ---- sezioni configuratore ---- */
.passo { padding: 22px 0 6px; }
.passo h3 {
  font-family: var(--f-display); font-size: 19px; font-weight: 700;
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.passo h3 .conta {
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
  color: var(--inchiostro-60);
}
.passo h3 .conta.pieno { color: var(--ok); font-weight: 700; }

/* ---- card ---- */
.card {
  background: #fff; border: 1px solid var(--inchiostro-12);
  border-radius: 18px; padding: 20px;
}

/* ---- form ---- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 2px solid var(--inchiostro-12); border-radius: 12px;
  font: inherit; background: #fff; color: var(--inchiostro);
}
.campo textarea { min-height: 72px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--sede);
}
.campo .errore-campo { color: var(--attenzione); font-size: 13px; margin-top: 4px; display: none; }
.campo.con-errore input, .campo.con-errore select { border-color: var(--attenzione); }
.campo.con-errore .errore-campo { display: block; }

/* honeypot: fuori schermo, mai display:none (i bot lo saltano) */
.hp-web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- badge stato ordine ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.badge.ricevuto { background: var(--sabbia); color: var(--inchiostro); }
.badge.in_preparazione { background: #FFE9B8; color: #7A5C10; }
.badge.pronto { background: #D9F0E4; color: var(--ok); }
.badge.ritirato { background: var(--inchiostro-12); color: var(--inchiostro-60); }
.badge.annullato { background: #F7DADA; color: var(--attenzione); }

/* ---- codice ordine (scontrino) ---- */
.codice-ordine {
  font-family: var(--f-mono); font-weight: 700; letter-spacing: .06em;
}

/* ---- barra carrello fissa ---- */
.barra-carrello {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--inchiostro); color: var(--carta);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: none;
}
.barra-carrello.visibile { display: block; }
.barra-carrello .dentro {
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.barra-carrello .tot { font-family: var(--f-mono); font-size: 18px; font-weight: 700; }
.barra-carrello .btn { background: var(--sede); }

/* ---- footer ---- */
.fondo {
  margin-top: 56px; padding: 32px 0 44px;
  background: var(--inchiostro); color: rgba(253, 251, 247, .85);
  font-size: 14px;
}
.fondo a { color: inherit; }
.fondo .contenitore { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }

/* ---- utilità ---- */
.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inchiostro-60);
}
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nascosto { display: none !important; }