/* ==========================================================================
   Be Online 8.1 — navigation
   Desktop: pill nav items and a floating mega-menu card per product — rich
   links (icon, name, one-line description), a featured panel with the live
   "from" price, and a quick-links strip. Tablet/phone: the menu sheet drills
   down like an app — a product list, then each product's own view with Back.
   Loaded after chrome.css on every page.
   ========================================================================== */

/* ---------- header: glass once the page scrolls ---------- */
.bo-header{transition:box-shadow .25s ease,background-color .25s ease}
html.bo-scrolled .bo-header{background:color-mix(in srgb,var(--surface) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  box-shadow:0 12px 32px -24px rgba(12,58,34,.5);border-bottom-color:transparent}

/* ---------- desktop nav items ---------- */
.bo-menu{align-self:stretch;align-items:stretch;gap:2px}
.bo-mi{display:flex;align-items:center}
.bo-mi>a,.bo-mi-a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--mi-pad,14px);
  border-radius:999px;color:var(--ink-soft);font-size:var(--be-nav);font-weight:500;transition:background-color .18s,color .18s}
.bo-mi>a .bo-cv{transition:transform .22s ease;opacity:.7}
.bo-mi:hover>a,.bo-mi:focus-within>a,.bo-mi.is-open>a{background:color-mix(in srgb,var(--pc,var(--accent)) 10%,transparent);color:var(--pc-ink,var(--accent))}
.bo-mi:hover>a .bo-cv,.bo-mi:focus-within>a .bo-cv,.bo-mi.is-open>a .bo-cv{transform:rotate(180deg);opacity:1}
/* the section you are in: a short bar under the label */
.bo-mi.is-current>a,.bo-mi>a[aria-current]{color:var(--pc-ink,var(--accent));font-weight:600}
.bo-mi.is-current>a::after,.bo-mi>a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--pc,var(--accent))}
@media (min-width:1241px) and (max-width:1480px){:root{--mi-pad:9px}}
@media (min-width:1241px) and (max-width:1300px){:root{--mi-pad:7px}}

/* ---------- desktop mega panel ---------- */
.bo-mm{position:absolute;left:0;right:0;top:100%;z-index:59;display:flex;justify-content:center;padding:10px var(--be-gutter) 0;
  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .2s}
.bo-mm::before{content:"";position:absolute;left:0;right:0;top:-12px;height:24px}
.bo-mi:hover>.bo-mm,.bo-mi:focus-within>.bo-mm,.bo-mi.is-open>.bo-mm{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.05s,.05s,0s}
.bo-mi.is-shut>.bo-mm{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.bo-mm-card{width:min(100%,calc(var(--cols) * 268px + 330px + 54px));background:var(--surface);border:1px solid var(--hair);border-radius:22px;overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(12,58,34,.42),0 10px 24px -16px rgba(12,58,34,.2)}
.bo-mm-body{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr)) 312px;gap:6px 14px;padding:18px 18px 14px}
.bo-mm-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.bo-mm-h{margin:6px 10px 6px;font:600 11.5px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bo-ml{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:9px 10px;border-radius:14px;transition:background-color .15s}
.bo-ml-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--pc) 11%,var(--surface));color:var(--pc-ink);transition:transform .2s ease}
.bo-ml-tx{min-width:0}
.bo-ml-tx b{display:block;font:600 14.5px/1.25 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink)}
.bo-ml-tx small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.bo-ml-ext{font-size:12px;color:var(--muted)}
.bo-ml:hover,.bo-ml:focus-visible{background:color-mix(in srgb,var(--pc) 7%,var(--surface))}
.bo-ml:hover .bo-ml-ic{transform:scale(1.06)}
.bo-ml:hover .bo-ml-tx b{color:var(--pc-ink)}
.bo-ml.is-current{background:color-mix(in srgb,var(--pc) 9%,var(--surface))}
.bo-ml.is-current .bo-ml-tx b{color:var(--pc-ink)}

