/* ==========================================================================
   MacerataCentro — design system
   Concept «Il centro a passo d'uomo»: guida editoriale della città, negozi come tappe.
   Tipografia: Archivo (variabile, larghezza 62–125) per titoli e testo. Mobile-first.
   Tutti i colori del testo sono verificati ≥ 4.5:1 (WCAG AA).
   Nel tema WP: le variabili di :root diventano theme.json (palette, font, spacing).
   ========================================================================== */

:root {
  /* — Palette A «rosso insegna»: rosso vivo delle insegne, nero tipografico, bianco caldo neutro, giallo come secondo accento.
     (Sostituisce mattone + crema il 6/11/2026; le variabili tengono i vecchi nomi: --brick = rosso, --ochre = giallo, --green = fasce scure.) */
  --paper: #faf8f4;          /* fondo principale */
  --paper-2: #f1eee8;        /* fasce alternate */
  --surface: #fefdfb;        /* superfici chiare */
  --ink: #141414;            /* testo */
  --ink-2: #474542;          /* testo secondario */
  --rule: #dcd8d0;           /* filetti */
  --brick: #c41e2e;          /* rosso insegna: pulsanti, titoletti, accenti */
  --brick-deep: #9c1622;
  --green: #1c1c1c;          /* fasce scure (Macerata adesso, Come arrivare) */
  --green-ink: #f2f1ee;
  --ochre: #f2c230;          /* giallo: secondo accento, solo su fondi scuri */
  --shuttle: #22603f;        /* navetta (segnaposto e legenda) */
  --blue: #1d3e70;           /* parcheggi */
  --open: #2b6b43;           /* «aperto» */
  --todo-bg: #ffe28a;
  --todo-ink: #3d2f00;
  --focus: #1d3e70;

  /* — Tipografia — */
  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);   /* 17 → 19px */
  --fs-small: .9375rem;
  --fs-micro: .8125rem;
  --fs-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
  --fs-h1: clamp(3rem, 1.8rem + 6.2vw, 8rem);

  /* — Spaziatura (base 8) — */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem;
  --section: clamp(4rem, 2.5rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, .5rem + 3vw, 4rem);
  --content: 1450px;         /* larghezza del contenuto, da filo a filo (logo → lingue) */
  --maxw: calc(var(--content) + 2 * var(--gutter));   /* .wrap = contenuto + margini interni */
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));   /* dove inizia il contenuto centrato */
  --title-x: max(var(--gutter), calc((100vw - var(--maxw)) / 4 + var(--gutter)));  /* titolo della hero: metà del margine */
  --radius: 2px;             /* spigoli quasi vivi: scelta voluta */
  --tap: 48px;
  --header-h: 76px;
  --ribbon-h: 44px;          /* avviso navetta sotto l'header */
  --quickbar-h: 66px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--f-text);
  padding-bottom: calc(var(--quickbar-h) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--brick); color: #fff; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; font-stretch: 92%; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
p { margin: 0 0 1em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 1000; background: var(--ink); color: #fff; padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.todo { background: var(--todo-bg); color: var(--todo-ink); padding: 0 .3em; font-size: .85em; font-weight: 600; }

/* ---------- Tipografia editoriale ---------- */
.kicker { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-2); display: flex; gap: .75em; align-items: center; }
.kicker::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
/* sopra un titolo grande la scritta piccola respira: più in alto, non attaccata (6/11, su tutto il sito) */
.kicker:has(+ :is(h1, .display, .h2)) { margin-bottom: 1.6rem; }
.kicker:has(+ .block-title) { margin-bottom: 1.15rem; }
.kicker:has(+ :is(h2, .h2, .block-title)) { color: var(--ink-2); }   /* sopra i titoli di sezione grigia; rossa solo in apertura di pagina (6/11) */
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 38ch; }
.display { font-size: var(--fs-h1); line-height: 1; font-weight: 650; font-stretch: 88%; letter-spacing: -.04em; }
.h2 { letter-spacing: -.035em; font-stretch: 90%; }
.h2 { font-size: var(--fs-h2); line-height: .98; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; }
.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem); margin: 2.2em 0 .6em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: var(--fs-h3); margin: 1.8em 0 .5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--brick-deep); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--brick); }
/* tabelle nei testi (6/11): riquadro bianco arrotondato come «In breve»; intestazioni piccole su fondo carta.
   Sul telefono le tabelle a più colonne diventano schede, una per riga, con l'intestazione accanto a ogni valore. */
.table-scroll { margin: 0 0 1.75em; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: #fff; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: .95rem 1.1rem; vertical-align: top; }
.prose tbody tr + tr :is(th, td) { border-top: 1px solid var(--rule); }
.prose thead th { background: var(--paper); font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.prose .dtable td:first-child { font-weight: 650; }
.prose .kvtable th { width: 32%; background: var(--paper); font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 1.1rem; }
@media (max-width: 699px) {
  .table-scroll:has(.dtable) { border: 0; border-radius: 0; background: none; overflow: visible; }
  .prose .dtable thead { display: none; }   /* le intestazioni sono ripetute in ogni scheda (data-label) */
  .prose .dtable, .prose .dtable tbody, .prose .dtable tr, .prose .dtable td { display: block; width: auto; }
  .prose .dtable tr { margin-bottom: .75rem; border: 1px solid var(--rule); border-radius: 16px; background: #fff; overflow: hidden; }
  .prose .dtable tbody tr + tr td { border-top: 0; }
  .prose .dtable td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; padding: .7rem 1rem; }
  .prose .dtable td + td { border-top: 1px solid var(--rule); }
  .prose .dtable td::before { content: attr(data-label); font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: .2rem; }
  .prose .dtable td:first-child { display: block; background: var(--paper); font-size: 1.0625rem; }
  .prose .dtable td:first-child::before { display: none; }
  .prose .kvtable th, .prose .kvtable td { display: block; width: auto; }
  .prose .kvtable th { padding-bottom: .3rem; }
  .prose .kvtable td { padding-top: .3rem; border-top: 0 !important; }
}
.dropcap > p:first-child::first-letter { float: left; font: 500 4.4em/.8 var(--f-display); margin: .08em .1em 0 0; color: var(--brick); }

/* ---------- Pulsanti e link ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.5rem; padding: 0 1.6em;
  font: 650 1.0625rem/1 var(--f-text); text-decoration: none; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn--solid:hover { background: var(--brick-deep); border-color: var(--brick-deep); color: #fff; }
.btn--light { border-color: var(--green-ink); color: var(--green-ink); }
.btn--light:hover { background: var(--green-ink); color: var(--green); }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn--ghost { background: var(--paper); border-color: rgba(20, 20, 20, .22); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn .ic { width: 1.4em; height: 1.4em; }
.btn--go { padding-right: .4rem; gap: 1.2rem; }
.btn--go::after { content: ""; width: 2.7rem; height: 2.7rem; border-radius: 50%; flex: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c41e2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.05rem no-repeat; transition: transform .35s var(--ease); }
.btn--go:hover::after { transform: translateX(3px); }
.btn--chip { padding-right: .4rem; gap: 1.2rem; }
.btn__chip { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #fff; color: var(--brick); display: grid; place-items: center; flex: none; }
.btn__chip .ic { width: 1.55rem; height: 1.55rem; stroke-width: 1.9; transition: transform .35s var(--ease); }
.btn--chip:hover .btn__chip .ic { transform: translateX(3px); }
.arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }   /* «il passo»: il filetto compare solo al passaggio */
.arrow:is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% 1px; }
.arrow::after { content: "→"; transition: transform .25s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }

/* ---------- Link: «il passo» ----------
   Nessuna riga fissa: al passaggio un filetto entra da sinistra ed esce verso destra (link isolati, nomi dei negozi,
   link nei testi in semigrassetto, link con la freccia). */
a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .25s, text-underline-offset .25s var(--ease), color .2s; }
a:hover { text-decoration-color: var(--brick); text-underline-offset: .14em; }
:is(.on-dark, .season, .now) a:hover { text-decoration-color: #fff; }
:is(.ft__grid ul a, .ft__bottom a, .sheet__sub a, .crumbs a, .ribbon a, .now__facts a, .ft__now ul a) {
  --line-y: 100%;
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% var(--line-y) / 0 1px no-repeat; transition: background-size .45s var(--ease), color .2s; }
:is(.ft__grid ul a, .ft__bottom a, .sheet__sub a, .crumbs a, .ribbon a, .now__facts a, .ft__now ul a):is(:hover, :focus-visible) { background-position: 0 var(--line-y); background-size: 100% 1px; }
.ft__grid ul a, .sheet__sub a { --line-y: calc(50% + .72em); }   /* righe alte 40–44 px: il filetto sta sotto il testo, non in fondo alla riga */
/* link dentro i testi (solo nel contenuto della pagina): nessuna riga fissa, semigrassetto per riconoscerli,
   al passaggio «il passo». Menu e indici (nav) hanno il loro effetto. */
main :is(p, li, dd, td, figcaption) a:not([class], nav a) {
  font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .2s; }
main :is(p, li, dd, td, figcaption) a:not([class], nav a):is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% 1px; }
/* nomi dei negozi (footer, menu, schede della passeggiata): il filetto passa sotto il nome */
:is(.ft__shop b, .sheet__shop b, .stop__name a) { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease); }
:is(.ft__walk a:hover .ft__shop b, .sheet__route a:hover .sheet__shop b, .ft__walk a:focus-visible .ft__shop b, .sheet__route a:focus-visible .sheet__shop b, .stop__name a:hover, .stop__name a:focus-visible) { background-position: 0 100%; background-size: 100% 1.5px; }
.ft__shop b, .sheet__shop b { justify-self: start; }

/* ---------- Cursore «la freccia» (solo mouse e trackpad; lo accende app.js al primo movimento) ----------
   Punta di navigazione mattone con bordo bianco (la stessa forma dell'icona «Portami qui»), esattamente sotto il puntatore.
   Link e pulsanti: si inverte (bianca, bordo mattone), si ingrandisce e si inclina. [data-cursor]: la freccia si ritira e si apre
   un cerchio con una parola (es. «scorri»). Campi di testo e mappe: cursore normale. */
html.has-cursor, html.has-cursor body *:not(input, textarea, select, [contenteditable], .leaflet-container, .leaflet-container *) { cursor: none !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
html.has-cursor .cur { opacity: 1; }
html.cur-native .cur, html.cur-out .cur { opacity: 0; }
.cur__arrow { position: absolute; left: -3px; top: -3px; width: 28px; height: 28px; max-width: none; overflow: visible; transform-origin: 3px 3px;
  filter: drop-shadow(0 2px 3px rgba(20, 20, 20, .28)); transition: transform .35s var(--ease), opacity .2s; }
.cur__arrow path { fill: var(--brick); stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
html.cur-link .cur__arrow { transform: scale(1.18) rotate(-12deg); }
html.cur-link .cur__arrow path { fill: #fff; stroke: var(--brick); stroke-width: 2.4; }   /* sui link si inverte: bianca con bordo mattone */
html.cur-down .cur__arrow { transform: scale(.88); }
html.cur-link.cur-down .cur__arrow { transform: scale(1.05) rotate(-12deg); }
html.cur-label .cur__arrow { transform: scale(0); opacity: 0; }
/* cerchio con la parola: segue con un leggero ritardo e si apre dalla punta */
.cur__c { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--brick); transform: scale(0); transition: transform .45s var(--ease), background-color .3s; }
.cur__label { position: absolute; transform: translate(-50%, -50%); font: 700 .75rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .2s; }
html.cur-label .cur__c { transform: scale(1); }
html.cur-label .cur__label { opacity: 1; transition-delay: .12s; }
html.cur-dark.cur-label .cur__c { background: #fff; }
html.cur-dark.cur-label .cur__label { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .cur__arrow, .cur__c { transition: none; } }

/* ---------- Header ---------- */
.hd { position: sticky; top: 0; z-index: 700; background: rgba(250, 248, 244, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: baseline; gap: .26em; text-decoration: none; color: var(--ink); line-height: 1; }
.logo b { font: 750 clamp(1.55rem, 1.25rem + .9vw, 2.2rem)/1 var(--f-display); font-stretch: 90%; letter-spacing: -.035em; }
.logo span { font: 400 clamp(1.55rem, 1.25rem + .9vw, 2.2rem)/1 var(--f-display); font-stretch: 90%; letter-spacing: -.03em; color: var(--brick); }
@media (max-width: 359px) { .logo b, .logo span { font-size: 1.3rem; } }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.75rem, 2vw, 2rem); }
.nav a { font-weight: 600; font-size: clamp(1.0625rem, .9rem + .35vw, 1.25rem); text-decoration: none; padding: .5rem 0; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { background-position: 0 100%; background-size: 100% 1px; }
.nav a[aria-current="page"] { color: var(--brick); }
.hd__tools { display: flex; align-items: center; gap: .5rem; }
/* meteo di adesso, fra il menu e le lingue (porta a «Macerata adesso» sulla home) */
.hdwx { display: none; align-items: center; gap: .35rem; min-height: var(--tap); padding: 0 .5rem; border-radius: 999px; text-decoration: none; color: var(--ink);
  font: 650 1.125rem/1 var(--f-text); transition: background .2s, color .3s; }
.hdwx:not([hidden]) { display: inline-flex; }
.hdwx svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hdwx:hover { background: rgba(20, 20, 20, .06); }
.hd.is-menu .hdwx { color: var(--ink); }
@media (max-width: 599px) { .hdwx:not([hidden]) { display: none; } }
@media (min-width: 960px) { .hd__tools { gap: .9rem; } }
@media (max-width: 359px) { .hdwx:not([hidden]) { display: none; } .hd__tools { gap: .3rem; } }   /* telefoni piccolissimi (320 px): il meteo resta in home, l'intestazione non esce dallo schermo */
/* lingue: selettore a pillola con bandiere tonde */
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255, 255, 255, .45); font: 650 .875rem/1 var(--f-text); letter-spacing: .06em; }
.lang a { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: 0 .85rem 0 .45rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); transition: background .2s, color .2s; }
.lang a:hover { color: var(--ink); background: rgba(20, 20, 20, .06); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.flagdot { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.flagdot .flag { width: 100%; height: 100%; box-shadow: none; }
@media (max-width: 599px) { .lang__code { display: none; } .lang a { padding: 0 .45rem; } }
/* burger: due barre che diventano una X */
.burger { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: color .3s; }
.burger__bars { position: relative; width: 28px; height: 14px; }
.burger__bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger__bars i:first-child { top: 0; }
.burger__bars i:last-child { top: 12px; }
.burger[aria-expanded="true"] .burger__bars i:first-child { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child { top: 6px; transform: rotate(-45deg); }

/* header quando il menu è aperto: passa al nero e resta sopra la serranda */
.hd { transition: background-color .35s, border-color .35s, box-shadow .3s; }
/* ombra leggera quando si scorre (stessa delle barre ferme). Se sotto il menu c'è già una barra ferma
   (filtri della pagina Negozi, sottomenu della scheda) l'ombra la prende solo quella. */
.hd.is-scrolled { box-shadow: 0 10px 22px -20px rgba(20, 20, 20, .22); }
body:has(.toolbar.is-stuck, .subnav.is-stuck) .hd.is-scrolled, .hd.is-menu { box-shadow: none; }
.subnav { transition: box-shadow .3s; }
.subnav.is-stuck { box-shadow: 0 10px 22px -20px rgba(20, 20, 20, .22); }
/* pagina Mappa (desktop): titolo e legenda restano fermi, l'elenco scorre sotto */
.mappage__head { position: relative; z-index: 2; transition: box-shadow .3s; }
.mappage__head.is-scrolled { box-shadow: 0 10px 22px -20px rgba(20, 20, 20, .22); }
.hd.is-menu { background: var(--paper); border-bottom-color: var(--rule); }   /* menu aperto chiaro, come il sito (6/11; prima nero) */
.hd.is-menu .logo b, .hd.is-menu .burger { color: var(--ink); }
.hd.is-menu .logo span { color: var(--brick); }
.hd.is-menu .lang { border-color: var(--rule); background: #fff; }
.hd.is-menu .lang a { color: var(--ink-2); }
.hd.is-menu .lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.hd.is-menu :focus-visible { outline-color: var(--ink); }

/* menu mobile «a serranda»: scende dall'alto sopra la pagina, sotto l'header.
   È fuori dall'header di proposito: il backdrop-filter dell'header bloccherebbe il position: fixed. */
.sheet { position: fixed; inset: 0; z-index: 690; display: flex; flex-direction: column; padding-top: var(--header-h);
  background: var(--paper); color: var(--ink); visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease), visibility 0s linear .55s; }
.sheet.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s var(--ease), visibility 0s; }
.sheet ul, .sheet ol { list-style: none; margin: 0; padding: 0; }
.sheet a { text-decoration: none; }
.sheet :focus-visible { outline-color: var(--ink); }
.sheet__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sheet__in { display: grid; gap: var(--s-5); padding-block: var(--s-3) var(--s-5); }
/* le voci entrano una dopo l'altra, appena la serranda è scesa */
.sheet__nav > ul > li, .sheet__walk { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s var(--ease); }
.sheet.is-open .sheet__nav > ul > li, .sheet.is-open .sheet__walk { opacity: 1; transform: none; transition: opacity .5s calc(.18s + var(--i) * 55ms), transform .6s var(--ease) calc(.18s + var(--i) * 55ms); }

/* voci principali: grandi, una per riga, freccia al passaggio */
.sheet__nav > ul > li { border-bottom: 1px solid var(--rule); }
.sheet__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; font: 600 clamp(2.1rem, 1.3rem + 4.6vw, 3.25rem)/1 var(--f-display); font-stretch: 92%; letter-spacing: -.025em; }
.sheet__link::after { content: "→"; font-size: .6em; font-weight: 400; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .3s var(--ease); }
.sheet__link:hover::after, .sheet__link:focus-visible::after, .sheet__link[aria-current="page"]::after { opacity: 1; transform: none; }
.sheet__link[aria-current="page"] { color: var(--brick); }
.sheet__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; padding: 0 0 1rem; }
.sheet__sub a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.25; }
.sheet__sub a:hover, .sheet__sub a[aria-current="page"] { color: var(--ink); }

/* la passeggiata: le 8 tappe sul filo rosso del percorso, con lo stato in tempo reale */
.sheet__kicker { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--rule);
  font: 650 var(--fs-small)/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--brick); }
