/* ------------------------------------------------------------------
 * Mobile menu (below 992px), as the former Next.js one: logo left,
 * account / cart / burger right, full screen levels sliding in.
 * ------------------------------------------------------------------ */
.arva-mnav {
  display: none;
}

@media (max-width: 991px) {
  /* The module nav and its drawer give way to the sliding menu */
  #header .up-menu {
    display: none;
  }

  #header .arva-mnav {
    --arva-mnav-pad: clamp(2.625rem, 7.6vw, 4rem);
    --arva-mnav-duration: .3s;
    --arva-mnav-easing: cubic-bezier(.77, 0, .175, 1);
    display: block;
  }

  /* The dealer link moves into the menu first level,
     the country selector into the open menu */
  #header .header-nav a.arva-dealers,
  #header .header-nav #_desktop_contact_link,
  #header .right-nav #_desktop_language_selector {
    display: none;
  }

  /* Burger / close, last on the right of the white bar */
  #header .arva-mnav__toggle {
    position: absolute;
    top: calc(var(--arva-banner-h) + var(--arva-bar-h) / 2 - 12px);
    right: var(--arva-pad);
    z-index: 105;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
  }

  #header .arva-mnav__toggle svg {
    display: block;
  }

  #header .arva-mnav__toggle .arva-mnav__icon-close,
  #header .arva-mnav.is-open .arva-mnav__toggle .arva-mnav__icon-open {
    display: none;
  }

  #header .arva-mnav.is-open .arva-mnav__toggle .arva-mnav__icon-close {
    display: block;
  }

  /* Left of the bar while open: country selector, or back button */
  #header .arva-mnav__start {
    position: absolute;
    top: var(--arva-banner-h);
    left: var(--arva-pad);
    z-index: 105;
    display: none;
    align-items: center;
    height: var(--arva-bar-h);
    max-width: 50%;
  }

  #header .arva-mnav.is-open .arva-mnav__start {
    display: flex;
  }

  html.arva-mnav-open #header #_desktop_logo,
  html.arva-mnav-open #header #_mobile_logo {
    visibility: hidden;
  }

  #header .arva-mnav__back,
  #header .arva-mnav.is-deep .arva-mnav__lang {
    display: none;
  }

  #header .arva-mnav.is-deep .arva-mnav__back {
    display: flex;
  }

  #header .arva-mnav__back {
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
  }

  #header .arva-mnav__back span {
    flex: 1 1 auto;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    text-transform: uppercase;
  }

  #header .arva-mnav__lang .language-selector button {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: 0;
    background: none;
  }

  #header .arva-mnav__lang .language-selector span {
    color: #000;
    font-size: .75rem;
  }

  /* Full screen levels under the header */
  #header .arva-mnav__panels {
    position: fixed;
    top: var(--arva-mnav-top, calc(var(--arva-banner-h) + var(--arva-bar-h)));
    left: 0;
    z-index: 99;
    width: 100vw;
    height: calc(100vh - var(--arva-mnav-top, calc(var(--arva-banner-h) + var(--arva-bar-h))));
    overflow: hidden;
    pointer-events: none;
  }

  #header .arva-mnav.is-open .arva-mnav__panels {
    pointer-events: auto;
  }

  #header .arva-mnav__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--arva-mnav-pad) var(--arva-pad) calc(var(--arva-mnav-pad) + 15%);
    overflow-y: auto;
    scrollbar-width: none;
    background: #fff;
    text-align: left;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--arva-mnav-duration) var(--arva-mnav-easing);
  }

  #header .arva-mnav__panel::-webkit-scrollbar {
    display: none;
  }

  #header .arva-mnav.is-open .arva-mnav__panel--first,
  #header .arva-mnav__panel.is-open {
    transform: translate3d(0, 0, 0);
  }

  /* Level 1: big entries, then dealer / register links and social networks */
  #header .arva-mnav__panel--first {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  #header .arva-mnav__l1 {
    display: flex;
    flex-direction: column;
    gap: min(9vw, 2.125rem) 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #header .arva-mnav__l1 li {
    line-height: 1;
  }

  #header .arva-mnav__l1 a,
  #header .arva-mnav__l1 button {
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 5vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  #header .arva-mnav__links {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: .813rem 0;
    margin-top: 7rem;
  }

  #header .arva-mnav__links a {
    color: #000;
    font-size: .844rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Footer social networks, as plain icons (the footer draws them in circles) */
  #header .arva-mnav__socials {
    align-self: flex-start;
    margin: 1.875rem 0 2.5rem;
  }

  #header .arva-mnav__socials ul {
    display: flex;
    gap: 0 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #header .arva-mnav__socials a {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #000;
    font-size: 1.125rem;
  }

  /* Sister shop link, full width at the bottom of the first level */
  #header .arva-mnav__switch {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: auto calc(-1 * var(--arva-pad)) 0;
    padding: 1.5rem var(--arva-pad);
    background: var(--arva-yellow);
    color: #000;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
  }

  #header .arva-mnav__switch img {
    flex: none;
    width: auto;
    height: 30px;
  }

  body.shop-5 #header .arva-mnav__switch {
    background: #fff;
    border-top: 1px solid #d9d9d9;
  }

  /* Level 2: entries with a square thumbnail */
  #header .arva-mnav__l2 {
    --arva-thumb: min(16vw, 6.25rem);
    display: flex;
    flex-direction: column;
    gap: .625rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #header .arva-mnav__l2 a,
  #header .arva-mnav__l2 button {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0 1.25rem;
    width: 100%;
    min-height: calc(var(--arva-thumb) / 1.5);
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: min(4vw, 1.125rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  #header .arva-mnav__l2 span:last-of-type {
    flex: 1 1 0;
  }

  #header .arva-mnav__thumb {
    width: var(--arva-thumb);
    aspect-ratio: 1;
    background: var(--arva-gray);
  }

  #header .arva-mnav__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  /* Level 3 tiles: fixed height, not square (the former aspect-ratio was
     invalid there, so tiles only kept their minimum height) */
  #header .arva-mnav__panel .arva-panel__tile {
    aspect-ratio: auto;
    height: max(7.5rem, 10vw);
    min-height: 0;
  }

  /* Level 3: tiles, banner then additional links */
  #header .arva-mnav__panel .arva-panel__banner {
    max-width: min(25rem, 100%);
  }
}

