/**
 * School Band Class — HEADER REDESIGN (v2 polish)
 * Square logo · aligned burger · search above body
 */

/* ---- Kill legacy float/absolute header fights ---- */
#header .header-nav .mobile,
#header .header-nav .float-xs-left,
#header .header-nav .float-xs-right,
#header .top-logo,
#header #_mobile_logo:not(.sbc-hdr-hidden) {
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
#header .header-nav .clearfix { display: none !important; }

/* ---- Stacking: header + search always above page body ---- */
#header {
  position: relative !important;
  z-index: 5000 !important;
  background: #000 !important;
  border-bottom: 1px solid #222 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  overflow: visible !important;
  isolation: isolate;
}
/* Body/content must paint BELOW header (search was under #wrapper) */
#wrapper,
#content,
#main,
.page-content,
#index #wrapper,
body#index #wrapper,
#index #content,
body > main,
#js-product-list,
.featured-products {
  position: relative !important;
  z-index: 1 !important;
}
/* Search widget + dropdown above body, still inside header stack */
#header .sbc-hdr-main,
#header .header-top {
  position: relative !important;
  z-index: 5001 !important;
  overflow: visible !important;
}
#header #search_widget,
#header .search-widget,
#header .sbc-hdr-tools #search_widget {
  position: relative !important;
  z-index: 5002 !important;
  overflow: visible !important;
}
#header .ui-autocomplete,
ul.ui-autocomplete,
body > ul.ui-autocomplete {
  z-index: 6000 !important;
}

#header a { color: #f2f2f2 !important; text-decoration: none !important; }
#header a:hover,
#header a:focus-visible { color: #e30613 !important; }

.sbc-hdr-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Skip link */
.sbc-skip-link {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 100010;
  padding: 8px 12px;
  background: #fff;
  color: #000 !important;
  font-weight: 700;
  border: 2px solid #e30613;
  border-radius: 4px;
  transform: translateY(-200%);
}
.sbc-skip-link:focus,
.sbc-skip-link:focus-visible { transform: translateY(0); }

/* ========== DESKTOP UTIL BAR ========== */
.sbc-hdr-util {
  background: #0a0a0a !important;
  border-bottom: 1px solid #1c1c1c;
}
.sbc-hdr-util > .sbc-hdr-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 12px;
}
.sbc-hdr-util__left,
.sbc-hdr-util__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 40px;
}
.sbc-hdr-util__right {
  margin-left: auto;
  justify-content: flex-end;
}
.sbc-hdr-util a,
.sbc-hdr-util button,
.sbc-hdr-util .user-info a,
.sbc-hdr-util .blockcart .header,
.sbc-hdr-util #contact-link a {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-height: 32px !important;
  min-width: 0 !important;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  color: #ddd !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 2px !important;
  box-shadow: none !important;
}
.sbc-hdr-util .material-icons {
  font-size: 18px !important;
  line-height: 1 !important;
  width: 18px;
  height: 18px;
  color: #e30613 !important;
}
.sbc-hdr-util .cart-products-count { color: #e30613 !important; font-weight: 700; }
.sbc-hdr-util .currency-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ========== MOBILE TOP BAR ========== */
.sbc-hdr-util__mobile {
  display: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 6px 0;
  /* 3 equal alignment zones */
  display: none;
  grid-template-columns: 48px minmax(0, 1fr) 88px;
  align-items: center;
  justify-items: stretch;
  column-gap: 8px;
}

/* Burger + box: fixed 44×44, icon perfectly centered */
#header .sbc-hdr-burger,
#header #menu-icon.sbc-hdr-burger,
#header button#menu-icon {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  background: #111 !important;
  color: #fff !important;
  line-height: 1 !important;
  cursor: pointer;
  flex: 0 0 44px !important;
  float: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}
