/* Mobile tap bar + burger — store chrome, shared by blog HTML */
.ui-icon-menu:before {
  left: 2px; top: 3px; width: 10px; height: 1.5px; background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}
.ui-icon-close:before, .ui-icon-close:after {
  left: 6px; top: 1px; width: 1.5px; height: 12px; background: currentColor;
}
.ui-icon-close:before { transform: rotate(45deg); }
.ui-icon-close:after { transform: rotate(-45deg); }

.mobile-nav { display: none; }

@media (max-width: 759.98px) {
  .mobile-nav { display: block; }
  .header-pick { display: none !important; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-dock { opacity: 0; pointer-events: none; }

  .mobile-burger {
    position: fixed; z-index: 62; top: 50px; right: 14px;
    width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--ink); border-radius: 0;
    color: var(--ink); background: var(--lime);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .mobile-burger.is-open { color: #fff; background: var(--ink); box-shadow: none; }

  .mobile-dock {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 64px;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ink);
    background: var(--paper);
  }
  .mobile-dock a {
    min-width: 0; padding: 4px 2px;
    display: grid; justify-items: center; align-content: center; gap: 4px;
    color: var(--ink);
    font-size: 6px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  }
  .mobile-dock a i {
    width: 22px; height: 22px; display: grid; place-items: center;
    border: 1px solid var(--ink); background: var(--cream);
    font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: 0;
  }
  .mobile-dock a span {
    max-width: 100%; text-align: center; line-height: 1.05;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
  }
  .mobile-dock a.active { background: var(--lime); }
  .mobile-dock a.active i { color: var(--lime); background: var(--ink); }

  .mobile-menu {
    position: fixed; z-index: 61; inset: 0;
    display: flex; flex-direction: column; gap: 18px;
    padding: 88px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    color: var(--ink); background: var(--cream);
    overflow: auto;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu-head .micro-label { margin-bottom: 8px; }
  .mobile-menu-head b { display: block; font-size: 34px; line-height: .86; letter-spacing: -.07em; }
  .mobile-menu-list { display: grid; border-top: 1px solid var(--ink); }
  .mobile-menu-list a {
    min-height: 72px; padding: 14px 0;
    display: grid; grid-template-columns: 42px 1fr 28px; gap: 12px; align-items: center;
    border-bottom: 1px solid var(--ink);
  }
  .mobile-menu-list a > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
  .mobile-menu-list strong { display: block; font-size: 22px; letter-spacing: -.05em; }
  .mobile-menu-list small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
  .mobile-menu-list b {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid var(--ink); background: var(--lime);
  }
  .mobile-menu-list a.active { background: var(--lime); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .mobile-menu .shop-button { width: 100%; margin-top: auto; }
}

@media (min-width: 760px) {
  .mobile-nav { display: none !important; }
}