#header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 9998;
  width: 100%;
}

.admin-bar #header { top: 32px !important; }

body.biin-custom-header-enabled #header.ct-header,
body.biin-custom-header-enabled [data-header*="type-1"] #header.ct-header {
  display: block !important;
}

.biin-header,
.biin-header * {
  box-sizing: border-box;
  font-family: var(--font-biin-ar) !important;
  letter-spacing: 0;
}

.biin-header {
  position: relative;
  width: 100%;
  color: var(--biin-brand-black);
  background: var(--biin-brand-cream);
  border-bottom: 1px solid color-mix(in srgb, var(--biin-brand-black) 10%, transparent);
  transition: border-color var(--biin-motion-base) var(--biin-ease-soft);
}

#header.is-scrolled .biin-header {
  border-bottom-color: color-mix(in srgb, var(--biin-brand-black) 20%, transparent);
}

.biin-header__inner {
  width: min(calc(100% - 2 * max(28px, var(--biin-gutter))), var(--biin-container-wide));
  min-height: 80px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  gap: var(--biin-space-6);
  transition: min-height var(--biin-motion-base) var(--biin-ease-soft);
}

#header.is-scrolled .biin-header__inner { min-height: 70px; }

.biin-header__brand {
  display: block;
  justify-self: start;
  width: 126px;
  height: 60px;
  overflow: hidden;
}
.biin-header__brand img {
  display: block;
  width: 126px;
  height: 60px;
  object-fit: cover;
  transform: scale(1.25);
}

.biin-header a { color: inherit; text-decoration: none; }
.biin-header__desktop-nav,
.biin-header__actions { display: flex; align-items: center; }
.biin-header__desktop-nav { gap: clamp(20px, 2.2vw, 38px); }
.biin-header__actions { justify-self: end; gap: 4px; }
.biin-header__desktop-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--biin-type-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--biin-motion-fast) ease;
}
.biin-header__desktop-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--biin-motion-base) var(--biin-ease-standard);
}
.biin-header__desktop-nav a:hover { color: var(--biin-brand-brown); }
.biin-header__desktop-nav a:hover::after,
.biin-header__desktop-nav a[aria-current=page]::after { transform: scaleX(1); }

.biin-header__action,
.biin-header__search-field button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--biin-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.biin-header__action:hover,
.biin-header__search-field button:hover { color: var(--biin-brand-brown); }
.biin-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--biin-icon) center / contain no-repeat;
  mask: var(--biin-icon) center / contain no-repeat;
}
.biin-icon--search { --biin-icon: url('../../svg/search.svg'); }
.biin-icon--account { --biin-icon: url('../../svg/user-round.svg'); }
.biin-icon--cart { --biin-icon: url('../../svg/shopping-bag.svg'); }
.biin-icon--menu { --biin-icon: url('../../svg/menu.svg'); }
.biin-header.is-menu-open .biin-icon--menu { --biin-icon: url('../../svg/x.svg'); }

.biin-header__cart { position: relative; }
.biin-header__cart-count {
  position: absolute;
  top: 0;
  inset-inline-start: 26px;
  min-width: 17px;
  height: 17px;
  padding-inline: 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--biin-brand-brown);
  color: var(--biin-brand-cream);
  font-size: 10px;
  line-height: 1;
}

.biin-header__search { position: relative; }
.biin-header__search summary { list-style: none; }
.biin-header__search summary::-webkit-details-marker { display: none; }
.biin-header__search-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  z-index: 2;
  width: 320px;
  padding: 20px;
  background: var(--biin-brand-cream);
  border: 1px solid color-mix(in srgb, var(--biin-brand-black) 14%, transparent);
}
.biin-header__search-panel label { display: block; margin-bottom: 9px; font-size: var(--biin-type-sm); }
.biin-header__search-field { display: flex; border-bottom: 1px solid var(--biin-brand-black); }
.biin-header__search-field input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: var(--biin-type-sm);
}
.biin-header__search-field input::placeholder { color: color-mix(in srgb, var(--biin-brand-black) 55%, var(--biin-brand-cream)); }
.biin-header__menu-button,
.biin-header__mobile-nav { display: none; }
.biin-header :is(a, button, summary, input):focus-visible { outline: 2px solid var(--biin-brand-brown); outline-offset: 3px; }

@media (min-width: 1151px) {
  .biin-header__brand { grid-column: 3; grid-row: 1; justify-self: end; }
  .biin-header__desktop-nav { grid-column: 2; grid-row: 1; }
  .biin-header__actions { grid-column: 1; grid-row: 1; justify-self: start; }
}

@media (max-width: 1150px) {
  .biin-header__inner { min-height: 72px; grid-template-columns: 1fr auto; gap: var(--biin-space-3); }
  #header.is-scrolled .biin-header__inner { min-height: 66px; }
  .biin-header__brand { grid-column: 2; grid-row: 1; justify-self: end; }
  .biin-header__actions { grid-column: 1; grid-row: 1; justify-self: start; }
  .biin-header__desktop-nav { display: none; }
  .biin-header__menu-button { display: inline-flex; order: -1; }
  .biin-header__mobile-nav {
    display: grid;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: max-height var(--biin-motion-base) var(--biin-ease-standard), opacity var(--biin-motion-base) var(--biin-ease-soft);
  }
  .biin-header.is-menu-open .biin-header__mobile-nav {
    max-height: min(80vh, 500px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    padding: 8px var(--biin-gutter) 8px;
    border-top: 1px solid color-mix(in srgb, var(--biin-brand-black) 10%, transparent);
  }
  .biin-header__mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid color-mix(in srgb, var(--biin-brand-black) 10%, transparent);
    font-size: var(--biin-type-body);
    font-weight: 500;
  }
  .biin-header__mobile-nav a[aria-current=page] { color: var(--biin-brand-brown); }
  .biin-header__mobile-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  .biin-header__brand,
  .biin-header__brand img { width: 94px; height: 58px; }
  .biin-header__actions { gap: 0; }
  .biin-header__action { min-width: 42px; }
  .biin-header__search-panel {
    position: fixed;
    top: 72px;
    left: var(--biin-gutter);
    right: var(--biin-gutter);
    width: auto;
  }
  #header.is-scrolled .biin-header__search-panel { top: 66px; }
}
@media (max-width: 389px) {
  .biin-header__account { display: none; }
}
@media (max-width: 782px) {
  .admin-bar #header { top: 46px !important; }
  .admin-bar .biin-header__search-panel { top: 118px; }
  .admin-bar #header.is-scrolled .biin-header__search-panel { top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .biin-header,
  .biin-header__inner,
  .biin-header__desktop-nav a,
  .biin-header__desktop-nav a::after,
  .biin-header__mobile-nav { transition: none; }
}