/* ORTIGIA RENT — Restyle design system */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --black: #0a0a0a;
  --ink: #141414;
  --ink-70: rgba(20, 20, 20, 0.7);
  --ink-55: rgba(20, 20, 20, 0.55);
  --ink-35: rgba(20, 20, 20, 0.35);
  --ink-15: rgba(20, 20, 20, 0.15);
  --ink-08: rgba(20, 20, 20, 0.08);

  --gold: #c79a2d;
  --gold-hover: #b38a25;
  --gold-soft: oklch(0.82 0.09 85);
  --gold-tint: oklch(0.95 0.04 85);

  --terracotta: oklch(0.62 0.12 40);
  --terracotta-tint: oklch(0.94 0.04 50);

  --sand: oklch(0.96 0.015 75);
  --sand-deep: oklch(0.92 0.025 75);
  --paper: #f7f3ee;
  --paper-2: #efe9e0;
  --white: #ffffff;
  --line: rgba(20,20,20,0.10);

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, sans-serif;

  --radius-card: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20,20,20,0.04), 0 2px 8px rgba(20,20,20,0.04);
  --shadow-md: 0 8px 24px rgba(20,20,20,0.08), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-lg: 0 24px 60px rgba(20,20,20,0.14), 0 6px 16px rgba(20,20,20,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01','ss02';
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: clamp(44px, 6.5vw, 84px); letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 4vw, 52px); }
h3 { font-size: clamp(22px, 2vw, 30px); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.ink { color: var(--ink); opacity: 0.62; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn-gold { background: var(--gold); color: #141414; }
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(199,154,45,0.28); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-ghost-light:hover { background: var(--white); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-70); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); background: var(--sand); }
.btn-lg { padding: 18px 32px; font-size: 13px; }
.btn-sm { padding: 10px 16px; font-size: 12px; }
.btn-block { width: 100%; }

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sand-deep);
  color: var(--ink);
}
.pill-gold { background: var(--gold); color: #141414; }
.pill-outline { background: transparent; border: 1px solid var(--ink-15); }
.pill-dark { background: var(--ink); color: var(--paper); }
.pill-terracotta { background: var(--terracotta-tint); color: var(--terracotta); }
/* Esaurito: rosso pieno, lo stesso di "ultime unita'" due righe piu' in la'.
   Sul nero della pastiglia scura si leggeva bene ma diceva soltanto
   "etichetta"; il rosso dice "questo qui no". */
.pill-rosso { background: #c4302b; color: #fff; }

/* Il pallino di "ultime unita'" chiedeva un'animazione chiamata `pulse` che
   in questo foglio non e' mai esistita: restava un punto fermo. Ecco il
   battito, lento, che si ferma per chi ha chiesto meno movimento. */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  .vv-scorte span { animation: none !important; }
}

/* Inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-70);
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 15px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(199,154,45,0.14);
}

/* Layout primitives */
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
.section { padding: 100px 0; }
.section-sm { padding: 56px 0; }

.divider-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); display: inline-block; vertical-align: middle; }

/* Card */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Placeholder bands (for missing imagery) */
.ph {
  background:
    repeating-linear-gradient(135deg, rgba(20,20,20,0.04) 0 10px, rgba(20,20,20,0.07) 10px 20px),
    var(--sand-deep);
  color: var(--ink-55);
  font-family: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Decorative */
.rule { height: 1px; background: var(--line); border: 0; }
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; }

/* Sticky top bar tabs (for this mock) */
.page-switcher {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px;
  display: flex;
  gap: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.page-switcher button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  border-radius: 999px;
  transition: all .2s ease;
}
.page-switcher button:hover { color: var(--white); }
.page-switcher button.active { background: var(--gold); color: #141414; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Utility */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap { gap: 16px; }
.gap-lg { gap: 32px; }
.mt-sm { margin-top: 8px; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 72px; }

/* Dark section */
.section-dark {
  background: var(--ink);
  color: var(--paper);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark .eyebrow { color: var(--gold); }

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 320px;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(18px);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
  z-index: 210;
  font-size: 13px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.tweaks-panel h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.tweak-row { margin-bottom: 14px; }
.tweak-row label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; }
.tweak-row select, .tweak-row input[type=range] {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--paper);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--sans);
}
.tweak-swatches { display: flex; gap: 8px; }
.tweak-swatches button {
  width: 32px; height: 32px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
}
.tweak-swatches button.active { border-color: var(--paper); }

/* Scrollbar tweak inside page container we keep simple */

/* ============================================================
   Responsive — mobile/tablet adaptations for restyle 2026
   ============================================================ */
