/* ==========================================================================
   Component styles — Avatar UI kit
   Depends on tokens.css (custom properties + type utility classes)
   ========================================================================== */

/* ---------------------------------------------------------------- Button */
/* Кнопка в макете, как и чип, со скошенными краями — «щёчки» по 12px
   (footer 12×44, «Магазины на карте» 12×56, кнопки гео-попапа 12×44).
   Делаем clip-path, чтобы форма не зависела от высоты и цвета. */
.btn {
  --btn-skew: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) calc(var(--space-4) + var(--btn-skew));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background-color .15s ease, opacity .15s ease;
  clip-path: polygon(
    var(--btn-skew) 0,
    100% 0,
    calc(100% - var(--btn-skew)) 100%,
    0 100%
  );
}
.btn__icon { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); }

.btn--secondary { background: var(--color-surface); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-surface-hover); }

.btn:disabled,
.btn--disabled { opacity: .4; pointer-events: none; }

.btn--block { width: 100%; }

/* ------------------------------------------------------------ Search input */
.input-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-input-bg);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.input-search__icon { width: 14px; height: 14px; opacity: .5; flex-shrink: 0; }
.input-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label-m);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.input-search input::placeholder { color: var(--color-text); opacity: .5; }

.input-search:hover { background: rgba(255, 255, 255, 0.14); }
.input-search--active { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ------------------------------------------------------------------ Header */
.site-header {
  position: relative;
  z-index: 30;
  background: var(--color-header-bg);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--gutter-desktop);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { width: 138px; height: 22px; }

.site-header__geo-wrap { position: relative; }

.site-header__geo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
.site-header__geo img { width: 32px; height: 32px; }
.site-header__geo .arrow { width: 14px; height: 14px; opacity: .7; }

.site-header__geo-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.site-header__geo-dropdown[hidden] { display: none; }
.site-header__geo-option {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--fs-label-m);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.site-header__geo-option:hover { background: var(--color-surface-hover); }
.site-header__geo-option--all { opacity: .7; border-top: 1px solid var(--color-surface-hover); }

/* В макете поле поиска тянется на весь остаток строки, без ограничения */
.site-header__search { flex: 1 0 0; min-width: 0; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}
.site-header__nav a { font-size: var(--fs-label-m); letter-spacing: -0.02em; opacity: .8; }
.site-header__nav a:hover { opacity: 1; }

.site-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
}
.site-header__burger img { width: 20px; height: 20px; }

/* Панель категорий: в макете строка растянута по ширине (space-between),
   вертикальный зазор при переносе 24. Каждый пункт — иконка 32×18 и подпись
   через 8. Иконки вернули по решению 2026-07-29, см. AGENTS.md. */
.site-header__categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--space-6);
  column-gap: var(--space-4);
}
.category-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label-m);
  letter-spacing: -0.02em;
  opacity: .8;
}
.category-link--active { opacity: 1; }
.category-link__icon { width: 32px; height: 18px; flex-shrink: 0; }

.site-header__icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.site-header__icon-btn img { width: 24px; height: 24px; }
.site-header__close-toggle { display: none; }

/* Tablet + mobile: top nav links and category chips collapse into
   a "burger" that opens the full-width .mobile-menu drawer below the header. */
@media (max-width: 1023px) {
  .site-header { padding: var(--space-4) var(--gutter-tablet); }

  .site-header__nav,
  .site-header__geo-label,
  .site-header__categories { display: none; }
  .site-header__burger { display: flex; flex-shrink: 0; }

  .site-header--menu-open .site-header__burger { display: none; }
  .site-header--menu-open .site-header__close-toggle { display: flex; }
  .site-header--menu-open .mobile-menu { display: flex; }
}

/* Mobile only: geo + search additionally collapse to icon buttons;
   tapping search expands it inline (replacing the icon row). */
@media (max-width: 767px) {
  .site-header { padding: var(--space-4) var(--gutter-mobile); }

  .site-header__bar { gap: var(--space-3); }
  .site-header__geo,
  .site-header__search { display: none; }
  .site-header__geo-icon,
  .site-header__search-toggle { display: flex; }

  .site-header--search-open .site-header__geo-icon,
  .site-header--search-open .site-header__search-toggle,
  .site-header--search-open .site-header__burger { display: none; }
  .site-header--search-open .site-header__search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header--search-open .site-header__close-toggle { display: flex; }

  .site-header--menu-open .site-header__search-toggle { display: none; }
}

