#mobytic-mobile-header,
#mobytic-mobile-menu {
  display: none;
}

:root {
  --mobytic-header-bg: #ffffff;
  --mobytic-header-border: #efefef;
  --mobytic-header-text: #2c3e50;
  --mobytic-topbar-bg: #f8f9fa;
  --mobytic-topbar-text: #2c3e50;
  --mobytic-menu-bg: #ffffff;
  --mobytic-menu-text: #2c3e50;
  --mobytic-menu-border: #efefef;
  --mobytic-button-bg: #ffffff;
  --mobytic-button-text: #2c3e50;
  --mobytic-button-border: #d8d8d8;
  --mobytic-badge-bg: #8bc34a;
  --mobytic-badge-text: #1f2a37;
  --mobytic-quicklink-border: #cfd8dc;
  --mobytic-header-padding-y: 6px;
  --mobytic-header-padding-x: 10px;
  --mobytic-row-gap: 12px;
  --mobytic-button-size: 40px;
  --mobytic-button-radius: 6px;
  --mobytic-logo-max-height: 36px;
  --mobytic-logo-max-width: 180px;
  --mobytic-topbar-font-size: 12px;
  --mobytic-menu-font-size: 16px;
  --mobytic-submenu-font-size: 13px;
  --mobytic-cart-count-font-size: 11px;
  --mobytic-shadow-blur: 4px;
  --mobytic-shadow-opacity: 0.05;
}

@media only screen and (max-width: 920px) {
  #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item {
    display: flex;
    border-bottom: 1px solid var(--mm-color-border);
  }

  #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item > .mm-listitem__btn {
    border-color: var(--mm-color-border);
  }
}