.sheet__kicker span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.sheet__route { position: relative; }
.sheet__route::before { content: ""; position: absolute; left: 16px; top: 28px; bottom: 28px; width: 2px; background: var(--brick); }
.sheet__route a { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 1rem; align-items: center; padding: .55rem 0; }
.sheet__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); border: 1.5px solid #8a8885; font: 700 .8125rem/1 var(--f-text); color: var(--paper); transition: background .2s, border-color .2s; }
.sheet__route a:hover .sheet__n, .sheet__route a:focus-visible .sheet__n, .sheet__route a[aria-current="page"] .sheet__n { background: var(--brick); border-color: var(--brick); }
.sheet__shop { display: grid; gap: .2rem; }
.sheet__shop b { font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.sheet .state { color: var(--ink-2); font-size: .9375rem; }
.sheet .state.is-open { color: var(--open); }
.sheet .state.is-open::before { background: var(--open); box-shadow: 0 0 0 4px rgba(43, 107, 67, .15); }

/* navetta: sempre visibile in fondo alla serranda (gli ascensori sono chiusi) */
.sheet__shuttle { flex: none; display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--brick); color: #fff; font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }   /* come l'avviso navetta in alto */
.sheet__shuttle .ic { width: 1.5rem; height: 1.5rem; }
.sheet__go { margin-left: auto; white-space: nowrap; font-weight: 700; }
.sheet__shuttle:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

/* tablet: voci a sinistra, passeggiata a destra */
@media (min-width: 640px) {
  .sheet__in { grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: start; padding-top: var(--s-4); }
  /* il filetto sotto «La passeggiata» è alla stessa altezza di quello sotto la prima voce */
  .sheet__kicker { align-items: flex-end; align-content: flex-end; min-height: calc(1.7rem + clamp(2.1rem, 1.3rem + 4.6vw, 3.25rem) + 1px); padding-bottom: .85rem; }
}
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.is-open, .sheet__nav > ul > li, .sheet__walk, .burger__bars i { transition: none !important; }
}
@media (min-width: 960px) { .nav { display: block; } .burger, .sheet { display: none !important; } }

