/* ==========================================================================
   QBA @ Terra Madre 2026 — stile del menu pubblico.

   Palette campionata pixel per pixel da docs/reference/Blocco_A4_orizzontale_2025_CHEESE.pdf
   (non dai valori indicativi del brief: il teal reale è più saturo, e sul
   cartaceo i nomi delle birre sono neri, non rossi — il rosso-bordeaux è
   riservato ai badge tipo "Analcolica!").

   Il foglio è autosufficiente: se la CDN di Tailwind non risponde — in fiera
   succede — la pagina resta completamente leggibile e usabile.
   ========================================================================== */

:root {
  --blue:       #35609C;
  --blue-dark:  #2A4C7D;
  --blue-tint:  #E9EEF7;
  --gold:      #F0A828;
  --wine:      #882038;
  --ink:        #1A1919;
  --ink-soft:   #5A5A5A;
  --cream:      #E1D8C7;
  --line:       #E3E1DC;
  --white:      #FFFFFF;

  --shell:      720px;
  --radius:     14px;
  --tap:        44px;   /* target minimo comodo da usare in piedi, con una mano */

  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Qualsiasi regola d'autore con un `display` batte il [hidden] del browser:
   basta un `.cart-btn { display: block }` perché un elemento nascosto dal
   JavaScript resti visibile. Questa riga chiude la questione una volta sola,
   invece di doversene ricordare classe per classe. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--white);
  padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ───────────────────────────────── testata ─────────────────────────────── */

.hero {
  position: relative;
  background: var(--blue);
  padding: 1.5rem 1rem 3.5rem;
  overflow: hidden;
}

/* I coriandoli del cartaceo, resi con gradienti radiali invece che con
   immagini: zero richieste di rete in più.

   Ogni pallino ha un background-size esplicito: senza, il gradiente occupa
   tutto il box e background-position non ha margine su cui spostarsi, quindi
   le percentuali collassano a zero e i pallini finiscono tutti addosso al
   titolo. Stanno solo nell'angolo in alto a destra, l'unica zona libera
   dal lockup QBA e dalla headline. */
.hero-dots {
  position: absolute; inset: 0;
  opacity: .65;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at center, var(--gold) 0 7px,  transparent 8px),
    radial-gradient(circle at center, var(--white) 0 4px,  transparent 5px),
    radial-gradient(circle at center, var(--wine) 0 10px, transparent 11px);
  background-size: 20px 20px, 12px 12px, 26px 26px;
  background-position:
    right 14px  top 14px,
    right 64px  top 48px,
    right 4px   top 96px;
}

.hero-inner { position: relative; max-width: var(--shell); margin: 0 auto; }

.hero-brand { margin: 0 0 1rem; line-height: 0; }
/* Il file sorgente è 137x72: lo mostro vicino alla dimensione nativa, così
   resta nitido. Ingrandirlo lo farebbe solo sfocare. */
.hero-brand img { width: 132px; height: auto; display: block; }

/* Lockup "Quality Beer Academy" con i colori campionati dal blocchetto:
   QUALITY nero, BEER ambra, ACADEMY bordeaux. Usato sia in testata sia
   dentro il testo del consenso newsletter. */
.qba-mark { font-weight: 800; white-space: nowrap; }
.qba-mark .w1 { color: var(--ink); }
.qba-mark .w2 { color: var(--gold); }
.qba-mark .w3 { color: var(--wine); }

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 9.5vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  /* Sul blocchetto 2026 la headline e' chiara sul blu, non nera come l'anno
     scorso sul teal: il nero qui darebbe 2,76:1, sotto ogni soglia leggibile. */
  color: var(--cream);
}
.hero-title-hi { color: var(--gold); }

.hero-sub {
  margin: .7rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: #FFFFFF;   /* 6,35:1 sul blu; il crema si fermava a 4,49 */
}

.hero-dunes {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; height: 66px;
  display: block;
}

/* ─────────────────────────────── tab bar ───────────────────────────────── */

.tabs {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* La barra è a tutta pagina (il fondo bianco e il bordo devono arrivare ai
   lati), ma le tab dentro seguono la stessa colonna del contenuto: senza
   questo, su desktop finivano agli estremi dello schermo mentre il menu
   restava incolonnato al centro. */
.tabs-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  gap: .2rem;
  padding: .45rem .5rem;
}

