/* APPLE-DESIGN reskin — shared tokens + shell + sub-page components. Same
     class names & structure as variant 1, restyled to the fluid-interface
     language (system type + tracking, translucent chrome, soft depth, press
     feedback, spring motion, reduced-motion/transparency). */
  :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;
  }
  body.bb-luxe{
    --bb-ivory:#000000; --bb-sand:#131315; --bb-surface:#1c1c1e;
    --bb-ink:#f5f5f7; --bb-ink-soft:#b4b4bb; --bb-ink-mute:#86868b;
    --bb-gold:#c6a875; --bb-gold-ink:#dcc49a; --bb-gold-soft:#2a2318;
    --bb-forest:#0b0b0c; --bb-border:#38383a; --bb-border-2:#2a2a2c;
    --bb-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.5);
    --bb-shadow:0 8px 26px rgba(0,0,0,.6);
    --bb-shadow-lg:0 30px 64px rgba(0,0,0,.7);
  }
  /* --wch reserves the injected red preview-notice bar height so it never overlaps content */
  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 *{box-sizing:border-box}
  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}
  .bb :where(a){color:inherit}/* :where() azzera la specificità: senza, questa
    regola (0,1,1) batteva il colore dei pulsanti (0,1,0) e il testo restava
    inchiostro su fondo oro — 3,6:1, sotto la soglia AA */
  .bb :focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px;border-radius:8px}
  .bb-skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--bb-ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 12px 0}
  .bb-skip:focus{left:0}
  .bb-wrap{max-width:var(--bb-maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
  .bb-eyebrow{font-family:var(--bb-font-sc);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600;color:var(--bb-gold-ink);display:inline-flex;align-items:center;gap:.6rem;margin:0 0 .9rem}
  .bb-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--bb-gold)}
  .bb-section{padding:clamp(2.4rem,5vw,4rem) 0}
  .bb-section--alt{background:var(--bb-sand)}
  .bb-h2{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.03em;line-height:1.05}
  .bb-lead{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--bb-ink-soft);max-width:64ch;line-height:1.5}

  .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}@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}
  }
  .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)}
  @keyframes bb-brand-in{from{opacity:0}to{opacity:1}}
  .bb-brand{animation:bb-brand-in .5s var(--bb-ease) both}
  @media (prefers-reduced-motion:reduce){.bb-brand{animation:none;opacity:1}}
  .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}
  @media (max-width:560px){.bb-brand__deskonly{display:none}.bb-brand__mobonly{display:inline}}
  .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}
  @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 (prefers-reduced-motion:reduce){.bb-nav__menu{animation:none}}
  .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 .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-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}

  /* page hero (compact, for sub-pages) */
  .bb-phero{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding:clamp(2.8rem,7vw,4.6rem) 0 clamp(2.2rem,5vw,3.4rem)}
  .bb-phero__media{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
  .bb-phero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.46),rgba(10,10,12,.7))}
  .bb-phero h1{font-size:clamp(2rem,5.4vw,3.4rem);font-weight:700;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
  .bb-phero .bb-eyebrow{color:#fff;opacity:.95}.bb-phero .bb-eyebrow::before{background:#fff}
  .bb-phero p{color:#f2f2f5;max-width:60ch;text-shadow:0 1px 10px rgba(0,0,0,.5);margin:.6rem 0 0}
  .bb-crumbs{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.9rem;color:var(--bb-ink-mute);padding:1rem 0 0}
  .bb-crumbs a{color:var(--bb-gold-ink);text-decoration:none;font-weight:500}

  /* generic card grid */
  .bb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
  .bb-card{display:flex;flex-direction:column;background:var(--bb-surface);border:1px solid var(--bb-border-2);border-radius:var(--bb-radius-lg);overflow:hidden;box-shadow:var(--bb-shadow-sm);transition:transform .4s var(--bb-spring),box-shadow .3s var(--bb-ease)}
  .bb-card:hover{transform:translateY(-6px);box-shadow:var(--bb-shadow)}
  .bb-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--bb-sand)}
  .bb-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--bb-ease)}
  .bb-card:hover .bb-card__media img{transform:scale(1.05)}
  .bb-card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
  .bb-card__body h3,.bb-card__body h2{font-size:1.26rem;letter-spacing:-.02em;margin:0 0 .5rem}
  .bb-card__body p{color:var(--bb-ink-soft);font-size:.98rem;margin:0 0 1rem;line-height:1.5}
  .bb-card__foot{margin-top:auto}
  .bb-kicker{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--bb-font-sc);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:600;color:var(--bb-gold-ink);margin-bottom:.5rem}
  .bb-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;color:var(--bb-gold-ink);background:var(--bb-gold-soft);border:1px solid transparent;padding:.32rem .7rem;border-radius:var(--bb-radius-pill)}

  /* empty-state (shown when no auto cards were found — a friendly invite to the
     owner to add their own trips/nearby tips; never a blank page) */
  .bb-empty{max-width:560px;margin:0 auto;text-align:center;background:var(--bb-surface);border:1px dashed var(--bb-border);border-radius:var(--bb-radius-lg);padding:clamp(2rem,5vw,3.4rem) 1.6rem;box-shadow:var(--bb-shadow-sm)}
  .bb-empty__ic{width:64px;height:64px;margin:0 auto 1.1rem;border-radius:50%;background:var(--bb-gold-soft);color:var(--bb-gold-ink);display:flex;align-items:center;justify-content:center;font-size:1.9rem}
  .bb-empty p{color:var(--bb-ink-soft);font-size:1.08rem;line-height:1.6;margin:0 auto;max-width:44ch}

  /* "Portami qui" pill (directions) */
  .bb-dir{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;color:#fff;background:var(--bb-gold);border:0;border-radius:var(--bb-radius-pill);padding:.55rem 1.1rem;text-decoration:none;min-height:42px;transition:transform .3s var(--bb-spring),background .2s}
  .bb-dir:hover{background:var(--bb-gold-ink)}
  .bb-dir:active{transform:scale(.95)}
  .bb-dir svg{width:17px;height:17px}

  /* owner tips */
  .bb-tip{display:flex;flex-direction:column;background:var(--bb-surface);border:1px solid var(--bb-border-2);border-radius:var(--bb-radius-lg);padding:1.5rem 1.6rem;box-shadow:var(--bb-shadow-sm);position:relative;overflow:hidden}
  .bb-tip__media{margin:-1.5rem -1.6rem 1.1rem;overflow:hidden}
  .bb-tip__media .bb-pcar{--pcar-ar:16/10}
  .bb-tip__ic{font-size:1.9rem;line-height:1}
  /* PER-LEAD spacing fix (bnb.extra['ui_mobile_fixes']): the icon and the
     uppercase blue label right under it read as cramped/touching. Adds a
     small gap; no-op for every other lead. */
  .bb-tip__ic{margin-bottom:.55rem}
  .bb-tip h3,.bb-tip h2{font-size:1.18rem;letter-spacing:-.02em;margin:.6rem 0 .3rem}
  .bb-tip .lbl{font-family:var(--bb-font-sc);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:600;color:var(--bb-gold-ink)}
  .bb-tip p{color:var(--bb-ink);font-size:1rem;margin:.5rem 0 0;line-height:1.55}
  .bb-tip .by{margin-top:.8rem;font-size:.85rem;color:var(--bb-ink-mute)}
  .bb-tip__acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem}
  /* "Prenota" (call) — outlined pill, sibling of the gold "Portami qui" bb-dir */
  .bb-call{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;color:var(--bb-gold-ink);background:transparent;border:1.5px solid var(--bb-gold);border-radius:var(--bb-radius-pill);padding:.55rem 1.1rem;text-decoration:none;min-height:42px;text-transform:uppercase;letter-spacing:.03em;transition:transform .3s var(--bb-spring),background .2s,color .2s}
  .bb-call:hover{background:var(--bb-gold);color:#fff}
  .bb-call:active{transform:scale(.95)}
  .bb-call svg{width:17px;height:17px}

  /* perks */
  .bb-perk{display:flex;gap:1rem;align-items:flex-start;background:var(--bb-surface);border:1px solid var(--bb-border-2);border-radius:var(--bb-radius);padding:1.3rem 1.4rem;box-shadow:var(--bb-shadow-sm)}
  .bb-perk__badge{flex:0 0 auto;min-width:64px;height:64px;border-radius:16px;background:linear-gradient(150deg,var(--bb-gold),var(--bb-gold-ink));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--bb-font-head);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;text-align:center;padding:.3rem;line-height:1.05}
  .bb-perk h3,.bb-perk h2{font-size:1.1rem;letter-spacing:-.01em;margin:0 0 .25rem}
  .bb-perk p{color:var(--bb-ink-soft);font-size:.95rem;margin:0;line-height:1.5}
  .bb-perk small{color:var(--bb-ink-mute);font-size:.82rem}
  .bb-perk__badge--disc{font-size:1.28rem;font-weight:800;letter-spacing:-.03em}
  .bb-perk--ph{border-style:dashed;border-color:var(--bb-border);background:var(--bb-ivory,var(--bb-surface))}
  .bb-perk--ph h3,.bb-perk--ph h2{font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bb-gold-ink)}

  /* emergency numbers */
  .bb-emg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
  .bb-emg{display:flex;align-items:center;gap:.8rem;min-width:0;background:var(--bb-surface);border:1px solid var(--bb-border-2);border-left:3px solid var(--bb-gold);border-radius:var(--bb-radius);padding:1rem 1.15rem;text-decoration:none;color:var(--bb-ink);box-shadow:var(--bb-shadow-sm);transition:transform .34s var(--bb-spring),box-shadow .3s var(--bb-ease)}
  .bb-emg:hover{transform:translateY(-3px);box-shadow:var(--bb-shadow)}
  .bb-emg:active{transform:scale(.98)}
  .bb-emg--sos{border-left-color:#d0342c}
  /* DESKTOP: number sits on ONE line beside the label (horizontal). It must never
     break per-character (the old word-break/overflow-wrap made "112" stack as
     1/1/2 vertically inside a narrow card) → keep it nowrap and don't let it
     shrink; a moderate clamp keeps even long numbers (116117) on one line. */
  .bb-emg__num{flex:0 0 auto;font-family:var(--bb-font-head);font-weight:700;font-size:clamp(1.15rem,.85rem + .6vw,1.5rem);line-height:1.05;color:var(--bb-gold-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .bb-emg--sos .bb-emg__num{color:#d0342c}
  .bb-emg__t{flex:1 1 auto;min-width:0}
  /* labels wrap by whole words (no mid-word character breaks); a truly long token
     is the rare exception and may break to avoid horizontal overflow. */
  .bb-emg__t b{display:block;font-weight:600;font-size:.95rem;line-height:1.25;overflow-wrap:break-word}
  .bb-emg__t span{display:block;color:var(--bb-ink-mute);font-size:.84rem;line-height:1.3;overflow-wrap:break-word}
  /* Mobile ≤560: stack the number ABOVE the label so a long number gets the full
     card width; there it may wrap (word/anywhere) as a last resort, never cut. */
  @media (max-width:560px){
    .bb-emg{flex-direction:column;align-items:flex-start;gap:.3rem}
    .bb-emg__num{font-size:clamp(1.5rem,7vw,1.9rem);white-space:normal;overflow-wrap:anywhere}
  }
  .bb-svc{display:flex;flex-direction:column;background:var(--bb-surface);border:1px solid var(--bb-border-2);border-radius:var(--bb-radius-lg);padding:1.4rem 1.5rem;box-shadow:var(--bb-shadow-sm)}
  .bb-svc h3,.bb-svc h2{font-size:1.12rem;letter-spacing:-.01em;margin:.4rem 0 .2rem}
  .bb-svc .cat{font-family:var(--bb-font-sc);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:600;color:var(--bb-gold-ink)}
  .bb-svc p{color:var(--bb-ink-soft);font-size:.94rem;margin:.2rem 0 .9rem;line-height:1.5}
  .bb-svc__foot{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
  .bb-svc__tel{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:#fff;background:var(--bb-gold);border-radius:var(--bb-radius-pill);padding:.55rem 1.1rem;text-decoration:none;min-height:42px;transition:transform .3s var(--bb-spring),background .2s}
  .bb-svc__tel:hover{background:var(--bb-gold-ink)}
  .bb-svc__tel:active{transform:scale(.95)}

  /* video carousel */
  .bb-vid__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bb-vid__track::-webkit-scrollbar{display:none}
  .bb-vid{scroll-snap-align:start;flex:0 0 clamp(260px,60vw,440px);position:relative;border-radius:var(--bb-radius-lg);overflow:hidden;box-shadow:var(--bb-shadow-sm);aspect-ratio:16/10;background:#0b0b0c}
  .bb-vid video,.bb-vid img.ph{width:100%;height:100%;object-fit:cover;display:block}
  .bb-vid__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none}
  .bb-vid__play::after{content:"";margin-left:4px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--bb-gold)}
  .bb-vid__cap{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;color:#fff;font-weight:600;font-size:.92rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76))}
  .bb-vid__tag{position:absolute;top:.7rem;left:.7rem;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.25rem .6rem;border-radius:var(--bb-radius-pill)}

  /* photo carousel (cards + guest book): swipe + glass arrows + dots + click-to-zoom */
  .bb-pcar{position:relative;overflow:hidden;aspect-ratio:var(--pcar-ar,16/10);background:var(--bb-sand)}
  .bb-pcar__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bb-pcar__track::-webkit-scrollbar{display:none}
  .bb-pcar__slide{flex:0 0 100%;width:100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
  .bb-pcar__slide button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
  .bb-pcar__slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--bb-ease)}
  .bb-pcar--contain{background:#111214}
  .bb-pcar--contain .bb-pcar__slide img{object-fit:contain}
  .bb-pcar__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.6);color:var(--bb-ink);
    backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
    cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s var(--bb-spring),background .2s}
  .bb-pcar__nav:hover{background:rgba(255,255,255,.85)}
  .bb-pcar__nav:active{transform:translateY(-50%) scale(.9)}
  .bb-pcar__nav--prev{left:8px}.bb-pcar__nav--next{right:8px}
  .bb-pcar__nav.is-hidden{opacity:0;pointer-events:none}
  .bb-pcar__dots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:6px;justify-content:center;z-index:2}
  .bb-pcar__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer;transition:transform .3s var(--bb-spring),background .2s}
  .bb-pcar__dot.is-active{background:#fff;transform:scale(1.35)}

  /* lightbox — shared with the home gallery (materialize + dim) */
  .bb-lb{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
    z-index:210;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--bb-ease)}
  .bb-lb.is-open{display:flex;opacity:1}
  .bb-lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.94);transition:transform .45s var(--bb-spring)}
  .bb-lb.is-open img{transform:scale(1)}
  .bb-lb__btn{position:absolute;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s var(--bb-spring),background .2s}
  .bb-lb__btn:hover{background:rgba(255,255,255,.28)}
  .bb-lb__btn:active{transform:scale(.9)}
  .bb-lb__close{top:20px;right:20px}
  .bb-lb__prev,.bb-lb__next{top:50%;transform:translateY(-50%)}.bb-lb__prev{left:18px}.bb-lb__next{right:18px}
  .bb-lb__prev:active,.bb-lb__next:active{transform:translateY(-50%) scale(.9)}
  .bb-lb__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#f5f5f7;font-weight:500;font-variant-numeric:tabular-nums}
  @media (prefers-reduced-transparency:reduce){.bb-lb{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.9)}}

  /* guest-book carousel (large, LANDSCAPE so the handwritten pages are readable) */
  .bb-gbook{max-width:900px;margin:0 auto}
  .bb-gbook .bb-pcar{--pcar-ar:3/2;border-radius:var(--bb-radius-lg);box-shadow:var(--bb-shadow)}
  @media (min-width:720px){.bb-gbook .bb-pcar{--pcar-ar:16/10}}

  /* blog article */
  .bb-article{max-width:760px;margin:0 auto}
  .bb-article__hero{border-radius:var(--bb-radius-lg);overflow:hidden;box-shadow:var(--bb-shadow);margin:0 0 1.6rem}
  .bb-article__hero img{width:100%;aspect-ratio:16/8;object-fit:cover}
  .bb-article p{color:var(--bb-ink-soft);line-height:1.7;font-size:1.08rem}
  .bb-article h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em;margin:2rem 0 .8rem}
  .bb-dish{display:flex;gap:1.1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--bb-border-2)}
  .bb-dish__n{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bb-gold-soft);color:var(--bb-gold-ink);display:flex;align-items:center;justify-content:center;font-family:var(--bb-font-head);font-weight:700}
  .bb-dish h3,.bb-dish h2{font-size:1.15rem;letter-spacing:-.01em;margin:0 0 .2rem}
  .bb-dish p{margin:0;font-size:.98rem}
  /* per-dish photo (opt-in, per-lead) + course tag */
  .bb-dish__media{flex:0 0 auto;width:128px;height:96px;border-radius:var(--bb-radius);overflow:hidden;box-shadow:var(--bb-shadow-sm);background:var(--bb-sand)}
  .bb-dish__media img{width:100%;height:100%;object-fit:cover;display:block}
  .bb-dish__txt{flex:1 1 auto;min-width:0}
  .bb-dish__course{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bb-gold-ink);background:var(--bb-gold-soft);border-radius:var(--bb-radius-pill);padding:.12rem .6rem;vertical-align:middle;margin-left:.45rem}
  /* default mobile behaviour for EVERY lead with dish photos: keep the small
     side-by-side thumbnail (unchanged since before this Nemi round). */
  @media (max-width:560px){.bb-dish__media{width:92px;height:74px}}
  /* PER-LEAD mobile bugfix (bnb.extra['ui_mobile_fixes'], e.g. "Cosa
     mangiare a Nemi"): the small side-by-side thumbnail above still cramped
     the layout on narrow screens for THIS lead's longer dish notes. Stack
     instead — photo full-width on its own row, number badge + name/
     description below. Overrides just the two properties above (order/
     width/height/aspect-ratio/margin) for this lead; every other lead keeps
     the small-thumbnail rule unchanged. No visual change on desktop
     (>560px) either way. */
  @media (max-width:560px){
    .bb-dish{flex-wrap:wrap}
    .bb-dish__media{order:-1;flex:0 0 100%;width:100%;height:auto;aspect-ratio:16/9;margin-bottom:.5rem}
  }
  .bb-figrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
  .bb-figrow figure{margin:0;border-radius:var(--bb-radius);overflow:hidden;box-shadow:var(--bb-shadow-sm);background:var(--bb-sand)}
  .bb-figrow img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .bb-figrow figcaption{font-size:.78rem;color:var(--bb-ink-mute);padding:.5rem .7rem;background:var(--bb-surface)}
  @media (max-width:560px){.bb-figrow{grid-template-columns:1fr}}

  /* best-price banner */
  .bb-bestprice{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center;text-align:center;background:var(--bb-forest);color:#f5f5f7;border-radius:var(--bb-radius);padding:.9rem 1.2rem;box-shadow:var(--bb-shadow-sm)}
  .bb-bestprice svg{width:24px;height:24px;flex:0 0 auto;color:var(--bb-gold-soft)}
  .bb-bestprice b{color:#fff}
  .bb-bp-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);padding:.5rem 1rem;border-radius:var(--bb-radius-pill);font-weight:500;color:#fff;font-size:.9rem}
  .bb-bp-badge svg{width:18px;height:18px;color:var(--bb-gold-soft)}

  /* seguici / follow */
  .bb-follow{text-align:center}
  .bb-follow__btns{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}
  .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)}

  /* preview popup modal — sheet-style, materialize */
  .bb-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);padding:1.2rem;opacity:0;transition:opacity .28s var(--bb-ease)}
  .bb-modal.is-open{display:flex;opacity:1}
  .bb-modal__box{background:color-mix(in srgb,var(--bb-surface) 88%,transparent);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--bb-border-2);border-radius:var(--bb-radius-lg);box-shadow:var(--bb-shadow-lg);max-width:420px;width:100%;padding:1.9rem 1.7rem;text-align:center;transform:scale(.92);transition:transform .42s var(--bb-spring)}
  .bb-modal.is-open .bb-modal__box{transform:scale(1)}
  .bb-modal__ic{width:52px;height:52px;border-radius:50%;background:var(--bb-gold-soft);color:var(--bb-gold-ink);display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;font-size:1.5rem}
  .bb-modal__box p{color:var(--bb-ink-soft);margin:0 0 1.3rem;line-height:1.55}

  .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 .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--bb-ease),transform .7s var(--bb-spring)}
  .bb .reveal.in{opacity:1;transform:none}
  html:not(.js) .bb .reveal{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.bb .reveal{transition:opacity .4s ease;transform:none}
    .bb-card:hover,.bb-emg:hover,.bb-room:hover{transform: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}
    .bb-modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.82)}
  }

  @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){body.bb{font-size:16px}.bb-brand{font-size:1.12rem;max-width:56vw}}
  /* 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)}