/* =========================================
   1) Hide logo image + company name
========================================= */
.Header__brandLogoImg,
.Header__brandName {
  display: none !important;
}

/* =========================================
   2) Hide tabs/navigation
========================================= */
.Header__headerNav {
  display: none !important;
}

/* =========================================
   3) Dedicated IMAGE AREA (prevents overlap)
========================================= */
.Header__headerImg {
  width: 100% !important;

  /* 🔴 Increase this if you want more space above search */
  min-height: 600px !important;

  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 420px auto !important;

  opacity: 1 !important;
  filter: none !important;
}

/* =========================================
   4) Header container spacing BELOW image
========================================= */
.Header__headerContainer {
  padding-top: 16px !important;
  padding-bottom: 28px !important;
}

/* =========================================
   5) Stack layout vertically (image → search)
========================================= */
#headerRow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove brand block entirely */
.Header__headerBrand {
  display: none !important;
}

/* =========================================
   6) Search placement (clearly below image)
========================================= */
.Header__headerSearch {
  margin-top: 80px !important;   /* 🔴 THIS prevents overlap */
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.Header__headerSearchInner {
  width: clamp(260px, 70vw, 640px) !important;
}

/* =========================================
   7) Responsive adjustments
========================================= */
@media (max-width: 768px) {
  .Header__headerImg {
    min-height: 120px !important;
    background-size: 320px auto !important;
  }

  .Header__headerSearch {
    margin-top: 24px !important;
  }
}

@media (max-width: 420px) {
  .Header__headerImg {
    min-height: 100px !important;
    background-size: 260px auto !important;
  }
}

/* =========================================
   8) Remove any theme overlay/tint
========================================= */
.Header__headerImg::before,
.Header__headerContainer::before {
  content: none !important;
}


