.sf-topline {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--sf-red-dark),
    #2b302b 55%,
    var(--sf-gold)
  );
}

.sf-second-bg {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 338px;
  background: url("/legacy-assets/bg-second.png") no-repeat center top;
  pointer-events: none;
}

.sf-header {
  position: relative;
  z-index: 2;
  height: 150px;
  /* The reference header is NOT a continuous dark wash: it is a translucent
     TOP BAR strip (::after below), then a clear gap where the hero photo
     shows through untouched, then the translucent menu band (.sf-nav). Any
     full-header gradient reads as a hard-edged dark slab over the photo. */
  background: none;
  /* NB: no backdrop-filter here — it turns the header into the containing
     block for position:fixed descendants, which clipped the mobile drawer
     (.sf-drawer / .sf-drawer-backdrop live inside the header) to the header's
     150px. (The old frosted blur is gone entirely — the reference shows the
     photo crisp behind the header.) */
}

/* Top-bar strip behind Login / language (reference .top-bar). Kept SHORT so
   a clear gap of untouched hero photo shows between this strip and the menu
   band — that gap is what makes the reference header feel like it floats
   over the photo. */
.sf-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 45px;
  /* Glass, not a slab: the reference's smoke texture is clearly visible
     THROUGH its top bar. */
  background: rgba(16, 20, 21, 0.08);
  pointer-events: none;
}

.sf-header-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: var(--sf-container);
  min-height: 108px;
  margin: 0 auto;
  padding: 0;
}

.sf-menu-line {
  position: absolute;
  left: 0;
  top: 108px;
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(178, 138, 67, 0.44),
    rgba(255, 255, 255, 0.18),
    transparent
  );
}

.sf-logo {
  position: absolute;
  left: -1px;
  top: 8px;
  z-index: 4;
  display: block;
  width: 318px;
  height: 124px;
  min-width: 0;
}

/* The logo PNG (assets/legacy-assets/stalingradfront-logo.png) is the
   reference's own logo.png byte-for-byte — white SF letters + white
   "STALINGRAD FRONT" text on TRANSPARENT background. The red skewed ribbon
   behind the text is drawn by CSS on the reference too, so keep the ::before
   ribbon — but flat (no offset-shadow slab, no blurred ::after, no rotateX
   on the img), which is what made ours look bulkier than the original. */
.sf-logo::before {
  position: absolute;
  left: 0;
  top: 48px;
  display: block;
  width: 100%;
  height: 72px;
  background: linear-gradient(135deg, #bd0606, #8c0d0d 68%, #670707);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  content: "";
  transform: skewX(-8deg);
  transform-origin: center;
}

.sf-logo img {
  position: relative;
  display: block;
  width: 273px;
  height: auto;
  margin: 20px 0 0 11px;
  object-fit: contain;
}

.sf-header-tools {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-top: 0;
  color: rgba(247, 237, 216, 0.9);
  font-family: var(--sf-font);
  font-size: 12px;
  font-weight: 800;
}

/* Reference top row: plain white text + icons (Login, flag+English), no pill
   chrome around the controls. */
.sf-header-tools a,
.sf-lang,
.sf-tool-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 0;
  border-radius: 3px;
  padding: 5px 8px;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: color 150ms ease, background 150ms ease;
}

.sf-header-tools a:hover,
.sf-lang:hover,
.sf-tool-summary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sf-tool-icon {
  width: 15px;
  height: 15px;
  opacity: 0.92;
  flex: 0 0 auto;
}

.sf-lang-flag {
  font-size: 13px;
  line-height: 1;
}

.sf-lang-caret {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.sf-header-tool {
  position: relative;
}

.sf-tool-summary {
  cursor: pointer;
  list-style: none;
}

.sf-search-summary {
  padding: 5px 8px;
}

.sf-tool-summary::-webkit-details-marker {
  display: none;
}

.sf-header-form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: 232px;
  border: 1px solid rgba(178, 138, 67, 0.38);
  border-radius: 6px;
  background: rgba(31, 29, 24, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  padding: 10px;
}

.sf-header-form input {
  min-width: 0;
  border: 1px solid rgba(178, 138, 67, 0.24);
  border-radius: 4px;
  background: rgba(250, 246, 232, 0.96);
  color: #211b14;
  padding: 8px 9px;
  font-size: 13px;
}

.sf-header-form label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(247, 237, 216, 0.82);
  font-size: 12px;
  font-weight: 700;
}

.sf-header-form label input {
  width: 14px;
  height: 14px;
  padding: 0;
}

