:root {
  /* Dice al browser che il sito ha tutti e due i temi. Serve per le cose che
     disegna lui e non il foglio di stile: il calendario del campo data, la
     freccia delle tendine, la barra di scorrimento. Senza, al buio restavano
     neri su nero. */
  color-scheme: light dark;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* la calligrafia della cartolina: la usa solo la lista */
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* soft white */
  --bg: oklch(0.985 0.006 85);
  /* card surface */
  --surface: oklch(1 0 0);
  /* cream — soft callouts */
  --cream: oklch(0.96 0.018 85);
  /* sand — stronger callouts */
  --sand: oklch(0.9 0.032 80);
  --border: oklch(0.89 0.014 80);

  /* warm black */
  --text: oklch(0.24 0.012 60);
  --muted: oklch(0.52 0.018 65);

  /* warm black as primary action color */
  --primary: oklch(0.26 0.014 60);
  --primary-foreground: oklch(0.98 0.008 85);
  /* warm sand accent, used sparingly */
  --gold: oklch(0.75 0.06 68);
  --danger: oklch(0.55 0.15 30);
  /* i tre stati di un ticket o di una richiesta (booking.html) */
  --ok: oklch(0.52 0.11 150);
  --wait: oklch(0.62 0.13 70);
  /* sea blue, used only for the loading splash */
  --wave-blue: oklch(0.6 0.11 235);
  --wave-blue-light: oklch(0.74 0.1 210);

  --radius-card: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px oklch(0.24 0.012 60 / 0.05), 0 18px 40px -28px oklch(0.24 0.012 60 / 0.35);

  --max: 640px;
  /* wider container used only by content-rich sections from tablet/desktop up */
  --max-wide: 1120px;
}

* { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 9rem; }
/* Tutte le pagine hanno la striscia sticky, alta 60 px: i 9rem qui sopra
   lascerebbero un buco di aria sopra il titolo a cui si e' saltati. Restano
   per le pagine che la striscia non ce l'hanno, come booking.html. */
html:has(.home-bar) { scroll-padding-top: 5rem; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 300 1rem/1.65 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, .detail-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
}

img, video { max-width: 100%; display: block; }
a, button, input { font: inherit; }
button { border: 0; background: 0; cursor: pointer; }
a { text-decoration: none; color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--surface);
  padding: .75rem 1rem;
  border-radius: var(--radius-pill);
  z-index: 50;
}

/* Splash — loading screen shown while the page starts up: the logo stays as
   it is, with an animated blue wave ring spinning around it. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--bg);
  transition: opacity .5s ease;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.splash-mark {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
}
.splash-logo {
  width: 58%;
  height: 58%;
  object-fit: contain;
  border: 0;
}
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    var(--wave-blue-light) 20%,
    var(--wave-blue) 45%,
    transparent 55%,
    transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: splash-spin 1.6s linear infinite;
}
.splash-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--text);
}
@keyframes splash-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-ring {
    animation: none;
  }
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-text strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.brand-text span {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}

.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
}

/* Stesso selettore, in forma larga, dentro il menu laterale. Con cinque
   bandiere (tedesco, 13 ottobre 2026) accanto alla scritta "Lingua" non ci
   stavano a nessuna larghezza: la scritta sta sopra e le bandiere sotto, su
   tutta la larghezza del menu, divise in parti uguali. */
.more-menu-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
}
.more-menu-lang .lang-seg { width: 100%; }
.more-menu-lang .lang-seg button { flex: 1; min-width: 0; }
.more-menu-lang-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}
.lang-seg {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.lang-seg button {
  min-width: 44px;
  padding: .4rem .1rem;
  border-radius: var(--radius-pill);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--muted);
}
.lang-seg button.is-active {
  background: var(--text);
  color: var(--primary-foreground);
}
/* Le bandiere al posto di IT, EN, ES (3 ottobre 2026, proprietario). Disegnate
   in SVG e non con le emoji: Windows le emoji delle bandiere non le ha, e al
   loro posto scrive le due lettere. Il nome della lingua sta nell'aria-label.
   Quella scelta ha intorno la pastiglia scura di sempre; le altre sono un po'
   spente, cosi' si vede a colpo d'occhio quale e' accesa. */
.lang-flag {
  display: block;
  width: 24px;
  height: 16px;
  margin: 0 auto;
  border-radius: 3px;
  /* il bianco dell'Italia sul fondo chiaro sparirebbe: un filo di bordo */
  box-shadow: 0 0 0 1px oklch(0.24 0.012 60 / .15);
}
.lang-row button .lang-flag { width: 27px; height: 18px; }
[data-lang-set] .lang-flag { opacity: .75; transition: opacity .2s ease; }
[data-lang-set]:hover .lang-flag,
[data-lang-set].is-active .lang-flag { opacity: 1; }
.pill {
  flex: 1;
  min-height: 40px;
  padding: 0 .8rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .13em;
  white-space: nowrap;
}

/* Il pulsante di pausa del video, nell'angolo in alto della fascia */
.playbtn {
  position: absolute;
  top: 1.9rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(1 0 0 / .6);
  background: oklch(1 0 0 / .12);
  backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
}
.playbtn svg { width: 16px; height: 16px; }
/* L'attributo hidden non spegne un <svg>: la regola "[hidden] { display: none }"
   del browser vale solo per i tag HTML, e questi due sono SVG. Senza questa
   riga le due icone (pausa e play) si disegnano una sopra l'altra. */
.playbtn svg[hidden] { display: none; }
/* ─── Testata della home ────────────────────────────────────────────────────
   Fascia con il video, logo tondo che ci sta sopra, nome del posto, lingue in
   fila, e la striscia dei pulsanti che si ferma in cima quando si scorre.
   L'elenco e le schede usano la stessa testata, con una foto al posto del
   video e senza il nome e le lingue. */
.home-hero {
  position: relative;
  /* il 100% e' obbligatorio: dentro .detail-page, che e' un flex a colonna, il
     "margin: auto" ai lati spegne l'allargamento automatico, e la fascia si
     stringeva su quanto e' larga la foto che ha dentro */
  width: 100%;
  max-width: var(--max-wide);
  margin: .9rem auto 0;
  /* lo spazio sotto e' quello che il logo tondo sborda dalla foto */
  padding: 0 1.25rem 3.4rem;
}
.home-hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: var(--cream);
}
/* Sulle schede dell'attivita' la foto la scrive tour.js, quindi li' la fascia
   e' un contenitore e non l'immagine: la foto dentro la riempie tutta. */
.home-hero-box {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* e' un <button>, e i browser ai bottoni danno un padding loro (1px 6px):
     senza questa riga la foto restava 12 px piu' stretta di quella della home
     e si vedevano due strisce di sfondo ai lati. */
  padding: 0;
}
/* La foto riempie la fascia. Serve "position: absolute": l'altezza della
   fascia viene da aspect-ratio, e un "height: 100%" normale non trova un
   numero su cui calcolarsi — la foto restava 372x248 dentro una fascia da
   372x209 e sbordava. Con inset lo trova. */
.home-hero-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Su schermo largo la stessa proporzione darebbe una fascia alta 600 px:
   diventa piu' bassa e larga, come una striscia panoramica. */
@media (min-width: 960px) {
  .home-hero-media { aspect-ratio: 21 / 9; }
}
.home-hero-mark {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Bianco sempre, anche col tema scuro del telefono (proprietario, 12 ottobre
     2026): non una variabile, che di notte si girerebbe. forced-color-adjust
     lo tiene bianco anche coi colori a contrasto elevato di Windows. */
  background: #fff;
  forced-color-adjust: none;
  border: 4px solid var(--bg);
  box-shadow: var(--shadow);
}
.home-hero-mark img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.home-head {
  text-align: center;
  padding-top: 1.2rem;
}
.home-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1;
}
.home-tagline {
  margin: .5rem 0 1.1rem;
  color: var(--muted);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .22em;
}

/* Le cinque lingue tutte in vista, invece del bottone tondo che apre l'elenco.
   paintLangButtons() in i18n.js accende quella attiva con .is-active. */
.lang-row {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.lang-row button {
  min-width: 54px;
  padding: .5rem .2rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.lang-row button.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
}
/* Con la quarta e la quinta bandiera (francese e tedesco, 13 ottobre 2026)
   la riga a 54 px per bottone usciva dallo schermo sui telefoni piccoli:
   sotto i 375 px i bottoni si stringono. In privacy e termini, quando accanto
   al logo non c'e' posto, la riga va sotto (.privacy-head). */
@media (max-width: 374px) {
  .lang-row button { min-width: 44px; }
}

/* "sticky" vuol dire: scorre con la pagina finche' arriva in cima, poi si
   ferma li'. Costa meno della barra fissa che c'era prima: quella, essendo
   "fixed", usciva dal flusso e obbligava ogni pagina a un padding-top che le
   lasciasse il posto. Sfondo e sfocatura servono perche' il contenuto le
   passa sotto. */
.home-bar {
  position: sticky;
  top: 0;
  /* sopra la pagina, sotto il pallino dell'assistente (39) e le finestre (40 e 41) */
  z-index: 20;
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
  padding: .6rem 1rem;
  /* Niente fondo ne' riga: la capsula galleggia da sola sopra la pagina, come
     un'isola. La striscia attorno resta trasparente anche ai tocchi, cosi'
     quello che le passa sotto ai lati si puo' ancora toccare. */
  pointer-events: none;
}
.home-bar > * { pointer-events: auto; }
/* La capsula di Isla: un'isola scura che sta al centro della striscia. Le voci
   sono icone; quella della pagina in cui si e' (aria-current) diventa una
   pastiglia chiara con la scritta accanto. Le altre la scritta ce l'hanno
   nascosta: lo screen reader la legge, l'occhio vede solo l'icona.
   I colori vengono da --text e --bg, non da --primary: cosi' al buio si gira
   da sola e diventa un'isola chiara su fondo scuro. */
.isla-tabs {
  display: flex;
  align-items: center;
  gap: .15rem;
  max-width: 100%;
  padding: .3rem;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 12px 30px -16px oklch(0.24 0.012 60 / .7);
}
.isla-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 46px;
  height: 44px;
  padding: 0 .8rem;
  border-radius: var(--radius-pill);
  color: color-mix(in oklab, var(--bg) 70%, transparent);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.isla-tab svg { width: 21px; height: 21px; flex: none; }
.isla-tab:hover { color: var(--bg); }
.isla-tab[aria-current="page"] {
  background: var(--bg);
  color: var(--text);
}
/* la scritta delle voci non attive: c'e', ma solo per lo screen reader */
.isla-tab:not([aria-current="page"]) .isla-tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Il numerino sul carrello: quante escursioni ci sono nella lista. E' azzurro
   come i pulsanti "Aggiungi alla lista" (.btn-lista), con la scritta scura
   (proprietario, 15 ottobre 2026): si vede che il numero cresce col bottone.
   Lo prende anche il numerino delle prenotazioni, che ha la stessa classe. */
.isla-tab-count {
  position: absolute;
  top: 3px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--wave-blue-light);
  color: oklch(0.24 0.012 60);
  font-size: .62rem;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
}
/* La scritta della voce attiva si accorcia coi puntini invece di spingere la
   capsula fuori dallo schermo: con cinque voci, a 320 px "Experiencias" non ci
   sta intera. L'icona "installa l'app" non sta piu' nella capsula (e' nel menu):
   con lei a 390 px in spagnolo si usciva di 13 px. */
.isla-tab[aria-current="page"] { flex: 0 1 auto; min-width: 0; }
.isla-tab[aria-current="page"] .isla-tab-label { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) {
  .isla-tab { min-width: 40px; padding: 0 .55rem; gap: .35rem; letter-spacing: .08em; }
}

/* Sull'elenco e sulle schede il nome e le lingue non ci sono: la striscia
   arriva subito sotto il logo tondo e le serve un po' piu' d'aria sopra. */
.home-hero + .home-bar { margin-top: 1.9rem; }
/* .detail-page e' un flex a colonna con gap 1.2rem, che si somma al margine
   qui sopra: senza questa riga fra il logo tondo e la striscia c'e' quasi il
   doppio dell'aria che c'e' sull'elenco. */
.detail-page .home-hero + .home-bar { margin-top: .7rem; }

/* Sulle schede la foto e' un po' piu' alta che sulla home: 3/2 invece di
   16/9, cioe' 248 px invece di 209 su un telefono da 412. Qui la foto e' la
   merce, non un fondale. Da 960 px in su resta la fascia panoramica di tutti:
   3/2 su 1080 px vorrebbe dire 720 px di altezza, un muro. */
.detail-page .home-hero-media { aspect-ratio: 3 / 2; }
/* Su schermo largo no: il 3/2 su una fascia da 1080 px sarebbe alta 720, un
   muro. Questa regola sta qui sotto e non nel blocco da 960 px piu' su,
   perche' ha la stessa specificita' della riga sopra e a parita' vince chi
   viene dopo. */
@media (min-width: 960px) {
  .detail-page .home-hero-media { aspect-ratio: 21 / 9; }
}

/* Sulle schede il logo non sta piu' in mezzo: le foto delle attivita' hanno il
   soggetto al centro in basso, cioe' esattamente dove stava il cerchio, e la
   barca finiva dietro al logo. Nell'angolo copre acqua o cielo. */
.detail-page .home-hero-mark {
  left: 1.25rem;
  transform: none;
  width: 76px;
  height: 76px;
  border-width: 3px;
}

/* Toccando la fascia la foto si apre intera: questo e' il segno che si puo'
   fare. Non prende il tocco (e' il bottone sotto a prenderlo) e sta
   dall'altra parte rispetto al logo. */
.home-hero-zoom {
  position: absolute;
  top: 1.7rem;
  right: 2rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: oklch(0.24 0.012 60 / .35);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.home-hero-zoom svg { width: 16px; height: 16px; }

/* Foto a tutto schermo, aperta toccando la fascia di una scheda. Sta sopra
   tutto: il pallino dell'assistente e' a 39, le finestre a 40 e 41. */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  /* pieno, non trasparente: al 93% la pagina sotto si leggeva ancora e
     rubava l'occhio alla foto */
  background: oklch(0.16 0.008 60);
}
/* .photo-viewer e' display:grid, che vince sull'[hidden] del browser */
.photo-viewer[hidden] { display: none; }
.photo-viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* qui la foto non si taglia: si vede tutta, ridotta se serve */
  object-fit: contain;
  border-radius: 12px;
}
.photo-viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Sotto la striscia l'intro non ha bisogno dei suoi 4rem di aria */
.home-bar + .intro { padding-top: 2.2rem; }
@media (min-width: 960px) {
  .home-bar + .intro { padding-top: 3rem; }
}

/* Intro */
.intro {
  padding: 4rem 0 2.5rem;
  text-align: center;
}
.intro .eyebrow { justify-content: center; }
.intro h1 {
  color: var(--text);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem);
  line-height: 1.08;
  margin: .9rem 0 0;
}
@media (min-width: 960px) {
  .intro { padding: 6rem 0 3.5rem; }
}

/* Bento — quick links below the intro */
.bento { padding: 0 0 2.5rem; }
.bento-grid {
  list-style: none;
  /* .wrap centra con "margin: 0 auto": qui va ripetuto, altrimenti questa
     regola (che viene dopo) lo annulla e la griglia resta a sinistra.
     Il padding invece NON si ripete: .bento-grid viene dopo .wrap e ha la
     stessa specificita', quindi un "padding: 0" qui annullava il margine
     laterale e i riquadri finivano attaccati ai bordi dello schermo. */
  margin: 0 auto;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
}
/* Sei riquadri dal 6 ottobre 2026 (Food & Wine e Perfetto per 2): su schermo
   largo stanno in tre colonne, due righe piene. Con quattro colonne la
   seconda riga restava a meta'. */
@media (min-width: 640px) {
  .bento-grid { grid-template-columns: repeat(3, 1fr); }
}
.bento-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
}
/* Il riquadro che non fa coppia con gli altri, da solo su una riga: occupa
   tutta la larghezza (invece di restare spaiato in una griglia da 2 o 4
   colonne) e mette icona e testo in fila invece che impilati. Non e' legato
   a un riquadro preciso — l'ha portato prima "Noleggio auto, moto e bici" in
   fondo alla griglia, poi "Scan ticket" in cima, che oggi non c'e' piu'. */
.bento-tile-wide {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  flex-direction: row;
  gap: .9rem;
  padding: 1.15rem 1rem;
}

/* Il riquadro dei pacchetti: una foto al posto dell'icona, Puerto de la Cruz
   col Teide dietro — la stessa che apre la home. La scritta resta dov'era ma
   scende in fondo e diventa bianca, come sulle foto delle categorie. */
.bento-tile-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
  border-color: transparent;
}
.bento-foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  /* senza height il width/height nell'HTML batte il ritaglio e la foto
     esce alta come e': e' gia' successo alla foto di "Chi siamo" */
  height: 100%;
  object-fit: cover;
}
/* La sfumatura e' decorativa: senza pointer-events copre il link. */
.bento-tile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, oklch(0.24 0.012 60 / .9) 100%);
  pointer-events: none;
}
/* La scritta. Quando la foto era un mosaico di tre dentro uno <span>, questa
   regola scritta "span" e basta prendeva anche il mosaico e gli toglieva il
   `position: absolute`: le foto finivano nel flusso e restavano alte due terzi
   del riquadro. Adesso la foto e' un <img> e lo span qui dentro e' uno solo,
   ma il `>` resta: una regola larga dentro un riquadro che cambia si
   ripresenta. */
.bento-tile-photo > span {
  position: relative;
  z-index: 1;
  padding: 0 .7rem .9rem;
  color: #fff;
}

/* Il riquadro "3/5/7 Days Experience": cinque foto invece di una, tagliate a
   striscia obliqua con clip-path. Ogni striscia e' un <img class="bento-foto">
   pieno quanto il riquadro (regola sopra) e viene ritagliato in un
   parallelogramma. Fra una striscia e la prossima c'e' uno spacco (il bordo
   destro della striscia N e' un po' PRIMA del bordo sinistro della N+1,
   sempre della stessa quantita' in percentuale): sotto le foto c'e' sfondo
   bianco invece del crema del riquadro, cosi' lo spacco esce come una riga
   bianca che separa le foto. Se cambia il numero di strisce o la larghezza
   dello spacco vanno ricalcolati tutti insieme, non uno alla volta. */
.bento-tile.bento-tile-stripes { background: #fff; }
.bento-tile-stripes .bento-stripe-1 { clip-path: polygon(14.9% 0%, 33.1% 0%, 5.1% 100%, -13.1% 100%); }
.bento-tile-stripes .bento-stripe-2 { clip-path: polygon(34.9% 0%, 53.1% 0%, 25.1% 100%, 6.9% 100%); }
.bento-tile-stripes .bento-stripe-3 { clip-path: polygon(54.9% 0%, 73.1% 0%, 45.1% 100%, 26.9% 100%); }
.bento-tile-stripes .bento-stripe-4 { clip-path: polygon(74.9% 0%, 93.1% 0%, 65.1% 100%, 46.9% 100%); }
.bento-tile-stripes .bento-stripe-5 { clip-path: polygon(94.9% 0%, 113.1% 0%, 85.1% 100%, 66.9% 100%); }

.bento-tile svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
}
.bento-tile span {
  font-size: .74rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.25;
}
@media (min-width: 960px) {
  .bento { padding: 0 0 3.5rem; }
  .bento .wrap { max-width: var(--max-wide); }
  .bento-tile { transition: transform .4s ease, box-shadow .4s ease; }
  .bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--gold);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .28em;
}

.lookup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

.lookup-card label,
.ticket-dialog label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: .7rem;
}

/* Ticket lookup dialog — opened from the "Scan ticket" tile */
.ticket-scrim {
  position: fixed;
  inset: 0;
  background: oklch(0.24 0.012 60 / .45);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity .25s ease;
}
.ticket-scrim[hidden] { display: none; }
.ticket-scrim.is-visible { opacity: 1; }

.ticket-dialog {
  position: fixed;
  z-index: 41;
  left: 50%;
  bottom: 0;
  width: min(100%, 520px);
  transform: translate(-50%, 100%);
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 1.5rem 1.4rem 2rem;
  box-shadow: 0 -20px 50px -30px oklch(0.24 0.012 60 / .5);
  transition: transform .3s ease;
  /* Con tutti i campi dentro (data, ora, lingua, persone, totale, varianti,
     transfer, note) la finestra e' piu' alta di un telefono. Senza queste due
     righe restava piantata: la pagina sotto e' bloccata da body.menu-open e la
     finestra non scorreva per conto suo. */
  max-height: 88dvh;
  overflow-y: auto;
  /* arrivati in fondo, il dito non deve trascinare la pagina dietro */
  overscroll-behavior: contain;
}
.ticket-dialog[hidden] { display: none; }
/* "Senza ticket? Le mie richieste (2)": sotto il modulo, solo per chi ha
   mandato richieste su WhatsApp da questo telefono (app.js). */
/* "Le mie richieste": in cima alla finestra, prima del modulo del ticket.
   In fondo, sotto il link, la tastiera aperta lo copriva e il proprietario
   non l'ha visto (2 ottobre 2026). */
.ticket-requests-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.2rem;
  padding: .9rem 1rem;
  border: 2px solid var(--gold);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}
.ticket-requests-link strong { display: block; font-weight: 600; }
.ticket-requests-link small { display: block; color: var(--muted); font-size: .85rem; margin-top: .1rem; }
.ticket-requests-link > span:last-child { margin-left: auto; font-size: 1.3rem; color: var(--gold); }
.ticket-requests-or { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 0 .8rem; }
.ticket-dialog.is-open { transform: translate(-50%, 0); }

.ticket-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.ticket-dialog-head h2 {
  margin: 0;
  font-weight: 500;
  font-size: 1.5rem;
}

@media (min-width: 640px) {
  .ticket-dialog {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -45%);
    opacity: 0;
    border-radius: 20px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .ticket-dialog.is-open { transform: translate(-50%, -50%); opacity: 1; }
}

.install-btn { margin-bottom: 1.6rem; }

/* I passi per installare sull'iPhone (app.js, apriIstruzioniIos). Sopra il
   menu laterale, che sta a 40/41. */
.ios-install-scrim { z-index: 50; }
.ios-install { z-index: 51; }
.ios-install-intro { margin: 0 0 1rem; color: var(--muted); }
.ios-install-steps {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.ios-install-steps li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}
.ios-install-steps li:first-child { border-top: 0; }
.ios-install-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--cream);
  color: #0a84ff;
  font-size: 1.2rem;
}
.ios-install-ico svg { width: 1.5rem; height: 1.5rem; }

/* L'avviso in basso sull'iPhone (app.js, avvisoInstallaIos). Copre per un
   momento il pallino della chat e la barra "Prenota ora" (39 e 38): ha la ✕.
   Le finestre (40 e 41) gli passano sopra. */
.install-hint {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 39;
  max-width: 520px;
  margin: 0 auto;
  /* icona, testo e ✕ sulla prima riga, "Come si fa" sotto: tutti sulla
     stessa riga a 320 px il testo andava a capo parola per parola */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem .7rem;
  padding: .8rem .7rem .8rem .8rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px oklch(0.24 0.012 60 / .55);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .3s ease, transform .3s ease;
}
.install-hint.is-visible { opacity: 1; transform: none; }
.install-hint-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--cream);
  color: #0a84ff;
}
.install-hint-ico svg { width: 1.4rem; height: 1.4rem; }
.install-hint-text { min-width: 0; line-height: 1.25; }
.install-hint-text strong { display: block; font-weight: 600; font-size: .92rem; }
.install-hint-text small { display: block; color: var(--muted); font-size: .8rem; }
.install-hint-how { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.install-hint-close { width: 32px; height: 32px; font-size: .8rem; }

/* La finestra del ticket: numero e telefono (app.js, booking.js). Stessa
   pillola dei campi della richiesta; il prefisso e' un menu stretto accanto. */
.lookup-input,
.lookup-phone select {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: .9rem 1.2rem;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;              /* sotto i 16px l'iPhone ingrandisce la pagina */
  margin-bottom: 1.1rem;
}
.lookup-phone select { padding-right: .6rem; }
.lookup-input:focus,
.lookup-phone select:focus { border-color: var(--text); }
.lookup-phone {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: .5rem;
}
.lookup-error { color: var(--danger); margin: -.4rem 0 1rem; font-size: .9rem; }
.lookup-error[hidden] { display: none; }
[data-lookup-form] .btn-block { margin-bottom: .4rem; }

/* I ticket veri in booking.html: una scheda per escursione, le passate in
   fondo e spente. */
.booking-list { display: grid; gap: 1.1rem; }
.booking-past-title {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 1rem 0 0;
}
.detail-card.is-past { opacity: .6; }
/* L'escursione di cui parla l'avviso toccato (booking.js, mostraDallAvviso):
   un anello del colore del suo stato, e sotto la capsula in alto, non dietro. */
.detail-card.is-avviso {
  outline: 3px solid var(--stato, var(--primary));
  outline-offset: 3px;
  scroll-margin-top: 6rem;
}
/* La striscia bassa con la foto dell'escursione, in cima al ticket: bassa
   apposta, perche' ora e punto d'incontro restino visibili senza scorrere.
   Numero del ticket e "Confermata" stanno sopra la foto, in fondo, su una
   sfumatura scura che li fa leggere qualunque sia la foto. */
.ticket-hero { position: relative; }
.ticket-banner {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.ticket-hero .detail-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
}
.ticket-hero .detail-status .pill { text-shadow: none; }
/* (non "detail-option": e' gia' il nome dei pulsanti delle varianti in tour.html) */
.ticket-option {
  display: block;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--muted);
  margin-top: .3rem;
}
.booking-list .detail-title { margin-bottom: 1.2rem; }
.booking-list .map-link { margin-top: 1.1rem; }
p.note-box { margin: 0 0 1rem; }

/* I tre stati: confermata (verde), da confermare (ambra), annullata (rosso).
   Il colore sta in tre posti: la pillola, la riga a sinistra della scheda e la
   nota sotto il titolo. Tre segni, cosi' si legge anche da chi i colori li
   distingue male: la pillola dice lo stato a parole. La scritta della pillola
   prende il fondo della pagina, quindi si gira da sola col tema scuro. */
.booking-intro { color: var(--muted); margin: 0 0 1.1rem; }
.detail-card.is-confirmed { --stato: var(--ok); }
.detail-card.is-pending   { --stato: var(--wait); }
.detail-card.is-cancelled { --stato: var(--danger); }
.detail-card[class*="is-"]:not(.is-past) { border-left: 4px solid var(--stato); }
.detail-card[class*="is-"]:not(.is-past) .detail-status .pill {
  background: var(--stato);
  color: var(--bg);
  font-weight: 500;
}
/* Sull'ambra la scritta chiara non si legge: resta scura in tutti e due i temi. */
.detail-card.is-pending:not(.is-past) .detail-status .pill { color: oklch(0.24 0.012 60); }
.ticket-state-note {
  margin: -.4rem 0 1.2rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--stato);
  /* in srgb: in oklch il bianco non ha tinta e la miscela usciva rosa anche
     sull'ambra */
  background: color-mix(in srgb, var(--stato) 12%, var(--surface));
  font-size: .95rem;
}
/* Il link di pagamento: la frase e sotto il bottone, largo quanto la nota. */
.ticket-pay p { margin: 0 0 .7rem; }
.ticket-pay .btn { display: block; width: 100%; text-align: center; }
/* L'annullata resta leggibile ma si capisce che non vale piu'. */
.detail-card.is-cancelled .detail-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.detail-card.is-cancelled .ticket-banner { filter: grayscale(1); }

.btn {
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-block { width: 100%; }
/* Su un telefono stretto (320 px) un testo lungo tradotto non ci sta su una
   riga: "Toutes les excursions adaptées aux enfants", "Ver todas las
   excursiones". Questi pulsanti vanno a capo invece di uscire dallo schermo;
   gli altri restano su una riga, accanto a qualcosa. */
.btn-block,
.state .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: .6rem;
}
/* Tutti i pulsanti "Aggiungi alla lista" sono azzurri, perche' si notino
   (proprietario, 12 ottobre 2026): nella scheda, sulla barra in fondo, in
   fondo alla finestra della richiesta e nel modulo dei pacchetti. Hanno la
   classe .btn-lista; un pulsante nuovo che aggiunge alla lista la prende. E'
   l'azzurro chiaro dell'anello del caricamento (--wave-blue-light) con la
   scritta scura: con la bianca si leggerebbe 2,2:1, con la scura 7,4:1.
   I colori sono scritti a mano e non presi da --text o --primary, che col
   tema scuro si girerebbero: questo bottone e' uguale di giorno e di notte. */
.btn-primary.btn-lista {
  background: var(--wave-blue-light);
  color: oklch(0.24 0.012 60);
  font-weight: 500;
  transition: background-color .15s ease;
}
.btn-primary.btn-lista:hover { background: oklch(0.69 0.1 212); }
.btn-primary.btn-lista:active { background: oklch(0.64 0.1 215); }
.btn-soft {
  background: transparent;
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 25%, transparent);
}

.hint {
  margin: .8rem 0 0;
  font-size: .82rem;
  font-weight: 300;
  color: var(--muted);
}

/* Categories */
.categories {
  background: var(--cream);
  padding: 3.5rem 0 4rem;
}
.categories h2 {
  font-weight: 400;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  margin: .6rem 0 1.6rem;
}
.cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}
.cat-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cat-link {
  display: block;
  width: 100%;
  height: 100%;
}
.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, oklch(0.24 0.012 60 / .8) 100%);
  /* la sfumatura è decorativa: senza questo copre il link e i clic non passano */
  pointer-events: none;
}
.cat-label {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.15;
}
@media (min-width: 960px) {
  .categories { padding: 5rem 0 6rem; }
  .categories .wrap { max-width: var(--max-wide); }
  .cat-card { transition: transform .4s ease, box-shadow .4s ease; }
  .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}

/* La mappa in home: card alte la meta' di quelle delle categorie (32/9 invece
   di 16/9), nella stessa griglia. Il nome sta a sinistra, a meta' altezza, con
   la sfumatura scura da quella parte: in una card cosi' bassa la sfumatura dal
   basso coprirebbe tutta la foto. */
.map-cats { padding-top: 0; }
.cat-card--half { aspect-ratio: 32 / 9; border-radius: 16px; }
.cat-card--half::after {
  background: linear-gradient(90deg, oklch(0.24 0.012 60 / .75) 0%, oklch(0.24 0.012 60 / .25) 55%, transparent 80%);
}
/* L'autore della foto, dove la licenza lo chiede: piccolo, in basso a destra. */
.cat-credit {
  position: absolute;
  right: .7rem;
  bottom: .4rem;
  z-index: 1;
  font-size: .58rem;
  color: oklch(1 0 0 / .8);
  text-shadow: 0 1px 2px oklch(0 0 0 / .5);
}
.cat-card--half .cat-label {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  font-size: 1.35rem;
}

/* About */
.about {
  padding: 4rem 0;
}
.about-grid {
  display: grid;
  gap: 2rem;
}
.about-grid img {
  width: 100%;
  /* Senza "height: auto" vince l'attributo height dell'HTML e la foto resta
     alta 1100px: mezza pagina sul telefono, uno schermo e mezzo sul PC.
     E' uno scatto verticale, quindi il taglio e' 4/5 e non 4/3, alzato un
     po' per non tagliare i visi. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.about-grid h2 {
  font-weight: 400;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  margin: .6rem 0 1rem;
}
.about-grid p {
  color: var(--muted);
  font-weight: 300;
  margin: 0 0 .8rem;
}
@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}
@media (min-width: 960px) {
  .about { padding: 6rem 0; }
  .about .wrap { max-width: var(--max-wide); }
  .about-grid { gap: 5rem; }
  .about-grid img { max-height: 520px; }
}

/* FAQ */
.faq {
  padding: 4rem 0;
}
.faq h2 {
  font-weight: 400;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  margin: .6rem 0 1.6rem;
}
.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  color: var(--muted);
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 0 0 1.3rem;
  color: var(--muted);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
}
@media (min-width: 960px) {
  .faq { padding: 5rem 0; }
}

/* Footer */
.footer {
  padding: 3rem 0 2rem;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  padding-bottom: 2rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}
.footer-brand div {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.footer-brand strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.footer-brand span {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}
.footer-link {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  padding-bottom: .2rem;
}
.footer-copy {
  margin: 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-align: center;
}
/* Chi c'è dietro Isla: i dati di Admiral (NOTES.md, "Chi c'è dietro Isla") */
.footer-legal {
  margin: 0;
  padding: 1.2rem 1.25rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.6;
  text-align: center;
}
.footer-legal strong { color: var(--text); font-weight: 600; }
.footer-legal a { color: inherit; text-decoration: underline; }
.footer-legal + .footer-copy { border-top: 0; }

/* La pagina della privacy: un testo lungo da leggere, in tre lingue.
   Si vede solo l'<article> della lingua scelta (il lang di <html>). */
html:not([lang="it"]) .pp[lang="it"],
html:not([lang="en"]) .pp[lang="en"],
html:not([lang="es"]) .pp[lang="es"],
html:not([lang="fr"]) .pp[lang="fr"],
html:not([lang="de"]) .pp[lang="de"] { display: none; }
.privacy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.privacy-home {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.privacy-home img { border-radius: 8px; }
.privacy { padding-bottom: 4rem; line-height: 1.65; }
.privacy h1 {
  /* "Verkaufsbedingungen" e' una parola sola, piu' larga di un telefono da 320 px */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2rem;
  margin: 1rem 0 .2rem;
}
.privacy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  margin: 2.2rem 0 .5rem;
}
.privacy h3 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .3rem; }
.privacy p, .privacy li { color: var(--text); }
.privacy strong { font-weight: 600; }
.privacy ul { padding-left: 1.2rem; }
.privacy li { margin-bottom: .45rem; }
.privacy a { text-decoration: underline; }
.privacy .pp-date { color: var(--muted); font-size: .85rem; margin: 0 0 1.5rem; }

@media (min-width: 768px) {
  .footer .wrap { max-width: var(--max-wide); }
  .footer-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}

/* Booking detail page */
.page-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 0;
}
.page-header h1 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0;
}

.detail {
  /* i lati restano quelli di .wrap: con "0" le schede toccavano i bordi del
     telefono */
  padding-top: .5rem;
  padding-bottom: 2.5rem;
}

.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.detail-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}
.detail-status .pill {
  flex: none;                  /* .pill ha flex: 1 per l'header: qui la tirava a meta' riga */
  background: var(--cream);
  color: var(--text);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .64rem;
}

.detail-body {
  padding: 1.4rem;
}

.detail-code {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin: 0 0 .3rem;
}
.detail-code strong {
  display: block;
  font-family: "Jost", monospace;
  letter-spacing: .15em;
  color: var(--text);
  font-size: .95rem;
  margin-top: .2rem;
}

.detail-title {
  font-size: 1.9rem;
  font-weight: 400;
  margin: .8rem 0 1.4rem;
}

.info-grid {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 480px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}

.info-field {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.info-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  color: var(--muted);
}
.info-field h3 {
  margin: 0 0 .25rem;
  font-size: .64rem;
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.info-field p {
  margin: 0;
  font-size: .95rem;
}
.info-field ul {
  margin: 0;
  padding-left: 1.1rem;
}
.info-field li { margin-bottom: .2rem; }

.map-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.note-box {
  margin-top: 1.4rem;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
}
.note-box h3 {
  margin: 0 0 .3rem;
  font-size: .64rem;
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.note-box p {
  margin: 0;
  font-size: .9rem;
}

.detail-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
@media (min-width: 480px) {
  .detail-actions { flex-direction: row; }
}

/* Empty / error state */
.state {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  color: var(--muted);
}
.state h2 {
  font-weight: 400;
  margin: 0 0 .5rem;
  font-size: 1.4rem;
}
.state p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-weight: 300;
  max-width: 36ch;
  margin-inline: auto;
}

/* "More" off-canvas menu */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: oklch(0.24 0.012 60 / .45);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-scrim[hidden] { display: none; }
.menu-scrim.is-visible { opacity: 1; }

.more-menu {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 41;
  width: min(82vw, 380px);
  background: var(--bg);
  box-shadow: -20px 0 50px -30px oklch(0.24 0.012 60 / .5);
  padding: 1.4rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  /* Su un telefono basso (o con la barra "Installa l'app" in vista) le voci
     non ci stanno tutte: il pannello scorre, altrimenti "Prenota ora" resta
     fuori dallo schermo. contain: lo scorrimento non passa alla pagina sotto. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.more-menu[hidden] { display: none; }
.more-menu.is-open { transform: translateX(0); }

.more-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.2rem;
}
.more-menu-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.more-menu-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.more-menu-nav a,
.more-menu-nav button {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  text-align: left;
  color: var(--text);
}

.more-menu-cta { margin-top: 1.4rem; }

@media (min-width: 640px) {
  .more-menu { width: min(60vw, 380px); }
}

body.menu-open { overflow: hidden; }

/* ── Pagina catalogo "Tutte le escursioni" ────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.catalog-page {
  /* niente spazio in cima: da quando l'elenco ha la stessa testata della home,
     la striscia e' sticky e sta nel flusso, non piu' fissa sopra la pagina */
  padding-bottom: 4rem;
}
.catalog-head {
  text-align: center;
  padding-bottom: 1.8rem;
}
.catalog-head .eyebrow { justify-content: center; }
.catalog-head h1 {
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  line-height: 1.1;
  margin: .8rem 0 .6rem;
}
.catalog-count {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.catalog-tools {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.8rem;
}
.catalog-search {
  position: relative;
  display: flex;
  align-items: center;
}
.catalog-search svg {
  position: absolute;
  left: 1.1rem;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.catalog-search input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .9rem 1.2rem .9rem 2.9rem;
  outline: none;
  color: var(--text);
  font-size: .95rem;
}
.catalog-search input:focus { border-color: var(--text); }
/* La stessa barra in home, al posto di "Scan ticket": larga quanto la griglia
   dei riquadri, come lo era lui. */
.home-search { grid-column: 1 / -1; margin: 0; }

.chip-row {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
/* Sul telefono la riga si scorre col dito. Sul mouse no, e la barra di
   scorrimento e' nascosta: su schermo largo le pillole vanno a capo, cosi'
   le categorie in fondo restano raggiungibili. */
@media (min-width: 960px) {
  .chip-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.chip {
  flex: none;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* Il bottone "Filtri" accanto alla ricerca, e il pannello che apre: zona e
   durata. Le pillole dentro sono le stesse .chip delle categorie, ma vanno a
   capo invece di scorrere: sono poche, e cosi' si vedono tutte. */
.catalog-searchrow {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.catalog-searchrow .catalog-search { flex: 1; min-width: 0; }
.filter-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-toggle svg { width: 18px; height: 18px; }
.filter-toggle.is-active,
.filter-toggle[aria-expanded="true"] { border-color: var(--text); }
.filter-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .68rem;
  letter-spacing: 0;
  line-height: 1.25rem;
  text-align: center;
}
.filter-badge[hidden] { display: none; }
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.filter-panel[hidden] { display: none; }
.filter-label {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filter-reset {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.filter-reset[hidden] { display: none; }

.tour-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tour-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .tour-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .tour-grid { grid-template-columns: repeat(4, 1fr); }
}

.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tour-media {
  aspect-ratio: 16 / 10;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tour-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Segnaposto sobrio finché la foto non c'è */
.tour-media-empty {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  text-align: center;
  line-height: 1.4;
  padding: 0 .5rem;
  color: color-mix(in oklab, var(--muted) 45%, transparent);
}

.tour-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: 1.1rem 1.2rem 1.2rem;
}
.tour-cat {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold);
}
.tour-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
}
.tour-desc {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.55;
}
.tour-meta {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.tour-meta li {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
}
/* Vincolo stagionale: e' un avviso, non un dato neutro come zona e durata,
   quindi si stacca dalle altre etichette. */
.tour-meta-season {
  background: var(--sand) !important;
  color: var(--text) !important;
}

/* Offerta a tempo: la pillola si stacca dalle etichette neutre come fa
   quella stagionale, ma tira l'occhio invece di avvisare. */
.tour-meta-offer {
  background: var(--text) !important;
  color: var(--cream) !important;
}
/* Il prezzo di listino barrato, davanti a quello che si paga. Piu' piccolo e
   smorzato: il numero che conta e' quello dopo, non questo. */
.price-before {
  margin-right: .35rem;
  color: var(--muted);
  font-size: .82em;
  font-weight: 400;
  text-decoration-thickness: 1px;
}

.request-season {
  margin: -.4rem 0 .8rem;
  padding: .6rem .8rem;
  background: var(--sand);
  border-radius: 10px;
  font-size: .82rem;
}
.request-season[hidden] { display: none; }

.tour-foot {
  margin-top: auto;
  padding-top: .9rem;
  display: flex;
  /* un prezzo lungo ("da 350 euro a gruppo") va a capo: senza wrap finiva
     addosso al bottone */
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem .8rem;
}
.tour-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}
.tour-ask {
  min-height: 40px;
  padding: 0 1rem;
  font-size: .66rem;
}

/* La foto della scheda e' un link, ma per i lettori di schermo e' un
   doppione del titolo: si annuncia solo il titolo. */
.tour-media { display: grid; }
.tour-title a { color: inherit; }
.tour-title a:hover { text-decoration: underline; }

/* ── I pacchetti ──────────────────────────────────────────────────────── */
.packs-intro {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
}

/* La vetrina, stile bento come in home: riquadri quadrati con la foto, e il
   primo piu' grande degli altri. Il primo e' grande e basta, non "quello in
   offerta": se un domani l'ordine cambia, cambia solo quale riquadro e' largo,
   e nessun testo diventa falso. */
.pack-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
}
.pack-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Il primo: su due colonne sta largo e basso, come il riquadro del noleggio
   in home. */
.pack-tile:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}
/* Sul telefono i riquadri piccoli sono larghi 168px: col prezzo barrato
   davanti, "a persona" finisce su una riga sua e il blocco di testo diventa
   alto il doppio. Il barrato sparisce solo li' — sul riquadro grande, da
   tablet in su e nella pagina del pacchetto ci sta e resta, che e' il posto
   dove il cliente guarda quanto risparmia. Il bollino lo dice comunque. */
@media (max-width: 639px) {
  .pack-tile:not(:first-child) .price-before { display: none; }
  /* Col "da" davanti il numero piu' lungo ("da €170,10") riempie la riga e
     "a persona" scende sotto: bene, ma intero. Senza questa riga si spezzava
     fra "a" e "persona", e una "a" da sola in fondo alla riga si legge come
     un errore di stampa. */
  .pack-tile .pack-price small { white-space: nowrap; }
  /* L'ultimo riquadro rimasto spaiato sulla riga da due si prende tutta la
     larghezza invece di lasciare un buco, come il riquadro del noleggio in
     home. Il primo e' gia' largo, quindi "spaiato" vuol dire che i riquadri
     sono in numero pari. */
  .pack-tile:nth-child(even):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}
/* Sotto i 360 px (il telefono piu' stretto, 320) due riquadri per riga sono
   quadrati da 134 px: titolo su tre righe, prezzo e "a persona" non ci stanno,
   e il titolo usciva dal bordo in alto. Uno per riga, tutti come il primo. */
@media (max-width: 359px) {
  .pack-grid { grid-template-columns: 1fr; }
  .pack-tile { aspect-ratio: 16 / 10; }
  .pack-tile:not(:first-child) .price-before { display: inline; }
}
@media (min-width: 640px) {
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
  .pack-tile:first-child { grid-column: span 2; aspect-ratio: auto; }
}
@media (min-width: 960px) {
  .pack-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  /* due colonne e due righe: il quadrato grande del bento */
  .pack-tile:first-child { grid-column: span 2; grid-row: span 2; }
}
.pack-tile-link {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
.pack-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La sfumatura e' decorativa: senza pointer-events copre il link e i tocchi
   non passano. Stessa trappola gia' presa con le foto delle categorie. */
.pack-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(0.24 0.012 60 / .82) 100%);
  pointer-events: none;
}
.pack-tile-testo {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.pack-tile-testo strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.15;
}
@media (min-width: 960px) {
  .pack-tile:first-child .pack-tile-testo strong { font-size: 1.6rem; }
}
/* Il prezzo sulla foto: piu' piccolo e in bianco, se no il numero scuro della
   pagina sparisce dentro la sfumatura. */
.pack-tile .pack-price { font-size: 1rem; }
.pack-tile .pack-price strong { font-weight: 500; }
.pack-tile .price-before { color: oklch(1 0 0 / .65); }
.pack-tile .pack-price small { color: oklch(1 0 0 / .75); }
/* ── Il noleggio (noleggio.html) ─────────────────────────────────────── */
/* Una riga per mezzo, come un elenco: nome a sinistra, prezzo di partenza a
   destra. Toccandola si apre (e' un <details>) e mostra i prezzi per fascia
   di giorni, la patente e il bottone WhatsApp. Chiuse, le 21 righe stanno in
   poco piu' di due schermate di telefono. */
.rent-group { padding-top: 1.2rem; scroll-margin-top: 5rem; }
.rent-group h2 {
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0 0 .3rem;
}
.rent-note {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .88rem;
}
.rent-grid {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
  /* una riga aperta non deve allungare quella accanto su PC */
  align-items: start;
}
@media (min-width: 960px) { .rent-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; } }
.rent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.rent-card summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  cursor: pointer;
  list-style: none;
}
.rent-card summary::-webkit-details-marker { display: none; }
/* la freccia: giu' chiusa, su aperta */
.rent-card summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.rent-card details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rent-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rent-card-head strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
}
.rent-kind {
  color: var(--muted);
  font-size: .8rem;
}
.rent-from {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
}
.rent-from small {
  color: var(--muted);
  font-weight: 300;
  font-size: .7rem;
}
.rent-card-body { padding: 0 1rem 1rem; }
.rent-prices {
  margin: 0;
  border-top: 1px solid var(--border);
}
.rent-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.rent-row:last-child { border-bottom: 0; }
.rent-row dt { color: var(--muted); }
.rent-row dd { margin: 0; font-weight: 500; }
.rent-unit {
  margin: .1rem 0 0;
  color: var(--muted);
  font-size: .75rem;
  text-align: right;
}
.rent-license {
  margin: .5rem 0 0;
  font-size: .82rem;
}
.rent-license::before { content: "◆ "; color: var(--gold); }
.rent-cta { margin-top: 1rem; }
.rent-page .packs-foot .rent-note { text-align: center; }

/* ── Gli itinerari a giorni ───────────────────────────────────────────── */
/* La riga delle durate sopra la vetrina. Sono le stesse pillole dei filtri per
   categoria dell'elenco (.chip-row/.chip): e' lo stesso gesto — scegli una
   cosa, la griglia sotto cambia — e impararlo una volta basta.
   Niente `display` qui dentro: `.days-nav` e' un div, e un div nascosto con
   [hidden] sparisce da solo. Una riga `display: flex` lo farebbe ricomparire
   in tutte e tre le viste, come e' gia' successo a .packs-foot. */
.days-nav { margin-bottom: 1.1rem; }
/* Le durate vanno **a capo** anche sul telefono, al contrario delle categorie
   dell'elenco che si scorrono col dito. Sono quattro e non venti, e l'ultima
   e' "7 giorni": scorrendo, su uno schermo da 412 px restava mezza fuori dal
   bordo: una vetrina intera che non si sa che c'e'. Le categorie si possono
   permettere di scorrere perche' nessuna di loro e' l'unica strada per
   arrivare da qualche parte. */
.days-nav .chip-row {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Quanti giorni sono, sopra il titolo del riquadro. Bianco smorzato come "a
   persona" del prezzo: deve dirsi prima del titolo ma non prima della foto. */
.pack-tile-giorni {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: oklch(1 0 0 / .8);
}

.pack-badge {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 1;
  background: var(--text);
  color: var(--cream);
  border-radius: var(--radius-pill);
  padding: .3rem .75rem;
  font-size: .7rem;
  letter-spacing: .06em;
}
.pack-badge-corto { display: none; }
/* I riquadri piccoli del telefono (vedi .pack-grid): largo 150-170 px, il
   bollino "Vous économisez €5,50" andava su due righe e copriva il titolo.
   Li' si mostra "−€5,50", su una riga, piu' in alto nell'angolo. Sotto i
   360 px i riquadri sono uno per riga e larghi: il bollino lungo ci sta. */
@media (min-width: 360px) and (max-width: 639px) {
  .pack-tile:not(:first-child):not(:nth-child(even):last-child) .pack-badge {
    top: .55rem;
    right: .55rem;
    padding: .2rem .55rem;
    white-space: nowrap;
  }
  .pack-tile:not(:first-child):not(:nth-child(even):last-child) .pack-badge-lungo { display: none; }
  .pack-tile:not(:first-child):not(:nth-child(even):last-child) .pack-badge-corto { display: inline; }
}

/* "Crea il tuo pacchetto", l'ultimo riquadro di ogni vetrina: senza foto e col
   bordo tratteggiato, un posto vuoto da riempire e non un pacchetto in piu'.
   Niente sfumatura (::after): e' li' per leggere il bianco sulla foto. */
.pack-tile-crea {
  background: var(--cream);
  border: 1.5px dashed color-mix(in oklab, var(--text) 30%, transparent);
  box-shadow: none;
}
.pack-tile-crea::after { content: none; }
.pack-tile-crea .pack-tile-link { color: var(--text); }
.pack-tile-crea .pack-tile-testo { top: 1rem; justify-content: center; }
.pack-tile-crea svg { width: 30px; height: 30px; color: var(--gold); }
.pack-tile-crea .pack-tile-testo > span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.4;
}

/* ── La pagina "Crea il tuo pacchetto" (pacchetto.html?crea=...) ─────── */
.build { display: flex; flex-direction: column; gap: .7rem; }
.build .catalog-head { padding-inline: 0; }
.build-durate { justify-content: center; }
.build-vuoto { margin-bottom: .6rem; }
.build-scelte { margin-bottom: .6rem; }
.build-scelte .iconbtn { flex: none; }
.build-cat {
  margin: 1.2rem 0 0;
  font-weight: 400;
  font-size: 1.35rem;
}
.build-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Una riga per scheda: la foto piccola, titolo, variante e prezzo, e il
   bottone a destra. min-width: 0 sul testo o un titolo lungo allarga la riga. */
.build-riga {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}
.build-riga img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cream);
}
.build-riga-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.build-riga-testo strong { font-weight: 500; font-size: .92rem; line-height: 1.25; }
.build-riga-testo select {
  max-width: 100%;
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem;              /* sotto i 16px l'iPhone ingrandisce la pagina */
}
.build-riga-testo select:focus { outline: none; border-color: var(--text); }
.build-riga-testo select:disabled { opacity: .6; }
.build-riga-variante,
.build-riga-prezzo { color: var(--muted); font-size: .78rem; }
.build-riga-btn {
  flex: none;
  min-height: 38px;
  padding-inline: .9rem;
  font-size: .68rem;
}
/* Pacchetto pieno: "Aggiungi" resta toccabile (dice perche' non si puo'),
   ma si spegne, cosi' l'occhio va al bottone in fondo. */
.build.is-pieno .build-riga-btn.btn-primary { opacity: .35; }
.build-riga.is-presa img { outline: 2px solid var(--gold); outline-offset: 2px; }
/* La barra in fondo: resta ferma mentre si scorre l'elenco, come il piede
   della finestra della richiesta. */
.build-barra {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 1rem -1.25rem 0;
  padding: .8rem 1.25rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.build-barra .pack-foot { margin: 0 0 .6rem; }
.build-barra .pack-price { font-size: 1.35rem; }
.build-risparmio { color: var(--gold); font-size: .82rem; }
.build-conta { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.build-avviso { margin: 0 0 .6rem; }
.build-avviso[hidden] { display: none; }
.build-barra .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Il pacchetto aperto ──────────────────────────────────────────────── */
.pack-detail {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.pack-detail-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: .5rem;
}
.pack-detail-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pack-detail-title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem);
  line-height: 1.1;
}
.pack-detail-lead {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.6;
}
.pack-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin-top: .3rem;
}
.pack-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
}
/* "a persona" e' l'unita' del numero, non una frase: piccola e attaccata,
   come il "/buggy" dei prezzi a mezzo. */
