/* Font ospitati in locale (nessuna richiesta a Google Fonts). File variabili: un solo file per famiglia. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/playfair-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* cirillico (russo) e latino esteso (polacco): scaricati solo dalle pagine che li usano (unicode-range) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/playfair-display-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/playfair-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== base.css ===== */
/* ============================================================
   WebCreator — shared base stylesheet (premium)
   Structure + components. Palette/typography come from a variant
   stylesheet that overrides the CSS custom properties below.
   ============================================================ */
:root {
  --accent: #c0703a;
  --accent-2: #e0a96d;
  --bg: #faf6f1;
  --surface: #ffffff;
  --ink: #241d18;
  --muted: #6f655c;
  --border: #e9e0d4;
  --radius: 24px;
  --radius-pill: 999px;
  --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Cinematic scrim: darkens the lower-left (where the headline + CTA sit) and
     the bottom edge, while letting the upper-right of the real photo stay vivid
     — the image reads as a photograph, not a murky wash. */
  --hero-overlay:
    linear-gradient(105deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,.06) 72%),
    linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.10) 42%, transparent 60%);
  --shadow: 0 30px 60px rgba(20,12,6,.18);
  --shadow-sm: 0 10px 26px rgba(20,12,6,.10);
  --maxw: 1180px;

  /* --- design-token scales -------------------------------------------- */
  /* spacing scale (rem) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  /* radius scale */
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px;
  /* elevation scale */
  --shadow-xs: 0 2px 8px rgba(20,12,6,.06);
  --shadow-lg: 0 44px 90px rgba(20,12,6,.24);
  /* colour roles derived from the accent */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --ring: color-mix(in srgb, var(--accent) 22%, transparent);
  /* Always-dark panel for the topbar & footer. These carry hard-coded LIGHT
     text (and white OTA pills), so their background must stay dark in EVERY
     variant. Using var(--ink) broke dark variants, where --ink is a light
     colour → light text on a light bar. This token is dark regardless. */
  --dark-panel: color-mix(in srgb, var(--accent) 16%, #15110d);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
/* Contain the off-canvas mobile menu (.main-nav is position:fixed + translateX(100%),
   which otherwise creates a horizontal scroll on phones). `clip` clips the overflow
   WITHOUT creating a scroll container, so position:sticky (the header) still works. */
html, body { overflow-x: clip; }
/* in-page nav jumps land BELOW the sticky glass header, not hidden under it */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); line-height: 1.75; font-size: 18px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); line-height: 1.08; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

/* Accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--dark-panel); color: #fff; padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Header / nav — glassy floating bar */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 3.5rem);
  /* Liquid-glass bar: deeper translucency + saturation + a soft shadow instead
     of a hard hairline border (reads as frosted glass over the content). */
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: 0 6px 24px -14px rgba(20,12,6,.5);
}
.brand { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); letter-spacing: -.02em; }
/* Per-lead brand LOGO (opt-in): shown in place of the text name; sized to the header
   on desktop and mobile, never overflowing the bar. */