@media screen {
  /* Prevent header flash on initial load by hiding until JS marks ready.
     Keep the menu element visible so the mmenu library can perform
     its built-in slide in/out animations. */
  #mobytic-mobile-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--mobytic-header-bg);
    color: var(--mobytic-header-text);
    border-bottom: 1px solid var(--mobytic-header-border);
    padding: var(--mobytic-header-padding-y) var(--mobytic-header-padding-x);
    box-shadow: 0 2px var(--mobytic-shadow-blur) rgba(0, 0, 0, var(--mobytic-shadow-opacity));
    visibility: visible;
    opacity: 1;
  }

  /* Allow mmenu to handle off-canvas/menu transitions itself */
  body.mobytic-mobile-menu-ready #mobytic-mobile-menu {
    display: block;
  }

  /* Position the menu off-canvas by default so it doesn't flash
     before JavaScript initialises. When the JS sets
     `body.mobytic-mobile-menu-ready` the transform will be removed
     and mmenu can perform its normal slide animations. */
  body:not(.mobytic-mobile-menu-ready) #mobytic-mobile-menu {
    transform: translateX(-110%) translateZ(0);
    transition: transform 300ms ease;
    will-change: transform;
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10010;
    overflow-y: auto;
    background: var(--mobytic-menu-bg);
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu.mobytic-fallback-open {
    display: block;
  }

  #mobytic-mobile-menu.mm-menu--offcanvas {
    z-index: 10010 !important;
  }

  #mobytic-mobile-menu.mm-menu--opened {
    pointer-events: auto;
  }

  #mobytic-mobile-menu .mm-iconbar {
    display: none !important;
  }

  #mobytic-mobile-menu.mm-menu--iconbar-left .mm-panels,
  #mobytic-mobile-menu.mm-menu--iconbar-right .mm-panels {
    left: 0 !important;
    right: 0 !important;
  }

  .mm-wrapper__blocker.mm-blocker {
    z-index: 10000 !important;
  }

  .mobytic-mobile-has-header.mobytic-mobile-menu-ready .preheader,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready #masthead,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready #site-navigation,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready #top-menu-nav,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready #et-top-navigation,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready .et_mobile_nav_menu,
  .mobytic-mobile-has-header.mobytic-mobile-menu-ready .mobile_menu_bar {
    display: none !important;
  }

  .mobytic-mobile-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mobytic-row-gap);
    width: 100%;
  }

  .mobytic-mobile-search-row {
    width: 100%;
    padding: 6px 4px 8px;
    box-sizing: border-box;
    border-top: 0;
  }

  .mobytic-mobile-topbar {
    width: 100%;
    background: var(--mobytic-topbar-bg);
    color: var(--mobytic-topbar-text);
    font-size: var(--mobytic-topbar-font-size);
    text-align: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mobytic-menu-border);
    box-sizing: border-box;
  }

  .mobytic-mobile-menu-toggle,
  .mobytic-mobile-cart {
    width: var(--mobytic-button-size);
    height: var(--mobytic-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mobytic-button-border);
    border-radius: var(--mobytic-button-radius);
    text-decoration: none;
    color: var(--mobytic-button-text);
    background: var(--mobytic-button-bg);
    flex: 0 0 auto;
  }

  .mobytic-mobile-menu-icon,
  .mobytic-mobile-menu-icon::before,
  .mobytic-mobile-menu-icon::after {
    width: 18px;
    height: 2px;
    background: var(--mobytic-button-text);
    display: block;
    content: "";
    position: relative;
  }

  .mobytic-mobile-menu-icon::before {
    top: -6px;
  }

  .mobytic-mobile-menu-icon::after {
    top: 4px;
  }

  .mobytic-mobile-logo-wrap {
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
  }

  .mobytic-mobile-logo,
  .mobytic-mobile-logo-link img,
  .mobytic-mobile-logo-link .custom-logo,
  .mobytic-mobile-logo-link .mobytic-mobile-logo {
    max-height: var(--mobytic-logo-max-height);
    width: auto;
    max-width: var(--mobytic-logo-max-width);
  }

  .mobytic-mobile-site-name {
    font-size: 18px;
    color: var(--mobytic-header-text);
    font-weight: 700;
  }

  .mobytic-mobile-site-name img {
    height: 88px;
    object-fit: contain;
  }

  .mobytic-mobile-cart {
    position: relative;
  }

  .mobytic-mobile-cart i svg {
    width: 20px;
    height: 20px;
    margin-right: 0;
  }

  .mobytic-mobile-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    background: var(--mobytic-badge-bg);
    color: var(--mobytic-badge-text);
    font-size: var(--mobytic-cart-count-font-size);
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
  }

  #mobytic-mobile-menu .mega-menu-toggle,
  #mobytic-mobile-menu .mega-toggle-block,
  #mobytic-mobile-menu .mega-hide-on-mobile,
  #mobytic-mobile-menu .mm-panel__noresults,
  #mobytic-mobile-menu .mm-searchfield__btn {
    display: none !important;
  }

  #mobytic-mobile-menu .mobytic-mobile-meta {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mobytic-menu-border);
    background: var(--mobytic-menu-bg);
  }

  #mobytic-mobile-menu .mobytic-mobile-meta p {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mobytic-menu-text);
  }

  #mobytic-mobile-menu .mobytic-mobile-quick-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  #mobytic-mobile-menu .mobytic-mobile-quick-links a {
    color: var(--mobytic-menu-text);
    font-size: var(--mobytic-submenu-font-size);
    text-decoration: none;
    border-bottom: 1px solid var(--mobytic-quicklink-border);
    padding-bottom: 1px;
  }

  #mobytic-mobile-menu .mm-navbar__title {
    color: var(--mobytic-menu-text);
    font-size: var(--mobytic-menu-font-size);
    font-weight: 700;
  }

  #mobytic-mobile-menu .mm-listitem__text {
    color: var(--mobytic-menu-text);
    font-size: var(--mobytic-menu-font-size);
  }

  #mobytic-mobile-menu .mm-searchfield {
    display: flex !important;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mobytic-menu-border);
  }

  #mobytic-mobile-menu .mm-searchfield__input input {
    width: 100%;
    border: 1px solid var(--mobytic-menu-border);
    border-radius: 6px;
    color: var(--mobytic-menu-text);
    background: var(--mobytic-menu-bg);
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu li {
    border-bottom: 1px solid var(--mobytic-menu-border);
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu a {
    display: block;
    padding: 10px 12px;
    color: var(--mobytic-menu-text);
    text-decoration: none;
    font-size: var(--mobytic-menu-font-size);
  }

  body.mobytic-no-mmenu #mobytic-mobile-menu .sub-menu {
    display: block !important;
    padding-left: 14px;
    background: var(--mobytic-menu-bg);
  }
}

/* Highlight account icon when user is logged in */
.mobytic-connected i {
  color: #28a745 !important;
}

body.logged-in #mobytic-mobile-menu .mm-iconbar a.mobytic-connected i {
  color: #28a745 !important;
}

/* Remove generated ::before icons on first-level menu items to avoid duplicates
   The mmenu library may add decorative pseudo-elements; hide them for the
   top-level list so only the original icons (from the markup) remain. */
#mobytic-mobile-menu .mm-panel > .mm-listview > .mm-listitem > .mm-listitem__text::before,
#mobytic-mobile-menu .mm-panel > .mm-listview > .mm-listitem > .mm-listitem__btn::before {
  display: none !important;
  content: none !important;
}
#mobytic-mobile-menu #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item > a.mega-menu-link {
  padding: 4px 0;
  height: auto;
}