#header .sbc-hdr-burger .material-icons,
#header #menu-icon .material-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  /* Material Icons often sit low — optical center */
  transform: none !important;
  position: static !important;
}
#header .sbc-hdr-burger:focus-visible,
#header #menu-icon:focus-visible {
  outline: 2px solid #e30613;
  outline-offset: 2px;
}
/* Grid cell for burger so box sits in the first column flush */
.sbc-hdr-util__mobile > .sbc-hdr-burger,
.sbc-hdr-util__mobile > #menu-icon {
  justify-self: start;
  align-self: center;
}

/* LOGO — square source must stay square (no rectangular stretch) */
.sbc-hdr-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
  flex: 0 0 auto;
  max-width: none !important;
  width: auto !important;
}
#header .sbc-hdr-logo img,
#header .sbc-hdr-logo .logo,
#header #_desktop_logo img,
#header #_desktop_logo .logo,
#header .sbc-hdr-logo-slot img,
#header .sbc-hdr-logo-slot .logo.img-fluid,
#header img.logo {
  display: block !important;
  box-sizing: border-box !important;
  /* Lock to square box — never 3:1 / wide rect from HTML attrs or theme */
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  /* kill Bootstrap img-fluid / theme height:auto stretch */
  flex: none !important;
}
#header .sbc-hdr-logo--mobile img,
#header .sbc-hdr-util__mobile .sbc-hdr-logo img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}
.sbc-hdr-logo--mobile {
  justify-self: center;
  align-self: center;
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.sbc-hdr-wordmark {
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e30613 !important;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.sbc-hdr-mobile-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}
.sbc-hdr-mobile-actions > div {
  display: flex;
  align-items: center;
}
.sbc-hdr-mobile-actions a,
.sbc-hdr-mobile-actions .blockcart .header,
.sbc-hdr-mobile-actions .user-info a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
}
.sbc-hdr-mobile-actions .material-icons {
  font-size: 22px !important;
  line-height: 1 !important;
  color: #e30613 !important;
  width: 22px;
  height: 22px;
}
.sbc-hdr-mobile-actions .hidden-sm-down,
.sbc-hdr-mobile-actions .cart-products-count {
  /* show count as badge if present */
  font-size: 11px;
  color: #e30613 !important;
}

/* ========== MAIN BAR (logo + tools) ========== */
.sbc-hdr-main {
  background: #000 !important;
  position: relative !important;
  z-index: 1002 !important;
  overflow: visible !important;
}
.sbc-hdr-main__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px 0;
  box-sizing: border-box;
}
.sbc-hdr-logo-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 64px;
  max-width: 64px;
}
.sbc-hdr-tools {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  position: relative !important;
  z-index: 1003 !important;
}

/* Menu + search */
.sbc-hdr-tools .top-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.sbc-hdr-tools .top-menu a {
  color: #f0f0f0 !important;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px !important;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  line-height: 1.2;
}
.sbc-hdr-tools .top-menu a:hover {
  background: rgba(227, 6, 19, 0.15);
  color: #fff !important;
}