.brand--logo { display: inline-flex; align-items: center; padding: .1rem 0; flex: none; }
.brand-logo { height: 56px; width: auto; max-width: 230px; display: block; object-fit: contain; border-radius: 10px; }
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: .95rem; position: relative; padding: .2rem 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent); transition: right .25s ease; }
.main-nav a:hover { color: var(--accent); }
.main-nav a:hover::after { right: 0; }
.social-links { display: flex; gap: .55rem; align-items: center; }
.social-links a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  transition: transform .18s, background .18s, color .18s;
}
.social-links a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
  padding: .95rem 2rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 2px solid transparent; transition: transform .18s, box-shadow .18s, background .18s;
  font-size: 1.02rem; font-family: var(--font-head);
}
.btn-primary {
  /* Solid, slightly DEEPENED accent so white text always meets AA contrast —
     the old accent→accent-2 gradient washed out the label on lighter palettes
     (gold/sand) and read as "too light to see". */
  color: #fff; background-image: none;
  background: color-mix(in srgb, var(--accent) 88%, #1c120a);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn-primary:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 70%, #1c120a); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; }
/* tactile press feedback (ui-ux-pro-max scale-feedback) */
.btn:active { transform: translateY(0) scale(.98); }
/* form submit loading state (ui-ux-pro-max loading-buttons): spinner + locked */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: btnspin .7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
/* default (on light page sections): accent outline + accent text, so it's always
   visible. Dark contexts (hero/footer/cookie) re-assert white/ink below. */
.btn-ghost { background: transparent; border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
.hero .btn-ghost { color: #fff; border-color: currentColor; backdrop-filter: blur(4px); background: rgba(255,255,255,.08); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Hero — cinematic */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden;
  background-size: cover; background-position: center; color: #fff; isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: -20% -20% auto -20%; height: 70%; z-index: -1;
  background: radial-gradient(60% 60% at 70% 20%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%);
  mix-blend-mode: screen; opacity: .8; animation: glow 9s ease-in-out infinite alternate;
}
.hero--small { min-height: 60vh; }
.hero-inner { position: relative; padding: clamp(2rem, 6vw, 7rem); max-width: 960px; animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); text-shadow: 0 4px 30px rgba(0,0,0,.45); font-weight: 800; }
.hero .subtitle { font-size: clamp(1.1rem, 2.6vw, 1.6rem); opacity: .96; max-width: 40ch; }
.hero .eyebrow {
  display: inline-block; letter-spacing: .28em; text-transform: uppercase; font-size: .78rem;
  font-weight: 700; padding: .45rem 1rem; margin-bottom: 1.2rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
}
.hero .rating { margin: .8rem 0 1.6rem; font-weight: 700; }
/* aligned figures for ratings/prices/distances (no width jitter) */
.rating, .poi .dist, .badge, .count-up { font-variant-numeric: tabular-nums; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* scroll cue */
.hero::after, .hero { will-change: transform; }

/* Sections */
.section { max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 2rem); }
.section--alt { position: relative; background: var(--surface); max-width: none; overflow: hidden; }
/* Soft accent aurora for depth on alternating sections */
.section--alt::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; height: 120%;
  background: radial-gradient(50% 50% at 70% 30%, var(--accent-soft), transparent 70%);
  pointer-events: none; z-index: 0;
}
.section--alt > .section-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.section-title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); display: inline-block; }
.section-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 99px; margin-top: .7rem; background: var(--accent); }
.lead { color: var(--muted); max-width: 72ch; font-size: 1.08rem; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
.card {
  position: relative; padding: 1.9rem; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  /* Clean flat surface (editorial), not a tinted gradient — reads crisper and
     lets the border + hover lift do the work (ui-ux-pro-max card guidance). */
  background: var(--surface);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.section--alt .card { background: var(--bg); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.card:hover::before { transform: scaleX(1); }
.card h3 { color: var(--accent); font-size: 1.25rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 2.4rem; }
.gallery .media { position: relative; height: 250px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background-size: cover; background-position: center; margin: 0; }
.gallery .media picture, .gallery .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .media img { transition: transform .5s ease, opacity .7s ease; }
.gallery .media:hover { box-shadow: var(--shadow); }
.gallery .media:hover img { transform: scale(1.06); }
/* blur-up: real photo fades in over its tiny placeholder (JS-gated) */
html.js .media.blur-up img { opacity: 0; }
.media img.loaded { opacity: 1 !important; }

/* Map */
.map-wrap { margin-top: 1.8rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.map { width: 100%; height: 400px; border: 0; display: block; filter: saturate(1.05); }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow); max-width: 680px; margin-top: 1.6rem; }
.section--alt .form-card { background: var(--bg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* width:100% + min-width:0 so date/number inputs never exceed their grid track on
   mobile (grid/flex children default to min-width:auto = min-content → overflow). */
.field input, .field textarea, .field select { width: 100%; min-width: 0; max-width: 100%; padding: .85rem .95rem; border: 1px solid var(--border); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
/* Checkboxes/radios (e.g. the "Servizi extra" multiselect) must NOT inherit the
   full-width text-input styling above, or the box stretches to 100% and shoves its
   label out of the fieldset on mobile. Keep them native-sized. */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); outline: none; }
.form-status { min-height: 1.4em; font-weight: 700; margin: .9rem 0 0; }
.form-status.ok { color: #2e7d32; }
.form-status.err { color: #c0392b; }

/* Nearby POIs */
/* Space the "nearby" category blocks apart so a title isn't glued to the
   previous category's cards. */
.nearby-group + .nearby-group { margin-top: clamp(2.8rem, 5vw, 4rem); }
.poi { display: flex; flex-direction: column; }
.poi .kind { color: var(--muted); font-size: .85rem; text-transform: capitalize; margin: 0; }
.poi .dist { font-weight: 800; color: var(--accent); margin-top: .6rem; font-size: 1.1rem; }
/* Clickable POI card → opens Google Maps (new tab on desktop, app on mobile) */
.poi--link { color: inherit; text-decoration: none; cursor: pointer; }
.poi--link h3 { color: var(--accent); }
.poi--link:hover { color: inherit; }

/* Badges / notes */
.badge { display: inline-block; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; border-radius: var(--radius-pill); padding: .25rem .9rem; font-size: .8rem; font-weight: 700; }
.note { color: var(--muted); font-size: .95rem; }
.review-cta { display: inline-flex; align-items: center; gap: .5rem; }

/* Footer */
.site-footer { background: var(--dark-panel); color: #e8ddd0; text-align: center; padding: 3.5rem 1rem; }
.site-footer .brand, .site-footer strong { color: #fff; }
.site-footer .social-links { justify-content: center; margin: 1.2rem 0; }
.site-footer .social-links a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.site-footer .btn-ghost { color: #fff; margin-top: .6rem; }
.demo-note { font-size: .8rem; opacity: .55; margin-top: .8rem; }

/* Animations */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes glow { from { transform: translateY(-6%) scale(1); opacity: .55; } to { transform: translateY(4%) scale(1.1); opacity: .85; } }
/* Progressive enhancement: content is visible by default (good for SEO &
   no-JS); only hidden once JS marks the document, then revealed on scroll. */
.reveal { transition: opacity .8s ease, transform .8s ease; }
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

.main-nav a.active { color: var(--accent); }
.main-nav a.active::after { right: 0; }

/* Mobile nav toggle (injected by app.js) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .25s, opacity .25s; }
/* Explicit ✕ close button inside the open drawer (injected by app.js). The
   hamburger-into-X trick was too subtle — users couldn't find how to close the
   menu — so on open we HIDE the hamburger and show this clear ✕ instead. */
.nav-close { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 2.2rem; line-height: 1; padding: 0 .3rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 80; padding: 4vw; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  /* The slide-in drawer is position:fixed; a backdrop-filter on the header would
     make it resolve against the header box (a tiny strip) instead of the viewport
     → broken half-height drawer. Drop the blur on mobile so the drawer fills the
     screen; keep a solid header bg for legibility. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .nav-toggle { display: flex; z-index: 70; }
  /* On open, hide the hamburger and show the explicit ✕ inside the drawer. */
  body.nav-open .nav-toggle { display: none; }
  .nav-close { display: block; position: absolute; top: 1rem; right: 1.1rem; z-index: 65; }
  .main-nav { position: fixed; inset: 0 0 0 28%; background: var(--surface); transform: translateX(100%); transition: transform .3s ease; padding: 5rem 1.5rem; box-shadow: var(--shadow); z-index: 60; overflow-y: auto; }
  body.nav-open .main-nav { transform: none; }
  /* lock the page behind the open menu so it doesn't scroll away under it.
     The scroller is usually <html>, so body overflow alone isn't enough — lock
     the root too (:has lets us reach it from the body class). */
  body.nav-open { overflow: hidden; }
  html:has(body.nav-open) { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 1.2rem; }
  /* Compact contact topbar on mobile (phone/email/city): smaller + tighter so it
     doesn't eat a third of the screen and push the hero under the header. */
  /* NB: the base `.topbar` rule below is declared later in the file, so on mobile
     its gap/font would win by source order — force the compact values here. */
  .topbar { font-size: .72rem !important; gap: 0 .8rem !important; padding: .25rem .7rem !important; line-height: 1.15 !important; }
  .topbar span { padding: 0 !important; margin: 0 !important; }
  /* Small safety clearance so the bottom-anchored hero eyebrow never tucks under the
     sticky header on very short viewports. */
  .hero { padding-top: 2rem; }
  /* Header actions on small screens: the language switcher (up to 4 codes) plus the
     social icons were wider than the row, so the last icon (e.g. the Google review
     star) got clipped off the right edge. Drop the social icons from the sticky bar
     on mobile — the phone is already tappable in the topbar (📞) and every social/
     review link stays in the footer — leaving brand + menu + switcher, which always
     fits for any number of languages. */
  .site-header .social-links { display: none; }
  .brand-logo { height: 44px; max-width: 150px; }
  .header-right { gap: .5rem; min-width: 0; }
  .lang-switch { font-size: .8rem; gap: .1rem; }
  .lang-switch a { padding: .22rem .4rem; }
  /* cookie banner: stack compactly so it never overflows the viewport width */
  .cookie-banner { padding: .8rem 1rem; gap: .55rem; }
  .cookie-banner p { flex: 1 1 100%; font-size: .85rem; text-align: center; }
  .cookie-banner .cookie-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
  .cookie-banner .btn { flex: 1 1 auto; }
}

/* ============================================================
   MODERN LAYER — extra components for a premium feel
   ============================================================ */

/* Thin contact/announcement bar above the header */
.topbar {
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--dark-panel); color: #f3ece0; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; letter-spacing: .02em;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--accent-2); }

/* Hero glass info-card */
.hero-inner { max-width: 1000px; }
.hero-card {
  display: inline-block; margin-top: 1.6rem; padding: 1.1rem 1.4rem; border-radius: 18px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero-card .meta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-weight: 600; }
.hero-card .meta span { display: inline-flex; align-items: center; gap: .4rem; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; z-index: 1; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 4px; transform: translateX(-50%); animation: cue 1.6s infinite; }
@keyframes cue { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }

/* Richer animated mesh in the hero */
.hero::after {
  background:
    radial-gradient(40% 50% at 78% 18%, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent 70%),
    radial-gradient(34% 44% at 18% 12%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%);
}

/* Features / amenities strip */
.features { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features-inner { max-width: var(--maxw); margin: 0 auto; padding: 2.2rem clamp(1rem,4vw,2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem; }
.feature { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.feature .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-sm); font-size: 1.2rem; }

/* Stats band */
.stats { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000), var(--accent)); color: #fff; }
.stats-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; text-align: center; }
.stat .num { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.stat .lbl { opacity: .9; font-size: .95rem; margin-top: .4rem; }

/* Testimonial */
.quote { max-width: 760px; margin: 2.4rem auto 0; text-align: center; font-size: clamp(1.2rem,2.6vw,1.6rem); font-style: italic; color: var(--ink); }
.quote cite { display: block; margin-top: 1rem; font-size: .95rem; font-style: normal; color: var(--muted); font-weight: 700; }

/* Floating booking CTA */
.float-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; opacity: 0; transform: translateY(20px);
  transition: opacity .3s, transform .3s; box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 50%, transparent);
}
.float-cta.show { opacity: 1; transform: none; }
@media print { .float-cta, .scroll-cue { display: none; } }

/* WhatsApp + OTA portal links */
.social-links a.wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.portals { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0; }
.portal { font-size: .85rem; font-weight: 700; padding: .45rem 1rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.portal:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Varied gallery heights for a modern masonry feel */
.gallery .media:nth-child(3n+1) { height: 300px; }
.gallery .media:nth-child(4n+2) { height: 210px; }
@media (max-width: 760px) { .gallery .media { height: 200px !important; } }

/* ============================================================
   PREMIUM LAYER — Ken Burns hero, bento, carousel, FAQ, dark
   ============================================================ */

/* Cinematic Ken Burns zoom on the hero photo (its own GPU layer) */
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.02); will-change: transform;
  animation: kenburns 26s ease-in-out 0s infinite alternate both;
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.16); } }

/* Bento grid: first card spans larger for a modern editorial rhythm */
@media (min-width: 880px) {
  .grid--bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .grid--bento > .card:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
  .grid--bento > .card:first-child h3 { font-size: 1.7rem; }
  .grid--bento > .card:first-child p { font-size: 1.08rem; }
}

/* Reviews carousel — scroll-snap track with dot navigation */
.reviews-carousel { position: relative; margin-top: 1.6rem; }
.reviews-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr);
  gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .4rem .2rem 1.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review-card { scroll-snap-align: center; }
.review-card .stars { color: var(--accent); letter-spacing: .12em; font-size: 1.05rem; margin-bottom: .4rem; }
@media (min-width: 980px) { .reviews-track { grid-auto-columns: calc((100% - 2 * 1.4rem) / 3); } }
.review-card { scroll-snap-align: start; }
/* Photo gallery carousel — 3-up scrolling track (opt-in via extra.gallery_carousel) */
.gallery-carousel { position: relative; margin-top: 2.4rem; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .2rem .2rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track .media {
  position: relative; height: 340px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background-size: cover; background-position: center; margin: 0;
  scroll-snap-align: start;
}
.gallery-track .media picture, .gallery-track .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-track .media img { transition: transform .5s ease, opacity .7s ease; }
.gallery-track .media:hover img { transform: scale(1.05); }
@media (min-width: 980px) { .gallery-track { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } .gallery-carousel:has(.rev-nav:not([hidden])) { padding: 0 52px; } }
@media (max-width: 760px) { .gallery-track .media { height: 240px; } }
/* auto-scroll marquee mode: continuous motion, no scroll-snap fighting it */
.gallery-marquee .gallery-track, .reviews-marquee .reviews-track { scroll-snap-type: none; }
.gallery-marquee .gallery-track, .reviews-marquee .reviews-track { scroll-behavior: auto; }
.gallery-marquee, .reviews-marquee { cursor: default; }
.rev-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface, #fff); color: var(--ink); font-size: 1.5rem; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: opacity .2s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.rev-nav:hover { transform: translateY(-50%) scale(1.06); }
.rev-nav[disabled] { opacity: .3; cursor: default; }
.rev-prev { left: 0; } .rev-next { right: 0; }
@media (min-width: 980px) { .reviews-carousel:has(.rev-nav:not([hidden])) { padding: 0 52px; } }
@media (max-width: 560px) { .rev-nav { display: none; } }
.carousel-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .2rem; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; transition: transform .2s, background .2s; }
.carousel-dots button.active { background: var(--accent); transform: scale(1.35); }
@media (min-width: 980px) { .carousel-dots { display: none; } }

/* FAQ accordion (native <details>, no JS required) */
.faq { max-width: 820px; margin-top: 2rem; display: grid; gap: .9rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .2rem 1.3rem; box-shadow: var(--shadow-xs); transition: box-shadow .2s, border-color .2s; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.faq-item summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; padding: 1rem 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 1.1rem; color: var(--muted); }

/* Styled map: subtle frame + lift on hover */
.map-wrap { transition: box-shadow .25s, transform .25s; }
.map-wrap:hover { box-shadow: var(--shadow-lg); }

/* Premium dark variants only override the colour-role tokens above, so every
   component (cards, header, forms, FAQ) re-themes automatically. The map keeps
   its own light tiles, so give it a soft edge to sit well on a dark canvas. */
.map { filter: saturate(1.05) brightness(.96); }

/* Header right cluster + language switcher */
.header-right { display: flex; align-items: center; gap: .9rem; }
/* Language switcher as a compact dropdown (a <details>): shows only the current
   language + a caret, so any number of languages fits on one row (mobile included);
   the others reveal in a small panel on click. */
/* Robust, self-contained tokens (--lang-*) with light fallbacks so the chip never
   collapses to black when a bespoke self-contained template redefines --surface/
   --ink/--border for its own (often dark) sections. A template may set --lang-bg/
   --lang-fg/--lang-bd/--lang-active in :root to theme the chip to its nav. */
.lang-switch { position: relative; font-family: var(--font-head, inherit); font-weight: 700; font-size: .85rem; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .32rem; padding: .3rem .55rem; border-radius: 8px; color: var(--lang-fg, #24303f); border: 1px solid var(--lang-bd, rgba(0,0,0,.16)); background: var(--lang-bg, #fff); line-height: 1; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch .lang-caret { transition: transform .2s ease; opacity: .7; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--lang-bg, #fff); border: 1px solid var(--lang-bd, rgba(0,0,0,.16)); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.35); padding: .35rem; display: flex; flex-direction: column; gap: .12rem; min-width: 68px; z-index: 80; }
.lang-menu a { padding: .42rem .6rem; border-radius: 7px; color: var(--lang-fg, #24303f); opacity: .72; line-height: 1; text-align: center; }
.lang-menu a.active { color: #fff; background: var(--lang-active, var(--accent, #4f46e5)); opacity: 1; }
.lang-menu a:not(.active):hover { opacity: 1; background: rgba(0,0,0,.06); }

/* Cookie banner */
/* Pinned to the TOP, full-width: a consent bar must never sit on top of the
   bottom "do you like this preview?" box (they used to collide bottom-centre).
   The [hidden] rule is essential — without it the .cookie-banner display:flex
   overrides the HTML hidden attribute, so "Accetto" could never close it. */
.cookie-banner { position: fixed; left: 0; right: 0; top: 0; bottom: auto; transform: none; z-index: 90; width: 100%; max-width: none; background: var(--surface); color: var(--ink); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: 0 8px 26px rgba(0,0,0,.20); padding: .8rem clamp(1rem,4vw,2.2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.3rem; }
.cookie-banner[hidden] { display: none; }
/* flex-basis min(420px,100%) so the paragraph never forces a width wider than the
   viewport on mobile (plain 420px basis caused ~427px horizontal overflow, which in
   turn pushed the fixed .float-cta / header to overflow too). */
.cookie-banner p { margin: 0; font-size: .9rem; flex: 1 1 min(420px, 100%); min-width: 0; }
.cookie-banner .cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.cookie-banner .btn { padding: .6rem 1.2rem; font-size: .9rem; }
.cookie-banner .btn-ghost { color: var(--ink); }
@media print { .cookie-banner { display: none; } }
.legal-page h2 { margin-top: 1.6rem; }

/* Accessibility toolbar (opt-in add-on, injected by app.js) */
.a11y-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 78; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff; font-size: 1.3rem; box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.a11y-panel { position: fixed; left: 16px; bottom: 74px; z-index: 78; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: .8rem; display: none; flex-direction: column; gap: .5rem; min-width: 200px; }
.a11y-panel.open { display: flex; }
.a11y-panel button { font: inherit; font-weight: 700; text-align: left; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; }
.a11y-panel button:hover { border-color: var(--accent); color: var(--accent); }
.a11y-panel button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media print { .a11y-toggle, .a11y-panel { display: none !important; } }

/* Larger-text mode */
html.a11y-lg body { font-size: 1.16rem; line-height: 1.85; }
html.a11y-lg .lead { font-size: 1.22rem; }
/* High-contrast mode — re-maps the colour-role tokens, so all components follow */
html.a11y-hc { --ink: #111; --muted: #333; --bg: #fff; --surface: #fff; --border: #222; --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.8)); }
html.a11y-hc a { text-decoration: underline; }
html.a11y-hc .btn-primary { color: #fff; }

/* =====================================================================
   MODERN REWORK (2025 quiet-luxury) — applies to ALL categories.
   Palette-agnostic: uses each variant's --accent/--ink/--border/--surface,
   so every theme (light AND dark "luxe") keeps its colours but loses the
   dated gradients/glow and gains editorial type, flat components and air.
   Per-category variant CSS still loads AFTER base.css and can override.
   ===================================================================== */
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }

/* sections: more breathing room */
.section { padding: clamp(4.5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 2.5rem); }
.section-title { font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; }
.section-title::after { width: 40px; height: 2px; background: var(--accent); background-image: none; border-radius: 2px; }

/* HERO: editorial, low-anchored headline, no decorative mesh glow */
.hero { align-items: end; }
.hero::after { display: none; }
.hero-inner { padding-bottom: clamp(2.6rem, 7vw, 6rem); }
.hero h1 { font-weight: 500; font-size: clamp(2.8rem, 8.5vw, 6rem); line-height: 1.0; text-shadow: 0 2px 24px rgba(0,0,0,.34); }
.hero .eyebrow { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); letter-spacing: .3em; font-weight: 600; backdrop-filter: blur(4px); }

/* buttons: flat solid accent, crisp, no gradient */
.btn { border-radius: 10px; letter-spacing: .04em; }
.btn-primary { background: var(--accent); background-image: none; box-shadow: none; }
.btn-primary:hover { background: var(--accent-ink, var(--accent-2)); background-image: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* cards: flat, hairline border, no gradient fill, no accent top-bar */
.card { background: var(--surface); background-image: none; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.section--alt .card { background: var(--bg); }
.card::before { display: none; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.card h3 { color: var(--ink); }

/* quieter alternating sections — drop the radial "aurora" */
.section--alt::before { display: none; }

/* badges + social: hairline, calmer */
.badge { background: transparent; background-image: none; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
.social-links a { background: transparent; border: 1px solid var(--border); color: var(--ink); border-radius: 10px; }
.social-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

/* gallery + forms: lose the heavy shadows */
.gallery .media { box-shadow: none; }
.form-card { box-shadow: var(--shadow-sm); }

/* ===== theme.css (variante noir) ===== */
/* Restaurant variant: "noir" — cinematic dark editorial with gold accents.
   Il file variant conteneva solo token; qui aggiungiamo TUTTO lo styling
   restaurant-specific (nav, hero, story, menu dot-leader, gallery masonry,
   Instagram grid, reviews carousel, booking form 2col) senza toccare
   base.css shared con altri activity_type. */

:root {
  --accent: #c9a24b;
  --accent-2: #e3c987;
  --accent-3: #6b4f18;
  /* !important so the dark palette wins over the shared base-v2.css light
     override (loaded AFTER this variant): a noir/dark restaurant must stay dark. */
  --bg: #0d0b08 !important;
  --surface: #1a1611 !important;
  --surface-2: #221c15 !important;
  --ink: #f5efe4 !important;
  --ink-2: #d4c8b5 !important;
  --muted: #a39883 !important;   /* era #8a7f6c: contrasto < 4,5:1 sui fondi scuri (WCAG AA) */
  --border: rgba(201,162,75,.16) !important;
  --border-strong: rgba(201,162,75,.35) !important;
  /* Language dropdown themed to the noir nav: dark panel + light/gold text.
     Without these, base.css falls back to a WHITE panel (--lang-bg #fff) while
     `.rest-body a` forces the item text to cream (--ink) → cream-on-white,
     unreadable. Setting the tokens makes it light-on-dark and readable. */
  --lang-bg: #17130d;
  --lang-fg: #f5efe4;
  --lang-bd: rgba(201,162,75,.38);
  --lang-active: #c9a24b;
  --radius: 4px;
  --radius-lg: 8px;
  --font-head: 'Playfair Display SC', 'Playfair Display', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(13,11,8,.65) 55%, rgba(13,11,8,.95) 100%);
  --shadow: 0 32px 80px rgba(0,0,0,.6);
  --shadow-sm: 0 12px 30px rgba(0,0,0,.45);
  --shadow-gold: 0 8px 30px rgba(201,162,75,.25);
}


/* Reset base */
.rest-body { background: var(--bg); color: var(--ink); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.rest-body a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
.rest-body a:hover { color: var(--accent-2); }

/* Hide default header/topbar from base.css */
.site-header, .topbar { display: none !important; }

/* ═══ NAV STICKY ═══ */
/* Nav sempre visibile con background solido — anche a scroll=0 la barra deve
   essere leggibile sopra la foto hero. Prima era trasparente e i link
   sparivano contro immagini chiare. */
.rest-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 14px 0; background: rgba(13,11,8,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transition: padding .3s ease, background .3s ease; }
.rest-nav.is-scrolled { padding: 10px 0; background: rgba(13,11,8,.98); }
.rest-nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rest-nav__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 20px; letter-spacing: .04em; color: var(--ink) !important; text-decoration: none; min-width: 0; flex: 0 1 auto; }
.rest-nav__brand:hover { color: var(--accent-2) !important; }
/* Keep the brand on ONE line (ellipsis) so the fixed bar never grows/overlaps
   the hero on mobile with a long business name. The hero H1 keeps the full name. */
.rest-nav__name { color: var(--ink); display: block; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-nav__actions { flex-shrink: 0; }
.rest-nav__brand:hover .rest-nav__name { color: var(--accent-2); }
.rest-nav__logo { height: 36px; width: auto; }
.rest-nav__menu { display: flex; align-items: center; gap: 36px; }
.rest-nav__menu a { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; position: relative; }
.rest-nav__menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.rest-nav__menu a:hover::after { transform: scaleX(1); }
.rest-nav__cta { padding: 10px 20px; border: 1px solid var(--accent); color: var(--accent) !important; letter-spacing: .18em; }
.rest-nav__cta:hover { background: var(--accent); color: var(--bg) !important; }
.rest-nav__cta::after { display: none !important; }
/* language switcher: defer to base.css dropdown (chip + panel); always in the top bar */
.lang-switch { position: relative; margin: 0; }
.lang-switch a::after { display: none !important; }
.rest-nav__actions { display: flex; align-items: center; gap: 10px; }
.rest-nav__toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; gap: 4px; flex-direction: column; }
.rest-nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
@media (max-width: 900px) {
  /* Drawer is hidden: the top bar is just brand + actions. Cap the brand so the
     fixed bar keeps a stable single-line height and never covers the hero. */
  .rest-nav__name { max-width: calc(100vw - 150px); font-size: 17px; }
  .rest-nav__menu { position: fixed; top: 68px; left: 0; right: 0; background: rgba(13,11,8,.98); flex-direction: column; align-items: stretch; padding: 24px 24px 32px; gap: 8px; transform: translateY(-120%); transition: transform .35s ease; visibility: hidden; opacity: 0; max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rest-nav__menu.is-open { transform: translateY(0); visibility: visible; opacity: 1; }
  .rest-nav__menu a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; min-height: 44px; display: flex; align-items: center; }
  /* In the drawer the "Prenota" CTA must read like the other links, not a gold box. */
  .rest-nav__menu .rest-nav__cta { border: 0 !important; padding: 14px 0 !important; color: var(--ink-2) !important; letter-spacing: .18em; }
  .rest-nav__menu .rest-nav__cta:hover { background: transparent; color: var(--accent) !important; }
  .rest-nav__toggle { display: flex; width: 44px; height: 44px; justify-content: center; align-items: center; z-index: 2; }
  .rest-nav__toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(6px, 4px); }
  .rest-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .rest-nav__toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -4px); }
  body.nav-open { overflow: hidden; }
}

/* ============ WhatsApp floating button ============ */
/* Desktop: in basso a SINISTRA per non collidere con .float-cta "Prenota un tavolo" (in basso a dx).
   Mobile (<=720px): torna a destra come icona sola (piccola, non collide con la CTA stretta). */
.wa-float {
  position: fixed;
  left: 20px;
  right: auto;
  bottom: 20px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 14px 14px;
  background: #25D366;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(37,211,102,.35), 0 4px 12px rgba(0,0,0,.25);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation: wa-pulse 2.6s ease-in-out 1.5s infinite;
}
.wa-float:hover { background: #1EBE5C; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37,211,102,.45), 0 6px 14px rgba(0,0,0,.3); }
.wa-float:active { transform: translateY(0) scale(.97); }
.wa-float svg { flex-shrink: 0; }
.wa-float__label { line-height: 1; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(37,211,102,.35), 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
  50% { box-shadow: 0 10px 28px rgba(37,211,102,.35), 0 4px 12px rgba(0,0,0,.25), 0 0 0 12px rgba(37,211,102,0); }
}
@media (max-width: 720px) {
  .wa-float { padding: 14px; left: auto; right: 16px; bottom: 16px; }
  .wa-float__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* ═══ HERO cinematic ═══ */
.rest-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 140px 24px 80px; }
.rest-hero__bg { position: absolute; inset: -10%; background-size: cover; background-position: center; will-change: transform; z-index: 1; }
.rest-hero__scrim { position: absolute; inset: 0; background: var(--hero-overlay); z-index: 2; }
.rest-hero__content { position: relative; z-index: 3; text-align: center; max-width: 900px; margin: 0 auto; }
.rest-hero__eyebrow { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: var(--font-body); font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 32px; }
.rest-hero__dash { display: inline-block; width: 48px; height: 1px; background: var(--accent); }
.rest-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(48px, 9vw, 110px); line-height: 1; letter-spacing: -.01em; color: #fff; margin: 0 0 24px; text-shadow: 0 6px 40px rgba(0,0,0,.75), 0 2px 12px rgba(0,0,0,.6); }
.rest-hero__sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: #fff; margin: 0 0 48px; letter-spacing: .02em; text-shadow: 0 3px 12px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); font-weight: 500; }
/* Il sottotitolo sta dentro l'H1 (parole chiave nell'intestazione): stesso aspetto del <p> di prima. */
.rest-hero__title .rest-hero__sub { display: block; margin: 24px 0 0; line-height: 1.35; }
.rest-hero__title:has(.rest-hero__sub) { margin-bottom: 48px; }
.rest-hero__landmark { display: inline-flex; align-items: center; gap: 8px; margin: -28px 0 32px; padding: 8px 18px; border-radius: 100px; background: rgba(13,11,8,.45); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); color: var(--accent-2); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.rest-hero__landmark svg { flex-shrink: 0; color: var(--accent-2); }
.rest-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.rest-hero__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border: 1px solid var(--border-strong); background: rgba(13,11,8,.5); backdrop-filter: blur(8px); border-radius: 100px; font-size: 14px; color: var(--ink-2); }
.rest-hero__stars { color: var(--accent-2); font-size: 16px; letter-spacing: 2px; }
.rest-hero__rating { color: var(--ink); font-weight: 600; }
.rest-hero__reviews { color: var(--muted); font-size: 13px; }
.rest-hero__scroll { position: absolute; bottom: 24px; right: 32px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; color: var(--ink-2); opacity: .85; }
.rest-hero__scroll-line { display: block; width: 1px; height: 32px; background: linear-gradient(180deg, var(--accent) 0%, transparent 100%); animation: scrollPulse 2s ease-in-out infinite; }
@media (max-width: 900px) { .rest-hero__scroll { display: none; } }
@keyframes scrollPulse { 0%,100% { opacity: .3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } }

/* ═══ BUTTONS ═══ */
.rest-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border-radius: 2px; transition: all .3s ease; cursor: pointer; border: 0; }
.rest-btn--gold { background: var(--accent); color: var(--bg); }
.rest-btn--gold:hover { background: var(--accent-2); color: var(--bg) !important; transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.rest-btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.3); }
.rest-btn--ghost:hover { border-color: var(--accent-2); color: var(--accent-2) !important; background: rgba(201,162,75,.06); }
.rest-btn--wide { width: 100%; justify-content: center; padding: 18px 32px; }

/* ═══ SECTIONS common ═══ */
.rest-story, .rest-menu, .rest-gallery, .rest-ig, .rest-reviews, .rest-book { padding: 72px 24px; }
@media (max-width: 900px) { .rest-story, .rest-menu, .rest-gallery, .rest-ig, .rest-reviews, .rest-book { padding: 50px 20px; } }

/* ═══ STORY editorial ═══ */
.rest-story__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .rest-story__grid { grid-template-columns: 1fr; gap: 48px; } }
.rest-story__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 20px; }
.rest-story__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; color: var(--ink); margin: 0 0 32px; }
.rest-story__tagline { font-family: var(--font-head); font-style: italic; font-size: 18px; letter-spacing: .04em; color: var(--accent-2); margin: -8px 0 24px; }
.rest-story__lead { font-size: 17px; line-height: 1.75; color: var(--ink-2); margin: 0 0 20px; }
.rest-story__lead + .rest-story__lead { margin-top: 0; }
.rest-story__lead:last-of-type { margin-bottom: 32px; }
@media (max-width: 720px) {
  .rest-story__tagline { font-size: 16px; }
  .rest-story__lead { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
}
.rest-story__facts { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--border); }
.rest-story__facts li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.rest-story__k { color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 600; align-self: center; }
.rest-story__v { color: var(--ink); }
.rest-story__media { position: relative; }
.rest-story__figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 3/4; }
.rest-story__figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.rest-story__figure:hover img { transform: scale(1.06); }
.rest-story__badge { position: absolute; bottom: -32px; right: -20px; background: var(--surface); border: 1px solid var(--border-strong); padding: 20px 28px; border-radius: 4px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 4px; }
@media (max-width: 900px) { .rest-story__badge { right: 12px; bottom: 12px; } }
.rest-story__badge-num { font-family: var(--font-head); font-size: 40px; color: var(--accent-2); line-height: 1; }
.rest-story__badge-stars { color: var(--accent-2); font-size: 12px; letter-spacing: 2px; }
.rest-story__badge-lbl { font-size: 10px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }

/* ═══ CRAFT / Lavorazioni artigianali ═══ */
.rest-craft { padding: 72px 24px; background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); }
@media (max-width: 900px) { .rest-craft { padding: 50px 20px; } }
.rest-craft__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 900px) { .rest-craft__grid { grid-template-columns: 1fr; gap: 40px; } }
.rest-craft__figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/5; position: relative; }
.rest-craft__figure::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0,0,0,.4); pointer-events: none; }
.rest-craft__figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.rest-craft__figure:hover img { transform: scale(1.04); }
.rest-craft__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-craft__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(30px, 4.5vw, 52px); line-height: 1.1; color: var(--ink); margin: 0 0 20px; }
.rest-craft__lead { font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; color: var(--ink-2); margin: 0 0 32px; line-height: 1.55; }
.rest-craft__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.rest-craft__item { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--border); }
.rest-craft__item:last-child { border-bottom: 1px solid var(--border); }
.rest-craft__k { font-family: var(--font-head); color: var(--accent-2); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; align-self: start; padding-top: 2px; }
.rest-craft__v { color: var(--ink-2); font-size: 15px; line-height: 1.65; }

