/* Shared Astra mobile menu only. Cart drawer and native open/close logic are untouched. */
@media (max-width: 921px) {
  body #ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-inner {
    max-width: 100vw;
    box-sizing: border-box;
    background: #fff !important;
    color: #214c35;
  }
  body #ast-mobile-popup .ast-mobile-popup-header {
    box-sizing: border-box;
    min-height: 64px;
    padding: 12px 24px 8px !important;
    justify-content: flex-end;
  }
  body #ast-mobile-popup .menu-toggle-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px !important;
    border: 0;
    border-radius: 10px;
    background: #f1f5ec;
    color: #214c35;
    line-height: 1;
  }
  body #ast-mobile-popup .menu-toggle-close svg { width: 20px; height: 20px; }
  /* One shared gutter replaces account centering, full-bleed search/social and
     the menu's independent 20px link padding. */
  body #ast-mobile-popup .ast-mobile-popup-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0;
    padding: 8px 24px 28px !important;
    margin: 0 !important;
    width: 100%;
    min-width: 0;
    text-align: left !important;
  }
  body #ast-mobile-popup .ast-mobile-popup-content > .ast-builder-layout-element {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body #ast-mobile-popup :is(.ast-header-account-wrap,.ast-header-social-wrap) {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body #ast-mobile-popup .ast-header-account-wrap {
    display: flex;
    justify-content: flex-start !important;
  }
  body #ast-mobile-popup .ast-header-account-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid #dce5d5;
    border-radius: 10px;
    color: #214c35;
    background: #fff;
  }
  body #ast-mobile-popup .ast-header-account-link svg { width: 22px; height: 22px; fill: currentColor; }
  /* Flex gives the field its own space instead of placing a button over it. */
  body #ast-mobile-popup .ast-header-search .ast-search-menu-icon {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
  }
  body #ast-mobile-popup .ast-header-search .search-form {
    box-sizing: border-box;
    display: flex !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cdd8c7;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }
  body #ast-mobile-popup .ast-header-search .search-form > label {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0;
  }
  body #ast-mobile-popup .ast-header-search .search-field {
    box-sizing: border-box;
    display: block;
    width: 0 !important;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    color: #26352b;
    font-size: 16px;
    line-height: 1.5;
  }
  body #ast-mobile-popup .ast-header-search .search-submit {
    box-sizing: border-box;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0 !important;
    background: #f1f5ec;
    color: #214c35;
    font-size: 0;
    line-height: 1;
  }
  body #ast-mobile-popup .ast-header-search .search-submit svg {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    fill: currentColor;
  }
  body #ast-mobile-popup .header-social-inner-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  body #ast-mobile-popup .header-social-inner-wrap .ast-builder-social-element {
    --color: #214c35;
    --background-color: #fff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid #dce5d5;
    border-radius: 10px;
    background: #fff !important;
    color: #214c35 !important;
    line-height: 1;
    text-decoration: none;
  }
  body #ast-mobile-popup .header-social-inner-wrap .social-item-label:empty { display: none; }
  body #ast-mobile-popup .header-social-inner-wrap svg {
    width: 22px;
    height: 22px;
    fill: currentColor !important;
    color: inherit;
  }
  /* Only layout and link spacing change; no submenu display/state rules. */
  body #ast-mobile-popup .ast-mobile-popup-content :is(.ast-builder-menu,.ast-main-header-bar-alignment,.main-header-bar-navigation,.site-navigation,.main-navigation) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
  }
  body #ast-mobile-popup .main-header-menu {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  body #ast-mobile-popup .main-header-menu .menu-item {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body #ast-mobile-popup .main-header-menu > .menu-item { border-bottom: 1px solid #edf0e8; }
  body #ast-mobile-popup .main-header-menu .menu-link {
    box-sizing: border-box;
    min-height: 46px;
    margin: 0 !important;
    padding: 12px 44px 12px 0 !important;
    color: #214c35;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
  }
  body #ast-mobile-popup .main-header-menu .sub-menu {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 0 4px 12px !important;
    border: 0;
    box-shadow: none;
  }
  body #ast-mobile-popup .main-header-menu .sub-menu .menu-link { font-size: 14px; }
  body #ast-mobile-popup .main-header-menu .ast-menu-toggle {
    box-sizing: border-box;
    top: 1px !important;
    right: 0 !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 10px !important;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #214c35;
    line-height: 1;
  }
  body #ast-mobile-popup .main-header-menu .ast-menu-toggle svg { width: 18px; height: 18px; margin: 0 !important; }
  /* Give the four native drawer blocks their own separation, including when
     Astra switches the content container from flex to block while opening. */
  body #ast-mobile-popup .ast-mobile-popup-content > :is(
    [data-section="section-header-account"],
    [data-section="section-header-search"],
    [data-section="section-hb-social-icons-1"],
    [data-section="section-hb-menu-1"]
  ) + :is(
    [data-section="section-header-account"],
    [data-section="section-header-search"],
    [data-section="section-hb-social-icons-1"],
    [data-section="section-hb-menu-1"]
  ) { margin-top: 18px !important; }
  body #ast-mobile-popup :is(.menu-toggle-close,.ast-menu-toggle,.ast-header-account-link,.ast-builder-social-element):hover { background-color: #f1f5ec !important; }
  body #ast-mobile-popup :is(a,button,input):focus-visible { outline: 3px solid #c45d18; outline-offset: 3px; }
}