/* ---------------------------------------------------------------------------
   МП 06.09.2026. Подменю огневой линейки.
   Разметка — local/templates/concretika/include/firepits-subnav.php.
   Все классы с префиксом mpsub-, чтобы не пересечься со стилями сайта.
   --------------------------------------------------------------------------- */

.mpsub {
    position: sticky;
    top: 108px;               /* запасное значение, скрипт подставит реальную высоту шапки */
    z-index: 80;              /* ниже шапки (85), чтобы она перекрывала при сжатии */
    border-bottom: 1px solid #e6e3e0;
    background: #ffffff;
}

.mpsub__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Обёртка нужна для затухания у правого края на мобильном: рисовать его
   внутри прокручиваемой ленты нельзя — уедет вместе с пунктами. */
.mpsub__scroll {
    flex: 1 1 auto;
    min-width: 0;
}

.mpsub__items {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mpsub__items::-webkit-scrollbar { display: none; }

.mpsub__item {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.2;
    color: #1a1a1a;
    white-space: nowrap;
    transition: background .15s ease-in-out, color .15s ease-in-out;
}

.mpsub__item:hover { background: #f6f4f2; color: #1a1a1a; }

.mpsub__item.is-on { background: #f0ece8; font-weight: 500; }

.mpsub__all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: #fe693a;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s ease-in-out;
}

.mpsub__all:hover { background: #e2532a; color: #ffffff; }

/* Короткая подпись и иконка живут в разметке всегда, показ переключает
   медиазапрос ниже: так в HTML остаётся полное название раздела. */
.mpsub__short,
.mpsub__allicon { display: none; }

.mpsub__allicon {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2.5px;
    width: 15px;
    height: 15px;
}

.mpsub__allicon i {
    background: #ffffff;
    border-radius: 1.5px;
}

/* ---------------------------------------------------------------------------
   МП 06.09.2026. Мобильная раскладка — одна строка.

   В одну строку с полными названиями подменю не помещалось: кнопка
   «Все товары» забирала треть ширины, «Готовим на чаше» и «Хранение и уход»
   уезжали под неё. Две строки решали это ценой высоты, а подменю липкое —
   вторая строка стояла бы на каждом экране страницы.

   Поэтому на телефоне подписи короткие, а кнопка сжимается до круглой
   иконки-сетки: 38px вместо 120. Освободившегося места хватает на четыре
   пункта из пяти без прокрутки; пятый достаётся свайпом, и у правого края
   стоит затухание, чтобы это было видно.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Высоту задаёт кнопка (38px) плюс отступы: 55px против 88px у варианта
       в две строки. Подменю липкое, эта разница видна на каждом экране. */
    .mpsub__row {
        gap: 8px;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .mpsub__scroll { position: relative; }

    /* Затухание рисуем на обёртке, а не внутри прокручиваемой ленты:
       внутри оно уезжало бы вместе с пунктами. */
    .mpsub__scroll::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 85%);
    }

    .mpsub__items { gap: 2px; }

    .mpsub__item {
        font-size: 15px;
        padding: 7px 11px;
    }

    .mpsub__full { display: none; }
    .mpsub__short { display: inline; }

    .mpsub__all {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .mpsub__alltext { display: none; }
    .mpsub__allicon { display: grid; }
}