/* finder.css — Boba Night finder header module (from nearby v5) */
/* base tokens + finder controls (page body/html/a rules stripped) */

:root{
  --ink:#0B0C0E; --obs:#17191D; --obs2:#101216;
  --cream:#f7ead9; --cream2:#fdf6ea;
  --champ:#C5A46D; --gilt:#F4DDA2; --brass:#a9854e;
  --flam:#ff5d8f; --flam2:#f8709e; --coral:#ff8a5c; --amber:#ffb15a; --plum:#6c3496;
  --crimson:#f8467e; --deepred:#c31f5a;
  --inkOnCream:#2b1a10; --mutedOnCream:#8a6a55; --jadeDeep:#1e7a52;
}





/* ============ ONE conjoined header ============ */
.fuse{position:sticky;top:0;z-index:9000;overflow:visible;
  background:
    radial-gradient(900px 320px at 50% -34%, rgba(150,222,236,.20), transparent 60%),
    radial-gradient(1300px 360px at 1% 132%, rgba(255,150,84,.24), transparent 58%),
    radial-gradient(1300px 380px at 100% 132%, rgba(255,93,143,.34), transparent 58%),
    radial-gradient(1050px 540px at 50% -40%, rgba(108,52,150,.42), transparent 70%),
    linear-gradient(180deg, #221741 0%, #1a1236 42%, #150f29 74%, #10101c 100%);
  border-bottom:1px solid rgba(255,120,150,.32)}
.fuse::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--coral) 16%, var(--flam) 38%, var(--gilt) 50%, var(--flam) 62%, var(--coral) 84%, transparent);opacity:.6}
.fuse .bn-header{position:static;background:transparent;border-bottom:0;box-shadow:none}
.fuse .bn-header::before{display:none}
.fuse .bn-bar{justify-content:space-between}

/* drifting smoke behind everything */
.smoke{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.smoke i{position:absolute;border-radius:50%;filter:blur(32px);opacity:.03;background:radial-gradient(circle, #ffcaa0, transparent 70%)}
.smoke i:nth-child(1){width:320px;height:104px;left:3%;top:2%;opacity:.035}
.smoke i:nth-child(2){display:none}
.smoke i:nth-child(3){display:none}
@media(prefers-reduced-motion:no-preference){
  .smoke i{animation:drift 16s ease-in-out infinite alternate}
  .smoke i:nth-child(2){animation-duration:21s;animation-delay:-6s}
  .smoke i:nth-child(3){animation-duration:26s;animation-delay:-12s}
  @keyframes drift{from{transform:translateX(-26px) translateY(4px)}to{transform:translateX(30px) translateY(-8px)}}
}
.bn-header,.crown-row{position:relative;z-index:2}


/* ===== iced-over: frost, sparkle, ice fringe, drifting frost motes ===== */
.frost{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.85;
  background:
    linear-gradient(180deg, rgba(190,236,246,.16), transparent 30%),
    url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='120'><g%20fill='%23dff4fa'%20opacity='.5'><path%20d='M20%205v10M15%2010h10M20%206l-3%203M20%206l3%203M20%2014l-3-3M20%2014l3-3'%20stroke='%23dff4fa'%20stroke-width='.8'/><path%20d='M120%2040v9M116%2044.5h9'%20stroke='%23cdeef7'%20stroke-width='.8'/><circle%20cx='70'%20cy='24'%20r='1'/><circle%20cx='150'%20cy='16'%20r='1.1'/><circle%20cx='40'%20cy='70'%20r='1'/><circle%20cx='95'%20cy='84'%20r='1.1'/><circle%20cx='168'%20cy='96'%20r='1'/></g></svg>")}
.ice-fringe{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:20px;z-index:2;pointer-events:none;
  fill:rgba(200,239,248,.42);filter:drop-shadow(0 1px 3px rgba(150,215,235,.4))}
.ice-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ice-motes span{position:absolute;top:-8px;width:3px;height:3px;border-radius:50%;background:#e6f6fb;opacity:.55;filter:blur(.4px);
  box-shadow:0 0 4px rgba(198,238,247,.7)}
.ice-motes span:nth-child(1){left:12%}.ice-motes span:nth-child(2){left:27%}.ice-motes span:nth-child(3){left:43%}
.ice-motes span:nth-child(4){left:61%}.ice-motes span:nth-child(5){left:78%}.ice-motes span:nth-child(6){left:90%}
.mb-field::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:4;
  background:radial-gradient(circle at 3% 6%, rgba(198,238,247,.5), transparent 12%),
             radial-gradient(circle at 97% 94%, rgba(198,238,247,.45), transparent 12%);
  mix-blend-mode:screen;opacity:.85}
@media(prefers-reduced-motion:no-preference){
  .ice-motes span{animation:icefall linear infinite}
  .ice-motes span:nth-child(1){animation-duration:9s}.ice-motes span:nth-child(2){animation-duration:12s;animation-delay:-4s}
  .ice-motes span:nth-child(3){animation-duration:10.5s;animation-delay:-7s}.ice-motes span:nth-child(4){animation-duration:13s;animation-delay:-2s}
  .ice-motes span:nth-child(5){animation-duration:11s;animation-delay:-6s}.ice-motes span:nth-child(6){animation-duration:14s;animation-delay:-9s}
  @keyframes icefall{0%{transform:translateY(0)}12%{opacity:.6}100%{transform:translateY(150px);opacity:0}}
  .frost{animation:frostShimmer 9s ease-in-out infinite alternate}
  @keyframes frostShimmer{from{opacity:.7}to{opacity:1}}
}

/* ===== Poolside After Hours: terrazzo speckle, palm-frond shadow, flamingo neon ===== */
.terrazzo{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'><circle%20cx='20'%20cy='30'%20r='3'%20fill='%23f7ead9'/><circle%20cx='60'%20cy='112'%20r='2.4'%20fill='%23ffb27a'/><rect%20x='94'%20y='40'%20width='6'%20height='2.6'%20rx='1.3'%20transform='rotate%2828%2094%2040%29'%20fill='%23ff8fae'/><circle%20cx='121'%20cy='94'%20r='2'%20fill='%23C5A46D'/><circle%20cx='40'%20cy='74'%20r='1.8'%20fill='%236fbf9a'/><rect%20x='128'%20y='18'%20width='5'%20height='2.2'%20rx='1'%20transform='rotate%28-20%20128%2018%29'%20fill='%23f4dda2'/><circle%20cx='85'%20cy='131'%20r='2.2'%20fill='%23f7ead9'/><circle%20cx='10'%20cy='120'%20r='1.6'%20fill='%23ff8fae'/><circle%20cx='140'%20cy='136'%20r='1.9'%20fill='%23C5A46D'/><circle%20cx='70'%20cy='20'%20r='1.7'%20fill='%23ffb27a'/><circle%20cx='104'%20cy='120'%20r='1.5'%20fill='%236fbf9a'/><circle%20cx='52'%20cy='48'%20r='1.4'%20fill='%23f4dda2'/></svg>");background-size:150px 150px;background-repeat:repeat}
.palm{position:absolute;left:0;right:0;top:0;height:236px;overflow:hidden;pointer-events:none;z-index:1;opacity:.32}
.palm-svg{position:absolute;top:-34px;left:50%;transform:translateX(-50%);max-width:none;filter:blur(1.1px)}
.neon-fl{position:absolute;left:26px;top:50%;transform:translateY(-50%);width:58px;height:90px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,93,143,.75)) drop-shadow(0 0 15px rgba(150,222,236,.4))}
.neon-fl svg{width:100%;height:100%;display:block}
.neon-cap{position:absolute;left:20px;top:calc(50% + 44px);z-index:1;pointer-events:none;
  font:700 8.5px "Inter Tight",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--flam);
  text-shadow:0 0 8px rgba(255,93,143,.6);white-space:nowrap}
@media(max-width:1150px){.neon-fl,.neon-cap{display:none}}
@media(prefers-reduced-motion:no-preference){
  .palm-svg{transform-origin:50% 0;animation:sway 22s ease-in-out infinite alternate}
  @keyframes sway{from{transform:translateX(-50%) rotate(-1.1deg)}to{transform:translateX(-50%) rotate(1.1deg)}}
  .neon-fl{animation:neonpulse 7s ease-in-out infinite}
  @keyframes neonpulse{0%,100%{opacity:.95}48%{opacity:.6}}
}

/* ============ the crown row ============ */
.crown-row{display:flex;align-items:center;justify-content:center;height:92px;transition:height .22s ease}
.fuse.scrolled .crown-row{height:72px}
.crown{position:relative;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 30px)}

/* streams pour OUT OF the search field: milk left from the middle, steam right */
.pour{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;z-index:-1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.pL{right:calc(100% - 22px)}
.pR{left:calc(100% - 14px)}
@media(max-width:1150px){.pour{display:none}}
.knob-wrap,.mb-sort,.mb-snd{position:relative;z-index:3}
@media(prefers-reduced-motion:no-preference){
  .pL svg .wave{animation:flowL 6.5s ease-in-out infinite alternate;transform-origin:100% 50%}
  @keyframes flowL{from{transform:translateY(0) scaleY(1)}to{transform:translateY(2.5px) scaleY(1.07)}}
  .pL svg .pearlbig{animation:rollp 6.5s ease-in-out infinite alternate}
  @keyframes rollp{from{transform:translateX(0)}to{transform:translateX(-9px)}}
  .pR svg .wave2{animation:flowR 7.5s ease-in-out infinite alternate;transform-origin:0% 50%}
  @keyframes flowR{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-2.5px) scaleY(1.08)}}
  .pR .wisp{animation:wisp 7s ease-in-out infinite}
  .pR .wisp.w2{animation-duration:9.5s;animation-delay:-3s}
  @keyframes wisp{0%,100%{transform:translateX(0) translateY(0);opacity:.3}50%{transform:translateX(22px) translateY(-5px);opacity:.65}}
}
.pR .wisp{position:absolute;border-radius:99px;background:linear-gradient(90deg, rgba(247,234,217,.35), rgba(247,234,217,0));filter:blur(4px)}
.pR .w1{left:40px;top:9px;width:200px;height:7px}
.pR .w2{left:80px;top:45px;width:260px;height:6px;opacity:.6}