/* ═══ SPECIALITÀ pizze cards ═══ */
.rest-specials { padding: 72px 24px; }
@media (max-width: 900px) { .rest-specials { padding: 72px 20px; } }
.rest-specials__head { max-width: 900px; margin: 0 auto 56px; text-align: center; }
.rest-specials__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-specials__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 52px); color: var(--ink); margin: 0 0 16px; line-height: 1.15; }
.rest-specials__sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; color: var(--ink-2); margin: 0; }
.rest-specials__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .rest-specials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rest-specials__grid { grid-template-columns: 1fr; } }
.rest-specials__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.rest-specials__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.rest-specials__figure { margin: 0; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.rest-specials__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rest-specials__card:hover .rest-specials__figure img { transform: scale(1.08); }
.rest-specials__body { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rest-specials__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rest-specials__name { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0; letter-spacing: .01em; }
.rest-specials__price { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--accent-2); flex-shrink: 0; }
.rest-specials__cat { display: inline-block; font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; margin: 4px 0 2px; opacity: .85; }
.rest-specials__desc { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; flex: 1; }
.rest-specials__tag { display: inline-block; align-self: flex-start; padding: 4px 10px; background: rgba(201,162,75,.12); color: var(--accent-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border-radius: 100px; border: 1px solid var(--border-strong); }

/* ═══ MENU downloads ═══ */
.rest-menu__downloads { margin-top: 48px; padding: 32px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; }
.rest-menu__downloads--top { margin: 24px auto 48px; max-width: 640px; padding: 28px 24px; background: linear-gradient(180deg, rgba(201,162,75,.06), rgba(201,162,75,.02)); border: 1px solid rgba(201,162,75,.25); }
.rest-menu__dl-label { color: var(--accent-2); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 18px; font-weight: 600; }
.rest-menu__dl-list { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.rest-menu__section-h { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 4.2vw, 44px); color: var(--ink); margin: 0 0 12px; text-align: center; }
.rest-menu__section-sub { color: var(--ink-2); font-style: italic; font-family: 'Playfair Display', serif; font-size: 17px; margin: 0 auto 48px; max-width: 640px; text-align: center; }

/* ═══ SOCIAL brand icons: contrasto migliore ═══ */
.rest-book__social-list { flex-wrap: wrap; }
.rest-book__social-list .rest-soc { width: 46px; height: 46px; min-width: 46px; flex: 0 0 46px; background: #fff; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
@media (max-width: 520px) {
  .rest-book__social-list { gap: 10px; }
  .rest-book__social-list .rest-soc { width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px; }
  .rest-book__social-list .rest-soc svg { width: 20px; height: 20px; }
}
.rest-book__social-list .rest-soc:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,.45); border-color: transparent; }
.rest-book__social-list .rest-soc--fb { background: #fff; }
.rest-book__social-list .rest-soc--ig { background: #fff; }
.rest-book__social-list .rest-soc--ta { background: #fff; }
.rest-book__social-list .rest-soc--gm { background: #fff; }
.rest-book__social-list .rest-soc--wa { background: #fff; }

/* ═══ BLOG editorial ═══ */
.rest-menu { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rest-menu__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.rest-menu__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 20px; }
.rest-menu__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(36px, 5.5vw, 64px); color: var(--ink); margin: 0 0 12px; }
.rest-menu__sub { color: var(--ink-2); font-style: italic; font-family: 'Playfair Display', serif; font-size: 18px; margin: 0 0 64px; }
.rest-menu__list { display: flex; flex-direction: column; gap: 32px; text-align: left; }
.rest-menu__item { padding: 8px 0; min-width: 0; }
/* No flex-wrap on the row: the row must always stay on one flex line so the
   price never drops to its own line. Fit is resolved entirely inside the line
   via shrink: the dish name (flex:1 1 auto; min-width:0) is the only item
   allowed to shrink below its content width, so on narrow viewports it is the
   dish's own box that narrows and wraps its text onto multiple lines, while
   the leader (flex-basis 0%, absorbs no negative space) shrinks to nothing and
   the price (flex: 0 0 auto; white-space: nowrap) never shrinks/wraps and stays
   pinned top-right via margin-left:auto, aligned to the dish's first line via
   align-items:baseline (flex baseline = first line box). Desktop is unchanged:
   single line, dotted leader, price at the far right. */
.rest-menu__row { display: flex; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; min-width: 0; }
.rest-menu__dish { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0; letter-spacing: .02em; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.rest-menu__leader { flex: 1 1 0%; min-width: 0; height: 1px; border-bottom: 1px dotted var(--border-strong); position: relative; top: -4px; }
.rest-menu__price { font-family: var(--font-head); font-size: 20px; color: var(--accent-2); font-weight: 700; flex: 0 0 auto; white-space: nowrap; margin-left: auto; align-self: flex-start; }
/* Per-lead OPT-IN translated dish-name gloss (extra.translations[lang].menu_names),
   shown only on non-Italian pages right under the (always-Italian) dish name so a
   foreign guest understands what they're ordering. Absent for every other
   restaurant (no entry => builder never emits item.name_t/dish.title_t). */
.rest-menu__dish-t { color: var(--ink-2); opacity: .8; font-size: 13.5px; font-style: italic; margin: -4px 0 0; }
.rest-menu__text { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; padding-left: 0; }
.rest-menu__note { margin-top: 56px; padding: 28px 32px; background: linear-gradient(135deg, rgba(201,162,75,.08) 0%, rgba(201,162,75,.02) 100%); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-align: center; display: flex; align-items: center; gap: 18px; justify-content: center; }
.rest-menu__note::before { content: ''; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(201,162,75,.15); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='2'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 22px; }
.rest-menu__note p { margin: 0; color: var(--ink-2); font-size: 14.5px; font-family: 'Playfair Display', serif; font-style: italic; line-height: 1.55; text-align: left; }

/* ═══ GALLERY masonry (asymmetric) ═══ */
.rest-gallery__head { max-width: 1280px; margin: 0 auto 48px; text-align: center; }
.rest-gallery__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-gallery__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 56px); color: var(--ink); margin: 0 0 12px; }
.rest-gallery__count { color: var(--muted); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin: 0; }

/* ═══ CAROSELLO GALLERIA ═══ */
.rest-carousel { position: relative; max-width: 1440px; margin: 0 auto; --per-view: 3; --slide-gap: 16px; }
.rest-carousel__viewport { overflow: hidden; }
.rest-carousel__track { display: flex; gap: var(--slide-gap); margin: 0; padding: 0; list-style: none; transition: transform .55s cubic-bezier(.4,.14,.3,1); will-change: transform; }
.rest-carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  min-width: 0; margin: 0; padding: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.rest-carousel__figure { margin: 0; aspect-ratio: 4 / 3; background: #0d0b08; overflow: hidden; }
.rest-carousel__figure picture, .rest-carousel__figure img { width: 100%; height: 100%; display: block; }
.rest-carousel__figure img { object-fit: cover; user-select: none; }

/* Nav prev/next */
.rest-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(13,11,8,.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,75,.35); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.rest-carousel__nav:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.rest-carousel__nav:active { transform: translateY(-50%) scale(.98); }
.rest-carousel__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rest-carousel__nav--prev { left: 16px; }
.rest-carousel__nav--next { right: 16px; }

/* Status "X / N" */
.rest-carousel__status {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  background: rgba(13,11,8,.7); backdrop-filter: blur(8px);
  color: var(--accent-2); font-size: 12px; letter-spacing: .16em; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(201,162,75,.35);
  font-variant-numeric: tabular-nums;
}

/* Dots (bullet indicators) */
.rest-carousel__dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 24px auto 0; max-width: 900px;
}
.rest-carousel__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(201,162,75,.25); border: 0; padding: 0; cursor: pointer;
  transition: transform .2s ease, background .2s ease, width .3s ease;
}
.rest-carousel__dot:hover { background: rgba(201,162,75,.5); transform: scale(1.15); }
.rest-carousel__dot.is-active { background: var(--accent); width: 26px; border-radius: 8px; }
.rest-carousel__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Tablet: 2 foto per view */
@media (max-width: 1100px) {
  .rest-carousel { --per-view: 2; }
}
/* Mobile: 1 foto per view */
@media (max-width: 720px) {
  .rest-carousel { --per-view: 1; --slide-gap: 0px; }
  .rest-carousel__slide { border-radius: var(--radius); }
  .rest-carousel__figure { aspect-ratio: 4 / 3; }
  .rest-carousel__nav { width: 44px; height: 44px; }
  .rest-carousel__nav--prev { left: 8px; }
  .rest-carousel__nav--next { right: 8px; }
  .rest-carousel__status { top: 12px; right: 12px; font-size: 11px; padding: 6px 12px; }
  .rest-carousel__dots { gap: 6px; margin-top: 20px; }
  .rest-carousel__dot { width: 8px; height: 8px; }
  .rest-carousel__dot.is-active { width: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rest-carousel__track { transition: none; }
}

/* ═══ INSTAGRAM ═══ */
.rest-ig { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rest-ig__inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.rest-ig__label { font-size: 13px; letter-spacing: .25em; color: var(--accent-2); font-weight: 600; margin: 0 0 16px; text-transform: lowercase; font-family: var(--font-body); }
.rest-ig__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 52px); color: var(--ink); margin: 0 0 12px; }
.rest-ig__sub { color: var(--ink-2); font-style: italic; font-family: 'Playfair Display', serif; margin: 0 0 48px; }
.rest-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 48px; }
@media (max-width: 900px) { .rest-ig__grid { grid-template-columns: repeat(3, 1fr); } }
.rest-ig__tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; display: block; }
.rest-ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.rest-ig__tile:hover img { transform: scale(1.1); filter: brightness(.5); }
.rest-ig__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0; transition: opacity .3s ease; }
.rest-ig__tile:hover .rest-ig__icon { opacity: 1; }
.rest-ig__cta { margin-top: 8px; }