/* Tablet: classic desktop header markup; icons make room for the burger.
   The country selector only shows in the open menu, as on mobile. */
@media (min-width: 768px) and (max-width: 991px) {
  #header .header-nav .right-nav {
    right: calc(var(--arva-pad) + 24px + 1.25rem);
  }
}

/* Mobile: classic moves logo/account/cart into .header-nav .mobile,
   which becomes the white bar under the announcement */
@media (max-width: 767px) {
  #header .header-banner {
    position: static;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0 var(--arva-pad);
    transform: none;
    background: #000;
  }

  /* custom.css turns it black on category pages */
  #header .header-nav,
  body#category #header .header-nav {
    height: var(--arva-bar-h);
    border-bottom: 1px solid #d9d9d9;
    background: #fff;
  }

  body.shop-5 #header .header-nav,
  body.shop-5#category #header .header-nav {
    background: var(--arva-yellow);
  }

  #header .header-nav .mobile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
    padding-right: calc(24px + 1.25rem);
  }

  #header .header-nav .mobile .clearfix,
  #header #menu-icon {
    display: none;
  }

  #header #_mobile_logo {
    order: -1;
    width: auto;
    height: auto;
    margin: 0 auto 0 0;
  }

  #header #_mobile_logo h1 {
    margin: 0;
  }

  #header #_mobile_logo img {
    display: block;
    width: auto;
    height: 30px;
  }

  #header #_mobile_user_info,
  #header #_mobile_cart {
    float: none;
  }

  /* Same order as desktop: account, then cart */
  #header #_mobile_cart {
    order: 1;
  }

  #header #_mobile_cart .blockcart {
    margin: 0;
  }

  #header .header-top {
    height: 0;
    border: 0;
  }
}