/* Мобильные правки UI — только ≤679px, ПК не трогаем */



@media screen and (max-width: 679px) {

    /* ——— П.1: фильтры тарифов — как кнопка «Все тарифы» ——— */

    #tarifs nav.main-tariff__tabs {

        box-sizing: border-box;

        flex-wrap: wrap;

        gap: 8px;

        margin-left: 0;

        margin-right: 0;

        max-width: none;

        padding: 0 !important;

        width: 100% !important;

    }



    #tarifs nav.main-tariff__tabs button.main-tariff__tab.button {

        align-items: center !important;

        border-radius: 0 !important;

        border-width: 1px !important;

        box-sizing: border-box !important;

        display: inline-flex !important;

        flex: 0 0 calc(50% - 4px) !important;

        font-family: inherit !important;

        font-size: 3.73333vw !important;

        font-style: normal !important;

        font-weight: inherit !important;

        height: 13.3333vw !important;

        justify-content: center !important;

        line-height: 1.5 !important;

        max-width: calc(50% - 4px) !important;

        min-height: 0 !important;

        min-width: 0 !important;

        padding: 3.33333vw 8vw !important;

        text-align: center !important;

        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

        white-space: normal;

        width: auto !important;

    }



    #tarifs nav.main-tariff__tabs button.main-tariff__tab.button:last-child:nth-child(odd) {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        width: 100% !important;

    }



    /* С «Популярные» и ровно 4 кнопки — сетка 2×2, без растягивания последней */

    #tarifs nav.main-tariff__tabs--has-popular button.main-tariff__tab.button:nth-child(4):last-child {

        flex: 0 0 calc(50% - 4px) !important;

        max-width: calc(50% - 4px) !important;

        width: auto !important;

    }



    #tarifs nav.main-tariff__tabs button.main-tariff__tab.button.is-outline {

        background-color: #fff !important;

        border-color: #e52713 !important;

        color: #242429 !important;

    }



    #tarifs nav.main-tariff__tabs button.main-tariff__tab.button.is-outline:hover {

        background-color: rgba(229, 39, 19, 0.1) !important;

        border-color: #eb3822 !important;

    }



    #tarifs nav.main-tariff__tabs button.main-tariff__tab.button.is-pink.is-active {

        background-color: #e52713 !important;

        border-color: #e52713 !important;

        color: #ffffff !important;

    }



    #connection_requests .required-form-foot {

        font-size: 12px !important;

        margin-bottom: 0 !important;

        margin-top: 0 !important;

        text-align: center !important;

    }



    #connection_requests .form-make-request {

        margin-bottom: 4vw !important;

    }



    #connection_requests .form-make-request__field:not(:last-child) {

        margin-bottom: 4vw !important;

    }



    #connection_requests .main-make-request__footer {

        margin-top: 6.4vw !important;

        padding-top: 0 !important;

    }



    #connection_requests .main-make-request__footer-text {

        font-size: clamp(13px, 3.95vw, 16px) !important;

        line-height: 1.2 !important;

        margin-bottom: 1.86667vw !important;

        text-align: center !important;

        white-space: nowrap !important;

    }



    #connection_requests .main-make-request__footer-action.is-tel {

        font-size: calc(5.86667vw + 8pt) !important;

        line-height: 1.2 !important;

    }



    .qa.quick-access-block .qa__cell--start .main-feature__title.title.is-2,

    .qa.quick-access-block .qa__cell--kinozal .main-feature__title.title.is-2 {

        box-sizing: border-box;

        font-size: clamp(38px, 12.2vw, 52px) !important;

        line-height: 0.92 !important;

        max-width: 100%;

        overflow-wrap: break-word;

        word-break: normal;

        width: 100%;

    }



    .main-feature--ttk-bonus .main-feature__button-wrapper {

        margin-bottom: 8vw;

    }



    /* ——— П.2: ItHelper ——— */

    #text_graphic_block .main-feature--it-help .main-feature__it-content .main-feature__title.title.is-2 {

        font-size: 10.6667vw !important;

        line-height: 1.1 !important;

        margin-bottom: 3.73333vw !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-content .main-feature__subtitle {

        font-size: 4.26667vw !important;

        line-height: 1.45 !important;

        margin-bottom: 7.46667vw !important;

        max-width: 100% !important;

        width: 100% !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-list li {

        font-size: calc(4.26667vw - 2pt) !important;

        line-height: 1.45 !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-list {

        margin-bottom: 0 !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__button-wrapper--it-help {

        align-items: center !important;

        align-self: stretch !important;

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: clamp(8px, 2.4vw, 12px) !important;

        justify-content: flex-start !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-top: clamp(24px, 6.4vw, 40px) !important;

        max-width: 100% !important;

        width: 100% !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__button-wrapper--it-help .main-feature__button {

        box-sizing: border-box !important;

        flex: 0 0 auto !important;

        justify-content: center !important;

        width: auto !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-icons--under-image {

        box-sizing: border-box !important;

        display: flex !important;

        gap: clamp(2px, 0.6vw, 4px) !important;

        justify-content: space-between !important;

        margin-top: clamp(12px, 3.2vw, 18px) !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

        width: 100% !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-icons--under-image .main-feature__it-icon {

        display: block !important;

        flex: 1 1 0 !important;

        height: auto !important;

        max-height: clamp(56px, 14vw, 80px) !important;

        max-width: 100% !important;

        min-width: 0 !important;

        object-fit: contain !important;

        width: auto !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-icons--inline-btn {

        display: none !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__right {

        align-items: flex-start !important;

        box-sizing: border-box !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

        width: 100% !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-content {

        align-items: flex-start !important;

        display: flex !important;

        flex-direction: column !important;

        text-align: left !important;

        width: 100% !important;

    }



    #text_graphic_block .main-feature--it-help .main-feature__it-content .main-feature__title,

    #text_graphic_block .main-feature--it-help .main-feature__it-content .main-feature__subtitle,

    #text_graphic_block .main-feature--it-help .main-feature__it-content .main-feature__it-list {

        align-self: stretch !important;

        text-align: left !important;

        width: 100% !important;

    }



    /* ——— П.3: блок «ТТК — это…» ——— */

    #why_us.slider-showcase {

        --pill-media-extra-lift: 0px !important;

        --pill-media-overlap: 0px !important;

        --pill-mobile-media-h: min(82vw, 360px);

        margin-top: 0 !important;

        padding-bottom: 16px !important;

        padding-top: 24px !important;

        position: relative;

        z-index: auto;

    }



    #equipment.equipment {

        --eq-mobile-gutter: 20px;

        box-sizing: border-box !important;

        margin-bottom: 0 !important;

        max-width: 100% !important;

        overflow-x: hidden !important;

        padding-bottom: 0 !important;

        padding-left: var(--eq-mobile-gutter) !important;

        padding-right: var(--eq-mobile-gutter) !important;

        position: relative;

        width: 100% !important;

        z-index: auto;

    }



    #equipment .equipment__cards-inner.slider-showcase__inner {

        box-sizing: border-box !important;

        max-width: 100% !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

        width: 100% !important;

    }



    #equipment .equipment__cards-grid {

        gap: calc(var(--eq-mobile-gutter) * 2) !important;

        max-width: 100% !important;

        padding-bottom: calc(var(--eq-mobile-gutter) * 2) !important;

        width: 100% !important;

    }



    #equipment .eq-card {

        box-sizing: border-box !important;

        max-width: 100% !important;

        overflow: hidden !important;

        padding: 20px !important;

        width: 100% !important;

    }



    #equipment .eq-card__content {

        box-sizing: border-box !important;

        min-width: 0 !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

    }



    #equipment .eq-card__image,

    #equipment .eq-card__link {

        max-width: 100% !important;

        min-width: 0 !important;

    }



    #equipment .eq-card__image img {

        display: block !important;

        height: auto !important;

        max-height: 200px !important;

        max-width: 52vw !important;

        object-fit: contain !important;

        object-position: left center !important;

        width: auto !important;

    }



    #why_us .slider-showcase__title.connection-flow__title.title.is-2 {

        font-size: 10.6667vw !important;

        line-height: 1.1 !important;

        margin-bottom: 3.73333vw !important;

        text-align: left;

        white-space: normal;

    }



    #connection_requests .connection-flow__title.title.is-2 {

        font-size: 10.6667vw !important;

        line-height: 1.1 !important;

        margin-bottom: 3.73333vw !important;

        white-space: normal !important;

    }



    #why_us .showcase-pills__card {

        box-sizing: border-box;

        overflow: visible;

        padding: 16px 12px 16px 20px !important;

    }



    #why_us .showcase-pills__card.is-mobile-height-locked {

        height: var(--showcase-card-mobile-h) !important;

        max-height: var(--showcase-card-mobile-h) !important;

        min-height: var(--showcase-card-mobile-h) !important;

    }



    #why_us .showcase-pills__card-inner {

        height: 100%;

    }



    #why_us .showcase-pills__text {

        align-items: flex-start !important;

        justify-content: flex-start !important;

        max-width: 74% !important;

        padding-left: 0;

        padding-right: 2px;

        padding-top: 4px !important;

    }



    #why_us .showcase-pills__media {

        flex: 0 0 var(--pill-mobile-media-h) !important;

        height: var(--pill-mobile-media-h) !important;

        margin: 0 !important;

        overflow: hidden;

        width: 100% !important;

    }



    #why_us .showcase-slide__title {

        font-size: calc(10.6667vw - 3pt) !important;

        font-weight: 400;

        line-height: 1.1 !important;

        margin: 0 0 3.73333vw !important;

    }



    #why_us .showcase-slide__title.is-mobile-title-locked {

        min-height: var(--showcase-slide-title-min-h) !important;

    }



    #why_us .showcase-slide__desc {

        font-size: 4.26667vw !important;

        line-height: 1.45 !important;

        margin: 0;

        max-width: none !important;

    }



    /* ——— П.4: точки слайдера (мобила) ——— */

    #why_us .showcase-pills__row.showcase-pills__row--dots {

        align-items: center !important;

        display: flex !important;

        flex-wrap: nowrap !important;

        gap: 10px !important;

        justify-content: center !important;

        overflow: visible !important;

        padding: 16px 0 6px !important;

        width: 100% !important;

    }



    #why_us .showcase-pills__dot {

        appearance: none;

        background: transparent;

        border: 2px solid #ff0000;

        border-radius: 50%;

        box-sizing: border-box;

        cursor: pointer;

        flex: 0 0 auto;

        height: 10px;

        margin: 0;

        padding: 0;

        width: 10px;

    }



    #why_us .showcase-pills__dot.is-active {

        background: #ff0000;

    }



    /* ——— «Как проходит подключение» ——— */

    #connection_flow.connection-flow {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }



    #connection_flow .connection-flow__title.title.is-2 {

        font-size: 10.6667vw !important;

        line-height: 1.1 !important;

        margin-bottom: 3.73333vw !important;

        white-space: normal !important;

    }



    #connection_flow .connection-flow__inner {

        box-sizing: border-box !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

        width: 100% !important;

    }



    #connection_flow .connection-flow__card {

        box-sizing: border-box !important;

        width: 100% !important;

    }

}