.tab {
  flex: 1;
  min-width: 0;          /* tre tab devono poter restringersi su schermi piccoli */
  min-height: var(--tap);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 0 .35rem;
  white-space: nowrap;   /* con tre tab "Le mie birre" andrebbe a capo */
}
.tab.is-active { background: var(--ink); color: var(--white); }

.tab-count {
  min-width: 1.35em;
  padding: 0 .3em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 800;
}

/* Sotto i 380px il testo delle tre tab non ci sta a peso pieno. */
@media (max-width: 380px) {
  .tab { font-size: .84rem; padding: 0 .2rem; }
  .tab-count { font-size: .68rem; min-width: 1.2em; }
}

/* ──────────────────────────────── layout ───────────────────────────────── */

main { max-width: var(--shell); margin: 0 auto; padding: 1rem 1rem 3rem; }


.empty, .mine-empty {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-soft);
}

/* ───────────────────────────── banner medaglie ─────────────────────────── */

.medal-banner {
  display: block;
  width: 100%;
  margin: .25rem 0 .9rem;
  padding: .8rem .95rem;
  border: 0;
  border-left: 6px solid var(--gold);
  border-radius: var(--radius);
  background: #FBF3E2;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap);
}
.medal-banner.is-complete { background: #F7E8CC; border-left-color: var(--wine); }

.medal-banner-top { display: flex; align-items: center; gap: .5rem; }
.medal-banner-icon { font-size: 1.25rem; line-height: 1; }
.medal-banner-count { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.medal-banner-count b { font-size: 1.25rem; }
.medal-banner-go { margin-left: auto; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); }
.medal-banner-msg { display: block; margin-top: .15rem; font-size: .85rem; color: var(--ink-soft); }

.tab-count--gold { background: var(--wine); color: var(--white); }

/* ────────────────────────────── medaglie ───────────────────────────────── */

.medals { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.medal {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.medal.is-unlocked { border-color: var(--gold); background: #FDFAF3; }

.medal-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #EFEDE8;
  font-size: 1.4rem;
  filter: grayscale(1);
}
.medal.is-unlocked .medal-icon { background: var(--gold); filter: none; }

.medal-body { min-width: 0; flex: 1; }
.medal-name { display: block; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.medal.is-unlocked .medal-name { color: var(--ink); }
.medal:not(.is-unlocked) .medal-name { color: var(--ink-soft); }
.medal-desc { display: block; margin-top: .1rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.35; }

.medal-progress {
  display: block;
  height: 6px;
  margin-top: .5rem;
  border-radius: 999px;
  background: #EDEBE6;
  overflow: hidden;
}
.medal-progress span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.medal-progress-text { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.medal-when { display: block; margin-top: .3rem; font-size: .75rem; font-weight: 700; color: var(--blue-dark); }

/* ────────────────────────── contatore gamificato ───────────────────────── */

.progress {
  margin: .25rem 0 1.5rem;
  padding: .9rem 1rem;
  background: var(--blue-tint);
  border-radius: var(--radius);
}
.progress-line { margin: 0 0 .5rem; font-size: .95rem; }
.progress-line b { font-family: var(--font-display); font-size: 1.15rem; }
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(31,173,153,.22);
  overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transition: width .35s ease;
}
.progress-msg {
  margin: .6rem 0 0;
  font-weight: 700;
  font-size: .9rem;
  color: var(--wine);
}

/* ───────────────────────── intestazione categoria ──────────────────────── */

.cat { margin: 0 0 2rem; }

/* Il "pennarello" arancione del cartaceo: una barra arrotondata dietro
   la parte bassa del titolo. */
.cat-title {
  margin: 0 0 .9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-title span {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% .38em;
  background-position: 0 88%;
  padding: 0 .12em .06em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ───────────────────────────── card birra ──────────────────────────────── */

.beer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.beer {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.beer.is-checked { border-color: var(--blue); background: var(--blue-tint); }

.beer-hit {
  width: 100%;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .8rem .85rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap);
}
.beer-hit:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: -3px; }

.tick {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 1px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--white);
  color: transparent;
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tick svg { width: 17px; height: 17px; }
.beer.is-checked .tick { background: var(--blue); border-color: var(--blue); color: var(--white); }

.beer-body { display: block; min-width: 0; }

.beer-name {
  display: block;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
/* La bandiera non deve essere maiuscolizzata né stirata dal text-transform
   del nome: sta su una riga di testo normale, con un filo d'aria a destra. */
.flag {
  display: inline-block;
  margin-right: .38em;
  font-size: 1.02em;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: baseline;
}

.beer-producer {
  display: block;
  font-weight: 700;
  font-size: .86rem;
  color: var(--ink);
}
.beer-meta {
  display: block;
  font-weight: 700;
  font-size: .86rem;
  color: var(--ink);
}
.beer-notes {
  display: block;
  margin-top: .15rem;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.badge {
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
/* Tre toni distinti: vino per l'analcolica (come sul cartaceo), blu per il
   senza glutine, oro con testo scuro per la maturazione in botte. */
.badge--wine { background: var(--wine); }
.badge--blue { background: var(--blue-dark); }
.badge--gold { background: var(--gold); color: var(--ink); }

/* ──────────────────────────── riga dei rating ──────────────────────────── */

.rating {
  padding: 0 .85rem .8rem;
  border-top: 1px dashed rgba(31,173,153,.45);
  margin-top: -.15rem;
  padding-top: .7rem;
  animation: slide-in .18s ease;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.rating-q {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rating-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }

.rate {
  min-height: var(--tap);
  padding: .35rem .1rem .3rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}
.rate:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 1px; }
.rate-emoji { font-size: 1.45rem; line-height: 1.1; filter: grayscale(.55); transition: filter .15s, transform .15s; }
.rate-label {
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--ink-soft);
  hyphens: auto;
}
.rate[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 2px 0 var(--blue);
}
.rate[aria-pressed="true"] .rate-emoji { filter: none; transform: scale(1.12); }
.rate[aria-pressed="true"] .rate-label { color: var(--ink); }

/* ───────────────────────────── bottoni shop ────────────────────────────── */

/* Sempre <a href>: una fetch cross-origin verso Shopify verrebbe bloccata
   dal CORS, una navigazione normale no. */
.cart-btn {
  display: block;
  margin: 0 .85rem .85rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--wine);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  text-align: center;
  text-decoration: none;
  min-height: var(--tap);
}
.cart-btn:active { background: #6E1A2D; }

.cart-btn--bulk {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  padding: .95rem 1rem;
}

/* Azione secondaria: stessa forma, peso visivo minore. */
.cart-btn--all {
  margin: 0 0 .75rem;
  background: transparent;
  color: var(--wine);
  border: 2px solid var(--wine);
  padding: .8rem 1rem;
}
.cart-btn--all:active { background: rgba(222,108,48,.12); }

/* Nessuna birra selezionata: il link perde href, qui perde anche l'aspetto
   di qualcosa su cui si può cliccare. */
.cart-btn.is-disabled {
  background: #EDEBE6;
  color: var(--ink-soft);
  cursor: default;
  pointer-events: none;
}

/* ─────────────────────────── vista "Le mie birre" ──────────────────────── */

.mine-head { margin: .25rem 0 1.1rem; }
.mine-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.mine-hint { margin: .3rem 0 0; font-size: .92rem; color: var(--ink-soft); }

.mine-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }

.mine-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem .9rem;
  border: 1.5px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
}
.mine-item.is-gone { border-left-color: var(--ink-soft); background: #FAFAF8; }

.mine-emoji { font-size: 1.6rem; line-height: 1.1; flex: 0 0 auto; }
.mine-emoji.is-empty { opacity: .3; }

.mine-body { min-width: 0; flex: 1; }
/* Font grande: questa schermata si mostra allo staff dall'altra parte del banco. */
.mine-name {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.mine-meta { display: block; font-size: .88rem; color: var(--ink-soft); }
.mine-rating { display: block; margin-top: .1rem; font-size: .82rem; font-weight: 700; color: var(--blue-dark); }

.mine-gone {
  display: inline-block;
  margin-top: .35rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: var(--ink-soft);
  color: var(--white);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Checkbox di SELEZIONE per il carrello: volutamente diversa dalla spunta
   di gradimento del menu (quadrata e teal), per non confondere le due cose. */
.mine-pick { display: inline-flex; align-items: center; align-self: center; cursor: pointer; flex: 0 0 auto; }
.mine-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.mine-pick-box {
  width: 24px; height: 24px;
  border: 2px solid var(--wine);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: background .15s ease;
}
.mine-pick-box::after {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 6px; height: 11px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.mine-pick input:checked + .mine-pick-box { background: var(--wine); }
.mine-pick input:checked + .mine-pick-box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.mine-pick input:focus-visible + .mine-pick-box { outline: 3px solid var(--blue-dark); outline-offset: 2px; }

/* Spuntata ma non in vendita online: resta nel ricordo, senza azioni. */
.mine-na {
  align-self: center; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700;
  color: var(--ink-soft); text-align: right; max-width: 6.5em; line-height: 1.2;
}

.mine-cart {
  align-self: center;
  flex: 0 0 auto;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: var(--wine);
  color: var(--white);
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
}

.mine-actions { margin-top: 1.25rem; }
.mine-note { margin: 0 0 1rem; font-size: .82rem; color: var(--ink-soft); }

.reset-btn {
  width: 100%;
  min-height: var(--tap);
  padding: .65rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.linkish {
  border: 0; background: none; padding: 0;
  color: var(--blue-dark); font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* ────────────────────── card condivisibile ─────────────────────────────── */

.share-btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 .6rem;
  padding: .85rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.share-btn--alt { background: var(--white); color: var(--ink); border: 2px solid var(--ink); }
.share-btn--medals { margin-top: 1.25rem; }

/* Pannello a tutta pagina: su un telefono in fiera un modale piccolo si
   perde, e l'immagine è verticale. */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10,10,10,.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.sheet-panel {
  width: 100%;
  max-width: 480px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom));
  animation: sheet-up .22s ease;
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }

.sheet-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.sheet-title {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: -.01em;
}
.sheet-close {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: #EFEDE8; color: var(--ink);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}

.sheet-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  background: #F7F6F3;
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: .8rem;
}
.sheet-preview img {
  max-width: 100%;
  max-height: 58vh;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.sheet-loading { margin: 2rem 0; color: var(--ink-soft); font-size: .9rem; }
.sheet-note { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-soft); text-align: center; }

/* ────────────────────── ricordo PDF via email ──────────────────────────── */

.recap {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1rem 1.2rem;
  background: var(--cream);
  border-radius: var(--radius);
}
.recap-title {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.recap-lead { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-soft); }

.recap-open, .recap-send {
  width: 100%;
  min-height: var(--tap);
  padding: .8rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--blue-dark);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.recap-open:disabled {
  background: #E0DED8;
  color: var(--ink-soft);
  cursor: default;
}
.recap-blocked { margin: .55rem 0 0; font-size: .82rem; color: var(--ink-soft); text-align: center; }

.recap-form { margin-top: .9rem; }
.recap-form label[for] {
  display: block;
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.recap-form input[type="email"] {
  width: 100%;
  min-height: var(--tap);
  padding: .65rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 1rem;   /* < 16px farebbe zoomare iOS al focus */
}
.recap-form input[type="email"]:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.recap-consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .8rem 0 .9rem;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  cursor: pointer;
}
.recap-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .05rem; accent-color: var(--blue-dark); }

.recap-msg { margin: .7rem 0 0; font-size: .86rem; font-weight: 600; }
.recap-msg.is-ok    { color: var(--blue-dark); }
.recap-msg.is-error { color: var(--wine); }

/* ───────────────────────────────── footer ──────────────────────────────── */

.foot {
  margin-top: 2rem;
  padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--cream);
  text-align: center;
}
.foot-inner { max-width: var(--shell); margin: 0 auto; }
.foot p { margin: 0 0 .45rem; font-size: .8rem; color: var(--ink-soft); }
.foot-privacy { max-width: 34em; margin-inline: auto; }
.foot-brand a { color: var(--blue-dark); font-weight: 700; }
.foot-legal { font-weight: 700; letter-spacing: .04em; }

/* ───────────────────────────────── toast ──────────────────────────────── */

.toast {
  position: fixed;
  left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100% - 2rem);
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ──────────────────────────── schermi più larghi ───────────────────────── */

@media (min-width: 620px) {
  .beer-list { grid-template-columns: 1fr 1fr; }
  .medals    { grid-template-columns: 1fr 1fr; }
  .rate-label { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}