/* the cream IS the meter: drag the yin-yang pearl along it, 1–20 mi */
.pL{pointer-events:auto;cursor:ew-resize}
.mb-input{position:relative;z-index:2}
.m-handle{position:absolute;left:260px;top:16px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;cursor:grab;z-index:5;touch-action:none;
  background:radial-gradient(circle at 35% 28%, #43362a, #191309 72%);
  border:2px solid #f7ead9;box-shadow:0 0 0 2px rgba(197,164,109,.5), 0 6px 14px -4px #000, 0 0 14px rgba(244,221,162,.35);
  transition:box-shadow .15s}
.m-handle:active{cursor:grabbing}
.m-handle:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
.m-handle svg{width:16px;height:16px}
.m-val{position:absolute;left:274px;top:-10px;transform:translateX(-50%);white-space:nowrap;z-index:5;
  font:700 11px "Inter Tight",sans-serif;color:var(--gilt);line-height:1;
  background:rgba(12,10,8,.85);border:1px solid rgba(197,164,109,.5);border-radius:99px;padding:3px 9px}
.rail-sm{display:none;align-items:center;gap:8px;position:relative;z-index:3}
.rail-sm input{width:110px;accent-color:var(--champ)}
.rail-sm span{font:700 11px "Inter Tight",sans-serif;color:var(--gilt)}
@media(max-width:1150px){.rail-sm{display:flex}}
/* integrated near-you module inside the Shops mega */
.bn-near{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:14px 4px 2px;margin-top:12px;border-top:1px solid rgba(197,164,109,.25)}
.bn-near h4{margin:0;font:700 10px "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--champ)}
.bn-near-row{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream);
  border:1px solid rgba(197,164,109,.3);border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:600;transition:.15s}
.bn-near-row:hover{border-color:var(--gilt)}
.bn-near-row .mi{color:var(--gilt);font-weight:700}
.bn-near-row .od{width:7px;height:7px;border-radius:50%;background:#3fbf8f;box-shadow:0 0 6px #3fbf8f}
.bn-near-row .od.off{background:#7a2b33;box-shadow:none}
.bn-near-p{margin:0;color:rgba(247,234,217,.55);font-size:12.5px}
.bn-near-chips{display:flex;gap:8px;flex-wrap:wrap}
.bn-near-chips button{background:rgba(0,0,0,.3);border:1px solid rgba(197,164,109,.4);color:var(--cream);
  border-radius:99px;padding:6px 13px;font:600 12px "Inter Tight",sans-serif;cursor:pointer}
.bn-near-chips button:hover{border-color:var(--gilt)}
.bn-near-range{margin:0;margin-left:auto;color:rgba(247,234,217,.45);font-size:11.5px}

/* cream center search — the one search */
.mb-field{position:relative;width:min(380px, 54vw)}
.mb-lab{position:absolute;top:7px;left:46px;font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.18em;color:var(--brass);pointer-events:none}
.mb-pin{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--crimson);pointer-events:none}
.mb-input{width:100%;background:linear-gradient(180deg, var(--cream2), var(--cream));
  border:1px solid rgba(197,164,109,.75);border-radius:16px;
  padding:22px 44px 9px 44px;color:var(--inkOnCream);font:600 15.5px "Inter Tight",sans-serif;outline:none;
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 -2px 0 rgba(197,164,109,.3), inset 0 2px 4px rgba(255,255,255,.9);
  transition:border-color .15s, box-shadow .15s}
.mb-input:focus{border-color:var(--gilt);box-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 0 4px rgba(244,221,162,.22), inset 0 2px 4px rgba(255,255,255,.9)}
.mb-input::placeholder{color:#ab8d70;font-weight:500}
.mb-gps{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(197,164,109,.6);background:rgba(25,19,9,.08);color:#6b5637;
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.mb-gps:hover{background:#191309;color:var(--gilt)}
.mb-gps svg{width:15px;height:15px}
.mb-sug{position:absolute;top:calc(100% + 10px);left:0;right:0;min-width:300px;
  background:linear-gradient(180deg, var(--cream2), var(--cream) 80%);
  border:1px solid rgba(197,164,109,.8);border-radius:16px;overflow:hidden;display:none;
  box-shadow:0 34px 70px -22px rgba(0,0,0,.9), 0 4px 0 rgba(0,0,0,.25)}
.mb-sug.on{display:block}
.mb-sug .cap{padding:10px 16px;font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);border-bottom:1px solid rgba(197,164,109,.4);background:rgba(197,164,109,.1)}
.mb-sug button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid rgba(197,164,109,.25);color:var(--inkOnCream);padding:11px 16px;font-family:inherit;cursor:pointer}
.mb-sug button:last-child{border-bottom:0}
.mb-sug button:hover,.mb-sug button.act{background:rgba(197,164,109,.16)}
.mb-sug .rn{font-weight:700;font-size:14.5px}
.mb-sug .rs{font-size:11.5px;color:var(--mutedOnCream);display:block}
.mb-sug .rc{margin-left:auto;font-size:11px;font-weight:700;color:var(--jadeDeep);white-space:nowrap}
.mb-sug .rc.z{color:var(--mutedOnCream)}
.mb-none{padding:14px 16px;color:var(--mutedOnCream);font-size:13px}

.mb-sort{display:flex;border:1px solid rgba(197,164,109,.55);border-radius:99px;overflow:hidden;flex:0 0 auto;background:rgba(0,0,0,.3)}
.mb-sort button{background:none;border:0;color:rgba(247,234,217,.6);font:700 11.5px "Inter Tight",sans-serif;padding:9px 13px;cursor:pointer;transition:.15s}
.mb-sort button[aria-pressed="true"]{background:linear-gradient(180deg,#d8b678,var(--champ));color:#1c1207}
@media(max-width:860px){.mb-sort{display:none}}
.mb-snd{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid rgba(197,164,109,.55);background:rgba(0,0,0,.3);
  color:rgba(247,234,217,.6);display:grid;place-items:center;cursor:pointer;transition:.15s}
.mb-snd[aria-pressed="true"]{color:var(--gilt);border-color:var(--gilt)}
.mb-snd svg{width:16px;height:16px}

/* ============ dock — cream card, champagne trim ============ */
.dock{position:fixed;top:0;left:0;right:0;z-index:9000;display:none;justify-content:center;pointer-events:none}
.dock.on{display:flex}
.dock-in{pointer-events:auto;width:min(620px, calc(100vw - 26px));margin-top:14px;position:relative;
  background:linear-gradient(180deg, var(--cream2) 0%, var(--cream) 70%, #efdcc3 100%);
  border:1px solid rgba(197,164,109,.85);border-radius:22px;overflow:hidden;color:var(--inkOnCream);
  box-shadow:0 48px 100px -30px rgba(0,0,0,.95), 0 6px 0 rgba(0,0,0,.3)}
.dock-in::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg, var(--brass), var(--champ) 30%, var(--gilt) 50%, var(--champ) 70%, var(--brass));}
.dock-head{display:flex;align-items:center;gap:10px;padding:15px 20px 11px;border-bottom:1px solid rgba(197,164,109,.4);
  font-size:12.5px;color:var(--mutedOnCream)}
.dock-head b{color:var(--inkOnCream)}
.dock-x{margin-left:auto;background:none;border:0;color:var(--mutedOnCream);font-size:19px;cursor:pointer;padding:2px 6px}
.dock-x:hover{color:var(--deepred)}
.spot{padding:18px 22px 6px;position:relative}
.spot-name{font-family:"Fraunces",serif;font-weight:600;font-size:27px;margin:0 96px 7px 0;line-height:1.08;color:#1c0f08}
.spot-dist{position:absolute;top:18px;right:22px;text-align:right}
.spot-dist .mi{font-family:"Fraunces",serif;font-size:27px;color:#8a6a2e;line-height:1}
.spot-dist .u{font-size:9.5px;letter-spacing:.12em;color:var(--mutedOnCream);font-weight:700}
.spot-meta{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 9px}
.tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid rgba(197,164,109,.55);color:var(--mutedOnCream);background:rgba(197,164,109,.1)}
.tag.city{color:var(--inkOnCream)}
.tag.open{background:rgba(30,122,82,.12);border-color:rgba(30,122,82,.5);color:var(--jadeDeep)}
.tag.shut{background:rgba(161,35,53,.1);border-color:rgba(161,35,53,.4);color:#a12335}
.tag.feat{background:rgba(140,60,160,.1);border-color:rgba(140,60,160,.4);color:#7c3a8e}
.spot-hours{color:var(--mutedOnCream);font-size:13px;margin:0 0 13px}
.spot-hours span{color:#b08d7e}
.spot-actions{display:flex;gap:9px;margin-bottom:14px}
.sbtn{flex:1;text-align:center;text-decoration:none;border-radius:12px;padding:11px 12px;font-size:13px;font-weight:700;
  border:1px solid rgba(197,164,109,.6);color:var(--inkOnCream);transition:.15s;background:rgba(255,255,255,.5)}
.sbtn:hover{border-color:var(--deepred)}
.sbtn.go{background:linear-gradient(180deg,#e14a6b,var(--crimson) 60%,#ab2242);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px -8px rgba(201,42,78,.8), inset 0 1px 0 rgba(255,255,255,.35)}
.sbtn.go:hover{filter:brightness(1.06)}
.updeck{padding:0 22px 13px;display:flex;gap:8px;align-items:center;font-size:12px;color:#b08d7e}
.updeck .nm{color:var(--mutedOnCream);font-weight:700}
.dock-foot{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid rgba(197,164,109,.4);
  background:rgba(197,164,109,.1)}
.counter{font-size:12.5px;color:var(--mutedOnCream)}
.counter b{color:var(--inkOnCream)}
.nextb{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;
  background:linear-gradient(180deg,#e8c98e,var(--champ) 55%,#a9854e);color:#1c1207;
  padding:12px 22px;font:700 14px "Inter Tight",sans-serif;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(197,164,109,.9), inset 0 1px 0 rgba(255,255,255,.5);transition:transform .1s,filter .15s}
.nextb:hover{filter:brightness(1.06)}
.nextb:active{transform:translateY(1px) scale(.98)}
.widen{background:none;border:1px dashed rgba(140,106,46,.6);color:#8a6a2e;border-radius:99px;padding:9px 16px;font:700 12.5px "Inter Tight",sans-serif;cursor:pointer}
.widen:hover{background:rgba(197,164,109,.14)}
.dock-empty{padding:26px 22px;color:var(--mutedOnCream);font-size:14.5px;line-height:1.55}
@media(prefers-reduced-motion:no-preference){
  .spot.re-a{animation:reA .32s ease}
  @keyframes reA{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ============ page ============ */
.page{padding-top:0}
.hero{max-width:1080px;margin:0 auto;padding:92px 24px 62px;text-align:center}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--champ);margin:0 0 18px}
h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(38px,6vw,64px);line-height:1.04;margin:0 0 18px;letter-spacing:-.02em}
h1 em{font-style:italic;color:var(--gilt)}
.sub{color:rgba(247,234,217,.66);font-size:17px;max-width:560px;line-height:1.6;margin:0 auto}
.hint{display:inline-flex;align-items:center;gap:9px;margin-top:24px;color:rgba(247,234,217,.5);font-size:13.5px}
.hint svg{width:16px;height:16px;color:var(--champ)}
.sec{max-width:1080px;margin:0 auto;padding:56px 24px;border-top:1px solid rgba(197,164,109,.18)}
.sec h2{font-family:"Fraunces",serif;font-weight:600;font-size:28px;margin:0 0 10px}
.sec p{color:rgba(247,234,217,.6);max-width:560px;line-height:1.65;margin:0}
.foot{max-width:1080px;margin:0 auto;padding:40px 24px 80px;color:rgba(247,234,217,.4);font-size:12.5px;border-top:1px solid rgba(197,164,109,.18)}

/* dd-base */

/* full-bleed bar, search centered (already), and CONTENT-SIZED anchored dropdowns */
.fuse .bn-bar{max-width:none}
.fuse .bn-item{position:static}
.fuse .bn-panel{
  top:100%;                     /* drop below the WHOLE header so the finder stays visible */
  left:0; right:auto;
  width:max-content; max-width:min(640px,94vw);
  background:var(--bn-panel,#15151C);
  border:1px solid rgba(197,164,109,.5);
  border-radius:16px;
  box-shadow:0 34px 68px -26px rgba(0,0,0,.92);
  overflow:hidden;
  transform:translateY(-6px);
}
.fuse .bn-item[data-open] .bn-panel{transform:translateY(0)}
.fuse .bn-mega{width:auto;max-width:100%;padding:16px 18px}
/* neutralize the old excessive full-width Shops grid; its themed module redefines layout */
.fuse .bn-mega--shops{display:block;grid-template-columns:none}
/* default inner spacing so content-sized panels breathe (menu modules may override) */
.fuse .bn-cols{gap:22px}

/* oneline-css */

/* ---- single-row header: finder on the nav line ---- */
.fuse .crown-row{display:none}
.fuse .bn-bar{display:flex;align-items:center;gap:14px;height:var(--bn-h,64px);padding:0 20px;justify-content:flex-start}
.fuse .bn-nav{margin-right:4px}
.fuse .bn-actions{flex:0 0 auto}
.finder-inline{display:flex;align-items:center;gap:9px;margin-left:auto;flex:0 1 auto;min-width:0}
@media(max-width:1240px){.finder-inline .mb-sort{display:none}}
@media(max-width:1080px){.finder-inline .meter{display:none}}
@media(max-width:920px){.finder-inline{display:none}}

/* ---- compact cream search field ---- */
.finder-inline .mb-field{position:relative;width:min(210px,24vw)}
.finder-inline .mb-input{width:100%;background:linear-gradient(180deg,#fdf6ea,#f7ead9);
  border:1px solid rgba(197,164,109,.7);border-radius:11px;padding:8px 30px 8px 30px;
  color:#2b1a10;font:600 13.5px "Inter Tight",sans-serif;outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.9);transition:border-color .15s,box-shadow .15s}
.finder-inline .mb-input:focus{border-color:#F4DDA2;box-shadow:0 2px 0 rgba(0,0,0,.3),0 0 0 3px rgba(244,221,162,.25)}
.finder-inline .mb-input::placeholder{color:#a5866a}
.finder-inline .mb-pin{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#c92a4e;pointer-events:none}
.finder-inline .mb-gps{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(197,164,109,.6);background:none;color:#6b5637;display:grid;place-items:center;cursor:pointer}
.finder-inline .mb-gps:hover{background:#191309;color:#F4DDA2}
.finder-inline .mb-gps svg{width:12px;height:12px}
.finder-inline .mb-sug{top:calc(100% + 8px)}

/* ---- cherry meter: fluffy cream track, drag RIGHT = farther ---- */
.meter{position:relative;width:166px;height:46px;flex:0 0 auto;cursor:ew-resize;touch-action:none}
.cream-track{position:absolute;left:0;right:0;top:21px;height:16px;border-radius:11px;
  background:linear-gradient(180deg,#fffaf0 0%,#f7ead9 52%,#e4cba6 100%);
  border:1px solid rgba(197,164,109,.6);box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.95)}
.cream-track::before{content:"";position:absolute;left:-1px;right:-1px;top:-9px;height:16px;border-radius:12px;
  background:
    radial-gradient(circle at 9px 10px,#fffaf0 8px,transparent 9px) 0 0/20px 16px repeat-x,
    radial-gradient(circle at 19px 12px,#fdf4e6 6px,transparent 7px) 0 0/20px 16px repeat-x;
  filter:drop-shadow(0 -1px 1px rgba(197,164,109,.4)) drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.cream-track .drizzle{position:absolute;left:6px;right:6px;top:5px;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#a9854e 0 8px,transparent 8px 15px);opacity:.55}
.mticks{position:absolute;left:0;right:0;top:36px;height:12px}
.mticks .tick{position:absolute;top:0;width:1px;height:4px;background:rgba(197,164,109,.5);transform:translateX(-50%)}
.mticks .tick.big{height:6px;background:rgba(197,164,109,.85)}
.mticks .tnum{position:absolute;top:6px;transform:translateX(-50%);font:700 8px "Inter Tight",sans-serif;color:rgba(197,164,109,.9)}
.cherry{position:absolute;top:9px;left:0;width:26px;height:26px;cursor:grab;z-index:4;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.cherry:active{cursor:grabbing}
.cherry:focus-visible{outline:2px solid #F4DDA2;outline-offset:3px;border-radius:50%}
.cherry svg{width:26px;height:26px;display:block}
@media(prefers-reduced-motion:no-preference){.cherry{animation:cherryBob 3.2s ease-in-out infinite}@keyframes cherryBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}}
.m-val{position:absolute;top:-9px;left:0;transform:translateX(-50%);white-space:nowrap;z-index:5;
  font:700 10px "Inter Tight",sans-serif;color:#F4DDA2;background:rgba(12,10,8,.85);
  border:1px solid rgba(197,164,109,.5);border-radius:99px;padding:2px 7px}
/* Drag-Me nudge bubble */
.dragme{position:absolute;top:calc(100% + 6px);left:2px;z-index:6;pointer-events:none;
  font:800 10.5px "Inter Tight",sans-serif;letter-spacing:.02em;color:#160611;white-space:nowrap;
  background:linear-gradient(180deg,#ff9dbb,#ff5d8f);border-radius:9px;padding:4px 10px;
  box-shadow:0 8px 18px -6px rgba(255,93,143,.95);opacity:0;transform:translateY(-4px) scale(.9);
  transition:opacity .25s,transform .25s}
.dragme::after{content:"";position:absolute;left:14px;top:-5px;border:5px solid transparent;border-bottom-color:#ff9dbb;border-top:0}
.dragme.show{opacity:1;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:no-preference){.dragme.show{animation:dmWiggle 1.1s ease-in-out infinite}@keyframes dmWiggle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}}

/* compact sort + sound to fit the line */
.finder-inline .mb-sort{border:1px solid rgba(197,164,109,.5);border-radius:99px;overflow:hidden;display:flex}
.finder-inline .mb-sort button{background:none;border:0;color:rgba(247,234,217,.6);font:700 11px "Inter Tight",sans-serif;padding:6px 10px;cursor:pointer}
.finder-inline .mb-sort button[aria-pressed="true"]{background:linear-gradient(180deg,#e8c98e,#C5A46D);color:#1c1207}
.finder-inline .mb-snd{width:30px;height:30px;border-radius:50%;border:1px solid rgba(197,164,109,.5);background:rgba(0,0,0,.25);color:rgba(247,234,217,.65);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.finder-inline .mb-snd svg{width:14px;height:14px}
.finder-inline .mb-snd[aria-pressed="true"]{color:#F4DDA2;border-color:#F4DDA2}

/* ---- dropdowns: a touch more compact + nicer link hover with a slide-in caret ---- */
.fuse .bn-panel{max-width:min(560px,94vw)}
.fuse .bn-panel .bn-col-links a,.fuse .bn-pane-cities a,.fuse .bn-rail-b{transition:transform .14s ease,color .14s ease}
.fuse .bn-panel .bn-col-links a:hover,.fuse .bn-pane-cities a:hover{transform:translateX(3px)}
.fuse .bn-panel .bn-col-links a{position:relative}
.fuse .bn-panel .bn-col-links a::after{content:"";display:inline-block;width:0;height:8px;margin-left:6px;vertical-align:middle;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A46D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity:0;transition:width .14s ease,opacity .14s ease}
.fuse .bn-panel .bn-col-links a:hover::after{width:9px;opacity:.9}

/* variant-pearl-line */

.bn-nav--right{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.fuse .bn-bar{gap:10px}
.fuse .bn-trigger{font-size:.95em}
.finder-inline{margin-left:auto}
.finder-inline .mb-field{width:min(190px,22vw)}
.meter{width:150px}
/* strip the heavy atmosphere for the clean variants */
.terrazzo,.palm,.frost,.ice-motes,.smoke,.neon-fl,.neon-cap,.ice-fringe{display:none!important}

.fuse{background:linear-gradient(180deg,#16171d 0%,#0B0C0E 100%);border-bottom:1px solid rgba(197,164,109,.4)}
.fuse::after{opacity:.35}
/* a quiet strand of tapioca pearls along the bar's bottom edge */
.fuse::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:9px;pointer-events:none;opacity:.9;
  background:radial-gradient(circle at 4.5px 4.5px, #6b5138 1.2px, #241a10 3.4px, transparent 4px) 0 0/30px 9px repeat-x}
/* handle: a glossy tapioca pearl instead of the cherry */
.cherry svg{display:none}
.cherry{background:radial-gradient(circle at 34% 28%, #7a5c3a 8%, #362718 40%, #140d06 78%);
  border:2px solid #f7ead9;border-radius:50%;
  box-shadow:0 0 0 2px rgba(197,164,109,.45), 0 4px 9px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.28)}
.dragme{background:linear-gradient(180deg,#e8c98e,#C5A46D);color:#1c1207;box-shadow:0 8px 18px -6px rgba(197,164,109,.9)}
.dragme::after{border-bottom-color:#e8c98e}

/* dd2-pearl */

/* == shops pearl-line == */
/* ============================================================================
   dd2-shops.css — SHOPS dropdown (#bnpanel-shops), Pearl Line system
   DRINK: classic pearl milk tea, distilled. One accent (warm amber #c98a4b),
   one motif moment (a strand of three tapioca pearls beside the header cap).
   Obsidian card, champagne hairlines, ghost chips, one Fraunces moment.
   Every selector is scoped to #bnpanel-shops. The site action color
   (--bn-neon) is never touched. Replaces dd-shops.css at equal specificity.
   ========================================================================== */

#bnpanel-shops{
  --pm-amber:#c98a4b;                 /* the one accent */
  --pm-amber-soft:rgba(201,138,75,.30);
  --pm-cream:#f7ead9;                 /* hover cream, from the Pearl Line bar */
  --pm-champ:#C5A46D;
  --pm-champ-line:rgba(197,164,109,.32);
  --pm-hairline:rgba(244,239,231,.09);
  --pm-ink:#1c1207;                   /* dark text on filled amber */
  --pm-pearl-core:#6b5138;            /* lit tapioca sphere */
  --pm-pearl-edge:#241a10;
}

/* ---- shell: quiet obsidian card, amber keyline painted along the top ---- */
#bnpanel-shops{
  max-width:540px;
  background:
    linear-gradient(90deg,
      rgba(201,138,75,0) 0%,
      rgba(201,138,75,.9) 20%,
      #e2b57e 50%,
      rgba(201,138,75,.9) 80%,
      rgba(201,138,75,0) 100%) top / 100% 2px no-repeat,
    #17151B;                          /* a whisper warmer than --bn-panel */
  border:1px solid var(--pm-champ-line);
  border-top:1px solid rgba(201,138,75,.55);
  border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.88);
  overflow:hidden;
}

/* ---- layout: one calm vertical stack ------------------------------------ */
#bnpanel-shops .bn-mega--shops{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.8rem;
  max-width:none;
  grid-template-columns:none;
  margin:0;
  padding:1rem 1.15rem 1.1rem;
}

/* ---- header cap + the motif moment: three tapioca pearls ---------------- */
#bnpanel-shops .bn-mega--shops::before{
  content:"Shops · By region";
  display:block;
  order:-1;
  margin:0 0 -.15rem;
  padding:.1rem 0 .1rem 32px;         /* room for the pearl strand */
  border:0;
  border-radius:0;
  font-family:"Inter Tight",var(--bn-sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pm-champ);
  background:
    radial-gradient(circle at 4px 50%,  var(--pm-pearl-core) 1.2px, var(--pm-pearl-edge) 2.9px, rgba(197,164,109,.5) 3.4px, transparent 4px),
    radial-gradient(circle at 13px 50%, var(--pm-pearl-core) 1.2px, var(--pm-pearl-edge) 2.9px, rgba(197,164,109,.5) 3.4px, transparent 4px),
    radial-gradient(circle at 22px 50%, var(--pm-pearl-core) 1.2px, var(--pm-pearl-edge) 2.9px, rgba(197,164,109,.5) 3.4px, transparent 4px);
  background-repeat:no-repeat;
}

/* ---- region chips: quiet ghosts, selected fills amber ------------------- */
#bnpanel-shops .bn-rail{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  margin:0;
  padding:0 0 .8rem;
  border-right:0;
  border-bottom:1px solid var(--pm-hairline);
}
#bnpanel-shops .bn-rail-b{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  width:auto;
  padding:.32rem .68rem;
  border-radius:999px;
  border:1px solid var(--pm-champ-line);
  background:transparent;
  color:var(--bn-silver);
  font-family:"Inter Tight",var(--bn-sans);
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:none;
  transition:color .16s var(--bn-ease),border-color .16s var(--bn-ease),
             background .16s var(--bn-ease);
}
#bnpanel-shops .bn-rail-b:hover{
  color:var(--pm-cream);
  border-color:rgba(197,164,109,.6);
  background:transparent;
  transform:none;
}
#bnpanel-shops .bn-rail-b[aria-selected="true"]{
  color:var(--pm-ink);
  background:var(--pm-amber);
  border-color:var(--pm-amber);
  box-shadow:none;
}
/* counts ride inline, small champagne — no pill */
#bnpanel-shops .bn-rail-b .bn-ct{
  font-size:.64rem;
  font-weight:600;
  color:rgba(197,164,109,.9);
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#bnpanel-shops .bn-rail-b[aria-selected="true"] .bn-ct{
  color:rgba(28,18,7,.72);
  background:none;
  border:0;
}

/* the two rail links become quiet text actions */
#bnpanel-shops .bn-rail-link,
#bnpanel-shops .bn-rail-all{
  margin-top:0;
  padding:.32rem .3rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--pm-champ);
  font-weight:600;
}
#bnpanel-shops .bn-rail-all{
  margin-left:auto;
  color:var(--pm-champ);
  background:transparent;
  border-color:transparent;
}
#bnpanel-shops .bn-rail-link:hover,
#bnpanel-shops .bn-rail-all:hover{
  color:var(--pm-cream);
  background:transparent;
  border-color:transparent;
  filter:none;
}

/* ---- panes: the selected region's cities -------------------------------- */
#bnpanel-shops .bn-panes{min-height:0}
#bnpanel-shops .bn-pane[hidden]{display:none}

#bnpanel-shops .bn-pane-blurb{
  font-size:.78rem;
  color:var(--bn-muted);
  margin:0 0 .55rem;
  max-width:none;
  line-height:1.5;
}

#bnpanel-shops .bn-pane-cities{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.05rem 1.6rem;
}
#bnpanel-shops .bn-pane-cities a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
  font-family:"Inter Tight",var(--bn-sans);
  font-size:.855rem;
  font-weight:600;
  color:var(--bn-silver);
  padding:.3rem 0;
  border:0;
  border-radius:0;
  background:transparent;
  transition:color .15s var(--bn-ease),padding-left .16s var(--bn-ease);
}
/* keep the base file's caret slide; hover goes cream, no box */
#bnpanel-shops .bn-pane-cities a:hover{
  color:var(--pm-cream);
  background:transparent;
  border-color:transparent;
  padding-left:.25rem;
}
#bnpanel-shops .bn-pane-cities a .bn-ct{
  font-size:.68rem;
  font-weight:500;
  color:rgba(197,164,109,.9);
  font-variant-numeric:tabular-nums;
}

/* "All of <region>" — a small champagne line above a hairline */
#bnpanel-shops .bn-pane-cities .bn-viewall{
  grid-column:1/-1;
  justify-content:flex-start;
  gap:.35rem;
  margin-top:.5rem;
  padding:.55rem 0 0;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--pm-champ);
  border:0;
  border-top:1px solid var(--pm-hairline);
  border-bottom:0;
  border-radius:0;
  background:transparent;
}
#bnpanel-shops .bn-pane-cities .bn-viewall:hover{
  color:var(--pm-cream);
  background:transparent;
  border-top-color:var(--pm-hairline);
  padding-left:0;
}

/* ---- featured: compact horizontal card, thin amber keyline left --------- */
#bnpanel-shops .bn-feat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  gap:.16rem;
  min-height:64px;
  margin-top:.1rem;
  padding:.55rem .9rem .6rem;
  border:0;
  border-left:2px solid var(--pm-amber);
  border-radius:0 10px 10px 0;
  background:rgba(201,138,75,.055);
  box-shadow:none;
  transition:background .16s var(--bn-ease),border-color .16s var(--bn-ease);
}
#bnpanel-shops .bn-feat:hover{
  border-left-color:var(--bn-gilt);
  background:rgba(201,138,75,.09);
  transform:none;
  box-shadow:none;
}
#bnpanel-shops .bn-feat-plate{display:none}
#bnpanel-shops .bn-feat-kick{
  grid-column:auto;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pm-champ);
}
#bnpanel-shops .bn-feat-t{
  grid-column:auto;
  font-family:var(--bn-serif);          /* the one Fraunces moment */
  font-size:1.04rem;
  font-weight:500;
  line-height:1.15;
  color:var(--pm-cream);
}
#bnpanel-shops .bn-feat-s{
  grid-column:auto;
  font-size:.74rem;
  color:var(--bn-muted);
  line-height:1.45;
  margin-top:.05rem;
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  #bnpanel-shops .bn-rail-b,
  #bnpanel-shops .bn-pane-cities a,
  #bnpanel-shops .bn-feat{transition:none}
  #bnpanel-shops .bn-pane-cities a:hover{padding-left:0}
}

/* == best-for pearl-line == */
/* =====================================================================
   dd2-best-for.css  —  "Best for" dropdown · PEARL LINE refinement
   Drink identity, distilled: strawberry milk. ONE accent — #ff5d8f —
   spent in exactly two quiet places: the 2px keyline at the top of the
   card (echoed on the featured card's left edge) and a three-pearl
   milk-to-berry motif beside the header cap. Everything else is the
   house system: obsidian, champagne hairlines, silver, cream, Fraunces
   for the single display moment. No banners, no pink plates, no fill.
   Every selector is scoped to #bnpanel-best-for. Action color untouched.
   ===================================================================== */

/* ---- the card: obsidian, champagne hairline, strawberry keyline ----- */
#bnpanel-best-for{
  max-width:500px;
  border-color:rgba(197,164,109,.38);            /* back to the house hairline */
  box-shadow:0 34px 68px -26px rgba(0,0,0,.92);  /* kill the old pink glow */
}
/* the one accent keyline: berry at the left, dissolving into milk */
#bnpanel-best-for::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,
    #ff9dbb 0%, #ff5d8f 30%,
    rgba(255,93,143,.28) 62%, rgba(255,93,143,0) 100%);
  pointer-events:none;
  z-index:1;
}

/* ---- mega: a simple vertical flow ----------------------------------- */
#bnpanel-best-for .bn-mega{
  display:block;
  padding:0;
  position:relative;
}

/* ---- header cap: champagne whisper + three strawberry-milk pearls ---- */
#bnpanel-best-for .bn-mega::before{
  content:"Best for \00b7\0020the night you're having";
  display:block;
  font-family:"Inter Tight",var(--bn-sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bn-champagne);
  padding:14px 20px 12px 45px;
  border-bottom:1px solid rgba(244,239,231,.08);
  /* the motif: three 5px pearls, milk fading to berry */
  background-color:transparent;
  background-image:
    radial-gradient(circle 2.5px at 21px 20px, #ffc9d9 98%, transparent),
    radial-gradient(circle 2.5px at 29px 20px, #ff9dbb 98%, transparent),
    radial-gradient(circle 2.5px at 37px 20px, #ff5d8f 98%, transparent);
  background-repeat:no-repeat;
  background-size:auto;
}

/* ---- two quiet columns, no tinted boxes ------------------------------ */
#bnpanel-best-for .bn-cols{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2px 32px;
  padding:16px 20px 6px;
}
#bnpanel-best-for .bn-col{
  min-width:0;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}
#bnpanel-best-for .bn-col h4{
  color:rgba(197,164,109,.82);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  margin:0 0 .6rem;
}

/* ---- "By occasion": clean rows, silver -> cream ---------------------- */
/* (the base caret-slide hover is global — transitions kept compatible)  */
#bnpanel-best-for .bn-col:nth-of-type(1) .bn-col-links{
  display:grid;
  gap:1px;
}
#bnpanel-best-for .bn-col:nth-of-type(1) .bn-col-links a{
  position:relative;
  display:flex;
  justify-content:flex-start;
  color:var(--bn-silver);
  font-family:"Inter Tight",var(--bn-sans);
  font-size:13.5px;
  font-weight:600;
  padding:.34rem 0;
  border-radius:0;
  background:none;
  transition:transform .14s ease,color .14s ease;
}
#bnpanel-best-for .bn-col:nth-of-type(1) .bn-col-links a::before{
  content:none;                                   /* retire the berry bullet */
}
#bnpanel-best-for .bn-col:nth-of-type(1) .bn-col-links a:hover{
  color:#f7ead9;
  background:none;
  padding-left:0;                                 /* the caret slide is the move */
}

