/* ============================================================
   VIDRO — хедер, меню-каталог, пошук
   ============================================================ */

.v-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-bg);
  border-bottom: var(--border);
  transition: transform var(--dur-base) var(--ease);
}
.v-header[data-hidden='true'] { transform: translateY(-100%); }

.v-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
}

/* ---------- Пігулка каталогу ---------- */

/* Власник: «кнопка каталог має бути сірою та іншим шрифтом».

   Було: біла пігулка з чорною рамкою — вона важила стільки ж, скільки
   логотип поруч, і два чорні елементи на одній лінії сперечались.
   Стало: сірий фон без рамки й дисплейний шрифт, той самий, що в
   заголовках секцій. Кнопка лишається помітною, але перестає
   конкурувати з логотипом. */
.v-header__catalog {
  gap: var(--sp-2);
  border-color: transparent;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.15s;
}
.v-header__catalog:hover { background: #ECECEC; }
.v-header__catalog-text {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.v-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 16px;
}
.v-header__burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

/* ---------- Лого ---------- */

.v-header__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.v-header__wordmark {
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Знак замість напису. Розмір задаємо висотою, а не шириною: у хедері
   критична саме висота — вона мусить лягти в рядок 64px поруч із
   пігулкою каталогу й іконками. Ширину дає пропорція 4,7:1. */
.v-header__logo-svg {
  display: block;
  height: 26px;
  width: auto;
  color: var(--color-ink);
}
@media (min-width: 1024px) {
  .v-header__logo-svg { height: 32px; }
}

/* ---------- Права частина ---------- */

.v-header__side {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: end;
}
.v-header__link {
  display: none;
  font-size: var(--fs-meta);
  color: var(--color-body);
  text-decoration: none;
  padding-inline: var(--sp-2);
}
@media (hover: hover) { .v-header__link:hover { text-decoration: underline; text-underline-offset: 4px; } }

.v-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  color: var(--color-ink);
}
.v-header__icon svg { width: 22px; height: 22px; }

.v-header__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-btn);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

@media (min-width: 1024px) {
  .v-header__bar { min-height: 76px; }
  .v-header__link { display: inline-flex; }
}

/* На вузькому екрані слово «каталог» зайве — бургер зрозумілий сам,
   а місце коштує дорого. */
@media (max-width: 599px) {
  .v-header__catalog { padding-inline: var(--sp-3); }
  .v-header__catalog-text { display: none; }
}

/* ============================================================
   Меню-каталог
   ============================================================ */

.v-menu { padding: var(--sp-4) var(--gutter) var(--sp-8); }

.v-menu__group + .v-menu__group { margin-top: var(--sp-8); }

.v-menu__title {
  display: block;
  font-size: 20px;
  line-height: var(--display-lh);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--sp-2);
}

.v-menu__list { list-style: none; margin: 0; padding: 0; }

.v-menu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--fs-body);
  color: var(--color-body);
  text-decoration: none;
}
@media (hover: hover) { .v-menu__link:hover { text-decoration: underline; text-underline-offset: 4px; } }

.v-menu__service {
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  border-top: var(--border);
}

/* Desktop: та сама шторка стає мега-меню на всю ширину */
@media (min-width: 1024px) {
  .v-panel--menu {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: 80dvh;
    transform: translateY(-100%);
    border-right: 0;
    border-bottom: var(--border);
  }
  .v-panel--menu[data-open='true'] { transform: translateY(0); }

  .v-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-8);
    max-width: var(--container-max);
    margin-inline: auto;
    padding-block: var(--sp-8);
  }
  .v-menu__group + .v-menu__group { margin-top: 0; }
  .v-menu__link { min-height: 36px; }
  .v-menu__service {
    display: flex;
    gap: var(--sp-6);
    max-width: var(--container-max);
    margin-inline: auto;
  }
}

/* ============================================================
   Пошук
   ============================================================ */

.v-search__form { padding: var(--sp-4) var(--gutter); }
.v-search__popular,
.v-search__results { padding: 0 var(--gutter) var(--sp-6); }

.v-search__list { display: grid; gap: var(--sp-2); }

.v-search__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 68px;
  text-decoration: none;
  color: var(--color-body);
  border-bottom: var(--border);
}
.v-search__item img,
.v-search__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 60px;
  object-fit: cover;
  background: var(--color-surface);
}
.v-search__body { display: grid; gap: 2px; }
.v-search__name { font-size: var(--fs-name-card); line-height: var(--lh-name); }
.v-search__price { font-size: var(--fs-price-card); color: var(--color-ink); }
.v-search__collections { margin-top: var(--sp-4); }
.v-search__collections .v-chip { text-decoration: none; }
.v-search__empty { padding-block: var(--sp-6); }

@media (min-width: 1024px) {
  .v-panel--search { max-height: 80dvh; }
  .v-search__form,
  .v-search__results,
  .v-search__popular {
    max-width: 720px;
    margin-inline: auto;
  }
}

/* Перемикач мови в хедері. Виглядає як звичайне посилання поруч із
   «Про нас» — це і є його роль, тільки веде він не на сторінку. */
.v-header__lang { display: inline-flex; margin: 0; }
.v-header__link--lang {
  border: 0;
  background: none;
  padding: 0 var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-meta);
  letter-spacing: 0.5px;
  color: var(--color-muted);
  cursor: pointer;
}
@media (hover: hover) {
  .v-header__link--lang:hover { color: var(--color-ink); }
}
.v-header__link--lang:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }