/*
 * LE PAGINE DEI LOCALI (10/11/2026) — quello che hanno tutte: la copertina con
 * la foto, i tre gesti (chiama, scrivi, dove), il trenino delle pillole, le
 * parti col racconto, i segni del menu, i contatti e «Powered by SicilyTravel».
 * Il resto è la vetrina del negozio (foglio di pacchetti/shop). Ogni locale ha
 * poi il SUO foglio, coi suoi colori e i suoi pezzi (es. leboccerie/foglio.css).
 * Prefisso `loc-`. Pensate per il telefono (390px).
 *
 * I colori del locale arrivano dalle variabili del suo foglio:
 *   --loc-colore  l'accento (prezzi, icone, link, la riga sopra il titolo)
 *   --pesca, --pesca-forte, --pesca-scuro  le pillole accese, come nel negozio
 */
html{ scroll-behavior:smooth; }

/* IL FONDO: il grigio della vetrina (#eef1f4) col pesca del piede (#fff1e3)
   all'8%. Il colore scritto è la stessa miscela, per i telefoni che
   `color-mix` non lo conoscono. */
body.loc-pagina{ --loc-fondo:#eff1f3; --loc-fondo:color-mix(in srgb, #eef1f4 92%, #fff1e3);
  background:var(--loc-fondo); }

/* QUANTO C'È SOPRA: da sicilytravel.it la barra del sito (54 px, fissa, più la
   fascia del telefono); dal dominio del locale (`body.loc-suo`) niente. Il
   trenino si ferma sotto la barra, e una voce toccata si ferma sotto barra +
   trenino: senza barra, solo sotto il trenino. land.css dà a tutta la pagina lo
   spazio della barra (scroll-padding-top) anche quando non c'è: qui lo decide
   solo `--loc-sopra`. */
html:has(> body.loc-pagina){ scroll-padding-top:0; }
body.loc-pagina{ --loc-sopra:calc(54px + env(safe-area-inset-top, 0px)); }
body.loc-pagina.loc-suo{ --loc-sopra:0px; }
.loc{ --loc-trenino:52px; --loc-colore:#8a5a14; padding-bottom:0; }
.loc img{ max-width:100%; }

/* La copertina: nel negozio la dipinge un copione dal `data-src`; qui una
   fotografia vera, che riempie il quadro allo stesso modo. */
.loc-copertina{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.loc .vt-quadro::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25) 100%); }

/* I tre gesti: chiamare, scrivere, trovarli. Grandi, da pollice. */
.loc-gesti{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem; padding:.4rem 16px .9rem; }
.loc-gesto{ display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:46px; border-radius:14px;
  background:#fff; border:1px solid rgba(16,32,48,.12); color:#161f27; font:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
  text-decoration:none; box-shadow:0 2px 8px -4px rgba(16,32,48,.25); }
.loc-gesto i{ color:var(--loc-colore); }
.loc-gesto:active{ background:var(--pesca); }

