/* Prova floating product bar (v10), after the apple.com floating product bar: a rounded, inset, dark-glass bar
   with the product name on the left, the section links in the middle on desktop and two pills on the right.
   Used by s1.html and n1.html (the local nav floats once the hero is scrolled past; phones get the same pill at
   the bottom, restyling .rbar) and by the homepage S1 panel (.fbar, static). Loads after the page stylesheets.
   S1 accent violet, N1 accent plum (body.n1). No pink. Motion is transform/opacity only. */
:root{
  --fb-bg:rgba(22,22,24,.72);--fb-line:rgba(255,255,255,.08);--fb-r:18px;--fb-h:52px;--fb-in:16px;--fb-max:1180px;
  --fb-shadow:0 18px 44px -20px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.3);
  --fb-acc:#6d5df6;--fb-acc-h:#7f71ff;--fb-ring:#b8a8ff;--fb-ease:cubic-bezier(.22,.61,.36,1)
}
.n1{--fb-acc:#6e3a6c;--fb-acc-h:#7d4a7b;--fb-ring:#c7a3cf}

/* ---------- Static bar (homepage S1 panel) ---------- */
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--fb-h);padding:0 9px 0 20px;border-radius:var(--fb-r);
  background:var(--fb-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 0 0 1px var(--fb-line),var(--fb-shadow);color:#f5f5f7;letter-spacing:0}
.fbar-name{font-size:18px;line-height:1;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.fbar-acts{display:flex;align-items:center;gap:8px}
.fbar-pill{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:999px;font-size:14px;line-height:1;font-weight:500;letter-spacing:0;white-space:nowrap;
  transition:background-color .2s,box-shadow .2s}
.fbar-quiet{color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.fbar-quiet:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.fbar-buy{background:var(--fb-acc);color:#fff}
.fbar-buy:hover{background:var(--fb-acc-h)}
.fbar a:focus-visible,.l-nav a:focus-visible,.rbar a:focus-visible{outline:2px solid var(--fb-ring);outline-offset:2px;border-radius:999px}

/* ---------- Local nav pills (header state and floating state) ---------- */
.l-acts{display:flex;align-items:center;gap:10px}
.l-quiet{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:#f5f5f7;font-weight:500;font-size:12px;
  transition:background-color .2s,box-shadow .2s}
.l-quiet:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.l-links a.l-quiet::after{content:none}

/* ---------- Desktop: the local nav floats once the hero is scrolled past (float-bar.js sets .fl / .fb-off) ----------
   .l-nav stays sticky at top:0 with its 52 px in the flow, so nothing below shifts; only its inner row turns into the
   inset glass bar. The outer strip goes transparent and lets clicks through around the bar. */
@media (min-width:735px){
  .l-nav{transition:background-color .3s,border-color .3s}
  .l-nav.fl{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  .l-nav.fl .l-in{pointer-events:auto;position:relative;top:12px;width:min(var(--fb-max),calc(100% - 2 * var(--fb-in)));height:var(--fb-h);padding:0 9px 0 22px;border-radius:var(--fb-r);
    background:var(--fb-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    box-shadow:inset 0 0 0 1px var(--fb-line),var(--fb-shadow);animation:fb-drop .6s var(--fb-ease) both}
  .l-nav.fl .l-title b{font-size:18px}
  .l-nav.fl .l-links{flex:1;min-width:0;font-size:13px}
  .l-nav.fl .l-links>a:first-child{margin-left:auto}
  .l-nav.fl .l-acts{margin-left:auto;gap:8px}
  .l-nav.fl .l-quiet,.l-nav.fl .l-buy{height:34px;padding:0 16px;font-size:14px}
  .l-nav.fl .l-links a.on:not(.l-buy)::after{bottom:-9px}
  /* steps aside while the reservation form is on screen */
  .l-nav.fl.fb-off .l-in{opacity:0;transform:translateY(-14px);visibility:hidden;animation:none;
    transition:opacity .3s var(--fb-ease),transform .45s var(--fb-ease),visibility 0s .45s}
}
@keyframes fb-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---------- Phones: the same floating pill at the bottom (replaces the full-width reserve bar) ---------- */
@media (max-width:734px){
  .rbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:var(--fb-h);padding:0 8px 0 20px;border-radius:var(--fb-r);
    background:var(--fb-bg);box-shadow:inset 0 0 0 1px var(--fb-line),var(--fb-shadow);
    opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s var(--fb-ease),transform .5s var(--fb-ease),visibility 0s .5s}
  .rbar.show{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--fb-ease),transform .5s var(--fb-ease),visibility 0s}
  .rbar b{font-size:18px;line-height:1;font-weight:600;letter-spacing:-.01em;color:#f5f5f7}
  .rbar .btn{min-height:0;height:36px;padding:0 18px;font-size:14px;font-weight:500;background:var(--fb-acc);color:#fff;box-shadow:none}
  .rbar .btn:hover{background:var(--fb-acc-h);box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .l-nav.fl .l-in{animation:none}
  .l-nav.fl.fb-off .l-in,.rbar{transform:none}
}