/* =========================================================
   MB SKINCARE — Header / Hero / Heading Size Fix
   Add this file AFTER the main CSS and Best Sellers script.
   ========================================================= */

/* 1) Keep the navigation header in the normal page flow
      so it no longer covers the top of the hero banner. */
body > header,
header[role="banner"],
.site-header,
.main-header,
.store-header,
[class*="site-header"],
[class*="main-header"],
[class*="store-header"]{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 30 !important;
}

/* 2) Make sure the hero starts below the header. */
main > section:has(h1),
body > section:has(h1),
section:has(h1){
  margin-top: 18px !important;
}

/* 3) Reduce oversized headings. */
section:has(h1) h1{
  max-width: 560px !important;
  font-size: clamp(44px, 4.2vw, 62px) !important;
  line-height: .98 !important;
}

section > h2,
section > div > h2,
.section-title,
[class*="section-title"],
[class*="sectionTitle"]{
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.08 !important;
  margin-bottom: 22px !important;
}

/* Best Sellers title added by the custom script */
.mb-best-sellers-title{
  font-size: clamp(28px, 2.8vw, 40px) !important;
  margin: 10px 0 22px !important;
}

/* Slightly reduce the category section’s visual height. */
section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img),
section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img){
  max-height: 520px !important;
}

section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img) img,
section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img) img{
  max-height: 520px !important;
  object-fit: cover !important;
}

/* Mobile */
@media (max-width: 640px){
  main > section:has(h1),
  body > section:has(h1),
  section:has(h1){
    margin-top: 8px !important;
  }

  section:has(h1) h1{
    max-width: 220px !important;
    font-size: 30px !important;
    line-height: .98 !important;
  }

  section > h2,
  section > div > h2,
  .section-title,
  [class*="section-title"],
  [class*="sectionTitle"],
  .mb-best-sellers-title{
    font-size: 22px !important;
    margin-bottom: 14px !important;
  }

  section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img),
  section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img),
  section:not(:has(a[href*="/products/"])) a[href*="/collections/"]:has(img) img,
  section:not(:has(a[href*="/products/"])) a[href*="/category/"]:has(img) img{
    max-height: 390px !important;
  }
}