/* avviso temporaneo */
.ribbon { position: relative; z-index: 2; background: var(--brick); color: #fff; font-size: var(--fs-small); }   /* rosso dei pulsanti (6/11; prima giallo chiaro) */
.ribbon .ic { color: #fff; }
.ribbon strong, .ribbon a { color: #fff; }
.ribbon a:focus-visible { outline-color: #fff; }
.ribbon__short { display: none; }
@media (max-width: 599px) { .ribbon__long { display: none; } .ribbon__short { display: inline; } .ribbon .wrap { padding-block: .55rem; } }
.ribbon .wrap { display: flex; gap: .75rem; align-items: center; padding-block: .6rem; }
.ribbon a { font-weight: 700; white-space: nowrap; margin-left: auto; }

/* breadcrumb */
.crumbs { font-size: var(--fs-micro); color: var(--ink-2); padding-top: var(--s-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rule); }

/* ---------- Stato aperto/chiuso ---------- */
.state { display: inline-flex; align-items: center; gap: .6em; font: 600 var(--fs-micro)/1.2 var(--f-text); color: var(--ink-2); }
.state::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: #9a9792; flex: none; }
.state.is-open { color: var(--open); }
.state.is-open::before { background: var(--open); box-shadow: 0 0 0 4px rgba(43, 107, 67, .22); }
.on-dark .state { color: #d4d2ce; }
.on-dark .state.is-open { color: #a6dcb4; }
.on-dark .state.is-open::before { background: #a6dcb4; }

/* ==========================================================================
   HOME
   ========================================================================== */
/* hero: pianta del centro in bianco e nero (OpenStreetMap) con il percorso degli 8 negozi.
   Mobile: titolo → pianta → «Macerata adesso». Desktop: la pianta è lo sfondo, il titolo a sinistra, la barra in basso. */
.hero { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }
.hero__inner { order: 1; position: relative; z-index: 2; padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--s-3); }
.hero__map-wrap { order: 2; position: relative; border-block: 1px solid var(--rule); }
.hero__now { order: 3; position: relative; z-index: 3; padding-block: var(--s-3) var(--s-4); }
.hero .display { max-width: 12.5ch; text-wrap: balance; }
.hero .display .hl { color: var(--brick); }   /* «8 negozi» nel rosso dei pulsanti */
@media (max-width: 599px) { .hero .display { max-width: none; text-wrap: pretty; font-size: clamp(2.6rem, 11.5vw, 3.4rem); line-height: .98; } }   /* telefono: titolo un po' più piccolo, su tutta la larghezza */
@media (max-width: 599px) {   /* telefono: i pulsanti affiancati vanno uno sotto l'altro, tutti larghi uguali (6/11) */
  .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .btn-row .btn { width: 100%; }
  .btn-row .btn--chip, .btn-row .btn--go { justify-content: space-between; padding-left: 1.6em; padding-right: .4rem; }   /* testo a sinistra, cerchio con la freccia sul bordo destro */
  .btn-row .btn { justify-content: flex-start; padding-left: 1.6em; }   /* tutti i testi partono dallo stesso punto */
  .btn-row .btn--chip, .btn-row .btn--go { justify-content: space-between; }
}
.br-lg { display: none; }
.hero .lead { margin-top: var(--s-3); margin-bottom: var(--s-4); }
.hero__map { display: block; width: 100%; height: auto; }
.hero__map--wide { display: none; }
.hero__map--narrow { aspect-ratio: 47 / 40; }
.route-line { fill: none; stroke: var(--brick); stroke-linecap: round; stroke-linejoin: round; }
.route-ghost { fill: none; stroke: var(--paper); stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.route-tick { stroke: var(--ink); stroke-width: 1.4px; }
.route-anchor { fill: var(--ink); }
.route-dot circle { fill: var(--ink); stroke: var(--paper); stroke-width: 3.5px; transition: fill .2s; }
.route-dot text { fill: #fff; font-family: var(--f-text); font-weight: 700; text-anchor: middle; pointer-events: none; }
.route-dot:hover circle, .route-dot:focus circle { fill: var(--brick); }
.route-dot:focus { outline: none; }
.route-dot:focus-visible circle { stroke: var(--focus); stroke-width: 4px; }
.hm-mark circle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.6px; }
.hm-mark text { fill: var(--ink-2); font-family: var(--f-text); font-weight: 700; text-anchor: middle; }
.hm-label { fill: var(--ink-2); font-family: var(--f-text); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-anchor: middle;
  paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.hero__legend { position: absolute; right: var(--gutter); top: var(--s-2); z-index: 2; display: flex; align-items: center; gap: .9rem; padding: .7rem 1.1rem .7rem .8rem;
  background: #fff; border: 1px solid rgba(20, 20, 20, .1); border-radius: 16px; box-shadow: 0 12px 32px -18px rgba(20, 20, 20, .22); }   /* riquadro bianco, si stacca dalla pianta */
.hero__legend p { margin: 0; }
.hero__legend-ico { width: 46px; height: 27px; flex: none; }
.hero__legend-ico path { fill: none; stroke: var(--brick); stroke-width: 3.2; stroke-linecap: round; }
.hero__legend-ico circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.hero__legend-k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); margin-bottom: .25rem !important; }
.hero__legend-v { font-size: var(--fs-small); color: var(--ink-2); display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.hero__legend-v b { font: 650 1.45rem/1 var(--f-display); font-stretch: 88%; letter-spacing: -.02em; color: var(--ink); }
.hero__legend-v i { width: 1px; height: 1.1rem; background: var(--rule); margin: 0 .45rem; align-self: center; }
@media (min-width: 1024px) { .hero__legend { padding: .9rem 1.4rem .9rem 1rem; gap: 1.1rem; } .hero__legend-ico { width: 56px; height: 32px; } .hero__legend-v b { font-size: 1.9rem; } }
.hero__credits { margin: .6rem 0 0; font-size: .75rem; color: var(--ink-2); }
@media (min-width: 1024px) {
  .hero { min-height: max(640px, calc(100svh - var(--header-h) - 44px)); }
  .hero__map-wrap { position: absolute; inset: 0; border: 0; }
  .hero__map-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--paper) 0, var(--paper) calc(var(--title-x) + var(--title-w, 600px) - 80px), rgba(250, 248, 244, .86) calc(var(--title-x) + var(--title-w, 600px) - 20px), rgba(250, 248, 244, 0) calc(var(--title-x) + var(--title-w, 600px) + 50px)); }
  .hero__map--wide { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__map--narrow { display: none; }
  .hero__legend { top: var(--s-4); z-index: 2; }
  .hero__inner { flex: 1; display: flex; align-items: center; padding-block: var(--s-5); }
  .hero > .hero__inner { max-width: none; padding-left: var(--title-x); }
  .hero__title { width: fit-content; max-width: 100%; }
  .hero .display { max-width: none; font-size: clamp(3.8rem, 1.6rem + 4vw, 6.4rem); }
  .br-lg { display: inline; }
  .hero__now { padding-block: 0 var(--s-3); }
}

/* «Macerata adesso»: barra compatta, angoli arrotondati */
/* «Macerata adesso»: modulo meteo, blu del cielo di sera con accenti gialli (sole) */
.now { --sky: #16365f; background: linear-gradient(135deg, #1b4174 0%, var(--sky) 55%, #112b4d 100%); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 18px; overflow: hidden; }
.now__cell { margin: 0; padding: var(--s-3); }
.now__fc, .now__facts { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .14); }
.now__label { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 .4rem; }   /* bianco (6/11; prima giallo) */
.now__clock { font: 650 2.9rem/1 var(--f-display); font-stretch: 88%; letter-spacing: -.03em; margin: 0; }
.now__date { font-size: var(--fs-small); color: #c9d6e6; text-transform: capitalize; margin: .35rem 0 0; }
.wx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1rem; align-items: center; height: 100%; }
.wx__icon { grid-row: 1 / span 2; width: 60px; height: 60px; stroke: #fff; stroke-width: 1.3; fill: none; }
.wx__temp { font: 650 2.5rem/1 var(--f-display); letter-spacing: -.02em; }
.wx__desc { font-size: var(--fs-small); color: #c9d6e6; line-height: 1.35; }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.wx-days li { font-size: 1.125rem; color: #c9d6e6; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; align-items: center; }
.wx-days li br { display: none; }
.wx-days b { grid-column: 1 / -1; font-weight: 650; text-transform: capitalize; color: #fff; font-size: 1.125rem; margin-bottom: .3rem; }
.wx-days svg { grid-row: 2 / span 2; width: 52px; height: 52px; stroke: #fff; stroke-width: 1.25; fill: none; }
.wx-days .num:first-of-type { color: #fff; font-weight: 600; }
.now__facts { list-style: none; display: grid; gap: .55rem; font-size: 1rem; }
.now__facts li { display: flex; gap: .7rem; align-items: center; }
.now__facts .ic { color: #fff; width: 1.45rem; height: 1.45rem; }
.now__facts a { color: #fff; }
.now__src { font-size: .8rem; color: #a9c4e4; margin: 0; }
@media (min-width: 1024px) {
  .now { grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.2fr); align-items: stretch; }
  .now__cell { padding: 1.3rem 1.75rem; }
  .now__fc, .now__facts { grid-column: auto; border-top: 0; }
  .now__cell + .now__cell { border-left: 1px solid rgba(255, 255, 255, .14); }
  .now__facts { align-content: center; }
}

/* la passeggiata: schede delle 8 tappe. Su desktop scorrono in orizzontale (sezione ferma, vedi app.js).
   Sfondo: grigio pietra chiaro, lo stesso del footer (variabile --walk-bg). */
.walk { --walk-bg: #eeebe5; background: var(--walk-bg); color: var(--ink); padding: var(--section) 0; overflow: hidden; }
/* sullo sfondo, la piazza nel 1895 (xilografia, pubblico dominio): seppiata, appena percettibile, sfumata ai bordi */
.walk { position: relative; isolation: isolate; }
.walk__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 35%, transparent 100%); }
.walk__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) sepia(.12) contrast(1.05); opacity: .09; mix-blend-mode: multiply; }   /* sul sabbia si vede di più: un filo più tenue */
.walk__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.walk__head p { color: #474542; max-width: 46ch; margin: 0; }
.walk__head p strong { color: var(--ink); font-weight: 650; }
@media (min-width: 1024px) { .walk__head { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.walk__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.stop__card { display: flex; flex-direction: column; height: 100%; background: #fefdfb; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 rgba(20, 20, 20, .05), 0 24px 48px -30px rgba(20, 20, 20, .45); }
.stop__media { position: relative; display: block; text-decoration: none; aspect-ratio: 16 / 9; overflow: hidden; background: #f1eee9; }
.stop__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.stop__card:hover .stop__media img { transform: scale(1.04); }
.walk .stop__media .ph { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(20, 20, 20, .035) 14px 15px), #f1eee9; }
.walk .stop__media .ph__mono { color: var(--brick); opacity: .55; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.8rem); font-weight: 600; }
.stop__n { position: absolute; left: 1rem; top: 1rem; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 1.05rem/1 var(--f-text); }
.stop__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.6rem 1.5rem; flex: 1; }
.stop__cat { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin: 0 0 .6rem; }   /* aria fra categoria e nome */
.stop__name { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); margin: 0; }
.stop__name a { text-decoration: none; }
.stop__name a:hover { color: var(--ink); }
.stop__hook { color: var(--ink-2); font-size: var(--fs-small); margin: .45rem 0 .5rem; }
/* dove si trova */
.stop__where { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .95rem; align-items: center; margin-top: .6rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: #f5f3ee; }
.stop__where > .ic { width: 2rem; height: 2rem; color: var(--brick); grid-row: span 2; stroke-width: 1.6; }
.stop__where p { margin: 0; display: grid; line-height: 1.25; }
.stop__where b { font: 650 1.3rem/1.15 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; }
.stop__where span { font-size: .95rem; color: var(--ink-2); }
.stop__where .state { grid-column: 2; font-size: .92rem; margin-top: .4rem; }
/* come arrivare */
.stop__k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 1.2rem 0 .3rem; }
.stop__reach { list-style: none; margin: 0; padding: 0; }
.stop__reach li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.stop__reach .ic { width: 1.75rem; height: 1.75rem; color: var(--brick); stroke-width: 1.6; }
.stop__reach b { font: 650 1.35rem/1 var(--f-display); font-stretch: 90%; }
.stop__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.4rem; }
.stop__cta .btn { min-height: 3rem; font-size: 1rem; padding-inline: 1.2em; }
/* quanto manca alla prossima tappa */
/* telefono e tablet (6/11): le tappe scorrono in orizzontale col dito, come la fila «Qui vicino»; la scheda dopo si intravede */
@media (max-width: 1023px) {
  .walk__track { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) 2rem; scroll-padding-inline: var(--gutter); }
  .walk__track::-webkit-scrollbar { display: none; }
  .walk__track > .stop { flex: 0 0 82vw; max-width: 380px; scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .walk--h { padding: var(--s-5) 0 var(--s-4); min-height: 100vh; display: flex; align-items: center; }
  .walk--h > .wrap { width: 100%; }
  .walk--h .walk__head { margin-bottom: var(--s-4); }
  .walk--h .walk__head .h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); }
  .walk--h .walk__track { display: flex; gap: var(--s-5); width: max-content; padding-right: 0; align-items: stretch; }
  .walk--h .stop { width: clamp(350px, 26vw, 420px); }
  /* la sezione ferma deve stare in uno schermo da 1440×860: schede più compatte */
  .walk--h { padding: calc(var(--header-h) + .5rem) 0 1rem; }
  .walk--h .walk__head { margin-bottom: var(--s-3); }
  .walk--h .walk__head .h2 { font-size: clamp(1.9rem, 1.1rem + 1.8vw, 2.9rem); }
  .walk--h .stop__media { aspect-ratio: 2 / 1; }
  .walk--h .stop__body { padding: 1.4rem 1.6rem 1.45rem; gap: .45rem; }
  .walk--h .stop__where { padding: .95rem 1.15rem; }
  .walk--h .stop__k { margin-top: 1rem; }
  .walk--h .stop__reach li { padding: .6rem 0; }
  .walk--h .stop__cta { padding-top: 1.15rem; }
}

/* fascia arrivare */
.arrive { padding: var(--section) 0; }
.section-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.section-head p { margin: 0; color: var(--ink-2); max-width: 46ch; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.arrive__grid { display: grid; border-top: 1px solid var(--ink); }
.fact { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: .6rem; }
.fact .arrow { margin-top: auto; }   /* i collegamenti in basso, tutti alla stessa altezza */
.fact__link, .fact__link:is(:hover, :focus-visible) { gap: .75rem; padding-bottom: .55rem; background: none; }   /* qui niente filetto: si colora l'icona nel cerchio */
.fact__ic { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: #f6dfe1; color: var(--brick); transition: background .25s, color .25s; }
.fact__ic .ic { width: 1.35rem; height: 1.35rem; stroke-width: 1.7; }
.fact__link:hover .fact__ic { background: var(--brick); color: #fff; }
.fact p { margin-bottom: .6rem !important; }
.fact__big { font: 500 clamp(2.75rem, 2rem + 3vw, 4.5rem)/.95 var(--f-display); letter-spacing: -.03em; }
.fact__title { font-weight: 600; }
.fact p { color: var(--ink-2); margin: 0; max-width: 34ch; }
@media (min-width: 900px) { .arrive__grid { grid-template-columns: repeat(3, 1fr); } .fact { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 0; } .fact + .fact { border-left: 1px solid var(--rule); padding-left: var(--s-4); } }

/* indice numerato (da vedere, guida) */
.sights { background: var(--paper-2); padding: var(--section) 0; }
/* Macerata da vedere: foto a tutto schermo (Wikimedia Commons, con didascalia e licenza) e la scheda sopra.
   Con JS: una alla volta, girano da sole partendo da una a caso. Senza JS: una sotto l'altra. */
.sights:has(.sights__show) { padding: 0; background: #141414; }
.sights__show { position: relative; color: #fff; }
.sights__head { position: relative; z-index: 3; padding-top: var(--s-6); pointer-events: none; }
.sights__head > * { pointer-events: auto; }
.sights__head .kicker { color: #fff; }   /* bianco su foto (6/11; prima giallo) */
.sights__head .h2 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.sights__head p { color: rgba(255, 255, 255, .85); max-width: 40ch; margin: var(--s-2) 0 0; }
.sights__slides { list-style: none; margin: 0; padding: 0; display: grid; }
.sslide { position: relative; min-height: max(680px, calc(100svh - var(--header-h))); display: flex; align-items: center; }
.sslide__fig { position: absolute; inset: 0; margin: 0; }
.sslide__img { position: absolute; inset: 0; overflow: hidden; background: #222222; }
.sslide__img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 20, .62) 0, rgba(20, 20, 20, .1) 34%, rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, .55) 100%),
              linear-gradient(90deg, rgba(20, 20, 20, .5) 0, rgba(20, 20, 20, 0) 50%); }
.sslide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; }
.sslide.is-active .sslide__img img { transform: scale(1); }
.sslide__img .sslide__blur { transform: scale(1.2) !important; filter: brightness(.55) saturate(.6); }
.sslide__img .sslide__contain { object-fit: contain; padding: 7rem 0 6rem; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.sslide figcaption { position: absolute; z-index: 2; right: var(--edge); bottom: 7.4rem; max-width: 44ch; text-align: right; font-size: .75rem; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sslide figcaption a { color: inherit; }
.sslide__wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-block: 7rem 9rem; }   /* scheda a destra; il titolo della sezione si allinea al titolo della scheda (app.js) */
.sslide__card { width: min(100%, 480px); color: var(--ink); background: rgba(254, 253, 251, .97); border-radius: 22px; padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.sslide__n { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin: 0 0 .8rem; }
.sslide__n .num { font-size: 1rem; letter-spacing: 0; }
.sslide__name { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); margin: 0 0 .8rem; }
.sslide__desc { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 1.2rem; }
.sslide__facts { margin: 0 0 1.4rem; display: grid; border-top: 1px solid var(--rule); }
.sslide__facts > div { display: grid; grid-template-columns: auto 6.6rem minmax(0, 1fr); gap: .25rem .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.sslide__facts .ic { width: 1.5rem; height: 1.5rem; color: var(--brick); align-self: center; }
.sslide__facts dt { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sslide__facts dd { margin: 0; font-size: 1rem; }
.sslide__facts b { font-weight: 700; color: var(--open); }
.sights__nav { display: none; }
/* versione animata: le foto si sovrappongono e si alternano */
.sights__show.is-js .sights__head { position: absolute; left: 0; right: 0; top: 0; transition: top .5s var(--ease); }
@media (min-width: 900px) { .sights__show.is-js .sights__head { padding-top: 0; } .sights__head p { max-width: 34ch; } }
.sights__show.is-js .sslide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; }
.sights__show.is-js .sslide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.sights__show.is-js .sslide__card { transform: translateY(18px); opacity: 0; transition: transform .9s var(--ease) .15s, opacity .9s var(--ease) .15s; }
.sights__show.is-js .sslide.is-active .sslide__card { transform: none; opacity: 1; }
.sights__show.is-js .sights__nav { display: flex; align-items: center; gap: var(--s-4); position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 3; }
.sights__tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; flex: 1; align-items: end; }
.sights__tabs button { position: relative; width: 100%; display: grid; gap: .3rem; padding: .7rem 0 1.1rem; border: 0; background: none; text-align: left; cursor: pointer; color: rgba(255, 255, 255, .75); font: 650 clamp(1rem, .85rem + .4vw, 1.25rem)/1.2 var(--f-text); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.sights__tabs .num { font-size: .95rem; color: #fff; }
.sights__tabs i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .28); border-radius: 3px; overflow: hidden; }
.sights__tabs i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.sights__tabs .is-done i::after { transform: scaleX(1); opacity: .45; }
.sights__tabs .is-active button { color: #fff; }
.sights__tabs .is-active i::after { transform: scaleX(1); }
.sights__show.is-playing .sights__tabs .is-active i::after { animation: sightbar var(--sight-ms, 7000ms) linear both; }
@keyframes sightbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sights__tabs button:focus-visible { outline-color: #fff; }
.sights__play { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 3.2rem; padding: 0 1.3rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(20, 20, 20, .3); font: 650 1rem/1 var(--f-text); color: #fff; cursor: pointer; }
.sights__play .ic { width: 1.2rem; height: 1.2rem; }
.sights__play-on, .sights__play-off { display: inline-flex; align-items: center; gap: .4rem; }
.sights__play[aria-pressed="true"] .sights__play-off, .sights__play[aria-pressed="false"] .sights__play-on { display: none; }
@media (max-width: 899px) {
  .sights__tab-name { display: none; }
  .sights__tabs button { text-align: center; }
  /* telefono: foto in alto, scheda sotto che sale un poco sulla foto */
  .sslide { display: block; min-height: 0; }
  .sslide__fig { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .sslide figcaption { right: var(--gutter); left: var(--gutter); bottom: 3.6rem; text-align: left; }
  .sslide__wrap { padding-block: 0 6rem; margin-top: -3rem; }
  .sslide__img .sslide__contain { padding: 6rem 0 3rem; }
  .sslide__facts > div { grid-template-columns: auto minmax(0, 1fr); }
  .sslide__facts dd { grid-column: 2; }
  .sights__head { padding-top: var(--s-4); }
  .sights__head p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sslide__img img { transform: none !important; transition: none; } }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index > li { border-bottom: 1px solid var(--rule); }
.index a { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .25rem 1rem; padding: var(--s-3) 0; text-decoration: none; align-items: baseline; }
.index .i { font: 500 1.25rem/1 var(--f-display); color: var(--brick); }
.index .t { font: 500 clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--f-display); }
.index .d { grid-column: 2 / -1; color: var(--ink-2); font-size: var(--fs-small); }
.index .m { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; color: var(--open); }
.index a:hover .t { color: var(--brick); }
@media (min-width: 900px) { .index a { grid-template-columns: 4rem 1.1fr 1.2fr auto; } .index .d { grid-column: auto; } }

/* fascia stagionale */
/* Natale: titolo con l'omino che cammina + calendario del mercatino con la prossima giornata */
.season { background: var(--ink); color: #fff; padding: var(--section) 0; }   /* fascia scura con accenti gialli */
.season__in { display: grid; gap: var(--s-6); }
.season__main { display: grid; gap: var(--s-3); align-content: start; }
.season__walker { display: grid; place-items: center; width: clamp(4.5rem, 3.5rem + 2.5vw, 6rem); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--brick); }
.season__walker .ic { width: 58%; height: 58%; stroke-width: 1.5; }
.season .kicker { color: var(--ochre); }
.season__main > div { container-type: inline-size; }
.season .h2 { font-size: min(clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem), 14cqi); line-height: 1; }   /* come il motto del footer, ma mai più largo della sua colonna */
.season .h2 span { display: block; white-space: nowrap; }   /* sempre due righe: «Il Natale» / «si compra a piedi.» */
.season .h2 em { color: #fff; }
.season__lead { font-size: var(--fs-lead); line-height: 1.45; color: #d4d2ce; max-width: 34ch; margin: var(--s-3) 0 var(--s-4); }
.season__cta { min-height: 4rem; font-size: 1.1875rem; padding-left: 1.8em; background: #fff; border-color: #fff; color: var(--ink); }
.season__cta .btn__chip { width: 3.1rem; height: 3.1rem; background: var(--brick); color: #fff; }
.season__cta:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.season__cta:hover .btn__chip { background: #fff; color: var(--brick); }
.season__cta:hover .btn__chip .ic { transform: translateX(3px); }
.season__market { align-self: end; }
.season__label { font: 650 var(--fs-small)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 var(--s-2); }
.season__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.season__days li { display: grid; justify-items: center; gap: .3rem; padding: .9rem .25rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 14px; transition: background .3s, color .3s; }
.season__days span { font: 600 var(--fs-micro)/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: #d4d2ce; }
.season__days b { font: 650 clamp(2rem, 1.4rem + 2.2vw, 3.25rem)/1 var(--f-display); font-stretch: 90%; letter-spacing: -.03em; }
.season__days .is-next { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.season__days .is-next span { color: var(--ink); }
.season__days .is-past { opacity: .45; }
.season__days .is-past b { text-decoration: line-through; text-decoration-thickness: 2px; }
.season__where { margin: .9rem 0 0; font-size: var(--fs-small); color: #d4d2ce; }
.season__count { margin: var(--s-3) 0 0; font: 600 var(--fs-lead)/1.3 var(--f-text); color: #fff; }
.season__facts { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.season__facts li { display: flex; align-items: center; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #d4d2ce; }
.season__facts .ic { width: 1.6rem; height: 1.6rem; color: #fff; flex: none; }
.season__facts b { color: #fff; }
.season :focus-visible { outline-color: #fff; }
@media (min-width: 960px) {
  .season__in { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); align-items: end; }
  .season__main { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
  .season__walker { margin-top: .4rem; }
}

/* ==========================================================================
   SCHEDA NEGOZIO (template)
   ========================================================================== */
.shop-hero { padding: var(--s-3) 0 var(--s-5); }
.shop-hero__grid { display: grid; gap: var(--s-4); }
.shop-hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.shop-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-hero__name { font-size: clamp(3.4rem, 2rem + 6vw, 7.5rem); line-height: .9; margin: .15em 0 .25em; }
.shop-hero__hook { font: 400 var(--fs-lead)/1.4 var(--f-display); color: var(--ink-2); max-width: 30ch; margin-bottom: var(--s-3); }
.shop-hero__logo { height: 30px; width: auto; margin-bottom: var(--s-2); }
.shop-hero__facts { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: .55rem; font-size: var(--fs-small); }
.shop-hero__facts li { display: flex; gap: .6rem; align-items: center; }
.shop-hero__facts a { color: var(--brick-deep); font-weight: 600; }
@media (min-width: 960px) { .shop-hero__grid { grid-template-columns: 6fr 5fr; align-items: end; gap: var(--s-6); } .shop-hero__media { aspect-ratio: 5 / 4; } }

/* segnaposto foto: tipografico */
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(20,20,20,.04) 14px 15px), var(--paper-2); }
.ph__mono { font: 500 clamp(3rem, 2rem + 5vw, 8rem)/1 var(--f-display); color: var(--brick); opacity: .6; }
.ph__note { position: absolute; left: .8rem; bottom: .6rem; font-size: .75rem; color: var(--ink-2); letter-spacing: .04em; }
.on-dark .ph { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.04) 14px 15px), #222222; }
.on-dark .ph__mono { color: var(--ochre); }
.on-dark .ph__note { color: #b3b1ad; }

/* sottomenu ancore */
.subnav { position: sticky; top: var(--header-h); z-index: 600; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.subnav.is-stuck { border-bottom-color: var(--rule); }
/* le voci come i filtri dell'archivio Negozi: pillole, quella della sezione in vista piena in nero (6/11) */
.subnav ul { list-style: none; margin: 0; padding: var(--s-2) 0; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap;
  font: 600 var(--fs-small)/1 var(--f-text); text-decoration: none; color: var(--ink); background: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.subnav a:hover { border-color: var(--ink); }
.subnav a.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 1023px) { .subnav ul { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .subnav li { flex: none; } }

/* come arrivare (scheda negozio): partenze a sinistra, mappa a destra. Fondo chiaro, niente giallo, numeri in nero (6/11) */
.reach { background: var(--paper-2); padding: var(--section) 0; scroll-margin-top: calc(var(--header-h) + 76px); }
.reach .section-head { margin-bottom: var(--s-5); }
.reach__grid { display: grid; gap: var(--s-4); }
.reach__list { display: grid; gap: var(--s-3); align-content: start; }
.ways__k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .7rem; }
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
/* un filetto dritto fra ogni partenza (sulla riga, non sulla scheda arrotondata); intorno alla scheda scelta sparisce */
.way { border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.way:has(button[aria-pressed="true"]), .way:has(+ .way button[aria-pressed="true"]), .ways:has(> .way:first-child button[aria-pressed="true"]) { border-color: transparent; }
.way button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 16px; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.way button:hover { background: rgba(255, 255, 255, .55); }
.way button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.way .ic { width: 1.6rem; height: 1.6rem; color: var(--ink); stroke-width: 1.6; grid-row: 1 / span 2; }
.way__t { font: 600 1.0625rem/1.25 var(--f-text); }
.way__d { grid-column: 2; font-size: .875rem; line-height: 1.35; color: var(--ink-2); }
.way__min { grid-row: 1 / span 2; grid-column: 3; font: 650 2.2rem/1 var(--f-display); font-stretch: 92%; letter-spacing: -.02em; text-align: right; color: var(--ink); }
.way__min small { display: block; font: 600 .6875rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: .3rem; }
.way button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 0 rgba(20, 20, 20, .04), 0 14px 30px -18px rgba(20, 20, 20, .35); }
/* mappa con il riquadro della partenza scelta */
.reach__mapbox { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.reach__map { height: 340px; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 0 rgba(20, 20, 20, .05), 0 24px 48px -32px rgba(20, 20, 20, .4); }
.reach__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem 1.25rem; padding: 1.1rem 1.25rem; background: #fff; border-radius: 18px;
  box-shadow: 0 1px 0 rgba(20, 20, 20, .04), 0 18px 40px -24px rgba(20, 20, 20, .4); }
.reach__from { margin: 0; font-size: .9375rem; color: var(--ink-2); grid-column: 1; }
.reach__from b { color: var(--ink); font-weight: 600; }
.reach__val { margin: 0; grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; color: var(--ink-2); font-size: .9375rem; }
.reach__val > b { font: 650 2rem/1 var(--f-display); font-stretch: 92%; letter-spacing: -.02em; color: var(--ink); }
.reach__card .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1023px) { .reach__mapbox { order: -1; } }   /* telefono e tablet: prima la mappa, poi le partenze */
@media (max-width: 479px) { .reach__card { grid-template-columns: minmax(0, 1fr); } .reach__card .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .6rem; } }
@media (min-width: 1024px) {
  .reach__grid { gap: var(--s-5); align-items: stretch; }
  .reach__map { height: auto; flex: 1; min-height: 560px; }
  .reach__card { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 2; max-width: 520px; }
}
/* le informazioni pratiche: una riga, filetto sopra, icone nere */
.reach__notes { display: grid; gap: 0 var(--s-4); margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.reach__note { display: grid; gap: .45rem; padding: var(--s-3) 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.reach__note h3 { font: 600 var(--fs-body)/1.3 var(--f-text); margin: 0; display: flex; gap: .6rem; align-items: center; color: var(--ink-2); }
.reach__note h3 .ic { color: var(--ink); width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.reach__note span { justify-self: start; font: 650 1.125rem/1.3 var(--f-text); background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.reach__note:is(:hover, :focus-visible) span { background-position: 0 100%; background-size: 100% 1px; }
@media (min-width: 760px) { .reach__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reach__note { border-bottom: 0; padding-bottom: 0; } }
@media (min-width: 1100px) { .reach__notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* corpo della scheda */
.shop-body { padding: var(--section) 0; }
.shop-body__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .shop-body__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-7); } .shop-aside { position: sticky; top: calc(var(--header-h) + 96px); align-self: start; } }
.block { margin-bottom: var(--s-7); scroll-margin-top: calc(var(--header-h) + 100px); }
.block-title { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); margin-bottom: var(--s-3); }
.block-title em { font-style: italic; color: var(--brick); }
.inline-list { margin: 0 0 1rem; color: var(--ink-2); }
.inline-list b { color: var(--ink); font-weight: 600; margin-right: .4em; }
.inline-list span + span::before { content: " · "; color: var(--brick); }
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.services li { display: flex; gap: .7rem; align-items: center; padding: .9rem .5rem .9rem 0; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: var(--fs-small); }
.services .ic { color: var(--brick); width: 1.4rem; height: 1.4rem; }
.langs { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; gap: 1.5rem; }
.langs li { display: flex; gap: .6rem; align-items: center; font-weight: 600; }
.flag { width: 28px; height: 19px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.quote { font: italic 400 clamp(1.3rem, 1.15rem + .6vw, 1.7rem)/1.4 "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto; border-left: 2px solid var(--brick); padding-left: var(--s-3); margin: 0; max-width: 38ch; }   /* corsivo con grazie (6/11): è la voce del negozio, unico serif del sito */
/* «Il negozio» (6/11): primo paragrafo più grande al posto del capolettera, poi una scheda ordinata a righe
   (Marchi · Servizi · Lingue) con l'etichetta a sinistra e il contenuto a destra, filetti come negli orari */
.prose--lead > p:first-child { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); margin-bottom: 1.1em; }
.facts { margin-top: var(--s-6); padding: 0 var(--s-4); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: var(--s-4) 0; }
.facts__row + .facts__row { border-top: 1px solid var(--rule); }
.facts__k { font: 600 var(--fs-micro)/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.facts__v > :last-child { margin-bottom: 0; }
/* marchi: la categoria piccola sopra, i nomi in nero con un punto grigio fra l'uno e l'altro */
.facts .inline-list { display: block; margin: 0 0 1.1rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }
.facts .inline-list b { display: block; font: 600 var(--fs-micro)/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .35rem; }
.facts .inline-list span + span::before { content: none; }
.facts .inline-list span { white-space: nowrap; }
.facts .inline-list span:not(:last-child)::after { content: "\00a0· "; color: var(--ink-2); opacity: .6; white-space: normal; }   /* il punto resta a fine riga, mai all'inizio */
.facts .services { display: flex; flex-wrap: wrap; gap: .9rem 2rem; border: 0; }
.facts .services li { padding: 0; border: 0; font-size: 1.0625rem; font-weight: 600; }
.facts .services .ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; }
.facts .langs { margin: 0; }
.facts .langs { flex-wrap: wrap; gap: .6rem; }
/* lingue come il selettore IT/EN in alto: pillola con bordo e bandierina tonda, senza il fondo nero */
.facts .langs li { gap: .55rem; min-height: 2.75rem; padding: 0 1.1rem 0 .45rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 1rem; font-weight: 600; }
.facts .langs .flagdot { width: 26px; height: 26px; }
@media (min-width: 700px) { .facts__row { grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s-4); } .facts__k { padding-top: .35rem; } }
@media (max-width: 599px) { .facts { padding: 0 1.25rem; } .panel { padding: 1.25rem; } }

/* vetrina a tutta larghezza (6/11): foto grandi e arrotondate, il primo pezzo in primo piano con il nome sulla foto.
   Orari e contatti non stanno più qui accanto: sono nella colonna del testo «Il negozio». */
.vetrina { padding: var(--section) 0 calc(var(--section) * .5); scroll-margin-top: calc(var(--header-h) + 76px); }
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
.piece { position: relative; display: flex; flex-direction: column; }
.piece__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--paper-2); }
.piece__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 30%); transition: transform 1.2s var(--ease); }
.piece:hover .piece__media img { transform: scale(1.05); }
.piece__body { display: flex; flex-direction: column; flex: 1; padding-top: 1rem; }
.piece__brand { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); margin: 0 0 .4rem; }
.piece__name { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.75rem); line-height: 1.1; margin: 0 0 .4rem; }
.piece__desc { color: var(--ink-2); font-size: var(--fs-small); margin: 0 0 .9rem; }
.piece .arrow { margin-top: auto; align-self: flex-start; font-size: var(--fs-small); color: var(--brick-deep); }
.showcase .piece:first-child { grid-column: span 2; }
.showcase .piece:first-child .piece__media { aspect-ratio: 4 / 3; }
/* card finale: l'invito a scrivere al negozio, si allarga per chiudere l'ultima riga */
.piece--cta { grid-column: span var(--cta2, 2); justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-radius: 18px; background: var(--ink); color: #fff; text-decoration: none; min-height: 240px; transition: background-color .4s var(--ease); }
.piece--cta .piece__brand { color: #fff; opacity: .7; }
.piece--cta { container-type: inline-size; }
.piece--cta .piece__name { font: 600 clamp(1.5rem, 10.5cqi, 2.8rem)/1.08 var(--f-display); letter-spacing: -.015em; max-width: 20ch; }   /* in proporzione alla larghezza della card */
.piece__wa { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; min-height: 3rem; padding: 0 1.2rem; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-weight: 650; }
.piece__wa .ic { width: 1.3rem; height: 1.3rem; }
.piece { min-width: 0; }
@container (max-width: 340px) { .piece__wa { white-space: normal; padding: .6rem 1rem; line-height: 1.25; } }
@media (max-width: 699px) { .showcase:not(.showcase--many) .piece--cta { grid-column: 1 / -1; padding: 1.5rem; min-height: 0; } }   /* telefono: l'invito a scrivere sta su tutta la riga */   /* card stretta (telefono): il numero va a capo dentro la pillola */
.piece--cta:hover { background: var(--brick); }
.piece--cta:hover .piece__wa { background: #fff; color: var(--brick); border-color: #fff; }
@media (min-width: 1024px) {
  .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
  .showcase .piece:first-child { grid-row: span 2; }
  .showcase .piece:first-child .piece__media { flex: 1; aspect-ratio: auto; min-height: 560px; }
  /* il pezzo grande: marchio, nome e «Chiedi info» sulla foto, con una velatura scura in basso */
  .showcase .piece:first-child .piece__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(20, 20, 20, .66), rgba(20, 20, 20, 0)); pointer-events: none; }
  .showcase .piece:first-child .piece__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; flex: none; padding: var(--s-4); color: #fff; }
  .showcase .piece:first-child .piece__brand, .showcase .piece:first-child .piece__desc, .showcase .piece:first-child .arrow { color: #fff; }
  .showcase .piece:first-child .piece__name { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3.2rem); color: #fff; }
  .showcase .piece:first-child .piece__desc { font-size: 1.0625rem; max-width: 40ch; opacity: .9; }
  .piece--cta { grid-column: span var(--cta4, 1); }
}

/* colonna laterale */
.panel { padding: var(--s-4); margin-bottom: var(--s-3); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }   /* come il riquadro in apertura (6/11) */
.panel > h2 { font-size: clamp(1.5rem, 1.3rem + .5vw, 1.85rem); margin-bottom: var(--s-3); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours th { text-align: left; font-weight: 500; padding: .7rem 1rem .7rem 0; }
.hours td { text-align: right; padding: .7rem 0; white-space: nowrap; color: var(--ink-2); }
.hours tr + tr { border-top: 1px solid var(--rule); }
.hours tr:first-child :is(th, td) { padding-top: 0; }
.hours tr.is-today :is(th, td) { color: var(--ink); font-weight: 700; }
.hours tr.is-today th::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin: 0 .55rem .1rem 0; border-radius: 50%; background: var(--brick); }   /* oggi: grassetto e pallino */
.hours tr.is-today th { font-weight: 700; }
.note { font-size: var(--fs-micro); color: var(--ink-2); margin-top: .8rem; }
.contacts { list-style: none; margin: 0; padding: 0; }
.contacts li + li { border-top: 1px solid var(--rule); }
.contact { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 0; text-decoration: none; color: var(--ink); }
.contacts li:first-child .contact { padding-top: .2rem; }
.contacts li:last-child .contact { padding-bottom: 0; }
.contact .ic { width: 1.75rem; height: 1.75rem; color: var(--brick); stroke-width: 1.6; justify-self: center; }
.contact > span { display: grid; gap: .2rem; min-width: 0; }
.contact small { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.contact b { font-weight: 650; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; justify-self: start;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.contact:is(:hover, :focus-visible) b { background-position: 0 100%; background-size: 100% 1px; }
.near { list-style: none; margin: 0; padding: 0; }
.near a { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.near strong { font: 500 1.2rem/1.15 var(--f-display); }
.near small { grid-column: 1; color: var(--ink-2); font-size: var(--fs-micro); }
.near .min { grid-row: 1 / span 2; grid-column: 2; font-weight: 700; font-size: var(--fs-small); display: flex; gap: .3rem; align-items: center; color: var(--open); }
.near a:hover strong { color: var(--brick); }
/* «Qui vicino» con l'anteprima (6/11): foto (o insegna) a sinistra, nome e dettaglio, minuti a piedi a destra */
.near--img a { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 0 1.4rem; padding: 1.1rem 0; }
.near--img li:first-child a { padding-top: 0; }
.near__img { position: relative; grid-row: 1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(20, 20, 20, .035) 10px 11px), #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .06); }   /* senza foto: l'insegna su carta rigata, come nella passeggiata */
.near__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.near--img a:hover .near__img img { transform: scale(1.06); }
.near__sign { padding: 0 .75rem; text-align: center; font: 600 1rem/1.15 var(--f-display); color: var(--brick); }
.near__n { position: absolute; left: .5rem; top: .5rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 .8125rem/1 var(--f-text); box-shadow: 0 0 0 2px #fff; }
.near__t { display: grid; gap: .25rem; min-width: 0; }
.near--img strong { font: 600 1.1875rem/1.2 var(--f-display); justify-self: start; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.near--img a:is(:hover, :focus-visible) strong { color: var(--ink); background-position: 0 100%; background-size: 100% 1px; }
.near--img small { font-size: .875rem; line-height: 1.35; }
.near--img .min { grid-row: 1; grid-column: 3; color: var(--ink); font-weight: 500; font-size: .875rem; gap: .35rem; }
.near--img .min .ic { color: var(--brick); width: 1.25rem; height: 1.25rem; }
.near--img .min b { font: 650 1.35rem/1 var(--f-display); }
.near__credits { margin: var(--s-2) 0 0; font-size: var(--fs-micro); color: var(--ink-2); }
/* nella colonna stretta delle pagine informative: miniatura piccola; senza foto resta solo il numero di tappa */
.panel .near--img a { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 .8rem; }
.panel .near--img strong { font-size: 1rem; }
.panel .near--img small { font-size: .8125rem; }
.panel .near__sign { display: none; }
.panel .near__img:not(:has(img)) .near__n { position: static; }
@media (max-width: 1023px) { .near--img a { grid-template-columns: 150px minmax(0, 1fr) auto; } }
@media (max-width: 599px) { .near--img a { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 0 .9rem; } .near--img strong { font-size: 1.0625rem; } }
/* «Qui vicino» della scheda (6/11): le schede dei negozi come quelle della passeggiata in home,
   e fra l'una e l'altra un luogo da vedere a foto piena */
/* una fila che scorre (Swiper), come le foto in apertura: parte dal bordo del contenuto e arriva al bordo dello schermo.
   Le regole partono da .nearrow.swiper perché il CSS di Swiper si carica dopo il nostro. */
.nearrow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.nearrow__nav .shop-gal__btn { border: 1px solid var(--rule); }
.nearrow__nav .shop-gal__btn:is(:disabled, .swiper-button-disabled) { opacity: .35; cursor: default; background: #fff; color: var(--ink); border-color: var(--rule); }
.nearrow-wrap { overflow: hidden; padding-bottom: 2.5rem; margin-bottom: -2.5rem; }   /* spazio per l'ombra delle schede */
.nearrow.swiper { overflow: visible; cursor: grab; }
.nearrow.swiper:active { cursor: grabbing; }
.nearcards { list-style: none; margin: 0; padding: 0; }
.nearrow .swiper-wrapper { align-items: stretch; }
.nearrow .swiper-slide { width: clamp(290px, 24vw, 380px); height: auto; }
.nearrow:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: var(--s-3); overflow-x: auto; padding-inline: var(--gutter); scroll-snap-type: x mandatory; }   /* senza script: si scorre col dito */
.nearrow:not(.swiper-initialized) .swiper-slide { flex: none; scroll-snap-align: start; }
.nearby .near__credits { margin-top: var(--s-4); }
@media (max-width: 599px) { .nearrow__head .nearrow__nav { display: none; } .nearrow .swiper-slide { width: 82vw; } }   /* sul telefono si scorre col dito */
.nearcards .stop__media .ph { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(20, 20, 20, .035) 14px 15px), #f1eee9; }
.nearcards .stop__media .ph__mono { color: var(--brick); opacity: .55; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); font-weight: 600; }
.nearcard__walk { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 0; font-size: 1rem; color: var(--ink-2); }
.nearcard__walk .ic { width: 1.5rem; height: 1.5rem; color: var(--brick); stroke-width: 1.6; flex: none; }
.nearcard__walk b { color: var(--ink); font: 650 1.2rem/1 var(--f-display); margin-right: .2rem; }
.nearsight__card { position: relative; display: block; height: 100%; min-height: 460px; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; background: var(--ink);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .05), 0 24px 48px -30px rgba(20, 20, 20, .45); }
.nearsight__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nearsight__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 20, .78) 0%, rgba(20, 20, 20, .25) 55%, rgba(20, 20, 20, 0) 80%); }
.nearsight__card:hover img { transform: scale(1.05); }
.nearsight__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .45rem; padding: var(--s-4); }
.nearsight__k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.nearsight__name { font: 650 clamp(1.6rem, 1.3rem + .9vw, 2.2rem)/1.05 var(--f-display); letter-spacing: -.015em; }
.nearsight__note { font-size: .9375rem; opacity: .9; }
.nearsight__walk { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .9375rem; }
.nearsight__walk .ic { width: 1.4rem; height: 1.4rem; stroke-width: 1.6; }
.nearsight__walk b { font: 650 1.2rem/1 var(--f-display); }
/* un titolo di sezione senza testo accanto usa tutta la larghezza */
.section-head > div:only-child { grid-column: 1 / -1; }

/* barra azioni (mobile, scheda negozio) */
.actionbar { position: fixed; inset: auto 0 0 0; z-index: 650; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 58px; background: var(--surface); text-decoration: none; font-weight: 700; font-size: var(--fs-small); }
.actionbar a:first-child { background: var(--brick); color: #fff; }
@media (min-width: 960px) { .actionbar { display: none; } }

/* ==========================================================================
   ARCHIVIO NEGOZI
   ========================================================================== */
.page-hero { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.page-hero__grid { display: grid; gap: var(--s-3); }
.page-hero .display { font-size: clamp(2.8rem, 1.8rem + 5vw, 6.5rem); max-width: 13ch; }
.page-hero .meta { font-size: var(--fs-micro); color: var(--ink-2); letter-spacing: .04em; margin: var(--s-2) 0 0; }
@media (min-width: 1024px) { .page-hero__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: var(--s-3) 0; }
.pill { min-height: 44px; padding: 0 1rem; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: 600 var(--fs-small)/1 var(--f-text); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; text-decoration: none; }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill:hover { border-color: var(--ink); }
.toolbar .count { margin-left: auto; font-size: var(--fs-small); color: var(--ink-2); }
/* ---------- Pagina Negozi: apertura con il segno del percorso ---------- */
.page-hero--shops { padding-bottom: var(--s-4); }
.page-hero--shops .lead { max-width: 40ch; margin: var(--s-3) 0 0; text-wrap: pretty; }
.shops-live { display: inline-flex; align-items: center; gap: .7rem; margin: var(--s-3) 0 0; padding: .6rem 1.1rem .6rem .9rem; border-radius: 999px; background: #e3eee6; color: var(--open); font: 650 1.0625rem/1.2 var(--f-text); }
.shops-live__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--open); box-shadow: 0 0 0 0 rgba(43, 107, 67, .45); animation: vivo 2.4s ease-out infinite; }
@keyframes vivo { 70% { box-shadow: 0 0 0 .55rem rgba(43, 107, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 107, 67, 0); } }
.page-hero--shops .meta { margin-top: var(--s-2); }
.rmark-fig { margin: 0; }
.rmark { display: block; width: 100%; height: auto; overflow: hidden; }
.rmark__glow { fill: none; stroke: var(--paper); stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; }   /* come nella home: alone chiaro sopra la pianta */
.rmark__line { fill: none; stroke: var(--brick); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 2.4s cubic-bezier(.6, 0, .3, 1) .3s forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.rmark__tick { stroke: var(--ink); stroke-width: 1.2px; }
.rmark__dot { text-decoration: none; }
.rmark__dot circle { fill: var(--ink); stroke: var(--paper); stroke-width: 3.5px; transition: fill .2s; }
.rmark__dot text { fill: #fff; font-family: var(--f-text); font-weight: 700; text-anchor: middle; pointer-events: none; }
.rmark__dot { transform-box: fill-box; transform-origin: center; animation: spunta .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.6s + var(--i) * .17s); }
@keyframes spunta { from { transform: scale(0); opacity: 0; } }
.rmark__dot.is-off circle { fill: #b5b3ae; }
.rmark__dot.is-dim { opacity: .3; }
.rmark__dot:is(:hover, :focus-visible, .is-hot) circle { fill: var(--brick); }
.rmark__dot:focus { outline: none; }
.rmark__dot:focus-visible circle { stroke: var(--focus); stroke-width: 4px; }
.rmark__mark circle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.6px; }
.rmark__mark text { fill: var(--ink-2); font-family: var(--f-text); font-weight: 700; text-anchor: middle; }
.rmark__label { fill: var(--ink-2); font-family: var(--f-text); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.rmark__label[text-anchor="end"] { text-anchor: end; }
.rmark-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.rmark__v { display: flex; align-items: baseline; gap: .3rem; font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.rmark__v b { font: 650 1.6rem/1 var(--f-display); font-stretch: 88%; letter-spacing: -.02em; color: var(--ink); }
.rmark__v i { width: 1px; height: 1.1rem; background: var(--rule); margin: 0 .45rem; align-self: center; }
.rmark__hint { font-size: var(--fs-micro); color: var(--ink-2); }
@media (hover: none) { .rmark__hint { display: none; } }
@media (min-width: 1024px) {
  .page-hero--shops .page-hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) { .shoprow::before { transform: none !important; } .rmark__line { animation: none; stroke-dashoffset: 0; } .rmark__dot, .shops-live__dot { animation: none; } }

/* barra dei filtri: resta in alto mentre scorri; su telefono una sola riga che scorre */
.shops-page { overflow-x: clip; }   /* lo sfondo a tutta larghezza della barra non crea scroll orizzontale */
.toolbar { position: sticky; top: var(--header-h); z-index: 600; }
/* fondo a tutta larghezza; quando la barra è ferma in alto (.is-stuck, app.js) compaiono un filetto e un'ombra leggera */
.toolbar::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.toolbar.is-stuck::before { border-bottom-color: var(--rule); box-shadow: 0 10px 22px -20px rgba(20, 20, 20, .22); }
@media (max-width: 1023px) { .toolbar::before { display: none; } .toolbar { background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; } .toolbar.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 10px 22px -20px rgba(20, 20, 20, .22); }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .toolbar::-webkit-scrollbar { display: none; } .toolbar .pill { flex: none; } .toolbar .count { display: none; } }

/* ---------- Righe dei negozi ---------- */
.shops { list-style: none; margin: 0 0 var(--section); padding: 0; border-top: 1px solid var(--ink); }
.shoprow { position: relative; isolation: isolate; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 112px); }   /* si ferma sotto header e filtri */
/* al passaggio la riga si solleva: un fondo bianco caldo più largo del contenuto, angoli arrotondati, ombra leggera */
.shoprow::before { content: ""; position: absolute; inset: -6px calc(var(--gutter) * -.7); z-index: -1; background: #ffffff; border-radius: 22px;
  box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .22), 0 1px 3px -2px rgba(20, 20, 20, .1); opacity: 0; transform: translateY(6px) scale(.99);
  transition: opacity .35s, transform .55s var(--ease); pointer-events: none; }
.shoprow:is(:hover, .is-hot, :focus-within) { z-index: 1; }
.shoprow:focus { outline: none; }   /* arrivando da un numero della pianta la riga riceve il focus: la segnala il fondo bianco */
.shoprow:is(:hover, .is-hot, :focus-within)::before { opacity: 1; transform: none; }
.shoprow[hidden] { display: none; }
.shoprow__in { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: var(--s-4) 0; }
.shoprow__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--paper-2); text-decoration: none; }
.shoprow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shoprow:hover .shoprow__media img { transform: scale(1.05); }
/* senza foto, «l'insegna»: il nome del negozio composto come su un'insegna */
.ph--sign { display: grid; place-items: center; padding: .8rem; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(20, 20, 20, .035) 14px 15px), #f1eee9; }
.ph--sign .ph__mono { font: 650 clamp(1rem, .8rem + .9vw, 1.6rem)/1.02 var(--f-display); font-stretch: 85%; letter-spacing: -.02em; text-align: center; color: var(--brick); opacity: .8; text-wrap: balance; }
.shoprow__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.shoprow__top { display: flex; align-items: center; gap: .8rem; margin: 0; }
.shoprow__n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .9375rem/1 var(--f-text); flex: none; transition: background .2s; }
.shoprow.is-hot .shoprow__n, .shoprow:hover .shoprow__n { background: var(--brick); }
.shoprow__cat { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); }
.shoprow__name { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.4rem); line-height: 1; }
.shoprow__name a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 2px no-repeat; transition: background-size .45s var(--ease); }
.shoprow__name a:is(:hover, :focus-visible), .shoprow:hover .shoprow__name a { background-position: 0 100%; background-size: 100% 2px; }
.shoprow__hook { margin: 0; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-2); }
.shoprow__today { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: .2rem 0 0; }
.shoprow__today .state { font-size: .9375rem; }
.shoprow__hours { font-size: .9375rem; color: var(--ink-2); }
.shoprow__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.btn--sm { min-height: 2.9rem; padding: 0 1.15em; font-size: .9375rem; }
.shoprow__cta .arrow { margin-left: .4rem; }
.shoprow__side { grid-column: 1 / -1; min-width: 0; }
.shoprow__addr { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; }   /* icone e testi in colonna con le righe sotto */
.shoprow__addr .ic { width: 1.6rem; height: 1.6rem; color: var(--brick); stroke-width: 1.6; margin-top: .05rem; }
.shoprow__addr span { display: grid; gap: .2rem; line-height: 1.25; }
.shoprow__addr b { font: 650 1.25rem/1.2 var(--f-display); font-stretch: 92%; }
.shoprow__addr small { font-size: .9375rem; color: var(--ink-2); }
.shoprow__k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: var(--s-4) 0 .35rem; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.shoprow__reach { list-style: none; margin: 0; padding: 0; }
.shoprow__reach li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .8rem 0; font-size: 1rem; }
.shoprow__reach li + li { border-top: 1px solid var(--rule); }
.shoprow__reach .ic { width: 1.5rem; height: 1.5rem; color: var(--brick); stroke-width: 1.6; justify-self: center; }
.shoprow__reach b { font: 650 1.2rem/1 var(--f-display); font-stretch: 90%; white-space: nowrap; }
.shoprow__dist { margin: .6rem 0 0; font-weight: 700; color: var(--open); }
/* chiusura: blocchi chiari verso le pagine per categoria. Titoletto come nel resto del sito; numero dei negozi grande
   e stretto (larghezza 62% di Archivo), titolo grande; elenco dei negozi con lo stato */
.more { margin: 0 0 var(--section); }
.more__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.more__h { font-size: var(--fs-h2); letter-spacing: -.035em; font-stretch: 90%; text-wrap: balance; }
.more__lead { margin: 0; max-width: 36ch; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
@media (min-width: 1024px) { .more__head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s-6); } .more__lead { justify-self: end; text-align: right; } }
.more__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.more__card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-3); height: 100%; padding: var(--s-4) 0; border-top: 1px solid var(--ink); text-decoration: none; }
.more__card::before { content: ""; position: absolute; inset: -4px calc(var(--gutter) * -.6) -4px; z-index: -1; background: #ffffff; border-radius: 22px;
  box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .22), 0 1px 3px -2px rgba(20, 20, 20, .1); opacity: 0; transform: translateY(6px) scale(.99); transition: opacity .35s, transform .55s var(--ease); }
.more__card:is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
.more__kick { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--brick); display: flex; gap: .75em; align-items: center; }   /* come .kicker del sito */
.more__kick::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
.more__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.more__big { font: 300 clamp(5rem, 3.4rem + 5vw, 8.5rem)/.78 var(--f-display); font-stretch: 62%; letter-spacing: -.04em; color: var(--brick); transition: font-weight .5s var(--ease); }
.more__card:hover .more__big { font-weight: 600; }   /* al passaggio il numero «prende peso» */
.more__hd { display: grid; gap: .6rem; padding-top: .2rem; }
.more__t { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.04; text-wrap: balance; justify-self: start; }   /* niente sottolineato al passaggio */
.more__hd p { margin: 0; max-width: 42ch; font-size: 1.125rem; line-height: 1.45; color: var(--ink-2); }
.more__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.more__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.more__n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .8125rem/1 var(--f-text); transition: background .25s; }
.more__card:hover .more__n { background: var(--brick); }
.more__list li:nth-child(2) .more__n { transition-delay: .05s; } .more__list li:nth-child(3) .more__n { transition-delay: .1s; }
.more__s { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; min-width: 0; }
.more__s b { font: 650 1.1875rem/1.2 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; }
.more__s small { font-size: .9375rem; color: var(--ink-2); }
.more__list .state { font-size: .875rem; white-space: nowrap; }
.more__go { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: var(--s-2); font-size: 1.0625rem; color: var(--ink-2); }
.more__go b { font: 650 1.35rem/1 var(--f-display); font-stretch: 88%; color: var(--ink); }
.more__go .btn__chip { background: var(--brick); color: #fff; transition: transform .35s var(--ease); }
.more__card:hover .more__go .btn__chip { transform: translateX(4px); }
.more__links { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: var(--s-5) 0 0; font-size: 1.125rem; }
@media (min-width: 760px) { .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (max-width: 599px) { .more__list .state { grid-column: 2; } .more__top { grid-template-columns: 1fr; } .more__big { font-size: 4.5rem; } }

/* telefono: foto piccola accanto a numero e nome, il resto a piena larghezza */
@media (max-width: 699px) {
  .shoprow__in { grid-template-columns: 96px minmax(0, 1fr); gap: .9rem 1rem; padding: var(--s-4) 0; }
  .shoprow__main { display: contents; }
  .shoprow__media { grid-row: 1 / span 2; align-self: start; }
  .shoprow__top { grid-column: 2; align-self: end; flex-wrap: wrap; gap: .5rem .7rem; }
  .shoprow__name { grid-column: 2; align-self: start; font-size: 1.9rem; }
  .shoprow__hook, .shoprow__today, .shoprow__cta { grid-column: 1 / -1; }
  .shoprow__hook { font-size: 1.125rem; }
  .shoprow__cta { margin-top: 0; }
  .shoprow__cta .btn { flex: 1 1 auto; }
  .shoprow__cta .arrow { margin: .3rem 0 0; }
  .shoprow__media .ph__mono { font-size: .95rem; }
}
@media (min-width: 700px) {
  .shoprow__in { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-3) var(--s-5); }
  .shoprow__media { grid-row: 1 / span 2; align-self: start; }
  .shoprow__side { grid-column: 2; }
}
@media (min-width: 1100px) {
  .shoprow__in { grid-template-columns: 240px minmax(0, 1.25fr) minmax(0, .8fr); gap: var(--s-6); padding: var(--s-5) 0; align-items: start; }
  .shoprow__media { grid-row: auto; }
  .shoprow__side { grid-column: 3; padding-top: .45rem; }   /* l'indirizzo parte all'altezza del numero di tappa */
}

/* ==========================================================================
   PAGINE INFORMATIVE
   ========================================================================== */
.answer { background: var(--surface); border-left: 4px solid var(--brick); padding: var(--s-4) var(--s-3); margin: var(--s-4) 0 0; }
.answer__label { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-2); }
.answer p, .answer li { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.45; }
.answer ul { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .45rem; }
.answer li { padding-left: 1.2rem; position: relative; }
.answer li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 1px; background: var(--brick); }
.answer > :last-child { margin-bottom: 0; }
.info-layout { display: grid; gap: var(--s-6); padding: var(--s-6) 0 var(--section); }
@media (min-width: 1100px) { .info-layout { grid-template-columns: 200px minmax(0, 1fr) 340px; gap: var(--s-5); } }
.toc { display: none; }
@media (min-width: 1100px) {
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; font-size: var(--fs-small); }
  .toc p { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .8rem; }
  .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
  .toc a { display: block; padding: .35rem 0 .35rem 1rem; text-decoration: none; color: var(--ink-2); margin-left: -1px; border-left: 1px solid transparent; line-height: 1.3; }
  .toc a:hover, .toc a.is-active { color: var(--brick); border-left-color: var(--brick); }
}
.info-aside { display: grid; gap: var(--s-5); align-content: start; }
@media (min-width: 1100px) { .info-aside { position: sticky; top: calc(var(--header-h) + 32px); } }
.mapbox { height: 320px; background: var(--paper-2); border: 1px solid var(--rule); }
.faq { border-top: 1px solid var(--ink); margin: var(--s-3) 0 var(--s-4); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; font: 500 clamp(1.2rem, 1.1rem + .5vw, 1.5rem)/1.25 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .95rem; font: 400 1.6rem/1 var(--f-text); color: var(--brick); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 62ch; }
.faq details > div p:last-child { margin: 0; }
.sources { margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--rule); font-size: var(--fs-micro); color: var(--ink-2); }

/* ---------- Pagine guida (navetta, parcheggi, come arrivare, cosa vedere, sferisterio, natale) — 6/11 ----------
   apertura: titolo e frase a sinistra, «In breve» come scheda bianca a righe a destra (stile scheda negozio);
   sottomenu a pillole; testo + mappa ferma; in fondo la fila «qui vicino». Poco rosso, spazi ariosi. */
.page-hero--guide { position: relative; isolation: isolate; padding: var(--s-6) 0 var(--s-7); border-bottom: 0; }
/* sfondo dell'apertura nelle pagine interne: la pianta del centro, senza segnaposto, appena visibile e sfumata ai bordi (6/11) */
.page-hero--map { position: relative; isolation: isolate; padding: var(--s-6) 0; border-bottom: 0; }   /* Contatti, Il progetto: stessa pianta delle pagine guida (9/11) */
:is(.page-hero--guide, .page-hero--map)::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -2.8rem; bottom: 0;   /* sale dietro le briciole, non sopra l'avviso navetta */ pointer-events: none;
  background: url(../img/centro-base.svg) 59% 44% / max(1900px, 125vw) auto no-repeat; opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 45%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 75% 85% at 50% 45%, #000 25%, transparent 78%); }
@media (max-width: 699px) { :is(.page-hero--guide, .page-hero--map)::before { background-size: 1500px auto; opacity: .22; } }
.guide-hero { display: grid; gap: var(--s-5); }
.guide-hero .display { font-size: clamp(2.8rem, 1.8rem + 4vw, 5.5rem); max-width: 14ch; }
.guide-hero .lead { margin: var(--s-4) 0 0; max-width: 40ch; }
/* colonna destra uguale sopra («In breve») e sotto (mappa): stessa larghezza e stesso bordo sinistro, in tutte le pagine interne */
:root { --side: 540px; }
@media (min-width: 1100px) { .guide-hero { grid-template-columns: minmax(0, 1fr) minmax(0, var(--side)); gap: var(--s-6); align-items: center; } }   /* titolo al centro dell'altezza della scheda */
.brief { padding: var(--s-4); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }
.brief__label { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s-2); }
.brief p { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 var(--s-2); }
.brief ul { list-style: none; margin: 0; padding: 0; }
/* «In breve» come tabella: etichette in una colonna su fondo appena più scuro, valori a destra */
.brief__table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--s-2); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; font-size: 1rem; }
.brief__table th, .brief__table td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; line-height: 1.45; }
.brief__table tr + tr :is(th, td) { border-top: 1px solid var(--rule); }
.brief__table th { width: 34%; background: var(--paper); font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 1.05rem; }
.brief__table td { color: var(--ink); }
.brief__table td[colspan] { background: #fff; }
@media (max-width: 599px) { .brief__table th, .brief__table td { display: block; width: auto; } .brief__table th { padding-bottom: .35rem; } .brief__table td { padding-top: .35rem; border-top: 0 !important; } .brief__table tr + tr th { border-top: 1px solid var(--rule); } }
/* riquadro mappa delle pagine guida */
.mapcard { padding: var(--s-3); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }
.mapcard__head { display: grid; gap: .8rem; margin-bottom: var(--s-2); }
.mapcard__t { margin: 0; font: 600 clamp(1.25rem, 1.1rem + .4vw, 1.5rem)/1.2 var(--f-display); }
.mapcard__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.mapcard__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.mapcard__legend .lay__pin.pin { width: 24px; height: 24px; font-size: 11px; border-width: 2px; }
.mapcard__legend .lay__pin.pin--park, .mapcard__legend .lay__pin.pin--station { border-radius: 6px; }
.mapcard .mapbox { border-radius: 14px; box-shadow: none; }
.mapcard .pin-wrap .pin { transform: scale(.78); }   /* mappa piccola: segnaposto un po' più piccoli, meno sovrapposti */
.mapcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin-top: var(--s-2); }
.mapcard__foot .arrow { font-size: var(--fs-small); }
.brief ul + p, .brief p + p { margin-top: var(--s-2); }
.brief__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .3rem 1.25rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.brief__row:last-child { padding-bottom: 0; }
.brief__row--full { grid-template-columns: minmax(0, 1fr); }
.brief__k { font: 600 var(--fs-micro)/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: .3rem; }
.brief__v { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.brief a { color: var(--ink); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.brief a:hover { color: var(--brick-deep); }
@media (max-width: 599px) { .brief { padding: 1.25rem; } .brief__row { grid-template-columns: minmax(0, 1fr); } .brief__k { padding-top: 0; } }
.guide-body { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--section); }
@media (min-width: 1100px) { .guide-body { grid-template-columns: minmax(0, 1fr) minmax(0, var(--side)); gap: var(--s-6); align-items: start; } }
.guide-prose { max-width: 68ch; }
.guide-body > * { min-width: 0; }   /* le tabelle larghe scorrono dentro il loro riquadro, non allargano la pagina */
.guide-prose h2 { scroll-margin-top: calc(var(--header-h) + var(--subnav-h, 72px) + 28px); }
/* le voci del sottomenu sono lunghe: su desktop vanno a capo invece di nascondersi a destra */
@media (min-width: 1024px) { body:has(.guide-body) .subnav ul { flex-wrap: wrap; } }
.guide-prose h2:first-child { margin-top: 0; }
.guide-prose li::marker { color: var(--ink-2); }
.guide-prose .faq summary::after { color: var(--ink); }
.guide-aside { display: grid; gap: var(--s-2); align-content: start; }
@media (min-width: 1100px) { .guide-aside { position: sticky; top: calc(var(--header-h) + var(--subnav-h, 72px) + 24px); } }
.guide-aside .mapbox { height: 440px; border: 0; overflow: hidden; }
@media (max-width: 1099px) { .guide-aside .mapbox { height: 320px; } }
.sources ul { padding-left: 1.1em; margin: .5rem 0 0; }
.callout { border: 1px dashed var(--brick); padding: var(--s-2) var(--s-3); background: var(--surface); font-size: var(--fs-small); margin: 0 0 var(--s-3); }

/* indice informazioni utili */
/* hub «Informazioni utili» (6/11): schede bianche con icona, titolo, il dato chiave e il link; la mappa a tutta larghezza */
.hub { padding-bottom: var(--section); }
.hub__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.hub__card > a { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-4); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08);
  box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); text-decoration: none; color: var(--ink); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.hub__card > a:hover { box-shadow: 0 24px 44px -26px rgba(20, 20, 20, .35); transform: translateY(-2px); }