/* ------------------------------------------------------------- Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-10);
  padding: 0 var(--gutter-mobile) var(--space-5);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-menu { padding: 0 var(--gutter-tablet) var(--space-5); }
}

.mobile-menu__categories,
.mobile-menu__links,
.mobile-menu__contacts,
.mobile-menu__brand { display: flex; flex-direction: column; }
.mobile-menu__categories { gap: var(--space-6); }
.mobile-menu__links { gap: var(--space-6); }
.mobile-menu__contacts { gap: var(--space-6); }
.mobile-menu__brand { gap: var(--space-5); }

.mobile-menu__category,
.mobile-menu__links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  opacity: .8;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label-m-mobile);
  letter-spacing: -0.01em;
}
.mobile-menu__category.is-active { opacity: 1; }

.mobile-menu__contacts .h5 { display: block; }
.mobile-menu__contact-buttons { display: flex; gap: var(--space-2); }
.mobile-menu__contact-buttons .btn { flex: 1; }

.mobile-menu__brand img { width: 138px; height: 22px; }
.mobile-menu__brand p { margin: 0; color: var(--color-text-muted-50); }
.mobile-menu__social { display: flex; align-items: center; gap: var(--space-3); }
.mobile-menu__social img { width: 44px; height: 44px; }

/* ------------------------------------------------------------------ Footer */
.site-footer {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  /* 28px по вертикали — в макете `py-[28px]`, отдельного токена под это нет */
  padding: 28px var(--gutter-desktop);
}

.site-footer__top {
  display: flex;
  gap: var(--space-10);
  /* Колонки заданы фиксированной шириной по макету (240 + 3×180 + контакты),
     в сумме с гэпами это ~1250px и помещается только около 1440. Ниже —
     контакты переносятся на вторую строку, а не выдавливают страницу. */
  flex-wrap: wrap;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 0 0 240px;
}
.site-footer__brand img { width: 138px; height: 22px; }
.site-footer__brand p { color: var(--color-text-muted-50); margin: 0; }

.footer-heading {
  display: block;
  color: var(--color-text-muted-50);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.site-footer__social { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__social img { width: 44px; height: 44px; }

.site-footer__col {
  display: flex;
  flex-direction: column;
  flex: 0 0 180px;
}
/* В макете заголовок→ссылки 16px (margin у .footer-heading), ссылка→ссылка 20px */
.site-footer__col a { display: block; font-size: var(--fs-label-m); letter-spacing: -0.02em; }
.site-footer__col a + a { margin-top: var(--space-5); }
.site-footer__col a.is-active { color: var(--color-accent-hover); }

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-left: auto;
}
.site-footer__contacts .h5 { display: block; }

.site-footer__contact-buttons { display: flex; gap: var(--space-2); }
.site-footer__contact-buttons .btn { flex: 1; }

/* Кнопка «наверх» — в макете прижата к правому краю колонки контактов */
.site-footer__to-top {
  width: 44px;
  height: 44px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
}
.site-footer__to-top:hover { background: var(--color-surface-hover); }
.site-footer__to-top img { width: 12px; height: 18px; }

.site-footer__divider { border: none; border-top: 1px solid var(--color-text-muted-30); margin: 0; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer__legal { display: flex; gap: var(--space-10); flex-wrap: wrap; }
.site-footer__legal :first-child { color: var(--color-text-muted-50); }
.site-footer__legal a { color: var(--color-text-muted-80); }
.site-footer__credits { display: flex; gap: var(--space-1); color: var(--color-text-muted-50); }
.site-footer__credits a { color: var(--color-text-muted-80); }
.site-footer__requisites { margin: 0; color: var(--color-text-muted-50); }

@media (max-width: 1023px) {
  .site-footer { padding: var(--space-6) var(--gutter-tablet); }
  .site-footer__contacts { margin-left: 0; }
}
@media (max-width: 767px) {
  .site-footer { padding: var(--space-6) var(--gutter-mobile); }
  .site-footer__top { flex-direction: column; gap: var(--space-8); }
  .site-footer__brand,
  .site-footer__col { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------- Chip
   Чип со скошенными краями — компонент `Tags` в макете. В Figma скосы
   нарисованы двумя треугольниками-«щёчками» по 8px, но это простой
   многоугольник, поэтому здесь он сделан на clip-path: цвет тогда следует
   за фоном самого чипа и высота может быть любой (44 в каталоге, 40 в
   обзорах). Геометрия щёчки из макета: M0 0 H8 L0 H Z.

   Основное состояние — верхняя грань сдвинута вправо, нижняя влево.
   Активное — зеркально. */
.chip {
  --chip-skew: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 15px calc(var(--space-4) + var(--chip-skew));
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label-m);
  letter-spacing: -0.02em;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  clip-path: polygon(
    var(--chip-skew) 0,
    100% 0,
    calc(100% - var(--chip-skew)) 100%,
    0 100%
  );
}
.chip:hover { background: var(--color-surface-hover); }

.chip--active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chip-skew)) 0,
    100% 100%,
    var(--chip-skew) 100%
  );
}
.chip--active:hover { background: var(--color-accent-hover); }

/* Чипы в ряду наезжают друг на друга на 4px — так в переключателях
   (обзоры, линейки, карта/список). В фильтрах каталога они, наоборот,
   стоят через 8 — для этого .chip-row--spaced. */
