/* Ported from Shopify sections/mobile-bottom-nav.liquid — keep in sync with parts/bottom-nav.php */
:root { --zbn-maroon: var(--z-accent, #7A1F2B); }

  .zbn, .zbn-sheet, .zbn-overlay { display: none; }

  @media (max-width: 768px) {
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

    .zbn {
      display: flex;
      position: fixed;
      z-index: 999;
      left: 0; right: 0; bottom: 0;
      height: calc(62px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: #fff;
      border-top: 1px solid #eee2dd;
      box-shadow: 0 -4px 18px rgba(60, 20, 25, .07);
    }
    .zbn__tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: none;
      border: 0;
      padding: 6px 0 8px;
      font: 600 10.5px/1 var(--font-body-family, sans-serif);
      letter-spacing: .01em;
      color: #8b7f7c;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }
    .zbn__tab svg { width: 22px; height: 22px; }
    .zbn__tab.is-active { color: var(--zbn-maroon); }
    .zbn__tab.is-active span { font-weight: 700; }

    /* icon wrapper so the NEW pill can anchor to the glyph, not the whole tab */
    .zbn__ico { position: relative; display: flex; align-items: center; justify-content: center; }

    /* Raised centre tab */
    .zbn__tab--raised { color: var(--zbn-maroon); position: relative; }
    .zbn__badge {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      margin-top: -24px;
      border-radius: 50%;
      background: var(--zbn-maroon);
      color: #fff;
      box-shadow: 0 6px 14px rgba(122, 31, 43, .35);
      border: 3px solid #fff;
    }
    .zbn__badge svg { width: 20px; height: 20px; }

    /* NEW / LIVE pill */
    .zbn__pill {
      position: absolute;
      top: -6px; left: 50%;
      transform: translateX(2px);
      padding: 2px 4px;
      border-radius: 5px;
      background: #E23B4E;
      color: #fff;
      font: 800 7.5px/1 var(--font-body-family, sans-serif);
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(226, 59, 78, .4);
    }
    .zbn__pill--raised { top: -3px; left: auto; right: -6px; transform: none; }

    /* Support sheet */
    .zbn-overlay {
      display: block;
      position: fixed; inset: 0;
      z-index: 1000;
      background: rgba(30, 10, 12, .45);
      opacity: 0;
      transition: opacity .25s ease;
    }
    .zbn-overlay[hidden] { display: none; }
    .zbn-overlay.is-open { opacity: 1; }

    .zbn-sheet {
      display: block;
      position: fixed;
      z-index: 1001;
      left: 0; right: 0; bottom: 0;
      background: #fff;
      border-radius: 20px 20px 0 0;
      padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
      transform: translateY(105%);
      transition: transform .28s cubic-bezier(.32,.72,.32,1);
    }
    .zbn-sheet[hidden] { display: none; }
    .zbn-sheet.is-open { transform: translateY(0); }
    .zbn-sheet__handle { width: 38px; height: 4px; border-radius: 2px; background: #e8dcd7; margin: 4px auto 14px; }
    .zbn-sheet__title { margin: 0; font-size: 18px; font-weight: 700; color: #2b1a17; }
    .zbn-sheet__sub { margin: 2px 0 16px; font-size: 12.5px; color: #8b7f7c; }
    .zbn-sheet__action {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      margin-bottom: 10px;
      text-decoration: none;
    }
    .zbn-sheet__action svg { width: 26px; height: 26px; flex: none; }
    .zbn-sheet__action strong { display: block; font-size: 15px; }
    .zbn-sheet__action small { display: block; font-size: 12px; opacity: .75; margin-top: 2px; }
    .zbn-sheet__action--wa { background: #e9f8ef; color: #14833b; }
    .zbn-sheet__action--call { background: #faf1ee; color: var(--zbn-maroon); }
    .zbn-sheet__action--track { background: #f4f3ff; color: #5925dc; }
    .zbn-sheet__close {
      display: block; width: 100%;
      padding: 12px;
      margin-top: 4px;
      background: none; border: 0;
      font-size: 14px; font-weight: 600; color: #8b7f7c;
    }
    @media (prefers-reduced-motion: reduce) {
      .zbn-sheet, .zbn-overlay { transition: none; }
    }
  }