/**
 * White Office — global header layout redesign
 * Scoped to HFE/Elementor template .elementor-2321 / #masthead only.
 *
 * Fixes:
 * - Undersized logo (previous max-height:48px + Elementor height:0%)
 * - Floating inset nav/header cards (Elementor boxed 1255/1333px + shadows)
 * - Unbalanced grid (2fr 8fr .1fr .1fr)
 */

:root {
  --wo-hdr-bg: #ffffff;
  --wo-hdr-ink: #171717;
  --wo-hdr-muted: #6b7280;
  --wo-hdr-line: #e5e7eb;
  --wo-hdr-accent: #d71920;
  --wo-hdr-accent-hover: #b8141b;
  --wo-hdr-radius: 10px;
  --wo-hdr-max: 1280px;
  --wo-hdr-pad: clamp(1rem, 3vw, 2rem);
  --wo-hdr-logo-w: 168px;
  --wo-hdr-search-h: 48px;
}

/* -------------------------------------------------------------------------- */
/* Full-width shell — kill floating card look                                 */
/* -------------------------------------------------------------------------- */

body.ehf-header #masthead,
#masthead:has(.elementor-2321) {
  background: var(--wo-hdr-bg) !important;
  border-bottom: 1px solid var(--wo-hdr-line);
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  position: sticky;
  top: 0;
  z-index: 999;
}

.elementor-2321 {
  background: var(--wo-hdr-bg);
  color: var(--wo-hdr-ink);
  width: 100% !important;
  max-width: none !important;
}

