/* Native CMSMasters header navigation. Colours and type remain theme-owned. */
@media (max-width: 1180px) {
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content {
    --ffehbo-menu-space: clamp(20px, 5.6vw, 26px);
    --ffehbo-menu-row: clamp(48px, 13vw, 56px);
    --ffehbo-menu-card: clamp(60px, 16vw, 66px);
    --ffehbo-menu-icon: 28px;
    --ffehbo-menu-icon-circle: 42px;
    --ffehbo-menu-row-padding-inline: 10px;
    --ffehbo-menu-icon-gap: 28px;
    --ffehbo-menu-text-offset: calc(var(--ffehbo-menu-row-padding-inline) + var(--ffehbo-menu-icon) + var(--ffehbo-menu-icon-gap));
    --ffehbo-menu-submenu-row: 44px;
    --ffehbo-menu-submenu-padding-block: 10px;
    --box-padding-top: 16px;
    --box-padding-right: var(--ffehbo-menu-space);
    --box-padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    --box-padding-left: var(--ffehbo-menu-space);
    isolation: isolate;
    overflow: hidden;
    max-height: 100dvh;
    background-color: var(--e-global-color-secondary);
  }

  .ffehbo-mobile-menu::after {
    position: absolute;
    z-index: -1;
    right: -46px;
    bottom: -68px;
    width: 190px;
    height: 190px;
    background-color: var(--e-global-color-accent);
    opacity: 0.12;
    content: "";
    pointer-events: none;
    -webkit-mask: url("../images/ff-mark.png") center / contain no-repeat;
    mask: url("../images/ff-mark.png") center / contain no-repeat;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close-container {
    margin: 0 0 14px !important;
    justify-content: flex-end;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close {
    width: 28px;
    height: 28px;
    padding: 0;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close-icon,
  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close svg {
    width: 28px;
    height: 28px;
  }

  /* Compact menus fit without a rail. Extra submenu content remains reachable
   * by touch/keyboard on short screens, without a visible scrollbar. */
  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__body {
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__body::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__body.ps--active-y {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__body > :is(.ps__rail-x, .ps__rail-y) {
    display: none !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__body-container {
    height: auto;
    min-height: 100%;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__navigation,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__navigation :is(
    .elementor-widget-cmsmasters-offcanvas__custom-container-cont,
    .elementor-widget-cmsmasters-offcanvas__custom-container-cont-inner,
    .elementor-widget-cmsmasters-offcanvas__menu-container,
    .elementor-widget-cmsmasters-offcanvas__menu-inner
  ) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__custom-container-cont {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > li {
    position: static;
    margin: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > li > a {
    display: flex;
    width: 100%;
    min-height: var(--ffehbo-menu-row);
    align-items: center;
    gap: var(--ffehbo-menu-icon-gap);
    padding: 8px var(--ffehbo-menu-row-padding-inline);
    border: 0;
    border-radius: 8px;
    color: var(--e-global-color-background) !important;
    text-decoration: none;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__icon {
    display: inline-flex;
    width: var(--ffehbo-menu-icon);
    height: var(--ffehbo-menu-icon);
    flex: 0 0 var(--ffehbo-menu-icon);
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__icon svg {
    display: block;
    width: var(--ffehbo-menu-icon);
    height: var(--ffehbo-menu-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__item-text,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__label {
    min-width: 0;
    flex: 1;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__arrow,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__chevron {
    width: 16px;
    height: 24px;
    flex: 0 0 16px;
    order: 4;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 0 !important;
    color: inherit;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__arrow > span {
    display: none;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__arrow::before,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__chevron::before {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > .ffehbo-mobile-menu__card {
    margin-top: 8px !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > li.ffehbo-mobile-menu__bottom-start {
    margin-top: auto !important;
    padding-top: 14px !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > .ffehbo-mobile-menu__card > a {
    min-height: var(--ffehbo-menu-card);
    gap: 14px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--e-global-color-background) 3%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--e-global-color-secondary) 95%, var(--e-global-color-background));
    box-shadow: none;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__card .ffehbo-mobile-menu__icon {
    width: var(--ffehbo-menu-icon-circle);
    height: var(--ffehbo-menu-icon-circle);
    flex-basis: var(--ffehbo-menu-icon-circle);
    border-radius: 50%;
    background: color-mix(in srgb, var(--e-global-color-background) 6%, transparent);
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__item--cart > a {
    font-weight: var(--ffehbo-button-font-weight, bold) !important;
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__menu-inner > .ffehbo-mobile-menu__card > a > .elementor-widget-cmsmasters-offcanvas__arrow,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__chevron {
    display: inline-flex;
    margin-left: 0;
  }

  /* Suppress the old text/icon/badge offsets while keeping WPC's live counter. */
  .ffehbo-mobile-menu .ffehbo-mobile-menu__card > a::before,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__card > a::after {
    display: none;
    content: none;
  }

  .ffehbo-mobile-menu .woofc-menu-item-inner {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    order: 3;
    align-items: center;
    margin: 0 0 0 auto;
    font-size: var(--ffehbo-font-size-label);
    line-height: 1;
  }

  .ffehbo-mobile-menu .woofc-menu-item-inner > i,
  .ffehbo-mobile-menu .woofc-menu-item-inner-subtotal {
    display: none !important;
  }

  .ffehbo-mobile-menu .woofc-menu-item .woofc-menu-item-inner::after {
    position: static;
    display: inline-flex;
    width: auto;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-secondary);
    font: inherit;
    font-weight: var(--ffehbo-button-font-weight, bold);
    content: attr(data-count);
    transform: none;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__link:is(:hover, :focus-visible) {
    color: var(--e-global-color-accent) !important;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__link:focus-visible,
  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__arrow:focus-visible,
  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close:focus-visible {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: 3px;
  }

  /* Match the main-row text offset, accounting for the box's own inset.
   * This scope also overrides Elementor's generated submenu padding. Keep
   * display/height/overflow under CMSMasters' slide animation control. */
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .menu-item > .sub-menu {
    --ffehbo-menu-submenu-text-offset: calc(var(--ffehbo-menu-text-offset) - var(--ffehbo-menu-row-padding-inline));
    margin: 4px var(--ffehbo-menu-row-padding-inline) 16px;
    padding: 4px 0;
    border: 0;
    border-radius: 9px;
    background: color-mix(in srgb, var(--e-global-color-secondary) 95%, var(--e-global-color-background));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e-global-color-background) 3%, transparent);
    list-style: none;
  }

  /* Nested branches retain the same text line instead of accumulating insets. */
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu .menu-item > .sub-menu {
    margin-right: 0;
    margin-left: 0;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    list-style: none;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a {
    display: flex;
    min-height: var(--ffehbo-menu-submenu-row);
    align-items: center;
    gap: 0;
    margin: 0;
    padding: var(--ffehbo-menu-submenu-padding-block) 18px var(--ffehbo-menu-submenu-padding-block) var(--ffehbo-menu-submenu-text-offset);
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--e-global-color-background) 90%, transparent);
    text-decoration: none;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a > .elementor-widget-cmsmasters-offcanvas__item-text {
    margin: 0;
    padding: 0;
    color: inherit;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a::before,
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a::after {
    display: none;
    content: none;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a > .ffehbo-mobile-menu__icon,
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li:not(.menu-item-has-children) > a > :is(.elementor-widget-cmsmasters-offcanvas__arrow, .ffehbo-mobile-menu__chevron) {
    display: none;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li + li::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: var(--ffehbo-menu-submenu-text-offset);
    height: 1px;
    background: color-mix(in srgb, var(--e-global-color-background) 8%, transparent);
    content: "";
    pointer-events: none;
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a:is(:hover, :focus-visible) {
    color: var(--e-global-color-accent);
  }

  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content .elementor-widget-cmsmasters-offcanvas__menu-inner .sub-menu > li > a:focus-visible {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: -3px;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer {
    margin-top: 0;
    padding: 0 7px;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer--empty {
    display: none;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer .elementor-widget-cmsmasters-site-logo {
    align-self: flex-start !important;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer .elementor-widget-cmsmasters-site-logo__container,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer .elementor-widget-cmsmasters-site-logo__image-container,
  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer .elementor-widget-cmsmasters-site-logo__link {
    width: auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .ffehbo-mobile-menu .ffehbo-mobile-menu__footer .elementor-widget-cmsmasters-site-logo img {
    width: 175px !important;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 360px) {
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content {
    /* Two native text lines fit without truncation; every row stays equal. */
    --ffehbo-menu-submenu-row: calc(2lh + 4px);
    --ffehbo-menu-submenu-padding-block: 2px;
  }
}

@media (max-width: 1180px) and (max-height: 600px) {
  .ffehbo-mobile-menu.elementor-widget-cmsmasters-offcanvas__content {
    --ffehbo-menu-row: 48px;
    --ffehbo-menu-card: 60px;
    --ffehbo-menu-icon-circle: 40px;
    --box-padding-top: 12px;
    --box-padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .ffehbo-mobile-menu .elementor-widget-cmsmasters-offcanvas__close-container {
    margin-bottom: 10px !important;
  }
}