/*! BioCollex Refresh · module: menu · the header's slide-out menu (phones and tablets)
 * Everything is scoped to .bxrf-mn, which menu.js puts on the theme's
 * [role=dialog][aria-label=Menu] panel, so the theme's plain menu shows if the
 * script never runs. Phone first; 640px+ turns the full-screen panel into a side
 * sheet with a backdrop. The panel is off screen until opened, so nothing here
 * can jump on page load. Sized to fit a 375 x 667 iPhone without scrolling
 * (the theme zooms the page 1.1x, so that screen is about 341 x 606 CSS px).
 */

.bxrf-mn {
  --bxrf-mn-row: 48px;
  --bxrf-mn-ease: cubic-bezier(.22, 1, .36, 1);
  background: linear-gradient(180deg, #f3f7fd 0%, #fff 46%);
}

/* ---------- Branded top: logo row on navy, then the Shop / COA cards ---------- */
.bxrf-mn .bxrf-mn-top {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 0 0 16px; border: 0; border-radius: 0 0 26px 26px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(79, 143, 230, .55) 0%, rgba(79, 143, 230, 0) 58%),
    radial-gradient(80% 70% at 0% 100%, rgba(42, 106, 208, .35) 0%, rgba(42, 106, 208, 0) 60%),
    linear-gradient(160deg, #0a1f44 0%, #132c5c 55%, #1d4590 100%);
  box-shadow: 0 18px 36px -24px rgba(10, 31, 68, .7);
}
/* A faint hexagon lattice drifting behind the logo (decoration only) */
.bxrf-mn .bxrf-mn-fx {
  position: absolute; z-index: -1; inset: -40px -60px auto auto; width: 260px; height: 220px; opacity: .16; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64' fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16z'/%3E%3Ccircle cx='28' cy='2' r='2.4' fill='white'/%3E%3Ccircle cx='4' cy='44' r='2.4' fill='white'/%3E%3C/svg%3E") 0 0 / 56px 64px;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: bxrf-mn-drift 18s ease-in-out infinite alternate;
}
@keyframes bxrf-mn-drift { to { transform: translate3d(-18px, 14px, 0) rotate(4deg); } }
.bxrf-mn .bxrf-mn-top .bx-logo-name { color: #fff !important; }
.bxrf-mn .bxrf-mn-top .bx-logo-sub { color: #9cc0f5 !important; }
.bxrf-mn .bxrf-mn-top .bx-logo-mark { display: block; width: 30px; height: 30px; filter: brightness(0) invert(1); opacity: .95; }
.bxrf-mn .bxrf-mn-top button[aria-label="Close menu"] {
  display: grid; place-items: center; width: 42px; height: 42px; margin-right: -4px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, transform .2s var(--bxrf-mn-ease);
}
.bxrf-mn .bxrf-mn-top button[aria-label="Close menu"]:active { transform: scale(.92); }
.bxrf-mn .bxrf-mn-top button[aria-label="Close menu"]:focus-visible { outline: 2px solid #9cc0f5; outline-offset: 2px; }

.bxrf-mn .bxrf-mn-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 0; }
.bxrf-mn a.bxrf-mn-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 64px;
  padding: 11px 12px 12px; border-radius: 16px; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .2s var(--bxrf-mn-ease), background-color .2s ease;
}
.bxrf-mn a.bxrf-mn-card.is-shop { background: linear-gradient(135deg, #3b7be0 0%, #2a6ad0 60%, #2459b5 100%); box-shadow: 0 10px 22px -12px rgba(79, 143, 230, .95), inset 0 1px 0 rgba(255, 255, 255, .25); }
.bxrf-mn a.bxrf-mn-card:active { transform: scale(.97); }
.bxrf-mn .bxrf-mn-card-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .16); }
.bxrf-mn .bxrf-mn-card-t { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.bxrf-mn .bxrf-mn-card-t b { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.bxrf-mn .bxrf-mn-card-t small { margin-top: 1px; font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bxrf-mn .bxrf-mn-card-go { position: absolute; top: 12px; right: 11px; opacity: .8; }
.bxrf-mn a.bxrf-mn-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- The menu links: icon tile, label, chevron ---------- */
.bxrf-mn nav.bxrf-mn-list {
  flex: 1 1 auto; min-height: 0; gap: 2px; padding: 12px 12px 10px;
  /* As a scroll box the list escapes the panel's touch-none, so a swipe on a list that fits would
     scroll the page behind the menu: block it like the theme does. */
  overflow-y: auto; overscroll-behavior: contain; touch-action: none;
}
/* Only a list taller than its space (short screens) scrolls; menu.js measures it on every open */
.bxrf-mn nav.bxrf-mn-list.is-tall { touch-action: pan-y; }
.bxrf-mn nav a.bxrf-mn-link {
  position: relative; justify-content: flex-start; gap: 12px; min-height: var(--bxrf-mn-row); padding: 6px 12px 6px 8px;
  border-radius: 14px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--bxrf-ink, #0b1530);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, transform .15s ease;
}
.bxrf-mn nav a.bxrf-mn-link > span:not(.bxrf-mn-ic) { flex: 1 1 auto; min-width: 0; }
.bxrf-mn nav a.bxrf-mn-link > svg { flex: none; margin-left: auto; color: #a3b1c6; transition: transform .2s var(--bxrf-mn-ease), color .2s ease; }
.bxrf-mn .bxrf-mn-ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px;
  color: var(--bxrf-blue, #2a6ad0); background: var(--bxrf-mist, #eef4fe); box-shadow: inset 0 0 0 1px rgba(42, 106, 208, .1);
  transition: background .2s ease, color .2s ease;
}
.bxrf-mn nav a.bxrf-mn-link:active { transform: scale(.985); background: #eaf1fc; }
.bxrf-mn nav a.bxrf-mn-link:focus-visible { outline: 2px solid var(--bxrf-blue, #2a6ad0); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .bxrf-mn nav a.bxrf-mn-link:hover { background: #eef4fe; }
  .bxrf-mn nav a.bxrf-mn-link:hover > svg { transform: translateX(3px); color: var(--bxrf-blue, #2a6ad0); }
}
/* Current page: tinted row, filled icon, a bar on the left and a dot instead of the chevron */
.bxrf-mn nav a.bxrf-mn-link[aria-current="page"],
.bxrf-mn nav a.bxrf-mn-link.is-section {
  color: var(--bxrf-navy-2, #213b66); background: linear-gradient(90deg, #e3edfc 0%, #eef4fe 70%, rgba(238, 244, 254, .4) 100%);
}
.bxrf-mn nav a.bxrf-mn-link[aria-current="page"]::before,
.bxrf-mn nav a.bxrf-mn-link.is-section::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bxrf-blue, #2a6ad0);
}
.bxrf-mn nav a.bxrf-mn-link[aria-current="page"] .bxrf-mn-ic,
.bxrf-mn nav a.bxrf-mn-link.is-section .bxrf-mn-ic {
  color: #fff; background: linear-gradient(135deg, var(--bxrf-navy-2, #213b66), var(--bxrf-blue, #2a6ad0));
  box-shadow: 0 8px 16px -10px rgba(42, 106, 208, .95);
}
.bxrf-mn nav a.bxrf-mn-link[aria-current="page"] > svg { opacity: 0; }
.bxrf-mn nav a.bxrf-mn-link[aria-current="page"]::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--bxrf-blue, #2a6ad0); box-shadow: 0 0 0 4px rgba(42, 106, 208, .16);
}

/* ---------- Bottom: sign-in / account card ---------- */
.bxrf-mn .bxrf-mn-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 0; background: transparent; }
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 18px;
  color: var(--bxrf-ink, #0b1530); text-decoration: none; background: #fff;
  box-shadow: 0 1px 2px rgba(11, 21, 48, .06), 0 14px 30px -18px rgba(11, 21, 48, .35), inset 0 0 0 1px var(--bxrf-line, #dfe6f1);
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .2s ease;
}
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc > svg,
.bxrf-mn .bxrf-mn-acc-av {
  flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 11px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--bxrf-navy-2, #213b66), var(--bxrf-blue, #2a6ad0)); box-shadow: 0 8px 16px -9px rgba(42, 106, 208, .95);
}
.bxrf-mn .bxrf-mn-acc-av { display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.bxrf-mn .bxrf-mn-acc-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bxrf-mn .bxrf-mn-acc-t b { font-size: 16px; font-weight: 700; line-height: 1.2; }
.bxrf-mn .bxrf-mn-acc-t small { margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--bxrf-muted, #5b6a7f); }
.bxrf-mn .bxrf-mn-go {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  color: var(--bxrf-blue, #2a6ad0); background: var(--bxrf-mist, #eef4fe); transition: transform .2s var(--bxrf-mn-ease);
}
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc:active { transform: scale(.985); }
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc:focus-visible { outline: 2px solid var(--bxrf-blue, #2a6ad0); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc:hover .bxrf-mn-go { transform: translateX(3px); }
}
/* Signed in, the bottom link may be "Log out": a quiet row, not a call to action */
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc.is-out { min-height: 48px; color: var(--bxrf-muted, #5b6a7f); background: transparent; box-shadow: none; }
.bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc.is-out > svg { padding: 8px; color: var(--bxrf-muted, #5b6a7f); background: #eef2f7; box-shadow: none; }

/* ---------- Entrance: rows, cards and the account card arrive in turn ---------- */
@keyframes bxrf-mn-row { from { opacity: 0; transform: translate3d(-16px, 0, 0); } }
@keyframes bxrf-mn-rise { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); } }
.bxrf-mn.bxrf-mn-in nav a.bxrf-mn-link { animation: bxrf-mn-row .5s var(--bxrf-mn-ease) both; animation-delay: calc(140ms + var(--bxrf-mn-i, 0) * 38ms); }
.bxrf-mn.bxrf-mn-in .bxrf-mn-card { animation: bxrf-mn-rise .5s var(--bxrf-mn-ease) both; animation-delay: 90ms; }
.bxrf-mn.bxrf-mn-in .bxrf-mn-card + .bxrf-mn-card { animation-delay: 150ms; }
.bxrf-mn.bxrf-mn-in .bxrf-mn-foot a.bxrf-mn-acc { animation: bxrf-mn-rise .55s var(--bxrf-mn-ease) both; animation-delay: 360ms; }

/* The chat bubble would sit on the account card while the menu is open */
html.bxrf-mn-on #bcx-agent:not(.bcx-open) { opacity: 0 !important; pointer-events: none !important; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; }

/* ---------- Short phones (390 x 664 Safari, 375 x 667): tighter rows so everything fits ---------- */
@media (max-height: 720px) {
  .bxrf-mn { --bxrf-mn-row: 45px; }
  .bxrf-mn .bxrf-mn-top { padding-bottom: 12px; }
  .bxrf-mn a.bxrf-mn-card { gap: 6px; min-height: 0; padding: 9px 11px 10px; }
  .bxrf-mn .bxrf-mn-card-ic { width: 26px; height: 26px; border-radius: 8px; }
  .bxrf-mn nav.bxrf-mn-list { padding-top: 8px; padding-bottom: 6px; }
  .bxrf-mn .bxrf-mn-ic { width: 34px; height: 34px; }
  .bxrf-mn .bxrf-mn-foot { padding-top: 6px; }
  .bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc { min-height: 56px; padding-top: 7px; padding-bottom: 7px; }
}
@media (max-height: 600px) {
  .bxrf-mn .bxrf-mn-card-t small { display: none; }
}

/* ---------- Tablets: a side sheet with a backdrop instead of a full-screen panel ---------- */
.bxrf-mn-scrim { display: none; }
@media (min-width: 640px) {
  .bxrf-mn { right: auto; width: min(420px, 88vw); border-radius: 0 28px 28px 0; box-shadow: 0 0 0 1px rgba(11, 21, 48, .04), 30px 0 60px -30px rgba(10, 31, 68, .45); overflow: hidden; }
  .bxrf-mn .bxrf-mn-top { border-radius: 0 0 26px 0; }
  .bxrf-mn-scrim {
    display: block; position: fixed; inset: 0; z-index: 69; background: rgba(10, 31, 68, .38);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  html.bxrf-mn-on .bxrf-mn-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
}
@media (min-width: 1024px) { .bxrf-mn-scrim { display: none !important; } } /* the theme hides the menu itself from here */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bxrf-mn .bxrf-mn-fx { animation: none; }
  .bxrf-mn.bxrf-mn-in nav a.bxrf-mn-link,
  .bxrf-mn.bxrf-mn-in .bxrf-mn-card,
  .bxrf-mn.bxrf-mn-in .bxrf-mn-foot a.bxrf-mn-acc { animation: none; }
  .bxrf-mn nav a.bxrf-mn-link, .bxrf-mn nav a.bxrf-mn-link > svg, .bxrf-mn a.bxrf-mn-card, .bxrf-mn .bxrf-mn-go,
  .bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc, .bxrf-mn .bxrf-mn-top button[aria-label="Close menu"], .bxrf-mn-scrim { transition: none; }
  .bxrf-mn nav a.bxrf-mn-link:active, .bxrf-mn a.bxrf-mn-card:active, .bxrf-mn .bxrf-mn-foot a.bxrf-mn-acc:active { transform: none; }
}