.elementor-2321 > .e-con,
.elementor-2321 .e-con {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.elementor-2321 .elementor-element.e-con {
  background: transparent;
}

/* Logo height:0% from Elementor must die on every breakpoint */
.elementor-2321 .elementor-element-68d34e14 img,
.elementor-2321 .elementor-element-68d34e14 img.attachment-large,
.elementor-2321 .elementor-element-68d34e14 img.attachment-full {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
}

/* -------------------------------------------------------------------------- */
/* Desktop only — do NOT force display on .hero-head / nav (breaks hide-*)    */
/* -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* Override Elementor boxed content widths that create inset rectangles */
  .elementor-2321 .elementor-element-22f815bf,
  .elementor-2321 .hero-head,
  .elementor-2321 .elementor-element-196d58ef {
    --content-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  /* Row 1 — logo / search / actions */
  .elementor-2321 .elementor-element-22f815bf.hero-head,
  .elementor-2321 .hero-head.elementor-element-22f815bf {
    display: grid !important;
    grid-template-columns: var(--wo-hdr-logo-w) minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 1.25rem !important;
    row-gap: 0 !important;
    min-height: 4.75rem;
    padding: 0.85rem var(--wo-hdr-pad) !important;
    box-sizing: border-box;
  }

  .elementor-2321 .elementor-element-22f815bf > .elementor-element {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Logo — ~160–180px wide */
  .elementor-2321 .elementor-element-68d34e14 {
    width: var(--wo-hdr-logo-w) !important;
    max-width: var(--wo-hdr-logo-w) !important;
    --container-widget-width: var(--wo-hdr-logo-w) !important;
    justify-self: start;
    align-self: center !important;
    text-align: left !important;
    line-height: 0;
  }

  .elementor-2321 .elementor-element-68d34e14 .elementor-widget-container,
  .elementor-2321 .elementor-element-68d34e14 a {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    max-width: 100%;
  }

  .elementor-2321 .elementor-element-68d34e14 img,
  .elementor-2321 .elementor-element-68d34e14 img.attachment-large,
  .elementor-2321 .elementor-element-68d34e14 img.attachment-full {
    width: var(--wo-hdr-logo-w) !important;
    max-width: var(--wo-hdr-logo-w) !important;
  }

  /* Search — fills remaining space */
  .elementor-2321 .elementor-element-769d19ff {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch;
    align-self: center !important;
  }

  .elementor-2321 .elementor-element-769d19ff .xpro-elementor-search-wrapper {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
}

.elementor-2321 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow: hidden;
  border: 1px solid var(--wo-hdr-line) !important;
  border-radius: var(--wo-hdr-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.elementor-2321 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group > input,
.elementor-2321 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group > input.field {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--wo-hdr-search-h) !important;
  min-height: var(--wo-hdr-search-h) !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wo-hdr-ink) !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

.elementor-2321 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group > input::placeholder {
  color: var(--wo-hdr-muted);
}

.elementor-2321 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group:focus-within {
  border-color: rgba(215, 25, 32, 0.45) !important;
}

/* Kill Elementor/xpro expanding-input layouts that break the bar */
.elementor-2321 .elementor-element-769d19ff .xpro-elementor-search-wrapper:not(.xpro-elementor-search-layout-3) .xpro-elementor-search-input-group > input,
.elementor-2321 .elementor-element-769d19ff .xpro-elementor-search-layout-3 .xpro-elementor-search-input-group:hover > input,
.elementor-2321 .elementor-element-769d19ff .xpro-elementor-search-layout-3 .xpro-elementor-search-input-group:focus-within > input,
.elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-wrapper:not(.xpro-elementor-search-layout-3) .xpro-elementor-search-input-group > input,
.elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-layout-3 .xpro-elementor-search-input-group:hover > input,
.elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-layout-3 .xpro-elementor-search-input-group:focus-within > input {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.elementor-2321 .xpro-elementor-search-button {
  flex: 0 0 var(--wo-hdr-search-h) !important;
  width: var(--wo-hdr-search-h) !important;
  min-width: var(--wo-hdr-search-h) !important;
  height: var(--wo-hdr-search-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--wo-hdr-accent) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease;
}

.elementor-2321 .xpro-elementor-search-button:hover,
.elementor-2321 .xpro-elementor-search-button:focus-visible {
  background: var(--wo-hdr-accent-hover) !important;
  color: #fff !important;
}

.elementor-2321 .xpro-elementor-search-button > svg,
.elementor-2321 .xpro-elementor-search-button svg {
  fill: #fff !important;
  color: #fff !important;
  width: 1.1rem;
  height: 1.1rem;
}

/* Actions — cart + account (desktop grid alignment only) */
@media (min-width: 1025px) {
  .elementor-2321 .elementor-element-772773c,
  .elementor-2321 .elementor-element-533a260 {
    justify-self: end;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    --container-widget-width: auto !important;
  }

  .elementor-2321 .elementor-element-772773c {
    margin-inline-start: 0.25rem !important;
  }

  .elementor-2321 .elementor-element-533a260 {
    margin-inline-start: 0.15rem !important;
  }
}

.elementor-2321 .hfe-menu-cart__toggle .elementor-button,
.elementor-2321 .hfe-cart-menu-wrap-default span.hfe-cart-count,
.elementor-2321 .hfe-site-header-cart .elementor-button {
  color: var(--wo-hdr-ink) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 2.5rem;
  justify-content: center;
}

.elementor-2321 .hfe-menu-cart__toggle .elementor-button:hover,
.elementor-2321 .hfe-cart-menu-wrap-default span.hfe-cart-count:hover {
  color: var(--wo-hdr-accent) !important;
  background: transparent !important;
}

/* Keep cart count badge attached / brand red */
.elementor-2321 .hfe-cart-count,
.elementor-2321 .elementor-button-icon[data-counter],
.elementor-2321 .hfe-menu-cart__toggle .elementor-button-text {
  color: inherit;
}

.elementor-2321 .hfe-cart-count:after,
.elementor-2321 .hfe-menu-cart__toggle .elementor-button-icon[data-counter]:before,
.elementor-2321 .hfe-menu-cart__toggle .elementor-button-icon[data-counter]:after {
  background-color: var(--wo-hdr-accent) !important;
  border-color: var(--wo-hdr-accent) !important;
  color: #fff !important;
}

.elementor-2321 .elementor-element-533a260 .elementor-icon,
.elementor-2321 .elementor-element-533a260.elementor-view-default .elementor-icon,
.elementor-2321 .elementor-element-0ae3400 .elementor-icon,
.elementor-2321 .elementor-element-0ae3400.elementor-view-default .elementor-icon {
  color: var(--wo-hdr-ink) !important;
  border-color: transparent !important;
  background: transparent !important;
  fill: var(--wo-hdr-ink) !important;
  font-size: 1.25rem !important;
  transition: color 0.2s ease;
}

.elementor-2321 .elementor-element-533a260 .elementor-icon svg,
.elementor-2321 .elementor-element-0ae3400 .elementor-icon svg {
  fill: currentColor !important;
  width: 1.25rem;
  height: 1.25rem;
}

.elementor-2321 .elementor-element-533a260 a:hover .elementor-icon,
.elementor-2321 .elementor-element-0ae3400 a:hover .elementor-icon {
  color: var(--wo-hdr-accent) !important;
}

/* Remove previous decorative separators that looked awkward */
.elementor-2321 .elementor-element-772773c::before,
.elementor-2321 .elementor-element-533a260::before {
  content: none !important;
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Row 2 — integrated full-width navigation (desktop only)                    */
/* -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .elementor-2321 .elementor-element-196d58ef {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 3rem;
    padding: 0 var(--wo-hdr-pad) !important;
    border-top: 1px solid var(--wo-hdr-line) !important;
    background: var(--wo-hdr-bg) !important;
    box-sizing: border-box;
  }

  .elementor-2321 .elementor-element-4fd7c127,
  .elementor-2321 .elementor-element-406aa6f8 {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem 0.15rem;
    width: 100%;
  }

  .elementor-2321 .elementor-element-406aa6f8 {
    justify-self: end;
    width: auto !important;
  }
}

.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li > a,
.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-nav-link,
.elementor-2321 .elementor-element-4fd7c127 .dropdown-toggle.nav-link {
  color: var(--wo-hdr-ink) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
  padding: 0.8rem 0.75rem !important;
  margin: 0 !important;
  border-radius: 0;
  position: relative;
  background: transparent !important;
  transition: color 0.2s ease;
}

.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li > a::after,
.elementor-2321 .elementor-element-4fd7c127 .dropdown-toggle.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.4rem;
  height: 2px;
  background: var(--wo-hdr-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
.elementor-2321 .elementor-element-4fd7c127 .dropdown-toggle.nav-link:hover {
  color: var(--wo-hdr-accent) !important;
}

.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li > a:hover::after,
.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::after,
.elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a::after,
.elementor-2321 .elementor-element-4fd7c127 .dropdown-toggle.nav-link:hover::after {
  transform: scaleX(1);
}

.elementor-2321 .elementor-element-406aa6f8 .xpro-elementor-nav-link,
.elementor-2321 .elementor-element-14c98c6c .xpro-elementor-nav-link {
  color: var(--wo-hdr-ink) !important;
  font-weight: 600 !important;
  padding: 0.8rem 0.5rem !important;
}

.elementor-2321 .elementor-element-406aa6f8 .xpro-elementor-nav-link:hover,
.elementor-2321 .elementor-element-14c98c6c .xpro-elementor-nav-link:hover {
  color: var(--wo-hdr-accent) !important;
}

/* Dropdown panels remain cards (interaction containers) */
.elementor-2321 .xpro-elementor-dropdown-menu {
  border: 1px solid var(--wo-hdr-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(23, 23, 23, 0.12) !important;
  overflow: hidden;
  background: #fff !important;
}

.elementor-2321 .xpro-elementor-dropdown-menu > li > a,
.elementor-2321 .xpro-elementor-dropdown-item {
  color: var(--wo-hdr-ink) !important;
  background: #fff !important;
}

.elementor-2321 .xpro-elementor-dropdown-menu > li > a:hover,
.elementor-2321 .xpro-elementor-dropdown-item:hover {
  color: var(--wo-hdr-accent) !important;
  background: #fafafa !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile / tablet — preserve existing architecture                           */
/* -------------------------------------------------------------------------- */

/* Reinforce Elementor visibility classes so desktop layout never leaks down */
@media (max-width: 1024px) {
  .elementor-2321 .elementor-hidden-tablet,
  .elementor-2321 .elementor-hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .elementor-2321 .elementor-hidden-desktop {
    display: none !important;
  }
}

.elementor-2321 #mob-head,
.elementor-2321 .elementor-element-4c44fa70,
.elementor-2321 .search-head,
.elementor-2321 .elementor-element-307fc423 {
  width: 100% !important;
  max-width: 100% !important;
  --content-width: 100% !important;
  padding-inline: var(--wo-hdr-pad) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.elementor-2321 #mob-head,
.elementor-2321 .elementor-element-4c44fa70 {
  align-items: center !important;
  min-height: 3.75rem;
  padding-block: 0.55rem !important;
}

.elementor-2321 .elementor-element-5562af8b {
  text-align: center !important;
  line-height: 0;
}

.elementor-2321 .elementor-element-5562af8b img {
  width: auto !important;
  max-width: 150px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

.elementor-2321 .search-head,
.elementor-2321 .elementor-element-307fc423 {
  padding-block: 0 0.75rem !important;
  border-bottom: 1px solid var(--wo-hdr-line);
}

.elementor-2321 button.xpro-elementor-horizontal-menu-toggler {
  color: var(--wo-hdr-ink) !important;
  background: transparent !important;
  border: 1px solid var(--wo-hdr-line) !important;
  border-radius: 10px !important;
}

.elementor-2321 button.xpro-elementor-horizontal-menu-toggler svg {
  fill: var(--wo-hdr-ink) !important;
}

.elementor-2321 .xpro-elementor-horizontal-menu-responsive-mobile,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-tablet {
  background: #fff !important;
  color: var(--wo-hdr-ink) !important;
  box-shadow: 0 12px 40px rgba(23, 23, 23, 0.14);
}

.elementor-2321 .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav > li > a,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
  color: var(--wo-hdr-ink) !important;
  background: #fff !important;
  border-bottom-color: var(--wo-hdr-line) !important;
}

.elementor-2321 .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a:hover {
  color: var(--wo-hdr-accent) !important;
}

.elementor-2321 .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-dropdown-menu > li > a,
.elementor-2321 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li > a {
  color: var(--wo-hdr-muted) !important;
  background: #fafafa !important;
}

@media (max-width: 1200px) {
  :root {
    --wo-hdr-logo-w: 150px;
  }

  .elementor-2321 .elementor-element-4fd7c127 .xpro-elementor-horizontal-navbar-nav > li > a,
  .elementor-2321 .elementor-element-4fd7c127 .dropdown-toggle.nav-link {
    padding-inline: 0.55rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 1024px) {
  .elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-wrapper .xpro-elementor-search-input-group > input,
  .elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-button {
    height: 44px !important;
  }

  .elementor-2321 .elementor-element-58c00e53 .xpro-elementor-search-button {
    width: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 767px) {
  .elementor-2321 .elementor-element-5562af8b img {
    max-width: 140px !important;
    max-height: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-2321 *,
  .elementor-2321 *::before,
  .elementor-2321 *::after {
    transition: none !important;
  }
}