/* Fibra — header nav: mobile-first ecommerce header (burger + search | logo |
 * cart), left drawer menu, header search bar, floating Telegram button.
 * Loaded on every storefront page. Reuses shop-style tokens; adds only
 * nav-specific rules. nav.js injects every element styled here. */

/* ── Header zones ──────────────────────────────────────────────────────────
 * .header-left and .header-right both flex:1 on mobile, so the logo between
 * them lands optically centred regardless of how wide either side is. */
.site-header .container { gap: 8px; }
.header-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.header-left ~ .logo-btn { flex: 0 0 auto; margin-right: auto; }

.nav-hamburger,
.nav-searchbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: 10px;
  color: var(--text);
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .15s;
}
.nav-hamburger:hover,
.nav-searchbtn:hover { background: var(--bg); }
.nav-hamburger svg,
.nav-searchbtn svg { width: 22px; height: 22px; display: block; }

/* The magnifier is the only search entry point on production — the always-on
   bar above the catalog is not shown at any width. */

/* Cart icon (emoji → SVG; #cart-btn/#cart-badge and their listeners untouched) */
.cart-btn__ic { display: inline-flex; }
.cart-btn__ic svg { width: 22px; height: 22px; display: block; }

@media (max-width: 640px) {
  .site-header .container { height: 56px; gap: 4px; }
  .logo-btn img { height: 28px; }
  /* true centring: equal-weight side zones, logo in the middle */
  .header-left { flex: 1 1 0; }
  .header-left ~ .logo-btn { margin-right: 0; }
  .site-header .header-right { flex: 1 1 0; justify-content: flex-end; gap: 4px; }
  .nav-hamburger, .nav-searchbtn { width: 38px; height: 38px; }
  .cart-btn { padding: 6px 9px; }
}

/* ── Header search bar (drops under the sticky header) ─────────────────── */
.hdr-search {
  border-top: 1px solid var(--border);
  background: var(--bg-white);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .2s ease, opacity .2s ease;
}
.hdr-search.is-open { max-height: 96px; opacity: 1; }
/* mirrors .container's width/gutters without inheriting the header's flex+height */
.hdr-search__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}
.hdr-search__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.hdr-search__field:focus-within {
  border-color: var(--primary);
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}
.hdr-search__ic {
  display: inline-flex;
  margin-left: 14px;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.hdr-search__ic svg { width: 19px; height: 19px; display: block; }
.hdr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 11px 10px;
}
.hdr-search__input::placeholder { color: var(--text-muted); }
.hdr-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hdr-search__clear,
.hdr-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0; background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 999px;
}
.hdr-search__clear { width: 34px; height: 34px; margin-right: 4px; }
/* The rule above is author-origin, so it beats the UA's `[hidden]{display:none}`
   and would pin the clear button open. Restore the attribute as a real toggle. */
.hdr-search__clear[hidden] { display: none; }
.hdr-search__clear svg { width: 15px; height: 15px; display: block; }
.hdr-search__close { width: 38px; height: 38px; }
.hdr-search__close svg { width: 19px; height: 19px; display: block; }
.hdr-search__clear:hover,
.hdr-search__close:hover { background: var(--bg); color: var(--text); }

/* ── Left drawer menu ──────────────────────────────────────────────────── */
.nav-drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.nav-drawer.is-open { visibility: visible; }
.nav-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(17,24,39,.45);
  opacity: 0; transition: opacity .2s ease;
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(86vw, 350px);
  background: #fff;
  box-shadow: 2px 0 24px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .24s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.nav-drawer__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: none; background: transparent;
  color: var(--text); cursor: pointer;
  border-radius: 10px; flex: 0 0 auto;
}
.nav-drawer__back:hover { background: var(--bg); }
.nav-drawer__back svg { width: 21px; height: 21px; display: block; }
.nav-drawer__brand { display: flex; align-items: center; text-decoration: none; }
.nav-drawer__brand img { height: 28px; width: auto; }

