/* ==========================================================================
   Header — match Figma (MRB Metals, node 220-91)
   White 104px header · Inter 500 18px #2d2d2d nav · orange #f5821f accents
   Grey pill search (#f8f8f9) · no offcanvas hamburger on desktop
   ========================================================================== */

.bs-header-4-area.tx-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Logo: white cell, 253x104 (SVG canvas already includes its padding) */
.bs-header-4-area .bs-header-4-logo {
  background: #ffffff;
  max-width: 253px;
  padding: 0;
  min-height: 104px;
  flex: 0 0 auto;
}
.bs-header-4-area .bs-header-4-logo img,
.bs-header-4-area .tx-logo img {
  max-width: 253px !important;
  width: 253px;
  height: 104px;
}
@media (max-width: 991px) {
  .bs-header-4-area .bs-header-4-logo img,
  .bs-header-4-area .tx-logo img {
    width: 190px;
    height: 78px;
    max-width: 190px !important;
  }
  .bs-header-4-area .bs-header-4-logo {
    min-height: 0;
  }
}

/* Main row: white, 104px, nav left / search right */
.bs-header-4-area .bs-header-4-main {
  background: #ffffff;
  align-items: center;
  min-height: 104px;
  padding-left: 200px;
  padding-right: 60px;
  padding-top: 20px;
  gap: 20px;
}
@media (max-width: 1599px) {
  .bs-header-4-area .bs-header-4-main {
    padding-left: 60px;
    padding-right: 30px;
  }
}
@media (max-width: 1199px) {
  .bs-header-4-area .bs-header-4-main {
    padding-left: 30px;
  }
}

/* Navigation: Inter 500 18px, #2d2d2d, 40px gaps */
.bs-header-4-main .bs-main-navigation .navbar-nav {
  gap: 40px;
}
.bs-header-4-main .bs-main-navigation .navbar-nav li a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #2d2d2d;
  padding: 24px 0;
}
/* remove the theme's "*" hover marker */
.bs-header-4-main .bs-main-navigation .navbar-nav li a::after {
  display: none;
}
.bs-header-4-main .bs-main-navigation .navbar-nav li:hover > a,
.bs-header-4-main .bs-main-navigation .navbar-nav li.current-menu-item > a,
.bs-header-4-main .bs-main-navigation .navbar-nav li.current-menu-ancestor > a {
  color: #f5821f;
}
/* dropdown caret in brand orange — Figma shows a solid filled triangle
   (FA caret-down), not the theme's outline chevron */
.bs-header-4-main .bs-main-navigation .navbar-nav li:is(.dropdown) > a {
  padding-right: 22px;
}
.bs-header-4-main .bs-main-navigation .navbar-nav li:is(.dropdown) > a::before {
  content: "\f0d7";
  font-family: "Font Awesome 6 free";
  font-weight: 900;
  color: #f5821f;
}
/* mobile menu: same solid caret on the submenu toggle */
.mobile-main-navigation ul li .dropdown-btn i::before {
  content: "\f0d7";
  font-weight: 900;
  color: #f5821f;
}
/* dropdown panel */
.bs-header-4-main .bs-main-navigation .navbar-nav li .dropdown-menu li a {
  font-size: 16px;
  color: #2d2d2d;
  padding: 12px 20px;
}

/* Search: grey pill with icon + "Search for Products" */
.bs-header-4-action-link .bs-search-btn-2 {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: #f8f8f9;
  padding: 14px 16px;
  min-width: 234px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #666672;
  text-transform: none;
  border: 0;
}
.bs-header-4-action-link .bs-search-btn-2 i {
  color: #666672;
  font-size: 16px;
}
.bs-header-4-action-link .bs-search-btn-2:hover,
.bs-header-4-action-link .bs-search-btn-2:hover i {
  color: #f5821f;
}
@media (max-width: 1399px) {
  .bs-header-4-action-link .bs-search-btn-2 {
    min-width: 0;
  }
}

.bs-header-4-action-link {
  gap: 40px;
}

/* ==========================================================================
   Responsive fixes
   ========================================================================== */

/* Header row must never wrap or overflow */
.bs-header-4-area .bs-header-4-row {
  flex-wrap: nowrap;
  align-items: center;
}
.bs-header-4-area .bs-header-4-right,
.bs-header-4-area .bs-header-4-main {
  min-width: 0;
}
/* keep the pill label on one line at every size it is visible */
.bs-header-4-action-link .bs-search-btn-2 {
  white-space: nowrap;
}

/* Small laptops / tablet landscape / Nest Hub & Nest Hub Max (992–1199):
   tighten nav so all items + search stay on one 104px row */
@media (max-width: 1199px) {
  .bs-header-4-main .bs-main-navigation .navbar-nav {
    gap: 24px;
  }
  .bs-header-4-main .bs-main-navigation .navbar-nav li a {
    font-size: 16px;
  }
  .bs-header-4-area .bs-header-4-main {
    padding-right: 20px;
    gap: 16px;
  }
  .bs-header-4-action-link {
    gap: 20px;
  }
  .bs-header-4-area .bs-header-4-logo img,
  .bs-header-4-area .tx-logo img {
    width: 220px;
    height: 90px;
    max-width: 220px !important;
  }
}