/* featured: dark forest card, the product colour as a glow — white text stays
   readable for every pillar (amber and sky would not carry white type) */
.bo-mm-feat,.bo-mn-feat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border-radius:16px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--pc) 62%,transparent) 0%,transparent 62%),linear-gradient(160deg,#124a2c,#0a2a19)}
.bo-mm-feat::after,.bo-mn-feat::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.bo-mm-eb{font:600 11px/1.2 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.bo-mm-ft{font:700 20px/1.15 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.bo-mm-fb{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.bo-mm-price-amt{display:inline-flex;align-items:baseline;gap:1px}
.bo-mm-price{display:inline-flex;align-items:baseline;gap:5px;align-self:flex-start;margin-top:4px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.bo-mm-price small{font-size:12px;color:rgba(255,255,255,.75)}
.bo-mm-price b{font:700 18px/1 "Bricolage Grotesque",system-ui,sans-serif;color:#fff}
.bo-mm-cta{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;font:600 14px/1 "Bricolage Grotesque",system-ui,sans-serif;color:#d6f5a8}
.bo-mm-cta svg{transition:transform .2s ease}
.bo-mm-feat:hover .bo-mm-cta svg,.bo-mn-feat:hover .bo-mm-cta svg{transform:translateX(3px)}

.bo-mm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:11px 18px;background:var(--surface-2);border-top:1px solid var(--hair);font-size:13.5px}
.bo-mm-quick{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.bo-mm-ql{margin-right:4px;color:var(--muted);font-weight:500}
.bo-mm-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--hair);color:var(--ink);font-weight:500;transition:border-color .15s,color .15s}
.bo-mm-chip:hover{border-color:var(--pc);color:var(--pc-ink)}
.bo-mm-all{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--pc-ink)}
.bo-mm-help{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.bo-mm-help svg{color:var(--accent)}
.bo-mm-help b{color:var(--ink);font-weight:600}
.bo-mm-help:hover b{color:var(--accent)}

/* the old full-width panel is gone */
.bo-mega{display:none!important}

/* ==========================================================================
   Tablet + phone: the menu sheet drills down like an app
   ========================================================================== */
.bo-mn{position:relative}
.bo-mn-view[hidden]{display:none!important}
/* the sheet only ever scrolls down: the 32px slide must not open a sideways
   scroll, and reaching the end of the menu must not scroll the page behind */
.bo-msheet-body{overflow-x:hidden;overscroll-behavior:contain}
.bo-mn-view.is-in{animation:bo-mn-in .3s cubic-bezier(.32,.72,0,1)}
.bo-mn-view.is-back{animation:bo-mn-back .3s cubic-bezier(.32,.72,0,1)}
@keyframes bo-mn-in{from{opacity:0;transform:translate3d(32px,0,0)}to{opacity:1;transform:none}}
@keyframes bo-mn-back{from{opacity:0;transform:translate3d(-32px,0,0)}to{opacity:1;transform:none}}

/* search: a real field, not a link dressed as one */
.bo-mn-search{display:flex;align-items:center;gap:8px;min-height:54px;padding:6px 6px 6px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--hair-strong);transition:border-color .15s,box-shadow .15s}
.bo-mn-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.bo-mn-search svg{flex:none;color:var(--accent)}
.bo-mn-search input{flex:1;min-width:0;height:42px;border:0;outline:0;background:none;font:500 16px "Hanken Grotesk",system-ui,sans-serif;color:var(--ink)}
.bo-mn-search input::placeholder{color:var(--muted)}
.bo-mn-search button{flex:none;height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--grad);color:#fff;font:600 14.5px "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}

/* product rows */
.bo-mn-list{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--surface)}
.bo-mn-row,.bo-mn-switch{display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;gap:12px;align-items:center;width:100%;min-height:68px;padding:10px 14px;
  border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.bo-mn-row+.bo-mn-row{border-top:1px solid var(--hair)}
.bo-mn-row:active,.bo-mn-switch:active{background:color-mix(in srgb,var(--pc,var(--accent)) 8%,var(--surface))}
.bo-mn-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--pc,var(--accent));color:#fff;box-shadow:0 8px 16px -10px var(--pc,var(--accent))}
.bo-mn-tx{min-width:0}
.bo-mn-tx b{display:block;font:600 16px/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink)}
.bo-mn-tx small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.bo-mn-from{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.1;white-space:nowrap}
.bo-mn-from small{font-size:11.5px;color:var(--muted)}
.bo-mn-from b{font:700 15px/1.1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--pc-ink,var(--ink))}
.bo-mn-go{color:var(--muted);display:grid;place-items:center}
.bo-mn-row.is-current .bo-mn-tx b{color:var(--pc-ink)}
.bo-mn-switch{grid-template-columns:44px minmax(0,1fr) 18px;margin-top:12px;border:1px dashed var(--hair-strong);border-radius:18px;background:var(--surface-2)}
.bo-mn-switch .bo-mn-ic{background:var(--forest);box-shadow:none}

/* help & company: four tiles */
.bo-mn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bo-mn-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 4px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--hair);font-size:12.5px;font-weight:600;color:var(--ink);text-align:center}
.bo-mn-tile svg{color:var(--accent)}
.bo-mn-tile:active{border-color:var(--accent)}