.nav-menu { padding: 4px 0 28px; display: flex; flex-direction: column; }
.nav-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 500;
  border: none; background: transparent; text-align: left; cursor: pointer;
}
.nav-menu a:hover { background: var(--bg); color: var(--primary); }
.nav-menu__ic {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.nav-menu__ic svg { width: 20px; height: 20px; display: block; }
.nav-menu__tx { flex: 1 1 auto; min-width: 0; }
.nav-menu__go {
  flex: 0 0 auto;
  display: inline-flex;
  color: #C3C8D1;
}
.nav-menu__go svg { width: 16px; height: 16px; display: block; }
.nav-menu a:hover .nav-menu__go { color: var(--primary); }

/* Метка акции возле пункта «Акція»: статичный знак, без цифр и без анимации.
   Разметку добавляет nav.js только пока идёт окно акции, поэтому метка
   исчезает вместе с самим пунктом. Цвет фона #D90F0F, а не более яркий
   #F31B1B: белый на нём даёт 5.2:1 против 4.2:1 — тот порог для текста
   не проходит. `flex: 0 0 auto` и фиксированная высота держат строку
   на прежнем месте: соседние пункты не сдвигаются. */
.nav-menu__badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: #D90F0F;
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}
/* строка на hover красится в синий — метка остаётся собой */
.nav-menu a:hover .nav-menu__badge { color: #fff; }

.nav-menu__section {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  padding: 16px 18px 6px;
}
.nav-menu__sep { height: 1px; background: var(--border); margin: 8px 14px; }
.nav-menu a.nav-menu__acct { color: var(--primary); font-weight: 700; }
.nav-menu a.nav-menu__acct .nav-menu__ic { color: var(--primary); }

/* contact rows — two-line, brand-tinted icon */
.nav-menu a.nav-menu__contact { align-items: center; padding: 11px 18px; }
.nav-menu__contact .nav-menu__tx {
  display: flex; flex-direction: column; line-height: 1.25;
}
.nav-menu__contact .nav-menu__tx b { font-size: 15px; font-weight: 600; }
.nav-menu__contact .nav-menu__tx small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.nav-menu__ic--tg { color: #229ED9; }
.nav-menu__ic--vb { color: #7360F2; }

/* ── Social chips ──────────────────────────────────────────────────────── */
/* ── Social chips ──────────────────────────────────────────────────────────
   Every rule here is scoped under .nav-menu on purpose. The chips are <a>
   elements inside .nav-menu, so the generic `.nav-menu a` rule (0,1,1) —
   `padding: 12px 18px; background: transparent;` — outranks a bare
   `.nav-social__chip` (0,1,0). Unscoped, the brand colour is erased and the
   padding squeezes a 40px badge down to a 4px glyph. Keep the .nav-menu prefix. */
.nav-social {
  display: flex;
  gap: 14px;
  padding: 6px 18px 16px;
}
.nav-menu .nav-social__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .16);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-menu .nav-social__chip svg { width: 24px; height: 24px; display: block; }
/* The :hover variants are declared alongside the base ones on purpose:
   `.nav-menu a:hover` sets `background: var(--bg)`, so a hover rule that omits
   `background` lets the grey menu-row hover repaint the brand colour away. */
.nav-menu .nav-social__chip--tg,
.nav-menu .nav-social__chip--tg:hover { background: #229ED9; }
.nav-menu .nav-social__chip--vb,
.nav-menu .nav-social__chip--vb:hover { background: #7360F2; }
/* official Instagram gradient */
.nav-menu .nav-social__chip--ig,
.nav-menu .nav-social__chip--ig:hover {
  background: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
/* keep the white glyph too — `.nav-menu a:hover` would tint it blue */
.nav-menu .nav-social__chip:hover,
.nav-menu .nav-social__chip:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(17, 24, 39, .26);
}
.nav-menu .nav-social__chip:active { transform: translateY(0); }

/* ── Floating Telegram button ──────────────────────────────────────────── */
.tg-float {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #229ED9;
  color: #fff;
  box-shadow: 0 6px 18px rgba(34,158,217,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 90;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tg-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(34,158,217,.55); }
.tg-float:active { transform: scale(.97); }
.tg-float svg { width: 28px; height: 28px; display: block; }
@media (max-width: 560px) {
  .tg-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .tg-float svg { width: 25px; height: 25px; }
}
/* safe-area for iPhone home indicator */
@supports (bottom: env(safe-area-inset-bottom)) {
  .tg-float { bottom: calc(18px + env(safe-area-inset-bottom)); }
  @media (max-width: 560px) { .tg-float { bottom: calc(14px + env(safe-area-inset-bottom)); } }
}