/* ---- "By craving": ghost chips — thin line, no fill ------------------ */
#bnpanel-best-for .bn-col:nth-of-type(2) .bn-col-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-content:flex-start;
}
#bnpanel-best-for .bn-col:nth-of-type(2) .bn-col-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:4px 11px;
  font-family:"Inter Tight",var(--bn-sans);
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  color:var(--bn-silver);
  background:none;
  border:1px solid rgba(255,93,143,.32);
  border-radius:999px;
  transition:color .14s ease,border-color .14s ease,
             background .14s ease,transform .14s ease;
}
#bnpanel-best-for .bn-col:nth-of-type(2) .bn-col-links a:hover{
  color:#f7ead9;
  background:rgba(255,93,143,.07);
  border-color:rgba(255,93,143,.7);
  padding-left:11px;
  transform:none;                                 /* chips hold still; rows slide */
}

/* ---- view-all: back to the house style ------------------------------- */
#bnpanel-best-for .bn-viewall{
  grid-column:1 / -1;
  color:var(--bn-pearl);
  font-size:.8rem;
  margin-top:12px;
}
#bnpanel-best-for .bn-viewall:hover{
  border-color:var(--bn-neon);                    /* base behavior, reasserted */
}

/* ---- featured: compact horizontal card, one Fraunces moment ---------- */
#bnpanel-best-for .bn-feat{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-height:64px;
  margin:8px 20px 18px;
  padding:11px 16px 12px 18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(244,239,231,.1);
  border-radius:10px;
  box-shadow:none;
}
/* the keyline echo: same berry-to-milk, stood on end */
#bnpanel-best-for .bn-feat::before{
  content:"";
  position:absolute;
  left:-1px; top:11px; bottom:11px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#ff9dbb,#ff5d8f);
}
#bnpanel-best-for .bn-feat:hover{
  border-color:rgba(244,239,231,.22);
  transform:translateY(-1px);
  box-shadow:none;
}
#bnpanel-best-for .bn-feat-plate{display:none}    /* no plate; the line carries it */
#bnpanel-best-for .bn-feat-kick{
  color:var(--bn-champagne);
  font-size:.6rem;
  letter-spacing:.18em;
}
#bnpanel-best-for .bn-feat-t{
  font-size:1.12rem;
  line-height:1.15;
}
#bnpanel-best-for .bn-feat-s{display:none}        /* kicker + title only, ~64px */

/* == new pearl-line == */
/* ============================================================================
   dd2-new.css  —  "New" nav dropdown  (#bnpanel-new)  ·  PEARL LINE SYSTEM
   Replaces dd-new.css (matcha speckle/foam wallpaper).

   Shared system: obsidian card #15151C, 1px champagne-alpha border, radius 16,
   no textures. ONE 2px accent keyline at top + ONE small motif moment.
   Drink identity (muted): matcha latte — jade #3fbf8f is the single accent.
   Motif: a matcha-gradient dot trio beside the header cap (pearls, poured).

   Smallest menu of the six — treated as a jewel: fixed 400px card, one column,
   hairline separations, one Fraunces moment (the featured title).
   Every selector scoped to #bnpanel-new. CSS only. Jade is decorative;
   the site action color (neon) is untouched. AA contrast throughout.
   ========================================================================== */

/* ---- panel shell: the jewel card ----------------------------------------- */
#bnpanel-new{
  width:400px;
  max-width:min(400px,94vw);
  background:var(--bn-panel,#15151C);
  border:1px solid rgba(197,164,109,.45);      /* champagne-alpha, per system */
  border-radius:16px;
  box-shadow:0 34px 68px -26px rgba(0,0,0,.92);
  overflow:hidden;
}

/* the ONE accent keyline: 2px jade, fading at the corners */
#bnpanel-new::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(63,191,143,0) 0%,
    rgba(63,191,143,.85) 20%,
    #3fbf8f 50%,
    rgba(63,191,143,.85) 80%,
    rgba(63,191,143,0) 100%);
  pointer-events:none;
  z-index:1;
}

