/* ============================================================
   MineralBirra — static mockup stylesheet
   Single source of truth. Tokens per DESIGN.md.
   Mobile-first. Devices: card con notch, hairline oro,
   banda gradiente oro→bianco, pattern tessellato, firma.
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  /* Colore (DESIGN.md names) */
  --oro: #AE8625;
  --oro-scuro: #8A6C1D;   /* small gold text/links, AA on white */
  --oro-logo: #B69A42;    /* logo artwork only */
  --nero: #080808;
  --antracite: #1A1A1A;
  --bianco: #FFFFFF;
  --crema: #F7F4ED;
  --grigio-perla: #DCDCDC;
  --grigio-testo: #6E6A63;
  --rosso-scuro: #C00428;
  --rosso-lab: #FC0536;   /* ONLY inside Bibendum Lab block, display size only */
  --rosa-lab: #FDEDF0;    /* light Lab surface — the Lab's answer to crema */

  /* Tipografia */
  --font-display: "Jost", "Century Gothic", Arial, sans-serif;
  --font-ui: "Manrope", Arial, sans-serif;
  --font-editorial: "Cormorant Garamond", Garamond, Georgia, serif;

  /* Scala tipografica fissa: 72/56/40/28/21/19/17/13/11 */
  --t-72: clamp(2.5rem, 6vw, 4.5rem);   /* hero H1 */
  --t-56: clamp(2rem, 4.6vw, 3.5rem);
  --t-40: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-28: clamp(1.4rem, 2.3vw, 1.75rem);
  --t-21: 1.3125rem;
  --t-19: 1.1875rem;
  --t-17: 1.0625rem;
  --t-13: 0.8125rem;
  --t-11: 0.6875rem;

  /* Spazio */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --maxw: 1280px;

  /* Forme */
  --radius-notch: 20px 20px 20px 0;   /* card con notch: bottom-left vivo */
  --radius-pill: 23px;
  --border-hair: 1px solid var(--grigio-perla);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-17);
  line-height: 1.6;
  color: var(--antracite);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* Visible keyboard focus — 2px oro-scuro outline offset 2 */
:focus-visible {
  outline: 2px solid var(--oro-scuro);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--nero); color: var(--bianco);
  padding: 0.6rem 1rem; z-index: 200;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-13);
}
.skip-link:focus { top: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Shared type helpers ----------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-13);
  color: var(--oro-scuro);
  margin: 0;
}
.eyebrow--dark { color: var(--oro); } /* on nero */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.04;
}
.editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
}

/* Hairline oro device */
.hairline { border: 0; height: 1px; background: var(--oro); margin: 0; }

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-17);   /* board-26 gold-pill exception requires >=15px caps */
  border: 1px solid transparent;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  text-align: center;
}
/* Primary: oro bg + white caps (book board 26 display exception) */
.btn-primary { background: var(--oro); color: var(--bianco); border-color: var(--oro); }
.btn-primary:hover { background: var(--oro-scuro); border-color: var(--oro-scuro); }
/* Secondary: transparent, oro-scuro border + text */
.btn-secondary { background: transparent; color: var(--oro-scuro); border-color: var(--oro-scuro); }
.btn-secondary:hover { background: var(--oro-scuro); color: var(--bianco); }
/* On dark surfaces the secondary reads in gold-on-nero */
.btn-secondary--on-dark { color: var(--oro); border-color: var(--oro); }
.btn-secondary--on-dark:hover { background: var(--oro); color: var(--nero); }
/* Disabled */
.btn:disabled, .btn.is-disabled {
  background: var(--grigio-perla); color: var(--grigio-testo);
  border-color: var(--grigio-perla); cursor: not-allowed; pointer-events: none;
}

.textlink {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-13);
  color: var(--oro-scuro);
  display: inline-flex; align-items: center; gap: 0.35em;
  transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.textlink:hover { gap: 0.6em; }

/* Clickable cards: the bottom CTA stretches over its whole card.
   Tiles (.cat-tile, .cat-tile-lg, .doc-card--teaser, .post-nav-item) are already full anchors. */
.event-card, .doc-card, .ricetta { position: relative; }
.product-card .p-cta .textlink::after,
.event-card .ev-body .textlink::after,
.doc-card .doc-body .btn::after,
.ricetta > .textlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---- Icons ------------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; }
.icon path, .icon line, .icon rect, .icon polyline, .icon polygon,
.icon circle, .icon ellipse {
  stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
/* the "grape dot" — one filled circle per icon */
.icon .dot { fill: currentColor; stroke: none; transition: fill 0.25s var(--ease-out); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bianco);
  border-bottom: var(--border-hair);
}
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; padding-block: 0.65rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.main-nav a {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-13); color: var(--antracite);
  padding-block: 0.4rem; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--oro); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.main-nav a[aria-current] { color: var(--oro-scuro); }

.header-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.search-pill {
  display: none; align-items: center; gap: 0.5rem;
  background: var(--crema); border: 1px solid var(--grigio-perla);
  border-radius: var(--radius-pill); padding: 0 0.9rem; height: 40px;
}
.search-pill input {
  border: 0; background: transparent; font: inherit; font-size: var(--t-13);
  color: var(--antracite); width: clamp(12ch, 14vw, 19ch); padding: 0;
}
.search-pill input::placeholder { color: var(--grigio-testo); }
.search-pill input:focus { outline: none; }
.search-pill:focus-within { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }
.search-pill .icon { color: var(--grigio-testo); width: 18px; height: 18px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent; border: 0; border-radius: 50%;
  color: var(--antracite); transition: background-color 0.2s var(--ease-out);
}
.icon-btn:hover { background: var(--crema); }
.icon-btn:hover .dot { fill: var(--oro); }

.nav-toggle { display: inline-flex; }

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed; inset: 68px 0 0 0; z-index: 99;
  background: var(--bianco);
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a {
  display: block; padding: 0.9rem 0;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-19);
  border-bottom: var(--border-hair);
}
.mobile-nav .mobile-search {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
  background: var(--crema); border: 1px solid var(--grigio-perla);
  border-radius: var(--radius-pill); padding: 0 1rem; height: 46px;
}
.mobile-nav .mobile-search input { border: 0; background: transparent; font: inherit; flex: 1; }
.mobile-nav .mobile-search input:focus { outline: none; }
.mobile-nav .mobile-search:focus-within { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }
.mobile-nav .mobile-search .icon { color: var(--grigio-testo); width: 20px; height: 20px; }

@media (min-width: 900px) {
  /* same gap as .main-nav ul, so logo-to-menu equals item-to-item spacing */
  .header-inner { gap: clamp(1rem, 2.2vw, 2rem); }
  .brand img { height: 54px; }
  .main-nav { display: block; }
  .search-pill { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* Category strip — catalog pages only, below the header row */
.category-strip { border-top: var(--border-hair); background: var(--bianco); }
.category-strip ul {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem clamp(0.75rem, 2vw, 1.5rem); padding-block: 0.55rem;
}
.category-strip .sep { color: var(--oro-scuro); }
.category-strip a {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-13); color: var(--antracite);
  padding-block: 0.25rem; position: relative;
}
.category-strip a:hover { color: var(--oro-scuro); }
.category-strip a[aria-current="page"] { color: var(--oro-scuro); }
.category-strip a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--oro);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--nero); color: var(--grigio-perla);
}
/* pattern watermark — never behind column text (kept faint + bottom) */
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-bianco.svg");
  background-repeat: repeat; background-size: 120px;
  opacity: 0.04; pointer-events: none;
}
.site-footer > * { position: relative; }