/* a product's own view */
.bo-mn-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-6px 0 8px -10px;padding:0 12px 0 8px;border:0;border-radius:999px;background:none;
  font:600 15px "Bricolage Grotesque",system-ui,sans-serif;color:var(--accent);cursor:pointer}
.bo-mn-back:active{background:var(--surface-2)}
.bo-mn-hero{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:18px;
  background:color-mix(in srgb,var(--pc) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--pc) 22%,var(--surface))}
.bo-mn-hero .bo-mn-ic{width:52px;height:52px;border-radius:15px}
.bo-mn-hero .bo-mn-tx b{font-size:19px}
.bo-mn-links{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--surface)}
.bo-mnl{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:12px;align-items:center;min-height:62px;padding:10px 14px;color:inherit}
.bo-mnl+.bo-mnl{border-top:1px solid var(--hair)}
.bo-mnl::after{content:"";width:8px;height:8px;border-top:2px solid var(--hair-strong);border-right:2px solid var(--hair-strong);transform:rotate(45deg);justify-self:center}
.bo-mnl-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--pc) 11%,var(--surface));color:var(--pc-ink)}
.bo-mnl-tx{min-width:0}
.bo-mnl-tx b{display:block;font:600 15.5px/1.25 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink)}
.bo-mnl-tx small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.bo-mnl-ext{font-size:12px;color:var(--muted)}
.bo-mnl:active{background:color-mix(in srgb,var(--pc) 7%,var(--surface))}
.bo-mnl.is-current .bo-mnl-tx b{color:var(--pc-ink)}
.bo-mn-chips{display:flex;flex-wrap:wrap;gap:8px}
.bo-mn-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;background:var(--surface-2);border:1px solid var(--hair);font-size:14px;font-weight:500;color:var(--ink)}
.bo-mn-feat{margin-top:16px}
.bo-mn-help{display:flex;align-items:center;gap:10px;min-height:52px;margin-top:16px;padding:0 16px;border-radius:16px;background:var(--surface-2);color:var(--muted);font-size:14.5px}
.bo-mn-help svg{color:var(--accent)}
.bo-mn-help b{color:var(--ink)}

/* the sheet's captions sit a little tighter in the new rhythm */
.bo-mn .bo-msheet-cap{margin:20px 4px 8px}

@media (prefers-reduced-motion:reduce){
  .bo-mn-view.is-in,.bo-mn-view.is-back{animation:none}
  .bo-mm{transition:none;transform:none}
}