.hub__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--rule); }
.hub__ic .ic { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.hub__card h2 { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.2rem); line-height: 1.05; margin: var(--s-1) 0 0; }
.hub__card p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; }
.hub__card .arrow { margin-top: auto; padding-top: var(--s-2); justify-self: start; align-self: flex-start; }
.hub__card .arrow, .hub__card .arrow:hover { background: none; }   /* la scheda intera è il link: al passaggio si solleva e la freccia avanza, niente sottolineatura */
.hub__link:hover .arrow::after { transform: translateX(4px); }
.hub__card--map { grid-column: 1 / -1; }
.hub__card--map > a { position: relative; overflow: hidden; min-height: 300px; justify-content: center; }
.hub__mapimg { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 75%); mask-image: linear-gradient(to left, #000 35%, transparent 75%); }
.hub__mapimg img { position: absolute; right: -6%; top: 50%; width: 80%; transform: translateY(-50%); opacity: .9; }
.hub__maptxt { position: relative; display: flex; flex-direction: column; gap: var(--s-2); max-width: 46ch; }
@media (max-width: 699px) { .hub__card > a { padding: 1.5rem; } .hub__mapimg { opacity: .5; } }

/* pagina mappa */
/* ---------- Pagina Mappa ----------
   Telefono: titolo e livelli, mappa (due terzi dello schermo), elenchi. Desktop: colonna a sinistra (titolo, livelli,
   elenchi che scorrono) + mappa a tutta altezza. */
.mappage { display: grid; grid-template-columns: minmax(0, 1fr); }
.mappage__head { padding: var(--s-3) var(--gutter) var(--s-2); }
.mappage__head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: .4rem; }
.mappage__head > p { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 var(--s-2); max-width: 40ch; }
.mappage__layers { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.mappage__layers::-webkit-scrollbar { display: none; }
.mappage__map { position: relative; height: 66svh; min-height: 340px; border-block: 1px solid var(--rule); }
.mappage__list { padding: var(--s-2) var(--gutter) var(--s-5); }
@media (min-width: 960px) {
  .mappage { grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - var(--header-h) - var(--ribbon-h, 0px)); }
  .mappage__head { grid-column: 1; padding: var(--s-4) var(--s-4) var(--s-2); border-right: 1px solid var(--rule); }
  .mappage__layers { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .mappage__map { grid-column: 2; grid-row: 1 / span 2; height: auto; border: 0; }
  .mappage__list { grid-column: 1; grid-row: 2; overflow-y: auto; padding: 0 var(--s-4) var(--s-4); border-right: 1px solid var(--rule); overscroll-behavior: contain; }
}
/* livelli: legenda da toccare. Ogni voce mostra il segnaposto vero, il nome e quanti punti ci sono; «Negozi» a tutta riga.
   Spenta: sbiadita, il segnaposto in grigio, il numero barrato. */
.mappage__head > .mappage__k { font: 600 var(--fs-micro)/1.2 var(--f-text); max-width: none; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin: 0 0 .6rem; display: flex; gap: .75em; align-items: center; }
.mappage__k::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.lay { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
  min-height: 52px; padding: .45rem .9rem .45rem .5rem; border: 1px solid rgba(20, 20, 20, .22); border-radius: 14px; background: var(--surface);   /* bordo come i pulsanti chiari del sito (.btn--ghost) */
  transition: border-color .2s, background-color .2s, opacity .25s, box-shadow .25s; }
.lay:hover { border-color: var(--ink); }
.lay:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lay[aria-pressed="true"] { box-shadow: 0 6px 16px -14px rgba(20, 20, 20, .35); }
.lay__pin.pin { width: 32px; height: 32px; border-width: 2.5px; font-size: 13px; box-shadow: none; transform: none !important; }
.lay__pin.pin--shop .ic { width: 16px; height: 16px; }
.lay__pin.pin--sight { font-size: 12px; } .lay__pin.pin--station { font-size: 10px; border-radius: 8px; } .lay__pin.pin--park { border-radius: 8px; }
.lay__t { font: 650 1.0625rem/1.2 var(--f-text); color: var(--ink); white-space: nowrap; }
.lay__n { font: 650 1.0625rem/1 var(--f-display); font-stretch: 90%; color: var(--ink-2); }
.lay[aria-pressed="false"] { background: transparent; border-style: dashed; box-shadow: none; }
.lay[aria-pressed="false"] .lay__pin { filter: grayscale(1); opacity: .45; }
.lay[aria-pressed="false"] .lay__t, .lay[aria-pressed="false"] .lay__n { color: var(--ink-2); opacity: .7; }
.lay[aria-pressed="false"] .lay__n { text-decoration: line-through; }
@media (min-width: 960px) {
  .mappage__layers { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .lay--shop { grid-column: 1 / -1; }
}
/* avviso sul telefono: con un dito si scorre la pagina */
.maphint { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; margin: 0; padding: 1rem; background: rgba(20, 20, 20, .55); color: #fff;
  font: 650 1.0625rem/1.3 var(--f-text); text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.maphint.is-on { opacity: 1; }
/* telefono: un dito scorre la pagina (pan-y), due dita muovono e ingrandiscono la mappa (gestite da app.js) */
@media (pointer: coarse) { [data-map].leaflet-container.leaflet-container.leaflet-container { touch-action: pan-y pinch-zoom; } }   /* batte le regole di Leaflet */
/* elenchi */
.mlist-title { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); margin: var(--s-4) 0 .6rem; }
.mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.mrow__go { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 0; }
.mrow__go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mrow__img { position: relative; width: 92px; height: 92px; border-radius: 14px; overflow: hidden; background: #f1eee9; display: grid; place-items: center; }
.mrow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mrow__go:hover .mrow__img img { transform: scale(1.06); }
.mrow__sign { font: 650 .875rem/1.05 var(--f-display); font-stretch: 85%; color: var(--brick); text-align: center; padding: .3rem; text-wrap: balance; }
.mrow__kind { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.mrow__kind .ic { width: 2rem; height: 2rem; }
.mrow__kind--park { background: var(--blue); } .mrow__kind--shuttle { background: var(--shuttle); } .mrow__kind--station { background: #474542; }
.mrow__txt { display: grid; gap: .2rem; min-width: 0; }
.mrow__name { display: flex; align-items: center; gap: .55rem; font: 650 1.1875rem/1.2 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; }
.mrow__n { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .75rem/1 var(--f-text); flex: none; transition: background .2s; }
.mrow__go:hover .mrow__n { background: var(--brick); }   /* al passaggio: solo il numero diventa mattone, nessuna linea sotto il nome */
.mrow small { font-size: .9375rem; color: var(--ink-2); line-height: 1.35; }
.mrow .mrow__k { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); }
.mrow .state { font-size: .875rem; margin-top: .15rem; }

.mlist-credits { margin: var(--s-3) 0 0; font-size: var(--fs-micro); color: var(--ink-2); }

/* Leaflet: tessere desaturate, segnaposto disegnati */
.leaflet-container { font-family: var(--f-text); background: var(--paper-2); isolation: isolate; }   /* i livelli di Leaflet (fino a 1000) restano dentro la mappa: mai sopra il menu */
.leaflet-tile-pane { filter: grayscale(.85) sepia(.18) contrast(.92) brightness(1.04); }
/* finestrella sulla mappa: angoli arrotondati, foto (o insegna) in alto, pulsanti del sito.
   Le regole che toccano Leaflet partono da .leaflet-container: il CSS di Leaflet si carica dopo il nostro. */
.leaflet-container .leaflet-popup-content-wrapper { padding: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .35); }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-container .leaflet-popup-content { margin: 0; width: 280px !important; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.leaflet-container .leaflet-popup a.leaflet-popup-close-button { top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font: 400 22px/1 var(--f-text); z-index: 2; }
.pop__media { position: relative; aspect-ratio: 16 / 9; background: #f1eee9; display: grid; place-items: center; overflow: hidden; }
.pop__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pop__sign { font: 650 1.6rem/1 var(--f-display); font-stretch: 85%; color: var(--brick); opacity: .85; padding: 1rem; text-align: center; }
.pop__n { position: absolute; left: .8rem; bottom: .8rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .875rem/1 var(--f-text); }
.pop__credit { position: absolute; right: .5rem; bottom: .4rem; font-size: .6875rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.pop__body { padding: 1rem 1.1rem 1.1rem; }
.pop__cat { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); margin: 0 0 .35rem !important; }
.pop h3 { font-size: 1.5rem; line-height: 1.05; margin: 0 0 .5rem; }
.pop p { margin: 0 0 .6rem; }
.pop__note { color: var(--ink-2); }
.pop__facts { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .35rem; }
.pop__facts li { display: flex; gap: .5rem; align-items: center; }
.pop__facts .ic { width: 1.1rem; height: 1.1rem; color: var(--brick); flex: none; }
.leaflet-container .pop__facts a { color: var(--ink); font-weight: 650; text-decoration: none; }
.pop__cta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.leaflet-container .pop .btn--sm { min-height: 2.6rem; font-size: .875rem; padding: 0 1em; color: #fff; }
.leaflet-container .pop .arrow { color: var(--ink); font-size: .9375rem; }
/* segnaposto: come i numeri della pianta in home (cerchio pieno, alone color carta, numero bianco).
   Negozi neri; parcheggi blu e stazione con gli angoli; navetta verde e luoghi ocra scuro tondi. Al passaggio: mattone. */
.pin-wrap { background: none; border: 0; }
.pin { box-sizing: border-box; width: 100%; height: 100%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 17px/1 var(--f-text);
  border-radius: 50%; border: 3.5px solid var(--paper); box-shadow: 0 2px 7px rgba(20, 20, 20, .28); transition: background-color .2s, transform .25s var(--ease); }
.pin--shop { font-size: 19px; }
.pin--sight { font-size: 15px !important; } .pin--park { font-size: 17px; } .pin--station { font-size: 13px !important; }
/* il percorso si disegna una volta all'apertura (dopo che la mappa ha preso le misure) */
.tour-line.is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 2.4s cubic-bezier(.6, 0, .3, 1) .4s forwards; }
.tour-line.is-drawing.is-drawn { stroke-dasharray: none; animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .tour-line.is-drawing { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }
.pin--park { background: var(--blue); border-radius: 10px; }
.pin--shuttle { background: var(--shuttle); }
.pin--sight { background: #8a6420; font-size: 13px; }
.pin--station { background: #474542; border-radius: 10px; font-size: 12px; letter-spacing: .02em; }
.pin--focus { background: var(--brick); font-size: 21px; }
.leaflet-marker-icon:hover .pin, .leaflet-marker-icon:focus-visible .pin { transform: scale(1.1); }
.leaflet-marker-icon:hover .pin--shop, .leaflet-marker-icon:focus-visible .pin--shop { background: var(--brick); }
/* niente riquadro blu: con la tastiera un anello ocra sul segnaposto e sulla mappa, col mouse nulla */
.leaflet-marker-icon:focus { outline: none; }
.leaflet-marker-icon:focus-visible .pin { box-shadow: 0 0 0 3px var(--focus), 0 2px 7px rgba(20, 20, 20, .28); }
.leaflet-container[data-map]:focus { outline: none; }
.leaflet-container[data-map]:focus-visible:not(.is-mouse) { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---------- Pagine istituzionali ---------- */
.textpage { padding-block: var(--s-6) var(--section); }   /* solo sopra e sotto: i margini laterali restano quelli di .wrap (9/11) */
.textpage__grid { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .textpage__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-7); } }
.logos { display: flex; flex-wrap: wrap; gap: .75rem; }
.logos span { width: 130px; height: 60px; display: grid; place-items: center; border: 1px dashed var(--rule); font-size: var(--fs-micro); color: var(--ink-2); text-align: center; }
.stub { padding: var(--s-6) 0 var(--section); }

/* ---------- Footer ---------- */
.ft { --ft-bg: #eeebe5; --ft-ink-2: #474542; --ft-rule: rgba(20, 20, 20, .18);   /* grigio pietra chiaro (palette A) */
  position: relative; isolation: isolate; overflow: hidden; background: var(--ft-bg); color: var(--ink); padding: var(--section) 0 var(--s-4); }
/* stessa xilografia della passeggiata, tagliata più in basso (i portici), seppiata e quasi invisibile */
.ft__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ft__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; filter: grayscale(1) sepia(.12) contrast(.85); opacity: .045; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent); }   /* «vedo e non vedo»: più tenue e sfumata ai bordi */
.ft a { color: inherit; text-decoration: none; }
.ft h2 { font: 650 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--brick); margin: 0 0 var(--s-2); }

/* in alto: il motto, un solo colore, e accanto chi siamo + mappa */
.ft__top { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
.ft__claim { font: 600 clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem)/1 var(--f-display); font-stretch: 90%; letter-spacing: -.035em; margin: 0; }
.ft__claim span { display: block; white-space: nowrap; }   /* sempre due righe: «Otto negozi,» / «dieci minuti a piedi.» */
.ft__intro { display: grid; gap: var(--s-3); justify-items: start; align-content: end; }
.ft__intro .logo b { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); }
.ft__intro .logo span { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); }
.ft__intro p { margin: 0; max-width: 40ch; font-size: var(--fs-body); color: var(--ft-ink-2); }
.ft__intro .btn:hover { text-decoration: none; }
.ft .btn--solid, .ft .btn--solid:hover { color: #fff; }
@media (min-width: 960px) { .ft__top { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--s-7); } }

/* la passeggiata in miniatura: 8 tappe sul filo rosso, con lo stato in tempo reale */
.ft__walk { border-top: 1px solid var(--ft-rule); padding-top: var(--s-4); }
.ft__walk h2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; }
.ft__walk h2 span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ft-ink-2); font-size: var(--fs-small); }
.ft__walk ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.ft__walk a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.ft__walk a:hover { text-decoration: none; }
.ft__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .875rem/1 var(--f-text); flex: none; transition: background .2s; }
.ft__walk a:hover .ft__n, .ft__walk a:focus-visible .ft__n { background: var(--brick); }
.ft__shop { display: grid; gap: .3rem; padding-top: .35rem; }
.ft__shop b { font-weight: 650; font-size: 1.0625rem; line-height: 1.2; }
.ft .state { font-size: .875rem; color: var(--ft-ink-2); }
@media (min-width: 700px) { .ft__walk ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  /* una sola fila: il filo rosso passa dietro i numeri */
  /* il filo va da bordo a bordo: 7 colonne uguali + l'ultima larga quanto il cerchio, così le tappe sono equidistanti
     e la tappa 8 sta sul filo destro del contenuto, con il nome allineato a destra */
  .ft__walk ol { position: relative; grid-template-columns: repeat(calc(var(--n, 8) - 1), minmax(0, 1fr)) 2.5rem; gap: 1rem; padding-bottom: .5rem; }   /* --n = numero dei negozi (footer.php) */
  .ft__walk ol::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 1.25rem; height: 2px; background: var(--brick); }
  .ft__walk li { position: relative; }
  .ft__walk li:nth-last-child(2) .ft__shop { max-width: calc(100% - 3.75rem); }   /* lascia spazio al nome dell'ultima tappa */
  .ft__walk li:last-child .ft__shop { position: absolute; right: 0; top: 3.3rem; width: max-content; max-width: 8rem; text-align: right; justify-items: end; }
  .ft__walk li:last-child .ft__shop b { justify-self: end; }
  .ft__walk a { position: relative; grid-template-columns: 1fr; gap: .8rem; }
  .ft__n { box-shadow: 0 0 0 5px var(--ft-bg); }
  .ft__shop { padding-top: 0; }
}