/* ---- mega: simple vertical stack, generous quiet padding ----------------- */
#bnpanel-new .bn-mega{
  display:block;
  width:auto;
  max-width:none;
  padding:17px 20px 18px;
  gap:0;
}

/* ---- header cap + motif: "NEW · FRESHLY OPENED" with matcha dot trio ------ */
/* Fully resets the old matcha banner strip (background wallpaper removed).  */
#bnpanel-new .bn-mega::before{
  content:"New · Freshly opened";
  display:block;
  font:600 10px/1 "Inter Tight",var(--bn-sans,sans-serif);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bn-champagne,#C5A46D);           /* 7.7:1 on #15151C — AA */
  padding:2px 0 12px 32px;                     /* room for the dot trio */
  margin:0 0 11px;
  border-bottom:1px solid rgba(244,239,231,.08);
  /* motif: three matcha-gradient pearls, descending — the one small moment */
  background:
    radial-gradient(circle 4.5px at 5px 7px,
      #b9ecd4, #3fbf8f 58%, #1e6d4f 96%, rgba(30,109,79,0) 100%),
    radial-gradient(circle 3.4px at 14.5px 7px,
      #a5e3c6, #38aa80 58%, #1c5f46 96%, rgba(28,95,70,0) 100%),
    radial-gradient(circle 2.5px at 21.5px 7px,
      #8fd6b6, #2f9670 58%, #1a533e 96%, rgba(26,83,62,0) 100%);
  background-repeat:no-repeat;
}

/* ---- column: single quiet list ------------------------------------------- */
#bnpanel-new .bn-cols{
  display:block;
  padding:0;
  gap:0;
}
#bnpanel-new .bn-col{ min-width:0; }

/* "By region" — a whisper above the list, subordinate to the cap */
#bnpanel-new .bn-col h4{
  font:600 9.5px/1 "Inter Tight",var(--bn-sans,sans-serif);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bn-muted,#8B8981);               /* 5.1:1 — AA */
  margin:0 0 4px;
}

/* region links: one column, hairline-separated, silver -> cream ------------- */
#bnpanel-new .bn-col-links{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
#bnpanel-new .bn-col-links a{
  position:relative;
  justify-content:space-between;
  gap:1rem;
  font-family:"Inter Tight",var(--bn-sans,sans-serif);
  font-size:13.5px;
  font-weight:600;
  color:var(--bn-silver,#C8C6C1);              /* AA */
  padding:.5rem 0;
  transition:color .15s var(--bn-ease),padding-left .16s var(--bn-ease);
}
#bnpanel-new .bn-col-links a + a{
  border-top:1px solid rgba(244,239,231,.06);
}
/* remove the old foam-dot bullet entirely */
#bnpanel-new .bn-col-links a::before{ content:none; }
/* keep the global slide; hover lands on cream, not green */
#bnpanel-new .bn-col-links a:hover{
  color:var(--bn-pearl,#F4EFE7);
  padding-left:.25rem;
}

/* ---- "All new openings" — back to the global treatment ------------------- */
#bnpanel-new .bn-viewall{
  margin:10px 0 0;
  font-size:.8rem;
  color:var(--bn-pearl,#F4EFE7);
}
#bnpanel-new .bn-viewall:hover{
  border-color:var(--bn-neon,#ff2f6d);         /* the action color, untouched */
}

/* ---- featured: compact ~64px row, thin jade keyline, no plate ------------- */
#bnpanel-new .bn-feat{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-height:64px;
  margin:14px 0 0;
  padding:9px 12px 10px 14px;
  background:rgba(244,239,231,.025);           /* whisper, not a plate */
  border:0;
  border-left:2px solid rgba(63,191,143,.55);  /* thin jade keyline */
  border-radius:2px;
  transition:border-color .16s var(--bn-ease),background .16s var(--bn-ease);
}
#bnpanel-new .bn-feat:hover{
  transform:none;
  border-left-color:#3fbf8f;
  background:rgba(244,239,231,.05);
}
#bnpanel-new .bn-feat-plate{ display:none; }   /* no plate in this system */

#bnpanel-new .bn-feat-kick{
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--bn-champagne,#C5A46D);           /* AA */
}
/* the ONE Fraunces moment */
#bnpanel-new .bn-feat-t{
  font-family:var(--bn-serif,serif);
  font-size:17px;
  font-weight:500;
  color:var(--bn-pearl,#F4EFE7);
  line-height:1.15;
}
#bnpanel-new .bn-feat-s{
  font-size:12px;
  color:var(--bn-muted,#8B8981);               /* 5.1:1 — AA */
  line-height:1.45;
}

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #bnpanel-new .bn-col-links a,
  #bnpanel-new .bn-feat{ transition:none; }
}

/* == pick-for-me pearl-line == */
#bnpanel-pick-for-me{max-width:480px}
#bnpanel-pick-for-me .bn-mega{position:relative;background:#15151C;padding:18px 20px 16px}
#bnpanel-pick-for-me .bn-mega::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#d98a3d 30%,#e8a45c 50%,#d98a3d 70%,transparent)}
#bnpanel-pick-for-me .bn-mega::after{display:none}
#bnpanel-pick-for-me .bn-col h4{font:600 10px "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#C5A46D;margin:0 0 10px;padding:0;background:none;border:0}
#bnpanel-pick-for-me .bn-col h4::before{content:"";display:inline-block;width:26px;height:5px;margin-right:8px;vertical-align:2px;
  background:radial-gradient(circle at 2.5px 2.5px,#f0c896 2.2px,transparent 2.6px) 0 0/9px 5px repeat-x;opacity:.9}
#bnpanel-pick-for-me .bn-cols{display:grid;grid-template-columns:1fr;gap:14px;padding:0;background:none}
#bnpanel-pick-for-me .bn-col{background:none;border:0;padding:0}
#bnpanel-pick-for-me .bn-col-links a{display:flex;align-items:baseline;gap:8px;padding:7px 2px;margin:0;
  font:600 13.5px "Inter Tight",sans-serif;color:#C8C6C1;background:none;border:0;border-bottom:1px solid rgba(244,239,231,.06);border-radius:0;box-shadow:none}
#bnpanel-pick-for-me .bn-col-links a:hover{color:#f7ead9;background:none;transform:translateX(3px)}
#bnpanel-pick-for-me .bn-col-links a::before{display:none}
#bnpanel-pick-for-me .bn-hint{color:#8B8981;font-size:11.5px;font-weight:500;margin-left:auto}
#bnpanel-pick-for-me .bn-viewall{color:#F4EFE7;background:none;border:0;padding:8px 2px 0;font:600 13px "Inter Tight",sans-serif}
#bnpanel-pick-for-me .bn-feat{display:flex;align-items:center;gap:12px;min-height:64px;margin:14px 0 0;padding:10px 12px;
  background:rgba(217,138,61,.05);border:0;border-left:2px solid rgba(217,138,61,.6);border-radius:0 10px 10px 0;box-shadow:none}
#bnpanel-pick-for-me .bn-feat:hover{border-left-color:#F4DDA2}
#bnpanel-pick-for-me .bn-feat-plate{display:none}
#bnpanel-pick-for-me .bn-feat-kick{font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.13em;color:#C5A46D;text-transform:uppercase}
#bnpanel-pick-for-me .bn-feat-t{font:600 17px "Fraunces",serif;color:#f7ead9;margin:2px 0}
#bnpanel-pick-for-me .bn-feat-s{font:500 12px "Inter Tight",sans-serif;color:#8B8981}

/* == guides pearl-line == */
#bnpanel-guides{max-width:500px}
#bnpanel-guides .bn-mega{position:relative;background:#15151C;padding:18px 20px 16px}
#bnpanel-guides .bn-mega::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#8a5a34 25%,#f7ead9 50%,#8a5a34 75%,transparent)}
#bnpanel-guides .bn-mega::after{display:none}
#bnpanel-guides .bn-col h4{font:600 10px "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#C5A46D;margin:0 0 10px;padding:0;background:none;border:0}
#bnpanel-guides .bn-col h4::after{content:"";display:inline-block;width:18px;height:6px;margin-left:8px;vertical-align:1px;
  border-radius:99px 99px 0 0;background:linear-gradient(180deg,#f7ead9,#e6cfae);opacity:.85}
#bnpanel-guides .bn-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:0;background:none}
#bnpanel-guides .bn-col{background:none;border:0;padding:0}
#bnpanel-guides .bn-col-links a{display:flex;align-items:baseline;gap:8px;padding:6px 2px;margin:0;
  font:600 13.5px "Inter Tight",sans-serif;color:#C8C6C1;background:none;border:0;border-bottom:1px solid rgba(244,239,231,.06);border-radius:0}
#bnpanel-guides .bn-col-links a:hover{color:#f7ead9;background:none;transform:translateX(3px)}
#bnpanel-guides .bn-hint{color:#8B8981;font-size:11px;font-weight:500;margin-left:auto}
#bnpanel-guides .bn-viewall{color:#F4EFE7;background:none;border:0;padding:8px 2px 0;font:600 13px "Inter Tight",sans-serif}
#bnpanel-guides .bn-feat{display:flex;align-items:center;gap:12px;min-height:64px;margin:14px 0 0;padding:10px 12px;
  background:rgba(138,90,52,.07);border:0;border-left:2px solid rgba(138,90,52,.7);border-radius:0 10px 10px 0;box-shadow:none}
#bnpanel-guides .bn-feat:hover{border-left-color:#F4DDA2}
#bnpanel-guides .bn-feat-plate{display:none}
#bnpanel-guides .bn-feat-kick{font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.13em;color:#C5A46D;text-transform:uppercase}
#bnpanel-guides .bn-feat-t{font:600 17px "Fraunces",serif;color:#f7ead9;margin:2px 0}
#bnpanel-guides .bn-feat-s{font:500 12px "Inter Tight",sans-serif;color:#8B8981}

/* == ratings-meetups pearl-line == */
#bnpanel-ratings-meetups{max-width:520px}
#bnpanel-ratings-meetups .bn-mega{position:relative;background:#15151C;padding:18px 20px 16px}
#bnpanel-ratings-meetups .bn-mega::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#b06a2c 20%,#e8a45c 45%,#b06a2c 60%,#e8a45c 80%,transparent)}
#bnpanel-ratings-meetups .bn-mega::after{display:none}
#bnpanel-ratings-meetups .bn-col h4{font:600 10px "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#C5A46D;margin:0 0 10px;padding:0;background:none;border:0}
#bnpanel-ratings-meetups .bn-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;background:none}
#bnpanel-ratings-meetups .bn-col{background:none;border:0;padding:0}
#bnpanel-ratings-meetups .bn-col-links a{display:block;padding:6px 2px;margin:0;
  font:600 13.5px "Inter Tight",sans-serif;color:#C8C6C1;background:none;border:0;border-bottom:1px solid rgba(244,239,231,.06);border-radius:0}
#bnpanel-ratings-meetups .bn-col-links a:hover{color:#f7ead9;background:none;transform:translateX(3px)}
#bnpanel-ratings-meetups .bn-viewall{color:#F4EFE7;background:none;border:0;padding:8px 2px 0;font:600 13px "Inter Tight",sans-serif}
#bnpanel-ratings-meetups .bn-feat{display:flex;align-items:center;gap:12px;min-height:64px;margin:14px 0 0;padding:10px 12px;
  background:rgba(176,106,44,.06);border:0;border-left:2px solid rgba(176,106,44,.75);border-radius:0 10px 10px 0;box-shadow:none}
#bnpanel-ratings-meetups .bn-feat:hover{border-left-color:#F4DDA2}
#bnpanel-ratings-meetups .bn-feat-plate{display:none}
#bnpanel-ratings-meetups .bn-feat-kick{font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.13em;color:#C5A46D;text-transform:uppercase}
#bnpanel-ratings-meetups .bn-feat-kick::before{content:"✓ ";color:#e8a45c}
#bnpanel-ratings-meetups .bn-feat-t{font:600 17px "Fraunces",serif;color:#f7ead9;margin:2px 0}
#bnpanel-ratings-meetups .bn-feat-s{font:500 12px "Inter Tight",sans-serif;color:#8B8981}


/* v3-extras */

