/* menu uniformato alle altre pagine (2026-09-16):
     solo le regole della shell, senza toccare il corpo della pagina */
  .bb *{box-sizing:border-box}
  /* i pulsanti legacy usavano il serif del vecchio tema: allineati al resto */
  .bb .btn,.bb .review-cta{font-family:var(--bb-font-body);letter-spacing:-.01em}

  /* tipografia e colori del corpo, come sulle altre pagine. Escluso di proposito
     `.bb :where(a){color:inherit}`: qui i link del testo prendono il colore da
     styles.css ed è quello che garantisce il contrasto AA verificato. */
  body.bb{margin:0;padding-top:var(--wch,0px);background:var(--bb-ivory);color:var(--bb-ink);
    font-family:var(--bb-font-body);font-size:17px;line-height:1.6;letter-spacing:-.003em;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body.bb img{max-width:100%;display:block}
  .bb h1,.bb h2,.bb h3,.bb h4{font-family:var(--bb-font-head);font-weight:700;
    color:var(--bb-ink);line-height:1.08;letter-spacing:-.022em;margin:0;font-optical-sizing:auto}
  .bb p{margin:0 0 1rem}

  /* footer e corpo pagina uniformati al resto del sito (2026-09-16) */
  .bb-footer{background:var(--bb-footer-bg);color:#e8e8ea;padding:clamp(2.6rem,6vw,4rem) 0 2.4rem;text-align:center}
  .bb-footer__brand{font-family:var(--bb-font-head);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;color:#fff;margin:0 0 .3rem}
  .bb-footer a{color:var(--bb-gold-soft)}
  .bb-footer__row{color:#a1a1a6;font-size:.95rem;margin:.25rem 0}
  .bb-footer__legal{color:#86868b;font-size:.88rem;margin-top:1rem}
  .bb-footer__legal a{color:#a1a1a6}
  .bb-footer__by{color:#86868b;font-size:.86rem;margin-top:.6rem}
  .bb-footer__by a{color:var(--bb-gold-soft);font-weight:600}
  .bb-footer__demo{color:#6e6e73;font-size:.8rem;margin-top:.4rem}
  .bb-soc{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:var(--bb-radius-pill);font-weight:600;text-decoration:none;color:#fff;min-height:48px;border:0;cursor:pointer;font-family:inherit;font-size:1rem;transition:transform .3s var(--bb-spring),box-shadow .25s}
  .bb-soc:hover{box-shadow:var(--bb-shadow)}
  .bb-soc:active{transform:scale(.96)}
  .bb-soc--g{background:#1a73e8}
  .bb-soc--f{background:#1668d8}
  .bb-soc--i{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}

  /* selettore di lingua: i suoi selettori iniziano con ".bb ", non con una classe
     della shell, quindi il porting li aveva saltati e ricadeva sullo stile vecchio */
  .bb .lang-switch{position:relative}
  .bb .lang-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.4rem .8rem;border:1px solid var(--bb-border);border-radius:var(--bb-radius-pill);background:color-mix(in srgb,var(--bb-surface) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--bb-ink);font-weight:600;font-size:.9rem;transition:transform .3s var(--bb-spring),border-color .2s}
  .bb .lang-switch>summary:active{transform:scale(.95)}
  .bb .lang-switch>summary::-webkit-details-marker{display:none}
  .bb .lang-switch[open]>summary{border-color:var(--bb-gold)}
  .bb .lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:color-mix(in srgb,var(--bb-surface) 82%,transparent);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--bb-border);border-radius:14px;box-shadow:var(--bb-shadow-lg);padding:.35rem;display:flex;flex-direction:column;min-width:76px;z-index:95;transform-origin:top right}
  .bb .lang-menu a{padding:.5rem .7rem;border-radius:9px;text-decoration:none;font-weight:600;color:var(--bb-ink-soft);font-size:.9rem;transition:background .18s,color .18s}
  .bb .lang-menu a:hover,.bb .lang-menu a.active{background:var(--bb-gold-soft);color:var(--bb-gold-ink)}
  .bb .lang-caret{transition:transform .3s var(--bb-spring)}
  .bb .lang-switch[open] .lang-caret{transform:rotate(180deg)}
  .bb .lang-switch>summary,.bb .lang-menu,.bb-burger{background:var(--bb-surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  @keyframes bb-brand-in{from{opacity:0}to{opacity:1}}
  @keyframes bb-menu-in{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  @media (max-width:560px){.bb{font-size:16px}}
  /* tipografia della shell: sulle pagine "bb" arriva da body.bb, che qui non
     copiamo per non ridipingere il corpo pagina. La applichiamo al contenitore. */
  .bb{font-family:var(--bb-font-body);font-size:17px;line-height:1.6;
    letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  /* La vecchia header galleggiava sopra la foto, quindi l'hero veniva tirato su
     di 64-68px. Quella nuova sta nel flusso: l'offset va annullato, altrimenti
     il titolo finisce sotto la barra. */
  .hero,.hero--small{margin-top:0}
  :root{
    --bb-ivory:#fbfbfd; --bb-sand:#f5f5f7; --bb-surface:#ffffff;
    --bb-ink:#1d1d1f; --bb-ink-soft:#4b4b4f; --bb-ink-mute:#6e6e73;
    --bb-gold:#8d7047; --bb-gold-ink:#6f5833; --bb-gold-soft:#f3ece1;
    --bb-forest:#1d1d1f; --bb-border:#d2d2d7; --bb-border-2:#e6e6eb;
    --bb-shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.05);
    --bb-shadow:0 6px 22px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
    --bb-shadow-lg:0 22px 52px rgba(0,0,0,.16),0 8px 20px rgba(0,0,0,.08);
    --bb-radius:18px; --bb-radius-lg:26px; --bb-radius-pill:980px;
    --bb-maxw:1120px;
    --bb-font-head:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --bb-font-sc:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
    --bb-font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --bb-ease:cubic-bezier(.4,0,.2,1);
    --bb-spring:cubic-bezier(.34,1.4,.5,1);
    /* Footer background is ALWAYS dark (in both the light theme and the
       "luxe" dark variant) — kept as its own token instead of reusing
       --bb-ink, which flips to a LIGHT value in .bb-luxe (it means
       "foreground ink" there) and used to make the footer render as
       light-on-light. Same value as the light theme's --bb-ink, so every
       lead NOT using luxe_dark is byte-identical. */
    --bb-footer-bg:#1d1d1f;
  }
  .bb-wrap{max-width:var(--bb-maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
  .bb-btn{--_bg:var(--bb-gold);display:inline-flex;align-items:center;gap:.55rem;justify-content:center;min-height:48px;padding:.82rem 1.6rem;border-radius:var(--bb-radius-pill);font-family:var(--bb-font-body);font-weight:600;font-size:1rem;letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .34s var(--bb-spring),box-shadow .3s var(--bb-ease),background .25s var(--bb-ease),color .25s var(--bb-ease);white-space:nowrap}
  /* icons inside a button need an intrinsic size — an inline <svg> with only a
     viewBox (no width/height) defaults to ~300x150 and blows the button up. */
  .bb-btn svg{flex:0 0 auto;width:1.1em;height:1.1em}
  .bb-btn--gold{background:var(--_bg);color:#fff;box-shadow:0 1px 2px rgba(141,112,71,.28),0 8px 22px rgba(141,112,71,.24)}
  .bb-btn--gold:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(141,112,71,.32),0 14px 30px rgba(141,112,71,.3)}
  .bb-btn--gold:active{transform:scale(.965);transition-duration:.09s}
  .bb-btn--ghost{background:transparent;color:var(--bb-gold-ink);border-color:var(--bb-border)}
  .bb-btn--ghost:hover{border-color:var(--bb-gold);background:var(--bb-gold-soft)}
  .bb-btn--ghost:active{transform:scale(.965);transition-duration:.09s}
  .bb-btn--wa{background:transparent;color:var(--bb-gold-ink);border-color:var(--bb-gold)}
  /* sulle foto scure dell'hero il contorno resta bianco, come gli altri pulsanti */
  .bb-hero .bb-btn--wa,.bb-phero .bb-btn--wa,.bb-svc-hero .bb-btn--wa{background:rgba(255,255,255,.14);
    color:#fff;border-color:rgba(255,255,255,.55)}
  .bb-btn--wa:hover{background:var(--bb-gold);color:#fff;border-color:var(--bb-gold)}
  .bb-hero .bb-btn--wa:hover,.bb-phero .bb-btn--wa:hover,.bb-svc-hero .bb-btn--wa:hover{
    background:rgba(255,255,255,.26);color:#fff;border-color:rgba(255,255,255,.75)}
  .bb-btn--wa:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,211,102,.32)}
  .bb-btn--wa:active{transform:scale(.965);transition-duration:.09s}
  .bb-btn--sm{min-height:42px;padding:.6rem 1.2rem;font-size:.92rem}
  .bb-topbar{background:var(--bb-ink);color:#f0f0f2;font-size:.84rem;letter-spacing:-.005em}
  .bb-topbar .bb-wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:center;padding-top:.5rem;padding-bottom:.5rem}
  .bb-topbar a{color:#f0f0f2;text-decoration:none}
  .bb-topbar a:hover{color:#fff;text-decoration:underline}
  .bb-topbar span{display:inline-flex;align-items:center;gap:.4rem}
  .bb-header{position:sticky;top:var(--wch,0px);z-index:90;background:color-mix(in srgb,var(--bb-ivory) 72%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 var(--bb-border-2);transition:box-shadow .3s var(--bb-ease),background .3s var(--bb-ease)}
  .bb-header.is-scrolled{box-shadow:inset 0 -1px 0 var(--bb-border-2),0 4px 20px rgba(0,0,0,.06);background:color-mix(in srgb,var(--bb-ivory) 88%,transparent)}
  .bb-header__inner{display:flex;align-items:center;gap:.7rem;min-height:66px;padding-top:.5rem;padding-bottom:.5rem}
  .bb-brand{flex:0 0 auto;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--bb-font-head);font-weight:600;font-size:1.24rem;letter-spacing:-.02em;color:var(--bb-ink);line-height:1.05;max-width:min(46vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .3s var(--bb-spring)}
  .bb-brand{animation:bb-brand-in .5s var(--bb-ease) both}
  .bb-brand:active{transform:scale(.97)}
  .bb-brand__mark{width:32px;height:32px;flex:0 0 auto;color:var(--bb-gold-ink)}
  /* round 8 (OPT-IN, ``section_label`` arg only): small sub-line under the
     brand name (e.g. "Ristorante"/"Locanda") — no other B&B page passes
     this, so ``.bb-brand__text`` is never rendered there. */
  .bb-brand__text{display:flex;flex-direction:column;line-height:1.15;overflow:hidden}
  .bb-brand__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bb-brand__sub{font-family:var(--bb-font-sc);font-size:.66rem;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--bb-gold-ink);opacity:.85}
  /* round 11 (OPT-IN, ``bnb.extra['brand_mobile']`` only): full brand on desktop,
     shorter one on mobile. Absent → neither span is emitted, brand unchanged. */
  .bb-brand__mobonly{display:none}
  .bb-nav{margin-left:1.2rem;display:flex;gap:.05rem;align-items:center}
  .bb-nav a{font-weight:500;font-size:.9rem;letter-spacing:-.01em;color:var(--bb-ink-soft);text-decoration:none;white-space:nowrap;padding:.46rem .58rem;border-radius:10px;transition:color .2s,background .2s,transform .2s var(--bb-spring)}
  .bb-nav a:hover,.bb-nav a[aria-current]{color:var(--bb-ink);background:color-mix(in srgb,var(--bb-ink) 6%,transparent)}
  .bb-nav a:active{transform:scale(.94)}
  .bb-nav__grp{position:relative}
  .bb-nav__grp>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-weight:500;font-size:.9rem;letter-spacing:-.01em;color:var(--bb-ink-soft);padding:.46rem .58rem;border-radius:10px;transition:color .2s,background .2s,transform .2s var(--bb-spring)}
  .bb-nav__grp>summary::-webkit-details-marker{display:none}
  .bb-nav__grp>summary:hover{color:var(--bb-ink);background:color-mix(in srgb,var(--bb-ink) 6%,transparent)}
  .bb-nav__grp>summary:active{transform:scale(.94)}
  .bb-nav__caret{transition:transform .3s var(--bb-spring)}
  .bb-nav__grp[open] .bb-nav__caret{transform:rotate(180deg)}
  .bb-nav__menu{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:212px;background:color-mix(in srgb,var(--bb-surface) 82%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--bb-border-2);border-radius:16px;box-shadow:var(--bb-shadow-lg);padding:.4rem;display:flex;flex-direction:column;gap:.05rem;z-index:95;transform-origin:top center;animation:bb-menu-in .28s var(--bb-spring) both}
  .bb-nav__menu a{padding:.6rem .8rem;border-radius:10px;text-decoration:none;font-weight:500;font-size:.94rem;color:var(--bb-ink-soft);white-space:nowrap;transition:background .18s,color .18s,transform .2s var(--bb-spring)}
  .bb-nav__menu a:hover,.bb-nav__menu a[aria-current]{background:var(--bb-gold-soft);color:var(--bb-gold-ink)}
  .bb-nav__menu a:active{transform:scale(.97)}
  .bb-header__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
  .bb-nav-cta{margin-left:.3rem}
  .bb-burger{display:none;width:44px;height:44px;border:1px solid var(--bb-border);background:color-mix(in srgb,var(--bb-surface) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:transform .3s var(--bb-spring)}
  .bb-burger:active{transform:scale(.92)}
  .bb-burger span{display:block;width:19px;height:2px;background:var(--bb-ink);border-radius:2px}
  .bb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:opacity .35s var(--bb-ease),visibility .35s;z-index:98;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .bb-backdrop.is-open{opacity:1;visibility:visible}
  .bb-drawer{position:fixed;top:var(--wch,0px);right:0;height:100%;height:calc(100dvh - var(--wch,0px));width:min(86vw,360px);background:color-mix(in srgb,var(--bb-surface) 78%,transparent);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);z-index:99;box-shadow:var(--bb-shadow-lg);border-left:1px solid var(--bb-border-2);transform:translateX(100%);transition:transform .5s var(--bb-spring);display:flex;flex-direction:column;padding:1.2rem}
  .bb-drawer.is-open{transform:translateX(0)}
  .bb-drawer__top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
  .bb-drawer__brand{font-family:var(--bb-font-head);font-weight:600;font-size:1.18rem;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
  .bb-drawer__close{width:44px;height:44px;border:1px solid var(--bb-border);background:var(--bb-surface);border-radius:12px;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--bb-ink);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--bb-spring)}
  .bb-drawer__close:active{transform:scale(.9)}
  /* the nav list scrolls INSIDE the drawer (full height) so all items — incl. an
     expanded "La zona" — are reachable and the page underneath never scrolls
     (overscroll-behavior:contain stops the scroll bleed on touch). Same as index. */
  .bb-drawer nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:.1rem}
  .bb-drawer nav a{padding:.85rem .7rem;border-radius:12px;text-decoration:none;font-weight:500;font-size:1.05rem;letter-spacing:-.01em;color:var(--bb-ink);border-bottom:1px solid var(--bb-border-2);transition:background .18s,transform .2s var(--bb-spring)}
  .bb-drawer nav a:hover{color:var(--bb-gold-ink)}
  .bb-drawer nav a:active{transform:scale(.97)}
  .bb-drawer__grp{border-bottom:1px solid var(--bb-border-2)}
  .bb-drawer__grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:.85rem .7rem;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--bb-ink)}
  .bb-drawer__grp>summary::-webkit-details-marker{display:none}
  .bb-drawer__grp>summary svg{transition:transform .3s var(--bb-spring);color:var(--bb-ink-mute)}
  .bb-drawer__grp[open]>summary svg{transform:rotate(180deg)}
  .bb-drawer__sub{display:flex;flex-direction:column;padding:0 0 .5rem .8rem}
  .bb-drawer__sub a{padding:.7rem .7rem;border-radius:10px;text-decoration:none;font-weight:500;font-size:1rem;letter-spacing:-.01em;color:var(--bb-ink-soft);transition:background .18s,color .18s,transform .2s var(--bb-spring)}
  .bb-drawer__sub a:hover{color:var(--bb-gold-ink)}
  .bb-drawer__sub a:active{transform:scale(.97)}
  .bb-drawer .bb-btn{flex:0 0 auto;margin-top:1.1rem}
  /* PER-LEAD fix (bnb.extra['dual_entity'] OR ['opaque_nav_menu'] — every other
     B&B keeps the default translucent dropdown untouched): the "La zona" nav
     dropdown (``.bb-nav__menu``, shared by every apple B&B page — home/
     ristorante/locanda AND the "La zona" sub-pages, since they all render
     through this SAME macro) reads as glassy/see-through over a busy
     background on some pages of this site (client feedback, dual_entity round
     7; reused verbatim for the Nemi lead's own readability feedback). Force a
     fully opaque surface instead of the default translucent blend, everywhere
     on this one lead's site. */
  .bb-nav__menu{background:var(--bb-surface)}
  @media (max-width:560px){.bb-topbar{font-size:.72rem}.bb-topbar .bb-wrap{gap:.22rem .7rem;padding-top:.32rem;padding-bottom:.32rem}.bb-topbar span{gap:.28rem}}
  @media (prefers-reduced-motion:reduce){.bb-brand{animation:none;opacity:1}}
  @media (max-width:560px){.bb-brand__deskonly{display:none}.bb-brand__mobonly{display:inline}}
  @media (prefers-reduced-motion:reduce){.bb-nav__menu{animation:none}}
  @media (prefers-reduced-transparency:reduce){.bb-header,.bb-drawer,.bb-modal__box,.bb .lang-switch>summary,.bb .lang-menu,.bb-burger{background:var(--bb-surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
  @media (max-width:1080px){.bb-nav{display:none}.bb-nav-cta{display:none}.bb-burger{display:flex;order:3}.bb-header__actions .lang-switch{order:2}}
  @media (max-width:560px){.bb-brand{font-size:1.12rem;max-width:56vw}}