/* Mio Decor — Header, single component stylesheet (8.64.1).
   Mobile geometry follows Mobile - Home.svg: 390px frame, 76px header,
   57x54 Mio artwork, 34px divider, 70x70 partner artwork.
   All preceding header rules were removed from main.css. */
.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 84px;
  background: #fff;
  border-bottom: 1px solid #e4e9ef;
}
.header-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr) 215px;
  column-gap: 24px;
  align-items: center;
  width: min(var(--mio-container-max), calc(100% - 2 * var(--mio-container-gutter)));
  height: 100%;
  margin-inline: auto;
}
.header-logos { display: flex; align-items: center; min-width: 0; }
.brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--mio-header-logo-width, 72px);
  height: 72px;
}
.brand-logo-image, .brand .custom-logo {
  display: block;
  width: auto;
  max-width: var(--mio-header-logo-width, 72px);
  max-height: 58px;
  height: auto;
  object-fit: contain;
}
.partner-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 42px;
  margin-inline: var(--mio-header-logo-gap, 14px);
  background: #e4e9ef;
}
.partner-logo {
  display: flex;
  flex: 0 0 var(--mio-partner-logo-width, 64px);
  align-items: center;
  justify-content: center;
  height: 72px;
}
.partner-logo img {
  display: block;
  width: auto;
  max-width: var(--mio-partner-logo-width, 64px);
  max-height: 64px;
  height: auto;
  object-fit: contain;
}
.main-nav { min-width: 0; justify-self: center; }
.main-nav ul { display: flex; align-items: center; justify-content: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; font-size: 13px; font-weight: 600; color: #263445; white-space: nowrap; }
.header-cta { justify-self: end; width: 215px; min-width: 0; height: 46px; padding: 0 20px; white-space: nowrap; }
.menu-toggle { display: none; }
@media (min-width: 1101px) and (max-width: 1439px) {
  .header-row { grid-template-columns: 230px minmax(0, 1fr) 190px; column-gap: 18px; }
  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 12px; }
  .header-cta { width: 190px; }
}
@media (max-width: 1100px) {
  .site-header { height: 76px; }
  .header-row { display: flex; width: calc(100% - 32px); gap: 10px; }
  .header-cta { display: none; }
  .menu-toggle {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .menu-toggle span { display: block; flex: 0 0 1.5px; width: 17px; height: 1.5px; margin: 0; background: #101820; border-radius: 1px; }
  .menu-toggle span:nth-child(2) { width: 12px; margin-left: 5px; }
  .menu-toggle span:nth-child(3) { width: 7px; margin-left: 10px; }
  .main-nav {
    display: none;
    position: absolute;
    z-index: 1010;
    top: calc(100% - 1px);
    right: 0;
    width: min(310px, calc(100vw - 22px));
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e4e9ef;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 26px rgba(14, 35, 56, .13);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { width: 100%; }
  .main-nav a { padding: 12px 4px; border-bottom: 1px solid #e9edf1; font-size: 14px; white-space: normal; }
  .main-nav li:last-child a { border-bottom: 0; }
}
/* Exactly the mobile logo / divider / hamburger proportions of the Figma source. */
@media (max-width: 760px) {
  .site-header { height: 76px; }
  .header-row { width: 100%; padding: 0 11px; gap: 0; }
  .header-logos { gap: 0; }
  .brand { width: 57px; height: 54px; flex: 0 0 57px; }
  .brand-logo-image, .brand .custom-logo { max-width: 57px; max-height: 54px; }
  /* Default logo: reproduce the actual Figma SVG pattern crop. Custom logos are untouched. */
  .brand .brand-logo-figma { display: block; position: static; width: 57px; height: 54px; max-width: 57px; max-height: 54px; object-fit: contain; }
  .partner-divider { height: 34px; margin-left: 28px; margin-right: 28px; }
  .partner-logo { flex: 0 0 70px; width: 70px; height: 70px; }
  .partner-logo img { max-width: 70px; max-height: 70px; }
  .menu-toggle { flex-basis: 44px; width: 44px; height: 44px; }
  .main-nav { right: 11px; }
}
@media (max-width: 340px) {
  /* On very narrow screens compress unused separation before shrinking logos. */
  .partner-divider { margin-left: 16px; margin-right: 16px; }
}