/* Live navigation, refined. Loaded after navigation.css (the replica of welmhealth.com) and only overrides it. */

/* Bar: a labelled "Shop" link replaces the unlabelled store icon; MENU and SHOP mirror each other. */
.nv3 .welm-nav__text { display: flex; align-items: center; min-height: 42px; padding: 6px 10px 6px 2px; font: 500 11.5px/1.4 Jost, sans-serif; letter-spacing: 2.76px; text-transform: uppercase; }
.nv3 .welm-nav__text:hover { text-decoration: underline; text-underline-offset: 5px; }
.nv3 .welm-nav__protocol { gap: 10px; }

/* Menu: destination first, the W·E·L·M brand word as a small caption beside the letter. */
.nv3-menu .nv3-item { display: grid; gap: 4px; }
.nv3-menu .nv3-item small { color: #c4956a; font: 500 11px/1.2 Jost, sans-serif; letter-spacing: 2.2px; text-transform: uppercase; }
.nv3-menu .welm-menu__primary > a { align-items: center; }
.nv3-menu .welm-menu__treatments { margin-bottom: 22px; }
.nv3-menu .welm-menu__side h2 + .welm-menu__treatments { margin-top: -2px; }
/* Desktop: "Start my protocol" is the first, filled card in the right column. Phones pin it to the bottom instead. */
.nv3-menu__cta { display: none; }
.nv3-menu .welm-menu__entry[aria-current="page"], .nv3-menu .welm-menu__treatments a[aria-current="page"], .nv3-menu .welm-menu__links a[aria-current="page"] { color: #c4956a; }
.nv3-menu .welm-menu__entry--light[aria-current="page"] { color: #47181c; }

@media (max-width: 1100px) {
  .nv3 .welm-nav__protocol { width: auto; padding: 11px 18px; }
  .nv3 .welm-nav__protocol span { display: inline; }
}
/* Phone: menu + search | centered logo | account + bag. Start my protocol moves to a pinned button in the menu. */
@media (max-width: 800px) {
  .nv3 .welm-nav__text, .nv3 .welm-nav__protocol { display: none; }
  .nv3-menu[open] { display: flex; flex-direction: column; }
  .nv3-menu .welm-menu__grid { display: flex; flex-direction: column; gap: 28px; flex: 1; }
  .nv3-menu .welm-menu__side { display: contents; }
  /* Shopping first: portal and product lists come before the brand story links. */
  .nv3-menu .welm-menu__entries { order: 1; margin-bottom: 0; }
  .nv3-menu .nv3-group--weight { order: 2; }
  .nv3-menu .nv3-group--wellness { order: 3; }
  .nv3-menu .welm-menu__primary { order: 4; align-self: stretch; }
  .nv3-menu .nv3-group--more { order: 5; }
  .nv3-menu .welm-menu__treatments { margin-bottom: 0; }
  .nv3-menu .welm-menu__primary > a { font-size: 26px; }
  .nv3-menu .nv3-entry--start { display: none; }
  /* The live CSS hides the header protocol button on product pages; the pinned one in the menu must always show. */
  .nv3-menu__cta { display: block; position: sticky; bottom: 0; width: 100%; max-width: none; margin: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #f2ede615; background: #47181c; }
  .welm-menu .nv3-menu__cta .welm-nav__protocol { display: flex; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 22px; background: #f2ede6; color: #47181c; }
  .welm-menu .nv3-menu__cta .welm-nav__protocol span { display: inline; }
}