.chip-row { display: flex; align-items: center; }
.chip-row .chip + .chip { margin-left: -4px; }

/* Фильтров может быть больше, чем в макете (там их два, в базе бывает три),
   поэтому ряд переносится, а не выдавливает страницу */
.chip-row--spaced { gap: var(--space-2); flex-wrap: wrap; }
.chip-row--spaced .chip + .chip { margin-left: 0; }

/* Ряд фильтров обзоров шире экрана на мобилке (589 при контенте 328) —
   в макете это горизонтальный скролл, а не перенос */
.chip-row--scroll {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip-row--scroll::-webkit-scrollbar { display: none; }

/* Ряд фильтров обзоров: чипы ниже (40) и без иконки */
.chip--sm { padding: 13px calc(var(--space-4) + var(--chip-skew)); }

.chip__icon { width: 14px; height: 14px; flex-shrink: 0; }

/* --------------------------------------------------- Строка характеристики
   В макете это три элемента на одной базовой линии: подпись, растягивающаяся
   линия и значение. Не подчёркивание под строкой.
   См. figma-data/spec/07-product-card.md и 09-page-product.md. */
.spec-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
}
.spec-row dt {
  margin: 0;
  color: var(--color-text-muted-50);
  font-weight: 500;
  white-space: nowrap;
}
.spec-row__line {
  flex: 1 0 0;
  min-width: 1px;
  height: 1px;
  background: var(--color-text);
  opacity: .2;
}
.spec-row dd {
  margin: 0;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}
/* В карточке значения приходят из базы и бывают длиннее, чем демо-строки
   в макете. На узкой карточке nowrap выдавливал страницу — разрешаем перенос
   и прижимаем текст вправо, чтобы выноска читалась как прежде. */
.product-card__specs .spec-row dd { white-space: normal; text-align: right; min-width: 0; }
.product-card__specs .spec-row dt { min-width: 0; }

/* ------------------------------------------------------------- Product card */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.product-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }

/* Медиа задана пропорцией, а не высотой: карточка резиновая и тянется по
   колонке сетки (spec/07-product-card.md). 366/320 и 190/166 — обе ≈1.144.
   min-height:0 обязателен: это флекс-элемент, и без него min-height:auto
   даёт картинке распереть бокс до её собственной пропорции. */
.product-card__media {
  position: relative;
  aspect-ratio: 366 / 320;
  min-height: 0;
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__slides { position: relative; width: 100%; height: 100%; }
.product-card__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .15s ease;
}
.product-card__slide.is-active { opacity: 1; }
/* Пагинация лежит в верхней части body, как в макете: 38×6, отступ 8px.
   Метки — узкие клинья с чередующимся направлением, не круги. */
.product-card__pagination {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  width: 38px;
  height: 6px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
}
.product-card__dot {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: var(--color-text);
  opacity: .3;
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}
.product-card__dot:nth-child(even) {
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.product-card__dot.is-active { background: var(--color-accent); opacity: 1; }
.product-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--fs-label-m);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
}

.product-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

/* Цена и название — один блок с зазором 8 (на мобилке 4); до характеристик
   от него 20 (на мобилке 12) */
.product-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.product-card__price-row { display: flex; align-items: baseline; gap: var(--space-2); }
.product-card__price { color: var(--color-text); }
.product-card--sale .product-card__price { color: var(--color-accent); }
.product-card__price-old {
  color: var(--color-text-muted-50);
  text-decoration: line-through;
  text-decoration-color: var(--color-gray);
}

.product-card__title { margin: 0; color: var(--color-text-muted-80); }

.product-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

@media (max-width: 767px) {
  .product-card__media { aspect-ratio: 190 / 166; }
  .product-card__body { padding: var(--space-4) var(--space-3); gap: var(--space-3); }
  .product-card__pagination {
    top: var(--space-1);
    width: 30px;
    height: 4px;
  }
  .product-card__head { gap: var(--space-1); }
  /* В макете зазор между строками на мобилке 6, а не 8 */
  .product-card__specs { gap: 6px; font-size: var(--fs-label-s-mobile); letter-spacing: 0; }
  .product-card__specs .label-m { font-size: inherit; letter-spacing: inherit; }
  .product-card__price-row { flex-wrap: wrap; gap: var(--space-1); row-gap: 0; }
  /* Цена 15 (Mobile/H4), название 11/1.3 с переносом (Mobile/Body S) */
  .product-card__price { font-size: var(--fs-h4-mobile); letter-spacing: 0; white-space: nowrap; }
  .product-card__price-old { white-space: nowrap; }
  .product-card__title {
    font-size: var(--fs-body-s-mobile);
    line-height: var(--lh-body-s);
    letter-spacing: 0;
    white-space: normal;
  }
}