/* ═══ BLOG editorial ═══ */
.rest-blog { padding: 100px 24px; }
@media (max-width: 900px) { .rest-blog { padding: 72px 20px; } }
.rest-blog__head { max-width: 1080px; margin: 0 auto 64px; text-align: center; }
.rest-blog__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-blog__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 56px); color: var(--ink); margin: 0; }
.rest-blog__grid { max-width: 1080px; margin: 0 auto; display: grid; gap: 32px; }
.rest-blog__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.rest-blog__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rest-blog__card--featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 900px) { .rest-blog__card--featured { grid-template-columns: 1fr; } }
.rest-blog__cover { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.rest-blog__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.rest-blog__card:hover .rest-blog__cover img { transform: scale(1.05); }
.rest-blog__body { padding: 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (max-width: 900px) { .rest-blog__body { padding: 28px 24px; } }
.rest-blog__meta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
.rest-blog__meta span, .rest-blog__meta time { color: var(--accent-2); }
.rest-blog__h { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; color: var(--ink); margin: 0; }
.rest-blog__lead { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.rest-blog__text p { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.rest-blog__text p:last-child { margin-bottom: 0; }
.rest-blog__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: transparent; color: var(--accent-2) !important; border: 1px solid var(--accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-radius: 2px; transition: all .3s ease; align-self: flex-start; margin-top: 8px; }
.rest-blog__cta:hover { background: var(--accent); color: var(--bg) !important; }

/* ═══ BLOG PAGE dedicata ═══ */
.rest-blog-page { padding-top: 100px; padding-bottom: 60px; }
.rest-blog-page__hero { padding: 60px 24px 40px; text-align: center; background: var(--surface); border-bottom: 1px solid var(--border); }
.rest-blog-page__hero-inner { max-width: 900px; margin: 0 auto; }
.rest-blog-page__eyebrow { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-blog-page__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(36px, 6vw, 72px); color: var(--ink); margin: 0 0 16px; line-height: 1.1; }
.rest-blog-page__sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; color: var(--ink-2); margin: 0; }
.rest-blog-page__list { max-width: 1080px; margin: 0 auto; padding: 60px 24px; display: flex; flex-direction: column; gap: 64px; }
.rest-blog-page__post { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rest-blog-page__post:nth-child(even) { grid-template-columns: 1fr 1fr; direction: rtl; }
.rest-blog-page__post:nth-child(even) > * { direction: ltr; }
@media (max-width: 900px) { .rest-blog-page__post, .rest-blog-page__post:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: 0; } }
.rest-blog-page__cover { aspect-ratio: 4/3; overflow: hidden; }
.rest-blog-page__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.rest-blog-page__post:hover .rest-blog-page__cover img { transform: scale(1.05); }
.rest-blog-page__body { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .rest-blog-page__body { padding: 28px 24px; } }
.rest-blog-page__meta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
.rest-blog-page__meta span, .rest-blog-page__meta time { color: var(--accent-2); }
.rest-blog-page__h { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.2; color: var(--ink); margin: 0; }
.rest-blog-page__lead { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.rest-blog-page__text p { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.rest-blog-page__text p:last-child { margin-bottom: 0; }
.rest-blog-page__cta-final { text-align: center; padding: 80px 24px 60px; border-top: 1px solid var(--border); }
.rest-blog-page__cta-final h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 4vw, 44px); color: var(--ink); margin: 0 0 12px; }
.rest-blog-page__cta-final p { color: var(--ink-2); font-family: 'Playfair Display', serif; font-style: italic; margin: 0 0 32px; }

/* ═══ FULL MENU PAGE (per-lead opt-in, extra['menu_page']) ═══ */
.rest-fullmenu { padding-top: 100px; padding-bottom: 40px; }
.rest-fullmenu__hero { padding: 60px 24px 40px; text-align: center; background: var(--surface); border-bottom: 1px solid var(--border); }
.rest-fullmenu__hero-inner { max-width: 900px; margin: 0 auto; }
.rest-fullmenu__eyebrow { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-fullmenu__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(36px, 6vw, 64px); color: var(--ink); margin: 0 0 16px; line-height: 1.1; }
.rest-fullmenu__sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; color: var(--ink-2); margin: 0; }
.rest-fullmenu__catnav { max-width: 1080px; margin: 0 auto; padding: 28px 24px 0; }
.rest-fullmenu__tablist { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rest-fullmenu__tab { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .22s ease, color .22s ease, border-color .22s ease; }
.rest-fullmenu__tab:hover { color: var(--ink); border-color: var(--accent); }
.rest-fullmenu__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rest-fullmenu__tab.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
@media (max-width: 640px) {
  .rest-fullmenu__tablist { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .rest-fullmenu__tablist::-webkit-scrollbar { height: 4px; }
  .rest-fullmenu__tablist::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  .rest-fullmenu__tab { flex: 0 0 auto; }
}
.rest-fullmenu__body { max-width: 860px; margin: 0 auto; padding: 56px 24px 24px; display: flex; flex-direction: column; gap: 72px; }
.rest-fullmenu__cat { scroll-margin-top: 110px; }
.rest-fullmenu__cat[hidden] { display: none; }
.rest-fullmenu__cat-h { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 4vw, 42px); color: var(--ink); text-align: center; margin: 0 0 36px; }
.rest-fullmenu__group + .rest-fullmenu__group { margin-top: 40px; }
.rest-fullmenu__group-h { font-family: var(--font-body); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--border-strong); }
.rest-fullmenu__foot { margin-top: 28px; color: var(--muted); font-size: 13px; font-style: italic; text-align: center; }
@media (max-width: 720px) { .rest-fullmenu__body { padding: 40px 20px 16px; gap: 56px; } }

/* ═══ REVIEWS carousel ═══ */
.rest-reviews__head { max-width: 1280px; margin: 0 auto 48px; text-align: center; }
.rest-reviews__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-reviews__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 56px); color: var(--ink); margin: 0; }
.rest-reviews__scroll { display: flex; gap: 24px; overflow-x: auto; padding: 8px 24px 32px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface); max-width: 100%; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 1441px) { .rest-reviews__scroll { max-width: 1440px; } }
.rest-reviews__scroll::-webkit-scrollbar { height: 4px; }
.rest-reviews__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 24px 0; text-align: center; }
.rest-reviews__cta-text { margin: 0; color: var(--ink-2); font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; }
.rest-reviews__scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.rest-reviews__card { flex: 0 0 380px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); scroll-snap-align: start; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 600px) { .rest-reviews__card { flex: 0 0 88%; } }
.rest-reviews__stars { color: var(--accent-2); letter-spacing: 3px; }
.rest-reviews__text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0; }
.rest-reviews__author { display: flex; align-items: center; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.rest-reviews__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.rest-reviews__name { font-weight: 600; color: var(--ink); font-size: 14px; }

/* ═══ BOOKING form ═══ */
.rest-book { background: var(--surface); border-top: 1px solid var(--border); }
.rest-book__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
/* Grid items: min-width:0 evita overflow (default `auto` cresce col contenuto) */
.rest-book__grid > * { min-width: 0; }
@media (max-width: 900px) { .rest-book__grid { grid-template-columns: 1fr; gap: 48px; } }
.rest-book__label { font-size: 12px; letter-spacing: .35em; color: var(--accent-2); font-weight: 500; margin: 0 0 16px; }
.rest-book__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(32px, 5vw, 52px); color: var(--ink); margin: 0 0 16px; line-height: 1.1; }
.rest-book__sub { color: var(--ink-2); font-size: 16px; margin: 0 0 40px; line-height: 1.6; }
.rest-book__form-wrap { min-width: 0; }
.rest-book__form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rest-book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .rest-book__row { grid-template-columns: 1fr; } }
.rest-book__form .field { display: flex; flex-direction: column; gap: 8px; }
.rest-book__form .field--full { grid-column: 1 / -1; }
.rest-book__form label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rest-book__form input, .rest-book__form textarea { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 14px 16px; border-radius: 2px; font-family: var(--font-body); font-size: 15px; transition: border-color .2s ease; box-sizing: border-box; max-width: 100%; width: 100%; }
.rest-book__form input:focus, .rest-book__form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(201,162,75,.2); }
.rest-book__form textarea { resize: vertical; min-height: 100px; }
/* Date/time picker: icona visibile su sfondo scuro (dark palette scurisce l'icona nativa) */
.rest-book__form input[type="date"],
.rest-book__form input[type="time"] { color-scheme: dark; position: relative; padding-right: 44px; }
.rest-book__form input[type="date"]::-webkit-calendar-picker-indicator,
.rest-book__form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(35%) saturate(504%) hue-rotate(1deg) brightness(94%) contrast(87%);
  opacity: 1;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.rest-book__form input[type="date"]::-webkit-datetime-edit,
