/*
 * SWEB Market — каталог, мегаменю, мобильное меню.
 */

.sw-menu {
    position: relative;
    border-top: 1px solid var(--sw-border);
    background: var(--sw-surface);
}

.sw-menu__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding-block: 8px;
}

.sw-menu__catalog {
    flex: none;
    padding-inline: 16px;
}

/* На телефоне каталог открывается шторкой из бургера, дублировать кнопку
   в узкой полосе незачем — она съедает место у быстрых ссылок. */
.sw-menu__catalog {
    display: none;
}

@media (min-width: 992px) {
    .sw-menu__catalog {
        display: inline-flex;
    }
}

.sw-menu__quick {
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 20px;
}

.sw-menu__quick-link {
    flex: none;
    padding: 6px 0;
    color: var(--sw-ink);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.sw-menu__quick-link:hover {
    color: var(--sw-primary);
}

/* --------------------------------------------------------------- Мегаменю -- */

.sw-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--sw-z-dropdown);
    border-top: 1px solid var(--sw-border);
    background: var(--sw-surface);
    box-shadow: var(--sw-shadow-lg);
}

.sw-megamenu[hidden] {
    display: none;
}

.sw-megamenu__inner {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 0;
    min-height: 380px;
    max-height: min(70vh, 560px);
}

.sw-megamenu__roots {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    border-right: 1px solid var(--sw-border);
    overflow-y: auto;
}

.sw-megamenu__root {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    color: var(--sw-ink);
    font-size: .9375rem;
    font-weight: 500;
}

.sw-megamenu__root:hover,
.sw-megamenu__root.is-active {
    background: var(--sw-bg);
    color: var(--sw-primary);
}

.sw-megamenu__root .sw-icon {
    width: 16px;
    height: 16px;
    opacity: .5;
}

.sw-megamenu__panels {
    padding: 16px 24px;
    overflow-y: auto;
}

.sw-megamenu__panel {
    display: none;
}

.sw-megamenu__panel.is-active {
    display: block;
}

.sw-megamenu__panel-title {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--sw-primary);
    font-size: .9375rem;
    font-weight: 600;
}

.sw-megamenu__children {
    display: grid;
    /* Колонка шире прежних 200px: рядом с названием теперь стоит миниатюра,
       и в узкой колонке подписи в два слова ломались на две строки. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-megamenu__children a {
    display: block;
    padding: 6px 0;
    color: var(--sw-text-dim);
    font-size: .875rem;
}

.sw-megamenu__children a:hover {
    color: var(--sw-primary);
}

.sw-megamenu__child {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Подложка под миниатюрой: фото товаров сняты на белом, и на белой панели
   меню они висят в воздухе без границ. */
.sw-megamenu__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 3px;
    border-radius: var(--sw-radius);
    background: var(--sw-bg);
    object-fit: contain;
}

/* ------------------------------------------------------- Мобильное меню -- */

.sw-mobile-menu,
.sw-mobile-menu__children,
.sw-mobile-menu__extra {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-mobile-menu__item {
    border-bottom: 1px solid var(--sw-border);
}

.sw-mobile-menu__link,
.sw-mobile-menu__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 0;
    color: var(--sw-ink);
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

/* Стрелку рисуем сами, стандартный треугольник <summary> в разных
   браузерах выглядит по-разному и не поддаётся стилизации. */
.sw-mobile-menu__summary::-webkit-details-marker {
    display: none;
}

.sw-mobile-menu__summary .sw-icon {
    width: 18px;
    height: 18px;
    color: var(--sw-text-muted);
    transition: transform var(--sw-transition-fast);
}

.sw-mobile-menu details[open] > .sw-mobile-menu__summary .sw-icon {
    transform: rotate(180deg);
}

.sw-mobile-menu__children {
    padding: 0 0 12px 12px;
}

.sw-mobile-menu__children a {
    display: block;
    padding: 9px 0;
    color: var(--sw-text-dim);
    font-size: .875rem;
}

.sw-mobile-menu__extra {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sw-border);
}

.sw-mobile-menu__extra a,
.sw-mobile-menu__callback {
    display: block;
    padding: 9px 0;
    color: var(--sw-text-dim);
    font-size: .875rem;
}

/* Кнопка в списке ссылок: своё оформление кнопки снимаем, чтобы пункт
   не выбивался из соседних. */
.sw-mobile-menu__callback {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Иконка и стрелка в пунктах меню. */
.sw-menu__quick-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sw-menu__quick-link .sw-icon {
    width: 18px;
    height: 18px;
    color: var(--sw-text-muted);
}

.sw-menu__caret {
    width: 14px !important;
    height: 14px !important;
    opacity: .6;
}

.sw-catalog-panel__icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    color: var(--sw-text-dim);
    opacity: 1;
}

/* Название занимает всё свободное место, чтобы стрелка «дальше»
   прижималась к правому краю независимо от длины пункта. */
.sw-catalog-panel__link > span {
    flex: 1;
}