/*
 * Stili aggiuntivi per carrello, checkout e prodotti acquistabili.
 * Foglio separato per non toccare il CSS inline esistente in index.html.
 * Riusa le variabili colore già definite in :root nel file principale.
 */

/* === Sezione "La storia dell'Abbazia" (Claudio), fra hero e shop ===
   La foto "galleggia" a destra del testo (float): finché il testo è più
   corto della foto le due cose stanno affiancate; quando il testo supera
   l'altezza della foto, le righe successive tornano a piena larghezza
   invece di lasciare uno spazio vuoto sotto la foto (soluzione classica
   al posto dello sticky, che con testi molto lunghi lascia un vuoto). */
.claudio-section { background: var(--paper, #fffdf8); }
.claudio-text-wrap { max-width: 900px; margin: 0 auto; }
.claudio-text-wrap::after { content: ""; display: table; clear: both; }
.claudio-photo-wrap {
  float: right;
  width: min(520px, 46vw);
  margin: 4px 0 28px 48px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(10,9,8,0.18));
  aspect-ratio: 4 / 4.6;
}
.claudio-photo-wrap img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%; /* inquadratura sul busto, gambe/mani tagliate */
}
.claudio-photo-caption {
  margin: 10px 0 0; font-size: 13px; color: var(--gray-500, #57514a); text-align: center;
}
@media (max-width: 640px) {
  .claudio-photo-wrap { float: none; width: 100%; max-width: 420px; margin: 0 auto 24px; }
}

/* Ingresso "nella scena" per la foto di Claudio: cade dall'alto e si
   ingrandisce leggermente fino alla dimensione naturale, invece del
   semplice reveal dal basso usato per il resto del sito. */
.claudio-photo-wrap[data-reveal]:not(.visible) { transform: translateY(-70px) scale(0.82); }
.claudio-photo-wrap[data-reveal].visible { transform: translateY(0) scale(1); }

/* === Capitoli della storia (dopo il blocco intro con la foto di Claudio) ===
   Racconto lungo diviso in "capitoli" numerati con titolo grande, per dare
   respiro editoriale invece di un unico blocco di testo. Ogni capitolo usa
   il reveal generico [data-reveal] già presente nel resto del sito: nessuna
   nuova logica JS, solo markup e stile. */
.claudio-chapters {
  max-width: 900px;
  margin: 64px auto 0;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.claudio-chapter-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--amber);
  margin-bottom: 14px;
}
.claudio-chapter h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 18px;
}
.claudio-chapter h3 em { font-style: normal; color: var(--amber); font-weight: 300; }
.claudio-chapter p {
  font-size: 17px; line-height: 1.8; color: var(--gray-500); margin-bottom: 16px;
}
.claudio-chapter p:last-child { margin-bottom: 0; }
.claudio-beerlist {
  font-size: 17px; line-height: 1.8; color: var(--black); font-weight: 600;
  margin: 4px 0 16px;
}
/* Frase estratta e messa in risalto dentro un capitolo, per dare un punto
   di respiro visivo al centro di paragrafi lunghi. */
.claudio-highlight {
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: var(--black);
  border-left: 3px solid var(--amber);
  padding-left: 20px;
  margin: 24px 0;
}
.claudio-closing {
  text-align: center;
  max-width: 720px;
  margin: 4px auto 0;
}
.claudio-closing p {
  font-size: clamp(19px, 2.4vw, 25px);
  font-style: italic;
  font-weight: 600;
  color: var(--black);
  line-height: 1.55;
}
.claudio-closing p em { font-style: normal; color: var(--amber); }
@media (max-width: 640px) {
  .claudio-chapters { gap: 44px; margin-top: 48px; padding-top: 40px; }
  .claudio-highlight { font-size: 18px; padding-left: 16px; }
}

/* === Skip link: visibile solo quando riceve il focus da tastiera === */
.skip-link:focus {
  left: 12px !important;
  top: 12px !important;
}

/* === Rispetto di prefers-reduced-motion, applicato globalmente === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Badge quantità sull'icona carrello === */
/* Riusa lo stile .badge già esistente in index.html; qui solo la regola
   di occultamento quando il carrello è vuoto (l'attributo hidden da solo
   non basta perché .nav-icon-btn .badge imposta display:flex). */
.nav-icon-btn .badge[hidden] { display: none; }