/* Search — solid bar, never under body */
.sbc-hdr-tools #search_widget,
.sbc-hdr-tools .search-widget {
  position: relative !important;
  z-index: 1004 !important;
  flex: 0 1 280px;
  max-width: 300px;
  margin: 0 !important;
  isolation: isolate;
}
.sbc-hdr-tools #search_widget form,
.sbc-hdr-tools .search-widget form {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  width: 100%;
  background: #141414 !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: none !important;
}
.sbc-hdr-tools #search_widget input[type="text"],
.sbc-hdr-tools .search-widget input[type="text"],
.sbc-hdr-tools #search_widget input.ui-autocomplete-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #141414 !important;
  color: #fff !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 42px !important;
  font-size: 14px !important;
}
.sbc-hdr-tools #search_widget button,
.sbc-hdr-tools .search-widget button,
.sbc-hdr-tools #search_widget .search,
.sbc-hdr-tools button[type="submit"] {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e30613 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.sbc-hdr-tools #search_widget button .material-icons,
.sbc-hdr-tools .search-widget .material-icons {
  color: #fff !important;
  font-size: 20px !important;
}

/* Autocomplete above content */
ul.ui-autocomplete,
.ui-autocomplete {
  z-index: 2000 !important;
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
}

/* Mobile drawer */
.sbc-hdr-drawer {
  background: #0d0d0d;
  border-top: 1px solid #222;
  position: relative;
  z-index: 1005 !important;
}
.sbc-hdr-drawer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 12px 14px;
}
.sbc-hdr-drawer a {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid #1f1f1f;
  color: #f2f2f2 !important;
  font-weight: 600;
}
.sbc-hdr-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}
.sbc-hdr-hidden,
#header #_mobile_logo.sbc-hdr-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* Breakpoints */
@media (max-width: 767px) {
  .sbc-hdr-util > .sbc-hdr-wrap {
    display: block;
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .sbc-hdr-util__left,
  .sbc-hdr-util__right {
    display: none !important;
  }
  .sbc-hdr-util__mobile {
    display: grid !important;
  }
  .sbc-hdr-main {
    z-index: 1002 !important;
  }
  .sbc-hdr-main__row {
    min-height: 52px;
    padding: 6px 0 10px;
  }
  .sbc-hdr-logo-slot {
    display: none !important;
  }
  .sbc-hdr-tools {
    width: 100%;
    justify-content: stretch;
  }
  .sbc-hdr-tools #search_widget,
  .sbc-hdr-tools .search-widget {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }
  .sbc-hdr-tools #_desktop_top_menu,
  .sbc-hdr-tools .menu.js-top-menu,
  .sbc-hdr-tools .menu.hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sbc-hdr-util__mobile {
    display: none !important;
  }
  .sbc-hdr-logo-slot {
    display: flex !important;
  }
}

.sbc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ========== Account / Sign-in vertical align (not bottom-stuck) ========== */
#header .sbc-hdr-util__right,
#header .sbc-hdr-util__left {
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
}
#header #_desktop_user_info,
#header #_desktop_cart,
#header #_desktop_currency_selector,
#header #_desktop_language_selector,
#header #_desktop_contact_link,
#header .sbc-hdr-util .user-info,
#header .sbc-hdr-util .blockcart,
#header .sbc-hdr-util .currency-selector,
#header .sbc-hdr-util .language-selector {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  float: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}
#header .sbc-hdr-util .user-info a,
#header #_desktop_user_info a,
#header .sbc-hdr-util .blockcart .header,
#header #_desktop_cart .header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  line-height: 1 !important;
  float: none !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
#header .sbc-hdr-util .user-info .material-icons,
#header #_desktop_user_info .material-icons,
#header .sbc-hdr-util .blockcart .material-icons,
#header #_desktop_cart .material-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
}
#header .sbc-hdr-util .user-info span,
#header #_desktop_user_info span.hidden-sm-down {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
#header .sbc-hdr-mobile-actions,
#header .sbc-hdr-mobile-actions #_mobile_user_info,
#header .sbc-hdr-mobile-actions #_mobile_cart,
#header .sbc-hdr-mobile-actions .user-info,
#header .sbc-hdr-mobile-actions .blockcart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: 40px !important;
}
#header .sbc-hdr-mobile-actions .user-info a,
#header .sbc-hdr-mobile-actions #_mobile_user_info a,
#header .sbc-hdr-mobile-actions .blockcart .header,
#header .sbc-hdr-mobile-actions #_mobile_cart .header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  float: none !important;
}
#header .sbc-hdr-mobile-actions .material-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
}
#header .header-nav .user-info,
#header .header-nav #_desktop_user_info,
#header .header-nav #_mobile_user_info {
  float: none !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* ========== EMERGENCY RESTORE: force header visible, kill floating box ========== */
#header,
#header.l-header,
header#header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5000 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: #000 !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

#header .sbc-hdr-util,
#header .sbc-hdr-main,
#header .header-nav,
#header .header-top,
#header .sbc-hdr-wrap,
#header .sbc-hdr-main__row,
#header .sbc-hdr-tools {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  float: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* flex rows need flex not block */
#header .sbc-hdr-util > .sbc-hdr-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#header .sbc-hdr-main__row {
  display: flex !important;
  align-items: center !important;
}
#header .sbc-hdr-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

