/* ── Header — exact redesign match ── */

/* ═══ TOP BAR ═══ */
.site-top-header-wrap,
.site-top-header-wrap .site-header-row-container-inner {
  background: #15110E !important;
}
.site-top-header-wrap .site-container {
  max-width: 1340px !important;
  padding: 0 clamp(18px, 5vw, 56px) !important;
  height: 38px !important;
}
.site-top-header-inner-wrap {
  min-height: 38px !important;
  justify-content: center !important;
}
.header-html-inner p {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #F3EEE5 !important;
  margin: 0 !important;
}

/* ═══ MAIN HEADER ═══ */
#masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}
#masthead, .site-header, .site-header-wrap,
.site-header-inner-wrap, .site-header-upper-wrap, .site-header-upper-inner-wrap,
.site-main-header-wrap, #main-header, .site-header-row-container-inner,
.site-main-header-wrap .site-header-row-container-inner {
  background: rgba(247,243,236,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#masthead {
  border-bottom: 1px solid rgba(21,17,14,0.13) !important;
}
.site-main-header-wrap .site-container {
  max-width: 1340px !important;
  padding: 0 clamp(18px, 5vw, 56px) !important;
}
.site-main-header-inner-wrap {
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 20px !important;
}
/* Override the Avanam "has-sides no-center" flex layout */
.site-main-header-inner-wrap::before,
.site-main-header-inner-wrap::after {
  display: none !important;
}

/* ═══ MOTUHAKE WORDMARK ═══ */
.site-branding {
  justify-self: start !important;
  grid-column: 1 !important;
}
.site-branding .brand {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
  text-decoration: none !important;
  align-items: flex-start !important;
}
/* Add MOTUHAKE text via CSS content since the link is empty */
.site-branding .brand::before {
  content: "MOTUHAKE" !important;
  display: block !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  color: #15110E !important;
}
.site-branding .brand::after {
  content: "Wear your story" !important;
  display: block !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: #6E665D !important;
  margin-top: 5px !important;
}
/* Hide any image inside branding */
.site-branding img,
.site-branding .custom-logo,
.branding-layout-standard img {
  display: none !important;
}

/* ═══ NAVIGATION (center column) ═══ */
.site-header-main-section-left {
  justify-self: start !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.site-header-main-section-center {
  display: flex !important;
  justify-self: center !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.site-header-main-section-right {
  justify-self: end !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
/* Move the nav from left section to center if it is there */
.site-header-main-section-left .site-header-item-main-navigation {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Nav links */
.primary-navigation .menu > li > a,
.site-header .menu > li > a,
#primary-menu > li > a {
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #6E665D !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.primary-navigation .menu > li > a:hover {
  color: #15110E !important;
}

/* Header icons */
.site-header-main-section-right a,
.site-header-main-section-right button,
.header-cart-button,
.header-account-button,
.header-search-button {
  background: none !important;
  border: none !important;
  color: #15110E !important;
  padding: 6px !important;
}

/* Cart count badge */
.header-cart-content-wrap .cart-count,
.cart-count {
  background: #CE1126 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
}

/* Hide bottom header */
.site-bottom-header-wrap { display: none !important; }
.site-header-main-section-left .site-header-item-main-navigation {
  position: static !important;
  transform: none !important;
}

/* ═══ MOBILE HEADER ═══ */
#mobile-header {
  background: rgba(247,243,236,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(21,17,14,0.13) !important;
}
#mobile-header .site-branding .brand::before {
  font-size: 18px !important;
  letter-spacing: 0.18em !important;
}
#mobile-header .site-branding .brand::after {
  font-size: 7px !important;
  letter-spacing: 0.3em !important;
}
#mobile-header .site-branding img { display: none !important; }

/* ═══ FORCE WORDMARK VISIBLE ═══ */
.site-branding .brand {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
  text-decoration: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  font-size: inherit !important;
}
/* Remove old pseudo-elements */
.site-branding .brand::before,
.site-branding .brand::after {
  display: none !important;
  content: none !important;
}
/* Real wordmark spans */
.mth-wordmark {
  display: block !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  color: #15110E !important;
  text-transform: uppercase !important;
}
.mth-tagline {
  display: block !important;
  font-family: "Hanken Grotesk", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: #6E665D !important;
  margin-top: 5px !important;
}
/* Hide the image logo (background-image on the brand link) */
.site-branding .brand {
  background-image: none !important;
  background-size: 0 !important;
  width: auto !important;
  height: auto !important;
}
.site-branding img,
.site-branding .custom-logo {
  display: none !important;
}