/* Esperienza smartphone (nov 2026): il 72% dei clic da Google arriva da
   telefono. Foglio additivo caricato dopo gli altri: schede compatte, aree di
   tocco da 44px, niente video di sfondo (vedi video-leggeri.js). Nessuna
   animazione nuova. */

/* Risposta "dove comprare" nelle pagine prodotto (tutte le larghezze) */
.dove-comprare { margin: 28px 0 0; }
.dove-comprare h2 { margin: 0 0 8px; font-size: 20px; }
.dove-comprare p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-600, #44403c); }

@media (max-width: 768px) {
  /* I video non vengono scaricati: resta una foto leggera o il fondo scuro */
  .hero-bg-video,
  .signature-video-bg video,
  .brand-custom-video-bg video { display: none; }
  .hero-video-bg { background: #0a0908 url('/img/hero-mobile.jpg') center / cover no-repeat; }
  .signature-video-bg,
  .brand-custom-video-bg { background: #0a0908; }
}

@media (max-width: 640px) {
  /* Apertura: il pulsante d'acquisto entra nella prima schermata */
  .hero { min-height: 0; padding-top: 92px; padding-bottom: 28px; }
  .hero-logo { display: none; }
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-cta .btn { width: 100%; min-height: 48px; padding: 12px 10px; font-size: 13px; }
  .hero-cta .btn:nth-child(-n+2) { grid-column: 1 / -1; font-size: 14px; }

  /* Casse: foto a sinistra, acquisto a tutta larghezza */
  .cassa-card:not(.product-page-card) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px;
  }
  .cassa-card:not(.product-page-card) .cassa-card-body { display: contents; }
  .cassa-card:not(.product-page-card) .cassa-card-media {
    grid-column: 1;
    grid-row: 1 / span 4;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 8px;
    aspect-ratio: auto;
  }
  .cassa-card:not(.product-page-card) .cassa-card-media img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; }
  .cassa-card:not(.product-page-card) .cassa-card-header,
  .cassa-card:not(.product-page-card) .cassa-format,
  .cassa-card:not(.product-page-card) .cassa-price-unit,
  .cassa-card:not(.product-page-card) .cassa-desc { grid-column: 2; }
  .cassa-card:not(.product-page-card) .cassa-card-header { flex-wrap: wrap; gap: 4px 8px; }
  .cassa-card:not(.product-page-card) .cassa-name { font-size: 16px; }
  .cassa-card:not(.product-page-card) .cassa-format,
  .cassa-card:not(.product-page-card) .cassa-price-unit { margin: 4px 0 0; font-size: 12px; }
  .cassa-card:not(.product-page-card) .cassa-desc {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .cassa-card:not(.product-page-card) .cassa-add-row { grid-column: 1 / -1; margin-top: 12px; }
  .casse-grid { gap: 12px; }

  /* Pagina prodotto: foto meno alta, prezzo e pulsante subito visibili */
  .product-page-card .cassa-card-media { max-height: 300px; }
  .product-page-card .cassa-card-media img { max-height: 280px; object-fit: contain; }

  /* Aree di tocco comode */
  .cassa-step-btn { width: 44px; height: 44px; }
  .cassa-add-qty { width: 44px; height: 44px; }
  .cassa-add-btn { min-height: 48px; }
  .nav-icon-btn { min-width: 44px; min-height: 44px; }
  .beer-card-actions a { min-width: 44px; min-height: 44px; }

  /* Sotto i 16px iOS ingrandisce la pagina quando si tocca un campo */
  .checkout-field input,
  .checkout-field select,
  .checkout-field textarea,
  .cassa-add-qty { font-size: 16px; }

  /* Catalogo e birre albanesi: schede orizzontali invece di foto a tutto schermo */
  .beer-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px;
  }
  .beer-card > * { grid-column: 2; }
  .beer-card > .beer-card-media {
    grid-column: 1;
    grid-row: 1 / span 6;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
  }
  .beer-card-media img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; }
  .beer-card .beer-notes {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .albania-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .albania-media { height: auto; min-height: 0; padding: 0; aspect-ratio: auto; }
  .albania-media img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; }
  .albania-body { padding: 0; }
  .albania-desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 640px) {
  /* Abbinamenti e birre albanesi: fila da scorrere col dito invece di schede una
     sotto l'altra; la scheda successiva si intravede a destra. */
  .pairings-grid,
  .albania-grid {
    display: flex;
    gap: 12px;
    margin-right: -16px;
    padding: 0 16px 10px 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .pairings-grid > *,
  .albania-grid > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }

  /* Foto di sfondo più leggere sul telefono */
  [style*="cat-tedesche.jpg"] { background-image: url('/img/cat-tedesche-m.jpg') !important; }
  [style*="cat-italiane.jpg"] { background-image: url('/img/cat-italiane-m.jpg') !important; }
}
@media (max-width: 640px) {
  .landing-hero-bg { background-image: url('/img/cat-italiane-m.jpg') !important; }
}

/* Computer e portatili: con 11 voci il menu spingeva il carrello fuori dallo
   schermo fino a oltre 1900px. Sotto i 1560px si passa al menu compatto che il
   sito usa già sui tablet, così il carrello resta sempre visibile. */
.nav-inner { max-width: none; }
@media (max-width: 1800px) {
  .nav-cta { display: none; }
  .nav-links { gap: 20px; }
}
@media (max-width: 1560px) {
  .nav-inner { gap: 16px; }
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav-actions { gap: 12px; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    gap: 18px;
    padding: 24px 32px;
    background: var(--black-soft);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Le foto delle casse sono in <picture> (WebP leggero, PNG di riserva): il
   contenitore non deve cambiare l'impaginazione dell'immagine. */
picture { display: contents; }