/* Desktop logo MUST show (custom.css was forcing #_desktop_logo display:none) */
#header #_desktop_logo,
#header .sbc-hdr-logo-slot,
#header .sbc-hdr-logo-slot.hidden-sm-down {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  max-width: 72px !important;
}

/* Kill classic absolute / floating top-right cart+user box */
#header .header-nav .right-nav,
#header .header-top .position-static,
#header #_desktop_cart,
#header #_desktop_user_info,
#header .blockcart,
#header .user-info,
#header .top-logo,
#header .header-top .search-widget {
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Never let theme float search alone to the right of a vanished bar */
#header .header-top .search-widget,
#header #search_widget {
  float: none !important;
  position: relative !important;
  z-index: 5002 !important;
}

/* Mobile bar grid */
@media (max-width: 767px) {
  #header .sbc-hdr-util > .sbc-hdr-wrap {
    display: block !important;
  }
  #header .sbc-hdr-util__left.hidden-sm-down,
  #header .sbc-hdr-util__right.hidden-sm-down {
    display: none !important;
  }
  #header .sbc-hdr-util__mobile,
  #header .sbc-hdr-util__mobile.hidden-md-up {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 88px !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* On mobile hide desktop logo slot only */
  #header #_desktop_logo.sbc-hdr-logo-slot,
  #header .sbc-hdr-logo-slot.hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #header .sbc-hdr-util__mobile.hidden-md-up {
    display: none !important;
  }
  #header .sbc-hdr-util__left.hidden-sm-down,
  #header .sbc-hdr-util__right.hidden-sm-down {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
  }
  #header #_desktop_logo,
  #header .sbc-hdr-logo-slot {
    display: flex !important;
  }
}

/* Account / cart chips vertically centered (not bottom-stuck) */
#header .sbc-hdr-util__right,
#header .sbc-hdr-util__left {
  display: flex !important;
  align-items: center !important;
}
#header #_desktop_user_info,
#header #_desktop_cart,
#header .sbc-hdr-util .user-info,
#header .sbc-hdr-util .blockcart {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  float: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
#header .sbc-hdr-util .user-info a,
#header .sbc-hdr-util .blockcart .header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  line-height: 1 !important;
  float: none !important;
}
#header .sbc-hdr-util .material-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
}

/* Square logo lock */
#header .sbc-hdr-logo img,
#header #_desktop_logo img,
#header img.logo {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
}
#header .sbc-hdr-logo--mobile img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}

/* Body below header */
#wrapper, #content, #main, .page-content {
  position: relative !important;
  z-index: 1 !important;
}

/* ========== CENTER ALIGN: logo + menu button (20260720T203320Z) ========== */
/* True 3-zone grid: equal side columns so logo is geometric center.
   Burger and logo share same 44px optical box and vertical center. */
@media (max-width: 767px) {
  #header .sbc-hdr-util__mobile {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 8px !important;
    min-height: 56px !important;
    padding: 6px 0 !important;
    width: 100% !important;
  }

  /* Menu button — left zone, vertically centered with logo */
  #header .sbc-hdr-util__mobile > .sbc-hdr-burger,
  #header .sbc-hdr-util__mobile > #menu-icon {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #header .sbc-hdr-burger,
  #header #menu-icon.sbc-hdr-burger,
  #header button#menu-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .sbc-hdr-burger .material-icons,
  #header #menu-icon .material-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    /* slight optical center for Material Icons glyph */
    transform: translateY(0) !important;
  }

  /* Logo — dead center column */
  #header .sbc-hdr-util__mobile > .sbc-hdr-logo,
  #header .sbc-hdr-util__mobile > .sbc-hdr-logo--mobile {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .sbc-hdr-logo--mobile img,
  #header .sbc-hdr-util__mobile .sbc-hdr-logo img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Account/cart — right zone, vertically centered */
  #header .sbc-hdr-util__mobile > .sbc-hdr-mobile-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 44px !important;
    margin: 0 !important;
  }

  #header .sbc-hdr-mobile-actions a,
  #header .sbc-hdr-mobile-actions .blockcart .header,
  #header .sbc-hdr-mobile-actions .user-info a {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Desktop: keep logo vertically centered with tools row */
