/* Baseline Food Approach main-page additions. */

:root{ --homebar-h: 56px; } /* fallback */
  /* System chooser (match Baseline Natural Skincare menu style) */
  .bl-system-wrap{ position: relative; display:flex; align-items:center; }
  .bl-system-toggle{
    all: unset;
    cursor: pointer;
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.22);
    background: rgba(240,138,36,0.28);
    backdrop-filter: blur(8px) saturate(120%);
    color: var(--ink);
    font-weight: 850;
    letter-spacing:.02em;
    box-shadow: 0 14px 30px -26px rgba(35,23,19,.40);
  }
  .bl-system-toggle .caret{ font-weight: 900; opacity:.9; transform: translateY(-1px); }
  .bl-system-toggle:focus-visible{
    outline:none;
    box-shadow: 0 0 0 4px rgba(255,176,0,.25), 0 14px 30px -26px rgba(35,23,19,.40);
  }

  .bl-system-menu{
    position:absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: min(92vw, 380px);
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.18);
    background: linear-gradient(180deg, rgba(255,210,106,.96), rgba(240,138,36,.90));
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 22px 56px -38px rgba(0,0,0,.55);
    color: var(--ink);
  }
  .bl-system-menu a{
    display:block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 850;
    color: var(--ink);
    text-decoration:none;
  }
  .bl-system-menu a:hover{
    background: rgba(194,31,43,.10);
  }
  .bl-system-menu .small{
    display:block;
    font-size: 16px;
    font-weight: 650;
    color: rgba(27,7,4,.72);
    margin-top: 3px;
  }
  .bl-system-menu .divider{
    height:1px;
    margin: 10px 6px;
    background: rgba(0,0,0,.12);
    pointer-events: none;
}