/*
  Maido Customs Pure PHP Rebuild - Stage 3Q
  Final visual tune after old/new screenshot comparison:
  - Use the correct imported mobile hero image.
  - Match old Maido hero text closer: less condensed, smaller, lower-left.
  - Reduce menu/dropdown font size and wasted space.
  - Keep | CONTACT | on desktop to the left of search.
  - Hide | CONTACT | on mobile where the old layout has limited space.
*/

:root {
  --maido-3q-menu-font: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --maido-3q-hero-font: "Montserrat", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  --maido-3q-black: #070707;
}

/* Header menu/contact: a touch smaller and less heavy than Stage 3P. */
html body.has-hero-header .site-header--hero .main-nav a,
html body.has-hero-header .site-header--hero .main-nav .nav-link,
html body.has-hero-header .site-header--hero .nav-link span:first-child,
html body.has-hero-header .site-header--hero .maido-stage3o-header-contact {
  font-family: var(--maido-3q-menu-font) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--maido-3q-black) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html body.has-hero-header .site-header--hero .main-nav {
  gap: clamp(22px, 2.1vw, 34px) !important;
}

html body.has-hero-header .site-header--hero .nav-caret {
  font-size: 12px !important;
  margin-left: 7px !important;
  opacity: .62 !important;
}

html body.has-hero-header .site-header--hero .maido-stage3o-header-contact {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

html body.has-hero-header .site-header--hero .header-actions {
  gap: clamp(13px, 1.2vw, 21px) !important;
}

html body.has-hero-header .site-header--hero .header-icon {
  width: 27px !important;
  height: 31px !important;
}

/* Keep logo truly centred, not centred within the remaining nav space. */
html body.has-hero-header .site-header--hero .brand--center {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 18px !important;
}

html body.has-hero-header .site-header--hero .brand__logo--full,
html body.has-hero-header .site-header--hero .brand img {
  max-height: 86px !important;
}

/* Desktop hero: make text closer to old Maido, less condensed/bold. */
html body.maido-stage3k-home .landing-hero {
  background-image: url('/image/catalog/imgs/banner-1.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  min-height: clamp(650px, 47.8vw, 940px) !important;
  height: clamp(650px, 47.8vw, 940px) !important;
}

html body.maido-stage3k-home .landing-hero__inner,
html body.has-hero-header .landing-hero__inner {
  left: clamp(62px, 4.9vw, 92px) !important;
  bottom: clamp(142px, 8.5vw, 176px) !important;
  right: 32px !important;
  max-width: none !important;
}

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: var(--maido-3q-hero-font) !important;
  font-size: clamp(30px, 2.35vw, 42px) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.32) !important;
}

/* Keep Shop Now hidden on the rebuilt site. */
html body.maido-stage3k-home .landing-hero a[href*="shop"],
html body.maido-stage3k-home .landing-hero a[href*="category"],
html body.maido-stage3k-home .landing-hero .btn,
html body.maido-stage3k-home .landing-hero .button,
html body.maido-stage3k-home .landing-hero .hero-actions,
html body.maido-stage3k-home .landing-hero .landing-hero__actions,
html body.maido-stage3k-home .landing-hero .landing-hero__cta,
html body.maido-stage3k-home .landing-hero .shop-now {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Main BMW/Toyota dropdown: reduce wasted space and use old compact Journal feel. */
html body .main-nav .nav-item,
html body .maido-stage3k-top-category {
  position: relative !important;
}

html body .maido-stage3k-menu-panel,
html body.has-hero-header .maido-stage3k-menu-panel {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 12px) !important;
  transform: none !important;
  min-width: 286px !important;
  width: 286px !important;
  max-width: 86vw !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: 0 12px 25px rgba(0,0,0,.12) !important;
  background: #ffffff !important;
}

html body .maido-stage3k-menu-panel::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -14px !important;
  height: 14px !important;
  background: transparent !important;
}

html body .maido-stage3k-tree,
html body .maido-stage3k-tree ul,
html body .maido-stage3k-tree li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .maido-stage3k-row {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,.045) !important;
  background: #ffffff !important;
}