@media (max-width: 1024px) {
  h1 { font-size: clamp(36px, 5vw, 64px); }
  h2 { font-size: clamp(28px, 3.6vw, 44px); }
  .container, .container-wide { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section-sm { padding: 40px 0; }
}

@media (max-width: 900px) {
  /* Stack two-column layouts (checkout / flotta page) */
  [data-restyle="2col"],
  .container-wide > div[style*="grid-template-columns: 1.5fr"],
  .container > div[style*="grid-template-columns: 1.4fr"],
  .container-wide > div[style*="grid-template-columns: 1.4fr"],
  .container-wide > div[style*="grid-template-columns: 1fr 320px"] {
    display: block !important;
  }
  /* Sticky sidebars become inline on mobile */
  aside[style*="sticky"] { position: static !important; margin-top: 24px; }
  /* Form fields full-width */
  .field input, .field select, .field textarea { font-size: 16px; }
}

@media (max-width: 720px) {
  h1 { font-size: clamp(32px, 8vw, 48px); }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .container, .container-wide { padding: 0 16px; }
  .section { padding: 48px 0; }
  .btn, .btn-lg { padding: 14px 20px; font-size: 13px; }
  .btn-lg { padding: 16px 24px; }
  .card { border-radius: 12px; }

  /* Checkout/flotta: card panels lighter padding */
  .card[style*="padding: 40"],
  .card[style*="padding: 36"],
  .card[style*="padding: 28"] { padding: 22px !important; }

  /* ── Griglie: una colonna sul telefono ────────────────────────────────
     Qui c'era un elenco chiuso di combinazioni ("1fr 1fr", "2fr 1fr",
     "repeat(3, 1fr)"...). Ogni griglia scritta in modo diverso — 1.2fr 1fr,
     minmax(0,1.4fr), 1fr 320px — restava a piu' colonne sul telefono senza
     che nessuno se ne accorgesse: l'audit ne ha trovate nove, fra cui il
     modulo di ricerca (campi larghi ZERO pixel), la pagina dei mezzi, i
     contatti e il piede pagina.
     Adesso la regola prende QUALUNQUE griglia scritta nello stile in linea.
     Chi ha bisogno di tenere le colonne anche sul telefono mette la classe
     .mantieni-colonne, che e' una scelta esplicita e si legge nel codice.
     minmax(0, 1fr) e non 1fr: con "1fr" la colonna puo' crescere oltre il
     contenitore per far stare il contenuto piu' largo, e il modulo di ricerca
     sbordava lo stesso di 6px perche' il pulsante col suo padding chiedeva
     321px su 270 disponibili. */
  [style*="grid-template-columns"]:not(.mantieni-colonne):not([data-cols-mobile]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Le eccezioni: cose che a una colonna diventerebbero peggio. */
  .mantieni-colonne,
  [data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-cols-mobile="7"] { grid-template-columns: repeat(7, 1fr) !important; }
  /* Le schede della flotta stanno bene a due per riga. */
  div[style*="grid-template-columns: repeat(4, 1fr)"]:not(.mantieni-colonne) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Titoli ───────────────────────────────────────────────────────────
     Le misure qui sotto valevano solo per i titoli senza stile in linea, e
     61 titoli su 81 ce l'hanno: /about mostrava titoli da 56px e numeri da
     88px su 328px utili. Con !important vince il foglio di stile, che e'
     l'unico posto da cui si puo' ragionare per larghezza di schermo. */
  h1, .h1 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.15 !important; }
  h2, .h2 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.2 !important; }
  h3, .h3 { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.3 !important; }
  /* I numeroni delle statistiche: 88px fissi non ci stanno. */
  [style*="font-size: 88px"], [style*="font-size: 72px"], [style*="font-size: 64px"] {
    font-size: clamp(34px, 11vw, 56px) !important;
  }

  /* ── Niente scorrimento laterale ──────────────────────────────────────
     Rete di sicurezza: qualunque cosa sfugga alle regole sopra non deve
     poter far scorrere la pagina di lato.
     Il taglio sta su <html> e NON su <body>: metterlo anche sul body fa di
     lui un contenitore che scorre per conto suo, e tutto cio' che e'
     "appiccicato in alto" (testata e barra delle tappe) scorre via insieme
     a lui invece di restare fermo. */
  html { overflow-x: hidden; max-width: 100%; }
  body { max-width: 100%; }
  img, video, iframe, canvas, svg { max-width: 100%; }

  /* Il pulsante "Cerca disponibilita'" e' 255px in italiano e 309 in
     francese: da solo sfondava la scheda e spingeva la pagina di lato di
     85-100px. Su telefono sta su una riga sua, a tutta larghezza. */
  .bf-cerca { width: 100% !important; min-width: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }

  /* ── I pannelli del modulo di ricerca ─────────────────────────────────
     Erano agganciati al bordo sinistro del campo, che sul telefono non e'
     il bordo dello schermo: sporgevano a destra. E il pannello dei luoghi
     metteva una mappa alta 290px sopra l'elenco, spingendo i punti di
     ritiro sotto il bordo. Ora sono agganciati allo schermo, non al campo,
     e la mappa su telefono non si disegna: serve scegliere un luogo, non
     guardare la costa.
     Nota: NON si puo' usare position:fixed. Un antenato ha una transform
     (l'animazione di comparsa delle sezioni), e una transform rende
     l'elemento il blocco di riferimento anche per i figli fissi: il pannello
     finiva ancorato a quello, non allo schermo — misurato, partiva a 549px
     su uno schermo da 640. Resta assoluto e alto al massimo mezza pagina.
     Nemmeno "largo quanto lo schermo" funziona: left:0 e' lo zero del CAMPO,
     che sul telefono comincia a 45px, quindi il pannello sbordava di 13.
     Si aggancia alla larghezza del campo: parte e finisce dove finisce lui. */
  .bf-pannello {
    left: 0 !important; right: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 52vh !important;
  }
  /* La mappa non si nasconde col CSS: Leaflet si inizializzava lo stesso in
     un contenitore alto zero e faceva cadere tutta la pagina. Su telefono il
     componente non viene proprio montato (booking-form.jsx). */
  /* Il calendario piu' compatto: prima riempiva quasi tutto lo schermo. */
  .bf-pannello-date { padding: 14px !important; max-height: 78vh !important; }
  .bf-pannello-date [data-cols-mobile="7"] button { min-height: 32px; font-size: 12px; }

  /* Ora di ritiro e ora di rientro affiancate: due colonne strette, quindi
     l'etichetta non deve andare a capo e la tendina non deve sprecare
     margine a destra per la freccina. */
  .bf-ore { gap: 8px !important; }
  .bf-ore > div > div:first-child {
    white-space: nowrap; letter-spacing: 0.08em !important; margin-bottom: 6px !important;
  }
  .bf-ore select { padding-left: 10px !important; padding-right: 26px !important; }

  /* Le rassicurazioni sotto il modulo di ricerca: otto voci che su telefono
     diventano quattro righe e allontanano il pulsante Cerca. */
  .bf-rassicurazioni { display: none !important; }

  /* Scooter / Auto / Van: tre parti uguali dentro la scheda, invece della
     terza pastiglia che usciva dallo schermo. */
  .bf-tipi { width: 100% !important; }
  /* Su telefono le pastiglie prendono tutta la riga e il badge dello sconto
     finiva sotto, da solo. Si appoggia all'angolo in alto della scheda. */
  .bf-sconto { position: absolute !important; top: -13px; right: 12px; z-index: 3; }
  .bf-tipi button {
    flex: 1 1 0 !important; min-width: 0 !important; justify-content: center;
    padding-left: 6px !important; padding-right: 6px !important;
    font-size: 11px !important; letter-spacing: 0.04em !important; gap: 5px !important;
  }

  /* "La flotta / Tre modi di attraversare la Sicilia." con il paragrafo
     accanto: due colonne strettissime, titolo spezzato parola per parola. */
  .flotta-testata { display: block !important; margin-bottom: 28px !important; }
  .flotta-testata > div { max-width: none !important; }
  .flotta-testata > p { max-width: none !important; margin-top: 14px !important; }

  /* ── Barra dello sconto ───────────────────────────────────────────────
     La frase stava in un blocco a larghezza fissa e il bordo la tagliava:
     si leggeva "Con la tariffa Smart risparmi i". Renderla trascinabile non
     bastava — nessuno pensa a trascinare una barra in cima alla pagina.
     Su telefono la frase fissa sparisce e la stessa frase corre dentro il
     nastro che si muove gia' da solo: si legge senza fare niente. */
  .db-riga {
    padding: 7px 12px !important;
    gap: 9px !important;
  }
  .db-frase-fissa, .db-divisore { display: none !important; }
  .db-frase-nastro { display: inline !important; }

  /* Il nastro corre sempre alla stessa velocita' in pixel al secondo, ma la
     finestra qui e' un quinto di quella del desktop: la stessa corsa che li'
     si legge, sul telefono passa via prima che l'occhio arrivi in fondo alla
     frase. Meta' velocita', e un corpo piu' piccolo perche' ce ne stia dentro
     piu' di una parola per volta. */
  .db-nastro {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    animation-duration: 64s !important;
  }
  /* La pastiglia −5% mangiava meta' barra: su 360px restavano 154px di
     finestra e il nastro si leggeva due parole per volta. La targhetta
     "Smart" qui sparisce — la stessa parola e' gia' nella frase che scorre
     ("Con la tariffa Smart risparmi il 5%"), quindi non si perde niente e la
     finestra di lettura passa da 154 a oltre 200px. */
  .db-pastiglia { padding: 4px 10px 4px 5px !important; gap: 6px !important; }
  .db-pastiglia-tondo { width: 21px !important; height: 21px !important; }
  .db-pastiglia > span:nth-child(2) { font-size: 14px !important; }
  .db-pastiglia > span:nth-child(3) { display: none !important; }

  /* ── Scheda mezzo nell'elenco ─────────────────────────────────────────
     Impilata veniva alta 759px su uno schermo da 640: una scheda per
     schermata, e sedici mezzi facevano 13.600px di scorrimento. Il riquadro
     della foto da solo ne prendeva 200, quasi tutti di bianco vuoto perche'
     i ritagli sono su fondo bianco e hanno proporzioni diverse fra loro.

     Qui diventa: foto quadrata a sinistra, nome e dati a destra, e in fondo
     una riga sola col prezzo a sinistra e Prenota a destra. */
  .card.vv-riga {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    align-items: stretch;
  }
  .vv-foto {
    min-height: 0 !important;
    height: 118px;
    border-right: 1px solid var(--line);
  }
  .vv-foto img { padding: 9px !important; }
  /* La pastiglia della categoria sul quadrato piccolo copriva il mezzo. */
  .vv-foto > div:nth-of-type(1) { top: 6px !important; left: 6px !important; transform: scale(0.78); transform-origin: top left; }
  .vv-dati {
    padding: 11px 13px !important;
    border-right: none !important;
    justify-content: flex-start !important;
  }
  .vv-dati h3 { font-size: 16px !important; margin-bottom: 7px !important; }
  .vv-specs {
    font-size: 11.5px !important;
    column-gap: 12px !important; row-gap: 3px !important; margin-bottom: 0 !important;
  }
  .vv-specs svg { width: 13px !important; height: 13px !important; }
  .vv-specs span { gap: 5px !important; }
  /* Quello che sul telefono non serve alla scelta: le due pastiglie ripetono
     il nastro in cima, il totale e il risparmio si leggono dal prezzo, e la
     scheda completa si apre comunque toccando il mezzo. */
  .vv-pills, .vv-info, .vv-sconto, .vv-barrato, .vv-risparmi, .vv-nota {
    display: none !important;
  }
  /* .vv-scorte NON si nasconde piu': e' la riga che dice "ultime unita'" col
     pallino che batte, e "non disponibile" sui mezzi esauriti. Nascosta sotto
     i 720px, sul telefono — dove passa la maggior parte delle ricerche —
     nessuno vedeva ne' l'urgenza ne' lo stato. */
  .vv-scorte {
    font-size: 10px !important;
    margin-top: 4px !important;
  }
  .vv-prezzo {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    padding: 9px 13px !important;
    background: var(--white) !important;
    border-top: 1px solid var(--line);
    gap: 10px;
  }
  .vv-prezzo-testo { align-items: flex-start !important; }
  .vv-etichetta-tot { font-size: 9px !important; letter-spacing: 0.08em !important; }
  .vv-cifra { font-size: 23px !important; margin-top: 1px !important; }
  .vv-giorno { font-size: 10.5px !important; margin-top: 1px !important; }
  .vv-prenota {
    margin-top: 0 !important;
    padding: 11px 16px !important;
    flex-shrink: 0;
    letter-spacing: 0.06em !important;
  }
  /* La freccia sul telefono si toglie: con "AVVISAMI" (nove lettere contro le
     sette di "PRENOTA") la riga prezzo + stato + pulsante non ci stava piu' e
     l'ultima lettera finiva fuori dalla scheda. */
  .vv-prenota svg { display: none !important; }
  .vv-prenota { gap: 0 !important; }
  /* Lo stato sta in due righe strette, cosi' non ruba larghezza al pulsante. */
  .vv-scorte { max-width: 92px; line-height: 1.25 !important; }
  /* ── Itinerari ────────────────────────────────────────────────────────
     La colonna col PDF non deve restare appiccicata: in colonna unica
     seguirebbe lo scorrimento per tutta la pagina coprendo le tappe. */
  .it-lato { position: static !important; top: auto !important; }
  .it-hero { min-height: 380px !important; }
  .it-corpo { gap: 32px !important; margin-top: 30px !important; }
  .it-numeri > div { padding: 12px 11px !important; }
  .it-numeri > div > div:last-child { font-size: 17px !important; }
  .it-tappa { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 12px !important; }
  .it-tappa h3 { font-size: 18px !important; }
  .it-scarica { padding: 18px !important; }

  /* ── Percorso del checkout ────────────────────────────────────────────
     Sei tappe con l'etichetta sotto ciascuna chiedono 540px: la quinta e la
     sesta finivano oltre il bordo e nessuno si accorgeva che la barra
     scorreva. Restano i sei numeri (ci stanno tutti), e il nome della tappa
     in corso si legge nella riga qui sotto. */
  /* La scheda sul telefono ha 22px di lato, non 40. Sotto ci vuole aria:
     senza, "Personalizza il tuo noleggio" cominciava attaccato al bordo
     del riepilogo, come se ne facesse parte. */
  .checkout-barra {
    margin: -22px -22px 20px !important;
    padding: 10px 22px 8px !important;
    border-bottom: 1px solid var(--line);
  }
  .checkout-barra .checkout-steps { margin-bottom: 6px !important; }
  .checkout-steps { overflow-x: visible !important; margin-bottom: 8px !important; }
  .checkout-steps .step-item > span { display: none !important; }
  .checkout-steps .step-num { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .checkout-steps .step-linea { margin: 0 5px !important; margin-bottom: 0 !important; min-width: 8px !important; }
  /* Il nome della tappa lo dice gia' la riga della fisarmonica. */
  .checkout-passo { display: none !important; }

  /* ── Riepilogo a fisarmonica ──────────────────────────────────────────
     Chiuso e' una riga: a che punto sei e quanto stai spendendo. Aperto
     dice mezzo, date, copertura e totale, senza scendere in fondo alla
     pagina — dove il riepilogo vero sta a 3.000px da qui. */
  .ck-riep-mob {
    display: block !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    margin-top: 2px;
  }
  .ck-riep-mob > summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; cursor: pointer;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-55);
  }
  .ck-riep-mob > summary::-webkit-details-marker { display: none; }
  .ck-riep-passo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ck-riep-tot { color: var(--ink); font-size: 13px; letter-spacing: 0; flex-shrink: 0; }
  .ck-riep-freccia { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
  .ck-riep-mob[open] .ck-riep-freccia { transform: rotate(180deg); }
  .ck-riep-corpo {
    padding: 4px 12px 11px;
    max-height: 42vh; overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .ck-riep-voce {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 0; font-size: 12px; color: var(--ink-70);
  }
  .ck-riep-voce > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ck-riep-voce > span:last-child { flex-shrink: 0; color: var(--ink); font-weight: 600; }
  .ck-riep-totale { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 8px; font-weight: 700; }
  .ck-riep-paga {
    display: block; width: 100%; margin-top: 10px;
    padding: 12px 14px; border: none; border-radius: 999px;
    background: #c79a2d; color: #0a0a0a; cursor: pointer;
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }

  /* ── Pulsanti in fondo alle tappe ─────────────────────────────────────
     Affiancati non ci stavano: "Cambia veicolo" si prendeva 220px dei 282 e
     alla scritta del pulsante principale ne restavano 50 per 100, che
     uscivano dal bordo. In colonna, e il principale sopra. */
  .ck-azioni {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .ck-azioni > * { width: 100% !important; flex: none !important; }
  .ck-azioni .btn { white-space: normal !important; }

  /* "Sei gia' cliente Ortigia Rent?": testo e pulsante affiancati non ci
     stavano e la scritta ACCEDI usciva dalla sua pastiglia. */
  .ck-accedi {
    flex-direction: column !important; align-items: stretch !important;
    gap: 12px !important; padding: 14px !important; margin-bottom: 22px !important;
  }
  .ck-accedi > button { width: 100% !important; }

  /* Le finestre di conferma: pulsanti a tutta larghezza, uno sotto l'altro.
     Affiancati finivano storti e mezzi fuori. */
  .ortigia-swal .swal2-actions { flex-direction: column !important; width: 100% !important; gap: 8px !important; }
  .ortigia-swal .swal2-actions button { width: 100% !important; margin: 0 !important; }
  /* Tranne le finestrelle di esito: un "OK" solo, largo quanto basta. */
  .ortigia-swal .swal2-icon ~ .swal2-actions { flex-direction: row !important; width: auto !important; }
  .ortigia-swal .swal2-icon ~ .swal2-actions button { width: auto !important; min-width: 150px; }
  .ortigia-swal .swal2-popup, .swal2-popup { padding: 24px 20px !important; }

  /* La pastiglia "Esaurito" si accavallava a quella della categoria: sul
     telefono la foto e' 118px e le due pastiglie, una a sinistra e una a
     destra, finivano l'una sopra l'altra. Qui la riga del prezzo dice gia'
     "non disponibile" in rosso, quindi sulla foto ne basta una. */
  .vv-foto .pill-rosso { display: none !important; }

  /* ── Accessori e coperture (tappa 3) ──────────────────────────────────
     Ogni accessorio era alto 275px: la foto, che sul desktop sta accanto al
     testo, finiva sopra perche' la regola generale rimette in colonna ogni
     griglia. Con data-cols-mobile la foto resta di fianco. */
  .ck-acc { gap: 10px !important; padding: 10px !important; }
  .ck-acc-foto { width: 80px !important; height: 80px !important; }
  /* Una riga di descrizione basta: il testo per esteso e' dentro "Maggiori
     info", e la seconda riga qui costava 15px per sei accessori. */
  .ck-acc-testo { -webkit-line-clamp: 1 !important; }
  /* "Maggiori info" e' una scritta, non un pulsante da dito: la regola sui
     44px di bersaglio le dava 44px di altezza quasi tutti vuoti, sei volte. */
  .ck-acc-info { min-height: 32px !important; margin-top: 3px !important; }

  /* I tre pacchetti di copertura impilati facevano 1.849px. Intestazione
     allineata a sinistra invece che centrata su tre righe, tabella piu'
     stretta, e via il link "Termini e condizioni" (non porta da nessuna
     parte) e il prezzo barrato, che il totale scontato lo dice gia'. */
  /* Impilate, 14px fra una polizza e l'altra non bastavano: la pastiglia
     "Upgrade piu' richiesto" sporge di 14px sopra la sua scheda e riempiva
     tutto lo stacco, appoggiandosi al bordo di quella sopra. */
  .ck-coperture { gap: 26px !important; }
  .ck-cop-consigliata { margin-top: 12px; }

  .ck-cop-testa { padding: 12px 12px 9px !important; text-align: left !important; }
  .ck-cop-nome { min-height: 0 !important; font-size: 18px !important; justify-content: flex-start !important; }
  .ck-cop-stelle { justify-content: flex-start !important; margin-top: 4px !important; }
  .ck-cop-feat > div { padding: 6px 11px !important; font-size: 11px !important; }
  .ck-cop-feat > div > span { line-height: 1.25 !important; }
  /* Le spunte stanno chiuse: 257px l'una per tre coperture erano mezzo
     chilometro di elenco prima di arrivare al prezzo. */
  .ck-cop-dettagli > summary {
    display: flex !important; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer;
    padding: 9px 12px; border-top: 1px solid var(--line);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-55);
  }
  .ck-cop-dettagli > summary::-webkit-details-marker { display: none; }
  .ck-cop-dettagli > summary::after { content: '⌄'; font-size: 13px; }
  .ck-cop-dettagli[open] > summary::after { content: '⌃'; }
  .ck-cop-prezzo { padding: 12px !important; }
  .ck-cop-cifra { font-size: 21px !important; }
  .ck-cop-riga-sconto { font-size: 11px !important; }
  .ck-cop-barrato, .ck-cop-termini { display: none !important; }

  /* ── Riepilogo del checkout ───────────────────────────────────────────
     Ogni voce (nome del mezzo, casco, copertura, accessori) andava a capo
     due o tre volte e il prezzo restava appeso in fondo, lontano da cio' a
     cui si riferisce. Qui ogni voce e' una riga sola: descrizione a
     sinistra, tagliata se lunga, prezzo a destra sempre visibile. */
  .ck-riepilogo { padding: 14px !important; }
  /* Il titolo basta: la parola "RIEPILOGO" sopra al titolo "Il tuo
     noleggio" dice due volte la stessa cosa. */
  .ck-riepilogo > .eyebrow { display: none !important; }
  .ck-riepilogo h3 { font-size: 17px !important; margin: 0 0 12px !important; }
  .ck-mezzo { gap: 10px !important; margin-bottom: 12px !important; align-items: center; }
  .ck-mezzo-foto { width: 56px !important; height: 56px !important; }
  /* Nome del mezzo su una riga: per esteso sta gia' nella riga sotto, quella
     del prezzo, e nella fisarmonica in cima. */
  .ck-mezzo > div:last-child > div:nth-child(2) {
    font-size: 13px !important; margin-top: 4px !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ck-mezzo > div:last-child > div:last-child { font-size: 11px !important; }
  .ck-luoghi { padding: 10px !important; font-size: 11.5px !important; gap: 6px !important; }
  .ck-luoghi .ck-righe-luogo > div > div { line-height: 1.35; }
  /* L'indirizzo per esteso: su telefono si toglie, il nome del punto basta.
     ATTENZIONE: il riquadro e' cambiato due volte — prima una griglia di
     righe, poi contenuto + pulsante, e dal 19/09 le due righe stanno in una
     griglia sola (.ck-righe-luogo) perche' "RITIRO" e "RESTITUZIONE" hanno
     larghezze diverse e i valori non partivano allineati. Il selettore parte
     dalla classe, non dalla posizione dei figli. */
  .ck-luoghi .ck-righe-luogo > div > div:nth-child(2) { display: none !important; }
  /* Il pulsante Modifica stava sopra il nome del punto di ritiro e lo
     copriva a meta': "Ortigia Shop Viale Ma…". Qui va in fondo al riquadro,
     su una riga sua. */
  .ck-modifica {
    position: static !important;
    align-self: flex-end !important;
    min-height: 26px !important; min-width: 0 !important;
  }
  .ck-voci { gap: 11px !important; font-size: 12px !important; }
  /* Senza questo il taglio non parte: un elemento di griglia non scende
     sotto la larghezza del proprio contenuto, quindi la riga restava larga
     362px dentro un riquadro da 282 e il prezzo finiva tagliato dal bordo
     ("€11" invece di "€114,51"). */
  .ck-voci > div,
  .ck-voci > div > div,
  .ck-voci > div > div > div { min-width: 0; }
  .ck-voci > div > div > div { gap: 10px; align-items: baseline; }
  .ck-voci > div > div > div > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ck-voci > div > div > div > span:last-child { flex-shrink: 0; white-space: nowrap; }

  /* Intestazione dell'elenco: conteggio sopra, ordinamento sotto. */
  .fl-barra {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    margin-bottom: 18px !important;
  }
  .fl-conteggio { font-size: 12.5px !important; line-height: 1.5; }
  .fl-ordina { justify-content: space-between; }
  .fl-ordina select { flex: 1; min-width: 0; padding: 10px 14px !important; }

  .vv-prezzo-testo > div:first-child { font-size: 9px !important; }

  /* Le righe dei luoghi devono crescere col contenuto: la regola per il tocco
     le bloccava a 44px mentre il testo ne chiedeva 56, e le scritte uscivano
     dal riquadro accavallandosi con la riga sotto. */
  .bf-luogo { height: auto !important; min-height: 52px !important; }

  /* ── Piede pagina ─────────────────────────────────────────────────────
     Tutto centrato, e via il riquadro newsletter: un modulo in piu' da
     compilare proprio mentre il visitatore sta andando via. */
  .footer-sito { text-align: center; padding-top: 44px !important; }
  .footer-sito .footer-newsletter { display: none !important; }
  .footer-sito ul { padding-left: 0; list-style: none; margin: 0; }
  .footer-sito li { justify-content: center; }
  .footer-sito > div > div,
  .footer-sito [style*="display: flex"] {
    justify-content: center !important;
    text-align: center;
  }
  .footer-sito [style*="flex-direction: column"] { align-items: center !important; }

  /* Il logo e' un <img> in blocco: il text-align del genitore non lo centra,
     serve il margine automatico. Solo il logo pero': le icone dentro le voci
     contatti hanno il loro allineamento e non vanno toccate.
     Si prende per quello che e' — l'immagine col nome dell'attivita' — invece
     che per la sua posizione nell'albero: era tre livelli sotto, non due, e
     il selettore per posizione non lo raggiungeva. */
  .footer-sito img[alt*="Ortigia"] {
    margin-left: auto !important; margin-right: auto !important; display: block;
  }
  .footer-sito p { margin-left: auto !important; margin-right: auto !important; }

  /* ── Ritmo del piede pagina ───────────────────────────────────────────
     Le voci erano distanti come i blocchi, quindi non si capiva dove
     finiva un elenco e cominciava l'altro: "Contatti" del menu sembrava il
     titolo della sezione "CONTATTI" sotto. Ora il titolo sta attaccato alle
     sue voci, le voci sono strette fra loro, e lo spazio grande e' solo
     FRA un blocco e l'altro. */
  .footer-sito h5 {
    margin: 34px 0 10px !important;
    font-size: 11.5px !important; letter-spacing: 0.16em !important;
  }
  /* Il primo titolo non ha bisogno di stacco: sopra c'e' gia' il logo. */
  .footer-sito > div > div:first-child h5 { margin-top: 26px !important; }
  .footer-sito ul {
    margin: 0 !important;
    gap: 4px !important;
    row-gap: 4px !important;
  }
  .footer-sito li {
    line-height: 1.35 !important;
    padding: 3px 0;
  }
  /* Le voci contatti hanno l'icona a sinistra e il testo a destra: cosi'
     restavano appoggiate ai due bordi invece che al centro. Icona e testo
     vanno tenuti insieme, e il gruppo centrato. */
  .footer-sito li[style*="flex"] {
    padding: 5px 0;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  .footer-sito li[style*="flex"] > span { text-align: center; }
  .footer-sito li[style*="flex"] svg { flex-shrink: 0; margin: 0 !important; }

  /* Pagamenti: titolo sopra, loghi sotto, tutto centrato. */
  .footer-pagamenti { align-items: center !important; width: 100%; }
  .footer-loghi { justify-content: center !important; gap: 6px !important; }
  .footer-loghi > span { transform: scale(0.92); }
  /* Le celle della griglia devono poter diventare piu' strette del loro
     contenuto, altrimenti allargano la colonna e la scheda sborda. */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* ── I campi non devono far ingrandire la pagina ──────────────────────
     Sotto i 16px Safari su iPhone zooma a ogni tocco e il cliente si
     ritrova la pagina spostata. Vale per tutti i campi, non solo .field. */
  input, select, textarea { font-size: 16px !important; }
  /* Un campo di sola lettura o una casella non hanno testo da leggere. */
  input[type="checkbox"], input[type="radio"] { font-size: inherit !important; }

  /* ── Aree toccabili ───────────────────────────────────────────────────
     La regola per il tocco piu' in basso vale solo per button e a.btn:
     le frecce dei mesi, le X delle modali e i link-pulsante restavano
     sotto i 44px. */
  button:not([role="switch"]), a.btn, [role="button"] { min-height: 44px; min-width: 44px; }
  /* Tranne dove 44px romperebbero la griglia: i giorni del calendario. */
  [data-cols-mobile="7"] button { min-height: 38px; min-width: 0; }

  /* Su schermi bassi la finestra si ancora in alto invece che al centro:
     centrata, con l'animazione che la scala, i bordi finivano fuori. */
  .edm-finestra {
    top: 12px !important; transform: translateX(-50%) !important;
    max-height: calc(100vh - 24px) !important; padding: 20px !important;
  }

  /* ── Il checkout tagliava via 193px ───────────────────────────────────
     La scheda ha overflow:hidden e dentro c'era roba larga 519px su 326
     disponibili: ci finivano le ultime tappe del percorso, meta' dei
     selettori del casco, il blocco check-in e l'importo sul pulsante di
     pagamento. Niente piu' larghezze che sfondano. */
  .checkout-form .card, .checkout-form .card * { min-width: 0; }
  /* Il percorso a tappe scorre invece di essere tagliato. */
  .checkout-steps { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Il pulsante di pagamento e il "torna indietro" vanno a capo. */
  .checkout-pay-row { flex-wrap: wrap !important; }
  .checkout-pay-row > * { min-width: 0; }
  .checkout-pay-row .btn { width: 100%; white-space: normal !important; }

  /* Hero sections lower padding */
  section[style*="padding-top: 80"] { padding-top: 48px !important; padding-bottom: 36px !important; }

  /* Header navbar collapse — hide center nav on mobile (logo + lang stay) */
  header nav { display: none !important; }
  header > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr auto !important;
  }

  /* Discount bar: stack items */
  div[style*="DISCOUNT"], section[style*="discount"] { font-size: 11px; }

  /* Page switcher: smaller on mobile */
  .page-switcher { padding: 4px; gap: 0; }
  .page-switcher button { padding: 8px 12px; font-size: 10px; }

  /* Stepper: compact */
  div[role="tablist"], div[style*="step-num"] { gap: 4px !important; }

  /* Booking form date picker: smaller calendar grid on mobile */
  div[style*="grid-template-columns: repeat(7, 1fr)"] { gap: 1px; }
}

@media (max-width: 520px) {
  /* Stack everything below 520px */
  div[style*="grid-template-columns: 96px 1fr"],
  div[style*="grid-template-columns: 110px 1fr"] {
    grid-template-columns: 80px 1fr !important;
  }
  /* La scheda mezzo qui veniva impilata (display:block) con la foto alta
     200px: e' quello che la faceva arrivare a 759px di altezza. Adesso la
     dispone .vv-riga, piu' su, in due colonne compatte — queste due regole
     la annullavano, per questo sono sparite. */
  /* Buttons full-width */
  .btn-block, .btn { width: 100%; }
  /* Discount bar wraps */
  div[style*="-5%"] { font-size: 11px; }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  button, a.btn { min-height: 44px; }
}

/* "Passo 3 di 6 · Accessori" serve solo dove le etichette delle tappe non
   ci stanno, cioe' sul telefono. */
.checkout-passo { display: none; }

/* Il riepilogo a fisarmonica serve solo dove quello vero e' lontano, cioe'
   sul telefono: sul desktop sta gia' fermo accanto al modulo. */
.ck-riep-mob { display: none; }

/* ── Tablet: il checkout su una colonna sola fino a 900px ──────────────
   Il passaggio a colonna unica scattava a 720px, quindi su un tablet in
   verticale il modulo viveva in 430px con il riepilogo accanto a 290: si
   compilava un checkout in mezza pagina mentre l'altra meta' ripeteva cose
   gia' scelte. Sotto i 900 il modulo si prende tutta la larghezza e il
   riepilogo va sotto, dove lo si legge prima di pagare. */
@media (max-width: 900px) {
  .ck-griglia { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .ck-griglia > div:last-child { position: static !important; top: auto !important; }
}

/* ── Bersagli da dito anche su tablet e desktop ────────────────────────
   Sotto i 720px c'e' gia' la regola dei 44px. Sopra, "Modifica" era alto
   28px, "Maggiori info" 14, le voci del menu 22: si prendono col mouse, ma
   su un tablet — che sta sopra i 720 — si prendono col dito, e 14px di
   bersaglio si sbagliano. */
@media (min-width: 721px) {
  .ck-modifica { min-height: 26px; padding: 4px 10px !important; }
  .ck-acc-info { min-height: 34px; }
  .ortigia-header a[href], .ortigia-header button { min-height: 34px; display: inline-flex; align-items: center; }
}

/* Il metodo di pagamento scelto, messo in evidenza per un attimo appena
   prima che parta l'addebito: e' l'ultima cosa che conviene guardare, e
   senza un segnale la pagina cambia e basta. */
@keyframes ckPulsa {
  0%   { box-shadow: 0 0 0 0 rgba(199,154,45,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(199,154,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,154,45,0); }
}
.ck-pagamento.pulsa {
  animation: ckPulsa 0.9s ease-out 1;
  border-color: #c79a2d !important;
}

/* ── Il carosello non deve allargare la colonna ────────────────────────
   Un elemento di griglia, se non gli si dice altro, non scende sotto la
   larghezza del proprio contenuto. Dentro la tappa Dati c'e' il carosello
   degli itinerari, largo quanto le sue schede messe in fila (1.834px):
   la colonna cresceva fino a contenerlo tutto invece di lasciarlo scorrere,
   e il checkout diventava largo 1.916px su uno schermo da 1.440 — con
   riepilogo, tappa "Pagamento" e meta' pagina fuori dal bordo destro.
   Misurato: con min-width:0 la colonna torna da 1916 a 797 e lo
   scorrimento laterale da 834 a zero. */
.ck-card { min-width: 0; }
.ck-card + div { min-width: 0; }
.car-fila { min-width: 0; }

/* La tabella di cosa copre una polizza: sul desktop e' sempre aperta e
   riempie la scheda, che serve a confrontare le tre a colpo d'occhio. */
.ck-cop-dettagli { flex: 1; }
.ck-cop-dettagli > summary { display: none; }

/* Toccando "Pagamento" nelle tappe si scorre qui: senza questo margine il
   titolo finirebbe sotto la barra che resta in alto. */
#ck-pagamento { scroll-margin-top: 150px; }

/* ── Barra delle tappe sempre in vista ──────────────────────────────────
   Da meta' modulo non si sapeva piu' a che punto si era, ne' si poteva
   tornare a una tappa gia' fatta senza risalire tutta la pagina. Ora resta
   appiccicata sotto la testata (che e' anch'essa appiccicata: --h-testata
   e' la sua altezza vera, misurata a schermo).
   I margini negativi la portano a filo dei bordi della scheda: senza, il
   testo scorrerebbe visibile nei 40px di lato. */
.checkout-barra {
  position: sticky;
  top: var(--h-testata, 73px);
  z-index: 30;
  background: var(--white);
  margin: -40px -40px 0;
  padding: 18px 40px 0;
}
/* La riga sotto le tappe sparisce quando la barra e' incollata in alto, per
   non rubare schermo: la tiene solo il margine. */
.checkout-barra .checkout-steps { margin-bottom: 22px !important; }

/* Nel nastro la frase c'e' sempre, ma sul desktop sarebbe un doppione:
   li' resta quella fissa a sinistra, che si legge tutta. */
.db-frase-nastro { display: none; }

/* Native date inputs: armonize visual */
input[type="date"], input[type="time"] {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  accent-color: #c79a2d !important;
}
input[type="date"]:focus, input[type="time"]:focus {
  border-color: #c79a2d !important;
  box-shadow: 0 0 0 4px rgba(199,154,45,0.14) !important;
  outline: none !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(15deg);
  cursor: pointer;
}

/* ── La finestra "Date & ritiro" non si allarga oltre il proprio bordo ─────
   Ha una larghezza fissa e lo scorrimento interno: quello che sfora non si
   vede piu'. Con il nome lungo di un punto di consegna meta' della colonna
   di destra — restituzione e ora di restituzione — restava fuori. Le colonne
   sono dichiarate minmax(0, 1fr) nel componente; qui si assicura che anche
   le celle possano stringersi, perche' una cella che non scende sotto il suo
   contenuto rimetterebbe tutto come prima. La stessa regola c'era solo sotto
   i 720px, cioe' non dove il difetto si vedeva. */
.edm-finestra [style*="grid-template-columns"] > * { min-width: 0; }

/* ── Il mezzo esaurito e' tutto grigio ─────────────────────────────────────
   Stessa scheda, stesso posto per ogni cosa: cambia il colore. L'oro e il
   nero sono di quello che si puo' prenotare; quando non si puo', la scheda si
   spegne e resta leggibile senza tirare l'occhio. Rosso solo dove serve
   davvero — la pastiglia e la riga di stato — perche' quello e' il motivo per
   cui la scheda e' spenta. */
.vv-riga.vv-spenta { background: #fbfaf9; }
.vv-riga.vv-spenta .vv-foto { background: #fbfaf9; }
.vv-riga.vv-spenta .vv-foto img { filter: grayscale(1) !important; opacity: 0.72; }
.vv-riga.vv-spenta h3 { color: var(--ink-55); }
.vv-riga.vv-spenta .vv-specs,
.vv-riga.vv-spenta .vv-specs span { color: var(--ink-55); }
.vv-riga.vv-spenta .vv-specs svg { stroke: #b6b1a8; }
.vv-riga.vv-spenta .vv-pills span { background: #f1efec; color: var(--ink-55); }
.vv-riga.vv-spenta .vv-info { color: var(--ink-55); border-bottom-color: rgba(20,20,20,0.15); }
.vv-riga.vv-spenta .vv-info svg { stroke: #b6b1a8; }
.vv-riga.vv-spenta .pill-gold { background: #e9e6e1; color: var(--ink-55); }
.vv-riga.vv-spenta .vv-prezzo { background: #f6f4f1; }
.vv-riga.vv-spenta .vv-prenota {
  border-color: rgba(20,20,20,0.25) !important;
  color: var(--ink-70) !important;
}
.vv-riga.vv-spenta .vv-prenota svg { stroke: var(--ink-70); }

/* ── Le immagini della cartina non si ridimensionano ───────────────────────
   La regola generale img{max-width:100%} vale per le foto del sito, ma le
   tessere di Leaflet sono immagini da 256px che devono restare 256px: dentro
   un riquadro piu' stretto venivano schiacciate e il mosaico non combaciava
   piu' — meta' cartina grigia. Leaflet lo dichiara nel suo foglio; questa e'
   la rete per quando quel foglio non c'e' o arriva tardi. */
.leaflet-container img,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-image-layer {
  max-width: none !important;
}

/* ── Targhetta reCAPTCHA ────────────────────────────────────────────────────
   Google la mette in basso a destra, dove sta gia' il pulsante WhatsApp: le
   due si accavallavano e la targhetta copriva mezzo pulsante. Spostata a
   sinistra. Non si puo' nascondere: le condizioni d'uso di Google chiedono
   che resti visibile, oppure che l'avviso sia scritto nel modulo. */
.grecaptcha-badge {
  left: 14px !important;
  right: auto !important;
  transform: scale(0.7);
  transform-origin: bottom left;
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Passandoci sopra torna piena: resta leggibile per chi la cerca, senza
   stare addosso a chi sta compilando. Nascosta del tutto non si puo': le
   condizioni di Google chiedono che sia visibile, o in alternativa che
   l'avviso sia scritto nel modulo. */
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within {
  opacity: 1;
  transform: scale(1);
}

/* ── La scheda che contiene il calendario non lo taglia ────────────────────
   `.card` ritaglia il contenuto (overflow: hidden) per via degli angoli
   arrotondati. Il riquadro delle date e' posizionato sopra la scheda e
   sporge di proposito: dentro una .card veniva tagliato di netto a destra e
   in basso, e mezzo calendario — con il pulsante Conferma — era fuori
   portata. Qui il ritaglio va tolto; l'effetto di sollevamento al passaggio
   del mouse pure, perche' spostava la scheda mentre si sceglieva un giorno. */
.card.card-con-calendario {
  overflow: visible;
}
.card.card-con-calendario:hover {
  transform: none;
}

/* ── La X delle finestre ───────────────────────────────────────────────────
   Sweetalert la disegna come un pulsante squadrato con il bordo azzurro del
   browser quando prende il fuoco: sembrava un campo da compilare piu' che un
   modo per chiudere. Tonda, discreta, e si scurisce quando ci passi sopra. */
.swal2-popup .swal2-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: rgba(20, 20, 20, 0.45);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
  box-shadow: none;
  outline: none;
}
.swal2-popup .swal2-close:hover {
  background: rgba(20, 20, 20, 0.06);
  color: var(--ink);
}
.swal2-popup .swal2-close:focus,
.swal2-popup .swal2-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(199, 154, 45, 0.35);
  color: var(--ink);
}

/* ── Finestre (sweetalert) ─────────────────────────────────────────────────
   Erano vestite in due modi diversi: lo stile stava solo nella pagina di
   pagamento, quindi le finestre delle altre pagine restavano con l'aspetto
   di serie — pulsante di conferma a pillola dorata accanto a un "Annulla"
   grigio squadrato, due bottoni che sembravano di due siti diversi.
   Qui vale per tutto il restyle, e i due pulsanti sono la stessa cosa con
   due pesi: pieno quello che porta avanti, contornato quello che si tira
   indietro. */
.swal2-popup {
  font-family: var(--sans) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
}
.swal2-popup .swal2-title {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--ink) !important;
  text-align: left !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.swal2-popup .swal2-html-container {
  margin: 14px 0 22px 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-70) !important;
  text-align: left !important;
}
.swal2-popup .swal2-actions {
  justify-content: flex-end !important;
  gap: 10px;
  margin: 4px 0 0 !important;
}
.swal2-popup .swal2-styled {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 13px 24px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Le finestrelle di esito — quelle con l'icona: "Fatto!", un errore, un
   avviso — vanno al centro e compatte.
   Erano tarate sulle finestre di conferma, che hanno un testo lungo e due
   pulsanti: titolo e testo a sinistra, icona grande 80px, e sul telefono il
   pulsante a tutta larghezza. Per tre parole e una spunta veniva fuori un
   riquadro alto mezzo schermo con la scritta appesa a sinistra.
   Si riconoscono dall'icona, che nelle conferme non c'e': percio' basta il
   selettore fratello, senza toccare le altre. */
.swal2-popup .swal2-icon {
  transform: scale(0.66);
  transform-origin: center;
  margin: -10px auto -6px !important;
}
.swal2-popup .swal2-icon ~ .swal2-title {
  text-align: center !important;
  font-size: 22px !important;
}
.swal2-popup .swal2-icon ~ .swal2-html-container {
  text-align: center !important;
  margin: 10px 0 18px 0 !important;
}
.swal2-popup .swal2-icon ~ .swal2-actions {
  justify-content: center !important;
}

.swal2-popup .swal2-confirm {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
}
.swal2-popup .swal2-confirm:hover { background: var(--gold-hover) !important; border-color: var(--gold-hover) !important; }
/* "Annulla" non e' un'azione da nascondere ne' da mettere alla pari: stesso
   pulsante, contornato invece che pieno. */
.swal2-popup .swal2-cancel,
.swal2-popup .swal2-deny {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink-15) !important;
}
.swal2-popup .swal2-cancel:hover,
.swal2-popup .swal2-deny:hover { background: var(--ink) !important; color: var(--white) !important; border-color: var(--ink) !important; }
.swal2-popup .swal2-input,
.swal2-popup .swal2-file,
.swal2-popup .swal2-textarea {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 6px 0 !important;
  padding: 14px 16px !important;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(199, 154, 45, 0.14) !important;
}

/* Titolo della striscia itinerari: su schermo largo su una riga sola.
   Andava a capo dopo "in", lasciando "sella." da solo su una riga: sembrava
   un errore di impaginazione piu' che una scelta. Sotto i 900px torna a capo
   normalmente, perche' su un telefono non ci sta in nessun modo. */
@media (min-width: 900px) {
  .titolo-una-riga { white-space: nowrap; }
}
@media (max-width: 899px) {
  .titolo-una-riga { text-wrap: balance; }
}

/* Le testate delle sezioni.
   Occhiello, titolo e riga di presentazione stanno al centro, uno sotto
   l'altro. Le testate nate come riga — titolo a sinistra, testo o pulsanti a
   destra — diventano una colonna centrata: e' la stessa forma che aveva gia'
   la sezione degli itinerari, portata su tutte le altre. */
.testata-centrata {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.testata-centrata > * { max-width: 720px !important; margin-left: auto; margin-right: auto; }
/* Un titolo tenuto su una riga sola (white-space: nowrap) e' piu' largo di
   720px: il riquadro lo teneva stretto e il testo debordava a destra, cosi'
   sembrava spostato rispetto al sottotitolo. I titoli non hanno larghezza
   massima: si centrano da soli. */
.testata-centrata h1, .testata-centrata h2, .testata-centrata h3 { max-width: none !important; }
.testata-centrata h2 { margin-top: 0; }

/* Le tre pastiglie SCOOTER / AUTO / VAN prendono tutta la larghezza della
   scheda e si dividono la riga in tre parti uguali. Vale fino al tablet: sopra
   c'e' la scheda larga, dove il modulo e' una barra orizzontale e le pastiglie
   stanno in linea con il badge dello sconto. */
@media (max-width: 1023px) {
  .bf-tipi { width: 100% !important; }
  .bf-tipi button { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center; }
  .bf-sconto { position: absolute !important; top: -13px; right: 12px; z-index: 3; }
}

/* ── Un po' di vita al passaggio del mouse ────────────────────────────────
   Le schede si sollevavano gia', ma la fotografia dentro restava ferma e i
   pulsanti non rispondevano: sembrava tutto stampato. Qui si muove solo
   quello che si sta toccando, e mai per piu' di un quinto di secondo.
   Chi ha chiesto al sistema operativo di ridurre le animazioni non vede
   niente di tutto questo (in fondo al blocco). */

/* La fotografia dentro la scheda si avvicina appena. Il ritaglio non cambia:
   e' l'immagine che cresce dentro la sua cornice.
   Solo sulle schede che si aprono (mezzi, destinazioni): dentro il checkout ci
   sono schede con dentro loghi e icone, che non devono muoversi. */
.scheda-viva img { transition: transform 520ms cubic-bezier(.2,.7,.2,1); }
.scheda-viva:hover img { transform: scale(1.045); }

/* I pulsanti: si sollevano e la freccia dentro fa un passo avanti. */
.btn { transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }
.btn svg { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.btn:hover svg { transform: translateX(3px); }

/* Il pulsante che porta i soldi in cassa. */
.bf-cerca { transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.bf-cerca:hover { background: var(--gold-hover, #b8892a); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(199,154,45,0.38); }
.bf-cerca:active { transform: translateY(0); transition-duration: 60ms; }
.bf-cerca svg { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.bf-cerca:hover svg { transform: translateX(4px); }

/* Le pastiglie del tipo di mezzo: il nero scorreva di scatto. */
.bf-tipi button { transition: background 240ms ease, color 240ms ease, opacity 240ms ease; }

/* I campi del modulo: il bordo si accende quando ci si passa sopra. */
.booking-form-root [role="button"], .booking-form-root select { transition: border-color 200ms ease, box-shadow 200ms ease; }

@media (prefers-reduced-motion: reduce) {
  .scheda-viva img, .scheda-viva:hover img,
  .btn, .btn:hover, .btn svg, .btn:hover svg,
  .bf-cerca, .bf-cerca:hover, .bf-cerca svg, .bf-cerca:hover svg,
  .bf-tipi button {
    transition: none !important;
    transform: none !important;
  }
}

/* Le righe del ritiro e della riconsegna nel riepilogo. Quando si cambia
   qualcosa da "Modifica" le righe rientrano dal basso: senza, la data
   cambiava di scatto e non si capiva se il cambio fosse andato a buon fine. */
.ck-righe-luogo { animation: ckRigaIn 360ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes ckRigaIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-righe-luogo { animation: none !important; }
}

/* ── Scheletri di caricamento ─────────────────────────────────────────────
   Le pagine del sito si disegnano nel browser: fra l'arrivo dell'HTML e il
   momento in cui compare qualcosa passava un attimo di pagina bianca, e su
   una connessione lenta quell'attimo diventa lungo. Qui si mette in scena la
   forma di quello che sta arrivando: titoli, schede, righe. Sparisce da solo
   quando il contenuto vero prende il suo posto. */
.sk { background: var(--sand, #f1ece2); border-radius: 8px; position: relative; overflow: hidden; }
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.62), transparent);
  animation: skOnda 1.25s infinite;
}
.sk-scuro { background: rgba(255,255,255,0.12); }
.sk-scuro::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent); }
@keyframes skOnda { 100% { transform: translateX(100%); } }

.sk-titolo   { height: 34px; width: 46%; margin: 0 auto 14px; }
.sk-riga     { height: 13px; margin-bottom: 9px; }
.sk-riga.corta { width: 62%; }
.sk-riga.media { width: 80%; }
.sk-foto     { width: 100%; aspect-ratio: 16/10; border-radius: 12px; }
.sk-pillola  { height: 38px; width: 128px; border-radius: 999px; }

.sk-pagina { padding: 56px 0 80px; }
.sk-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.sk-scheda { border: 1px solid var(--line, #e7e2d8); border-radius: 14px; padding: 14px; background: #fff; }
.sk-scheda .sk-foto { margin-bottom: 12px; }
.sk-testata { text-align: center; margin-bottom: 36px; }
.sk-testata .sk-riga { margin-left: auto; margin-right: auto; }

/* Chi ha chiesto meno animazioni vede i blocchi fermi: la forma resta, l'onda no. */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

/* ── Il modulo di ricerca, stessa scheda dappertutto ──────────────────────
   In home il modulo sta in una colonna da 440px: pastiglie larghe quanto la
   scheda, campi uno sotto l'altro, tasto a tutta larghezza, sconto appeso
   all'angolo. Nelle pagine di servizio (scooter a giorni, scooter a minuti,
   auto e minibus) era largo quanto la pagina: stesso modulo, ma un'altra cosa
   da guardare. Qui le regole della home diventano una classe, cosi' la scheda
   e' la stessa ovunque la si metta. */
.rb-compatto { max-width: 440px; position: relative; }
@media (min-width: 1024px) {
  /* I campi in fila non ci stanno in 440px: si mettono uno sotto l'altro,
     come gia' fanno sul telefono. */
  .rb-compatto .booking-form-root > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .rb-compatto .bf-cerca { width: 100%; }
  .rb-compatto .bf-tipi { width: 100%; }
  .rb-compatto .bf-tipi button {
    flex: 1 1 0 !important; min-width: 0; justify-content: center;
    padding-left: 8px; padding-right: 8px;
  }
  /* Con le pastiglie larghe quanto la scheda il badge dello sconto finirebbe
     su una riga sua: e' una promessa, non un campo del modulo. */
  .rb-compatto .bf-sconto { position: absolute; top: -13px; right: 14px; z-index: 3; }
  /* Le otto rassicurazioni in colonna diventerebbero otto righe. */
  .rb-compatto .bf-rassicurazioni { display: none; }
}

/* ── L'eroe delle pagine di servizio, impaginato come la home ─────────────
   In home il modulo sta a sinistra e il testo a destra, centrato nella sua
   colonna. Nelle pagine di servizio il testo stava in alto a sinistra e il
   modulo in fondo: stessi pezzi, altra pagina. Sotto i 1024px tornano uno
   sopra l'altro, col testo per primo — dice dove sei prima di chiederti le
   date, e in quell'ordine sta anche nel documento (conta per chi legge con la
   tastiera e per i motori di ricerca). */
.rb-eroe { display: flex; flex-direction: column; justify-content: center; gap: 30px; }
@media (min-width: 1024px) {
  .rb-eroe {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
  /* Nel documento il testo viene prima, sullo schermo largo il modulo sta a sinistra. */
  .rb-eroe .rb-compatto { order: -1; }
  .rb-eroe-testo { max-width: none !important; text-align: center; }
  .rb-eroe-testo .rb-eroe-lead { margin-left: auto; margin-right: auto; }
  .rb-eroe-testo .rb-eroe-briciole,
  .rb-eroe-testo .rb-eroe-vantaggi { justify-content: center; }
}

/* Telefoni piccoli (iPhone SE e simili): nella riga delle date ci stanno
   "19 Ago 10:00 → 22 Ago 10:00" e la durata "· 3 giorni", ma a 320px la riga
   e' larga 262 dove ce ne sono 198: la durata veniva tagliata via dal taglio
   del campo. Sotto i 360px il testo del campo va a capo invece di sparire. */
@media (max-width: 360px) {
  .booking-form-root button > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ── Condizioni di guida nel riepilogo ────────────────────────────────────
   Chi puo' mettersi in sella o al volante: categoria di patente ed eta'
   minima secondo il Codice della Strada, piu' quello che cambia col paese
   di chi guida. E' l'unica cosa che puo' mandare a monte il noleggio dopo
   il pagamento, quindi respira: il pallino pulsa senza fermarsi. */
.ck-guida {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 10px; padding: 9px 12px;
  border-radius: 10px; border: 1px solid;
  font-size: 12px; line-height: 1.4;
}
.ck-guida .ck-guida-testo { display: grid; gap: 2px; min-width: 0; }
.ck-guida .ck-guida-testo b { font-weight: 700; }
.ck-guida .ck-guida-nota { font-size: 11px; opacity: .82; }
.ck-guida .ck-guida-faro {
  width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; margin-top: 4px;
  animation: ckFaro 1.8s ease-in-out infinite;
}

/* Verde: i conti tornano. Ambra: manca un pezzo o serve un documento in piu'.
   Rosso: con quell'eta' quel mezzo non si guida, e va detto adesso. */
.ck-guida-ok   { background: rgba(42,125,63,0.08);  border-color: rgba(42,125,63,0.35);  color: #1f5c2e; }
.ck-guida-nota { background: rgba(199,154,45,0.10); border-color: rgba(199,154,45,0.45); color: #7a5f18; }
.ck-guida-no   { background: rgba(196,68,68,0.10);  border-color: rgba(196,68,68,0.45);  color: #9b2c2c; }

.ck-guida-ok   .ck-guida-faro { background: #2a7d3f; box-shadow: 0 0 0 0 rgba(42,125,63,0.55); }
.ck-guida-nota .ck-guida-faro { background: #c79a2d; box-shadow: 0 0 0 0 rgba(199,154,45,0.55); }
.ck-guida-no   .ck-guida-faro { background: #c44;    box-shadow: 0 0 0 0 rgba(196,68,68,0.55); }

@keyframes ckFaro {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 currentColor; }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(0,0,0,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Chi ha chiesto meno animazioni al sistema vede il pallino fermo: il colore
   e il testo dicono gia' tutto. */
@media (prefers-reduced-motion: reduce) {
  .ck-guida .ck-guida-faro { animation: none; }
}

/* ── Il testo servito dal server, prima che React disegni ────────────────
   Le pagine si riempiono nel browser. Nel frattempo il server manda gia' il
   testo — titolo, presentazione, elenchi — perche' chi non esegue il
   JavaScript trovi qualcosa. Fin qui bene.

   Il guaio e' che quel testo non aveva NESSUNA regola di stile: al primo
   caricamento, con la cache vuota, per un secondo si vedeva il sito "senza
   stile, solo scritte". Non era un difetto di caricamento del CSS — il foglio
   c'era gia' — era proprio testo nudo, con i caratteri predefiniti del
   browser.

   Nasconderlo non si puo': e' il testo che i motori leggono, e nasconderlo
   con display:none e' esattamente il trucco per cui si viene puniti. Quindi
   si veste: stessi caratteri, stessi colori e stesse misure del sito, cosi'
   quel secondo somiglia a una pagina che si sta aprendo e non a una rotta. */
/* Col JavaScript attivo il ripiego non si vede: lo sostituisce React, e
   mostrarlo per un secondo faceva sembrare il sito rotto. Senza JavaScript
   resta visibile, ed e' il suo unico mestiere. */
.js-attivo .seo-fallback,
.js-attivo .sk-seo { display: none; }

.seo-fallback,
.sk-seo {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 28px 8px;
  font-family: var(--sans);
  color: var(--ink-70);
  line-height: 1.7;
}
.seo-fallback h1, .sk-seo h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 18ch;
}
.seo-fallback h2, .sk-seo h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 40px 0 12px;
}
.seo-fallback p, .sk-seo p {
  font-size: 16px;
  max-width: 62ch;
  margin: 0 0 14px;
}
.seo-fallback ul, .sk-seo ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 900px;
}
.seo-fallback li, .sk-seo li {
  font-size: 14px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.seo-fallback a, .sk-seo a {
  color: var(--ink);
  text-decoration: none;
}
.seo-fallback a:hover, .sk-seo a:hover { color: var(--gold); }

/* Il segno che manca ancora qualcosa: una riga d'oro che scorre sotto il
   titolo. Sparisce da sola quando React prende il posto di tutto. */
.seo-fallback::before,
.sk-seo::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 26px;
  background: linear-gradient(90deg, var(--gold), rgba(199,154,45,0.15), var(--gold));
  background-size: 200% 100%;
  animation: ortigiaAttesa 1.1s linear infinite;
}
@keyframes ortigiaAttesa {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-fallback::before, .sk-seo::before { animation: none; }
}

/* ── Noleggio a minuti: gli esempi di spesa ───────────────────────────────
   Quattro riquadri (30 minuti, 1, 2, 4 ore) con dentro un importo scritto
   col carattere grande del riepilogo. A quattro colonne stanno bene fino a
   circa 560px di larghezza utile; sotto vanno a due, e sul telefono stretto
   a una - schiacciarli e' esattamente il difetto che si voleva evitare
   mostrando i prezzi. */
.ck-min-esempi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 900px) { .ck-min-esempi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .ck-min-esempi { grid-template-columns: 1fr; } }

/* ═══ Il sito sul telefono ══════════════════════════════════════════════════
   Misurato, non a occhio: caricando ogni pagina in una finestra da 375px e
   chiedendo al browser chi sborda, quanto e' alto ogni bersaglio da toccare e
   quanto e' piccolo ogni testo.

   Il sito reggeva gia' bene — otto pagine su nove non sbordavano di un pixel.
   Quello che mancava sono le misure per il dito e per l'occhio. */

@media (max-width: 720px) {

  /* La targhetta "Oltre 15 anni di esperienza" e' posizionata a right:-28px per
     sporgere dalla scheda: e' un vezzo che sul desktop funziona, ma su 375px la
     scheda finisce a 359 e la targhetta arrivava a 387, spingendo fuori tutta
     la pagina di 12px. Sul telefono resta dentro. */
  [style*="right: -28px"], [style*="right:-28px"] { right: 0 !important; }

  /* Le tappe degli itinerari sbordavano di 2px: pochi, ma bastano a far
     comparire la barra di scorrimento laterale. */
  .it-tappa { max-width: 100%; overflow-wrap: anywhere; }

  /* I bersagli da toccare.

     Il primo tentativo alzava a 44px ogni collegamento di menu, briciola e
     pie' di pagina. Misurando si e' visto che era sbagliato due volte: quei
     selettori non corrispondevano quasi a niente, e dove corrispondevano
     avrebbero gonfiato collegamenti che stanno DENTRO una frase — "noleggia
     uno scooter a Siracusa" con "scooter" alto 44px non e' piu' una frase.

     I bersagli veri sono i pallini del carosello: 24px, e si sbagliano. Si
     allarga l'area sensibile con il riempimento, lasciando il pallino della
     misura che ha: quello che il dito colpisce non deve per forza essere
     quello che l'occhio vede. */
  /* I pallini restano visivamente quelli che sono; a crescere e' solo l'area
     che il dito puo' colpire. E la riga dei comandi deve poter cedere: la
     prima versione allargava i pallini e la barra di avanzamento accanto
     veniva spinta fuori dallo schermo di 6px. Misurato. */
  /* La pastiglia si stringe attorno a frecce e pallini e sta in mezzo: con
     flex:1 si allargava da un bordo all'altro e i pallini finivano spostati a
     destra, dentro una fascia scura larga quanto lo schermo. */
  .hero-comandi { flex-wrap: wrap; max-width: 100%; justify-content: center; }
  .hero-barra { min-width: 0; flex: 0 0 auto; max-width: 100%; justify-content: center; }
  .hero-pallini { gap: 0; flex: 0 0 auto; max-width: 100%; }
  .hero-pallino {
    padding: 11px 7px !important;
    background-clip: content-box;
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Le etichette del modulo di prenotazione stavano a 10px con lo stile scritto
     dentro il componente. Corrette alla fonte, in booking-form.jsx: inseguirle
     con un selettore sarebbe stato indovinare. */

  /* L'attribuzione di Leaflet resta com'e': e' un obbligo di licenza, sta a
     11px per non dare fastidio, e nessuno la tocca apposta. */

  /* Le etichette del modulo di prenotazione stavano a 10px. Sono sulla strada
     che porta a pagare: "Punto di ritiro", "Data di ritiro". Dieci pixel al
     sole, con il telefono in mano, non si leggono. */
  .bf-etichetta, .bf-label, .campo-etichetta { font-size: 12.5px !important; }
  form label, .field label { font-size: 12.5px !important; }

  /* Il nastro dello sconto e le didascalie. */
  .eyebrow, .caption, .hint, .db-nastro, .ortigia-marquee-track,
  small, .small, figcaption { font-size: 12.5px !important; line-height: 1.5; }

  /* Sotto i 16px iOS ingrandisce la pagina da solo quando si tocca un campo, e
     poi non la rimpicciolisce piu': il cliente si ritrova il modulo tagliato a
     meta' nel mezzo della prenotazione. */
  input, select, textarea { font-size: 16px !important; }

  /* Le griglie a piu' colonne diventano una sola: due colonne su 375px non
     sono due colonne, sono due colonne strizzate. Restano a due solo le
     miniature, dove serve il confronto a colpo d'occhio. */
  .griglia-3, .griglia-4, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .griglia-2, .grid-2 { grid-template-columns: 1fr !important; }

  /* Quello che scorre di lato deve scorrere con lo slancio del dito, non a
     scatti. */
  [style*="overflow-x"], .scorri-x, .db-scorri {
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  }
}

@media (max-width: 400px) {
  /* Telefoni stretti: i titoli enormi mangiano lo schermo prima che si sia
     capito di che sito si tratta. */
  h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  h2 { font-size: clamp(22px, 7vw, 28px) !important; }
}