/* Shared by the static landing and the Next.js catalogue. */
.gf-header {
  --gf-text: #0f2a38;
  --gf-muted: #4b6572;
  --gf-accent: #096c98;
  --gf-accent-hover: #0e557b;
  --gf-border: #6b8593;
  --gf-haze: 238, 244, 240;
  --gf-ease: cubic-bezier(.22, .61, .36, 1);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 72px;
  flex: 0 0 72px;
  padding: 0 clamp(16px, 3vw, 40px);
  color: var(--gf-text);
  background: rgba(var(--gf-haze), .94);
  box-shadow: 0 1px 0 rgba(15, 42, 56, .08);
  backdrop-filter: blur(14px);
  font: 400 17px/1.55 "Golos Text", system-ui, sans-serif;
  transition: background-color .5s var(--gf-ease), box-shadow .5s var(--gf-ease);
}
.gf-header, .gf-header *, .gf-header *::before, .gf-header *::after { box-sizing: border-box; }
.gf-header a { text-decoration: none; }
.gf-header a, .gf-header button { -webkit-tap-highlight-color: transparent; }
.gf-header :focus-visible { outline: 3px solid var(--gf-accent); outline-offset: 3px; border-radius: 6px; }
.gf-header--overlay { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.gf-header--overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--gf-haze), .9), rgba(var(--gf-haze), .62) 55%, rgba(var(--gf-haze), 0)); transition: opacity .5s var(--gf-ease); }
.gf-header--overlay.scrolled, .gf-header--overlay.menu-open { background: rgba(var(--gf-haze), .94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(15, 42, 56, .08); }
.gf-header--overlay.scrolled::before, .gf-header--overlay.menu-open::before { opacity: 0; }
.gf-header__brand { display: flex; flex: none; align-items: center; gap: 10px; color: var(--gf-text); font: 700 1.15rem/1 "Unbounded", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.gf-header__brand img { display: block; width: 28px; height: 26px; flex: none; }
.gf-header__links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 1.08rem; font-weight: 500; }
.gf-header__links > a { position: relative; padding: 6px 0; color: var(--gf-muted); white-space: nowrap; transition: color .35s var(--gf-ease); }
.gf-header__links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gf-accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--gf-ease); }
.gf-header__links > a:hover, .gf-header__links > a[aria-current] { color: var(--gf-text); }
.gf-header__links > a:hover::after, .gf-header__links > a[aria-current]::after { transform: scaleX(1); }
.gf-header__right { display: flex; flex: none; align-items: center; gap: 18px; }
.gf-header__contact { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gf-header__menu-call { display: none; }
.gf-header__phone { color: var(--gf-accent); font: 500 14px/1.35 "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.02em; white-space: nowrap; }
.gf-header__phone:hover { text-decoration: underline; }
.gf-header__tg { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; border-radius: 10px; border: 1.5px solid var(--gf-border); color: var(--gf-accent); transition: background-color .3s var(--gf-ease), color .3s var(--gf-ease), border-color .3s var(--gf-ease); }
.gf-header__tg svg { width: 20px; height: 20px; }
.gf-header__tg:hover { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
.gf-header__langs { display: inline-flex; align-items: center; height: 36px; border: 1.5px solid var(--gf-border); border-radius: 10px; overflow: hidden; }
.gf-header__langs a { display: inline-flex; align-items: center; height: 100%; padding: 0 10px; font: 500 .82rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--gf-muted); transition: background-color .3s var(--gf-ease), color .3s var(--gf-ease); }
.gf-header__langs a + a { border-left: 1.5px solid var(--gf-border); }
.gf-header__langs a:hover { background: var(--gf-accent); color: #fff; }
.gf-header__langs a:focus-visible { outline-offset: -3px; }
.gf-header .gf-header__cta { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 999px; background: var(--gf-accent); color: #fff; font: 500 .92rem/1 "Golos Text", system-ui, sans-serif; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .35s var(--gf-ease); }
.gf-header .gf-header__cta:hover { background: var(--gf-accent-hover); color: #fff; }
.gf-header__menu-contact, .gf-header .gf-header__menu-cta, .gf-header__burger { display: none; }
/* Catalogue search: a panel under the bar on wide screens, the first row of the menu on
   narrow ones. One form serves both; suggestions come from /api/search. */
.gf-header__search-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; padding: 0; border: 1.5px solid var(--gf-border); border-radius: 10px; background: transparent; color: var(--gf-accent); cursor: pointer; transition: background-color .3s var(--gf-ease), color .3s var(--gf-ease), border-color .3s var(--gf-ease); }
.gf-header__search-btn:hover, .gf-header.search-open .gf-header__search-btn { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
.gf-search { display: none; position: absolute; top: calc(100% + 8px); right: clamp(16px, 3vw, 40px); width: min(560px, calc(100vw - 32px)); padding: 14px; border: 1px solid #c6d3ce; border-radius: 16px; background: #f9fbfa; box-shadow: 0 24px 60px -28px rgba(15, 42, 56, .45); font-size: 1rem; }
.gf-header.search-open .gf-search { display: block; }
.gf-search__label { display: block; margin: 0 0 8px; color: var(--gf-text); font-size: .86rem; font-weight: 600; line-height: 1.3; }
.gf-search__row { display: flex; gap: 8px; }
.gf-search__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--gf-border); border-radius: 12px; background: #fff; color: var(--gf-text); font: 400 1rem/1.2 "Golos Text", system-ui, sans-serif; }
.gf-search__input::placeholder { color: #6b7f89; }
.gf-search__input:focus { outline: none; border-color: var(--gf-accent); box-shadow: 0 0 0 3px rgba(9, 108, 152, .18); }
.gf-search__go { appearance: none; flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--gf-accent); color: #fff; font: 500 .95rem/1 "Golos Text", system-ui, sans-serif; cursor: pointer; }
.gf-search__go:hover { background: var(--gf-accent-hover); }
.gf-search__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.gf-search__list[hidden], .gf-search__empty[hidden] { display: none; }
.gf-search__opt a { display: grid; grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); align-items: baseline; gap: 2px 14px; padding: 10px 12px; border-radius: 10px; color: var(--gf-text); }
.gf-search__opt[aria-selected="true"] a { background: #e2eff6; }
.gf-search__sku { color: var(--gf-accent); font: 500 .9rem/1.35 "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.02em; white-space: nowrap; }
.gf-search__title { color: var(--gf-muted); font-size: .9rem; line-height: 1.4; }
.gf-search__all { margin-top: 4px; border-top: 1px solid #d3dfd9; padding-top: 4px; }
.gf-search__all a { display: block; color: var(--gf-accent); font-weight: 600; }
.gf-search__empty { margin: 10px 0 0; padding: 10px 12px; color: var(--gf-muted); font-size: .92rem; }
.gf-header__burger { appearance: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--gf-border); border-radius: 12px; background: rgba(var(--gf-haze), .6); color: var(--gf-text); cursor: pointer; transition: border-color .35s var(--gf-ease); }
.gf-header__burger:hover { border-color: var(--gf-accent); }
.gf-header__burger i { position: relative; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--gf-text); transition: background-color .2s; }
.gf-header__burger i::before, .gf-header__burger i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--gf-text); transition: transform .35s var(--gf-ease); }
.gf-header__burger i::before { top: -6px; }
.gf-header__burger i::after { top: 6px; }
.gf-header.menu-open .gf-header__burger i { background: transparent; }
.gf-header.menu-open .gf-header__burger i::before { transform: translateY(6px) rotate(45deg); }
.gf-header.menu-open .gf-header__burger i::after { transform: translateY(-6px) rotate(-45deg); }
/* Six menu items: narrower gaps keep the longest (Uzbek) labels on one line next to the phone. */
@media (max-width: 1440px) { .gf-header__links { gap: 20px; } }
/* With the search button the Uzbek bar ran 22 px over at 1181 px: tighter gaps there
   leave it about 20 px to spare. */
@media (min-width: 1181px) and (max-width: 1280px) {
  .gf-header { gap: 16px; }
  .gf-header__links { gap: 14px; }
  .gf-header__right { gap: 12px; }
}
@media (max-width: 1180px) {
  .gf-header { gap: 12px; }
  .gf-header.menu-open { background: #eef4f0; box-shadow: 0 1px 0 #c6d3ce; }
  /* Telegram stays top right at every width: the client's call, and a one-tap contact. */
  .gf-header__tg { width: 44px; height: 44px; background: #fff; }
  .gf-header__right { margin-left: auto; gap: 10px; }
  .gf-header__burger { display: inline-flex; }
  .gf-header__langs { height: 44px; background: #fff; }
  .gf-header__langs a { justify-content: center; min-width: 42px; }
  /* A closed panel is absent from the focus order, including before hydration. */
  .gf-header__links { position: absolute; top: 100%; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 6px; margin: 0; padding: 16px clamp(16px, 5vw, 32px) calc(24px + env(safe-area-inset-bottom)); height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: #f5f8f6; border-top: 1px solid #c6d3ce; }
  .gf-header.menu-open .gf-header__links { display: flex; }
  .gf-header__links > a { display: flex; align-items: center; flex: none; min-height: 48px; padding: 10px 16px; border: 1px solid #d3dfd9; border-radius: 10px; background: #fff; color: var(--gf-text); font-size: 1rem; white-space: normal; }
  .gf-header__links > a:hover { background: #edf4f8; border-color: #9bb9c9; }
  .gf-header__links > a[aria-current] { background: #e2eff6; border-color: #93b5c9; color: var(--gf-accent-hover); font-weight: 600; box-shadow: inset 3px 0 var(--gf-accent); }
  .gf-header__links > a::after { display: none; }
  .gf-header__links .gf-header__menu-contact { display: flex; color: var(--gf-accent); }
  .gf-header .gf-header__cta { min-height: 44px; }
  .gf-header__menu-call { display: flex; flex: none; align-self: stretch; align-items: stretch; gap: 0; margin-top: 12px; padding-top: 18px; border-top: 1px solid #c6d3ce; }
  .gf-header .gf-header__menu-cta { display: inline-flex; min-height: 48px; padding: 0 18px; border-bottom: 0; font-size: 1rem; }
  .gf-header__menu-call .gf-header__phone { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15px; }
  html:has(.gf-header.menu-open), body:has(.gf-header.menu-open) { overflow: hidden; }
  /* Nothing fixed covers the open menu: the call bar, the request list, the language hint. */
  .gf-header.menu-open ~ .callbar,
  .gf-header.menu-open ~ .listpill,
  .gf-header.menu-open ~ .langhint { display: none; }
  /* In the menu the search is its first row, not a panel. */
  .gf-header__search-btn { display: none; }
  .gf-search { display: block; position: static; flex: none; width: auto; margin: 0 0 8px; padding: 0 0 14px; border: 0; border-bottom: 1px solid #c6d3ce; border-radius: 0; background: none; box-shadow: none; }
  .gf-search__input { height: 48px; font-size: 16px; }
  .gf-search__go { min-height: 48px; }
  .gf-search__list { max-height: none; overflow: visible; }
  .gf-search__opt a { grid-template-columns: 1fr; padding: 12px; background: #fff; border: 1px solid #d3dfd9; margin-top: 6px; }
}
@media (max-width: 560px) {
  .gf-header { gap: 8px; padding-inline: 16px; }
  .gf-header__right { gap: 8px; }
  .gf-header__right > .gf-header__contact { display: none; }
}
/* The narrowest phones: the mark alone keeps Telegram, languages and the menu on one row. */
@media (max-width: 359px) {
  .gf-header__brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gf-header, .gf-header *, .gf-header *::before, .gf-header *::after { transition: none !important; } }