@media (min-width: 768px) {
  #header .sbc-hdr-main__row {
    align-items: center !important;
  }
  #header .sbc-hdr-logo-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  #header .sbc-hdr-logo-slot .sbc-hdr-logo,
  #header #_desktop_logo .sbc-hdr-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   SBC mobile safe-area header (status bar / notch / Dynamic Island)
   Must stay OUTSIDE fragile @supports gates — iOS needs constant()+env().
   ========================================================================== */
html {
  background: #000 !important;
}
/* Black bar into the status area; controls sit below it */
#header,
header#header,
#header.l-header {
  padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0-11.2 */
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: #000 !important;
  background-color: #000 !important;
  box-sizing: border-box !important;
}
#header .sbc-hdr-util,
#header .header-nav,
#header .sbc-hdr-main,
#header .header-top {
  background: #000 !important;
  background-color: #000 !important;
}
/* Mobile util row (burger / logo / cart) always clear of the clock */
@media (max-width: 767px) {
  #header .sbc-hdr-util {
    min-height: 56px;
  }
  #header .sbc-hdr-util > .sbc-hdr-wrap {
    min-height: 56px;
    padding-top: 0 !important;
  }
  #header .sbc-hdr-burger,
  #header #menu-icon.sbc-hdr-burger,
  #header button#menu-icon,
  #header .sbc-hdr-logo--mobile,
  #header .sbc-hdr-mobile-actions a,
  #header .sbc-hdr-mobile-actions button {
    position: relative !important;
    z-index: 2;
  }
  /* Drawer also clears status bar when open */
  #mobile_top_menu_wrapper,
  #header .sbc-hdr-drawer,
  .sbc-hdr-drawer {
    padding-top: constant(safe-area-inset-top) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
  }
}
/* Horizontal + home-indicator insets */
body {
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right, 0px);
}


/* === SBC header menu layout fix 2026-07-23 === */
/* Top-level only: horizontal row. Never dump nested category trees into the bar. */
#header .sbc-hdr-tools {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem 0.75rem !important;
  min-width: 0 !important;
}

#header .sbc-hdr-tools .menu.js-top-menu,
#header #_desktop_top_menu {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#header #top-menu.top-menu,
#header .top-menu[data-depth="0"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.15rem 0.1rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

#header .top-menu[data-depth="0"] > li {
  display: inline-flex !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header .top-menu[data-depth="0"] > li > a.dropdown-item,
#header .top-menu[data-depth="0"] > li > a {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 0.45rem 0.55rem !important;
  margin: 0 !important;
  color: #f2f2f2 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  float: none !important;
}

#header .top-menu[data-depth="0"] > li > a:hover {
  color: #e10600 !important;
  background: rgba(225, 6, 0, 0.08) !important;
}

/* Hide ALL nested / popover / collapse category dumps from header bar */
#header .top-menu .popover,
#header .top-menu .sub-menu,
#header .top-menu .js-sub-menu,
#header .top-menu .collapse,
#header .top-menu ul[data-depth="1"],
#header .top-menu ul[data-depth="2"],
#header .top-menu ul[data-depth="3"],
#header .top-menu .navbar-toggler,
#header .top-menu .collapse-icons,
#header .top-menu span.float-xs-right {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Search stays on the right, doesn't get crushed by menu */
#header .sbc-hdr-tools #search_widget,
#header .sbc-hdr-tools .search-widget {
  flex: 0 0 auto !important;
  max-width: 220px !important;
  margin-left: 0.5rem !important;
}

@media (max-width: 991px) {
  #header .top-menu[data-depth="0"] > li > a {
    padding: 0.4rem 0.4rem !important;
    font-size: 0.75rem !important;
  }
}

/* Desktop only for desktop menu (mobile uses drawer) */
@media (max-width: 767px) {
  #header #_desktop_top_menu,
  #header .sbc-hdr-tools .menu.js-top-menu.hidden-sm-down {
    display: none !important;
  }
}