.sf-header-form button {
  border: 1px solid rgba(178, 138, 67, 0.34);
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(189, 57, 48, 0.98),
    rgba(120, 31, 26, 0.96)
  );
  color: #fff9ec;
  padding: 8px 10px;
  font-family: var(--sf-font);
  font-weight: 800;
}

.sf-search-tool .sf-header-form {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 280px;
}

.sf-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(178, 138, 67, 0.38);
  border-radius: 999px;
  padding: 5px 12px;
  color: #fff9ec !important;
  background: linear-gradient(
    180deg,
    rgba(197, 62, 52, 0.96),
    rgba(112, 28, 23, 0.95)
  ) !important;
  border-color: rgba(178, 138, 67, 0.38) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -2px 0 rgba(44, 7, 6, 0.28) !important;
}

/* Reference menu band: a full-width translucent dark STRIP (no rounded pill
   box), items right-of-center within the container, ~56px tall. */
.sf-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  overflow: visible;
  width: 100%;
  height: 56px;
  /* -44 (not -56): leaves a ~25px window of clean photo between the top-bar
     strip and this band, like the reference. */
  margin: -44px 0 0;
  /* Translucent like the reference band — the hero photo/smoke shows through
     it, so its edges read soft, not like a solid slab. */
  background: rgba(14, 17, 18, 0.37);
  border: 0;
  border-radius: 0;
  padding: 3px calc((100% - var(--sf-container)) / 2 + 44px) 3px
    calc((100% - var(--sf-container)) / 2 + 340px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  scrollbar-width: none;
}

.sf-nav::-webkit-scrollbar {
  display: none;
}

.sf-nav-group {
  position: relative;
  flex: 0 0 auto;
}

.sf-nav a,
.sf-nav-trigger {
  flex: 0 0 auto;
  border: 1px solid transparent;
  color: rgba(255, 251, 243, 0.96);
  border-radius: 4px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; /* reference menu items measure 18px italic 700 */
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  padding: 8px 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-transform: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.sf-nav a:hover,
.sf-nav-group:hover .sf-nav-trigger {
  border-color: rgba(178, 138, 67, 0.24);
  background: rgba(226, 205, 163, 0.12);
  color: #fff9ec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sf-nav a.active {
  border-color: rgba(178, 138, 67, 0.42);
  background: linear-gradient(
    180deg,
    rgba(189, 57, 48, 0.98),
    rgba(120, 31, 26, 0.96)
  );
  color: #fff;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -2px 0 rgba(44, 7, 6, 0.3);
}

.sf-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: none;
  min-width: 240px;
  border: 1px solid rgba(178, 138, 67, 0.38);
  border-radius: 6px;
  background: rgba(31, 29, 24, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  padding: 7px;
}

.sf-nav-group:hover .sf-submenu,
.sf-nav-group:focus-within .sf-submenu {
  display: grid;
}

.sf-submenu a {
  border-radius: 4px;
  padding: 9px 11px;
  font-family: var(--sf-font, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 13px;
  font-variant-caps: normal;
  font-weight: 700;
  line-height: 1.2;
}

/* FIX: logo showed the browser default focus box (a red-ish square around the
   skewed red banner) on mouse click. Drop it on click; keep a clean ring for
   keyboard users only. */
.sf-logo:focus { outline: none; }
.sf-logo:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.sf-logo:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 5px; border-radius: 2px; }
.sf-logo img { outline: none; }

/* === Search inside the menu band (reference) ============================= */
/* The reference puts the search icon at the right END of the menu strip, not
   in the top row. Desktop only (>=981px, where the full nav is visible);
   .sf-header .sf-mobilebar out-specifies the mobile sheet's display:contents.
   The hamburger inside stays hidden on desktop (chrome.css). */
@media (min-width: 981px) {
  .sf-header .sf-mobilebar {
    display: block;
    position: absolute;
    right: calc((100% - var(--sf-container, 1180px)) / 2 - 6px);
    top: 64px;
    z-index: 6;
  }
  .sf-header .sf-mobilebar .sf-search-summary {
    min-height: 40px;
    padding: 8px;
  }
  .sf-header .sf-mobilebar .sf-search-tool .sf-header-form {
    right: 0;
    top: calc(100% + 8px);
  }
}

/* Cart count badge + login popover footer links. */
.sf-cart {
  position: relative;
}
.sf-cart-count {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: #8c2d26;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.sf-login-alt {
  color: rgba(247, 237, 216, 0.75);
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sf-login-alt:hover {
  color: #fff;
}