.pack-price small {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.pack-note {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: .78rem;
  line-height: 1.5;
}
/* Il conto della famiglia tipo, sotto il prezzo a persona. Non e' un titolo ma
   un numero: piu' piccolo del prezzo grande, piu' scuro della nota che gli sta
   sotto, cosi' si legge nell'ordine giusto (prezzo, famiglia, avvertenza). */
.pack-family {
  margin: .1rem 0 0;
  font-size: .92rem;
  font-weight: 400;
}
.pack-inside {
  margin-top: .8rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold);
}
.pack-voci {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.pack-voce {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 0;
  border-top: 1px solid var(--border);
}
.pack-voce-n {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: .1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  font-size: .72rem;
  color: var(--muted);
}
/* min-width: 0 su un figlio flex serve o un titolo lungo allarga la riga
   invece di andare a capo. */
.pack-voce-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.pack-voce-testo strong {
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.25;
}
.pack-voce-meta {
  color: var(--muted);
  font-size: .76rem;
}
/* Le due righe che dicono che cos'e': dal pacchetto non si esce per andare a
   leggerlo sulla scheda, quindi il minimo per capirlo sta qui. */
.pack-voce-desc {
  color: var(--muted);
  font-weight: 300;
  font-size: .84rem;
  line-height: 1.5;
}
/* La nota sotto la data e l'etichetta delle persone si toccavano: il .hint
   ha solo il margine sopra, e li' sotto ci va un campo nuovo. */
#packDialog .hint { margin-bottom: 1.1rem; }

.pack-back {
  align-self: center;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .82rem;
}

/* Il piede della vista "In famiglia": le due uscite, in colonna e centrate.
   Nella pagina di tutti i pacchetti resta `hidden` e non occupa niente. */
.packs-foot {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
/* `display: flex` vince su `[hidden]`, che e' solo `display: none` del browser:
   senza questa riga il piede si vedeva anche nella pagina di tutti i pacchetti,
   con scritto "tutte le escursioni adatte ai bambini". Vale per ogni elemento
   che nasce nascosto e ha un display suo. */
.packs-foot[hidden] { display: none; }

/* ── Pagina di dettaglio di una singola escursione ────────────────────── */
.detail-page {
  /* niente spazio in cima: la striscia e' sticky e sta nel flusso, il banner
     fisso qui non c'e' piu' */
  padding: 0 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}
.detail-back:hover { color: var(--text); }

.detail-tour {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.detail-media {
  display: flex;
  flex-direction: column;
}
.detail-gallery {
  display: flex;
  gap: .5rem;
  padding: .7rem 1.3rem;
  overflow-x: auto;
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.gallery-thumb {
  flex: none;
  width: 4.2rem;
  height: 3rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
  opacity: .65;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb.is-active {
  border-color: var(--gold);
  opacity: 1;
}
.detail-main {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.4rem 1.3rem 1.5rem;
}
/* La categoria a sinistra e "Condividi" a destra, sopra il titolo: il
   pulsante non sta nella foto perche' la foto e' gia' un bottone (ingrandisce). */
.detail-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.detail-share {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
}
.detail-share svg { width: 16px; height: 16px; }
.detail-h1 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.15;
}
.detail-lead {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}
.detail-sub {
  margin: .8rem 0 0;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}
.detail-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row dt {
  font-size: .78rem;
  color: var(--muted);
}
.detail-row dd {
  margin: 0;
  text-align: right;
  font-weight: 400;
}
.detail-main .btn-block { margin-top: .8rem; }
/* i due pulsanti stanno in mezzo alla scheda: l'avviso delle 24 ore
   ha i Consigli subito sotto e serve lo stacco */
.detail-main .hint { margin-bottom: 1.6rem; }

/* Rimando al charter privato, in coda alla scheda */
.detail-alt {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: .4rem;
  padding: .95rem 1.1rem;
  background: var(--cream);
  border-radius: 14px;
}
.detail-alt:hover { background: var(--sand); }
.detail-alt-title {
  font-size: .85rem;
  color: var(--muted);
}
.detail-alt-name { font-weight: 400; }
.detail-alt-go {
  margin-top: .15rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
}

.detail-related h2 {
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin: .6rem 0 .9rem;
}
.detail-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.detail-related a {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  padding-right: 1rem;
}
.detail-related-media {
  flex: 0 0 84px;
  aspect-ratio: 1;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.detail-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-related-media .tour-media-empty { font-size: .7rem; }
.detail-related-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem 0;
}
.detail-related-title { line-height: 1.25; }
.detail-related-price {
  font-size: .78rem;
  color: var(--muted);
}

@media (min-width: 900px) {
  /* da tablet in su il contenitore si allarga: a 640px le due colonne
     mandavano a capo anche "Puerto Colon" */
  .detail-page .wrap { max-width: var(--max-wide); }
  /* Le due colonne servivano a mettere la foto grande di fianco al testo. La
     foto adesso sta nella fascia in cima, quindi la scheda torna a una
     colonna sola; il testo pero' non deve allargarsi a 1120 px, o le righe
     diventano il doppio di quanto si legge comodo. */
  .detail-tour { display: block; }
  .detail-main {
    padding: 2.2rem 2rem 2.4rem;
    max-width: 68ch;
    margin: 0 auto;
  }
  /* le miniature seguono la stessa colonna del testo, se no restano
     appiccicate al bordo sinistro mentre il testo sta in mezzo */
  .detail-media {
    max-width: 68ch;
    margin: 0 auto;
    width: 100%;
  }
  .detail-related ul { flex-direction: row; }
  .detail-related li { flex: 1; }
}

.catalog-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--muted);
}
.catalog-empty h2 {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 .6rem;
}
.catalog-empty p {
  margin: 0 auto;
  max-width: 46ch;
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
}
.catalog-empty code {
  background: var(--cream);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .85em;
}

@media (min-width: 960px) {
  .catalog-head .wrap,
  .catalog-tools,
  .catalog-page .wrap { max-width: var(--max-wide); }
  .catalog-tools {
    flex-direction: row;
    /* le pillole ora vanno a capo su piu' righe: la ricerca si allinea alla
       prima riga invece di restare sospesa a meta' */
    align-items: flex-start;
    justify-content: space-between;
  }
  .catalog-search { flex: 0 0 320px; }
  /* Ricerca e "Filtri" a sinistra, le categorie a destra; il pannello aperto
     va a capo sotto tutti e due, largo quanto la pagina. */
  .catalog-tools { flex-wrap: wrap; }
  .catalog-searchrow { flex: 0 0 auto; }
  .catalog-searchrow .catalog-search { flex: 0 0 320px; }
  .filter-panel { order: 3; flex: 1 0 100%; flex-direction: row; gap: 2.5rem; align-items: flex-start; }
  .catalog-tools > .chip-row { flex: 1 1 0; min-width: 0; }
  .tour-card { transition: transform .4s ease; }
  .tour-card:hover { transform: translateY(-4px); }
}

/* ── Finestra "Richiedi disponibilità" ────────────────────────────────── */
.request-activity {
  margin: -.6rem 0 1.3rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* la finestra della lista chiede il nome con lo stesso campo di quella della
   richiesta: senza questa riga eredita la larghezza di default del browser */
.request-dialog input[type="date"],
.request-dialog input[type="text"],
.lista-dialog input[type="text"],
.lista-dialog input[type="email"] {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .85rem 1.2rem;
  outline: none;
  color: var(--text);
  font-size: .95rem;
  margin-bottom: 1.1rem;
}
.request-dialog input:focus,
.lista-dialog input:focus { border-color: var(--text); }

.request-people-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: .7rem;
}
.request-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-bottom: 1.1rem;
}
.request-people label {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.request-people input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .8rem 1rem;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  text-align: center;
}
.request-people input:focus { border-color: var(--text); }

/* ── Il calendario della data ─────────────────────────────────────────────
   Scritto a mano perche' un <input type="date"> non sa spegnere i giorni in cui
   l'escursione non parte: accetta solo un minimo e un massimo, e il calendario
   che si apre lo disegna il sistema operativo.

   Il campo mostra la data scelta e si apre al tocco: la griglia sta sopra il
   resto invece di stare sempre aperta, perche' il modulo e' gia' piu' alto di
   un telefono e 280 px in piu' erano mezza schermata da scorrere. */
.date-open {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .8rem 1.1rem;
  margin-bottom: 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Finche' la data non c'e', "Scegli la data" e' un invito e non un dato: si
   scrive col grigio dei segnaposto degli altri campi, non col nero del testo. */
.date-open.is-empty { color: var(--muted); }
.date-open[aria-expanded="true"] { border-color: var(--text); }

/* Il contenitore e' relativo: la griglia gli si appoggia sotto. */
[data-date-field] { position: relative; }

.date-cal {
  position: absolute;
  /* sale sopra il piede appiccicato in fondo (z-index 1) e sopra la tendina
     degli hotel (2): quando e' aperto e' la cosa con cui si sta parlando */
  z-index: 3;
  top: calc(100% - .9rem);
  left: 0;
  right: 0;
  padding: .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.date-cal[hidden] { display: none; }

.date-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .5rem;
}
.date-cal-head strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  /* il nome del mese lo da' il browser e arriva minuscolo in italiano e in
     spagnolo ("settembre 2026"): la maiuscola la mettiamo qui */
  text-transform: capitalize;
}
.date-cal-nav {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Spenta ai bordi dell'anno richiedibile, come il "meno" a quota uno */
.date-cal-nav:disabled { opacity: .3; cursor: default; }

/* Sette colonne uguali, per le iniziali e per i numeri: se le due griglie non
   combaciano i numeri non stanno sotto il loro giorno. */
.date-cal-dow,
.date-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-cal-dow {
  margin-bottom: .2rem;
}
.date-cal-dow span {
  text-align: center;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .2rem 0;
}
/* La colonna di un giorno in cui non si parte e' spenta anche in testata: si
   vede subito che quei numeri sono grigi per una ragione, non per un errore. */
.date-cal-dow span.is-off { opacity: .35; }

.date-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Il giorno in cui non si parte: **spento e non toccabile**. E' il motivo per
   cui questo calendario esiste. Niente barrato ne' rosso: non e' un errore del
   cliente, e' un giorno che non c'e'. */
.date-cal-day:disabled {
  color: var(--muted);
  opacity: .3;
  cursor: default;
}
.date-cal-day:not(:disabled):active { background: var(--sand); }
/* Quello scelto: pieno scuro. Qui il riquadro pieno ci vuole — in una griglia
   di trenta numeri il bordo da solo non si trova. */
.date-cal-day.is-on {
  background: var(--text);
  color: var(--bg);
}

/* Quando in tutto l'anno non c'e' un giorno buono */
.date-cal-vuoto {
  margin: 0;
  padding: .3rem;
  font-size: .86rem;
  color: var(--muted);
}

/* ── Il "meno / più" accanto ai numeri ────────────────────────────────────
   Persone, mezzi, menu: sono le stesse caselle di prima, con un bottone per
   lato. La casella resta e si puo' ancora battere — per dodici persone e' piu'
   svelto scrivere "12" — ma il caso normale, "siamo due piu' un bambino", da
   quattro gesti (tocca, aspetta il tastierino, batti, chiudilo) diventa uno.

   La griglia delle persone e' a due colonne: su un telefono da 375 px sono
   circa 158 px per colonna, da cui 2×38 di bottoni e il resto al numero. Per
   questo i bottoni sono quadrati e stretti e la casella non ha piu' il suo
   padding ai lati: e' il numero che deve restare leggibile, non la cornice. */
.stepper {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.stepper input {
  /* `min-width: 0` se no la casella si rifiuta di stringersi e i bottoni
     escono dalla colonna */
  min-width: 0;
  flex: 1;
  padding-left: .2rem;
  padding-right: .2rem;
}
/* Le frecce che il browser mette da solo sulle caselle numeriche: con due
   bottoni veri accanto sarebbero la stessa cosa detta due volte, e su desktop
   comparivano al passaggio del mouse rubando spazio al numero. */
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  /* il segno "−" e il "+" a occhio nudo non sono alti uguali: il line-height
     fisso li mette sulla stessa riga invece di farne ballare uno */
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  /* niente evidenziazione grigia al tocco su Android */
  -webkit-tap-highlight-color: transparent;
}
.stepper-btn:active { background: var(--sand); }
/* Spento ai limiti — "adulti" parte da uno — invece di restare acceso e non
   fare niente, che sembra rotto. */
.stepper-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* "Questa escursione si fa solo: Lun · Mer · Ven." Compare sotto la data
   appena il cliente ne sceglie una che non va, non dopo aver premuto invia:
   scoprirlo alla fine, con tutto gia' compilato, e' la cosa che fa chiudere
   la pagina. Il margine negativo lo attacca al campo qui sopra, che ha gia'
   il suo margine sotto. */
/* Rosso perche' fermano davvero, tutti e tre: il giorno fuori elenco, i menu
   speciali di troppo e i mezzi a zero non lasciano partire la richiesta. */
.request-day-error {
  margin: -.8rem 0 1.1rem;
  padding: .6rem .9rem;
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--danger);
}
.request-day-error[hidden] { display: none; }
/* Nella finestra della lista: la voce con la data scaduta, e l'avviso sopra
   il pulsante, che resta spento finche' non la si toglie (lista.js). */
.lista-dialog .lista-voce-testo .lista-voce-scaduta { color: var(--danger); font-weight: 600; }
.lista-dialog .request-day-error { margin: 0 0 1rem; }
.lista-dialog .request-submit:disabled { opacity: .4; cursor: not-allowed; }

.request-optional {
  text-transform: none;
  letter-spacing: normal;
  opacity: .7;
}

/* Itinerario: una tappa per riga, con l'orario allineato a sinistra. La
   linea verticale lega le tappe fra loro senza fare un elenco puntato. */
.detail-itinerary { margin: 0 0 1.6rem; }
.detail-itinerary ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 .2rem;
  border-left: 1px solid var(--border);
}
.detail-itinerary li {
  position: relative;
  display: flex;
  gap: .8rem;
  padding: .55rem 0 .55rem 1rem;
  font-size: .9rem;
  color: var(--text);
}
.detail-itinerary li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.detail-itinerary-time {
  flex: none;
  min-width: 3.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Consigli: cose pratiche da sapere prima di partire */
.detail-notes { margin: 0 0 1.6rem; }
.detail-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail-notes li {
  position: relative;
  padding: .3rem 0 .3rem 1.2rem;
  font-size: .88rem;
  color: var(--muted);
}
.detail-notes li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* "Cosa e' incluso": icona e parola, su due o tre colonne. Non e' un elenco
   puntato ma un riquadro, cosi' si legge a colpo d'occhio come sui siti dei
   fornitori. */
.detail-included { margin: 0 0 1.6rem; }
.detail-included ul {
  list-style: none;
  margin: 0;
  padding: 1rem .8rem;
  background: var(--sand);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem .6rem;
}
@media (min-width: 480px) {
  .detail-included ul { grid-template-columns: repeat(3, 1fr); }
}
.detail-included li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
}
.detail-included svg {
  width: 30px;
  height: 30px;
  color: var(--gold);
  flex: none;
}
.detail-included span {
  font-size: .78rem;
  line-height: 1.25;
  color: var(--muted);
}

/* Varianti sulla pagina di dettaglio: bottoni da premere, non un elenco da
   leggere. La scelta si fa qui, cosi' la richiesta parte gia' completa. */
.detail-options { margin: 0 0 1.4rem; }
.detail-options-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: .7rem;
}
.detail-options-list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.detail-option {
  flex: 1 1 auto;
  /* due varianti stanno affiancate, tre vanno a capo invece di stringersi
     fino a tagliare il testo */
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.detail-option:hover { border-color: var(--text); }
.detail-option[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--sand);
}
/* Dove le varianti hanno una spiegazione i bottoni vanno in colonna, uno per
   riga: la spiegazione si apre sotto quello premuto, e affiancati non ci
   starebbe. Senza spiegazioni la fila resta affiancata come prima. */
.detail-options-list.has-desc {
  flex-direction: column;
  /* piu' spazio fra una variante e l'altra che fra il bottone e la sua
     spiegazione: cosi' si vede a colpo d'occhio di chi e' quel testo */
  gap: 1rem;
}
.detail-option-row {
  display: flex;
  flex-direction: column;
}
.detail-options-list.has-desc .detail-option { width: 100%; }

/* Il dettaglio della variante scelta: giorni, orario, cosa si mangia. Sta
   sotto il suo bottone e se ne vede una alla volta — tutte aperte, quattro
   varianti con due righe di testo a testa diventano un muro. */
.detail-option-desc {
  margin: .35rem 0 0;
  padding: .75rem .9rem;
  background: var(--cream);
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
}
.detail-option-desc[hidden] { display: none; }

/* Varianti a gruppi (options.groups): un pulsante per gruppo, chiuso, che
   toccandolo apre i suoi giri. Stessa freccia delle schede del noleggio. */
.detail-option-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.detail-option-group > summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.detail-option-group > summary::-webkit-details-marker { display: none; }
.detail-option-group > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.detail-option-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.detail-option-group-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.detail-option-group-name { font-size: 1rem; font-weight: 500; }
.detail-option-group-desc { font-size: .8rem; color: var(--muted); }
.detail-option-group-chosen { font-size: .8rem; color: var(--text); }
.detail-option-group-chosen[hidden] { display: none; }
.detail-option-group-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 .75rem .9rem;
}
.detail-option-group-list .detail-option { width: 100%; }

.detail-option-name { font-size: .92rem; }
.detail-option-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Menu delle varianti (1 o 2 ore, quale percorso). Prende l'aspetto degli
   altri campi della finestra: .ticket-dialog input e select non condividono
   una regola, quindi va vestito a mano. */
.ticket-dialog select[data-request-option],
.ticket-dialog select[data-request-time],
.ticket-dialog select[data-request-lang] {
  width: 100%;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}
/* `hidden` dentro le finestre deve spegnere davvero. Il browser da' agli
   elementi con `hidden` un `display: none`, ma e' la regola piu' debole che
   esista: basta una classe qui dentro che dia il suo `display` (block, grid,
   flex) e l'elemento si riaccende. E' successo con la domanda sui menu, che
   compariva su tutte le schede con niente sotto, e col campo dei neonati, che
   si faceva scrivere un numero poi buttato via (il JS legge `.hidden` e manda
   0). Una regola sola al posto dell'elenco a uno a uno che c'era prima: vale
   anche per il prossimo campo che nascondiamo, senza doverselo ricordare. */
.ticket-dialog [hidden] { display: none; }

/* Domanda sul transfer: compare solo sulle attivita' che ce l'hanno.
   .ticket-dialog label rende le etichette maiuscole e spaziate: qui e' una
   domanda da leggere, non un'etichetta, quindi si torna al testo normale. */
.ticket-dialog .request-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  background: var(--sand);
  border-radius: 12px;
  cursor: pointer;
  font-size: .9rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
.ticket-dialog .request-check[hidden] { display: none; }
.ticket-dialog .request-check input {
  /* il campo non deve ereditare la larghezza piena degli altri della finestra */
  width: auto;
  min-width: 0;
  margin: .15rem 0 0;
  flex: none;
  accent-color: var(--text);
}
.ticket-dialog .request-check small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .78rem;
}

/* Il piede della finestra: il conto e il pulsante, appiccicati in basso
   mentre il resto del modulo scorre.

   Il modulo e' sempre piu' alto di un telefono — 1262 px contro 844 sulla
   scheda piu' semplice, 1563 dove ci sono i menu — e prima il pulsante stava
   in fondo a tutto: il cliente compilava una schermata e mezza senza vedere
   ne' quanto viene ne' dove si manda. Il totale stava a meta' modulo e gli
   passava davanti una volta sola, mentre e' il numero che cambia ogni volta
   che tocca "adulti".

   I margini negativi ai lati pareggiano il padding della finestra: la barra
   arriva da bordo a bordo e il modulo le scorre sotto invece che di fianco.
   `sticky` regge finche' sotto al piede c'e' ancora qualcosa da scorrere —
   sono le due righe del preavviso e della privacy, che per questo restano
   fuori. */
