/**
 * @file
 * Випадні панелі головного меню.
 *
 * Знято з меню Apple на mobilesentrix.eu: ліва колонка з родинами,
 * пошук по моделі згори, далі колонки «сіра пігулка-заголовок → перелік».
 * Селектори вкладені в .sr-header — Olivero перебиває одиночні класи.
 */

/*
 * Панель прив'язана до всієї навігації, а не до свого пункту: інакше
 * «Обладнання» відкривалося б від середини ряду і вилазило за правий край.
 */
.sr-header .sr-nav {
  position: relative;
}

.sr-header .sr-nav__item {
  position: static;
}

.sr-header .sr-nav__item .sr-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  border: 0;
  cursor: pointer;
  font-family: var(--sr-font);
}

.sr-header .sr-nav__chevron {
  transition: transform 0.15s ease;
}

.sr-header .sr-nav__link[aria-expanded="true"] {
  color: var(--sr-black);
}

.sr-header .sr-nav__link[aria-expanded="true"] .sr-nav__chevron {
  transform: rotate(180deg);
}

/* ---------- сама панель ---------- */

.sr-header .sr-mega {
  position: absolute;
  z-index: 60;
  top: 100%;
  inset-inline-start: 15px;
  inset-inline-end: 15px;
  display: block;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

/*
 * Атрибут hidden — це браузерне display:none, і будь-який авторський
 * display на тому ж елементі перебиває його назавжди. Без цього правила
 * панель видно одразу й закрити її неможливо.
 */
.sr-header .sr-mega[hidden] {
  display: none;
}

.sr-header .sr-mega__inner {
  display: flex;
  align-items: stretch;
  max-height: min(70vh, 620px);
}

/*
 * Розділи з кількома групами не розтягуємо на всю ширину. Колонки тут
 * розкладаємо в ряд явно: сітка з auto-fill при width:max-content
 * схлопується в один стовпчик.
 */
.sr-header .sr-mega--compact {
  inset-inline-end: auto;
  width: max-content;
  max-width: calc(100% - 30px);
}

.sr-header .sr-mega--compact .sr-mega__cols {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
}

/* ---------- ліва колонка родин ---------- */

.sr-header .sr-mega__rail {
  /* Ширше за початкові 208px: із появою іконки «Офіційні запчастини Apple»
     переносились на три рядки й ламали ритм рейки. */
  flex: 0 0 250px;
  overflow-y: auto;
  padding: var(--sr-space-4) 0;
  border-inline-end: 1px solid var(--sr-line);
  background: var(--sr-surface);
}

.sr-header .sr-mega__rail-item {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  width: 100%;
  margin-bottom: 2px;
  padding: 9px var(--sr-space-4);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: none;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  text-align: start;
  cursor: pointer;
}

.sr-header .sr-mega__rail-label {
  flex: 1 1 auto;
}

.sr-header .sr-mega__rail-count {
  color: var(--sr-grey-3);
  font-size: var(--sr-text-sm);
  font-variant-numeric: tabular-nums;
}

.sr-header .sr-mega__rail-item:hover {
  background: var(--sr-ground);
  color: var(--sr-black);
}

/*
 * Вибрана гілка лишається кольоровою, решта гасне — так видно, що вибір
 * звузив каталог. Підкладка виведена з фірмового червоного, а не задана
 * окремим кольором.
 */
.sr-header .sr-mega__rail-item.is-selected,
.sr-header .sr-mega__rail-item.is-selected:hover {
  background: color-mix(in srgb, var(--sr-red) 12%, #fff);
  color: var(--sr-red);
  font-weight: 600;
}

.sr-header .sr-mega__rail-item.is-selected .sr-mega__rail-count {
  color: color-mix(in srgb, var(--sr-red) 55%, #fff);
}

.sr-header .sr-mega__rail-item.is-dimmed {
  color: var(--sr-grey-3);
}

.sr-header .sr-mega__rail-item.is-dimmed .sr-mega__rail-count {
  color: var(--sr-line);
}

.sr-header .sr-mega__rail-item.is-dimmed:hover {
  background: var(--sr-ground);
  color: var(--sr-grey-1);
}

/* Хрестик знімає вибір — показуємо тільки на вибраній гілці. */
.sr-header .sr-mega__rail-clear {
  display: none;
  font-size: 15px;
  line-height: 1;
}

.sr-header .sr-mega__rail-item.is-selected .sr-mega__rail-clear {
  display: inline;
}

.sr-header .sr-mega__rail-item.is-featured {
  font-weight: 600;
}

.sr-header .sr-mega__rail-item.is-featured:not(.is-dimmed):not(.is-selected) {
  color: var(--sr-black);
}

/* ---------- права частина ---------- */

.sr-header .sr-mega__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sr-space-6);
}

.sr-header .sr-mega__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  flex: none;
  margin-bottom: var(--sr-space-6);
  padding: 0 var(--sr-space-4);
  height: 41px;
  max-width: 520px;
  border-radius: var(--sr-radius-field);
  background: var(--sr-field);
  color: var(--sr-grey-2);
}