/* colonne: informazioni, progetto, Macerata adesso */
.ft__grid { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: 1fr 1fr; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--ft-rule); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; font-size: 1.0625rem; }
.ft__grid ul a { display: inline-flex; align-items: center; min-height: 40px; }
.ft__now { grid-column: 1 / -1; }
.ft__clock { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 .5rem; font: 650 clamp(2.4rem, 1.8rem + 1.6vw, 3.25rem)/1 var(--f-display); letter-spacing: -.02em; }
.ft__wx { display: inline-flex; align-items: center; gap: .4rem; font: 650 1.5rem/1 var(--f-text); }
.ft__wx[hidden] { display: none; }
.ft__wx svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ft__now ul li { display: flex; align-items: center; gap: .7rem; min-height: 40px; color: var(--ft-ink-2); }
.ft__now ul .ic { width: 1.4rem; height: 1.4rem; color: var(--brick); }
.ft__now ul a { color: var(--ink); font-weight: 600; }
@media (min-width: 960px) { .ft__grid { grid-template-columns: 1fr 1fr 1.3fr; } .ft__now { grid-column: auto; } }

/* bando e crediti */
.ft__bando { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--ft-rule); display: grid; gap: var(--s-2); font-size: var(--fs-micro); color: var(--ft-ink-2); }
.ft__bando .logos span { border-color: rgba(20, 20, 20, .3); color: var(--ft-ink-2); background: rgba(255, 255, 255, .25); }
.ft__bottom { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--ft-rule); display: grid; gap: .75rem 2rem; font-size: var(--fs-micro); color: var(--ft-ink-2); }
.ft__bottom p { margin: 0; }
.ft__by { font-size: var(--fs-small); color: var(--ink); white-space: nowrap; }
.ft__by b { font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 960px) { .ft__bottom { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; } .ft__src { text-align: center; } }

