@charset "UTF-8";
/* Мегаменю каталогу - Figma «Catalog Menu/3» 2351:114336 (1440x656) і «Catalog Menu/1» 2351:113181.
   Панель висить під хедером і їде разом з ним (хедер sticky). */
.megamenu[hidden] {
  display: none;
}

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 90;
}

/* затемнення решти екрана - у макеті #212121 з прозорістю 0.7 */
.megamenu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.7);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.megamenu__panel {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--c-white);
  box-shadow: 0 8px 8px rgba(24, 39, 75, 0.04), 0 4px 6px rgba(24, 39, 75, 0.06);
  transform: translate3d(0, -8px, 0);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.megamenu.is-open .megamenu__backdrop {
  opacity: 1;
}

.megamenu.is-open .megamenu__panel {
  opacity: 1;
  transform: none;
}

.megamenu__row {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 330px;
  gap: var(--space-4);
  min-height: 624px;
}

/* --- Ліва колонка: список категорій --- */
.megamenu__col-l {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
}

.megamenu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.megamenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2);
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.megamenu__item:hover,
.megamenu__item.is-active {
  color: var(--c-primary);
  background: var(--c-primary-50);
}

.megamenu__item-arrow {
  display: flex;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.megamenu__item:hover .megamenu__item-arrow,
.megamenu__item.is-active .megamenu__item-arrow {
  opacity: 1;
  transform: none;
}

/* --- Центр: плитка підкатегорій 132x188, 5 у ряд --- */
.megamenu__grid {
  display: none;
  grid-template-columns: repeat(5, 132px);
  gap: var(--space-5);
  align-content: start;
}

.megamenu__grid.is-active {
  display: grid;
  animation: megamenu-in var(--dur-base) var(--ease-out) both;
}

@keyframes megamenu-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.megamenu__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  text-align: center;
}

.megamenu__tile-pic {
  display: block;
  width: 132px;
  aspect-ratio: 1;
  background: var(--c-bg-grey);
}

.megamenu__tile-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.megamenu__tile-title {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.megamenu__tile:hover .megamenu__tile-title {
  color: var(--c-primary);
}

/* --- Права колонка: промо --- */
.megamenu__col-r {
  padding: var(--space-4);
  background: var(--c-bg-grey);
}

.megamenu__promo {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.megamenu__promo.is-active {
  display: flex;
}

.megamenu__promo-pic {
  display: block;
  aspect-ratio: 298/220;
  background: var(--c-white);
}

.megamenu__promo-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.megamenu__promo-text {
  flex: 1 0 auto;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}