.rest-book__form input[type="time"]::-webkit-datetime-edit { color: var(--ink); }
.rest-book__form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.rest-book__form input[type="time"]::-webkit-datetime-edit-fields-wrapper { color: var(--ink); }
/* Firefox: icona nativa non colorabile, ma color-scheme:dark rende almeno il popup dark */
@-moz-document url-prefix() {
  .rest-book__form input[type="date"],
  .rest-book__form input[type="time"] { padding-right: 16px; }
}
.rest-book__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rest-book__info-card { padding: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
.rest-book__info-card h3 { font-family: var(--font-head); font-weight: 400; font-size: 22px; color: var(--ink); margin: 0 0 16px; }
.rest-book__info-card p { color: var(--ink-2); font-size: 14px; line-height: 1.7; margin: 8px 0; }
.rest-book__info-card a { color: var(--accent-2); border-bottom: 1px dotted var(--border-strong); }
.rest-book__info-card a:hover { color: var(--accent); }
.rest-book__addr { line-height: 1.7 !important; }
.rest-book__social { }
.rest-book__social-list { display: flex; gap: 12px; }
.rest-book__social-list a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; color: var(--ink-2); transition: all .3s ease; }
.rest-book__social-list a:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.rest-book__map { border-radius: var(--radius-lg); overflow: hidden; height: 280px; border: 1px solid var(--border); max-width: 100%; box-sizing: border-box; }
.rest-book__map iframe { width: 100%; max-width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(.95); display: block; }