/* Il respiro in fondo lo mette il modulo, non la finestra. Il piede si
   incolla al fondo di quello che scorre, che finisce dove finisce il
   contenuto: col padding in fondo alla finestra il piede restava due
   centimetri piu' su e i campi gli spuntavano da sotto. */
.request-dialog { padding-bottom: 0; }
.request-dialog form { padding-bottom: 2rem; }

.request-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: .3rem -1.4rem 0;
  padding: .9rem 1.4rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Il totale: si aggiorna mentre il cliente cambia i numeri delle persone.
   Il numero grosso a sinistra perche' e' quello che si cerca, il conto di
   fianco per far vedere da dove viene, e sotto la nota che e' indicativo.
   Su una riga sola e non tre: nel piede lo spazio e' quello che tolgo al
   modulo, e tre righe fisse su un telefono piccolo erano troppe.
   `flex` e non `grid` per via del totale dei pacchetti, che qui dentro e'
   testo semplice senza ne' <strong> ne' <span>: in una colonna di griglia si
   spezzava a meta' ("You save / €11"), come riga di flex si distende. */
.request-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .6rem;
  row-gap: .1rem;
  margin: 0 0 .7rem;
  padding: .55rem .9rem;
  background: var(--sand);
  border-radius: 12px;
}
.request-total[hidden] { display: none; }
.request-total strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.request-total span {
  margin-left: auto;
  text-align: right;
  font-size: .85rem;
  color: var(--text);
}
.request-total small {
  flex: 1 0 100%;
  font-size: .75rem;
  color: var(--muted);
}

/* ── La lista delle richieste ─────────────────────────────────────────────
   Il secondo pulsante sulla pagina di dettaglio, il pulsante che galleggia in
   basso, la finestra della lista e il messaggio "aggiunta". */

/* Galleggia in basso a destra e c'e' solo quando la lista ha qualcosa dentro.
   Sta sopra tutto tranne le finestre, che hanno z-index 40 e 41. */
.lista-fab {
  position: fixed;
  /* a sinistra, non a destra: in basso a destra c'e' gia' il pallino
     dell'assistente e i due si coprivano a vicenda */
  left: 1.1rem;
  bottom: 1.1rem;
  /* sotto .assist-fab (39) e sotto le finestre (40 e 41) */
  z-index: 30;
  max-width: calc(100vw - 5.5rem);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1.2rem 0 .6rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 10px 30px -12px oklch(0.24 0.012 60 / .6);
}
.lista-fab[hidden] { display: none; }
.lista-fab-count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 .4rem;
  border-radius: var(--radius-pill);
  /* azzurro come "Aggiungi alla lista" e il numerino del carrello */
  background: var(--wave-blue-light);
  color: oklch(0.24 0.012 60);
  font-size: .85rem;
  letter-spacing: 0;
}

/* Con dieci escursioni la finestra sarebbe piu' alta dello schermo: scorre
   dentro invece di uscire dal telefono. */