.footer-payoff {
  text-align: center; padding: clamp(1.75rem, 4vw, 2.75rem) var(--gutter);
  border-bottom: 1px solid rgba(174, 134, 37, 0.35);
}
.footer-payoff span {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.28em;
  font-size: clamp(0.9rem, 2.4vw, 1.4rem); color: var(--bianco);
}
.footer-payoff .sep { color: var(--oro); margin-inline: 0.4em; }

.footer-cols {
  display: grid; gap: 2.25rem 2rem;
  grid-template-columns: 1fr;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.footer-col h3 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--t-13); color: var(--oro); margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a, .footer-col p { font-size: var(--t-13); color: var(--grigio-perla); }
.footer-col a { transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--oro); }
.footer-col address { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--t-13); }

/* Bibendum Lab surface — self-contained, rosso-lab only inside here.
   A real panel (antracite, the brand's panel-on-nero) with a red top rule
   and a ghosted red firma, not a thin-line outline. Mirrors
   .contact-card--lab's surface grammar; css-only so all 13 footers match. */
.footer-lab {
  position: relative; overflow: hidden;
  background: var(--antracite);
  border: 0; border-radius: var(--radius-notch);
  padding: 1.35rem 1.25rem;
}
/* red top edge — an overflow-clipped bar, so it follows the notch corners
   instead of a straight border fighting the radius */
.footer-lab::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rosso-lab); pointer-events: none;
}
/* ghosted red firma bottom-right (parallel of the footer's white watermark) */
.footer-lab::before {
  content: ""; position: absolute; right: -12px; bottom: -14px;
  width: 104px; height: 104px;
  background: url("../assets/icona-mineralbirra-rosso.svg") no-repeat center / contain;
  opacity: 0.09; pointer-events: none;
}
.footer-lab > * { position: relative; z-index: 1; }
.footer-lab .lab-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--t-13); color: var(--bianco); margin-bottom: 0.6rem;
}
.footer-lab .lab-label-mark { width: 24px; height: 24px; flex: none; }
.footer-lab p { color: var(--grigio-perla); font-size: var(--t-13); margin-bottom: 0.75rem; line-height: 1.55; }
.footer-lab a.lab-link {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-13);
  color: var(--bianco); display: inline-flex; gap: 0.4em; align-items: center;
  transition: gap 0.2s var(--ease-out);
}
.footer-lab a.lab-link:hover { gap: 0.7em; }

.footer-bottom {
  border-top: 1px solid rgba(220, 220, 220, 0.12);
  padding: 1.25rem 0; text-align: center;
}
.footer-bottom p { font-size: var(--t-11); letter-spacing: 0.06em; color: var(--grigio-perla); text-transform: uppercase; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid rgba(220, 220, 220, 0.25); border-radius: 50%;
  color: var(--grigio-perla);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.footer-social a:hover, .footer-social a:focus-visible { color: var(--oro); border-color: var(--oro); }
.footer-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-social svg .fill { fill: currentColor; stroke: none; }
/* Lab box: no gold inside — hover goes white */
.footer-lab .footer-social { margin-top: 0.9rem; }
.footer-lab .footer-social a:hover, .footer-lab .footer-social a:focus-visible { color: var(--bianco); border-color: var(--bianco); }

.footer-bottom .legal { margin-top: 0.5rem; display: inline-flex; gap: 0.5rem 1rem; flex-wrap: wrap; justify-content: center; }
.footer-bottom .legal a { font-size: var(--t-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio-perla); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .legal a:hover, .footer-bottom .legal a:focus-visible { color: var(--bianco); }

@media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1.1fr 1fr 1.2fr 1.4fr; } }

/* ============================================================
   Product card — shared across all pages
   ============================================================ */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bianco);
  border: var(--border-hair);
  border-radius: var(--radius-notch);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--grigio-testo);
  box-shadow: 0 14px 30px -18px rgba(8, 8, 8, 0.4);
}
.product-card .thumb {
  height: 256px; background: var(--bianco);
  display: grid; place-items: center; padding: 16px;
  overflow: hidden; border-bottom: var(--border-hair);
}
.product-card .thumb img {
  /* explicit box: percentage max-height vs the auto grid row is circular and crops tall images */
  width: 100%; height: 224px; object-fit: contain;
  transition: transform 0.35s var(--ease-out);
}
.product-card:hover .thumb img { transform: scale(1.04); }
/* no image yet (draft records awaiting a pack shot) — keep the card rhythm, say so plainly */
.product-card .thumb--empty {
  background: var(--crema);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: var(--t-11); color: var(--grigio-testo);
}

/* draft = supplier article not yet imported into WooCommerce. A review state, not a promo badge:
   antracite/oro keeps it clearly editorial and away from the Lab red. */
.badge-draft {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 0.3rem 0.6rem; border-radius: 3px;
  background: var(--antracite); color: var(--oro);
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-11); line-height: 1;
}
.badge-draft--inline { position: static; display: inline-block; vertical-align: middle; }

.product-card .body { padding: 0.9rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.product-card .p-cat { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-11); color: var(--oro-scuro); }
.product-card .p-name { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-17); line-height: 1.25; color: var(--antracite); }
.product-card .p-attrs { font-size: var(--t-13); color: var(--grigio-testo); }
.product-card .p-cta { margin-top: auto; padding-top: 0.55rem; }

/* availability — PDP only (product cards show product info only, no availability) */
@media (min-width: 560px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Catalog page head — section-head pattern (H1 + oro hairline + count)
   ============================================================ */
.catalog-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}
.catalog-head h1 {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--nero); font-size: var(--t-40); line-height: 1;
}
.catalog-head .hairline { flex: 1 0 2rem; align-self: center; }
.catalog-head .catalog-count { font-size: var(--t-13); color: var(--grigio-testo); font-family: var(--font-ui); white-space: nowrap; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding-block: var(--section-y); }
.section--crema { background: var(--crema); }
.section--nero { background: var(--nero); color: var(--grigio-perla); }
.section--white { background: var(--bianco); }
.section--rosa { background: var(--rosa-lab); } /* Lab light surface (rhythm partner of white) */

.section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-28);
}
.section-head .hairline { flex: 1 0 3rem; align-self: center; }

/* Closing CTA — lead + button row (replaces borrowed .hero-cta on interior pages) */
.cta-lead { max-width: 58ch; font-size: var(--t-19); color: var(--grigio-testo); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Riga dati — brand interpunct numbers row (light surfaces) */
.riga-dati {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-17); color: var(--grigio-testo);
}
.riga-dati .rd-strong { color: var(--nero); }
.riga-dati .sep { color: var(--oro-scuro); }

/* ============================================================
   INDEX — hero
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: var(--nero); color: var(--bianco);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-antracite.svg");
  background-repeat: repeat; background-size: 140px;
  /* right-weighted + masked so the text column stays clean */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  opacity: 0.9; pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; max-width: 34ch; }
.hero-copy h1 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.04; font-size: var(--t-72); margin: 0; color: var(--bianco); }
/* Official payoff: words bianco, interpuncts oro. One line if it fits, else stacked. */
.hero-payoff { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.32em; }
.hero-payoff .unit { white-space: nowrap; }
.hero-payoff .d { color: var(--oro); }
.hero-sub { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: var(--t-21); color: var(--grigio-perla); line-height: 1.35; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }

/* notch-framed cantina photo (color), firma + caption over the lower edge */
.hero-photo {
  position: relative; margin: 0;
  border-radius: var(--radius-notch); overflow: hidden;
  justify-self: center; width: 100%; max-width: 560px;
  height: clamp(280px, 58vw, 400px);
}
.hero-photo > img:first-of-type { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .firma { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; margin: 0; z-index: 2; }
.hero-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 3.25rem 0.85rem 1.1rem;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--t-13);
  letter-spacing: 0.02em; color: var(--bianco);
  background: linear-gradient(to top, rgba(8, 8, 8, 0.62), rgba(8, 8, 8, 0));
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .hero-photo { justify-self: end; max-width: 560px; height: 420px; }
}

/* ============================================================
   INDEX — category tiles
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cat-tile {
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: 1.4rem 1.25rem;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.cat-tile:hover { transform: translateY(-2px); border-color: var(--grigio-testo); box-shadow: 0 14px 30px -18px rgba(8,8,8,0.35); }
.cat-tile:hover .dot { fill: var(--oro); }
.cat-tile .icon { width: 32px; height: 32px; color: var(--antracite); }
.cat-tile .cat-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-19); }
.cat-tile .textlink { margin-top: auto; }
@media (min-width: 760px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   INDEX — storia band
   ============================================================ */
.storia { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.storia-copy { display: flex; flex-direction: column; gap: 1.25rem; }
.storia-copy h2 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-40); color: var(--bianco); }
.storia-copy .body { color: var(--grigio-perla); }
.storia-quote { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: var(--t-21); color: var(--oro); line-height: 1.35; border-left: 1px solid var(--oro); padding-left: 1rem; }
.storia-numbers { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-top: 1rem; border-top: 1px solid rgba(174,134,37,0.4); font-size: var(--t-13); color: var(--grigio-perla); letter-spacing: 0.04em; }
.storia-numbers .sep { color: var(--oro); }
.storia-photo { position: relative; border-radius: var(--radius-notch); overflow: hidden; }
.storia-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.storia-photo .firma { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; min-height: 0; object-fit: contain; filter: none; margin: 0; }
@media (min-width: 900px) { .storia { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }

/* ============================================================
   INDEX — servizio cards
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.svc-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: 1.6rem 1.4rem;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.svc-card:hover { transform: translateY(-2px); border-color: var(--grigio-testo); box-shadow: 0 14px 30px -18px rgba(8,8,8,0.3); }
.svc-card:hover .dot { fill: var(--oro); }
.svc-card .icon { width: 34px; height: 34px; color: var(--antracite); margin-bottom: 0.3rem; }
.svc-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-19); }
.svc-card p { font-size: var(--t-13); color: var(--grigio-testo); }
.svc-card .textlink { margin-top: 0.3rem; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

/* contatti block inside the servizio section — gives «Richiedi listino» a real endpoint */
.svc-contact {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--oro);
}
.svc-contact .svc-contact-lead { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-19); color: var(--antracite); }
.svc-contact .svc-contact-lines { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; font-size: var(--t-17); }
.svc-contact .svc-contact-lines a { color: var(--oro-scuro); font-weight: 600; }
.svc-contact .svc-contact-lines .sep { color: var(--oro-scuro); }

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { padding-block: 1rem; font-size: var(--t-13); color: var(--grigio-testo); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.breadcrumb .sep { color: var(--oro-scuro); }
.breadcrumb a { color: var(--oro-scuro); }
.breadcrumb a:hover { color: var(--nero); }
.breadcrumb [aria-current="page"] { color: var(--grigio-testo); }

/* ============================================================
   CATALOGO — layout, filters, toolbar
   ============================================================ */
.catalog-header { padding-top: 0.5rem; }
.catalog-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem; }

.filters-panel { display: flex; flex-direction: column; }
.filter-group { padding-block: 1.25rem; border-bottom: var(--border-hair); }
.filters-panel > .filter-group:first-of-type { padding-top: 0; }
.filter-group h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-13); color: var(--antracite); margin-bottom: 0.8rem; }
.filter-list { display: flex; flex-direction: column; gap: 0.55rem; }

/* custom checkbox / radio — square 18px, gold check */
.opt { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-13); color: var(--antracite); cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .box {
  width: 18px; height: 18px; flex: none; border: 1px solid var(--grigio-testo);
  border-radius: 3px; display: grid; place-items: center;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.opt.opt--radio .box { border-radius: 50%; }
.opt .box svg { width: 12px; height: 12px; opacity: 0; }
.opt .box svg path { stroke: var(--oro); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.opt input:checked + .box { border-color: var(--oro); }
.opt input:checked + .box svg { opacity: 1; }
.opt.opt--radio input:checked + .box { background: var(--oro); }
.opt.opt--radio input:checked + .box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bianco); }
.opt input:focus-visible + .box { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }
.opt:hover .box { border-color: var(--oro); }
.opt.is-active { color: var(--oro-scuro); font-weight: 700; }
.opt .count { margin-left: auto; padding-left: 0.6rem; font-size: var(--t-11); color: var(--grigio-testo); font-variant-numeric: tabular-nums; }

/* availability toggle switch */
.toggle { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-13); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 38px; height: 22px; border-radius: 100px; background: var(--grigio-perla); border: 1px solid var(--grigio-testo); position: relative; transition: background-color 0.2s var(--ease-out); flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bianco); transition: transform 0.2s var(--ease-out); }
.toggle input:checked + .track { background: var(--oro); }
.toggle input:checked + .track::after { transform: translateX(16px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }

.filters-reset { margin-top: 1.25rem; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.active-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.active-chips .chips-label { font-size: var(--t-13); color: var(--grigio-testo); }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--crema); border: 1px solid var(--grigio-perla);
  border-radius: 100px; padding: 0.3rem 0.4rem 0.3rem 0.7rem;
  font-size: var(--t-13); color: var(--antracite);
}
.chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--grigio-testo); transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.chip button:hover { background: var(--rosso-scuro); color: var(--bianco); }
.chip button svg { width: 10px; height: 10px; }
.chip button svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sort-select { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-13); color: var(--grigio-testo); }
.sort-select select {
  font: inherit; font-size: var(--t-13); font-weight: 600; color: var(--antracite);
  border: 1px solid var(--grigio-perla); border-radius: var(--radius-pill);
  padding: 0.45rem 2rem 0.45rem 0.9rem; background: var(--bianco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A6C1D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}

/* Filtri drawer trigger (mobile) */
.filters-trigger { display: inline-flex; }
.filters-close { display: none; }

/* pagination */
.catalog-empty { padding: 3.5rem 1rem; text-align: center; color: var(--grigio-testo); font-size: var(--t-15); display: grid; gap: 0.9rem; justify-items: center; border: var(--border-hair); border-radius: var(--radius-notch); background: var(--bianco); }
.catalog-empty[hidden] { display: none; }
.pagination { display: flex; justify-content: center; gap: 0.4rem; padding-block: 2.5rem 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding-inline: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; font-size: var(--t-13); font-weight: 600; color: var(--antracite);
  border: 1px solid transparent; transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.pagination a:hover { border-color: var(--grigio-perla); }
.pagination [aria-current="page"] { background: var(--oro-scuro); color: var(--bianco); }
.pagination .ellipsis { color: var(--grigio-testo); }

@media (min-width: 1000px) {
  .catalog-layout { grid-template-columns: 250px 1fr; gap: 2.5rem; }
  .filters-panel { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: 0.5rem; }
  .filters-trigger { display: none; }
}

/* Mobile filter drawer */
@media (max-width: 999px) {
  .filters-aside {
    position: fixed; inset: 0; z-index: 130;
    background: rgba(8, 8, 8, 0.5);
    display: none;
  }
  .filters-aside[data-open="true"] { display: block; }
  .filters-panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw);
    background: var(--bianco); padding: 1.25rem var(--gutter) 2rem; overflow-y: auto;
  }
  .filters-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--grigio-perla); border-radius: 50%;
    background: transparent; margin-left: auto; margin-bottom: 0.5rem;
  }
  .filters-close svg { width: 16px; height: 16px; }
  .filters-close svg path { stroke: var(--antracite); stroke-width: 1.5; stroke-linecap: round; }
  .filters-drawer-head { display: flex; align-items: center; justify-content: space-between; }
}

