/* ==========================================================================
   Каталог — выпадающее меню (mega menu)
   Только для десктопа (min-width: 1025px). На планшетах/мобильных скрыто —
   пункт "Каталог" ведёт на страницу каталога как обычная ссылка.
   ========================================================================== */

:root {
  --cmm-accent: #14A6AE;      /* тот же teal, что и в шапке */
  --cmm-text: #111111;
  --cmm-muted: #7a7a7a;
  --cmm-radius: 20px;
  --cmm-max-width: 1460px;    /* ширина .inner-wrap */
}

/* Пункт меню, который триггерит выпадашку, должен быть позиционирующим
   контекстом — обычно это <li> ИЛИ сама шапка/nav. Если в вашей верстке
   .inner-wrap уже position:relative, можно позиционировать meню-меню
   относительно него — тогда работать будет ещё точнее. Ниже — вариант
   "позиционируем относительно <li>", он не требует правок остальной верстки. */

.menu-item.has-mega-menu {
  position: static; /* важно: static, чтобы мега-меню позиционировалось от ближайшего
                        предка с position:relative (например header/.inner-wrap),
                        а не "прилипало" к узкому <li> */
}

/* Если во всей шапке нет position:relative — раскомментируйте следующую строку
   и добавьте .site-header { position: relative; } в общий CSS сайта. */
/* .site-header { position: relative; } */

.catalog-mega-menu {
  position: absolute;
  top: 100%;                 /* сразу под шапкой */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 100%;
  max-width: var(--cmm-max-width);
  background: #ffffff;
  border-radius: var(--cmm-radius);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.16), 0 4px 14px rgba(17, 17, 17, 0.06);
  padding: 36px 40px;
  z-index: 200;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Открытие по наведению на пункт меню (десктоп) */
@media (min-width: 1025px) {
  .menu-item.has-mega-menu:hover > .catalog-mega-menu,
  .menu-item.has-mega-menu.is-open > .catalog-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* На мобильных/планшетах — мега-меню полностью выключено,
   "Каталог" работает как обычная ссылка на /shop/ */
@media (max-width: 1024px) {
  .catalog-mega-menu { display: none !important; }
}

/* ---- Внутренняя раскладка ---- */

.catalog-mega-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.catalog-mega-menu__category + .catalog-mega-menu__category {
  padding-top: 28px;
  border-top: 1px solid #ececec;
}

.catalog-mega-menu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.catalog-mega-menu__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--cmm-text);
  text-transform: uppercase;
}

.catalog-mega-menu__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--cmm-accent);
  text-decoration: none;
  white-space: nowrap;
}

.catalog-mega-menu__all:hover {
  text-decoration: underline;
}

.catalog-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.catalog-mega-menu__item {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--cmm-text);
  transition: background-color .15s ease, transform .15s ease;
}

.catalog-mega-menu__item:hover {
  background: #f5fbfb;
  transform: translateY(-2px);
}

.catalog-mega-menu__thumb {
  position: relative; /* якорь для второго (hover) изображения */
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background: #f4f4f6;
  overflow: hidden;
}

.catalog-mega-menu__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Фото из галереи товара лежит вторым слоем поверх основного и по
   умолчанию прозрачное — при наведении на карточку товара плавно
   проявляется, создавая эффект смены картинки. Если у товара нет фото
   в галерее, этого <img> просто нет в разметке — ничего не ломается. */
.catalog-mega-menu__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.catalog-mega-menu__item:hover .catalog-mega-menu__img--hover {
  opacity: 1;
}

.catalog-mega-menu__name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ---- Фикс конфликта с глобальными стилями шапки ----
   На сайте есть правило вида:
     .main-navigation ul li.current-menu-ancestor a { color:#fff !important; }
   Оно написано БЕЗ ">" — то есть красит в белый вообще все <a> внутри
   пункта "Каталог", включая ссылки на товары и категории в мега-меню
   (WordPress навешивает current-menu-ancestor/current_page_item на
   "Каталог", когда вы на /shop/ или на странице товара).
   Ниже — точечное переопределение с более высокой специфичностью, чем у
   исходного правила (3 класса против 2), поэтому побеждает всегда,
   независимо от порядка подключения файлов. */
.main-navigation .catalog-mega-menu .catalog-mega-menu__item,
.main-navigation .catalog-mega-menu .catalog-mega-menu__all {
  color: var(--cmm-text) !important;
}

.main-navigation .catalog-mega-menu .catalog-mega-menu__all {
  color: var(--cmm-accent) !important;
}

.main-navigation .catalog-mega-menu .catalog-mega-menu__item:hover {
  color: var(--cmm-text) !important;
}

/* ---- Жёсткая фиксация размера/обрезки картинок товара ----
   Судя по скриншоту, тема где-то сбрасывает width/height/object-fit/position
   у <img> внутри навигации через !important (та же история, что и с цветом
   ссылок) — из-за этого превью раздуваются на всю ширину ячейки и второе
   фото из галереи не может лечь поверх первого. Селекторы ниже собраны из
   4 классов + !important, это заведомо перебивает практически любое
   правило темы. */
.main-navigation .catalog-mega-menu .catalog-mega-menu__grid .catalog-mega-menu__thumb {
  position: relative !important;
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f4f4f6 !important;
}

.main-navigation .catalog-mega-menu .catalog-mega-menu__grid .catalog-mega-menu__thumb .catalog-mega-menu__img {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: cover !important;
}

.main-navigation .catalog-mega-menu .catalog-mega-menu__grid .catalog-mega-menu__thumb .catalog-mega-menu__img--hover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.main-navigation .catalog-mega-menu .catalog-mega-menu__grid .catalog-mega-menu__item:hover .catalog-mega-menu__img--hover {
  opacity: 1 !important;
}