/* ═══ FAQ (usa base but restyle) ═══ */
#faq { background: var(--bg); padding: 56px 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) { #faq { padding: 44px 20px; } }
#faq .section-title { font-family: var(--font-head); font-weight: 400; text-align: center; font-size: clamp(30px, 4vw, 48px); color: var(--ink); margin-bottom: 48px; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; }
.faq-item summary { padding: 18px 20px; color: var(--ink); cursor: pointer; font-weight: 600; letter-spacing: .02em; }
.faq-item[open] summary { color: var(--accent-2); border-bottom: 1px solid var(--border); }
.faq-a { padding: 16px 20px; color: var(--ink-2); line-height: 1.7; }

/* ═══ FOOTER dark ═══ */
.site-footer { background: var(--bg); color: var(--ink-2); padding: 64px 24px 32px; border-top: 1px solid var(--border); text-align: center; }
.site-footer strong { color: var(--ink); font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.site-footer p { color: var(--ink-2); margin: 8px 0; }
.site-footer p.note { color: var(--muted); font-size: 13px; }
.site-footer a { color: var(--ink); border-bottom: 1px dotted var(--border-strong); }
.site-footer a:hover { color: var(--accent-2); border-color: var(--accent); }
.site-footer .review-cta { display: inline-block; margin: 16px auto; padding: 12px 28px; border: 1px solid var(--accent); color: var(--accent-2) !important; background: transparent; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; border-radius: 2px; transition: all .3s ease; }
.site-footer .review-cta:hover { background: var(--accent); color: var(--bg) !important; }
/* Social + portal links in footer (icons) */
.site-footer .social, .site-footer .social-links, .site-footer .portal-links { display: flex; gap: 14px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.site-footer .social a, .site-footer .social-links a, .site-footer .portal-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; color: var(--ink-2); transition: all .3s ease; }
.site-footer .social a:hover, .site-footer .social-links a:hover, .site-footer .portal-links a:hover { border-color: var(--accent); color: var(--accent-2); }
.site-footer .social svg, .site-footer .social-links svg, .site-footer .portal-links svg { fill: currentColor; width: 18px; height: 18px; }

/* ═══ Form status ═══ */
.form-status { margin-top: 16px; padding: 12px 16px; border-radius: 2px; font-size: 14px; }
.form-status.ok { background: rgba(64,145,90,.15); color: #86e6a3; border: 1px solid rgba(64,145,90,.3); }
.form-status.err { background: rgba(180,64,64,.15); color: #ff9e9e; border: 1px solid rgba(180,64,64,.3); }

/* ═══ Float CTA "Prenota" — desktop dx / mobile dx (WA su sx dx cambia lato) ═══ */
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: 940; background: var(--accent) !important; color: var(--bg) !important; box-shadow: var(--shadow-gold); padding: 14px 26px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border-radius: 100px; border: 0; transition: all .3s ease; opacity: 0; transform: translateY(10px); pointer-events: none; }
.float-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-cta:hover { background: var(--accent-2) !important; transform: translateY(-2px); }
/* Su schermi molto stretti WA (icona sola dx) + Prenota (dx) collidono → stacka Prenota sopra WA */
@media (max-width: 720px) {
  .float-cta { bottom: 84px; right: 16px; padding: 12px 22px; font-size: 11px; }
}
/* Cookie banner visibile → i floating stanno subito sopra: --cookie-h è
   l'altezza reale del banner, misurata da app.js (0px a banner chiuso). */
.wa-float, .float-cta { bottom: calc(20px + var(--cookie-h, 0px)); }
@media (max-width: 720px) {
  .wa-float { bottom: calc(16px + var(--cookie-h, 0px)); }
  .float-cta { bottom: calc(84px + var(--cookie-h, 0px)); }
}

/* ═══ Reveal animation ═══ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rest-hero__bg { transform: none !important; }
  .rest-hero__scroll-line { animation: none; }
}

/* ═══ Skip link ═══ */
.skip-link { position: absolute; top: -100px; left: 8px; padding: 8px 16px; background: var(--accent); color: var(--bg); z-index: 200; }
.skip-link:focus { top: 8px; }

/* ═══ Cookie banner: sposta in fondo per non coprire nav+lang switcher ═══ */
.cookie-banner { top: auto !important; bottom: 0 !important; background: rgba(13,11,8,.98) !important; backdrop-filter: blur(12px); border-top: 1px solid var(--accent) !important; border-bottom: 0 !important; color: var(--ink) !important; box-shadow: 0 -8px 26px rgba(0,0,0,.4) !important; z-index: 95 !important; }
.cookie-banner p { color: var(--ink-2) !important; font-size: 13px !important; }
.cookie-banner a { color: var(--accent-2) !important; border-bottom: 1px dotted var(--accent) !important; }
.cookie-banner .btn { padding: 10px 22px !important; font-size: 12px !important; letter-spacing: .15em; text-transform: uppercase; border-radius: 2px !important; }
.cookie-banner .btn-primary { background: var(--accent) !important; color: var(--bg) !important; border: 0 !important; }
.cookie-banner .btn-primary:hover { background: var(--accent-2) !important; }
.cookie-banner .btn-ghost { background: transparent !important; color: var(--ink-2) !important; border: 1px solid var(--border-strong) !important; }
.cookie-banner .btn-ghost:hover { color: var(--accent-2) !important; border-color: var(--accent) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY (rest-galx) — carosello di thumbnail (frecce prev/next) + lightbox
   fullscreen. Reso SEMPRE (il link "Galleria" della nav deve risolvere). Nessuna
   tab di categoria: si scorre/ingrandisce su tutte le foto. Estetica noir/oro.
   ═══════════════════════════════════════════════════════════════════════════ */
.rest-galx { max-width: 1320px; margin: 0 auto; }
.rest-galx__stage { position: relative; }
.rest-galx__grid {
  list-style: none; margin: 0; padding: 4px 2px 16px;
  display: flex; gap: 16px;
  /* niente scroll-behavior: smooth qui: allineando lo scatto al caricamento faceva
     smettere a Chrome di misurare il contenuto principale (LCP) di tutta la home.
     Le frecce chiedono già lo scorrimento fluido da JS (behavior: 'smooth'). */
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--accent-3) transparent;
}
.rest-galx__grid::-webkit-scrollbar { height: 8px; }
.rest-galx__grid::-webkit-scrollbar-thumb { background: var(--accent-3); border-radius: 999px; }
.rest-galx__grid::-webkit-scrollbar-track { background: transparent; }
.rest-galx__item {
  flex: 0 0 auto; width: min(78vw, 340px); margin: 0; scroll-snap-align: start;
}
.rest-galx__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position: relative; line-height: 0; aspect-ratio: 4 / 5;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rest-galx__btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,11,8,.5) 100%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.rest-galx__btn img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rest-galx__btn:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.rest-galx__btn:hover::after { opacity: 1; }
.rest-galx__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Frecce prev/next (overlay sui bordi del carosello) */
.rest-galx__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bg); background: var(--accent); border: 0; opacity: .95;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.rest-galx__nav:hover { background: var(--accent-2); transform: translateY(-50%) scale(1.06); }
.rest-galx__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rest-galx__nav[hidden] { display: none; }
.rest-galx__nav--prev { left: -8px; }
.rest-galx__nav--next { right: -8px; }