/* barra rapida mobile */
.qb { position: fixed; inset: auto 0 0 0; z-index: 650; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #333333; }
.qb ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.qb a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: var(--quickbar-h); color: #e2e0dc; text-decoration: none; font: 600 .75rem/1 var(--f-text); }
.qb a { position: relative; }
.qb a[aria-current="page"] { color: #fff; }
.qb a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: #fff; }   /* voce attiva bianca con una tacca (6/11; prima gialla) */
.qb .ic { width: 22px; height: 22px; }
@media (min-width: 960px) { .qb { display: none; } }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Griglie: i figli possono restringersi (evita overflow orizzontale su mobile) ---------- */
.mappage, .info-layout, .shop-body__grid, .textpage__grid, .hero__grid, .page-hero__grid, .reach__grid, .section-head { grid-template-columns: minmax(0, 1fr); }
.mappage > *, .info-layout > *, .shop-body__grid > *, .textpage__grid > *, .hero__grid > *, .page-hero__grid > *, .reach__grid > * { min-width: 0; }
@media (min-width: 960px) { .mappage { grid-template-columns: 420px minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .reach__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .reach .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-5); }   /* il testo a destra parte dove partono le schede */
  .reach__mapbox { order: -1; }   /* mappa a sinistra, partenze a destra: si alterna con l'apertura, che ha la scheda a destra */
  .shop-body__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .textpage__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .info-layout { grid-template-columns: 200px minmax(0, 1fr) 340px; } }

/* ===================================================================== template scheda: casi in più
   logo quadrato · nome alternativo · vetrina 4–10 · foto del negozio · periodi speciali · storia lunga */
.shop-hero__logo--square { height: 120px; mix-blend-mode: multiply; margin-left: -6px; }
.shop-hero__logo--script { height: 78px; margin-left: -4px; }   /* logo in corsivo su fondo bianco (Il Gioiello): ritagliato e fuso con la carta */
.shop-hero__aka { margin: .5rem 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.shop-hero__aka b { font-weight: 600; color: var(--ink); }
.swipe-hint { display: none; }
@media (max-width: 699px) {
  .showcase--many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-2); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-2); scroll-padding-inline: var(--gutter); }
  .showcase--many > * { flex: 0 0 72%; scroll-snap-align: start; }
  .swipe-hint { display: block; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .6rem; }
}

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0 0 var(--s-2); }
.gallery__item { margin: 0; }
.gallery__item img, .gallery__item .ph { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__item--wide { grid-column: 1 / -1; }
.gallery__item--wide img, .gallery__item--wide .ph { aspect-ratio: 16 / 9; }
.gallery figcaption { font-size: var(--fs-micro); color: var(--ink-2); margin-top: .45rem; letter-spacing: .02em; }
@media (max-width: 699px) {
  .gallery:not(.gallery--pending) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-2); scroll-padding-inline: var(--gutter); }
  .gallery:not(.gallery--pending) .gallery__item { flex: 0 0 85%; scroll-snap-align: start; }
  .gallery__item--wide img { aspect-ratio: 3 / 2; }
}
.gallery--pending { list-style: none; padding: 0; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.gallery--pending li { position: relative; aspect-ratio: 3 / 2; }
.gallery--pending .ph__mono { font-size: 1.5rem; }
.gallery--pending .ph__note { display: none; }
@media (min-width: 700px) { .gallery--pending { grid-template-columns: repeat(6, 1fr); } }

.seasons { margin-top: var(--s-3); }
.seasons h3 { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--brick); margin: 0 0 .4rem; }
.seasons ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.seasons li { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .15rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); }
.seasons__when { font-weight: 600; }
.seasons__now { grid-column: 2; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--open); font-weight: 700; }
.seasons li.is-now .seasons__when { color: var(--brick); }
.hours tr.is-season td { font-weight: 700; color: var(--brick-deep); }

.story { padding: var(--section) 0; background: var(--paper-2); border-top: 1px solid var(--rule); }
.story__grid { display: grid; }   /* colonne come «Il negozio»: le dà .shop-body__grid */
.story__fig { margin: 0; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }
.story__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }   /* foto intera: l'insegna «Giorgio orafo» non va tagliata */
.story__fig figcaption { font-size: var(--fs-small); color: var(--ink-2); padding: 1rem 1.25rem; }
.story__text .prose { max-width: 66ch; }
.story__pledge { margin: var(--s-5) 0 0; padding-left: var(--s-3); border-left: 2px solid var(--brick); max-width: 44ch; }   /* frase richiesta dalla famiglia: come la citazione delle altre schede */
.story__pledge p { font: italic 400 clamp(1.3rem, 1.15rem + .6vw, 1.7rem)/1.4 "Newsreader", Georgia, "Times New Roman", serif; margin: 0; text-wrap: pretty; }
/* bollino sotto il testo della storia (es. logo dei 40 anni del Prisma): un ricordo, piccolo, sul fondo carta */
.story__badge { margin: var(--s-5) 0 0; display: flex; align-items: center; gap: var(--s-3); }
.story__badge img { width: clamp(120px, 12vw, 170px); height: auto; flex: none; }
.story__badge figcaption { font-size: var(--fs-small); color: var(--ink-2); max-width: 22ch; }
@media (min-width: 1024px) {
  .story__aside { position: sticky; top: calc(var(--header-h) + 96px); align-self: start; }
}