/* Il trenino: fermo in cima mentre si scorre, come la barra del menu di un locale. */
.loc-trenino{ position:sticky; top:var(--loc-sopra, 0px); z-index:5; overflow-x:auto; padding:.55rem 16px;
  background:var(--loc-fondo, #eef1f4); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
/* «Menù:» in testa alle pillole: una parola sola, senza pillola né bordo. */
.loc-treno-detto{ flex:none; font-weight:800; font-size:.92rem; color:#161f27; white-space:nowrap; padding-right:.1rem; }
.loc-trenino .mk-voce{ text-decoration:none; color:#161f27; white-space:nowrap; }

/* Le parti: il titolo, e sotto le carte o il racconto. */
.loc-parte{ max-width:680px; margin:0 auto; padding:1.4rem 0 .4rem; scroll-margin-top:calc(var(--loc-sopra, 0px) + var(--loc-trenino) - 10px); }
.loc-parte .sh-roba{ padding:0 .9rem; }
.loc-sopra{ margin:0 16px .1rem; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--loc-colore); }
.loc-tit{ margin:0 16px .7rem; font-size:1.25rem; font-weight:800; color:#161f27; text-wrap:balance; }
.loc .sh-prezzo{ color:var(--loc-colore); white-space:nowrap; }
.loc .sh-carta-sotto{ font-size:.82rem; line-height:1.4; }
.loc .sh-carta-testo b{ font-size:1rem; }

/* Il racconto: testo da leggere, sul fondo della pagina, con le foto. */
.loc-racconto{ padding-left:16px; padding-right:16px; color:#3a4450; font-size:1rem; line-height:1.65; }
.loc-racconto .loc-tit{ margin-left:0; margin-right:0; }
.loc-racconto p{ margin:0 0 .9rem; }
.loc-racconto ul{ margin:0 0 1rem; padding-left:1.1rem; }
.loc-racconto li{ margin:.2rem 0; }
.loc-racconto h3{ margin:1.2rem 0 .5rem; font-size:1.05rem; color:#161f27; }
.loc-foto{ margin:1rem 0; }
.loc-foto img{ display:block; width:100%; height:auto; border-radius:16px; }

/* I contatti. */
.loc-piede{ max-width:680px; margin:1rem auto 0; padding:1.4rem 16px 1rem; color:#3a4450; line-height:1.6;
  border-top:1px solid rgba(16,32,48,.1); scroll-margin-top:calc(var(--loc-sopra, 0px) + var(--loc-trenino) - 10px); }
.loc-piede .loc-tit{ margin-left:0; margin-right:0; }
.loc-piede p{ margin:0 0 .8rem; }
.loc-piede a{ color:var(--loc-colore); font-weight:700; }

/* POWERED BY SICILYTRAVEL, in fondo: sul pesca chiaro del sito, col filo dello
   stesso colore della scritta. «Powered by» piccolo sopra, il nome sotto come si
   scrive, in Lobster. Apre sicilytravel.it in una scheda nuova. */
.loc-st{ display:flex; flex-direction:column; align-items:center; gap:.05rem; margin-top:1rem;
  padding:1.2rem 16px calc(1.3rem + env(safe-area-inset-bottom, 0px));
  background:#fff1e3; color:#5a3405; text-decoration:none; text-align:center;
  border-top:1px solid #5a3405; }
.loc-st-da{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8a5a14; }
.loc-st-nome{ font-family:'Lobster', cursive; font-weight:400; font-size:1.8rem; line-height:1.1; color:#5a3405; }

/* LA BANDIERA, in alto a destra: senza la barra la bandiera ci sta come se ci
   fosse, sopra la copertina, senza prendere spazio (Testa::lingua). */
.loc-lingua{ position:absolute; z-index:6; top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; bottom:auto;
  width:42px; height:42px; border-radius:50%; }
.loc-lingua img{ width:30px; height:30px; }

/* I SEGNI DEL MENU: vegetariano e vegano col loro verde e la foglia, poi gli
   allergeni, piccoli e quieti. Li calcolano i motori del sito dagli ingredienti
   (LocaliController::menu). */
.loc-avviso{ max-width:680px; margin:1.2rem auto 0; padding:0 16px; font-size:.82rem; line-height:1.45; color:#5f6b78; }
.loc-segni{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.loc-dieta{ display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .55rem .18rem .4rem; border-radius:999px;
  font-size:.74rem; font-weight:700; line-height:1.2; }
.loc-dieta svg{ width:13px; height:13px; flex:none; }
.loc-dieta-vegetariano{ background:#eaf6e1; color:#3b7a1f; box-shadow:inset 0 0 0 1px rgba(59,122,31,.25); }
.loc-dieta-vegano{ background:#1f7a3d; color:#fff; }
/* La V da sola (i menu con `"segni": "v"`): verde chiaro vegetariano, verde
   scuro vegano; e la legenda sopra il menu che dice cosa vogliono dire. */
.loc-v{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  font-size:.78rem; font-weight:800; line-height:1; flex:none; }
.loc-v-vegetariano{ background:#dff2d2; color:#2f6b16; box-shadow:inset 0 0 0 1px rgba(47,107,22,.3); }
.loc-v-vegano{ background:#1f6b35; color:#fff; }
.loc-legenda{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.loc-allergene{ display:inline-flex; align-items:center; padding:.16rem .5rem; border-radius:999px;
  font-size:.72rem; line-height:1.2; color:#5f6b78; background:#f3f5f7; box-shadow:inset 0 0 0 1px rgba(16,32,48,.1); }

/* CONDIVIDI (10/11/2026): un pallino nei contatti, col colore del locale; sotto
   la parola, che diventa «Link copiato» dove il telefono non sa condividere. */
.loc-condividi{ display:inline-flex; flex-direction:column; align-items:center; gap:.35rem; margin:.4rem auto 0;
  padding:0; border:0; background:none; font:inherit; color:#161f27; cursor:pointer; }
.loc-condividi-tondo{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%;
  background:var(--loc-colore); color:#fff; font-size:1.15rem; box-shadow:0 6px 16px -8px rgba(0,0,0,.45); }
.loc-condividi:active .loc-condividi-tondo{ transform:scale(.94); }
.loc-condividi-detto{ font-size:.84rem; font-weight:700; }