/* === Overlay condiviso (carrello + checkout) === */
.cart-overlay, .checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 900;
}
.cart-overlay.open, .checkout-overlay.open { opacity: 1; pointer-events: auto; }

body.cart-open-lock { overflow: hidden; }

/* === Pannello laterale carrello === */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--paper, #fffdf8);
  box-shadow: var(--shadow-lg, -24px 0 60px rgba(10,9,8,0.16));
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 950;
  display: flex;
  flex-direction: column;
}
.cart-panel.open { transform: translateX(0); }

.cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line, rgba(10,9,8,0.08));
}
.cart-panel-header h2 { margin: 0; font-size: 20px; }
.cart-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--gray-500, #57514a);
  padding: 6px;
  border-radius: 999px;
}
.cart-panel-close:hover, .cart-panel-close:focus-visible { background: var(--gray-100, #ebe5d6); color: var(--black, #0a0908); }

.cart-panel-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { color: var(--gray-500, #57514a); text-align: center; padding: 48px 0; }
.cart-empty-hint { font-size: 13px; margin-top: 8px; }

.cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main sub" "controls controls";
  gap: 6px 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, rgba(10,9,8,0.08));
}
.cart-item-main { grid-area: main; }
.cart-item-name { margin: 0; font-weight: 600; }
.cart-item-meta { margin: 2px 0 0; font-size: 13px; color: var(--gray-500, #57514a); }
.cart-item-deposit { margin: 2px 0 0; font-size: 12px; color: var(--amber-deep, #a07728); }
.cart-item-subtotal { grid-area: sub; font-weight: 700; white-space: nowrap; }
.cart-item-controls { grid-area: controls; display: flex; align-items: center; gap: 10px; }
.cart-qty-label { font-size: 12px; color: var(--gray-500, #57514a); }
.cart-qty-input {
  width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 8px;
  font: inherit;
}
.cart-qty-input:focus-visible, .cart-item-remove:focus-visible { outline: 2px solid var(--amber, #c8923a); outline-offset: 2px; }
.cart-item-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--coral, #c5384e);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  font-size: 16px;
}
.cart-item-remove:hover { background: rgba(197, 56, 78, 0.1); }

.cart-panel-footer { border-top: 1px solid var(--line, rgba(10,9,8,0.08)); padding: 16px 24px 24px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.cart-summary-total { font-size: 17px; font-weight: 700; padding-top: 10px; border-top: 1px dashed var(--line-strong, rgba(10,9,8,0.16)); margin-top: 6px; }
.cart-summary-note { font-size: 12px; color: var(--coral-soft, #e94560); margin: 8px 0 0; }

.cart-footer-actions { display: flex; gap: 10px; margin-top: 14px; }
.cart-clear-btn, .cart-checkout-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), background 0.18s ease;
}
.cart-clear-btn { background: transparent; border: 1px solid var(--line-strong, rgba(10,9,8,0.16)); color: var(--gray-600, #44403c); }
.cart-clear-btn:hover { border-color: var(--coral, #c5384e); color: var(--coral, #c5384e); }
.cart-checkout-btn { background: var(--amber, #c8923a); color: var(--black, #0a0908); }
.cart-checkout-btn:hover { background: var(--amber-light, #e6b665); transform: translateY(-1px); }
.cart-checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* === Pulsanti "Aggiungi al carrello" sulle card cassa === */
.cassa-card { position: relative; }
.cassa-add-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cassa-add-qty {
  width: 54px;
  padding: 8px;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 8px;
  font: inherit;
}
.cassa-add-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: var(--black, #0a0908);
  color: var(--cream, #faf6ee);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1);
}
.cassa-add-btn:hover { background: var(--amber-deep, #a07728); transform: translateY(-1px); }
.cassa-add-btn:disabled { background: var(--gray-300, #a8a08e); cursor: not-allowed; transform: none; }
.cassa-price-unit { font-size: 12px; color: var(--gray-500, #57514a); margin: -8px 0 12px; }

/* Fase 6: colore scurito rispetto a --amber per contrasto WCAG AA (4.5:1) su sfondo chiaro; --amber resta invariata per gli altri usi (sfondi/bordi/badge) */
.history-link-full { color: #90692a; font-weight: 700; text-decoration: none; }
.history-link-full:hover { text-decoration: underline; }

/* Filtro gradazione nel catalogo (Fase 4): stesso trattamento visivo
   della casella di ricerca accanto a cui compare. */
.catalog-abv-select-wrap { flex: 0 0 auto; }
.catalog-abv-select {
  padding: 14px 40px 14px 16px;
  background: var(--cream, #faf6ee); border: 1px solid var(--line, rgba(10,9,8,0.08));
  border-radius: 8px; font-family: inherit; font-size: 14px;
  color: var(--black, #0a0908); cursor: pointer; transition: all 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2357514a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.catalog-abv-select:focus { outline: none; border-color: var(--amber, #c8923a); background-color: var(--paper, #fffdf8); }
@media (max-width: 640px) { .catalog-abv-select-wrap, .catalog-abv-select { width: 100%; } }

/* Riga risultati catalogo + pulsante "Cancella filtri" (Fase 7): il
   conteggio risultati esisteva già (main.css .catalog-result-count), qui
   aggiungiamo solo il layout della riga e il pulsante, mostrato solo
   quando c'è un filtro/ricerca attivi (vedi renderCatalog() in index.html). */
.catalog-result-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 24px;
}
.catalog-result-row .catalog-result-count { margin-bottom: 0; }
.catalog-clear-btn {
  font-size: 13px; font-weight: 600; color: var(--amber, #c8923a);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  text-decoration: underline; white-space: nowrap;
}
.catalog-clear-btn:hover { color: var(--black, #0a0908); }

.cassa-qty-group { display: flex; flex-direction: column; gap: 4px; }
.cassa-qty-caption {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400, #78706a);
  font-weight: 600;
}

.cassa-add-btn:focus-visible, .cassa-add-qty:focus-visible { outline: 2px solid var(--amber, #c8923a); outline-offset: 2px; }

/* === Badge Novità / Vuoto a rendere === */
.badge-novita, .badge-vuoto-rendere, .badge-prezzo-aggiornamento {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge-novita { background: var(--coral, #c5384e); color: var(--cream, #faf6ee); }
.badge-vuoto-rendere { background: var(--amber, #c8923a); color: var(--black, #0a0908); }
.badge-prezzo-aggiornamento { background: var(--gray-100, #ebe5d6); color: var(--gray-600, #44403c); }

/* === Checkout modal === */
.checkout-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(640px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper, #fffdf8);
  border-radius: 16px;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(10,9,8,0.16));
  z-index: 960;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
  padding: 32px;
}
.checkout-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

.checkout-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  padding: 6px; border-radius: 999px;
  color: var(--gray-500, #57514a);
}
.checkout-close:hover, .checkout-close:focus-visible { background: var(--gray-100, #ebe5d6); }

.checkout-order-summary { background: var(--gray-100, #ebe5d6); border-radius: 12px; padding: 16px; margin: 16px 0 24px; }
.checkout-summary-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.checkout-summary-total { font-weight: 700; font-size: 16px; border-top: 1px dashed var(--line-strong, rgba(10,9,8,0.16)); margin-top: 6px; padding-top: 8px; }

.checkout-fieldset { border: none; padding: 0; margin: 0 0 20px; }
.checkout-fieldset legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-grid .full { grid-column: 1 / -1; }
.checkout-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.checkout-field label { font-size: 13px; font-weight: 600; }
.checkout-field input, .checkout-field textarea, .checkout-field select {
  padding: 10px 12px;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 8px;
  font: inherit;
}
.checkout-field input:focus-visible, .checkout-field textarea:focus-visible, .checkout-field select:focus-visible {
  outline: 2px solid var(--amber, #c8923a); outline-offset: 1px;
}
.checkout-field input[aria-invalid="true"], .checkout-field textarea[aria-invalid="true"] { border-color: var(--coral, #c5384e); }
.checkout-field-error { font-size: 12px; color: var(--coral, #c5384e); min-height: 16px; }

.checkout-checkbox-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.checkout-checkbox-row input { margin-top: 3px; }
.checkout-checkbox-row label { font-size: 13px; line-height: 1.5; }

/* === Selettore modalità di consegna (spedizione / ritiro in negozio) === */
.checkout-delivery-options { display: flex; flex-direction: column; gap: 10px; }
.checkout-delivery-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 12px;
  cursor: pointer;
}
.checkout-delivery-option:has(input:checked) { border-color: var(--amber, #c8923a); background: rgba(200,146,58,0.08); }
.checkout-delivery-option input { margin-top: 3px; }
.checkout-delivery-option-body { display: flex; flex-direction: column; gap: 2px; }
.checkout-delivery-option-title { font-size: 14px; font-weight: 700; }
.checkout-delivery-option-hint { font-size: 12px; color: var(--gray-500, #57514a); }

.checkout-pickup-block {
  background: var(--black, #0a0908);
  color: var(--cream, #faf6ee);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 20px;
  font-size: 14px;
}
.checkout-pickup-block strong { color: var(--amber-light, #e6b665); }

/* === Selettore metodo di pagamento (bonifico / PayPal) === */
.checkout-payment-options { display: flex; gap: 16px; flex-wrap: wrap; }
.checkout-payment-option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.checkout-payment-option:has(input:checked) { border-color: var(--amber, #c8923a); background: rgba(200,146,58,0.08); }
.checkout-paypal-block { margin-bottom: 20px; }
#paypal-button-container { min-height: 45px; }

.checkout-iban-box {
  background: var(--black, #0a0908);
  color: var(--cream, #faf6ee);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0 20px;
  font-size: 14px;
}
.checkout-iban-box strong { color: var(--amber-light, #e6b665); }
.checkout-iban-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.checkout-iban-copy-btn {
  background: var(--amber, #c8923a); color: var(--black, #0a0908);
  border: none; border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.checkout-iban-copy-btn:hover { background: var(--amber-light, #e6b665); }
.checkout-iban-copied { font-size: 12px; color: var(--amber-light, #e6b665); }

.checkout-submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--amber, #c8923a);
  color: var(--black, #0a0908);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1);
}
.checkout-submit-btn:hover { background: var(--amber-light, #e6b665); transform: translateY(-1px); }
.checkout-submit-btn:disabled { background: var(--gray-300, #a8a08e); cursor: not-allowed; transform: none; }
.checkout-feedback { margin-top: 12px; font-size: 14px; min-height: 20px; }
.checkout-feedback.err { color: var(--coral, #c5384e); }
.checkout-feedback.ok { color: #2f7a3d; }

.checkout-confirm-view { text-align: center; padding: 12px 0; }
.checkout-confirm-icon { font-size: 40px; color: var(--amber, #c8923a); }
.checkout-confirm-title { font-size: 22px; margin: 12px 0 6px; }
.checkout-confirm-status {
  display: inline-block;
  background: var(--gray-100, #ebe5d6);
  color: var(--gray-600, #44403c);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}
.checkout-confirm-iban { text-align: left; }
.checkout-new-order-btn {
  margin-top: 20px;
  background: none;
  border: 1px solid var(--line-strong, rgba(10,9,8,0.16));
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
}

/* === Card fx: pressione touch + focus visibile, in aggiunta al reveal esistente === */
.cat-card, .pairing-card, .svc-card, .b2b-card, .store-card, .signature-card, .cassa-card {
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.32s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) {
  .cat-card:hover, .pairing-card:hover, .svc-card:hover, .b2b-card:hover, .store-card:hover, .cassa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(10,9,8,0.1));
  }
}
.cat-card:active, .pairing-card:active, .svc-card:active, .b2b-card:active, .store-card:active, .cassa-card:active {
  transform: scale(0.98);
}
.cat-card:focus-visible, .pairing-card:focus-visible, .svc-card:focus-visible, .b2b-card:focus-visible, .store-card:focus-visible, .cassa-card:focus-visible {
  outline: 2px solid var(--amber, #c8923a);
  outline-offset: 3px;
}

/* Reveal con ritardo progressivo per card in griglia (fino a 6 elementi per riga) */
.beer-grid [data-reveal]:nth-child(6n+1), .casse-grid [data-reveal]:nth-child(6n+1), .cat-grid [data-reveal]:nth-child(6n+1) { transition-delay: 0ms; }
.casse-grid > *:nth-child(1) { transition-delay: 0ms; }
.casse-grid > *:nth-child(2) { transition-delay: 60ms; }
.casse-grid > *:nth-child(3) { transition-delay: 120ms; }
.casse-grid > *:nth-child(4) { transition-delay: 180ms; }
.casse-grid > *:nth-child(5) { transition-delay: 240ms; }
.casse-grid > *:nth-child(6) { transition-delay: 300ms; }
.casse-grid > *:nth-child(7) { transition-delay: 360ms; }
.casse-grid > *:nth-child(8) { transition-delay: 420ms; }

/* === Sezione teaser "Novità Birre Italiane" in homepage === */
.novita-italiane {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--paper, #fffdf8) 0%, var(--gray-100, #ebe5d6) 100%);
}
/* Fase 6: .section-header h2 em è pensata anche per sfondi scuri (color:
   var(--amber)); qui lo sfondo è chiaro, quindi serve una versione più
   scura per il contrasto WCAG AA. */
.novita-italiane .section-header h2 em { color: #90692a; }
.novita-italiane-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.novita-card {
  background: var(--paper, #fffdf8);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(10,9,8,0.06));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.novita-card-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.novita-card h3 { margin: 4px 0 0; font-size: 20px; }
.novita-card p { margin: 0; font-size: 14px; color: var(--gray-500, #57514a); }
.novita-cta-row { text-align: center; margin-top: 40px; }

@media (max-width: 860px) {
  .novita-italiane-grid { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .cart-panel { width: 100vw; }
}

/* === Parallax leggero fra sezioni === */
.section-divider-parallax {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--black, #0a0908);
}
.section-divider-parallax .sdp-layer {
  position: absolute;
  inset: -20% 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  will-change: transform;
}
.section-divider-parallax .sdp-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.1) 0%, rgba(10,9,8,0.85) 100%);
}
/* Marquee: il testo scorre da destra a sinistra in loop continuo.
   Due copie identiche affiancate nella track, che trasla di -50%:
   quando la prima copia esce, la seconda è già perfettamente allineata,
   il loop è invisibile. Il div esterno resta aria-hidden="true" (decorativo)
   quindi non serve gestione screen-reader per la copia duplicata. */
.section-divider-parallax .sdp-marquee {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.section-divider-parallax .sdp-marquee-track {
  display: flex;
  width: max-content;
  animation: sdp-marquee-scroll 22s linear infinite;
}
.section-divider-parallax .sdp-text {
  display: inline-block;
  white-space: nowrap;
  color: var(--cream, #faf6ee);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 3.4vw, 32px);
  letter-spacing: 0.02em;
  padding: 0 40px;
}
@keyframes sdp-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .section-divider-parallax { height: 140px; }
}

/* === Richiedi info su un'etichetta del catalogo generale (email + WhatsApp) ===
   Il catalogo generale resta solo informativo: queste icone aprono una
   richiesta di informazioni (email/WhatsApp), non un acquisto. */
.beer-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(10, 9, 8, 0.08));
}
.beer-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--cream, #faf6ee);
  border: 1px solid var(--line, rgba(10, 9, 8, 0.08));
  color: var(--gray-500, #57514a);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.beer-action-btn:hover {
  opacity: 1;
  border-color: var(--green, #4a7c59);
  color: var(--green, #4a7c59);
}
.beer-action-wa:hover { border-color: #25d366; color: #25d366; }

/* === Header della card catalogo (paese + grado alcolico) ===
   Il template le genera con queste classi (vedi renderCatalog() in
   index.html) ma non avevano ancora una regola CSS dedicata: restavano
   testo semplice, senza badge, con rischio di sovrapporsi al nome birra
   sotto su schermi stretti. */
.beer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.beer-flag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500, #57514a);
}
.beer-abv {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber-deep, #a07728);
  background: rgba(200, 146, 58, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Sicurezza su schermi stretti: nomi/birrifici lunghi non devono più
   tagliarsi o sovrapporre l'elemento successivo. */
.beer-name, .beer-brewery, .beer-style, .beer-notes {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* === Striscia partner nel footer, in loop come le scritte divisorie === */
.footer-partners {
  background: var(--black, #0a0908);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 22px 0;
}
.footer-partners-track {
  display: flex;
  width: max-content;
  animation: sdp-marquee-scroll 26s linear infinite;
}
.footer-partners-set {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.footer-partner-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber, #c8923a);
  white-space: nowrap;
}
/* Segnaposto in attesa dei loghi reali: box tratteggiato invece del testo
   pieno, per distinguerli visivamente dall'etichetta "I nostri partner". */
.footer-partner-slot {
  color: rgba(250, 246, 238, 0.5); /* Fase 6: da 0.4 a 0.5 per contrasto WCAG AA (4.5:1) su sfondo nero */
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px dashed rgba(250, 246, 238, 0.25);
  border-radius: 8px;
  padding: 8px 20px;
}

/* Le 154 card del catalogo sono ora pre-renderizzate in modo statico
   nell'HTML (per indicizzazione) e renderCatalog() le mostra/nasconde via
   l'attributo nativo [hidden] invece di ricrearle. .beer-card ha display:flex
   in main.css, che altrimenti vincerebbe sullo stile UA di [hidden]. */
.beer-card[hidden] { display: none; }

/* === Foto reali nel catalogo generale (gruppo pilota) ===
   Solo informative: nessun pulsante di acquisto qui, coerente con la regola
   del catalogo generale. Card senza foto restano nel layout attuale. */
.beer-card-media {
  aspect-ratio: 1 / 1;
  background: var(--cream, #faf6ee);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.beer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.beer-modal-real-photo {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* === Sezione "Birre Albanesi" (#b2b) — griglia prodotti informativa.
   Card volutamente distinte da .cassa-card: niente prezzo/stepper/CTA
   "Aggiungi al carrello", questi sono prodotti da importazione su
   richiesta, non articoli acquistabili dal carrello (vedi CLAUDE.md,
   regola 1-2: solo prodotti "cassa" acquistabili hanno bottone acquisto).
   Nome classi diverso da .cassa-card anche per non finire nel querySelector
   dello zoom-modal in cassa-zoom.js. */
.albania-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 700px) {
  .albania-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 460px) {
  .albania-grid { grid-template-columns: 1fr; }
}
.albania-card {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fffdf8);
  border: 1px solid var(--line, rgba(10, 9, 8, 0.08));
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.albania-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--amber); }
.albania-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream, #faf6ee);
  overflow: hidden;
}
.albania-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}
.albania-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.albania-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.albania-origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500, #57514a);
}
.albania-origin i { color: var(--amber-deep, #a07728); }
.albania-abv {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber-deep, #a07728);
  background: rgba(200, 146, 58, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.albania-style {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--amber-deep, #a07728);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  width: fit-content;
}
.albania-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--black, #0a0908);
  line-height: 1.2;
  margin: 0 0 4px;
}
.albania-brewery {
  font-size: 13px;
  color: var(--gray-500, #57514a);
  margin: 0 0 12px;
}
.albania-format {
  font-size: 11px;
  color: var(--gray-400, #78706a);
  letter-spacing: 0.04em;
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.5;
}
.albania-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray-600, #44403c);
  margin: auto 0 0;
  padding-top: 10px;
}
.albania-note {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 11px;
  color: var(--gray-400, #78706a);
  font-style: italic;
}
.albania-name, .albania-brewery, .albania-desc { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 480px) {
  .albania-name { font-size: 17px; }
  .albania-format, .albania-desc { font-size: 12px; }
}
.albania-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* === Fase 21: "Rifiuta" con pari evidenza di "Accetta" nel banner cookie ===
   Prima: "Accetta" era un pulsante pieno (ambra), "Rifiuta" un pulsante
   fantasma con solo un bordo sottile — un pattern che spinge visivamente
   verso l'accettazione, non conforme al requisito di pari evidenza.
   Ora entrambi sono pulsanti pieni, stesso peso visivo, colori diversi
   solo per distinguere l'azione (non per suggerirne una come "migliore"). */
.cookie-btn.reject {
  background: var(--cream, #faf6ee);
  color: var(--black, #0a0908);
  border: 1px solid rgba(250,246,238,0.3);
}
.cookie-btn.reject:hover { background: #fff; border-color: var(--cream, #faf6ee); }

/* === Fase 6: font-display per il webfont icone Tabler (CDN esterno) ===
   Il CSS caricato da jsDelivr non imposta font-display, quindi il default
   del browser può nascondere le icone durante il caricamento del font
   (comportamento tipo FOIT). Ridichiarata la stessa @font-face (nome e
   sorgenti identici al CSS originale, URL assoluti perché qui i percorsi
   relativi non risolverebbero verso il CDN) con font-display: swap, così le
   icone mostrano subito lo spazio riservato invece di restare invisibili. */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.46.0/dist/fonts/tabler-icons.woff2?v3.46.0") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.46.0/dist/fonts/tabler-icons.woff?") format("woff"),
       url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.46.0/dist/fonts/tabler-icons.ttf?v3.46.0") format("truetype");
}

/* ==========================================================================
   CRO giorno 1 (growth/cro-giorno1) — sezione additiva, non tocca le regole
   sopra. Contiene: striscia informativa sopra le casse.
   ========================================================================== */
.casse-info-strip {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.casse-info-strip li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper, #fffdf8);
  border: 1px solid var(--line, rgba(10, 9, 8, 0.08));
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-600, #44403c);
}
.casse-info-strip li > i { flex: none; font-size: 22px; line-height: 1.2; color: var(--amber-deep, #8e6923); }
.casse-info-strip strong { display: block; font-size: 14px; color: var(--black, #0a0908); }
@media (max-width: 860px) {
  .casse-info-strip { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
}

/* Carrello: l'azione principale (checkout) sta sopra a tutta larghezza, "Svuota
   carrello" diventa un'azione secondaria discreta (prima aveva lo stesso peso
   del pulsante principale, senza conferma, a un tocco di distanza). L'ordine
   nel DOM e' invertito da cart.js, cosi' l'ordine di tabulazione resta quello visivo. */
.cart-footer-actions { flex-direction: column; gap: 6px; }
.cart-footer-actions .cart-checkout-btn { flex: none; padding: 14px 16px; font-size: 15px; }
.cart-footer-actions .cart-clear-btn {
  flex: none;
  background: none;
  border: none;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  color: var(--gray-500, #57514a);
}
.cart-footer-actions .cart-clear-btn:hover { color: var(--coral, #c5384e); border: none; }

/* Assistenza WhatsApp dentro carrello e checkout (preventivo oltre 3 casse,
   dubbi prima dell'ordine, domande dopo la conferma). */
.cart-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 4px;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 999px;
  background: #1f8f4e; /* verde scurito: testo bianco con contrasto AA */
  color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background 0.18s ease;
}
.cart-wa-btn:hover, .cart-wa-btn:focus-visible { background: #176f3c; color: #fff; }
.cart-wa-btn i { font-size: 20px; }
.cart-summary-help { color: var(--gray-600, #44403c); }
.cart-help, .checkout-help { margin: 10px 0 0; font-size: 13px; color: var(--gray-500, #57514a); text-align: center; }
.cart-help a, .checkout-help a, .checkout-confirm-help-contact a { color: var(--amber-deep, #8e6923); font-weight: 600; }
.checkout-confirm-help { text-align: left; margin-top: 16px; }
.checkout-confirm-help-title { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.checkout-next-steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.checkout-next-steps li { margin-bottom: 4px; }
.checkout-confirm-help-contact { margin: 0; font-size: 13px; color: var(--gray-600, #44403c); }

/* Errore sotto le caselle obbligatorie (creato da checkout.js) */
.checkout-checkbox-row { flex-wrap: wrap; }
.checkout-checkbox-row > .checkout-field-error { flex: 0 0 100%; margin-left: 28px; min-height: 0; }
.checkout-checkbox-row > .checkout-field-error:empty { display: none; }
.checkout-checkbox-row input[aria-invalid="true"] { outline: 2px solid var(--coral, #c5384e); outline-offset: 2px; }

/* Bug: "Indirizzo di fatturazione" (co-fatturazione-wrap, attributo hidden) restava
   sempre visibile perche' .checkout-field imposta display:flex e vince sullo stile
   del browser per [hidden]: il campo extra confondeva chi non ne ha bisogno. */
.checkout-field[hidden] { display: none; }

/* Checkout su telefono: a tutto schermo, titolo piu' piccolo, campi compatti
   (Nome/Cognome, Civico/CAP e Citta'/Provincia affiancati; email e telefono
   a tutta larghezza) e niente righe d'errore vuote che allungano il modulo. */
@media (max-width: 640px) {
  .checkout-modal {
    top: 0; left: 0;
    width: 100%; max-width: 100%;
    height: 100vh; height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 20px 16px 32px;
    transform: translateY(12px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .checkout-modal.open { transform: none; }
  .checkout-modal h2 { font-size: 22px; line-height: 1.2; margin: 0 40px 0 0; }
  .checkout-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .checkout-order-summary { margin: 14px 0 18px; padding: 12px 14px; }
  .checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
  .checkout-grid .checkout-field--wide { grid-column: 1 / -1; }
  .checkout-field { min-width: 0; }
  .checkout-field input, .checkout-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
  .checkout-field { margin-bottom: 8px; }
  .checkout-field-error { min-height: 0; }
  .checkout-field-error:empty { display: none; }
  .checkout-fieldset { margin-bottom: 16px; }
  .checkout-checkbox-row { margin-bottom: 14px; }
  .checkout-checkbox-row input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
  .checkout-submit-btn { padding: 16px; }
}