/* Nest Hub (1024x600) is the tightest desktop-nav case: icon-only search */
@media (min-width: 992px) and (max-width: 1099px) {
  .bs-header-4-action-link .bs-search-btn-2 {
    font-size: 0;
    gap: 0;
    padding: 14px;
  }
  .bs-header-4-action-link .bs-search-btn-2 i {
    font-size: 16px;
  }
}

/* Tablet (768–991): hamburger menu; logo stays a comfortable size */
@media (max-width: 991px) {
  .bs-header-4-area .bs-header-4-logo img,
  .bs-header-4-area .tx-logo img {
    width: 220px;
    height: 90px;
    max-width: 220px !important;
  }
  .bs-header-4-area .bs-header-4-main {
    min-height: 0;
    padding: 12px 20px 12px 20px;
  }
  /* smaller, softer hamburger button */
  .bs-header-4-action-link .bs-offcanvas-btn-3 {
    width: 48px;
    height: 48px;
    gap: 4px;
    border-radius: 6px;
  }
  .bs-header-4-action-link .bs-offcanvas-btn-3 span {
    width: 4px;
    height: 4px;
  }
}

/* Mobile (≤575): shrink logo, icon-only search, keep hamburger on screen */
@media (max-width: 575px) {
  .bs-header-4-area .bs-header-4-logo {
    max-width: 180px;
  }
  .bs-header-4-area .bs-header-4-logo img,
  .bs-header-4-area .tx-logo img {
    width: 175px;
    height: 72px;
    max-width: 175px !important;
  }
  .bs-header-4-area .bs-header-4-main {
    padding: 10px 12px;
    gap: 10px;
  }
  .bs-header-4-action-link .bs-offcanvas-btn-3 {
    width: 42px;
    height: 42px;
  }
  .bs-header-4-action-link {
    gap: 12px;
  }
  .bs-header-4-action-link .bs-search-btn-2 {
    font-size: 0;
    gap: 0;
    padding: 12px;
    min-width: 0;
  }
  .bs-header-4-action-link .bs-search-btn-2 i {
    font-size: 16px;
  }
}

/* ==========================================================================
   Sticky header (header 4 — driven by child header.js)
   ========================================================================== */

.bs-header-4-area.mrb-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 8;
  background: #fff;
  box-shadow: none;
}

/* ==========================================================================
   Offcanvas (hamburger) panel
   ========================================================================== */

/* Freeze the page behind the open menu. `html.mrb-menu-open` is mirrored from
   the panel's own `active` class in header.js. Both elements need the lock:
   the theme runs Lenis smooth scroll, which drives window scrolling, and only
   locking <body> leaves the document scrollable on touch devices. */
html.mrb-menu-open,
html.mrb-menu-open body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
/* ...while the panel itself still scrolls, without chaining that scroll to
   the page once it reaches its end. */
.wa-offcanvas-area {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Submenu parents ("About Us", "Products", "Quality") were unclickable: the
   theme's expand arrow is an absolutely positioned span with `width: 100%`
   covering the whole row, so a tap always landed on the toggle and never on
   the link underneath. Shrink its hit area to the arrow itself, leaving the
   label to the <a>. */
.mobile-main-navigation ul li .dropdown-btn {
  width: 56px;
  left: auto;
}
/* ...except for parents that are not real links (Products, Quality are
   custom items with no href) — there the whole row stays the toggle. */
.mobile-main-navigation ul li:not(:has(> a[href])) .dropdown-btn {
  width: 100%;
}

/* bigger logo at the top of the offcanvas menu */
.wa-offcanvas-area .wa-offcanvas-top-logo {
  max-width: 210px;
}
.wa-offcanvas-area .wa-offcanvas-top-logo img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Search popup: only the "Search for Products" title + input
   ========================================================================== */

.wa-search-box .wa-search-tag-wrap,
.wa-search-box .wa-search-title {
  display: none;
}
/* single input row, no leftover title spacing */
.wa-search-box .wa-search-wrap {
  margin-bottom: 0;
}
.wa-search-box {
  padding-top: 48px;
  padding-bottom: 48px;
}
.wa-search-box .wa-search-form-input {
  font-size: 16px;
  padding: 12px 48px 12px 12px;
}
/* close button: keep it aligned with the input on every screen size */
.wa-search-box .wa-search-box-close {
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  z-index: 2;
}
/* keep the input clear of the close button on smaller screens */
@media (max-width: 991px) {
  .wa-search-box .wa-search-container {
    padding-right: 88px;
  }
}
@media (max-width: 767px) {
  .wa-search-box .wa-search-box-close {
    right: 16px;
    top: 50%;
    height: 36px;
    width: 36px;
    font-size: 15px;
  }
  .wa-search-box .wa-search-container {
    padding-right: 64px;
  }
  .wa-search-box {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* Figma has no hamburger on desktop — keep it for mobile menu only */
@media (min-width: 992px) {
  .bs-header-4-action-link .bs-offcanvas-btn-3 {
    display: none;
  }
}
/* hamburger lines readable on white when it does show (mobile) */
.bs-header-4-action-link .bs-offcanvas-btn-3 .line {
  background-color: #2d2d2d;
}