/* ============================================================
   PRODOTTO — detail
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 1.5rem 3rem; }
.pdp-stage { display: flex; flex-direction: column; gap: 1rem; }
.pdp-panel {
  background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch);
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 2rem;
}
.pdp-panel img { max-height: 520px; max-width: 100%; width: auto; object-fit: contain; }
.pdp-thumbs { display: flex; gap: 0.75rem; }
.pdp-thumb {
  width: 74px; height: 74px; padding: 0.5rem; background: var(--bianco);
  border: var(--border-hair); border-radius: 12px 12px 12px 0;
  display: grid; place-items: center; position: relative;
}
.pdp-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.pdp-thumb.is-active { border-color: var(--oro); }
.pdp-thumb.is-active::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -3px; height: 2px; background: var(--oro); }

.pdp-info { display: flex; flex-direction: column; gap: 1rem; }
.pdp-info h1 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-40); line-height: 1.03; }
.pdp-info .sub { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-19); color: var(--grigio-testo); }
.pdp-info .tasting { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: var(--t-21); color: var(--oro-scuro); line-height: 1.35; }
.pdp-info .tasting p + p { margin-top: 0.5rem; }

.spec-heading { font-family: var(--font-ui); font-size: var(--t-13); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio-testo);
  margin: 1.6rem 0 0.2rem; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7rem 0; border-bottom: var(--border-hair); font-size: var(--t-13); vertical-align: top; }
.spec-table th { font-family: var(--font-ui); font-weight: 600; color: var(--grigio-testo); width: 42%; font-size: var(--t-13); }
.spec-table td { color: var(--antracite); font-weight: 600; }

.pdp-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pdp-note { font-size: var(--t-13); color: var(--grigio-testo); }

@media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }

/* description band */
.desc-band .desc-inner { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 760px; }
.desc-band p { color: var(--antracite); }
.desc-quote { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: var(--t-21); color: var(--oro-scuro); line-height: 1.35; border-left: 1px solid var(--oro); padding-left: 1rem; }
.desc-inner h2, .desc-inner h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-17); color: var(--antracite); margin-top: 0.5rem; }

/* ============================================================
   PAGE HEAD — interior editorial pages
   Breadcrumb + eyebrow + H1 + oro hairline. Same family as
   .catalog-head. Crema and nero variants (nero adds pattern).
   ============================================================ */
.page-head { background: var(--bianco); padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.page-head--crema { background: var(--crema); }
.page-head--rosa { background: var(--rosa-lab); } /* Lab course head surface */
.page-head--nero { background: var(--nero); color: var(--grigio-perla); position: relative; overflow: hidden; }
.page-head--nero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-antracite.svg");
  background-repeat: repeat; background-size: 140px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  opacity: 0.9; pointer-events: none;
}
.page-head > .wrap { position: relative; }
.page-head .eyebrow { margin-bottom: 0.9rem; }
.page-head-row { display: flex; align-items: baseline; gap: 1rem; }
.page-head h1 {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  font-size: var(--t-40); color: var(--nero);
}
.page-head--nero h1 { color: var(--bianco); }
.page-head .page-head-row .hairline { flex: 1 0 2rem; align-self: center; }
.page-head .page-lead { margin-top: 1.25rem; max-width: 58ch; font-size: var(--t-19); color: var(--grigio-testo); }
.page-head--nero .page-lead { color: var(--grigio-perla); }
.page-head--nero .page-quote {
  margin-top: 1rem; max-width: 40ch;
  font-family: var(--font-editorial); font-style: italic; font-weight: 500;
  font-size: var(--t-21); line-height: 1.35; color: var(--oro);
}
/* breadcrumb reads light on the nero variant */
.page-head--nero .breadcrumb, .page-head--nero .breadcrumb [aria-current="page"] { color: var(--grigio-perla); }
.page-head--nero .breadcrumb a { color: var(--oro); }
.page-head--nero .breadcrumb a:hover { color: var(--bianco); }
.page-head--nero .breadcrumb .sep { color: var(--oro); }

/* ============================================================
   TIMELINE — vertical editorial timeline
   Left oro rail below 1000px; centered rail with alternating
   sides at >=1000px. Placed on crema (marker ring = crema).
   ============================================================ */
.timeline { position: relative; list-style: none; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.timeline::before { content: ""; position: absolute; top: 0.35rem; bottom: 0.5rem; left: 7px; width: 1px; background: var(--oro); }
.tl-item { position: relative; padding-left: 2.35rem; }
.tl-item::before {
  content: ""; position: absolute; left: 3px; top: 0.5rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 0 4px var(--crema);
}
.tl-year {
  display: block; font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  font-size: var(--t-28); color: var(--oro-scuro); margin-bottom: 0.75rem;
}
.tl-body { border-top: 1px solid var(--grigio-perla); padding-top: 0.85rem; }
.tl-body p { color: var(--antracite); max-width: 48ch; }
.tl-body p + p { margin-top: 0.6rem; }
.tl-body .textlink { margin-top: 0.65rem; }
@media (min-width: 1000px) {
  .timeline::before { left: 50%; }
  .tl-item { width: 50%; padding-left: 0; }
  .tl-item:nth-child(odd) { padding-right: 3rem; text-align: right; }
  .tl-item:nth-child(odd)::before { left: auto; right: -4.5px; }
  .tl-item:nth-child(odd) .tl-body p { margin-left: auto; }
  .tl-item:nth-child(odd) .textlink { flex-direction: row-reverse; }
  .tl-item:nth-child(even) { margin-left: 50%; padding-left: 3rem; }
  .tl-item:nth-child(even)::before { left: -4.5px; }
}

/* ============================================================
   TWO-COL EDITORIAL — text ~38% + media, gap >=64px, stacks
   ============================================================ */
.two-col-editorial { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.tce-text { display: flex; flex-direction: column; gap: 1.1rem; }
.tce-text p { color: var(--antracite); }
.tce-text h2 {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero);
}
.tce-media { position: relative; margin: 0; border-radius: var(--radius-notch); overflow: hidden; }
.tce-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.tce-media .firma { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; min-height: 0; object-fit: contain; margin: 0; }
@media (min-width: 1000px) {
  .two-col-editorial { grid-template-columns: 38% 1fr; gap: clamp(4rem, 6vw, 5rem); }
  .two-col-editorial--rev { grid-template-columns: 1fr 38%; }
  .two-col-editorial--rev .tce-text { order: 2; }
}

/* ============================================================
   QUOTE BAND — Cormorant display pull-quote. nero + crema.
   ============================================================ */
.quote-band { padding-block: var(--section-y); }
.quote-band--nero { background: var(--nero); color: var(--bianco); position: relative; overflow: hidden; }
.quote-band--nero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-antracite.svg");
  background-repeat: repeat; background-size: 150px;
  -webkit-mask-image: linear-gradient(120deg, transparent 40%, rgba(0,0,0,0.85) 100%);
  mask-image: linear-gradient(120deg, transparent 40%, rgba(0,0,0,0.85) 100%);
  opacity: 0.85; pointer-events: none;
}
.quote-band--crema { background: var(--crema); }
.quote-band .wrap { position: relative; }
.quote-band figure { margin: 0; }
.quote-band .qb-rule { border: 0; height: 1px; width: 64px; background: var(--oro); margin: 0 0 1.5rem; }
.quote-band blockquote {
  margin: 0; max-width: 22ch;
  font-family: var(--font-editorial); font-weight: 500; font-style: italic;
  font-size: var(--t-40); line-height: 1.22;
}
.quote-band--nero blockquote { color: var(--bianco); }
.quote-band--crema blockquote { color: var(--nero); }
.quote-band cite { display: block; margin-top: 1.25rem; font-style: normal; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-13); }
.quote-band--nero cite { color: var(--oro); }
.quote-band--crema cite { color: var(--oro-scuro); }