/* titoli in un solo colore: niente corsivi o parole evidenziate in un secondo colore */
.display em, .h2 em, .block-title em, .walk__head .h2 em, .season .h2 em, h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* «Macerata adesso» su smartphone: una cella per riga, previsioni in colonna */
@media (max-width: 599px) {
  .now { grid-template-columns: minmax(0, 1fr); }
  .now__cell[data-weather] { border-top: 1px solid #3a3a3a; }
  .wx-days li { grid-template-columns: 1fr; justify-items: start; }
  .wx-days svg { grid-row: auto; width: 34px; height: 34px; }
  .wx-days .num { white-space: nowrap; }
}

/* hero: la pianta è a tutto schermo, testi e barra restano nella colonna centrale da 1500 px */
.hero__legend { right: var(--edge); }
.wx-days .num { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .now__cell { padding: 1.1rem 1.1rem; } .wx-days { gap: .6rem; } .wx-days li { font-size: 1rem; } .wx-days svg { width: 40px; height: 40px; } }
@media (max-width: 1023px) { .hero__legend { position: static; width: fit-content; margin: var(--s-2) var(--gutter) var(--s-2); } }
@media (max-width: 599px) { .hero__legend:not(.hero__legend--map) { width: auto; max-width: none; justify-content: flex-start; } .hero__legend:not(.hero__legend--map) .hero__legend-v { justify-content: space-between; flex: 1; } .hero__legend:not(.hero__legend--map) > div { flex: 1; } }   /* telefono: il riquadro del percorso su tutta la larghezza */

/* hero, solo desktop con mouse: passando su un numero la pillola rossa si allunga e mostra il nome del negozio */
.route-name { opacity: 0; pointer-events: none; clip-path: inset(0 82% 0 0 round 999px); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.route-name rect { fill: var(--brick); }
.route-name circle { fill: #fff; }
.route-name text { fill: #fff; font-family: var(--f-text); font-weight: 650; letter-spacing: -.01em; }
.route-name text:last-child { opacity: 0; transform: translateX(-6px); transform-box: fill-box; transition: opacity .3s .15s, transform .4s .15s cubic-bezier(.2, .8, .2, 1); }
.route-name .route-name__n { fill: var(--brick); font-weight: 700; text-anchor: middle; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
  .route-name.is-on { opacity: 1; clip-path: inset(0 0 0 0 round 999px); }
  .route-name.is-on text:last-child { opacity: 1; transform: none; }
}
/* i contenitori del testo coprono la pianta: lasciano passare il mouse, così i numeri sono cliccabili */
.hero__inner, .hero__now { pointer-events: none; }
.hero__title, .hero__now > * { pointer-events: auto; }
@media (min-width: 1024px) and (max-height: 940px) {
  .walk--h .stop__media { aspect-ratio: 3 / 1; }
  .walk--h .walk__head p { font-size: var(--fs-small); }
  /* striscia foto bassa: numero centrato in altezza, «Foto in arrivo» a destra, iniziali più piccole */
  .walk--h .stop__n { top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; font-size: .95rem; }
  .walk--h .ph__note { left: auto; right: .9rem; }
  .walk--h .stop__media .ph__mono { font-size: 2.4rem; }
}
/* portatili (finestra ≤ 860 px, es. MacBook 1440×900): la scheda ferma deve entrare tutta, fino a «Portami qui» */
@media (min-width: 1024px) and (max-height: 860px) {
  .walk--h { padding-top: calc(var(--header-h) + .25rem); }
  .walk--h .walk__head .h2 { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.5rem); }
  .walk--h .stop__media { aspect-ratio: 5 / 1; }
  .walk--h .walk__head { margin-bottom: var(--s-2); }
  .walk--h .stop__body { padding: 1.15rem 1.5rem 1.2rem; gap: .35rem; }
  .walk--h .stop__where { margin-top: .4rem; padding: .75rem 1.05rem; }
  .walk--h .stop__k { margin-top: .7rem; }
  .walk--h .stop__reach li { padding: .45rem 0; }
  .walk--h .stop__cta { padding-top: .9rem; }
}
/* schermi ancora più bassi (es. 1366×768 con le barre del browser): niente blocco dello scroll,
   le tappe scorrono in orizzontale da sole (trackpad, barra o Maiusc + rotellina) */
@media (min-width: 1024px) and (max-height: 759px) {
  .walk--h { min-height: 0; padding-block: var(--s-5) var(--s-4); }
  .walk--h .walk__track { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .walk--h .stop { flex: none; scroll-snap-align: start; }
}
.sights__play-on, .sights__play-off { display: inline-flex; align-items: center; gap: .4rem; }

/* pagina Mappa: lo stesso riquadro del percorso della home, in alto a destra sopra la mappa */
.hero__legend.hero__legend--map { position: absolute; top: var(--s-2); right: var(--s-2); left: auto; margin: 0; z-index: 900; pointer-events: none;
  box-shadow: 0 10px 24px -18px rgba(20, 20, 20, .35); }
@media (max-width: 599px) {
  .hero__legend.hero__legend--map { top: .6rem; right: .6rem; gap: .6rem; padding: .5rem .8rem .5rem .6rem; }
  .hero__legend--map .hero__legend-ico { width: 34px; height: 20px; }
  .hero__legend--map .hero__legend-k { display: none; }
  .hero__legend--map .hero__legend-v b { font-size: 1.2rem; }
}

/* «Vicino a me» sopra la mappa (in basso a sinistra), messaggio, punto blu «sei qui», distanza nell'elenco */
.mapnear { position: absolute; left: var(--s-2); bottom: calc(var(--s-2) + 14px); z-index: 900; min-height: 3rem; gap: .55rem; background: var(--surface);
  box-shadow: 0 10px 24px -18px rgba(20, 20, 20, .35); }
.mapnear .ic { width: 1.25rem; height: 1.25rem; color: var(--brick); transition: transform .3s; }
.mapnear[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mapnear[aria-pressed="true"] .ic { color: var(--ochre); }
:is(.mapnear, [data-near-me]).is-wait .ic { animation: cerca 1s ease-in-out infinite alternate; }   /* «Vicino a me» mentre cerca la posizione */
@keyframes cerca { to { transform: rotate(-20deg) scale(.9); } }
.maptoast { position: absolute; left: 50%; bottom: calc(var(--s-2) + 72px); transform: translateX(-50%); z-index: 950; width: max-content; max-width: calc(100% - 2rem);
  margin: 0; padding: .7rem 1.1rem; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: var(--fs-small); line-height: 1.35; text-align: center;
  box-shadow: 0 12px 28px -18px rgba(20, 20, 20, .5); }
.me-wrap { background: none; border: 0; }
.pin.is-near { background: var(--brick); }   /* il negozio più vicino a te */
.me { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; background: #2a6fdb; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.me::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: rgba(42, 111, 219, .22); animation: sonar 2s ease-out infinite; z-index: -1; }
@keyframes sonar { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.mrow__dist { font: 650 .9375rem/1.2 var(--f-text); color: #1f5fc4; }   /* blu del «sei qui», scurito per il contrasto AA */
.mlist-sort { margin-left: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: #1f5fc4; }
@media (prefers-reduced-motion: reduce) { .me::after, :is(.mapnear, [data-near-me]).is-wait .ic { animation: none; } }
@media (max-width: 599px) { .mapnear { left: .6rem; bottom: calc(.6rem + 14px); min-height: 2.75rem; } }

/* Fascia del Natale nel rosso dei pulsanti (scelta il 6/11). Sul rosso tutto bianco: titoletto, testi, bordi;
   prossimo giorno bianco con numero rosso, pulsante bianco con freccia nera, al passaggio nero. */
.season { --season-bg: var(--brick); --season-hover: var(--ink); background: var(--season-bg); }   /* Banner iniziative: colore scelto nell'iniziativa */
.season--nero { --season-bg: var(--ink); --season-hover: var(--brick); }
.season--verde { --season-bg: var(--shuttle); }
.season--blu { --season-bg: #1b4174; }
.season .kicker { color: #fff; }
.season__lead, .season__where { color: #fff; }
.season__walker { background: #fff; color: var(--season-bg); }
.season__days li { border-color: rgba(255, 255, 255, .45); }
.season__days span { color: #fff; }
.season__days .is-next { background: #fff; border-color: #fff; color: var(--season-bg); }
.season__days .is-next span { color: var(--season-bg); }
.season__facts, .season__facts li { border-color: rgba(255, 255, 255, .4); }
.season__facts li { color: #fff; }
.season__cta .btn__chip { background: var(--season-hover); color: #fff; }
.season__cta:hover { background: var(--season-hover); border-color: var(--season-hover); color: #fff; }
.season__cta:hover .btn__chip { background: #fff; color: var(--season-hover); }
.season :is(a):hover { text-decoration-color: #fff; }
.season__days { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }   /* da 1 a 5 colonne secondo le date (fino a 7: a capo) */
@media (min-width: 960px) { .season--solo .season__in { grid-template-columns: minmax(0, 1fr); } .season--solo .season__main { max-width: 52rem; } }   /* senza riquadro a destra */

/* ---------- Numeri delle tappe: ovunque lo stesso stile dei segnaposto della mappa ----------
   cerchio nero pieno, numero bianco in grassetto (circa 40% del diametro), alone del colore del fondo, ombra leggera.
   Al passaggio sulla riga diventano rossi (regole delle singole sezioni). */
:is(.shoprow__n, .more__n, .ft__n, .mrow__n, .stop__n, .pop__n, .sheet__n) {
  border: 0; background: var(--ink); color: #fff; font-family: var(--f-text); font-weight: 700; letter-spacing: 0; line-height: 1;
  box-shadow: 0 0 0 3px var(--halo, var(--paper)), 0 2px 7px rgba(20, 20, 20, .28); }
.shoprow__n { width: 2.6rem; height: 2.6rem; font-size: 1.0625rem; }
.more__n { width: 2.3rem; height: 2.3rem; font-size: .9375rem; }
.ft__n { --halo: var(--ft-bg); width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.mrow__n { width: 1.95rem; height: 1.95rem; font-size: .8125rem; box-shadow: 0 0 0 2.5px var(--paper), 0 1px 5px rgba(20, 20, 20, .25); }
.stop__n { --halo: #fff; width: 3rem; height: 3rem; font-size: 1.1875rem; }
.pop__n { --halo: #fff; width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.sheet__n { --halo: var(--paper); width: 34px; height: 34px; font-size: .875rem; box-shadow: 0 0 0 2.5px var(--paper); background: var(--ink); border: 0; color: #fff; }
.sheet__route a:hover .sheet__n, .sheet__route a:focus-visible .sheet__n, .sheet__route a[aria-current="page"] .sheet__n { box-shadow: 0 0 0 2.5px var(--paper); }
@media (min-width: 1100px) { .ft__n { box-shadow: 0 0 0 3px var(--ft-bg), 0 0 0 7px var(--ft-bg), 0 2px 7px rgba(20, 20, 20, .28); } }

/* passeggiata trascinabile: niente selezione del testo mentre si trascina */
html.is-dragging, html.is-dragging * { user-select: none !important; -webkit-user-select: none !important; }
.walk__track img { -webkit-user-drag: none; }

/* ---------- Scheda negozio: carosello a tutta larghezza + informazioni subito sotto ----------
   Le regole partono da .shop-gal.swiper perché il CSS di Swiper si carica dopo il nostro. */
.shop-hero { padding: var(--s-2) 0 var(--s-5); }
.shop-gal-wrap { overflow: hidden; }   /* la fila di foto va da bordo a bordo dello schermo */
.shop-gal.swiper { width: auto; overflow: visible; padding: 0; cursor: grab; }
.shop-gal.swiper:active { cursor: grabbing; }
.shop-gal .swiper-wrapper { align-items: stretch; }
.shop-gal .shop-gal__slide { position: relative; width: auto; height: clamp(250px, 36vh, 460px); aspect-ratio: var(--ar, 3/2); flex-shrink: 0; margin: 0; overflow: hidden; border-radius: 18px; background: var(--paper-2); }
.shop-gal .shop-gal__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* velatura leggera in basso: didascalia, contatore e frecce si leggono meglio sulle foto chiare */
.shop-gal .shop-gal__slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(20, 20, 20, .28), rgba(20, 20, 20, 0)); pointer-events: none; }
.shop-gal .shop-gal__slide figcaption { z-index: 1; }
.shop-gal .shop-gal__slide figcaption { position: absolute; left: .9rem; bottom: .8rem; max-width: calc(100% - 1.8rem); padding: .35rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--ink); font-size: .8125rem; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .4s var(--ease); }
.shop-gal .shop-gal__slide:hover figcaption, .shop-gal .swiper-slide-active figcaption { opacity: 1; transform: none; }
.shop-gal .shop-gal__slide.is-under-bar figcaption { opacity: 0; transform: translateY(4px); }   /* sotto contatore e frecce: niente didascalia */
/* lente: in alto a destra, al passaggio e sulla foto ferma in primo piano; sul telefono resta visibile sulla foto in primo piano */
.shop-gal__zoom { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(20, 20, 20, .45); cursor: zoom-in;
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--ease), background .2s, color .2s; }
.shop-gal__zoom .ic { width: 1.25rem; height: 1.25rem; }
.shop-gal .shop-gal__slide:hover .shop-gal__zoom, .shop-gal .swiper-slide-active .shop-gal__zoom, .shop-gal__zoom:focus-visible { opacity: 1; transform: none; }
.shop-gal__zoom:hover { background: var(--brick); color: #fff; }
.shop-gal__zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: none) { .shop-gal .shop-gal__slide:not(.swiper-slide-active) .shop-gal__zoom { opacity: 0; } }
.shop-gal:not(.swiper-initialized) .shop-gal__zoom { opacity: 1; transform: none; }   /* una sola foto o carosello non partito */
.shop-gal .shop-gal__slide--ph { aspect-ratio: 16/9; }

/* ---------- Foto a tutto schermo (app.js): fondo scuro, foto al centro, contatore e chiudi in alto, frecce ai lati ---------- */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: auto 1fr; color: #fff; }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: rgba(14, 14, 14, .95); }
.lb__top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem, 3vw, 2rem); }
.lb__count { margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .72); }
.lb__count b { font: 650 1.375rem/1 var(--f-display); color: #fff; }
.lb__stage { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 0; padding: 0 0 clamp(1rem, 4vh, 2.5rem); }
.lb__img { display: block; max-width: none; border-radius: 6px; background: #222; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; will-change: transform; }
.lb__cap { max-width: min(60ch, 90vw); text-align: center; font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.lb__cap[hidden] { display: none; }
.lb__btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.lb__btn .ic { width: 1.2rem; height: 1.2rem; }
.lb__btn:hover { background: var(--brick); color: #fff; }
.lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lb__prev, .lb__next { position: absolute; top: 50%; margin-top: -1.5rem; }
.lb__prev { left: clamp(1rem, 3vw, 2rem); }
.lb__next { right: clamp(1rem, 3vw, 2rem); }
.lb__prev .ic { transform: rotate(180deg); }
@media (max-width: 699px) {   /* telefono: foto a tutta larghezza, frecce in basso ai lati della didascalia */
  .lb__img { border-radius: 0; }
  .lb__prev, .lb__next { top: auto; bottom: 1rem; margin: 0; }
  .lb__stage { padding-bottom: 5rem; }
}
/* senza JavaScript: una fila che scorre di lato */
.shop-gal:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--edge); }
.shop-gal:not(.swiper-initialized) .shop-gal__slide { scroll-snap-align: start; }
/* barra sotto il carosello: contatore e frecce, allineati al contenuto */
.shop-gal-wrap { position: relative; overflow: hidden; }
/* contatore e frecce sopra le foto, in basso a destra, allineati al bordo del contenuto */
.shop-gal__bar { position: absolute; left: 0; right: 0; bottom: .9rem; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding-block: 0; pointer-events: none; }
.shop-gal__bar > * { pointer-events: auto; }
.shop-gal__count { padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px -10px rgba(20, 20, 20, .4); }
.shop-gal__btn { box-shadow: 0 6px 16px -10px rgba(20, 20, 20, .4); }
.shop-gal__count { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.shop-gal__count b { font: 650 1.375rem/1 var(--f-display); color: var(--ink); }
.shop-gal__nav { display: flex; gap: .5rem; }
.shop-gal__btn { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.shop-gal__btn .ic { width: 1.2rem; height: 1.2rem; }
.shop-gal__btn:is([data-gal-prev], [data-near-prev]) .ic { transform: rotate(180deg); }
.shop-gal__btn:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.shop-gal__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shop-gal__bar[hidden] { display: none; }
/* informazioni: a sinistra chi è, a destra tutto quello che serve subito */
.shop-hero .shop-hero__grid { display: grid; gap: var(--s-4); margin-top: var(--s-4); align-items: start; }
.shop-hero .shop-hero__name { font-size: clamp(2.8rem, 1.6rem + 4vw, 5.25rem); line-height: .92; margin: .1em 0 .2em; }
.shop-hero .shop-hero__hook { max-width: 34ch; margin-bottom: 0; }
.shop-info { padding: var(--s-4) var(--s-4) var(--s-4); border-radius: 22px; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 14px 30px -26px rgba(20, 20, 20, .25); }
.shop-info__list { margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.shop-info__list > div { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .35rem 1rem; align-content: start; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.shop-info__list > div:nth-child(-n+2) { padding-top: 0; }
.shop-info__list .ic { grid-row: 1 / span 2; width: 2rem; height: 2rem; color: var(--brick); stroke-width: 1.6; margin-top: -.3rem;   /* più grandi (6/11) */ }
.shop-info__list dt { font: 600 var(--fs-micro)/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.shop-info__list dd { margin: 0; display: grid; gap: .3rem; justify-items: start; align-content: start; font-size: 1.0625rem; line-height: 1.4; }
.shop-info__list dd b { font-weight: 650; }
.shop-info__list dd span { color: var(--ink-2); }
.shop-info__list dd .shop-info__line { color: var(--ink); }
.shop-info__list dd .shop-info__line b { margin-right: .25em; }
.shop-info__list dd a { font-weight: 600; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.shop-info__list dd a:hover { background-position: 0 100%; background-size: 100% 1px; }
.shop-info__list dd a[href^="#"] { font-size: .875rem; color: var(--brick); margin-top: .15rem; }
.shop-info__hours { font-size: .9375rem; }
.shop-info .btn-row { gap: .5rem; }
@media (max-width: 599px) {
  .shop-info { padding: var(--s-2); }
  .shop-info__list { grid-template-columns: minmax(0, 1fr); }
  .shop-info__list > div:nth-child(2) { padding-top: .75rem; }
  .shop-gal .shop-gal__slide { height: 62vw; max-height: 340px; border-radius: 14px; }
  .shop-gal .shop-gal__slide figcaption { display: none; }   /* sul telefono la didascalia finirebbe sotto le frecce (resta nell'alt) */
}
@media (min-width: 960px) {
  .shop-hero .shop-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: var(--s-6); align-items: center; }
  /* l'apertura riempie lo schermo (sotto menu, avviso navetta e briciole): il sottomenu della pagina compare solo scorrendo,
     nome e scheda stanno al centro dello spazio libero sotto le foto (6/11) */
  .shop-hero { min-height: calc(100svh - var(--header-h) - var(--ribbon-h) - 1.8rem); display: flex; flex-direction: column; padding-bottom: var(--s-6); }
  .shop-hero .shop-hero__grid { flex: 1; margin-top: var(--s-5); }
}

/* sotto i 960 px ci sono già Portami qui · Chiama · WhatsApp nella barra fissa in basso: niente doppioni */
@media (max-width: 959px) { .shop-info .btn-row { display: none; } .shop-info__list { margin-bottom: 0; } .shop-info__list > div:last-child { border-bottom: 0; padding-bottom: 0; } }

/* sfondo della scheda: pezzo di pianta leggero dietro nome e informazioni (a tutta larghezza, sfumato) */
.shop-hero .shop-hero__grid { position: relative; isolation: isolate; }
.shop-map-bg { position: absolute; z-index: -1; top: calc(var(--s-4) * -1); bottom: calc(var(--s-5) * -1); left: calc(50% - 50vw); width: 100vw; pointer-events: none; opacity: .32; }
.shop-map-bg svg { display: block; width: 100%; height: 100%; }
.shop-map-bg__route { fill: none; stroke: var(--brick); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.shop-map-bg__dot { fill: var(--ink); stroke: var(--paper); stroke-width: 4; }
.shop-map-bg__n { fill: #fff; font: 700 18px var(--f-text); text-anchor: middle; }
@media (max-width: 959px) { .shop-map-bg { opacity: .25; } }

/* loghi dei negozi: mai deformati (proporzioni originali, al massimo si rimpiccioliscono interi) */
.shop-hero__logo { width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.shop-hero__logo--wide { height: 44px; }
.shop-hero__logo--stack { height: 59px; }   /* marchio su due righe (Nocelli): più alto, perché la seconda riga resti leggibile */

/* telefoni piccoli (≤ 380 px, es. iPhone SE 320): niente esce dallo schermo (test del 6/11) */
@media (max-width: 380px) {
  .hours td { white-space: normal; }
  .hours th { padding-right: .6rem; }
  .hero__legend { max-width: calc(100% - 2 * var(--gutter)); flex-wrap: wrap; }
  .hero__legend-v { gap: .2rem; } .hero__legend-v b { font-size: 1.2rem; } .hero__legend-v i { margin: 0 .3rem; } .hero__legend-ico { width: 36px; } .hero__legend { gap: .6rem; padding-inline: .7rem .9rem; }
  .btn { white-space: normal; text-align: left; line-height: 1.2; padding-block: .6rem; }
  .mapcard { padding: 1rem; }
  .ft__grid > * { min-width: 0; }
}

/* ---------- «Cosa vedere»: la foto di ogni tappa sotto il suo titolo (9/11) ---------- */
.guide-fig { margin: var(--s-2) 0 var(--s-3); }
.guide-fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--paper-2); }
.guide-fig figcaption { margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }
.guide-fig figcaption a { color: inherit; }
.guide-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.guide-figs .guide-fig { margin: 0; }
.guide-figs .guide-fig img { aspect-ratio: 4 / 3; object-fit: cover; }   /* due foto di proporzioni diverse: stessa altezza */
@media (max-width: 479px) { .guide-figs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Aree da toccare (9/11, verifica responsive): almeno ~24–44 px senza cambiare l'aspetto ---------- */
.logo { position: relative; }
.logo::after { content: ""; position: absolute; inset: -12px -6px; }   /* il logo è alto 21 px: l'area cliccabile arriva a ~45 */
.route-dot circle.route-dot__hit { fill: transparent !important; stroke: none !important; }   /* cerchio invisibile più grande intorno ai numeri della pianta */
@media (max-width: 767px) {
  .shop-info__list dd a { position: relative; }
  .shop-info__list dd a::after { content: ""; position: absolute; inset: -7px -4px; }   /* «Tutti gli orari», telefono, WhatsApp nel pannello della scheda */
}

/* ------------------------------------------------------------ Contatti (templates/contatti.php)
   Niente modulo: l'email in grande come un titolo, «Scrivi» e «Copia»; riquadro bianco coi dati del CCN;
   argomenti nei blocchi della chiusura dell'archivio (.more) che aprono l'email con l'oggetto; gli 8 negozi da chiamare. */
.mailbox { display: grid; gap: var(--s-5); margin-bottom: var(--section); }
.mailbox__main { border-top: 1px solid var(--ink); padding-top: var(--s-4); min-width: 0; }
.mailbox__k { color: var(--ink-2); margin-bottom: var(--s-3); }
.mailbox__addr { margin: 0 0 var(--s-4); font: 600 clamp(1.7rem, .9rem + 4.2vw, 4.6rem)/1.02 var(--f-display); font-stretch: 88%; letter-spacing: -.035em; overflow-wrap: anywhere; }
.mailbox__addr a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brick), var(--brick)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .25s; }
.mailbox__addr a:is(:hover, :focus-visible) { color: var(--brick); background-size: 100% 2px; }
.mailbox__addr .todo + * { font-size: 1.125rem; }
.mailbox__addr:has(.todo) { font-size: 1.25rem; font-family: var(--f-text); letter-spacing: 0; }
.mailbox__btns .btn[hidden] { display: none; }
.mailbox__status { min-height: 1.5em; margin: .9rem 0 0; font-weight: 600; color: var(--open); }
.mailbox__note { margin: var(--s-3) 0 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
.mailbox__card { margin: 0; align-self: start; }
.mailbox__card > h2 { margin-bottom: var(--s-2); }
.mailbox__dl { margin: 0; }
.mailbox__dl > div { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.mailbox__dl > div:first-child { border-top: 0; padding-top: .25rem; }
.mailbox__dl dt { font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mailbox__dl dd { margin: 0; font-size: 1.125rem; line-height: 1.45; overflow-wrap: anywhere; }
.mailbox__dl dd a { color: var(--ink); }
@media (min-width: 1024px) {
  .mailbox { grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: var(--s-6); align-items: start; }
  .mailbox__card { margin-top: var(--s-4); }
}
@media (min-width: 600px) and (max-width: 1023px) { .mailbox__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } .mailbox__dl > div:nth-child(2) { border-top: 0; padding-top: .25rem; } }

/* argomenti: senza email (non ancora inserita) i blocchi restano testo, senza freccia né passaggio */
.topics .more__big { font-size: clamp(4rem, 2.8rem + 4vw, 6.5rem); }
.topic:not([href]) { cursor: default; }
.topic:not([href])::before, .topic:not([href]) .topic__go { display: none; }
.topic:not([href]):hover .more__big { font-weight: 300; }
.topic__go b { font: 650 1.125rem/1.25 var(--f-text); font-stretch: 100%; overflow-wrap: anywhere; }

/* gli 8 negozi da chiamare: righe come l'elenco dei blocchi, pulsanti a destra (sotto, su telefono) */
.dial { margin-bottom: var(--section); }
.dial__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.dial__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.dial__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; min-width: 0; }
.dial__who a { text-decoration: none; color: var(--ink); }
.dial__who a:is(:hover, :focus-visible) { color: var(--brick); }
.dial__who b { font: 650 clamp(1.25rem, 1.1rem + .5vw, 1.6rem)/1.15 var(--f-display); font-stretch: 90%; letter-spacing: -.015em; }
.dial__who small { font-size: .9375rem; color: var(--ink-2); }
.dial__who .state { flex-basis: 100%; font-size: .875rem; }
.dial__cta { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; }
.dial__row:hover .more__n { background: var(--brick); }
.dial__more { margin: var(--s-4) 0 0; font-size: 1.125rem; }
@media (min-width: 760px) {
  .dial__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .dial__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dial__cta { grid-column: auto; justify-content: flex-end; }
}
@media (min-width: 760px) and (max-width: 1199px) { .dial__row { grid-template-columns: auto minmax(0, 1fr); } .dial__cta { grid-column: 2; justify-content: flex-start; } }
@media (max-width: 599px) {
  .dial__cta .btn { flex: 1 1 0; justify-content: center; }   /* due pulsanti affiancati a tutta larghezza, comodi col pollice */
  .mailbox__card { padding: 1.25rem; }
}

/* testo solo per i lettori di schermo (classe standard di WordPress) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ Il progetto (templates/progetto.php)
   Sei tempi, ognuno con una forma: frase grande · cifre · linea della passeggiata · blocchi numerati alternati ·
   scheda del bando · chiusura. Poco rosso: la linea, le parole in corsivo della frase, i numeri dei blocchi. */
.pj > section:not(.page-hero) { margin-bottom: var(--section); }

/* 1 · chi siamo */
.pj-about { display: grid; gap: var(--s-4); }
.pj-about__k { color: var(--ink-2); margin: 0; }
.pj-about__big { margin: 0; max-width: 21ch; font: 600 clamp(2.1rem, 1.2rem + 3.4vw, 4.6rem)/1.04 var(--f-display); font-stretch: 88%; letter-spacing: -.035em; text-wrap: balance; }
.pj-about__big em, .pj-about__big i { font-style: normal; color: var(--brick); }
.pj-about__txt { max-width: 60ch; }
.pj-about__txt > :first-child { margin-top: 0; }
@media (min-width: 1024px) {
  .pj-about { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--s-6); align-items: start; }
  .pj-about__k { padding-top: 1.1rem; }
  .pj-about__big, .pj-about__txt { grid-column: 2; }
  .pj-about__txt { justify-self: end; width: min(100%, 36rem); }
}

/* 2 · in numeri: fascia fra due filetti, cifre strette e grandi */
.pj-nums__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.pj-nums__list li { display: grid; gap: .6rem; padding: var(--s-4) var(--s-2) var(--s-4) 0; border-top: 1px solid var(--rule); }
.pj-nums__list li:nth-child(-n+2) { border-top: 0; }
.pj-nums__list li:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid var(--rule); }
.pj-nums__n { display: flex; align-items: baseline; gap: .35rem; font: 300 clamp(4rem, 2.6rem + 5vw, 8.5rem)/.82 var(--f-display); font-stretch: 62%; letter-spacing: -.04em; }
.pj-nums__n small { font: 600 clamp(1.1rem, .9rem + .6vw, 1.6rem)/1 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; color: var(--ink-2); }
.pj-nums__l { font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); max-width: 22ch; }
@media (min-width: 900px) {
  .pj-nums__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .pj-nums__list li { border-top: 0; padding: var(--s-5) var(--s-3); }
  .pj-nums__list li:first-child { padding-left: 0; }
  .pj-nums__list li + li { border-left: 1px solid var(--rule); }
}

/* 3 · le attività sulla linea rossa (telefono: verticale; da 900 px: orizzontale) */
.pj-route { list-style: none; margin: 0; padding: 0; position: relative; display: grid; }
.pj-route__stop { position: relative; }
.pj-route__stop:not(:last-child)::before { content: ""; position: absolute; left: 1.3rem; top: 1.85rem; bottom: -1.85rem; width: 2px; margin-left: -1px; background: var(--brick); }   /* dal centro di un numero al successivo: finisce sull'ultima tappa */
.pj-route a { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: .55rem 0 1.1rem; text-decoration: none; color: var(--ink); }
.pj-route__n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .9375rem/1 var(--f-text); box-shadow: 0 0 0 5px var(--paper); transition: background .25s; }
.pj-route a:is(:hover, :focus-visible) .pj-route__n, .pj-route__stop.is-lead .pj-route__n { background: var(--brick); }
.pj-route__txt { display: grid; gap: .2rem; padding-top: .2rem; }
.pj-route__txt b { font: 650 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.15 var(--f-display); font-stretch: 90%; letter-spacing: -.015em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease); justify-self: start; }
.pj-route a:is(:hover, :focus-visible) .pj-route__txt b { background-size: 100% 1.5px; }
.pj-route__txt small { font-size: .9375rem; color: var(--ink-2); }
.pj-route__lead { justify-self: start; margin-top: .3rem; padding: .2rem .6rem; border: 1px solid var(--brick); border-radius: 999px; font: 600 var(--fs-micro)/1.2 var(--f-text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--brick); }
@media (min-width: 900px) {
  .pj-route { grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 1rem; }   /* --n = numero dei negozi (templates/progetto.php) */
  .pj-route__stop:not(:last-child)::before { left: 1.3rem; right: calc(-1rem - 1.3rem); top: 1.3rem; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .pj-route a { grid-template-columns: 1fr; gap: .9rem; padding: 0; }
  .pj-route__txt b { font-size: clamp(1.05rem, .7rem + .55vw, 1.3rem); }
  .pj-route__txt small { font-size: .875rem; }
}

/* 4 · cosa finanzia il bando: fascia chiara, blocchi alternati foto/testo */
.pj-fund { background: var(--paper-2); padding: var(--section) 0; }
.pj-fund__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.pj-item { display: grid; gap: var(--s-3); }
.pj-item__media { margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #fff; }
.pj-item__media:has(img) { aspect-ratio: auto; }   /* la foto si vede intera, nella sua proporzione (es. l'anteprima del portale) */
.pj-item__media img { width: 100%; height: auto; display: block; }
.pj-item__ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; isolation: isolate; }
.pj-item__ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/centro-base.svg) 50% 45% / 1400px auto no-repeat; opacity: .35; }
.pj-item__ph span { font: 300 clamp(7rem, 5rem + 8vw, 13rem)/.8 var(--f-display); font-stretch: 62%; letter-spacing: -.05em; color: var(--brick); }
.pj-item__txt { display: grid; gap: var(--s-2); align-content: center; }
.pj-item__n { font: 600 var(--fs-micro)/1 var(--f-text); letter-spacing: .16em; color: var(--brick); display: flex; gap: .75em; align-items: center; }
.pj-item__n::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.pj-item__txt h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1.04; text-wrap: balance; }
.pj-item__txt p { margin: 0; max-width: 44ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) {
  .pj-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-6); align-items: center; }
  .pj-item__media { aspect-ratio: 4 / 3; }   /* affiancata al testo: più alta; sotto i 900 px resta 16:9 */
  .pj-item:nth-child(even) .pj-item__media { order: 2; }
}

/* 5 · scheda del bando */
.pj-grant > .more__h { margin-bottom: var(--s-4); }
.pj-grant__grid { display: grid; gap: var(--s-4); }
.pj-grant__card { margin: 0; }
.pj-grant__card > div { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.pj-grant__card > div:first-child { border-top: 0; padding-top: 0; }
.pj-grant__card dt { font: 600 var(--fs-micro)/1.35 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pj-grant__card dd { margin: 0; font-size: 1.125rem; line-height: 1.45; overflow-wrap: anywhere; }
.pj-grant__legal { margin: 0 0 var(--s-4); max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.pj-grant__k { color: var(--ink-2); }
.pj-grant__logos img { height: 60px; width: auto; }
@media (min-width: 600px) { .pj-grant__card > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; } }
@media (min-width: 1024px) { .pj-grant__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-6); align-items: start; } }

/* 6 · chiusura */
.pj-end__in { display: grid; gap: var(--s-4); }
.pj-end__in::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--ink); margin-bottom: var(--s-2); }   /* filetto nella colonna del testo */
.pj-end__h { font-size: var(--fs-h2); letter-spacing: -.035em; font-stretch: 90%; text-wrap: balance; max-width: 16ch; }
.pj-end__p { margin: var(--s-2) 0 0; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-2); }
@media (min-width: 1024px) { .pj-end__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); } }

/* Negozi sul telefono: «Vicino a me» e «Aperti adesso» per primi nella barra che scorre; il messaggio della posizione
   (sul telefono il conteggio della barra è nascosto) compare in un avviso in basso, sopra la barra di navigazione */
@media (max-width: 1023px) { .toolbar [data-near-me] { order: -2; } .toolbar [data-only-open] { order: -1; } }
.geo-toast { position: fixed; left: 50%; bottom: calc(var(--quickbar-h) + env(safe-area-inset-bottom) + .75rem); transform: translateX(-50%); z-index: 900;
  width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: .8rem 1.1rem; border-radius: 14px; background: var(--ink); color: #fff;
  font: 600 .9375rem/1.35 var(--f-text); text-align: center; box-shadow: 0 14px 30px -14px rgba(20, 20, 20, .5); }
@media (min-width: 1024px) { .geo-toast { display: none !important; } }   /* da desktop il messaggio sta nel conteggio della barra */

/* ------------------------------------------------------------ Pagina non trovata (404.php): «404» grande come le cifre
   del Progetto, accanto la pianta dei negozi della pagina Negozi; sotto l'elenco con lo stato */
.nf__code { margin: 0 0 var(--s-2); font: 300 clamp(6.5rem, 4rem + 11vw, 15rem)/.78 var(--f-display); font-stretch: 62%; letter-spacing: -.05em; color: var(--brick); }
.nf__hero .display { max-width: 12ch; }
.nf__btns { margin-top: var(--s-4); }
.nf__shops { margin: var(--s-6) auto var(--section); }
.nf__list { display: grid; border-top: 1px solid var(--ink); }
.nf__list li { display: block; padding: 0; }
.nf__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; text-decoration: none; color: var(--ink); }
.nf__list a:is(:hover, :focus-visible) .more__n { background: var(--brick); }
.nf__list a:is(:hover, :focus-visible) b { color: var(--brick); }
@media (min-width: 760px) { .nf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
@media (max-width: 599px) { .nf__list a { grid-template-columns: auto minmax(0, 1fr); } .nf__list .state { grid-column: 2; } }