@media (max-width: 640px) {
  .rest-galx__item { width: 80vw; }
  .rest-galx__nav { width: 44px; height: 44px; }
  .rest-galx__nav--prev { left: 2px; }
  .rest-galx__nav--next { right: 2px; }
}

/* ── Lightbox ── */
.rest-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,5,3,.94); backdrop-filter: blur(6px);
  padding: 24px;
}
.rest-lb.is-open { display: flex; }
.rest-lb__stage {
  position: relative; max-width: min(1200px, 94vw); max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.rest-lb__img {
  max-width: 100%; max-height: 88vh; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  animation: lbIn .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.rest-lb__btn {
  position: absolute; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(13,11,8,.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,75,.4); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.rest-lb__btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: scale(1.06); }
.rest-lb__btn:active { transform: scale(.97); }
.rest-lb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rest-lb__prev { left: max(16px, calc(50% - 640px)); top: 50%; transform: translateY(-50%); }
.rest-lb__next { right: max(16px, calc(50% - 640px)); top: 50%; transform: translateY(-50%); }
.rest-lb__prev:hover, .rest-lb__next:hover { transform: translateY(-50%) scale(1.06); }
.rest-lb__close { top: 20px; right: 20px; width: 46px; height: 46px; }
.rest-lb__counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(13,11,8,.72); backdrop-filter: blur(8px);
  color: var(--accent-2); font-family: var(--font-body);
  font-size: 12px; letter-spacing: .16em; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(201,162,75,.35);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .rest-lb__prev { left: 12px; }
  .rest-lb__next { right: 12px; }
  .rest-lb__btn { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .rest-galx__btn, .rest-lb__btn { transition: none; }
  .rest-galx__btn:hover { transform: none; }
  .rest-lb__img { animation: none; }
}

/* ===== base-v2.css ===== */
/* ============================================================
   WebCreator — DESIGN v2 (ui-ux-pro-max) — premium override layer.
   Loaded AFTER base.css + the per-category variant, so it only refines:
   spacing, elevation, type rhythm and component polish. It reuses the same
   class contract and the per-site accent (var(--accent), auto-extracted from
   the hero photo), so every one of the 18 categories gets the upgrade with
   zero structural/template change. Goal: calmer, more editorial, more
   professional — the look that converts.
   ============================================================ */
:root {
  /* PALETTE (ui-ux-pro-max "sage neutral + calm teal"): clean slate neutrals +
     a fresh teal accent — replaces the earthy black/brown that read poorly. The
     accent is forced (!important) over the per-photo extracted colour, which was
     often brown/dark for B&B photos. */
  --ink: #0F172A;            /* slate-900 text/headings (not brown) */
  --bg: #F8FAFC;             /* clean off-white (not cream) */
  --surface: #FFFFFF;
  --muted: #64748B;          /* slate */
  --border: #E2E8F0;         /* slate-200 */
  --dark-panel: #0F172A;     /* topbar/footer: clean slate, not brown-black */
  /* accent comes per-CATEGORY from the builder (_V2_PALETTE) — a curated fresh
     colour per activity type (teal for B&B, rose for beauty, …), injected after
     this file, replacing the earthy per-photo accent. */
  /* refined geometry — a touch less round reads more grown-up/editorial */
  --radius: 18px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px;
  /* softer, layered elevation (premium depth, not heavy drop-shadows) */
  --shadow-xs: 0 1px 2px rgba(20,12,6,.05), 0 1px 3px rgba(20,12,6,.05);
  --shadow-sm: 0 2px 6px -2px rgba(20,12,6,.10), 0 6px 18px -8px rgba(20,12,6,.12);
  --shadow:    0 8px 24px -10px rgba(20,12,6,.18), 0 24px 60px -30px rgba(20,12,6,.30);
  --shadow-lg: 0 30px 80px -32px rgba(20,12,6,.42);
  --maxw: 1200px;
  /* Even lighter, airier hero scrim — photo stays bright, headline still legible. */
  --hero-overlay:
    linear-gradient(100deg, rgba(20,14,9,.46) 0%, rgba(20,14,9,.12) 44%, transparent 72%),
    linear-gradient(0deg, rgba(20,14,9,.34) 0%, transparent 42%);
}

/* calmer body rhythm + crisper rendering */
body { line-height: 1.7; }
h1, h2, h3 { letter-spacing: -.025em; }

/* ---------- header: REAL liquid glass FLOATING OVER THE HERO ----------
   The glass effect is only visible when there's a photo behind it. So the hero
   pulls UP behind the sticky header (negative margin). Only `.hero` pages get
   this — legal/accessibility have no `.hero`, so their header sits normally and
   nothing breaks. The frosted bar stays light enough for dark nav text to read
   over both the hero photo and (when scrolled) light content. */
.site-header {
  padding-block: 1rem;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, #fff 40%, transparent);
  box-shadow: 0 8px 28px -22px rgba(20,12,6,.4);
}
.brand { font-size: 1.25rem; }
.main-nav a { font-weight: 600; }
.hero { margin-top: -68px; }
.hero--small { margin-top: -64px; }
@media (max-width: 760px) { .hero { margin-top: -58px; } .hero--small { margin-top: -56px; } }

/* ---------- hero: more editorial, restrained motion ---------- */
.hero { min-height: 100svh; }
.hero::after { opacity: .42; }                 /* tone down the decorative glow */
.hero-inner { max-width: 1040px; padding: clamp(2rem, 6vw, 8rem); }
.hero h1 { font-size: clamp(3rem, 8.5vw, 6rem); line-height: 1.02; letter-spacing: -.035em; }
.hero .subtitle { font-size: clamp(1.15rem, 2.4vw, 1.55rem); max-width: 46ch; opacity: .95; line-height: 1.55; }
.hero .eyebrow {
  letter-spacing: .24em; font-size: .76rem; padding: .5rem 1.05rem;
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34);
}
.hero-cta { gap: .9rem; margin-top: 1.6rem; }

/* ---------- generous, editorial section rhythm ---------- */
.section { max-width: 1200px; padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.2rem, 4vw, 2rem); }
/* Gallery and FAQ share the page background, so their two stacked section
   paddings read as one oversized empty band. Tighten just that seam. */
#gallery:has(+ #faq) { padding-bottom: clamp(2rem, 4.5vw, 3.5rem); }
#gallery + #faq { padding-top: clamp(2rem, 4.5vw, 3.5rem); }
.section--alt > .section-inner { max-width: 1200px; }
.section--alt::before { opacity: .55; }
.section-title { font-size: clamp(2.1rem, 4.6vw, 3.1rem); letter-spacing: -.03em; }
.section-title::after { width: 52px; height: 3px; margin-top: .85rem; }
.lead { font-size: 1.12rem; line-height: 1.7; max-width: 66ch; }

/* ---------- cards: clean, elevated, tactile ---------- */
.grid { gap: 1.8rem; margin-top: 2.8rem; }
.card { padding: 2rem; border-radius: var(--radius-lg); border-color: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.3rem; letter-spacing: -.02em; }

/* ---------- gallery: tighter, softer ---------- */
.gallery { gap: 1.1rem; margin-top: 2.8rem; }
.gallery .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gallery .media:hover { box-shadow: var(--shadow); }

/* ---------- buttons: refined proportions (contrast handled by base) ---------- */
.btn { padding: 1rem 2.1rem; letter-spacing: -.01em; border-radius: var(--radius-pill); }

/* ---------- map / forms / footer polish ---------- */
.map-wrap { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3rem); }
.field input, .field textarea, .field select { border-radius: 12px; padding: .95rem 1.05rem; }
.social-links a { box-shadow: var(--shadow-xs); }

/* ---------- subtle, professional motion ---------- */
.card, .btn, .gallery .media, .social-links a { transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease, background .2s ease; }

/* ---------- staggered card cascade (ui-ux-pro-max stagger-sequence) ----------
   When a section reveals, its cards/grid items fade up one after another instead
   of all at once. Progressive: only with JS (html.js) so no-JS keeps them visible;
   disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal .grid > *, html.js .reveal.in .grid > * { will-change: transform; }
  html.js .reveal.in .grid > * { animation: v2rise .6s cubic-bezier(.2,.7,.2,1) both; }
  html.js .reveal .grid > :nth-child(2) { animation-delay: .07s; }
  html.js .reveal .grid > :nth-child(3) { animation-delay: .14s; }
  html.js .reveal .grid > :nth-child(4) { animation-delay: .21s; }
  html.js .reveal .grid > :nth-child(5) { animation-delay: .28s; }
  html.js .reveal .grid > :nth-child(n+6) { animation-delay: .35s; }
}
@keyframes v2rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Mobile: drop the header blur so the fixed slide-in drawer resolves against the
   viewport (a backdrop-filter ancestor would trap it into a broken half panel). */
@media (max-width: 760px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}

