/*
 * Балетный кот — Components (Layer 3/4)
 * Примитивы, которые повторяются на разных страницах.
 * Секции конкретных страниц — в blocks.css (Layer 4), не здесь.
 */

/* ------ КНОПКИ ------
   Регистр обычный, не капслок: в макете кнопки читаются как речь,
   а не как ярлыки интерфейса. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 14px 28px;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }

.btn--on-dark {
  background: var(--dark-ink);
  color: var(--ink);
  border-color: var(--dark-ink);
}
.btn--on-dark:hover { background: #fff; border-color: #fff; }

.btn[disabled],
.btn--disabled {
  background: var(--soft);
  border-color: var(--line);
  color: var(--out-stock);
  cursor: not-allowed;
  pointer-events: none;
}

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

/* Тихая ссылка-действие: «весь каталог →» */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.link-action:hover { color: var(--brand-hover); }
.link-action svg { transition: transform var(--dur-base) var(--ease-out); }
.link-action:hover svg { transform: translateX(3px); }

/* ------ НАДЗАГОЛОВОК СЕКЦИИ ------ */
.eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--faint);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ------ РИТМ СЕКЦИЙ ------
   Отступы намеренно разные: ровный шаг по всей странице читается механически. */
.section { padding-block: clamp(40px, 5vw, 72px); }
.section--tight { padding-block: clamp(28px, 3.5vw, 48px); }
.section--tall  { padding-block: clamp(48px, 6.5vw, 96px); }
.section--tint  { background: var(--soft); }
.section--dark  { background: var(--dark); color: var(--dark-ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--dark-ink); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section__head h2 { margin: 0; }
/* Волосяная линия между заголовком и ссылкой — держит правый край секции */
.section__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ------ КАРТОЧКА ------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* ------ БЕЙДЖ-ИКОНКА ------ */
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--brand);
}
.badge-icon svg { width: 22px; height: 22px; }

/* ------ МЕТКИ НАЛИЧИЯ ------ */
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}
.stock--in  { color: var(--in-stock); }
.stock--out { color: var(--out-stock); }

/* ------ ПЛИТКИ ВЫБОРА ВАРИАЦИИ ------
   Три оси подбора: размер, полнота, жёсткость.
   Селект тут не годится — покупателю нужно видеть всю сетку сразу. */
.opt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.opt__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.opt__item:hover { border-color: var(--ink); }
.opt__item[aria-pressed="true"],
.opt__item.is-selected {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
/* Недоступное сочетание: видно, что вариант существует, но выбрать нельзя */
.opt__item[disabled],
.opt__item.is-unavailable {
  color: var(--out-stock);
  background: var(--soft);
  border-color: var(--line);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Размер из шкалы магазина, которого сейчас нет в разделе. Кнопка живая —
   клиент попросил показывать весь ряд 34–42, — но приглушена, чтобы пустая
   выдача не читалась как поломка. Не то же, что is-unavailable: там нельзя выбрать. */
.opt__item.is-empty {
  color: var(--out-stock);
  border-style: dashed;
}
.opt__item.is-empty:hover { border-color: var(--ink); }

/* ------ ТОВАРА НЕТ В НАЛИЧИИ ------
   Правило владельца: «перейти на него можно, а вот купить нельзя».
   Гасим фото и цену, ссылку оставляем живой. */
.is-oos .product-card__media img { filter: saturate(0.15) contrast(0.92); opacity: 0.75; }
.is-oos .product-card__title,
.is-oos .product-card__price { color: var(--out-stock); }

@media (max-width: 768px) {
  .section__head { flex-wrap: wrap; }
  .section__rule { display: none; }
}

/* ============ МЕНЮ КАТАЛОГА ============
   Пункт «Каталог» в шапке с деревом разделов и фото. Раскрытие держится
   на CSS (:hover и :focus-within) — работает без JS и с клавиатуры;
   JS добавляется только для тача, где наведения не существует. */
/* Без position: relative — панель отсчитывается от контейнера шапки,
   иначе она схлопывается до ширины кнопки «Каталог». */
.mega { position: static; }

.mega__toggle {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
}
.mega__toggle:hover,
.mega__toggle[aria-expanded="true"] { color: var(--brand); }

.mega__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--ease-out);
}
.mega__chev-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px 8px 6px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.mega__chev-btn:hover,
.mega__chev-btn[aria-expanded="true"] { color: var(--brand); }
.mega__chev-btn[aria-expanded="true"] .mega__chev { transform: rotate(225deg) translateY(-2px); }

/* 🔴 Панель привязана к КОНТЕЙНЕРУ шапки, а не к кнопке «Каталог».
   Раньше она отсчитывалась от кнопки и вылезала за правый край экрана:
   на 12 px при ширине 1440 и на 255 px при 1024 — четверть панели
   оказывалась за пределами окна. Нашёл это гейт `preflight.py --ui`. */
.site-header__inner { position: relative; }

.mega__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  width: auto;
  max-width: 960px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 24px 60px rgb(46 39 36 / .16);
  /* Скрываем видимостью, а не display: none — так работает переход
     и панель остаётся доступной для чтения скринридером по фокусу. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.mega:hover .mega__panel,
.mega:focus-within .mega__panel,
.mega[data-open] .mega__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 28px;
}

.mega__section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h5, 1.15rem);
  text-decoration: none;
}
.mega__section:hover { color: var(--brand); }

.mega__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: #2e2724;
}
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__list li + li { margin-top: 4px; }
.mega__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  color: var(--ink-soft, var(--ink));
  font-size: var(--fs-sm);
  text-decoration: none;
}
.mega__list a:hover { color: var(--brand); }
.mega__count { color: var(--faint); font-size: 0.78rem; }

/* На узких экранах меню каталога не нужно: там своё мобильное меню,
   а панель в 960 px всё равно не поместится. */
@media (max-width: 900px) {
  .mega { display: none; }
}