/*
  Maido Customs Pure PHP Rebuild - Stage 3T
  Exact old-site mobile hero image candidates + small menu/font tune.
  Built from old live-site DevTools evidence:
  /image/cache/catalog/mobile-view-bar-1-800x1100h.jpg
  /image/cache/catalog/mobile-view-bar-1-1600x2200h.jpg 2x
*/

:root {
  --maido-stage3t-mobile-hero-fallback: url('/image/catalog/imgs/banner-mble-1.png');
}

/* Desktop header menu: very slight size increase only. */
@media (min-width: 981px) {
  html body.has-hero-header .site-header--hero .main-nav .nav-link,
  html body.has-hero-header .site-header--hero .header-actions .maido-stage3r-envelope-contact,
  html body.has-hero-header .site-header--hero .header-actions .maido-stage3o-contact-text {
    font-size: clamp(18px, 1.18vw, 21px) !important;
    line-height: 1 !important;
  }

  html body.has-hero-header .site-header--hero .nav-link .nav-caret {
    font-size: .82em !important;
    margin-left: 7px !important;
  }
}

/* Old-site dropdown feel: smaller, less wasted space, lighter item font. */
html body .maido-stage3k-menu-panel,
html body.has-hero-header .maido-stage3k-menu-panel {
  min-width: 196px !important;
  width: 196px !important;
  max-width: min(70vw, 230px) !important;
  border-radius: 4px !important;
}

html body .maido-stage3k-row,
html body .maido-stage3k-view-all {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 13px !important;
}

html body .maido-stage3k-menu-panel a,
html body .maido-stage3k-menu-panel .maido-stage3k-category-link,
html body .maido-stage3k-view-all,
html body .maido-stage3k-menu-panel span {
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

html body .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-tree,
html body .maido-stage3k-level-1 > .maido-stage3k-has-children > ul,
html body .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-level-2 {
  min-width: 200px !important;
  width: 200px !important;
  max-width: min(70vw, 235px) !important;
}

html body .maido-stage3k-level-2 .maido-stage3k-row,
html body .maido-stage3k-level-3 .maido-stage3k-row {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 13px !important;
}

/* Mobile/shrunk: force the old mobile hero image selected by JS. */
@media (max-width: 980px) {
  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    background-image: var(--maido-stage3t-mobile-hero-image, var(--maido-stage3s-mobile-hero-image, var(--maido-stage3t-mobile-hero-fallback))) !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* The mobile menu should stay hidden until hamburger is opened. */
  html body.has-hero-header .site-header--hero .main-nav:not(.is-open):not(.main-nav--open),
  html body.has-hero-header .site-header--hero .main-nav[aria-hidden="true"] {
    display: none !important;
  }

  html body.has-hero-header .site-header--hero .main-nav.is-open,
  html body.has-hero-header .site-header--hero .main-nav.main-nav--open,
  html body.has-hero-header .site-header--hero .main-nav[data-open="true"] {
    display: flex !important;
  }

  /* Keep the heading inside the mobile image and closer to the old site. */
  html body.maido-stage3k-home .landing-hero h1,
  html body.maido-stage3k-home .landing-hero__title,
  html body.has-hero-header .landing-hero h1,
  html body.has-hero-header .landing-hero__title {
    font-family: "Montserrat", "Arial Black", Arial, sans-serif !important;
    font-size: clamp(21px, 6vw, 30px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
    line-height: .98 !important;
    white-space: normal !important;
    max-width: calc(100vw - 34px) !important;
    left: 22px !important;
    right: auto !important;
    bottom: 104px !important;
    transform: none !important;
  }

  html body.maido-stage3k-home .landing-hero__content,
  html body.has-hero-header .landing-hero__content {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding-left: 22px !important;
    padding-right: 16px !important;
    padding-bottom: 120px !important;
  }
}

@media (max-width: 560px) {
  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    min-height: 670px !important;
    height: calc(100svh - 88px) !important;
    max-height: 940px !important;
    background-position: center top !important;
  }
}