/* Shared phone navigation: keep every destination available and Cart in view. */
@media (max-width: 980px) {
  html.iris-mobile-navigation { overflow-x: clip; scroll-padding-top: calc(var(--iris-mobile-header-height, 80px) + 16px); }
  body.iris-mobile-navigation { overflow-x: clip; padding-top: var(--iris-mobile-header-height, 80px); }
  .iris-mobile-header {
    position: fixed !important; top: 0 !important; left: 0; right: 0;
    z-index: 1000; width: 100%; height: auto !important; min-height: 72px;
    box-sizing: border-box; margin: 0 !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)) !important;
    background: var(--iris-mobile-background, #fff) !important;
    color: var(--iris-mobile-color, #111); border-bottom: 1px solid var(--iris-mobile-border, #ddd);
    transform: none !important; overflow: visible !important;
  }
  header.iris-mobile-bar, .iris-mobile-header .iris-mobile-bar {
    display: flex !important; align-items: center; justify-content: space-between;
    flex-wrap: nowrap !important; gap: 10px !important; min-height: 56px;
  }
  .iris-mobile-header .iris-mobile-bar { height: auto !important; width: 100% !important; max-width: none; padding: 0 !important; margin: 0; }
  .iris-mobile-brand { flex: 0 0 auto !important; max-width: 94px; margin: 0 !important; }
  .iris-mobile-header .brand-logo, .iris-mobile-header .iris-logo { height: 56px !important; width: auto !important; max-width: 90px; object-fit: contain; }
  .iris-mobile-toggle {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
    flex: 0 0 auto; min-width: 76px; min-height: 44px; padding: 8px !important;
    border: 1px solid var(--iris-mobile-border, #ddd) !important; border-radius: 6px;
    background: transparent !important; color: inherit !important;
    font-family: inherit; font-weight: 600; font-size: 14px !important; line-height: 1.2; cursor: pointer;
  }
  .iris-mobile-toggle svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
  .iris-mobile-cart {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 7px !important;
    flex: 0 0 auto; min-height: 44px; padding: 5px 0 !important;
    margin: 0 !important; color: inherit !important; font-size: 14px !important; white-space: nowrap;
  }
  .iris-mobile-cart svg { display: block; width: 22px !important; height: 22px !important; flex-shrink: 0; }
  .iris-mobile-cart > span { display: inline-flex !important; font-size: 14px !important; }
  .iris-mobile-cart #count, .iris-mobile-cart #bag-count { display: inline-flex !important; align-items: center; justify-content: center; min-width: 24px; width: auto; height: 24px; padding: 0 5px; font-size: 12px !important; }
  .iris-mobile-links {
    display: none !important; position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: auto !important; margin: 0 !important;
    padding: 12px max(18px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)) !important;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    background: var(--iris-mobile-background, #fff) !important; color: var(--iris-mobile-color, #111) !important;
    border: 0 !important; border-bottom: 1px solid var(--iris-mobile-border, #ddd) !important; border-radius: 0 !important;
    box-shadow: 0 10px 18px #0002; box-sizing: border-box;
    max-height: calc(100dvh - var(--iris-mobile-header-height, 80px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .iris-mobile-header.iris-mobile-menu-open .iris-mobile-links { display: flex !important; }
  .iris-mobile-header .iris-mobile-links > a {
    display: flex !important; align-items: center; min-height: 44px;
    margin: 0 !important; padding: 10px 12px !important;
    font-size: 16px !important; line-height: 1.5; letter-spacing: normal;
  }
  .iris-mobile-links > a:not(.btn) { color: inherit !important; }
  .iris-mobile-toggle:focus-visible, .iris-mobile-cart:focus-visible, .iris-mobile-links > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}
@media (min-width: 981px) { .iris-mobile-toggle { display: none !important; } }