/* ============================================================
   STAT STRIP — generalized numbers strip (num + label)
   ============================================================ */
.stat-strip {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--grigio-perla);
  border: 1px solid var(--grigio-perla); border-radius: var(--radius-notch); overflow: hidden;
}
.stat-item { background: var(--bianco); padding: clamp(1.25rem, 3vw, 1.75rem) 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.stat-item .stat-num { font-family: var(--font-display); font-weight: 300; font-size: var(--t-40); line-height: 1; color: var(--nero); letter-spacing: 0.02em; }
.stat-item .stat-label { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-13); color: var(--grigio-testo); }
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   TILE GRID + CAT-TILE-LG — category tile with count
   ============================================================ */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 760px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tile-lg {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch);
  padding: 1.5rem 1.35rem;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.cat-tile-lg:hover { transform: translateY(-2px); border-color: var(--grigio-testo); box-shadow: 0 14px 30px -18px rgba(8,8,8,0.35); }
.cat-tile-lg:hover .dot { fill: var(--oro); }
.cat-tile-lg .icon { width: 34px; height: 34px; color: var(--antracite); margin-bottom: 0.2rem; }
.cat-tile-lg .ct-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-19); overflow-wrap: break-word; hyphens: auto; }
.cat-tile-lg .ct-count { font-family: var(--font-ui); font-size: var(--t-13); color: var(--grigio-testo); }
.cat-tile-lg .textlink { margin-top: 0.55rem; }

/* ============================================================
   DOC CARD — catalog download (cover, title, meta, pill CTA)
   ============================================================ */
.doc-card { display: flex; flex-direction: column; background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch); overflow: hidden; }
.doc-cover { aspect-ratio: 3 / 4; background: var(--crema); overflow: hidden; }
.doc-cover img { width: 100%; height: 100%; object-fit: cover; }
.doc-body { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.doc-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-19); color: var(--antracite); }
.doc-meta { font-size: var(--t-13); color: var(--grigio-testo); }
.doc-card .btn { margin-top: auto; }

/* ============================================================
   EVENT CARD — B/N 3:2 cover, eyebrow, title, one line, link
   ============================================================ */
.event-card { display: flex; flex-direction: column; background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch); overflow: hidden; transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.event-card:hover { transform: translateY(-2px); border-color: var(--grigio-testo); box-shadow: 0 14px 30px -18px rgba(8,8,8,0.3); }
.ev-cover { aspect-ratio: 3 / 2; overflow: hidden; }
.ev-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform 0.35s var(--ease-out); }
.event-card:hover .ev-cover img { transform: scale(1.04); }
.ev-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.ev-title { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-19); color: var(--antracite); }
.ev-text { font-size: var(--t-13); color: var(--grigio-testo); }
.event-card .textlink { margin-top: auto; }

/* ============================================================
   FORM — fields, custom checkbox, hints/errors (static demo)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field > label { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-13); color: var(--antracite); }
.field .req { color: var(--rosso-scuro); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field textarea, .field select {
  font: inherit; font-size: var(--t-17); color: var(--antracite);
  background: var(--bianco); border: 1px solid var(--grigio-perla);
  border-radius: 12px 12px 12px 0; padding: 0.7rem 0.9rem; width: 100%;
  transition: border-color 0.2s var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; border-radius: 16px 16px 16px 0; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A6C1D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--oro); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: var(--grigio-testo); }
.field .hint { font-size: var(--t-13); color: var(--grigio-testo); }
.field .error { font-size: var(--t-13); color: var(--rosso-scuro); font-weight: 600; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--rosso-scuro); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
/* custom checkbox — consistent with catalogo's .opt box */
.check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--t-13); color: var(--grigio-testo); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 18px; height: 18px; flex: none; margin-top: 2px; border: 1px solid var(--grigio-testo); border-radius: 3px; display: grid; place-items: center; transition: border-color 0.2s var(--ease-out); }
.check .box svg { width: 12px; height: 12px; opacity: 0; }
.check .box svg path { stroke: var(--oro); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.check input:checked + .box { border-color: var(--oro); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--oro-scuro); outline-offset: 2px; }
.check a { color: var(--oro-scuro); font-weight: 600; }
/* Form submit row — shared by contatti + account (replaces borrowed .hero-cta) */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
/* Radio pair (sì/no) laid out inline under one group label */
.opt-row { display: flex; gap: 1.5rem; padding: 0.35rem 0 0.2rem; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.check + .check { margin-top: 0.55rem; }
.field legend {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-13); color: var(--antracite); margin-bottom: 0.4rem;
}

/* Lab form controls — no gold inside .lab-scope, red takes over */
.lab-scope .field input:focus, .lab-scope .field textarea:focus, .lab-scope .field select:focus { border-color: var(--rosso-scuro); }
.lab-scope .field input:focus-visible, .lab-scope .field textarea:focus-visible, .lab-scope .field select:focus-visible { outline-color: var(--rosso-scuro); }
.lab-scope .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23C00428' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lab-scope .check .box svg path, .lab-scope .opt .box svg path { stroke: var(--rosso-scuro); }
.lab-scope .check input:checked + .box, .lab-scope .opt input:checked + .box { border-color: var(--rosso-scuro); }
.lab-scope .opt.opt--radio input:checked + .box { background: var(--rosso-scuro); }
.lab-scope .check:hover .box, .lab-scope .opt:hover .box { border-color: var(--rosso-scuro); }
.lab-scope .check input:focus-visible + .box, .lab-scope .opt input:focus-visible + .box { outline-color: var(--rosso-scuro); }
.lab-scope .check a { color: var(--rosso-scuro); }

/* ============================================================
   MISSION / VISION — two facing notch panels >=1000px
   ============================================================ */
.mv-panels { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1000px) { .mv-panels { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.mv-panel { background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; }
.mv-panel h3 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero); }
.mv-panel .hairline { width: 56px; }
.mv-panel p { color: var(--antracite); }

/* ============================================================
   MODUL LIST — numbered course modules, two columns, hairlines
   ============================================================ */
.modul-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 clamp(2rem, 4vw, 3.5rem); counter-reset: modul; }
@media (min-width: 760px) { .modul-list { grid-template-columns: 1fr 1fr; } }
.modul-item { display: flex; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--grigio-perla); counter-increment: modul; }
.modul-item::before { content: counter(modul, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: var(--t-21); color: var(--oro-scuro); flex: none; min-width: 2.4ch; }
.modul-name { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-17); color: var(--antracite); }
.modul-desc { font-size: var(--t-13); color: var(--grigio-testo); }

/* ============================================================
   LAB SCOPE — Bibendum Lab self-contained world.
   Re-themes ONLY inside: rosso-lab display accents, rosso-scuro
   for small text/links (AA 6.37:1). No gold inside this scope.
   ============================================================ */
