/*
  Maido Customs Pure PHP Rebuild - Stage 3O
  Live Maido screenshot tune: hero title font/size/position, header menu font/size,
  centred logo position, right-side | CONTACT | link, and hero height/crop alignment.

  Note: the old OpenCart/Journal font settings appear to be generated from Journal
  DB configuration rather than stored as font files in the supplied theme zips.
  This pass uses close web-font matches and safe fallbacks.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Oswald:wght@500;600;700&display=swap');

:root {
  --maido-3o-font-menu: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --maido-3o-font-hero: "Montserrat", "Avenir Next", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --maido-3o-black: #050505;
  --maido-3o-header-height: 132px;
}

/* Header should sit over the hero, like the live OpenCart/Jounal site. */
body.has-hero-header .site-header.site-header--hero {
  height: var(--maido-3o-header-height) !important;
  min-height: var(--maido-3o-header-height) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.has-hero-header .site-header--hero .primary-header,
body.has-hero-header .site-header--hero .header-grid,
body.has-hero-header .site-header--hero .header-grid--landing {
  height: var(--maido-3o-header-height) !important;
  min-height: var(--maido-3o-header-height) !important;
}

body.has-hero-header .site-header--hero .container.header-grid,
body.has-hero-header .site-header--hero .container.header-grid--landing {
  padding-left: clamp(48px, 3.15vw, 64px) !important;
  padding-right: clamp(38px, 2.45vw, 52px) !important;
}

/* Logo: centre against the full viewport, not between nav/actions. */
body.has-hero-header .site-header--hero .brand--center {
  position: absolute !important;
  left: 50% !important;
  top: 24px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 2 !important;
}

body.has-hero-header .site-header--hero .brand__logo--full,
body.has-hero-header .site-header--hero .brand img {
  max-height: 104px !important;
  width: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Menu: closer to the old Maido condensed, black, slightly lighter than Impact. */
body.has-hero-header .site-header--hero .main-nav {
  height: var(--maido-3o-header-height) !important;
  min-height: var(--maido-3o-header-height) !important;
  gap: clamp(28px, 2.65vw, 48px) !important;
  align-items: center !important;
}

body.has-hero-header .site-header--hero .main-nav a,
body.has-hero-header .site-header--hero .main-nav .nav-link,
body.has-hero-header .site-header--hero .nav-link span:first-child {
  font-family: var(--maido-3o-font-menu) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .004em !important;
  color: var(--maido-3o-black) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

body.has-hero-header .site-header--hero .nav-caret {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  margin-left: 8px !important;
  transform: translateY(-1px) !important;
  color: var(--maido-3o-black) !important;
  opacity: .72 !important;
}

/* Right-side action links/icons. Keep | CONTACT | immediately left of the search icon. */
body.has-hero-header .site-header--hero .header-actions {
  height: var(--maido-3o-header-height) !important;
  min-height: var(--maido-3o-header-height) !important;
  gap: clamp(18px, 1.65vw, 30px) !important;
  align-items: center !important;
}

body .maido-stage3o-header-contact,
body.has-hero-header .site-header--hero .maido-stage3o-header-contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--maido-3o-black) !important;
  font-family: var(--maido-3o-font-menu) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding-top: 1px !important;
}

body .maido-stage3o-header-contact:hover,
body .maido-stage3o-header-contact:focus { opacity: .72 !important; }

body.has-hero-header .site-header--hero .header-icon {
  width: 30px !important;
  height: 34px !important;
  color: var(--maido-3o-black) !important;
}
body.has-hero-header .site-header--hero .header-icon span { color: var(--maido-3o-black) !important; }

/* Homepage hero: match old banner crop/height more closely on the same screen width. */
body.maido-stage3k-home .landing-hero {
  height: clamp(650px, 47.2vw, 970px) !important;
  min-height: clamp(650px, 47.2vw, 970px) !important;
  max-height: 970px !important;
  background-image: url('/image/catalog/imgs/banner-1.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

body.maido-stage3k-home .landing-hero::before,
body.maido-stage3k-home .landing-hero::after,
body.maido-stage3k-home .landing-hero__shade {
  display: none !important;
  content: none !important;
}

/* Hero title: old site is wide/bold, not Impact-condensed. */
body.maido-stage3k-home .landing-hero__inner {
  position: absolute !important;
  left: clamp(82px, 5vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(230px, 12.25vw, 260px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body.maido-stage3k-home .landing-hero h1,
body.maido-stage3k-home .landing-hero__title {
  font-family: var(--maido-3o-font-hero) !important;
  color: #ffffff !important;
  font-size: clamp(46px, 3.05vw, 63px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.30) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

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

/* Search overlay must remain Stage 3M-sized and working. */
body .maido-stage3k-search-panel {
  width: min(58vw, 860px) !important;
}

@media (max-width: 1180px) {
  :root { --maido-3o-header-height: 112px; }
  body.has-hero-header .site-header--hero .brand--center { top: 18px !important; }
  body.has-hero-header .site-header--hero .brand__logo--full,
  body.has-hero-header .site-header--hero .brand img { max-height: 90px !important; }
  body.has-hero-header .site-header--hero .main-nav a,
  body.has-hero-header .site-header--hero .main-nav .nav-link,
  body.has-hero-header .site-header--hero .nav-link span:first-child { font-size: 17px !important; }
  body.maido-stage3k-home .landing-hero__inner {
    left: 58px !important;
    bottom: clamp(150px, 15vw, 210px) !important;
  }
  body.maido-stage3k-home .landing-hero h1,
  body.maido-stage3k-home .landing-hero__title { font-size: clamp(38px, 4.2vw, 54px) !important; }
}

@media (max-width: 980px) {
  :root { --maido-3o-header-height: 78px; }
  body.has-hero-header .site-header.site-header--hero {
    position: sticky !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }
  body.has-hero-header .site-header--hero .brand--center {
    position: static !important;
    transform: none !important;
  }
  body.has-hero-header .site-header--hero .brand__logo--full,
  body.has-hero-header .site-header--hero .brand img { max-height: 62px !important; }
  body.has-hero-header .site-header--hero .main-nav a,
  body.has-hero-header .site-header--hero .main-nav .nav-link,
  body.has-hero-header .site-header--hero .nav-link span:first-child { font-size: 16px !important; }
  body .maido-stage3o-header-contact { display: none !important; }
  body.maido-stage3k-home .landing-hero {
    height: calc(100vh - var(--maido-3o-header-height)) !important;
    min-height: 540px !important;
    max-height: none !important;
    background-image: url('/image/catalog/imgs/banner-mble-1.png') !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  body.maido-stage3k-home .landing-hero__inner {
    left: 26px !important;
    right: 24px !important;
    bottom: clamp(74px, 13vh, 112px) !important;
    max-width: calc(100vw - 52px) !important;
  }
  body.maido-stage3k-home .landing-hero h1,
  body.maido-stage3k-home .landing-hero__title {
    font-size: clamp(24px, 7.2vw, 34px) !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
  }
}