.lista-voci {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.lista-voce {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
}
.lista-voce-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.lista-voce-testo strong {
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.25;
}
/* data, ora, persone e variante su una riga sola: se non ci stanno vanno a
   capo, invece di allargare la finestra */
.lista-voce-testo span {
  font-size: .78rem;
  color: var(--muted);
}
.lista-voce-prezzo {
  flex: none;
  font-size: .9rem;
}
.lista-voce-togli {
  flex: none;
  width: 32px;
  height: 32px;
  font-size: .8rem;
  color: var(--muted);
}

/* I − / + delle persone e dei mezzi nella lista (20 ottobre 2026): un
   contatore per riga di testo, che va a capo se non ci sta. Bottoni piu'
   piccoli di quelli della finestra della richiesta (38 px): qui stanno sotto
   il titolo, accanto al prezzo e alla ✕, e lo spazio e' meno. */
.lista-conta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: .35rem;
}
.lista-conta-riga {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.lista-voce-testo .lista-conta-nome {
  /* larga uguale per tutti, cosi' i − / + stanno in colonna; "Erwachsene"
     e' la piu' lunga delle cinque lingue */
  min-width: 5.6em;
  font-size: .8rem;
}
.lista-voce-testo .lista-conta-n {
  min-width: 1.4em;
  text-align: center;
  font-size: .95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lista-conta .stepper-btn {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

.lista-totale {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0 0 1.2rem;
  padding: .9rem 1rem;
  background: var(--sand);
  border-radius: 12px;
}
.lista-totale strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}
.lista-totale small {
  font-size: .75rem;
  color: var(--muted);
}

.lista-empty {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .9rem;
}

.lista-svuota {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .5rem;
  color: var(--muted);
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* "Aggiunta alla tua lista": compare in basso e sparisce da sola. Sopra la
   finestra, perche' si vede anche mentre la finestra si sta chiudendo. */
.lista-toast {
  position: fixed;
  left: 50%;
  /* sopra i due pulsanti che galleggiano, non addosso */
  bottom: 5.5rem;
  z-index: 45;
  transform: translate(-50%, .5rem);
  max-width: min(90vw, 400px);
  padding: .7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .85rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.lista-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.request-submit { margin-bottom: 1rem; }

.request-privacy {
  margin-top: .5rem;
  font-size: .74rem;
  opacity: .8;
}
.request-privacy a { text-decoration: underline; white-space: nowrap; }

/* ── Assistente di ricerca ────────────────────────────────────────────── */
.assist-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 39;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -12px oklch(0.24 0.012 60 / .55);
  transition: transform .25s ease;
}
.assist-fab svg { width: 24px; height: 24px; }
.assist-fab:hover { transform: translateY(-2px); }

.assist-scrim {
  position: fixed;
  inset: 0;
  background: oklch(0.24 0.012 60 / .45);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity .25s ease;
}
.assist-scrim[hidden] { display: none; }
.assist-scrim.is-visible { opacity: 1; }

.assist-panel {
  position: fixed;
  z-index: 41;
  right: 0;
  bottom: 0;
  width: min(100%, 420px);
  max-height: min(85dvh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 50px -30px oklch(0.24 0.012 60 / .5);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.assist-panel[hidden] { display: none; }
.assist-panel.is-open { transform: translateY(0); }

.assist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.assist-head strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
}
.assist-head span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.assist-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.assist-msg {
  margin: 0;
  align-self: flex-start;
  max-width: 85%;
  background: var(--cream);
  border-radius: 16px 16px 16px 4px;
  padding: .75rem 1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.assist-msg-me {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 16px 16px 4px 16px;
}

.assist-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .2rem;
}
.assist-option {
  padding: .6rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .8rem;
  transition: background .2s ease, border-color .2s ease;
}
.assist-option:hover {
  background: var(--cream);
  border-color: color-mix(in oklab, var(--text) 30%, transparent);
}

.assist-results {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.assist-results a {
  display: grid;
  gap: .15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .8rem .95rem;
  transition: border-color .2s ease;
}
.assist-results a:hover { border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.assist-res-cat {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
}
.assist-res-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
}
.assist-res-price {
  font-size: .78rem;
  color: var(--muted);
}

/* Riquadro "non trovi quello che cerchi": Admiral rivende, quindi cio' che
   non e' in catalogo si puo' comunque chiedere. */
.assist-custom {
  margin-top: .9rem;
  padding: .95rem 1rem 1rem;
  background: var(--cream);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.assist-custom strong { font-weight: 500; }
.assist-custom span {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.45;
}
.assist-custom .btn { margin-top: .5rem; }

.assist-actions {
  display: grid;
  gap: .5rem;
  margin-top: .6rem;
}

@media (min-width: 640px) {
  .assist-panel {
    right: 1.1rem;
    bottom: 1.1rem;
    border-radius: 20px;
  }
  .assist-fab { right: 1.6rem; bottom: 1.6rem; }
  .lista-fab { left: 1.6rem; bottom: 1.6rem; }
}

/* La casella dell'hotel e i suoi suggerimenti.
   La lista e' scritta a mano invece che con <datalist> perche' su Android il
   <datalist> diventa un pannello scuro a tutto schermo che copre il campo:
   non si puo' ne' colorare ne' accorciare, e cercava il testo anche in mezzo
   a una parola. Vedi initHotelField() in escursioni.js. */
.hotel-field {
  position: relative;
  /* il campo dentro porta gia' il suo margine sotto */
  margin-bottom: 0;
}
.hotel-sugg {
  position: absolute;
  z-index: 2;
  top: calc(100% - .9rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: 15.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hotel-sugg[hidden] { display: none; }
.hotel-sugg-voce {
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .93rem;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
}
.hotel-sugg-voce.is-on,
.hotel-sugg-voce:hover { background: var(--cream); }

/* Dove passa il pulmino, sotto la casella dell'hotel. Prende il posto della
   riga di aiuto e si vede di piu': meta' dei clienti non sale davanti al
   proprio albergo ma a una fermata dell'autobus a due strade, ed e' la cosa
   che devono leggere. */
/* sotto la data, subito prima di "A che ora": senza il margine sotto la riga
   si incolla all'etichetta che segue */
[data-hotel-hint] { margin-bottom: 1.1rem; }
/* la frase delle 24 ore sotto il calendario: senza, si attaccava al campo dopo */
[data-request-date-hint] { margin-bottom: 1.1rem; }
.hotel-punto {
  margin: .8rem 0 1.1rem;
  background: var(--cream);
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}
.hotel-punto strong {
  display: block;
  margin-top: .25rem;
  font-size: .95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

/* "A che ora" sulle schede col pick-up: non un menu ma l'ora dell'hotel
   scelto, scritta e basta. Stessa forma del campo che sostituisce, senza il
   bordo — non e' una cosa su cui si clicca. */
.request-ora-fissa {
  margin: 0 0 1.2rem;
  font-size: 1.15rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.request-ora-fissa[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Barra "Prenota ora" in fondo alla scheda escursione
   ------------------------------------------------------------------------ */

/* Il prezzo e il pulsante seguono chi legge invece di aspettarlo in fondo alla
   pagina: la scheda di un'escursione e' lunga, e chi ha gia' deciso a meta'
   lettura non deve scorrere fino in fondo per prenotare. Il pulsante dentro la
   scheda resta dov'e': chi arriva in fondo leggendo lo trova al suo posto. */
.book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* sotto .assist-fab (39) e sotto le finestre (40 e 41) */
  z-index: 38;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.1rem;
  /* la striscia del telefono sotto il pollice non mangia il pulsante */
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -18px oklch(0.24 0.012 60 / .5);
}
.book-bar[hidden] { display: none; }

.book-bar-price {
  margin: 0;
  flex: none;
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.book-bar-price .price-before { margin-right: .3rem; }

.book-bar-cta {
  flex: 1;
  min-height: 48px;
}

/* La barra copre l'angolo dei due pallini: quando c'e', salgono sopra di lei.
   Stessa cosa per il messaggio della lista, che spunta da li' sotto. */
body.has-book-bar .lista-fab,
body.has-book-bar .assist-fab { bottom: calc(1.1rem + 4.75rem); }
body.has-book-bar .lista-toast { bottom: calc(5.5rem + 4.75rem); }

/* L'ultima riga del piede resterebbe sotto la barra: le si fa posto. */
body.has-book-bar .footer { padding-bottom: 5.5rem; }

/* Da tablet in su la barra non serve larga quanto lo schermo: il pulsante
   diventa una fascia lunga un metro e mezzo. Si tiene sulla stessa misura del
   contenuto, come .wrap. */
@media (min-width: 720px) {
  .book-bar {
    justify-content: center;
  }
  .book-bar-cta {
    flex: none;
    min-width: 280px;
  }
}

/* ---------------------------------------------------------------------------
   La lista vestita da retro di cartolina
   ------------------------------------------------------------------------ */

/* Solo l'aspetto: le voci, il totale, il nome e il pulsante WhatsApp restano
   quelli di prima, al loro posto e con lo stesso codice dietro. Ogni regola
   parte da .lista-dialog, cosi' le altre finestre non cambiano. */

.lista-dialog {
  background-color: var(--cream);
  /* la grana della carta: un puntino ogni 4px, cosi' chiaro che si vede solo
     come "non e' uno schermo bianco" */
  background-image: radial-gradient(oklch(0.24 0.012 60 / .05) 1px, transparent 1px);
  background-size: 4px 4px;
  /* la cornicetta stampata sul retro. Outline e non un bordo dentro il
     contenuto: la finestra scorre, e l'outline sta sul riquadro della
     finestra, quindi resta ferma mentre le voci scorrono sotto. */
  outline: 1px solid oklch(0.78 0.02 75);
  outline-offset: -10px;
}

.lista-intestazione { min-width: 0; }
.lista-luogo {
  margin: .15rem 0 0;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- francobollo e timbro ---- */

/* Sta fra il titolo e la ✕: in alto a destra e' il suo posto sulle cartoline
   vere, e la ✕ resta dov'e' che la gente la cerca. */
.lista-dialog .lista-francobollo {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 58px;
  height: 70px;
  display: grid;
  place-items: center;
  background: var(--surface);
  transform: rotate(3deg);
  box-shadow: inset 0 0 0 1px oklch(0.8 0.03 70 / .6), 0 1px 3px oklch(0.24 0.012 60 / .12);
}
.lista-dialog .lista-francobollo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* La dentellatura: pallini del colore della carta mangiati sui quattro lati. */
.lista-dialog .lista-francobollo::before {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background-image:
    radial-gradient(circle 4px at 4px 4px, var(--cream) 97%, transparent 100%),
    radial-gradient(circle 4px at 4px 4px, var(--cream) 97%, transparent 100%),
    radial-gradient(circle 4px at 4px 4px, var(--cream) 97%, transparent 100%),
    radial-gradient(circle 4px at 4px 4px, var(--cream) 97%, transparent 100%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 10px 8px, 10px 8px, 8px 10px, 8px 10px;
  background-position: top left, bottom left, top left, top right;
}

/* Il timbro: l'anello storto sull'angolo del francobollo, come quando lo
   annullano allo sportello. Niente scritte dentro: sarebbero tre traduzioni
   per un disegno che nessuno legge. */
.lista-dialog .lista-timbro {
  position: absolute;
  left: -24px;
  bottom: -10px;
  width: 48px;
  height: 48px;
  border: 2px solid var(--muted);
  border-radius: var(--radius-pill);
  opacity: .5;
  transform: rotate(-12deg);
  pointer-events: none;
}
/* Le righe dell'annullo che escono dal timbro e vanno a finire sulla carta. */
.lista-dialog .lista-timbro::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% - 6px);
  width: 40px;
  height: 14px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--muted) 0 2px,
    transparent 2px 6px
  );
}

/* ---- il lato del messaggio: le voci ---- */

/* Scritte a mano, come si scrive una cartolina. Il Caveat arriva dallo stesso
   foglio di Google Fonts degli altri due: nessuna richiesta in piu', e il file
   del font lo scarica solo il browser che apre la lista. */
.lista-dialog .lista-voce { border-bottom-style: dotted; }
.lista-dialog .lista-voce-testo strong {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
}
.lista-dialog .lista-voce-prezzo {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Il totale non e' piu' un riquadro pieno: sulla carta e' l'ultima riga del
   conto, tirata sotto con una riga piu' marcata. */
.lista-dialog .lista-totale {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 0 0;
  background: none;
  border-radius: 0;
  border-top: 1.5px solid oklch(0.78 0.02 75);
}
.lista-dialog .lista-totale strong {
  font-family: var(--font-hand);
  font-size: 2rem;
  font-weight: 600;
}
.lista-dialog .lista-totale small { text-align: right; }

.lista-dialog .lista-empty {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--text);
}

/* ---- il lato indirizzo: nome e invio ---- */

/* Il nome si scrive su una riga, come sull'indirizzo di una cartolina, non
   dentro una pillola. */
.lista-dialog input[type="text"],
.lista-dialog input[type="email"] {
  border: none;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: none;
  padding: .55rem .2rem;
  font-family: var(--font-hand);
  font-size: 1.45rem;
  margin-bottom: 1.3rem;
}
.lista-dialog input[type="text"]:focus,
.lista-dialog input[type="email"]:focus { border-bottom-color: var(--text); }
.lista-dialog input[type="text"]::placeholder,
.lista-dialog input[type="email"]::placeholder { font-family: var(--font-hand); }

/* Il codice sconto dei venditori (lista.js): la riga come quella del nome,
   col bottone "Applica" accanto. Il codice si scrive in maiuscolo e in
   caratteri normali: la scrittura a mano confonde 0 e O, 1 e I. */
.lista-codice {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  margin-bottom: 1.3rem;
}
.lista-codice input { flex: 1; min-width: 0; }
.lista-dialog .lista-codice input[type="text"] {
  font-family: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 0;
}
.lista-dialog .lista-codice input[type="text"]::placeholder {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.lista-codice .btn { flex: none; }
.lista-codice-esito { margin: -.9rem 0 1.3rem; }
/* staccato dalla nota dell'email che gli sta sopra */
.lista-dialog label[for="listaCodice"] { margin-top: 1.2rem; }
.lista-codice-esito.is-ok { color: var(--ok); }

/* Lo sconto del codice, sopra il totale: la riga del conto con quanto si toglie. */
.lista-sconto {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin: 0 0 .4rem;
  font-size: .9rem;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

/* Da 640px in su la finestra sta in mezzo allo schermo e c'e' spazio per la
   cartolina vera: messaggio a sinistra, indirizzo a destra, separati dalla
   riga verticale stampata. Sul telefono no — due colonne da 160px sarebbero
   due colonne illeggibili, e li' la cartolina resta per il lungo. */
@media (min-width: 640px) {
  .lista-dialog { width: min(100%, 640px); }
  .lista-dialog [data-lista-body] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: 1.7rem;
    align-items: start;
  }
  .lista-dialog .lista-voci,
  .lista-dialog .lista-conto { grid-column: 1; }
  .lista-dialog [data-lista-form] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 1.7rem;
    border-left: 1.5px solid oklch(0.78 0.02 75);
  }
}

/* ---------------------------------------------------------------------------
   Tema scuro
   ------------------------------------------------------------------------ */

/* Il telefono dice al sito come lo vuole il suo padrone, e il sito si gira. Non
   c'e' un interruttore da premere ne' una preferenza da salvare: `prefers-color-
   scheme` arriva dalle impostazioni del sistema.

   I colori non cambiano: si girano. Il nero caldo del testo diventa il fondo, la
   carta chiara diventa il testo. Le foto restano quelle che sono — su un sito di
   escursioni e' meta' del lavoro, al buio sembrano accese. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.19 0.012 60);
    --surface: oklch(0.235 0.014 60);
    --cream: oklch(0.275 0.016 65);
    --sand: oklch(0.335 0.022 70);
    --border: oklch(0.36 0.014 65);
    --text: oklch(0.95 0.008 85);
    --muted: oklch(0.73 0.014 70);
    /* di giorno il pulsante e' nero caldo su carta chiara: di notte si gira */
    --primary: oklch(0.94 0.01 85);
    --primary-foreground: oklch(0.2 0.012 60);
    --gold: oklch(0.8 0.06 68);
    --danger: oklch(0.7 0.16 30);
    --ok: oklch(0.72 0.13 150);
    --wait: oklch(0.8 0.13 75);
  }

  /* --- le cose che non si girano da sole ---------------------------------
     Quasi tutti i colori scritti a mano nel foglio sono bianchi sopra una foto
     o ombre: restano giusti anche al buio. Questi no. */

  /* Il riquadro a strisce ha il fondo scritto a mano, non una variabile. */
  .bento-tile.bento-tile-stripes { background: oklch(0.235 0.014 60); }

  /* --- la cartolina resta di carta ---------------------------------------
     Una cartolina nera non e' una cartolina: la carta e l'inchiostro restano
     quelli del giorno, e sul fondo scuro sembra appoggiata sul comodino. Percio'
     qui l'inchiostro va riscritto scuro a mano, se no eredita il testo chiaro
     del tema e sparisce sulla carta. */
  .lista-dialog {
    background-color: #f0e7d5;
    color: oklch(0.24 0.012 60);
    /* il rosso del giorno: quello della notte e' troppo chiaro sulla carta */
    --danger: oklch(0.55 0.15 30);
  }
  .lista-dialog .lista-voce-testo strong,
  .lista-dialog .lista-voce-prezzo,
  /* la frase della lista vuota: prima del carrello nella capsula non si vedeva
     quasi mai (il pulsante della lista c'era solo a lista piena), e al buio
     era rimasta bianca su carta chiara */
  .lista-dialog .lista-empty,
  .lista-dialog .lista-totale strong,
  .lista-dialog input[type="text"],
  .lista-dialog input[type="email"] { color: oklch(0.24 0.012 60); }
  .lista-dialog .lista-voce-testo span,
  .lista-dialog .lista-luogo,
  .lista-dialog .lista-totale small,
  .lista-dialog .hint,
  .lista-dialog .lista-svuota,
  .lista-dialog label { color: oklch(0.45 0.016 65); }
  .lista-dialog input[type="text"]::placeholder,
  .lista-dialog input[type="email"]::placeholder { color: oklch(0.55 0.016 65); }
  /* .iconbtn e il francobollo prendono il fondo da --surface: sulla carta
     chiara diventavano due macchie scure. */
  .lista-dialog .iconbtn {
    background: #fbf7ee;
    border-color: oklch(0.78 0.02 75);
    color: oklch(0.24 0.012 60);
  }
  .lista-dialog .stepper-btn {
    background: #fbf7ee;
    border-color: oklch(0.78 0.02 75);
    color: oklch(0.24 0.012 60);
  }
  .lista-dialog .lista-voce-testo .lista-conta-n { color: oklch(0.24 0.012 60); }
  .lista-dialog .lista-francobollo { background: #fffdf7; }
  .lista-dialog .btn-primary {
    background: oklch(0.26 0.014 60);
    color: oklch(0.98 0.008 85);
  }
  .lista-dialog .lista-francobollo::before {
    background-image:
      radial-gradient(circle 4px at 4px 4px, #f0e7d5 97%, transparent 100%),
      radial-gradient(circle 4px at 4px 4px, #f0e7d5 97%, transparent 100%),
      radial-gradient(circle 4px at 4px 4px, #f0e7d5 97%, transparent 100%),
      radial-gradient(circle 4px at 4px 4px, #f0e7d5 97%, transparent 100%);
  }
}

/* ─── Pagina dei venditori (venditori.html) ───────────────────────────────
   Un modulo lungo da compilare in piedi, col telefono in mano: campi grandi,
   una colonna, niente che scappi di lato. */
.vend-main { padding-top: 1rem; padding-bottom: 3rem; }
.vend-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 1.4rem 0 1rem;
}
.vend-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}
.vend-who .btn { min-height: 40px; }
/* "Installa Isla Ticket" (ticket/installa.js): in cima, finche' non e' installata. */
.vend-installa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: 1.2rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
}
.vend-installa p { margin: 0; flex: 1 1 14rem; }
.vend-installa .btn { min-height: 40px; }
/* "display: flex" e quello di .btn battono l'attributo hidden: senza questa
   riga il riquadro restava sempre in vista, vuoto, con un bottone senza scritta. */
.vend-installa[hidden], .vend-installa .btn[hidden] { display: none; }
.vend-form label,
.vend-form legend {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 .45rem;
}
.vend-form input:not([type="checkbox"]):not([type="file"]),
.vend-form select {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: .75rem .9rem;
  color: var(--text);
  font: inherit;
  font-size: 1rem;           /* sotto i 16px l'iPhone ingrandisce la pagina */
  margin-bottom: 1rem;
}
.vend-form input:focus,
.vend-form select:focus { outline: none; border-color: var(--text); }
.vend-form .btn-block { margin-top: .5rem; }
.vend-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.vend-row-3 { grid-template-columns: repeat(3, 1fr); }
.vend-row-phone { grid-template-columns: 8.5rem 1fr; }
.vend-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vend-photo { margin-bottom: 1.2rem; }
.vend-photo .btn {
  display: flex;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.vend-photo img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  margin-top: .75rem;
  border-radius: 10px;
  background: var(--cream);
}
.vend-photo img[hidden] { display: none; }
.vend-hint { display: block; color: var(--muted); margin-top: .4rem; }
/* Il telefono e' la chiave del cliente: si vede che e' il campo che conta. */
.vend-phone {
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1rem;
  margin: .5rem 0 1.2rem;
  background: color-mix(in oklab, var(--gold) 8%, var(--surface));
}
.vend-phone input,
.vend-phone select { margin-bottom: .5rem; }
/* I mezzi sul ticket: un gruppo senza cornice, come una riga del modulo. */
.vend-units { border: 0; padding: 0; margin: 0; min-width: 0; }
.vend-phone-out { margin: 0 0 .6rem; font-weight: 500; min-height: 1.3em; }
.vend-check {
  display: flex !important;
  gap: .6rem;
  align-items: center;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .95rem !important;
  color: var(--text) !important;
  margin: 0 !important;
}
.vend-check input { width: 1.3rem; height: 1.3rem; flex: none; }
/* display: flex !important vince sull'attributo hidden: la casella del
   transfer, nascosta sulle schede che non lo hanno, si vedrebbe lo stesso. */
.vend-check[hidden] { display: none !important; }
/* La casella del transfer sta fra due campi: le serve l'aria che hanno loro. */
[data-transfer-wrap].vend-check, [data-edit-transfer].vend-check { margin: 0 0 1rem !important; }
.vend-msg { margin: .5rem 0; }
.vend-msg[hidden], .vend-warn[hidden] { display: none; }
.vend-warn { color: var(--danger); margin: -.4rem 0 1rem; }
.vend .is-error { color: var(--danger); }
.vend-msg.is-ok { color: oklch(0.5 0.12 150); font-weight: 500; }
/* "Rispondi su WhatsApp" dopo la conferma: lingua e bottone, sotto il messaggio */
.vend-risposta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; font-weight: 400; }
.vend-risposta select { min-height: 44px; }
.vend-list { list-style: none; margin: 0; padding: 0; }
.vend-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
}
.vend-list li div { min-width: 0; }
/* il riquadro chiuso degli annullati, in fondo agli elenchi (18 ottobre 2026) */
.vend-list li.vend-annullati { display: block; padding: 0; border-bottom: 0; }
.vend-annullati summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.vend-annullati li:last-child { border-bottom: 0; }
.vend-list strong, .vend-list span { display: block; overflow-wrap: anywhere; }
.vend-list span { color: var(--muted); font-size: .9rem; }
.vend-list .btn { min-height: 40px; padding: 0 1rem; flex: none; }
.vend-list li { flex-wrap: wrap; }
/* Con quattro bottoni (Conferma, Annulla, pagamento, risposta) la fila era
   piu' larga del telefono e allargava tutta la pagina: va a capo. */
.vend-list-btns { display: flex; flex-wrap: wrap; gap: .5rem; flex: none; max-width: 100%; }
/* Il modulo "Modifica" si apre sotto la riga, largo quanto l'elenco. */
.vend-edit { flex-basis: 100%; padding-top: .4rem; }
.vend-edit .vend-hint { margin: -.4rem 0 .6rem; }
.vend-edit .vend-row .btn { min-height: 44px; }
/* Le richieste da WhatsApp: lo stato scritto e colorato come nella pagina
   del cliente (verde, ambra, rosso). */
.vend-requests { margin-bottom: 1.5rem; }
.vend-requests-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.4rem 0 .2rem; }
.vend-requests-head .vend-h1 { margin: 0; }
.vend-requests-head .btn { flex: none; }
.vend-req-vuoto { color: var(--muted); }
.vend-req-stato { display: block; font-style: normal; font-size: .85rem; font-weight: 500; margin-top: .15rem; }
.vend-req.is-pending .vend-req-stato { color: var(--wait); }
.vend-req.is-confirmed .vend-req-stato { color: var(--ok); }
.vend-req.is-cancelled .vend-req-stato { color: var(--danger); }
.vend-req.is-cancelled strong { text-decoration: line-through; text-decoration-thickness: 1px; }
/* Il messaggio WhatsApp della richiesta: chiuso, sotto la riga, a capo come in chat. */
.vend-req-msg { flex-basis: 100%; font-size: .9rem; }
.vend-req-msg summary { cursor: pointer; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.vend-req-msg pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: .3rem 0 0; padding: .6rem .75rem; background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 10px; }
/* Un ticket annullato nell'elenco: barrato e piu' chiaro, ma si legge. */
.vend-list li.is-cancelled > div:first-child strong,
.vend-list li.is-cancelled > div:first-child > span:last-child { opacity: .6; }
.vend-list li.is-cancelled > div:first-child strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.vend-annullato {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--danger);
}
/* "Annulla ticket" e "Ripristina ticket" sotto Chiudi / Salva. */
.vend-edit .vend-stato-btn { margin-top: .75rem; min-height: 44px; }
.vend-edit .vend-stato-btn.is-danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
/* Statistiche (solo ufficio): una tendina chiusa, quattro numeri, tre tabelle. */
.vend-stats { margin-bottom: 1.5rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.vend-stats[hidden] { display: none; }
.vend-stats > summary { cursor: pointer; margin: 1rem 0 .2rem; list-style-position: inside; }
.vend-stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .6rem 0 .2rem; }
.vend-stats-periodi { display: flex; gap: .5rem; }
.vend-stats-head .btn { min-height: 40px; padding: 0 1rem; }
.vend-stats-periodi .btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.vend-stats-cifre { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0 .4rem; }
.vend-stats-cifre div { padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.vend-stats-cifre dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.vend-stats-cifre dd { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.vend-stats-cifre small { display: block; color: var(--muted); font-size: .8rem; }
.vend-stats-blocco h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; font-weight: 500; }
.vend-stats-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vend-stats-table th { text-align: left; color: var(--muted); font-weight: 400; font-size: .78rem; padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.vend-stats-table td { padding: .45rem .4rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.vend-stats-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .vend-stats-cifre { grid-template-columns: repeat(4, 1fr); } }
.vend-search { margin-bottom: .5rem; }
.vend-search [hidden] { display: none; }   /* .btn-block vincerebbe su hidden */
.vend-row-search { grid-template-columns: 1fr auto; align-items: start; }
.vend-row-search .btn { min-height: 48px; }

/* La foto che compila il modulo (venditori.js → leggi-ticket). */
.vend-ai {
  margin: .75rem 0 0;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: var(--cream);
  font-size: .95rem;
}
.vend-ai[hidden] { display: none; }
.vend-ai.is-busy { animation: vend-pulsa 1.4s ease-in-out infinite; }
@keyframes vend-pulsa { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .vend-ai.is-busy { animation: none; } }
/* Un campo letto ma incerto: il venditore lo deve guardare per primo. */
/* (lo stesso selettore lungo della regola generale dei campi, piu' la classe:
   con ".vend-form .vend-dubbio" da solo il giallo veniva coperto) */
.vend-form input.vend-dubbio:not([type="checkbox"]):not([type="file"]),
.vend-form select.vend-dubbio {
  background: oklch(0.95 0.08 95);
  /* Il testo scuro sempre, anche col telefono in tema scuro: li' il testo dei
     campi e' chiaro, e su questo giallo spariva (visto sul telefono del
     proprietario, 30 settembre 2026). */
  color: oklch(0.24 0.012 60);
  color-scheme: light;         /* anche le iconcine (orologio, calendario) scure */
  border-color: oklch(0.75 0.14 85);
}
/* Scatta | Galleria, affiancati */
.vend-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ── LA MAPPA (mappa.html) ───────────────────────────────────────────────────
   L'isola e' un disegno, non una cartina scaricata: mare e terra hanno i
   colori del sito, e al buio si girano come il resto. I punti hanno un colore
   per categoria, lo stesso sul pallino della mappa e su quello dell'elenco. */
.map-page {
  --map-sea: oklch(0.93 0.028 220);
  --map-land: oklch(0.92 0.035 82);
  --map-coast: oklch(0.72 0.06 70);
  --map-beach: oklch(0.6 0.11 235);
  --map-view: oklch(0.55 0.09 150);
  --map-food: oklch(0.6 0.13 40);
  --map-secret: oklch(0.5 0.12 300);
  --map-sight: oklch(0.62 0.12 75);
}
.map-box {
  height: clamp(300px, min(64vh, 86vw), 560px);
  margin: .4rem 0 1.4rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--map-sea);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  z-index: 0;
}
.map-wrap { position: relative; }
.map-box .map-island {
  fill: var(--map-land);
  fill-opacity: 1;
  stroke: var(--map-coast);
}
.map-town span {
  display: block;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.map-peak {
  display: flex;
  align-items: center;
  gap: .25rem;
  transform: translate(-12px, -14px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .9rem;
  color: var(--text);
  pointer-events: none;
}
.map-peak svg { width: 22px; height: 22px; fill: var(--map-coast); }

.map-cat-spiaggia { --map-c: var(--map-beach); }
.map-cat-panorama { --map-c: var(--map-view); }
.map-cat-ristorante { --map-c: var(--map-food); }
.map-cat-segreto { --map-c: var(--map-secret); }
.map-cat-interesse { --map-c: var(--map-sight); }

.map-pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--map-c);
  color: #fff;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px oklch(0.2 0.02 60 / .35);
  transition: transform .15s ease;
}
.map-pin:hover, .map-pin:focus-visible { transform: scale(1.12); }
.map-pin svg { width: 18px; height: 18px; }
.map-pin.is-example { border-style: dashed; opacity: .85; }
.map-box.is-far .map-pin { width: 26px !important; height: 26px !important; margin: -13px 0 0 -13px !important; border-width: 1.5px; }
.map-box.is-far .map-pin svg { width: 15px; height: 15px; }
.map-box.is-far .map-town { display: none; }

/* La categoria e la zona sopra il nome del posto, nella scheda che sale dal basso. */
.map-pop-cat {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--map-c);
  font-weight: 600;
}
.map-pop-zone { font-size: .78rem; color: var(--muted); }

.map-box .leaflet-control-zoom a {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.map-box .leaflet-control-attribution {
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  color: var(--muted);
  font-size: .6rem;
}
.map-box .leaflet-control-attribution a { color: inherit; }

/* L'elenco sotto la mappa: un pulsante per categoria, che si apre e mostra
   i suoi posti. Tocchi una riga e la mappa ci vola sopra. */
.map-list {
  display: grid;
  gap: .7rem;
  margin-bottom: 2rem;
}
.map-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.map-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .9rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-group-head:hover { background: var(--cream); }
.map-group-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}
.map-group-count {
  min-width: 1.8rem;
  padding: .1rem .5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--map-c) 16%, transparent);
  color: var(--map-c);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.map-group-chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform .2s ease;
}
.map-group.is-open .map-group-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .map-group-chev { transition: none; } }
.map-group-list {
  list-style: none;
  margin: 0;
  padding: 0 .6rem .6rem;
  display: grid;
  gap: .5rem;
}
.map-group-list[hidden] { display: none; }
.map-item {
  width: 100%;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.map-item:hover { background: var(--cream); }
.map-dot {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--map-c);
  color: #fff;
}
.map-dot svg { width: 18px; height: 18px; }
.map-item-body { display: grid; gap: .15rem; min-width: 0; }
.map-item-body strong { font-weight: 500; }
.map-item-zone { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.map-item-text { font-size: .86rem; color: var(--muted); line-height: 1.4; }
.map-tag {
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: var(--radius-pill);
  background: var(--sand);
  color: var(--text);
  vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
  .map-page {
    --map-sea: oklch(0.24 0.03 235);
    --map-land: oklch(0.33 0.02 70);
    --map-coast: oklch(0.5 0.04 70);
    --map-secret: oklch(0.6 0.13 300);
  }
}

/* Il pannello del posto scelto (mappa.html): sale dal basso come nelle app
   di mappe, con le foto in cima. Niente velo scuro dietro: la mappa resta
   toccabile, e un altro pallino cambia il posto nel pannello. */
.map-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* sotto le finestre (40 e 41), cosi' lista e ticket gli si aprono sopra */
  z-index: 39;
  width: min(100%, var(--max));
  max-height: min(64vh, 560px);
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--text);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px -12px oklch(0.2 0.02 60 / .45);
  animation: map-sheet-in .25s ease-out;
}
.map-sheet[hidden] { display: none; }
/* Il pallino della chat finirebbe sopra "Portami qui": col pannello aperto
   si toglie, e torna quando si chiude. */
body.map-sheet-open .assist-fab { display: none; }
@keyframes map-sheet-in { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-sheet { animation: none; } }
.map-sheet-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: oklch(0.2 0.012 60 / .6);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.map-sheet-photos {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.map-sheet-photos::-webkit-scrollbar { display: none; }
.map-sheet-photo {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 3 / 2;
  background: var(--cream);
}
.map-sheet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-sheet-photo.is-missing { display: none; }
.map-sheet-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.2rem .8rem .45rem;
  background: linear-gradient(transparent, oklch(0.15 0.01 60 / .7));
  color: oklch(1 0 0 / .85);
  font-size: .62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-sheet-photo figcaption a { color: inherit; }
.map-sheet-dots {
  display: flex;
  justify-content: center;
  gap: .35rem;
  padding: .55rem 0 0;
}
.map-sheet-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}
.map-sheet-dots span.is-on { background: var(--text); }
.map-sheet-body {
  display: grid;
  gap: .3rem;
  padding: .9rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}
.map-sheet-body h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.map-sheet-body p { margin: .2rem 0 .6rem; font-size: .92rem; line-height: 1.5; }
/* Le spiagge chiuse: il pallino resta (il posto c'e'), ma spento. */
.map-pin.is-closed { filter: grayscale(1); opacity: .7; }
/* Etichette del posto nel pannello: tipo, sabbia, stato. */
.map-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.map-chip {
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--text);
  font-size: .72rem;
}
.map-chip.is-chiusa, .map-tag.is-chiusa { background: var(--danger); color: #fff; }
.map-chip.is-regolamentata, .map-tag.is-regolamentata { background: var(--wait); color: oklch(0.2 0.02 60); }
.map-warn {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .65rem .8rem;
  border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--wait) 14%, transparent);
  font-size: .85rem !important;
  line-height: 1.45;
}
.map-warn svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: var(--wait); }
.map-group-note {
  padding: .6rem .8rem;
  border-radius: var(--radius-card);
  background: var(--cream);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.map-pin.is-selected {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--map-c) 35%, transparent), 0 2px 6px oklch(0.2 0.02 60 / .35);
  z-index: 1000 !important;
}

