/* ============================================================
   Мегаменю каталога — сетка категорий (как на главной).
   Плитки используют классы .cat-tile* из home.css (он подключён глобально).
   ============================================================ */

.megamenu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--c-border-soft);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  z-index: var(--z-dropdown);
}
.megamenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear 0s;
}

/* Подсветка раскрытой кнопки */
.btn-catalog.is-active {
  background: var(--c-cta-dark-hover);
}

.megamenu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-6);
}

/* «Смотреть весь каталог» — сверху, над сеткой */
.megamenu__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  color: var(--c-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.megamenu__all-link:hover { color: var(--c-primary-hover); }
.megamenu__all-link svg { transition: transform var(--dur-fast) var(--ease); }
.megamenu__all-link:hover svg { transform: translateX(4px); }

/* Сетка плиток категорий — как блок .categories на главной */
.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

/* Подложка (только для клика-вне) */
.megamenu__backdrop { display: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .megamenu__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .megamenu { display: none; }
  .megamenu__backdrop { display: none; }
}