.lab-scope .eyebrow { color: var(--rosso-scuro); }          /* small caps label — AA-safe red */
.lab-scope h1, .lab-scope h2 { color: var(--rosso-lab); }  /* display sizes only */
.lab-scope .display { color: var(--rosso-lab); }
.lab-scope .hairline { background: var(--rosso-lab); }
.lab-scope a.textlink { color: var(--rosso-scuro); }
/* Resting bg is rosso-scuro so white 17px caps clear AA (6.38:1); #FC0536
   stays reserved for display-size accents. Hover darkens toward nero. */
.lab-scope .btn-primary { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: var(--bianco); }
.lab-scope .btn-primary:hover { background: #9B0320; border-color: #9B0320; }
.lab-scope .btn-secondary { color: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.lab-scope .btn-secondary:hover { background: var(--rosso-scuro); color: var(--bianco); }
.lab-scope .modul-item::before { color: var(--rosso-scuro); }
.lab-scope .opt input:checked + .box,
.lab-scope .check input:checked + .box { border-color: var(--rosso-lab); }
.lab-scope .opt .box svg path,
.lab-scope .check .box svg path { stroke: var(--rosso-lab); }
.lab-scope .field input:focus, .lab-scope .field textarea:focus, .lab-scope .field select:focus { border-color: var(--rosso-lab); }
/* notch cards keep neutral white/crema inside the Lab scope */
.lab-scope .product-card, .lab-scope .cat-tile-lg, .lab-scope .doc-card, .lab-scope .event-card { background: var(--bianco); }

/* Keyboard focus stays red inside the Lab world — no gold leak (rosso-scuro AA-safe) */
.lab-scope :focus-visible { outline-color: var(--rosso-scuro); }
.lab-scope .opt input:focus-visible + .box,
.lab-scope .check input:focus-visible + .box,
.lab-scope .toggle input:focus-visible + .track { outline-color: var(--rosso-scuro); }
/* Breadcrumb inside the Lab scope on crema/white heads — red, not gold */
.lab-scope .breadcrumb a, .lab-scope .breadcrumb .sep { color: var(--rosso-scuro); }
.lab-scope .breadcrumb a:hover { color: var(--nero); }

/* Keep red (rosso-lab) display headings on a floored scale token so they clear the
   AA-large threshold (>=24px, 3:1) on white/crema. Shared by bibendum-lab + corso. */
.lab-scope .section-head h2,
.lab-scope .tce-text h2 { font-size: max(1.5rem, var(--t-28)); }

/* ============================================================
   FOOTER — cross-site additions (Area riservata, Lab links)
   Lab box is a self-contained surface: no gold, hover stays white.
   ============================================================ */
.footer-col .footer-reserved { margin-top: 0.85rem; }
.footer-lab .lab-label a { color: var(--bianco); }
.footer-lab-links { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.85rem; }
.footer-lab-links a { color: var(--grigio-perla); font-size: var(--t-13); }
.footer-lab a:hover { color: var(--bianco); }

/* ============================================================
   PRODOTTI — CTA split band + catalogue teaser doc-card
   ============================================================ */
.prod-cta-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: center; }
.prod-cta-copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.prod-cta-copy h2 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero); }
.prod-cta-copy p { color: var(--grigio-testo); max-width: 46ch; }
.prod-cta-copy .btn { margin-top: 0.4rem; }
.doc-card--teaser { transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.doc-card--teaser:hover { transform: translateY(-2px); border-color: var(--grigio-testo); box-shadow: 0 14px 30px -18px rgba(8,8,8,0.35); }
.doc-cover--pattern {
  position: relative; aspect-ratio: 16 / 10; background: var(--nero);
  display: grid; place-items: center; gap: 0.75rem; overflow: hidden;
}
.doc-cover--pattern::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-antracite.svg");
  background-repeat: repeat; background-size: 96px; opacity: 0.9; pointer-events: none;
}
.doc-cover--pattern .dc-icon { position: relative; width: 44px; height: auto; }
.doc-cover--pattern .dc-label {
  position: relative; font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--t-13); color: var(--bianco);
}
@media (min-width: 900px) {
  .prod-cta-split { grid-template-columns: 1.15fr 0.85fr; gap: clamp(3rem, 5vw, 4rem); }
}

/* ============================================================
   CATALOGHI — doc-card grid + brand CSS cover + note
   ============================================================ */
.doc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); max-width: 760px; }
@media (min-width: 620px) { .doc-grid { grid-template-columns: 1fr 1fr; } }
.doc-cover--brand {
  position: relative; background: var(--nero);
  display: grid; place-items: center; align-content: center; gap: 0.9rem; overflow: hidden;
}
.doc-cover--brand::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-antracite.svg");
  background-repeat: repeat; background-size: 88px; opacity: 0.9; pointer-events: none;
}
.doc-cover--brand .dc-icon { position: relative; width: 56px; height: auto; }
.doc-cover--brand .dc-label {
  position: relative; font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--t-19); color: var(--bianco);
  text-align: center;
}
.cat-note { margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--oro); max-width: 760px; }
.cat-note p { color: var(--grigio-testo); font-size: var(--t-17); }
.cat-note .textlink { margin-top: 0.75rem; }

/* ============================================================
   EVENTI — event grid + Lab closing band (self-contained red)
   ============================================================ */
.event-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width: 700px) { .event-grid { grid-template-columns: 1fr 1fr; } }
/* Real event photos stay in color (events page only; course cards keep B/N) */
.event-grid .ev-cover img { filter: none; }
/* ============================================================
   CONTATTI — contact column, form card, map placeholder
   ============================================================ */
.contacts-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1000px) {
  .contacts-grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}
.contacts-col { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-card {
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: clamp(1.5rem, 3vw, 2rem);
}
.contact-card .contact-label { margin-bottom: 1rem; }
.contact-lines { font-style: normal; display: flex; flex-direction: column; gap: 0.55rem; }
.contact-lines .line { font-size: var(--t-17); color: var(--antracite); }
.contact-lines .sep { color: var(--oro-scuro); }
.contact-lines a { color: var(--oro-scuro); font-weight: 600; transition: color 0.2s var(--ease-out); }
.contact-lines a:hover { color: var(--nero); }
.lab-scope .contact-lines .sep { color: var(--rosso-scuro); }
.lab-scope .contact-lines a { color: var(--rosso-scuro); }
.lab-scope .contact-lines a:hover { color: var(--nero); }
.social-row { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.25rem; }
.social-line { font-size: var(--t-13); color: var(--grigio-testo); line-height: 1.5; }
.social-line .s-name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--antracite); margin-right: 0.5rem;
}
.social-line a { color: var(--grigio-testo); font-weight: 600; transition: color 0.2s var(--ease-out); }
.social-line a:hover { color: var(--nero); }
.social-line .sep { color: var(--grigio-perla); margin-inline: 0.15rem; }
.form-card {
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: clamp(1.5rem, 3vw, 2rem);
}
.form-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero); margin-bottom: 1.25rem;
}
.form-note { margin-top: 1rem; font-size: var(--t-13); color: var(--grigio-testo); }
.map-band { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.map-panel {
  background: var(--crema); border: 1px solid var(--grigio-perla);
  border-radius: var(--radius-notch); padding: clamp(2rem, 5vw, 3.25rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
}
.map-panel .map-icon { width: 40px; height: 40px; margin: 0; }
.map-panel .map-addr {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-17); color: var(--antracite);
}

/* ============================================================
   ACCOUNT — access area, two notch cards, benefit list
   ============================================================ */
.account-wrap { max-width: 880px; margin-inline: auto; }
.account-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 720px) {
  .account-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
}
.account-card {
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: clamp(1.6rem, 3vw, 2.25rem);
  display: flex; flex-direction: column;
}
.account-card h2 {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero); margin-bottom: 1.25rem;
}
.account-card .forgot { margin-top: 1rem; align-self: flex-start; }
.client-copy { color: var(--antracite); font-size: var(--t-17); margin-bottom: 1.1rem; }
.benefit-list { display: flex; flex-direction: column; margin-bottom: 1.4rem; }
.benefit-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--grigio-perla);
  font-size: var(--t-13); color: var(--antracite); line-height: 1.5;
}
.benefit-list li:first-child { padding-top: 0; }
.benefit-list .icon { width: 18px; height: 18px; color: var(--oro-scuro); flex: none; margin-top: 0.15rem; }
.account-card .btn { margin-top: auto; }
.account-note {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem); text-align: center;
  font-size: var(--t-13); color: var(--grigio-perla); letter-spacing: 0.02em;
}

