/* =============================================================
   Maxxtides site header
   Loaded only when Shop Settings → Header → Enable is on.
   ============================================================= */

.mx-header {
  --h-bg: #000000;
  --h-fg: #ffffff;
  --h-muted: #cfcfcf;
  --h-field: #1a1a1a;
  --h-field-border: #2e2e2e;

  background: var(--h-bg); color: var(--h-fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.mx-header.theme-light {
  --h-bg: #ffffff; --h-fg: #0a0a0a; --h-muted: #6f6f6f;
  --h-field: #f4f4f4; --h-field-border: #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.mx-header.is-sticky { position: sticky; top: 0; z-index: 90; }

.mx-header-inner {
  display: flex; align-items: center; gap: 28px;
  height: 62px; padding: 0 24px;
}

/* ---------- Logo ---------- */
.mx-logo { display: flex; align-items: center; text-decoration: none; color: inherit; flex: none; }
.mx-logo-img { max-height: 38px; width: auto; display: block; }
.mx-logo-text {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Menu ---------- */
.mx-header-nav { min-width: 0; }
.mx-menu {
  display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0;
}
.mx-menu li { position: relative; }
.mx-menu a {
  color: var(--h-muted); text-decoration: none;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.mx-menu a:hover, .mx-menu .current-menu-item > a { color: var(--h-fg); }

/* One level of dropdown, nothing deeper. */
.mx-menu .sub-menu {
  position: absolute; top: 100%; left: -14px; min-width: 190px; z-index: 5;
  background: var(--h-bg); border: 1px solid var(--h-field-border);
  list-style: none; margin: 0; padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mx-menu li:hover > .sub-menu,
.mx-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mx-menu .sub-menu a { display: block; padding: 8px 14px; font-size: 14px; }

/* ---------- Tools ---------- */
.mx-header-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }

.mx-header-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--h-field); border: 1px solid var(--h-field-border);
  padding: 8px 14px; width: 300px; max-width: 34vw;
}
.mx-header-search svg { stroke: var(--h-muted); flex: none; }
.mx-header-search input {
  background: none; border: 0; outline: none; color: var(--h-fg);
  font-size: 13px; width: 100%; padding: 0;
}
.mx-header-search input::placeholder { color: var(--h-muted); opacity: .75; }

.mx-header-icon {
  color: var(--h-fg); display: inline-flex; position: relative; text-decoration: none;
}
.mx-header-icon:hover { opacity: .75; }

.mx-cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--sale, #e0342b); color: #fff;
  font-family: "Chakra Petch", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: grid; place-items: center; padding: 0 3px;
}
.mx-cart-count.is-empty { display: none; }

.mx-header-burger {
  display: none; background: none; border: 0; cursor: pointer; color: var(--h-fg); padding: 2px;
}

/* ---------- Mobile ---------- */
.mx-header-mobile {
  border-top: 1px solid var(--h-field-border); padding: 8px 24px 16px;
}
.mx-header-mobile[hidden] { display: none; }
.mx-menu-mobile { list-style: none; margin: 0; padding: 0; }
.mx-menu-mobile a {
  display: block; padding: 12px 0; color: var(--h-muted); text-decoration: none;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--h-field-border);
}
.mx-menu-mobile a:hover { color: var(--h-fg); }
.mx-menu-mobile .sub-menu { list-style: none; margin: 0; padding-left: 16px; }

@media (max-width: 900px) {
  .mx-header-nav { display: none; }
  .mx-header-burger { display: inline-flex; }
  .mx-header-inner { gap: 14px; padding: 0 16px; }
  .mx-header-search { width: auto; flex: 1; min-width: 0; max-width: none; }
}

@media (max-width: 520px) {
  /* Search takes the whole row on a phone; the icons stay reachable. */
  .mx-header-search { padding: 7px 10px; }
  .mx-header-search input { font-size: 12.5px; }
  .mx-logo-img { max-height: 30px; }
  .mx-logo-text { font-size: 18px; }
  .mx-header-tools { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-menu .sub-menu { transition: none; }
}

/* ---------- Header rendered as a layout module ----------
   It sits inside the content flow rather than above it, so it needs to claim
   the full row the way the other modules do. */
.mx-shop-view .mx-header { width: 100%; flex: 1 1 100%; }

/* Two sticky things fighting for the top is worse than one. When the header is
   sticky the bundle bar sits under it rather than over it. */
.mx-header.is-sticky ~ .bundlebar.is-sticky { top: 62px; }