/* ─── Le recensioni in "Le mie prenotazioni" (recensioni.js) ───────────── */
/* Un riquadro solo, in cima alla lista: si recensisce il servizio, non la
   singola escursione. */
.recensione {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.recensione-apri {
  gap: .5rem;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  white-space: normal;
  text-align: center;
  padding-block: .6rem;
}
.recensione-apri svg { width: 18px; height: 18px; fill: var(--gold); flex: none; }
.recensione-grazie {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
.recensione-modulo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.recensione-modulo h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}
.recensione-modulo > label { font-size: .85rem; margin-top: .4rem; }
.recensione-modulo textarea,
.recensione-modulo input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  outline: none;
}
.recensione-modulo input[type="text"] { border-radius: var(--radius-pill); padding-inline: 1.2rem; }
.recensione-modulo textarea { resize: vertical; min-height: 6rem; }
.recensione-modulo textarea:focus,
.recensione-modulo input[type="text"]:focus { border-color: var(--text); }
.recensione-modulo .hint { margin: 0; font-size: .8rem; color: var(--muted); }
.recensione-stelle {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.recensione-stelle legend { font-size: .85rem; padding: 0; margin-bottom: .3rem; }
.recensione-stella {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.recensione-stella input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.recensione-stella svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.recensione-stella.is-on svg { fill: var(--gold); }
.recensione-stella:has(input:focus-visible) { outline: 2px solid var(--text); border-radius: 50%; }
.recensione-errore { margin: 0; color: var(--danger); font-size: .85rem; }
.recensione-azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.recensione-azioni .btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--text); }
.recensione-modulo .hint a { color: inherit; text-decoration: underline; }
.recensione > .recensione-apri { border: 0; padding: 0; background: none; font-weight: 500; }

/* ─── "Dicono di noi", nella home (recensioni.js) ──────────────────────── */
.reviews { padding: 4rem 0 0; }
.reviews h2 {
  font-weight: 400;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  margin: .6rem 0 .6rem;
}
.rev-media {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: .95rem;
}
.rev-media:empty { display: none; }
.rev-media svg { width: 20px; height: 20px; fill: var(--gold); }
.rev-media strong { color: var(--text); font-size: 1.15rem; font-weight: 500; }
.rev-lista {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .rev-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .reviews .wrap { max-width: var(--max-wide); }
  .rev-lista { grid-template-columns: repeat(3, 1fr); }
}
.rev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.rev-stelle { display: inline-flex; gap: 2px; }
.rev-stelle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.rev-stelle .is-on svg { fill: var(--gold); }
.rev-consiglia {
  align-self: flex-start;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
}
.rev-testo {
  margin: 0;
  font-weight: 300;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.rev-nome { margin: .3rem 0 0; font-weight: 500; }
.rev-sotto, .rev-tour { margin: 0; font-size: .8rem; color: var(--muted); }
.rev-sotto:first-letter { text-transform: uppercase; }
.rev-tour a { color: inherit; text-decoration: underline; }
.rev-altre[hidden] { display: none; }
.rev-altre {
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

/* ─── Recensioni nella pagina dei venditori (venditori.js, solo ufficio) ─── */
.vend-rec-nota { margin: 0; color: var(--muted); font-size: .9rem; flex: 1 1 14rem; }
.vend-rec-testo { margin: .4rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ─── Il meteo sulle escursioni confermate (meteo.js) ──────────────────── */
.info-field.meteo[hidden] { display: none; }
.info-field.meteo p { margin: 0; }
.info-field.meteo .meteo-fonte { margin-top: .3rem; font-size: .78rem; color: var(--muted); }
/* sulla mappa, nel riquadro della spiaggia */
.map-meteo[hidden] { display: none; }
.map-meteo { margin: .2rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 14px; }
.map-meteo h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-family: var(--font-body); font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.map-meteo h3 svg { width: 18px; height: 18px; }
.map-meteo p { margin: .15rem 0; font-size: .9rem; }
.map-meteo .meteo-fonte { margin-top: .35rem; font-size: .78rem; color: var(--muted); }
/* il cielo a icone (meteo.js, METEO_DISEGNI): icone e scritte sulla stessa riga */
.meteo-icone { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.meteo-ico { width: 1.6em; height: 1.6em; flex: none; }

/* ─── I preferiti (preferiti.js) ───────────────────────────────────────── */
.tour-card { position: relative; }
.fav-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.fav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.fav-btn.is-on svg { fill: oklch(0.62 0.2 25); stroke: oklch(0.62 0.2 25); }
.fav-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* sulla foto della scheda, in alto a destra */
.fav-on-photo {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  background: oklch(1 0 0 / .9);
  color: oklch(0.25 0.02 60);
  box-shadow: 0 2px 8px oklch(0 0 0 / .18);
}
/* nella pagina dell'escursione, accanto a Condividi */
.detail-cat-row .fav-in-row { margin-left: auto; border: 1px solid var(--border); width: 40px; height: 40px; }
.chip.chip-fav:not(.is-active) { color: oklch(0.55 0.18 25); }
.fav-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 1rem; }
.fav-bar[hidden] { display: none; }
.fav-bar p { margin: 0; color: var(--muted); font-size: .9rem; }
.fav-bar .btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--text); }