/*
 * Stili per le pagine autonome dell'architettura multipagina (negozi, chi
 * siamo, ecc.), generate da tools/build-site.js. Foglio additivo: riusa le
 * classi già esistenti in main.css (.store-card, .store-cta, .store-grid...)
 * e aggiunge solo ciò che manca per queste pagine.
 */

.store-card-link { display: block; text-decoration: none; color: inherit; }
.store-card-link .store-cta { display: inline-flex; margin-top: 18px; }

.store-page { padding: 48px 0 80px; }
.store-page-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 768px) { .store-page-grid { grid-template-columns: 1fr; } }

.store-page-photo { margin: 0; border-radius: 8px; overflow: hidden; background: var(--black, #0a0908); }
.store-page-photo img { width: 100%; height: auto; display: block; }

.store-page-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.store-page-ctas .store-cta { display: inline-flex; align-items: center; gap: 8px; }
.store-cta-whatsapp { background: #188741; color: #fff; } /* Fase 6: scurito da #25d366 per contrasto WCAG AA (4.5:1) con testo bianco, restando riconoscibile come verde WhatsApp */
.store-cta-whatsapp:hover { background: #136c34; color: #fff; opacity: 1; }

.store-page-map { margin-top: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, rgba(10,9,8,0.08)); }
.store-page-map iframe { display: block; }

.store-page-faq { margin-top: 56px; max-width: 760px; }
.store-page-faq h2 { margin-bottom: 20px; }
.faq-item { padding: 18px 0; border-top: 1px solid var(--line, rgba(10,9,8,0.08)); }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { color: var(--gray-500, #57514a); margin: 0; }

.store-page-back { margin-top: 40px; }
.store-page-back a { color: #90692a; font-weight: 600; text-decoration: none; } /* Fase 6: scurito da --amber per contrasto WCAG AA (4.5:1) su sfondo chiaro */
.store-page-back a:hover { text-decoration: underline; }

.chi-siamo-page { padding-top: 24px; }

.stores-page { padding: 48px 0 80px; }

/* === Pagine prodotto singole (/prodotti/{slug}/, Fase 8) ===
   Riusano .cassa-card (già stilata in shop-cassa.css) come blocco
   foto+prezzo+aggiungi al carrello, così il widget resta identico
   (e funzionante con assets/js/cart.js) a quello della homepage. */
.product-page { padding: 48px 0 80px; }
.product-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 768px) { .product-page-grid { grid-template-columns: 1fr; } }
.product-page-card { max-width: 420px; }
@media (max-width: 768px) { .product-page-card { max-width: 100%; } }
.product-page-info { padding-top: 8px; }

.related-products { margin-top: 64px; }
.related-products h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 20px; }
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.related-product-card {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line, rgba(10,9,8,0.08));
  border-radius: 12px; padding: 14px;
  transition: border-color 0.2s, transform 0.2s;
}
.related-product-card:hover { border-color: var(--amber, #c8923a); transform: translateY(-2px); }
.related-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--cream, #faf6ee); border-radius: 8px; }
.related-product-name { font-weight: 600; font-size: 14px; }
.related-product-price { font-size: 13px; color: var(--gray-500, #57514a); }

/* === Articoli editoriali (Fase 22, es. /birre-tedesche/helles/) ===
   Testo lungo "a blog post", diverso sia dal titolone di .history-content
   (pensato per un solo titolo di pagina) sia dai capitoli numerati di
   .claudio-chapter: qui serve un ritmo più semplice, un H2 alla volta. */
.article-page { padding: 48px 0 80px; }
.article-body { max-width: 760px; margin: 40px auto 0; }
.article-body p { font-size: 17px; line-height: 1.8; color: var(--gray-500, #57514a); margin-bottom: 20px; }
.article-body h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3vw, 30px); color: var(--black, #0a0908);
  margin: 40px 0 16px;
}
.article-products-grid { margin: 24px 0 32px; }
.article-cta-row { margin-top: 8px; }
@media (max-width: 640px) {
  .article-body h2 { margin: 32px 0 14px; }
  .article-body p { font-size: 15px; }
}

/* === Birre a marchio (/birre-a-marchio/) === */
.marchio-products { display: flex; flex-direction: column; gap: 56px; margin-top: 16px; }
.marchio-product {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 720px) { .marchio-product { grid-template-columns: 1fr; } }
.marchio-product-media { border-radius: 12px; overflow: hidden; background: var(--cream, #faf6ee); }
.marchio-product-media img { width: 100%; height: auto; display: block; }
.marchio-product-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #90692a; margin-bottom: 6px; } /* Fase 6: scurito da --amber per contrasto WCAG AA su sfondo chiaro */
.marchio-product-body h2 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 6px; }
.marchio-product-body h2 em { font-style: normal; color: #90692a; font-weight: 300; } /* Fase 6: scurito da --amber per contrasto WCAG AA su sfondo chiaro */
.marchio-product-style { font-size: 14px; color: var(--gray-500, #57514a); margin-bottom: 14px; }
.marchio-product-body > p:not([class]) { font-size: 16px; line-height: 1.75; color: var(--gray-500, #57514a); margin-bottom: 20px; }
.marchio-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--cream, #faf6ee);
  border-radius: 10px;
}
.marchio-spec-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500, #57514a); }
.marchio-spec-value { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.marchio-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--black, #0a0908); color: var(--cream, #faf6ee);
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.marchio-cta:hover { background: var(--amber, #c8923a); color: var(--black, #0a0908); opacity: 1; }

/* === Pagina 404 === */
.not-found-page { padding: 80px 0 100px; }
.not-found-content { max-width: 720px; margin: 0 auto; text-align: center; }
.not-found-content h1 { margin-bottom: 16px; }
.not-found-content > p { font-size: 17px; line-height: 1.7; color: var(--gray-500, #57514a); margin-bottom: 40px; }
.not-found-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  text-align: left;
}
.not-found-link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line, rgba(10,9,8,0.08));
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.not-found-link:hover { border-color: var(--amber, #c8923a); transform: translateY(-2px); }
.not-found-link i { font-size: 22px; color: var(--amber, #c8923a); margin-top: 2px; }
.not-found-link strong { display: block; margin-bottom: 2px; }
.not-found-link span { font-size: 14px; line-height: 1.5; color: var(--gray-500, #57514a); }