/* ============================================================
   BIBENDUM LAB — page-local Lab world (no gold inside .lab-scope)
   ============================================================ */
.lab-kicker { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.lab-kicker .eyebrow { margin: 0; }
.lab-kicker .lab-mark { width: 28px; height: 28px; flex: none; }
.lab-values { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 760px) { .lab-values { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.lab-value { display: flex; flex-direction: column; gap: 0.6rem; }
.lab-value .v-rule { border: 0; height: 2px; width: 40px; background: var(--rosso-lab); margin: 0; }
.lab-value h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-19); color: var(--antracite); }
.lab-value p { font-size: var(--t-13); color: var(--grigio-testo); }
.lab-scope .quote-band--nero .qb-rule { background: var(--rosso-lab); }
.lab-scope .quote-band--nero cite { color: var(--grigio-perla); } /* neutral: 13px red is illegal, rosso-scuro fails on nero */
.lab-contacts { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.lab-contacts .lc-lines { font-size: var(--t-17); color: var(--antracite); display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: baseline; }
.lab-contacts .lc-lines .sep { color: var(--rosso-scuro); }
.lab-contacts .lc-lines a { color: var(--rosso-scuro); font-weight: 600; }

/* ============================================================
   CORSO — Lab course template (no gold inside .lab-scope)
   ============================================================ */
.page-meta { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: baseline; font-size: var(--t-13); color: var(--grigio-testo); }
.page-meta .sep { color: var(--rosso-scuro); }
.corso-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2.25rem, 4vw, 3rem); align-items: start; padding-block: var(--section-y); }
@media (min-width: 1000px) { .corso-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2.5rem, 4vw, 4rem); } }
.corso-main { display: flex; flex-direction: column; gap: clamp(2.25rem, 4vw, 3.25rem); }
.corso-block { display: flex; flex-direction: column; }
.corso-block .section-head { margin-bottom: 1.4rem; }
.corso-block p { color: var(--antracite); }
.corso-block p + p { margin-top: 0.85rem; }
.corso-lead { font-family: var(--font-ui); font-size: var(--t-19); color: var(--grigio-testo); max-width: 60ch; }
.prog-group + .prog-group { margin-top: 2rem; }
.prog-group > h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-19); color: var(--rosso-scuro); margin-bottom: 0.4rem; }
.corso-panel { background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch); padding: clamp(1.5rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: 1.15rem; }
@media (min-width: 1000px) { .corso-panel { position: sticky; top: 92px; } }
.corso-panel .cp-label { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-13); color: var(--rosso-scuro); }
.corso-panel .cp-price { font-family: var(--font-display); font-weight: 300; font-size: var(--t-40); line-height: 1; color: var(--nero); letter-spacing: 0.02em; }
.corso-panel .cp-price small { display: block; margin-top: 0.45rem; font-family: var(--font-ui); font-weight: 500; font-size: var(--t-13); letter-spacing: 0; color: var(--grigio-testo); }
.corso-panel .cp-hr { border: 0; height: 1px; background: var(--grigio-perla); margin: 0; }
.cp-sconti { display: flex; flex-direction: column; gap: 0.65rem; }
.cp-sconti li { display: flex; gap: 0.65rem; font-size: var(--t-13); color: var(--antracite); line-height: 1.45; }
.cp-sconti li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; background: var(--rosso-lab); }
.corso-panel .btn { width: 100%; }
.cp-contact { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--t-13); color: var(--grigio-testo); }
.cp-contact a { color: var(--rosso-scuro); font-weight: 600; }
.cp-note { font-size: var(--t-13); color: var(--grigio-testo); }
.related-back { margin-top: 1.9rem; }

/* ============================================================
   LAB SURFACE SYSTEM — the Bibendum Lab as a true sub-brand
   surface, not a bordered box. Red only here; no gold inside.
   ============================================================ */

/* Section-head hairline reads 3px inside the Lab (vs master 1px gold) —
   the "more than a thin line" upgrade at the micro level. */
.lab-scope .section-head .hairline,
.lab-scope .page-head-row .hairline { height: 3px; }

/* .lab-pattern — tessellated red icona on nero, low opacity, masked so
   the text column (left) stays clean. The master antracite-on-nero
   pattern's red answer. Apply to a nero band; give its content wrapper
   position so it paints above the ::before. */
.lab-pattern { position: relative; overflow: hidden; background: var(--nero); }
.lab-pattern::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/icona-mineralbirra-rosso.svg");
  background-repeat: repeat; background-size: 140px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, rgba(0,0,0,0.9) 100%);
  opacity: 0.12; pointer-events: none;
}
.lab-pattern > .wrap { position: relative; z-index: 1; }

/* .lab-firma — red icona corner mark on Lab photos (parallel of gold .firma) */
.lab-firma,
.ev-cover img.lab-firma { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; object-fit: contain; filter: none; margin: 0; z-index: 2; pointer-events: none; transform: none; }
.lab-scope .ev-cover { position: relative; }

/* Lab quote-band: swap the antracite tessellation for the red icona at
   lower opacity (reuses the existing masked ::before). */
.lab-scope .quote-band--nero::before {
  background-image: url("../assets/icona-mineralbirra-rosso.svg");
  opacity: 0.10;
}

/* On dark Lab surfaces the secondary pill reads as a ghost-white pill
   (no gold leak). */
.lab-scope .btn-secondary--on-dark { color: var(--bianco); border-color: rgba(255,255,255,0.55); }
.lab-scope .btn-secondary--on-dark:hover { background: var(--bianco); color: var(--nero); border-color: var(--bianco); }

/* ---- Bibendum Lab hero (real sub-brand hero, replaces page-head) ---- */
/* Nero surface + .lab-pattern (in markup) carry the tessellated red backdrop. */
.lab-hero { color: var(--bianco); }
.lab-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; padding-block: clamp(2.75rem, 6vw, 5rem); max-width: 40ch; }
.lab-hero-mark { width: 80px; height: auto; }
.lab-scope .lab-hero .eyebrow { color: var(--bianco); margin: 0; }
.lab-hero .eyebrow .d { color: var(--bianco); } /* 13px separator stays neutral; #FC0536 is display-size only */
.lab-hero-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.02; font-size: var(--t-72); margin: 0;
}
.lab-scope .lab-hero-title { color: var(--bianco); }
.lab-hero-title .accent { color: var(--rosso-lab); } /* display size — colorway-legal */
.lab-hero-sub { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: var(--t-21); color: var(--grigio-perla); line-height: 1.35; max-width: 34ch; }
.lab-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
/* Breadcrumb reads light-on-dark on the hero */
.lab-scope .lab-hero .breadcrumb, .lab-scope .lab-hero .breadcrumb [aria-current="page"] { color: var(--grigio-perla); }
.lab-scope .lab-hero .breadcrumb a, .lab-scope .lab-hero .breadcrumb .sep { color: var(--grigio-perla); }
.lab-scope .lab-hero .breadcrumb a:hover { color: var(--bianco); }
.lab-scope .lab-hero :focus-visible { outline-color: var(--bianco); }