.sr-header .sr-mega__search-field {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  box-shadow: none;
}

.sr-header .sr-mega__search-field:focus {
  outline: none;
  box-shadow: none;
}

.sr-header .sr-mega__search-clear {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sr-grey-3);
  color: var(--sr-surface);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.sr-header .sr-mega__search-clear:hover {
  background: var(--sr-red);
}

.sr-header .sr-mega__search-clear[hidden] {
  display: none;
}

/* ---------- колонки ---------- */

.sr-header .sr-mega__cols {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--sr-space-8) var(--sr-space-6);
  align-content: start;
}

.sr-header .sr-mega__group[hidden] {
  display: none;
}

.sr-header .sr-mega__group.is-highlighted .sr-mega__pill {
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Заголовок групи — сіра пігулка, як у референсі. */
.sr-header .sr-mega__pill {
  display: inline-block;
  margin: 0 0 var(--sr-space-3);
  padding: 5px 16px;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-field);
  color: var(--sr-black);
  font-size: var(--sr-text-sm);
  font-weight: 700;
}

.sr-header .sr-mega__pill a {
  color: inherit;
  text-decoration: none;
}

.sr-header .sr-mega__pill a:hover {
  text-decoration: underline;
}

.sr-header .sr-mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-header .sr-mega__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-header .sr-mega__list li[hidden] {
  display: none;
}

.sr-header .sr-mega__list a {
  display: flex;
  align-items: baseline;
  gap: var(--sr-space-2);
  padding: 5px 0;
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
  text-decoration: none;
}

.sr-header .sr-mega__list a:hover {
  color: var(--sr-red);
}

.sr-header .sr-mega__count {
  color: var(--sr-grey-3);
  font-size: var(--sr-text-xs);
  font-variant-numeric: tabular-nums;
}

.sr-header .sr-mega__more {
  margin-top: var(--sr-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.sr-header .sr-mega__more:hover {
  color: var(--sr-red);
}

.sr-header .sr-mega__more[hidden] {
  display: none;
}

.sr-header .sr-mega__empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
}

.sr-header .sr-mega__empty[hidden] {
  display: none;
}

.sr-header .sr-mega__all {
  flex: none;
  margin-top: var(--sr-space-6);
  padding-top: var(--sr-space-4);
  border-top: 1px solid var(--sr-line);
  color: var(--sr-black);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.sr-header .sr-mega__all:hover {
  color: var(--sr-red);
}

/* ---------- вузькі екрани ---------- */

@media (max-width: 900px) {
  .sr-header .sr-mega {
    position: fixed;
    inset-inline: 15px;
    width: auto;
  }

  .sr-header .sr-mega__rail {
    display: none;
  }

  .sr-header .sr-mega__cols {
    grid-template-columns: 1fr;
  }
}

/* Силует пристрою перед назвою гілки. Колір успадковується, тож іконка
   разом із підписом стає червоною на обраній гілці. */
.sr-mega__rail-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--sr-grey-2);
}

.sr-mega__rail-item:hover .sr-mega__rail-ico,
.sr-mega__rail-item.is-active .sr-mega__rail-ico {
  color: inherit;
}