/*** Akoca Custom Mobile Menu Styling ***/
/* Bourton Road Butchers mobile menu — full-screen overlay with collapsible submenus */

@media (max-width: 980px) {

  body.akoca-mobile-menu-open {
    overflow: hidden;
  }

  .custom-mobile-menu {
    position: relative;
    z-index: 9999;
  }

  .custom-mobile-menu .et_pb_menu__menu {
    display: none !important;
  }

  .custom-mobile-menu .et_mobile_nav_menu {
    display: block !important;
  }

  .custom-mobile-menu .mobile_nav {
    position: static !important;
  }

  .custom-mobile-menu .mobile_menu_bar {
    position: relative !important;
    z-index: 1000002 !important;
    cursor: pointer !important;
  }

  .custom-mobile-menu .mobile_menu_bar:before {
    color: #3b171f !important;
    font-size: 34px !important;
  }

  /* Panel now starts below the header (whatever its height) via the JS-set variable */
  .custom-mobile-menu .mobile_nav.opened {
    position: fixed !important;
    top: var(--akoca-header-h, 90px) !important;                     /* was top: 0 + margin-top: 20px */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: auto !important;
    max-height: calc(100vh - var(--akoca-header-h, 90px)) !important; /* was 100vh - 24px */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #602432 !important;
    padding: 28px 32px 40px 32px !important;                          /* trimmed: starts below header, X no longer bottom */
    box-sizing: border-box !important;
    z-index: 1000001 !important;
  }

  .custom-mobile-menu .mobile_nav.opened .mobile_menu_bar {
    display: none !important;
  }

  .custom-mobile-menu .mobile_nav .et_mobile_menu {
    display: none !important;
  }

  .custom-mobile-menu .mobile_nav.opened > .et_mobile_menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .custom-mobile-menu .et_mobile_menu li {
    position: relative !important;
    display: block !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
  }

  .custom-mobile-menu .et_mobile_menu > li:last-child {
    margin-bottom: 0 !important;
  }

  .custom-mobile-menu .et_mobile_menu li a {
    display: block !important;
    background: transparent !important;
    border: none !important;
    color: #ffefd3 !important;
    font-size: 16px !important;
    line-height: 1.35em !important;
    font-weight: 400 !important;
    padding: 0 56px 0 0 !important;
    margin: 0 !important;
  }

  .custom-mobile-menu .et_mobile_menu li.menu-item-has-children > a {
    padding-right: 68px !important;
  }

  .custom-mobile-menu .et_mobile_menu ul.sub-menu {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    margin: 0 !important;
    padding: 0 24px !important;
    background: #ffefd3 !important;
    border: none !important;
    border-radius: 18px !important;
    list-style: none !important;
    transition:
      max-height 0.28s ease,
      opacity 0.22s ease,
      margin 0.28s ease,
      padding-top 0.28s ease,
      padding-bottom 0.28s ease,
      visibility 0s linear 0.28s;
  }

  .custom-mobile-menu .et_mobile_menu li.akoca-open > ul.sub-menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    margin: 18px 0 0 0 !important;
    padding: 22px 24px !important;
    transition:
      max-height 0.28s ease,
      opacity 0.22s ease,
      margin 0.28s ease,
      padding-top 0.28s ease,
      padding-bottom 0.28s ease,
      visibility 0s linear 0s;
  }

  .custom-mobile-menu .et_mobile_menu ul.sub-menu li {
    margin: 0 0 18px 0 !important;
  }

  .custom-mobile-menu .et_mobile_menu ul.sub-menu li:last-child {
    margin-bottom: 0 !important;
  }

  .custom-mobile-menu .et_mobile_menu ul.sub-menu li a {
    color: #3b171f !important;
    font-size: 16px !important;
    line-height: 1.2em !important;
    font-weight: 400 !important;
    padding: 0 !important;
  }

  .custom-mobile-menu .akoca-submenu-toggle {
    position: absolute !important;
    top: -4px !important;
    right: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    color: #ffefd3 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 20 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .custom-mobile-menu .akoca-submenu-toggle span {
    display: none !important;
  }

  /* Closed state — chevron points down (unchanged) */
  .custom-mobile-menu .akoca-submenu-toggle:before {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 2px solid #ffefd3 !important;
    border-bottom: 2px solid #ffefd3 !important;
    transform: rotate(45deg);
    transition: transform 0.25s ease !important;
    margin-top: -4px !important;
  }

  /* Open state — now points LEFT (was up) */
  .custom-mobile-menu .et_mobile_menu li.akoca-open > .akoca-submenu-toggle:before {
    transform: rotate(135deg);     /* was -135deg */
    margin-top: 0 !important;      /* re-centre for the left chevron; nudge a px to taste */
  }

  /* Close X — top-right, centred in the header band via the same variable, dark to read on white */
  .custom-mobile-menu .akoca-mobile-close {
    position: fixed !important;                                /* was absolute */
    top: calc(var(--akoca-header-h, 90px) / 2) !important;     /* vertical centre of the header */
    right: 22px !important;
    bottom: auto !important;                                   /* was bottom: 18px */
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    color: #3b171f !important;                                 /* was #ffefd3 — reads on the white header */
    font-size: 40px !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 1000002 !important;                               /* was 30 — above the panel */
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .custom-mobile-menu .mobile_nav.opened > .akoca-mobile-close {
    display: inline-flex !important;
  }

  .custom-mobile-menu .mobile_nav.opened::-webkit-scrollbar {
    width: 6px;
  }

  .custom-mobile-menu .mobile_nav.opened::-webkit-scrollbar-thumb {
    background: rgba(255, 239, 211, 0.22);
    border-radius: 20px;
  }

  .custom-mobile-menu .et_mobile_menu .nav-cta a{
     border-radius: 100px;
     background:#ffefd3 !important;
     text-align: center;
    border-radius: 100px !important;
    display: block !important;
    width: 80% !important;
    margin: 0 auto !important;
    padding: 8px 10px 8px 10px !important;
    color: #3b171f !important;
  }
}