/* ---------- extra services (Servizi page + booking multiselect) ---------- */
.service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.service-media { aspect-ratio: 4/3; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-body { padding: 1.1rem 1.2rem 1.3rem; }
.service-body h3 { margin: 0 0 .35rem; }
.service-price { margin: 0 0 .5rem; }
/* min-width:0 so the <fieldset> shrinks below its content min-content on mobile
   (fieldsets default to min-inline-size:min-content → horizontal overflow). */
.booking-services { margin-top: 1.1rem; border: 1px solid var(--border, #e5e0d8); border-radius: var(--radius-lg, 16px); padding: 1rem 1.2rem; min-width: 0; }
.booking-services legend { font-weight: 700; padding: 0 .4rem; }
/* min(230px,100%) so a single narrow column never forces a track wider than the
   container (plain minmax(230px,1fr) overflows on phones < ~260px wide). */
.services-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: .5rem .9rem; }
.service-opt { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; line-height: 1.4; cursor: pointer; }
.service-opt input { margin-top: .2rem; flex: none; }
.service-opt .muted { opacity: .7; }

/* ---------- short brand on mobile (a long full name crowds the hamburger) ---------- */
.brand-short { display: none; }
@media (max-width: 760px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
}

/* brand is a link to home (desktop + mobile) — keep it looking like text */
a.brand { text-decoration: none; cursor: pointer; }

/* breathing room before the stats band (it used to touch the section above) */
.stats { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* ===== aggiunte produzione ===== */
/* lightbox sopra a tutto (era nello stile del banner anteprima) */
[role="dialog"][aria-modal="true"]{z-index:2147483647 !important}
/* mappa Google dietro consenso: facciata cliccabile al posto dell'iframe */
.rest-map{position:relative}
.rest-map__ask{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px;border-radius:inherit;background:var(--surface-2,#221c15);color:var(--ink,#f5efe4);border:1px solid var(--border-strong,rgba(201,162,75,.35))}
.rest-map__ask:hover,.rest-map__ask:focus-visible{border-color:var(--accent,#c9a24b)}
.rest-map__ask:focus-visible{outline:2px solid var(--accent,#c9a24b);outline-offset:2px}
.rest-map__ask .pin{font-size:28px;line-height:1}
.rest-map__ask .lbl{font-weight:600;color:var(--accent-2,#e3c987)}
.rest-map__ask .sub{font-size:13px;color:var(--ink-2,#d4c8b5)}
.rest-map iframe{width:100%;height:100%;min-height:220px;border:0;display:block}

/* ═══ Articoli del blog (tools/genera-articoli.py) ═══ */
.rest-article__crumbs { font-size: 12px; letter-spacing: .08em; color: var(--muted); margin: 0 0 18px; }
.rest-article__crumbs a { color: var(--muted); text-decoration: none; }
.rest-article__crumbs a:hover { color: var(--accent-2); }
.rest-article .rest-blog-page__meta { margin-top: 20px; }
.rest-article__body { max-width: 760px; margin: 0 auto; padding: 48px 24px 24px; }
.rest-article__cover { margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--surface); }
.rest-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rest-article__text h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; color: var(--ink); margin: 44px 0 14px; }
.rest-article__text h2:first-child { margin-top: 0; }
.rest-article__text p { color: var(--ink-2); font-size: 17px; line-height: 1.8; margin: 0 0 16px; }
.rest-article__text strong { color: var(--ink); font-weight: 600; }
.rest-article__text a, .rest-article__related a, .rest-article__more, .rest-blog-page__h a { color: var(--accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rest-blog-page__h a { color: inherit; text-decoration: none; }
.rest-blog-page__h a:hover { color: var(--accent-2); }
.rest-article__related { margin-top: 56px; padding: 28px 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.rest-article__related h2 { font-family: var(--font-body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; margin: 0 0 14px; }
.rest-article__related ul { margin: 0 0 16px; padding-left: 18px; color: var(--ink-2); line-height: 1.9; }
.rest-article__related p { margin: 0; font-size: 14px; }
@media (max-width: 720px) { .rest-article__body { padding: 32px 20px 16px; } .rest-article__text p { font-size: 16px; } .rest-article__related { padding: 22px 20px; } }

/* ═══ Logo testuale: "Volare" in grande e "Ristorante Pizzeria" piccolo sotto, a ogni
   larghezza: il nome in riga veniva tagliato da telefono e sugli schermi medi. ═══ */
.rest-nav__name, .site-header .brand { display: flex; flex-direction: column-reverse; align-items: flex-start; max-width: none !important; overflow: visible; white-space: nowrap; line-height: 1; }
.rest-nav__name .brand-main, .site-header .brand .brand-main { font-size: 28px; letter-spacing: .02em; }
.rest-nav__name .brand-pre, .site-header .brand .brand-pre { font-family: var(--font-body); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-2); margin-top: 5px; }
@media (max-width: 900px) {
  .rest-nav__name .brand-main, .site-header .brand .brand-main { font-size: 26px; }
  .rest-nav__name .brand-pre, .site-header .brand .brand-pre { font-size: 9.5px; margin-top: 4px; }
}

/* Pagine legali, accessibilità e 404: la barra .rest-nav è fissa in alto */
.page-with-nav { padding-top: 96px; }

/* Barra di navigazione: voci sempre su una riga (in tedesco andavano a capo) e,
   sugli schermi medi, spazi e spaziatura delle lettere più stretti. */
.rest-nav__menu a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1360px) {
  .rest-nav__inner { gap: 20px; padding: 0 24px; }
  .rest-nav__menu { gap: 22px; }
  .rest-nav__menu a { letter-spacing: .1em; font-size: 12px; }
  .rest-nav__menu .rest-nav__cta { padding-left: 16px; padding-right: 16px; }
}
/* Menu mobile aperto: sfondo pieno (con il blur della barra, quello al 98% lasciava
   intravedere la pagina sotto). */
@media (max-width: 900px) { .rest-nav__menu { background: #0d0b08; } }

/* Recensioni tradotte: nota della lingua originale (come su Google) */
.rest-reviews__transl { margin: 10px 0 0; font-size: 12px; font-style: italic; color: var(--muted); }
/* "Lascia una recensione" e "Leggi le altre recensioni" affiancati */
.rest-reviews__cta { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.rest-reviews__cta-text { flex: 0 0 100%; }
/* Icone a tratto (Instagram, Tripadvisor): niente riempimento anche dove il CSS dei
   social imposta fill sull'svg */
.social-links a[data-social="ig"] svg, .social-links a[data-social="ta"] svg,
.rest-book__social-list a[data-social="ig"] svg, .rest-book__social-list a[data-social="ta"] svg { fill: none !important; }


/* ═══ Cinese (zh-Hans): font di sistema per gli ideogrammi — PingFang (iPhone/Mac),
   Noto Sans CJK (Android), Microsoft YaHei (Windows) — dopo Playfair/Inter, che
   restano per lettere latine e cifre. Niente corsivo (il cinese non ne ha: il browser
   lo inclinerebbe in modo innaturale), niente spaziatura larga tra le lettere,
   interlinea più ampia. html:lang() batte le variabili :root inline delle pagine. ═══ */
html:lang(zh-Hans) {
  --font-head: 'Playfair Display', "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", serif;
  --font-body: 'Inter', "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", sans-serif;
}
html:lang(zh-Hans) body { font-family: var(--font-body); line-height: 1.8; }
html:lang(zh-Hans) body *:not(.brand-pre) { letter-spacing: 0 !important; }
html:lang(zh-Hans) body * { font-style: normal !important; }
html:lang(zh-Hans) [style*="Playfair"], html:lang(zh-Hans) .rest-menu__sub, html:lang(zh-Hans) .rest-hero__sub,
html:lang(zh-Hans) .rest-blog-page__sub, html:lang(zh-Hans) .rest-fullmenu__sub, html:lang(zh-Hans) .rest-blog-page__lead,
html:lang(zh-Hans) .rest-reviews__text, html:lang(zh-Hans) .rest-reviews__cta-text { font-family: var(--font-body) !important; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2, html:lang(zh-Hans) h3 { line-height: 1.35; }
html:lang(zh-Hans) p, html:lang(zh-Hans) li, html:lang(zh-Hans) .faq-a { line-height: 1.85; }

/* ═══ Russo e polacco: parole lunghe — sillabazione automatica e a capo di sicurezza,
   così titoli, pulsanti e voci di menu non escono dallo schermo del telefono. ═══ */
html:lang(ru) h1, html:lang(ru) h2, html:lang(ru) h3, html:lang(ru) p, html:lang(ru) li, html:lang(ru) .rest-btn,
html:lang(pl) h1, html:lang(pl) h2, html:lang(pl) h3, html:lang(pl) p, html:lang(pl) li, html:lang(pl) .rest-btn {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
@media (max-width: 560px) {
  html:lang(ru) .rest-btn, html:lang(pl) .rest-btn { letter-spacing: .08em; white-space: normal; text-align: center; }
}

/* Selettore lingua con 8 lingue: due colonne invece di una lunga lista; da telefono
   voci più alte (area di tocco di almeno 40px). */
.lang-menu { display: grid !important; grid-template-columns: repeat(2, minmax(52px, 1fr)); min-width: 124px; }
.lang-menu a[lang="zh-Hans"] { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif; }
@media (max-width: 900px) { .lang-menu a { padding: .75rem .6rem; font-size: .9rem; } }

/* Indirizzi email e URL lunghi (note legali): vanno a capo solo se non ci stanno,
   altrimenti da telefono uscivano dal paragrafo. */
.page-with-nav p, .page-with-nav li, .faq-a p { overflow-wrap: anywhere; }

/* Pulsanti dorati: testo scuro sull'oro (8,2:1). Un'altra regola rendeva il testo
   chiaro (2,1:1, sotto il minimo WCAG di 4,5:1 e poco leggibile al sole da telefono). */
.rest-btn.rest-btn--gold, .rest-btn.rest-btn--gold span, .rest-btn.rest-btn--gold svg { color: var(--bg) !important; }

/* ═══ Pulsante flottante "chiama" (tools/social.py) ═══
   Desktop: sopra WhatsApp, in basso a sinistra. Mobile (<=720px): in basso a sinistra,
   mentre WhatsApp e "Prenota" stanno a destra. Sopra il banner cookie come gli altri. */
.call-float {
  position: fixed; left: 20px; bottom: calc(90px + var(--cookie-h, 0px)); z-index: 950;
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg) !important; text-decoration: none;
  box-shadow: 0 10px 28px rgba(201,162,75,.35), 0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s ease, background .2s ease;
}
.call-float:hover { background: var(--accent-2); transform: translateY(-2px); }
.call-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) {
  .call-float { left: 16px; bottom: calc(16px + var(--cookie-h, 0px)); width: 56px; height: 56px; }
}
@media print { .call-float { display: none; } }