/* ---- Lab world band (index + eventi world-switch moment) ---- */
/* Nero surface + .lab-pattern (in markup) carry the tessellated red backdrop. */
.lab-world-band { color: var(--bianco); }
.lab-world-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.lab-world-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 46ch; }
.lab-world-mark { width: 56px; height: auto; }
.lab-scope .lab-world-band .eyebrow { color: var(--bianco); margin: 0; }
.lab-world-band .eyebrow .d { color: var(--bianco); } /* 13px separator stays neutral; #FC0536 is display-size only */
.lab-world-title { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.06; font-size: var(--t-40); margin: 0; }
.lab-scope .lab-world-title { color: var(--bianco); }
.lab-world-title .accent { color: var(--rosso-lab); } /* display size — colorway-legal */
.lab-world-text { color: var(--grigio-perla); font-size: var(--t-17); }
.lab-world-photo { display: none; position: relative; margin: 0; border-radius: var(--radius-notch); overflow: hidden; }
.lab-world-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }
@media (min-width: 900px) {
  .lab-world-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .lab-world-photo { display: block; height: 340px; }
}

/* ---- Corso: enrolment panel, filled header strip ---- */
.corso-panel--lab { overflow: hidden; }
.corso-panel--lab .cp-label {
  background: var(--rosso-scuro); color: var(--bianco);
  margin: calc(-1 * clamp(1.5rem, 3vw, 1.9rem)) calc(-1 * clamp(1.5rem, 3vw, 1.9rem)) 0.35rem;
  padding: 0.85rem clamp(1.5rem, 3vw, 1.9rem);
  border-radius: 18px 18px 0 0;
}
.corso-panel--lab .cp-price { color: var(--rosso-lab); } /* display size — colorway-legal */
/* Module group titles → red display treatment (floored ≥24px for AA-large 3:1) */
.lab-scope .prog-group > h3 { font-size: max(1.5rem, var(--t-28)); color: var(--rosso-lab); letter-spacing: 0.08em; }

/* ---- Corso page-head icona (40px beside the eyebrow) ---- */
.lab-kicker--lg .lab-mark { width: 40px; height: 40px; }

/* ---- Contatti: Lab contact card as a rosa-lab surface ---- */
.contact-card--lab { position: relative; background: var(--rosa-lab); }
.contact-card--lab .lab-corner { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; margin: 0; pointer-events: none; }

/* ============================================================
   COCKTAILS — Lab recipe cards, menu-style dose list
   ============================================================ */
.ricetta-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .ricetta-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.ricetta {
  background: var(--bianco); border: var(--border-hair); border-radius: var(--radius-notch);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1.1rem; position: relative;
}
.ricetta-name {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-28); color: var(--nero);
}
.ricetta > .hairline { width: 40px; margin: 0; }
.dose-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.dose-list li { display: flex; align-items: baseline; gap: 0.6ch; font-size: var(--t-17); color: var(--antracite); }
.dose-list .lead { flex: 1; min-width: 1.5ch; border-bottom: 1px dotted var(--grigio-perla); transform: translateY(-0.25em); }
.dose-list .dose { font-weight: 700; color: var(--nero); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ricetta-note { font-family: var(--font-editorial); font-style: italic; font-size: var(--t-19); color: var(--grigio-testo); }
.ricetta .textlink { margin-top: auto; align-self: flex-start; }

/* ============================================================
   ARTICOLO — blog-post "racconto" reading template (master world)
   READ-mode surface: one measured reading column, real photos in
   color, editorial-italic captions, deliberate prev/next nav.
   No gold on text <24px on white — links use oro-scuro.
   ============================================================ */

/* Post-meta line under the H1 on the nero head. Categories are plain
   labels (grigio-perla on nero); interpuncts oro. Master colorway —
   never the Lab red, even though one label reads "Bibendum Lab". */
.post-meta {
  margin-top: 1.1rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.7rem;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--t-13); color: var(--grigio-perla);
}
.post-meta .sep { color: var(--oro); }

/* One reading column, measured for comfortable line length (~68ch). */
.articolo { max-width: 68ch; margin-inline: auto; }
.articolo > * + * { margin-top: 1.5rem; }
.articolo p { color: var(--antracite); }

/* Lead / standfirst — larger than body, master ink (like corso-lead). */
.articolo-lead {
  font-family: var(--font-ui); font-weight: 400;
  font-size: var(--t-21); line-height: 1.5;
  color: var(--antracite);
}
.articolo-cta { margin-top: 1.75rem; }

/* Cover figure — real photo stays in COLOR. Square-cropped so the
   branded barrel (the subject) is protected; notch radius + gold firma. */
.articolo-figure { margin: 0; }
.articolo-figure .af-media {
  position: relative; display: block;
  border-radius: var(--radius-notch); overflow: hidden;
  aspect-ratio: 1 / 1;
}
.articolo-figure .af-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.articolo-figure .af-media .firma {
  position: absolute; right: 14px; bottom: 14px;
  width: 28px; height: 28px; object-fit: contain; margin: 0; z-index: 2;
}

/* Editorial-italic captions — warm, sparing, AA-safe grigio-testo. */
.articolo-figure figcaption,
.ag-fig figcaption {
  margin-top: 0.65rem;
  font-family: var(--font-editorial); font-weight: 500; font-style: italic;
  font-size: var(--t-17); line-height: 1.3; color: var(--grigio-testo);
}

/* Gallery — orientation-aware. Two 4:3 landscapes stack in the left
   column; the tall portrait fills the right column across both rows,
   so a portrait never blows up the grid. Real photos, COLOR. */
.articolo-gallery {
  max-width: min(100%, 820px);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
.ag-fig { margin: 0; }
.ag-fig img { width: 100%; display: block; border-radius: var(--radius-notch); }
@media (min-width: 760px) {
  .articolo-gallery { grid-template-columns: 1fr 1fr; align-items: start; }
  .ag-fig--a { grid-column: 1; grid-row: 1; }
  .ag-fig--b { grid-column: 1; grid-row: 2; }
  .ag-fig--a img, .ag-fig--b img { aspect-ratio: 4 / 3; object-fit: cover; }
  .ag-fig--portrait {
    grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
    display: flex; flex-direction: column;
  }
  .ag-fig--portrait img { flex: 1; min-height: 0; object-fit: cover; object-position: center; }
}

/* Post navigation — deliberate prev/next, notch cards, direction eyebrows.
   Not an icon-card scaffold: two distinct, labelled destinations. */
.post-nav { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
  .post-nav { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  /* Mirror the next card to the right only once the layout is 2-up;
     on stacked mobile it stays left-aligned like its prev sibling. */
  .post-nav-item--next { text-align: right; align-items: flex-end; }
}
.post-nav-item {
  display: flex; flex-direction: column; gap: 0.45rem;
  background: var(--bianco); border: var(--border-hair);
  border-radius: var(--radius-notch); padding: 1.15rem 1.35rem;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.post-nav-item:hover {
  transform: translateY(-2px); border-color: var(--grigio-testo);
  box-shadow: 0 14px 30px -18px rgba(8, 8, 8, 0.3);
}
.post-nav-dir {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--t-13); color: var(--oro-scuro);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.post-nav-title {
  font-family: var(--font-ui); font-weight: 700;
  font-size: var(--t-19); line-height: 1.25; color: var(--antracite);
}

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