/* nav trigger icons: custom svg per menu, second state on hover/open */
.bn-trigger .ni{width:15px;height:15px;margin-right:6px;vertical-align:-2.5px;transition:transform .18s ease}
.bn-trigger .ni .a{stroke:#C5A46D;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:.18s}
.bn-trigger .ni .x{stroke:#C5A46D;stroke-width:1.25;stroke-linecap:round;opacity:0;transition:.2s ease .05s}
.bn-item:hover .ni,.bn-item[data-open] .ni{transform:translateY(-1px)}
.bn-item:hover .ni .a,.bn-item[data-open] .ni .a{opacity:1}
.bn-item:hover .ni .x,.bn-item[data-open] .ni .x{opacity:1}
.bn-item[data-item="shops"]:hover .ni .a{stroke:#c98a4b}
.bn-item[data-item="best-for"]:hover .ni .a{stroke:#ff5d8f}
.bn-item[data-item="best-for"]:hover .ni .hfill{fill:rgba(255,93,143,.25)}
.bn-item[data-item="new"]:hover .ni .a{stroke:#3fbf8f}
.bn-item[data-item="pick-for-me"]:hover .ni{transform:translateY(-1px) rotate(14deg)}
.bn-item[data-item="pick-for-me"]:hover .ni .a{stroke:#d98a3d}
.bn-item[data-item="guides"]:hover .ni .a{stroke:#e6cfae}
.bn-item[data-item="ratings-meetups"]:hover .ni .a{stroke:#e8a45c}
.bn-item[data-item="ratings-meetups"]:hover .ni .x{stroke:#3fbf8f}

/* collapsible meter chip */
.finder-inline{position:relative}
.meter-chip{position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;cursor:pointer;
  background:rgba(0,0,0,.25);border:1px solid rgba(197,164,109,.5);border-radius:99px;padding:6px 11px;
  font:700 11.5px "Inter Tight",sans-serif;color:#F4DDA2;transition:border-color .15s}
.meter-chip:hover{border-color:#F4DDA2}
.meter-chip .ch-pearl{width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #7a5c3a 8%, #362718 42%, #140d06 78%);
  border:1.4px solid #f7ead9;box-shadow:0 0 0 1px rgba(197,164,109,.4)}
.meter-chip .ch-car{font-size:8px;color:#C5A46D;transition:transform .2s}
.finder-inline.meter-open .meter-chip .ch-car{transform:rotate(180deg)}
.finder-inline .meter{width:0;opacity:0;pointer-events:none;margin-left:-6px;transition:width .26s ease,opacity .2s ease,margin .26s}
.finder-inline.meter-open .meter{width:150px;opacity:1;pointer-events:auto;margin-left:0}
@media(max-width:1080px){.meter-chip{display:none}}

/* Taro Yuan floater: featured house + universal search */
.ty-float{position:fixed;top:80px;right:22px;width:300px;z-index:8000;color:#F4EFE7;
  background:linear-gradient(180deg,#191420,#131019);border:1px solid rgba(197,164,109,.55);border-radius:16px;
  padding:16px 16px 14px;box-shadow:0 30px 70px -24px rgba(0,0,0,.9)}
.ty-float::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,#b46bd6 35%,#d9a5f0 50%,#b46bd6 65%,transparent);opacity:.8}
@media(max-width:1080px){.ty-float{display:none}}
.ty-x{position:absolute;top:8px;right:10px;background:none;border:0;color:#8B8981;font-size:17px;cursor:pointer}
.ty-x:hover{color:#f7ead9}
.ty-kick{display:flex;align-items:center;gap:7px;margin:0 0 6px;font:700 9.5px "Inter Tight",sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:#C5A46D}
.ty-dot{width:6px;height:6px;border-radius:50%;background:#ff5d8f;box-shadow:0 0 8px #ff5d8f}
.ty-name{font:600 24px "Fraunces",serif;margin:0 0 2px;color:#f7ead9}
.ty-sub{font:italic 500 12.5px "Fraunces",serif;color:#8B8981;margin:0 0 10px}
.ty-visit{display:inline-block;font:700 12px "Inter Tight",sans-serif;color:#F4DDA2;text-decoration:none;
  border:1px solid rgba(197,164,109,.55);border-radius:99px;padding:7px 14px;margin-bottom:12px;transition:.15s}
.ty-visit:hover{border-color:#F4DDA2}
.ty-search input{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(197,164,109,.4);border-radius:10px;
  padding:9px 11px;color:#F4EFE7;font:500 12.5px "Inter Tight",sans-serif;outline:none}
.ty-search input:focus{border-color:#F4DDA2}
.ty-search input::placeholder{color:#8B8981}
.ty-res{max-height:280px;overflow:auto;margin-top:8px;border-top:1px solid rgba(197,164,109,.25)}
.ty-res .tg{font:700 9px "Inter Tight",sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#C5A46D;
  margin:10px 0 4px;padding-top:2px}
.ty-res a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-decoration:none;
  padding:6px 2px;font:600 13px "Inter Tight",sans-serif;color:#C8C6C1;border-bottom:1px solid rgba(244,239,231,.05)}
.ty-res a:hover{color:#f7ead9}
.ty-res a em{font:500 10.5px "Inter Tight",sans-serif;color:#8B8981;font-style:normal;white-space:nowrap}
.ty-res mark{background:none;color:#ff5d8f}

/* v3-fix */

/* tight single row: nothing shrinks invisibly; graceful hides instead */
.fuse .bn-bar{gap:6px}
.fuse .bn-trigger{padding:0 .5rem;font-size:.88em}
.fuse .bn-word{margin-right:2px}
.finder-inline{flex:0 0 auto;gap:7px}
.finder-inline .mb-field{width:150px;transition:width .2s}
.finder-inline .mb-field:focus-within{width:210px}
.finder-inline .mb-sort button{padding:6px 9px}
.finder-inline *{flex-shrink:0}
@media(max-width:1500px){.fuse .bn-saved{display:none}}
@media(max-width:1380px){.finder-inline .mb-sort{display:none}}
@media(max-width:1380px){.meter-chip{display:none}.finder-inline .meter{display:none}}

.finder-inline .mb-field{flex:0 0 auto;width:clamp(150px,17vw,200px)}

#bnpanel-pick-for-me .bn-mega,#bnpanel-guides .bn-mega,#bnpanel-ratings-meetups .bn-mega{display:block}
#bnpanel-guides .bn-col h4::after{display:none}
/* floater steps aside while any menu or the dock is open */
body:has(.bn-item[data-open]) .ty-float,body:has(#dock.on) .ty-float{opacity:0;pointer-events:none}
.ty-float{transition:opacity .18s ease}

/* cta-fx */

.bn-cta{padding:0 .72rem}
.bn-cta .uic{width:15px;height:15px;margin-right:.38rem;flex:0 0 auto}
@media(max-width:1500px){.fuse .bn-bar{gap:5px}}
@media(max-width:1240px){.meter-chip,.finder-inline .meter{display:none}.finder-inline .mb-field{width:130px}.fuse .bn-bar{gap:4px}}
@media(max-width:1200px){.bn-nav--right{display:none}}

/* ty-search-cta */

#tyFloat{padding:16px 16px 14px}
#tyFloat .ty-kick{color:#F4DDA2;font-size:10px;margin-bottom:9px}
#tyFloat .ty-search{position:relative}
#tyFloat .ty-mag{position:absolute;left:12px;top:12px;width:17px;height:17px;color:#C5A46D;pointer-events:none}
#tyFloat .ty-search input{width:100%;padding:12px 12px 12px 38px;font:500 14px "Inter Tight",sans-serif;border-radius:12px;border:1px solid rgba(197,164,109,.6);background:rgba(0,0,0,.45);color:#F4EFE7;outline:none}
#tyFloat .ty-search input:focus{border-color:#F4DDA2;box-shadow:0 0 0 3px rgba(244,221,162,.15)}
#tyFloat .ty-hint{margin:9px 2px 0;font:500 11px "Inter Tight",sans-serif;color:#8B8981;line-height:1.45}
#tyFloat .ty-feat{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(197,164,109,.2);font:600 11.5px "Inter Tight",sans-serif;color:#a49b88;text-decoration:none}
#tyFloat .ty-feat b{color:#F4DDA2;font-weight:600}
#tyFloat .ty-ftxt{flex:0 1 auto}
#tyFloat .ty-city{margin-left:auto;padding-left:8px;color:#F4DDA2;font-weight:600;white-space:nowrap}
#tyFloat .ty-feat:hover{color:#f7ead9}#tyFloat .ty-feat:hover .ty-city{color:#fff}
#tyFloat .ty-fdot{width:5px;height:5px;border-radius:50%;background:#ff5d8f;box-shadow:0 0 8px #ff5d8f;flex:0 0 auto}
#tyFloat .ty-search:has(.ty-res:not([hidden])) ~ .ty-hint,#tyFloat .ty-search:has(.ty-res:not([hidden])) ~ .ty-feat{display:none}
@keyframes tyGlow{0%,100%{box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 0 0 rgba(255,93,143,0)}50%{box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 0 4px rgba(255,93,143,.2)}}
#tyFloat{animation:tyGlow 2.6s ease-in-out 3}
@media(prefers-reduced-motion:reduce){#tyFloat{animation:none}}

/* --- sitewide fit overrides (finder header must never overflow a content page) --- */
.fuse .bn-bar{gap:6px}
.finder-inline .mb-field{width:122px!important}
.finder-inline .mb-field:focus-within{width:188px!important}
@media(max-width:1520px){.fuse .bn-saved{display:none}}
@media(max-width:1500px){.finder-inline .mb-field{width:112px!important}.fuse .bn-word{margin-right:2px}}
@media(max-width:1340px){.finder-inline .mb-sort{display:none}}
@media(max-width:1200px){.meter-chip,.finder-inline .meter{display:none}}
@media(max-width:1120px){.bn-nav{display:none}}

/* keep header dropdowns above page content (maps, cards) sitewide */
.fuse{isolation:isolate}
.bn-panel{z-index:50}
#sug,.mb-suggest,.finder-inline .sug{z-index:60}


/* ===== NAV V1 "PEARL RISE" (base + skin) ===== */

.finder-inline .mb-field{width:230px!important}
.finder-inline .mb-field:focus-within{width:270px!important}
@media(max-width:1500px){.finder-inline .mb-field{width:190px!important}}
@media(max-width:1340px){.finder-inline .mb-field{width:160px!important}}
.fuse .bn-item{position:relative}
.fuse .bn-panel{left:auto;right:auto;min-width:480px}
.rad-anchor{position:relative;display:inline-flex}
.rad-pop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:80;
  width:330px;padding:16px 16px 14px;border-radius:14px;color:#F4EFE7;
  background:linear-gradient(180deg,#1b1520,#121016);border:1px solid rgba(197,164,109,.5);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85)}
.rad-pop[hidden]{display:none}
.rad-title{margin:0 0 10px;font:700 10px "Inter Tight",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#C5A46D}
.rad-row{display:flex;align-items:center;gap:10px}
.rad-mid{flex:1;min-width:0}
/* the meter collapses inside .finder-inline by default — force it open inside the popover */
.rad-pop .meter{display:block!important;width:100%!important;opacity:1!important;pointer-events:auto!important;margin-left:0!important}
.rad-read{margin:8px 0 0;font:500 12px "Inter Tight",sans-serif;color:#a49b88;text-align:center}
.rad-read b{color:#F4DDA2;font-size:14px}
.rad-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(197,164,109,.55);background:rgba(0,0,0,.35);
  color:#F4DDA2;font-size:19px;line-height:1;cursor:pointer;flex:0 0 auto;transition:.15s}
.rad-btn:hover{border-color:#F4DDA2;background:rgba(197,164,109,.15)}
@media(max-width:920px){
  .fuse .bn-bar{display:flex;flex-wrap:nowrap;gap:6px;padding-left:10px;padding-right:10px}
  .finder-inline{display:flex!important;flex:1 1 auto;min-width:0;margin-left:4px;margin-right:6px}
  .finder-inline .mb-field{flex:1 1 auto;width:auto!important;min-width:80px;height:40px}
  .fuse .finder-inline .mb-sort{display:none!important}
  .fuse .finder-inline .mb-snd{display:none!important}
  .fuse .finder-inline .rad-anchor{display:none!important}
  .fuse .bn-actions{flex:0 0 auto}
  .fuse .bn-actions .bn-saved{display:none}
}


/* ============ V1 SKIN — "PEARL RISE" ============ */

/* 1) Caret -> pearl. Kill the chevron borders, paint a 5px pearl. */
.fuse .bn-caret{
  border:none;
  width:5px;height:5px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFFDF6 0%, #F4DDA2 48%, #C5A46D 100%);
  opacity:.85;
  transform:translateY(-1px);
  box-shadow:0 0 0 0 rgba(244,221,162,0);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.fuse .bn-trigger:hover .bn-caret{
  transform:translateY(-3px);            /* the pearl rises 2px */
  opacity:1;
  box-shadow:0 0 7px 1px rgba(244,221,162,.55);
}
/* open state: neon pearl, stronger glow (covers both the item flag and aria) */
.fuse .bn-item[data-open] .bn-caret,
.fuse .bn-trigger[aria-expanded="true"] .bn-caret{
  transform:translateY(-3px);
  opacity:1;
  background:radial-gradient(circle at 35% 30%, #ffd9e4 0%, #ff2f6d 55%, #b70c44 100%);
  box-shadow:0 0 10px 2px rgba(255,47,109,.65), 0 0 2px rgba(255,47,109,.9);
}

/* 2) Panel motion — "pour" in. Panel fades; the INNER mega slides so we never
      fight the base JS's inline left/transform centering on .bn-panel. */
@media (prefers-reduced-motion: no-preference){
  .fuse .bn-panel{
    transition:opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1), visibility .2s;
  }
  .fuse .bn-panel .bn-mega{
    transform:translateY(-8px);
    transition:transform .2s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  .fuse .bn-item[data-open] .bn-panel .bn-mega{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .fuse .bn-caret{transition:none}
  .fuse .bn-panel .bn-mega{transform:none;transition:none}
}

/* 3) Radius popover — jewel-box */
.fuse #radPop{
  border-radius:14px;
  border:1px solid rgba(197,164,109,.65);            /* outer gilt hairline */
  box-shadow:
    inset 0 0 0 1px rgba(244,221,162,.18),            /* inner gilt hairline (double) */
    inset 0 1px 0 rgba(244,221,162,.22),
    0 26px 60px -18px rgba(0,0,0,.88),
    0 0 34px -12px rgba(197,164,109,.35);
  overflow:hidden;
}
/* thin champagne top accent line */
.fuse #radPop::before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg, rgba(197,164,109,0), #C5A46D 30%, #F4DDA2 50%, #C5A46D 70%, rgba(197,164,109,0));
  pointer-events:none;
}
/* 20 tiny champagne ticks under the cream meter (~6px strip) */
.fuse #radPop .rad-mid .meter::after{
  content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:6px;
  background:repeating-linear-gradient(to right,
    rgba(197,164,109,.7) 0, rgba(197,164,109,.7) 1px,
    transparent 1px, transparent 5%);
  background-size:calc(100% - 1px) 100%;              /* land the 20th tick on the right edge */
  opacity:.75;pointer-events:none;
}
/* readout pulse (class added by v1-skin-js) */
.fuse #radPop #radVal{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .fuse #radPop #radVal.pulse{animation:v1RadPulse .24s cubic-bezier(.22,1,.36,1)}
  @keyframes v1RadPulse{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}
}
/* pressable minus / plus */
.fuse #radPop .rad-btn{transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease}
.fuse #radPop .rad-btn:hover{box-shadow:0 0 0 3px rgba(244,221,162,.18)}
.fuse #radPop .rad-btn:active{transform:translateY(1px);box-shadow:0 0 0 2px rgba(244,221,162,.12)}

/* 4) Mobile polish — in-bar search reads as the primary control */
@media (max-width:920px){
  .fuse .finder-inline .mb-input{
    border:1px solid #C5A46D;
    height:40px;box-sizing:border-box;
  }
}

/* ---- V1 production extras ---- */
/* sort toggle gone (results are always nearest-first) */
.finder-inline .mb-sort{display:none!important}
/* freed space -> longer search */
.finder-inline .mb-field{width:260px!important}
.finder-inline .mb-field:focus-within{width:300px!important}
@media(max-width:1500px){.finder-inline .mb-field{width:210px!important}}
@media(max-width:1340px){.finder-inline .mb-field{width:170px!important}}
@media(max-width:1380px){.rad-anchor .meter-chip{display:inline-flex!important}}
@media(max-width:1200px){.rad-anchor .meter-chip{display:inline-flex!important}}
@media(max-width:920px){.rad-anchor .meter-chip{display:none!important}}
/* Set range button in the popover */
.rad-set{display:block;width:100%;margin-top:12px;height:40px;border-radius:10px;border:0;cursor:pointer;
  font:600 13px "Inter Tight",sans-serif;letter-spacing:.02em;color:#fff;background:#ff2f6d;transition:filter .15s}
.rad-set:hover{filter:brightness(1.08)}
/* dock filter chips (cream card) */
.dock-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 22px 2px}
.dock-filters .dfl{font:700 9.5px "Inter Tight",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a6a55;margin-right:2px}
.dfc{font:600 12px "Inter Tight",sans-serif;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(43,26,16,.28);background:transparent;color:#2b1a10;transition:.14s}
.dfc:hover{border-color:#2b1a10}
.dfc[aria-pressed="true"]{background:#2b1a10;color:#fdf6ea;border-color:#2b1a10}
.dfc .ct{opacity:.65;font-weight:500;margin-left:4px}

/* ===== NAV F3 BEACON base fixes (no Up next, roomy dropdown) ===== */

/* no more "Up next" */
.updeck{display:none!important}
/* suggestion panel: never clip — size to content, roomy rows, count fully visible */
.mb-sug{left:0;right:auto!important;width:max-content;min-width:380px;max-width:min(480px,92vw)}
.mb-sug button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;white-space:nowrap}
.mb-sug button>span{display:flex;flex-direction:column;min-width:0}
.mb-sug .rc{margin-left:auto;flex:0 0 auto;white-space:nowrap}

/* ===== NAV F3 BEACON skin (crystal boba, sweep, chip, LED pill) ===== */

/* ===================== F3 SKIN — "NEON BEACON" ===================== */
@property --f3a{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---- 1. empty-state CTA: neon border sweep on the cream field ---- */
.f3-sweep{position:absolute;inset:-3px;border-radius:14px;pointer-events:none;opacity:0;z-index:4;padding:2px;
  background:conic-gradient(from var(--f3a,0deg),transparent 0 74%,rgba(255,47,109,.85) 86%,#F4DDA2 93%,transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .25s ease}
.mb-field.f3-empty .f3-sweep{opacity:.9}
@media(prefers-reduced-motion:no-preference){
  .mb-field.f3-empty .f3-sweep{animation:f3sweep 3s linear infinite}
  @keyframes f3sweep{to{--f3a:360deg}}
}
.mb-field.f3-empty .mb-input::placeholder{color:#7d5f34;font-weight:700}

/* ---- 1b. pin beacon button, right of the field ---- */
.f3-beacon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;cursor:pointer;position:relative;
  border:2px solid #C5A46D;background:radial-gradient(circle at 32% 28%,#2a1f10,#0B0C0E 78%);
  color:#F4DDA2;display:grid;place-items:center;padding:0;
  box-shadow:0 4px 10px -4px #000;transition:border-color .15s,color .15s,box-shadow .2s}
.f3-beacon svg{width:16px;height:16px}
.f3-beacon:hover{border-color:#F4DDA2;color:#fff}
.f3-beacon:focus-visible{outline:2px solid #F4DDA2;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
  .f3-beacon{animation:f3pulse 2.6s ease-in-out infinite}
  @keyframes f3pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,47,109,0),0 4px 10px -4px #000}
    50%{box-shadow:0 0 0 5px rgba(255,47,109,.14),0 0 15px rgba(255,47,109,.4),0 4px 10px -4px #000}}
}
.f3-beacon.f3-err{border-color:#ff2f6d;color:#ff2f6d}
@media(prefers-reduced-motion:no-preference){
  .f3-beacon.f3-err{animation:f3err .5s ease 2}
  @keyframes f3err{50%{box-shadow:0 0 0 6px rgba(255,47,109,.5),0 0 18px #ff2f6d}}
}
@media(max-width:1100px){.f3-beacon{display:none}}

/* ---- 1c. helper strip under the empty, focused field ---- */
.f3-helper{position:absolute;top:calc(100% + 7px);left:0;z-index:59;display:none;white-space:nowrap;
  background:linear-gradient(180deg,#16120b,#0B0C0E);border:1px solid rgba(197,164,109,.55);border-radius:10px;
  padding:7px 12px;font:600 11.5px "Inter Tight",sans-serif;color:#f7ead9;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.f3-helper::before{content:"";display:inline-block;width:11px;height:11px;margin-right:8px;vertical-align:-2px;background:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Ccircle%20cx%3D%224.3%22%20cy%3D%223.5%22%20r%3D%221.15%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E') no-repeat center/contain;animation:f3crystal 2.2s ease-in-out infinite}
.mb-field.f3-hint .f3-helper{display:block}

/* ---- 2. Open-now LED status pill, mounted in the card header zone ---- */
.f3-lednest{position:absolute;top:9px;right:54px;z-index:6}
.f3-lednest .dfc[data-open]{display:inline-flex;align-items:center;gap:7px;margin:0;
  background:#14100a;color:#f7ead9;border:1px solid rgba(197,164,109,.5);border-radius:99px;
  padding:5px 12px;font:700 11px "Inter Tight",sans-serif;letter-spacing:.03em;cursor:pointer;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.45)}
.f3-lednest .dfc[data-open]::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#5a5347;box-shadow:inset 0 1px 1px rgba(0,0,0,.55);transition:background .15s,box-shadow .15s}
.f3-lednest .dfc[data-open]:hover{border-color:#F4DDA2}
.f3-lednest .dfc[data-open][aria-pressed="true"]{background:#14100a;color:#eafff4;border-color:#3fbf8f}
.f3-lednest .dfc[data-open][aria-pressed="true"]::before{background:#3fbf8f;box-shadow:0 0 8px #3fbf8f,0 0 2px #3fbf8f}

/* ---- 3. cohesive selected-location chip inside the field ---- */
.mb-field.f3-haschip .mb-input{color:transparent}
.f3-chip{position:absolute;inset:2px;z-index:5;display:flex;align-items:center;gap:7px;cursor:text;overflow:hidden;
  background:linear-gradient(180deg,#fdf6ea,#f7ead9);border-radius:9px;padding:0 4px 0 10px}
.f3-chip>svg{flex:0 0 auto;width:13px;height:13px;color:#c92a4e}
.f3-chip .fc-city{font:600 13px "Inter Tight",sans-serif;color:#2b1a10;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.f3-chip .fc-zip{flex:0 0 auto;font:700 10.5px "Inter Tight",sans-serif;color:#8a6a2e;
  border:1px solid rgba(197,164,109,.8);border-radius:99px;padding:2px 7px;letter-spacing:.04em}
.f3-chipx{flex:0 0 auto;margin-left:auto;width:22px;height:22px;border-radius:50%;border:0;background:none;
  cursor:pointer;color:#8a6a55;font-size:14px;line-height:1;display:grid;place-items:center;padding:0}
.f3-chipx:hover{background:#191309;color:#F4DDA2}

/* ---- 4. dropdown polish ---- */
.mb-sug{border-radius:12px;max-height:340px;overflow:auto;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 4px 0 rgba(0,0,0,.2)}
.mb-sug .cap{display:flex;align-items:center;gap:8px;text-transform:none;
  font:700 12px/1 "Inter Tight",sans-serif;font-variant:all-small-caps;letter-spacing:.14em;color:#8a6a2e}
.mb-sug .cap::before{content:"";width:11px;height:11px;flex:0 0 auto;background:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Ccircle%20cx%3D%224.3%22%20cy%3D%223.5%22%20r%3D%221.15%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E') no-repeat center/contain;animation:f3crystal 2.2s ease-in-out infinite}
.mb-sug button{position:relative;transition:padding-left .18s ease,background .15s ease}
.mb-sug button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#F4DDA2,#C5A46D);opacity:0;transition:opacity .15s}
.mb-sug button:hover,.mb-sug button.act{padding-left:23px;background:rgba(197,164,109,.18)}
.mb-sug button:hover::before,.mb-sug button.act::before{opacity:1}
.mb-sug .rs{font-size:12px;color:#8a6a55}
.mb-sug .rn{font-weight:700}
.mb-sug .rn.f3-zip{font-weight:800;color:#9c7b40;letter-spacing:.04em}
.mb-sug .rc{margin-left:auto;flex:0 0 auto;white-space:nowrap;background:#1b140b;color:#F4DDA2;
  border:1px solid rgba(197,164,109,.35);padding:3px 9px;border-radius:99px;
  font:700 10.5px "Inter Tight",sans-serif}
.mb-sug .rc.z{color:#cbb896;background:#191512}


/* crystal boba: 3-frame squash & stretch bounce with a glow pop */
@keyframes f3crystal{
  0%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Ccircle%20cx%3D%224.3%22%20cy%3D%223.5%22%20r%3D%221.15%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E');transform:translateY(0) scale(1);filter:drop-shadow(0 0 2px rgba(143,217,198,.65))}
  18%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g3%22%20cx%3D%2235%25%22%20cy%3D%2226%25%22%20r%3D%2278%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23eaf8f4%22%20stop-opacity%3D%220.94%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239fe2cf%22%20stop-opacity%3D%220.75%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse%20cx%3D%226%22%20cy%3D%225.6%22%20rx%3D%224.3%22%20ry%3D%225.4%22%20fill%3D%22url%28%23g3%29%22/%3E%3Cellipse%20cx%3D%226%22%20cy%3D%225.6%22%20rx%3D%224.3%22%20ry%3D%225.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.8%29%22%20stroke-width%3D%220.6%22/%3E%3Cellipse%20cx%3D%224.5%22%20cy%3D%223%22%20rx%3D%221.0%22%20ry%3D%221.35%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.97%22/%3E%3C/svg%3E');transform:translateY(-3px) scale(1.02);filter:drop-shadow(0 0 4px rgba(143,217,198,.8))}
  38%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Ccircle%20cx%3D%224.3%22%20cy%3D%223.5%22%20r%3D%221.15%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E');transform:translateY(-5px) scale(1.14);filter:drop-shadow(0 0 9px rgba(163,231,212,1))}
  56%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g3%22%20cx%3D%2235%25%22%20cy%3D%2226%25%22%20r%3D%2278%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23eaf8f4%22%20stop-opacity%3D%220.94%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239fe2cf%22%20stop-opacity%3D%220.75%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse%20cx%3D%226%22%20cy%3D%225.6%22%20rx%3D%224.3%22%20ry%3D%225.4%22%20fill%3D%22url%28%23g3%29%22/%3E%3Cellipse%20cx%3D%226%22%20cy%3D%225.6%22%20rx%3D%224.3%22%20ry%3D%225.4%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.8%29%22%20stroke-width%3D%220.6%22/%3E%3Cellipse%20cx%3D%224.5%22%20cy%3D%223%22%20rx%3D%221.0%22%20ry%3D%221.35%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.97%22/%3E%3C/svg%3E');transform:translateY(-2px) scale(1.03);filter:drop-shadow(0 0 5px rgba(143,217,198,.85))}
  72%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g2%22%20cx%3D%2235%25%22%20cy%3D%2238%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.72%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse%20cx%3D%226%22%20cy%3D%227%22%20rx%3D%225.6%22%20ry%3D%224.1%22%20fill%3D%22url%28%23g2%29%22/%3E%3Cellipse%20cx%3D%226%22%20cy%3D%227%22%20rx%3D%225.6%22%20ry%3D%224.1%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Cellipse%20cx%3D%224.2%22%20cy%3D%225.2%22%20rx%3D%221.25%22%20ry%3D%220.95%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E');transform:translateY(0) scale(1);filter:drop-shadow(0 0 3px rgba(143,217,198,.7))}
  84%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g2%22%20cx%3D%2235%25%22%20cy%3D%2238%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.72%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse%20cx%3D%226%22%20cy%3D%227%22%20rx%3D%225.6%22%20ry%3D%224.1%22%20fill%3D%22url%28%23g2%29%22/%3E%3Cellipse%20cx%3D%226%22%20cy%3D%227%22%20rx%3D%225.6%22%20ry%3D%224.1%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Cellipse%20cx%3D%224.2%22%20cy%3D%225.2%22%20rx%3D%221.25%22%20ry%3D%220.95%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E');transform:translateY(0) scaleX(1.06) scaleY(.94);filter:drop-shadow(0 0 2px rgba(143,217,198,.65))}
  100%{background-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%23e6f6f1%22%20stop-opacity%3D%220.92%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238fd9c6%22%20stop-opacity%3D%220.7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28244%2C221%2C162%2C0.75%29%22%20stroke-width%3D%220.6%22/%3E%3Ccircle%20cx%3D%224.3%22%20cy%3D%223.5%22%20r%3D%221.15%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22/%3E%3C/svg%3E');transform:translateY(0) scale(1);filter:drop-shadow(0 0 2px rgba(143,217,198,.65))}
}
.f3-helper::before,.mb-sug .cap::before{animation:f3crystal 1.7s cubic-bezier(.34,1.3,.5,1) infinite;will-change:transform,filter}
@media(prefers-reduced-motion:reduce){.f3-helper::before,.mb-sug .cap::before{animation:none}}