html body .maido-stage3k-level-1 > .maido-stage3k-item:first-child > .maido-stage3k-row,
html body .maido-stage3k-row:hover {
  background: #f3f3f3 !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: var(--maido-3q-menu-font) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

html body .maido-stage3k-child-arrow {
  font-size: 23px !important;
  line-height: 1 !important;
  color: #9a9a9a !important;
  flex: 0 0 auto !important;
}

html body .maido-stage3k-view-all {
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 22px !important;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  background: #ffffff !important;
}

/* Flyout children: compact and aligned with parent item. */
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 {
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  min-width: 238px !important;
  width: 238px !important;
  max-width: 78vw !important;
  background: #ffffff !important;
  box-shadow: 0 12px 25px rgba(0,0,0,.12) !important;
}

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

html body .maido-stage3k-level-2 .maido-stage3k-category-link,
html body .maido-stage3k-level-3 .maido-stage3k-category-link,
html body .maido-stage3k-level-2 a,
html body .maido-stage3k-level-3 a {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* If the Toyota dropdown gets close to the right side, keep the flyout inside the viewport. */
html body .main-nav .nav-item:nth-child(n+3) .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-tree,
html body .main-nav .nav-item:nth-child(n+3) .maido-stage3k-level-1 > .maido-stage3k-has-children > ul,
html body .main-nav .nav-item:nth-child(n+3) .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-level-2 {
  left: 100% !important;
  right: auto !important;
}

@media (min-width: 981px) and (max-width: 1220px) {
  html body .maido-stage3k-menu-panel { width: 260px !important; min-width: 260px !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 { width: 220px !important; min-width: 220px !important; }
}

/* Mobile: use the correct imported mobile banner and restore the old white mobile header style. */
@media (max-width: 980px) {
  html body.has-hero-header .site-header--hero,
  html body.has-hero-header .site-header {
    position: relative !important;
    background: #ffffff !important;
    color: #050505 !important;
    box-shadow: none !important;
  }

  html body.has-hero-header .site-header--hero .primary-header {
    background: #ffffff !important;
  }

  html body.has-hero-header .site-header--hero .container.header-grid,
  html body.has-hero-header .site-header--hero .container.header-grid--landing {
    min-height: 116px !important;
    height: 116px !important;
    padding: 0 24px !important;
    display: grid !important;
    grid-template-columns: 72px 1fr auto !important;
    align-items: center !important;
  }

  html body.has-hero-header .site-header--hero .brand--center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.has-hero-header .site-header--hero .brand__logo--full,
  html body.has-hero-header .site-header--hero .brand img {
    max-height: 82px !important;
  }

  html body.has-hero-header .site-header--hero .menu-toggle {
    display: inline-flex !important;
    width: 54px !important;
    height: 54px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.has-hero-header .site-header--hero .menu-toggle span {
    height: 4px !important;
    width: 34px !important;
    background: #050505 !important;
    border-radius: 3px !important;
  }

  html body.has-hero-header .site-header--hero .maido-stage3o-header-contact {
    display: none !important;
  }

  html body.has-hero-header .site-header--hero .header-actions {
    gap: 24px !important;
  }

  html body.has-hero-header .site-header--hero .header-icon {
    width: 38px !important;
    height: 42px !important;
  }

  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    background-image: url('/image/catalog/imgs/banner-mble-1.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    min-height: min(860px, calc(100vh - 116px)) !important;
    height: min(860px, calc(100vh - 116px)) !important;
    max-height: none !important;
  }

  html body.maido-stage3k-home .landing-hero__inner,
  html body.has-hero-header .landing-hero__inner {
    left: 44px !important;
    right: 32px !important;
    bottom: 112px !important;
    max-width: none !important;
  }

  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: var(--maido-3q-hero-font) !important;
    font-size: clamp(23px, 5.3vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
  }

  html body.has-hero-header .site-header--hero .main-nav {
    top: 116px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(78vw, 590px) !important;
    padding: 0 !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.15) !important;
    overflow: visible !important;
  }

  html body.has-hero-header .site-header--hero .main-nav .nav-link,
  html body.has-hero-header .site-header--hero .nav-link span:first-child {
    justify-content: center !important;
    min-height: 54px !important;
    font-size: 17px !important;
  }

  html body .maido-stage3k-menu-panel,
  html body.has-hero-header .maido-stage3k-menu-panel {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 0 16px 16px !important;
  }

  html body .maido-stage3k-row,
  html body .maido-stage3k-view-all {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 22px !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-size: 15px !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 {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 560px) {
  html body.has-hero-header .site-header--hero .container.header-grid,
  html body.has-hero-header .site-header--hero .container.header-grid--landing {
    min-height: 94px !important;
    height: 94px !important;
    padding: 0 18px !important;
    grid-template-columns: 56px 1fr auto !important;
  }

  html body.has-hero-header .site-header--hero .brand__logo--full,
  html body.has-hero-header .site-header--hero .brand img {
    max-height: 72px !important;
  }

  html body.has-hero-header .site-header--hero .header-actions {
    gap: 16px !important;
  }

  html body.has-hero-header .site-header--hero .header-icon {
    width: 32px !important;
    height: 36px !important;
  }

  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    min-height: min(720px, calc(100vh - 94px)) !important;
    height: min(720px, calc(100vh - 94px)) !important;
  }

  html body.maido-stage3k-home .landing-hero__inner,
  html body.has-hero-header .landing-hero__inner {
    left: 28px !important;
    right: 24px !important;
    bottom: 86px !important;
  }

  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-size: clamp(19px, 5.7vw, 28px) !important;
  }

  html body.has-hero-header .site-header--hero .main-nav {
    top: 94px !important;
    width: min(86vw, 420px) !important;
  }
}