

/* ============================================================
   ALYOR — ЕДИНАЯ СЕТКА ВСЕЙ СТРАНИЦЫ
   Desktop: 24px
   Tablet: 20px
   Mobile: 16px
============================================================ */

:root {
    --alyor-max-width: 1240px;
    --alyor-page-gap: 24px;
}


/* ============================================================
   1. ЕДИНЫЙ ВНЕШНИЙ ОТСТУП ВСЕХ СЕКЦИЙ
============================================================ */

.alyor-benefits-section,
.alyor-control-section,
.alyor-package-section,
.alyor-footer-section,
.alyor-products-section,
.alyor-reviews-section,
.alyor-faq-section {

    width: 100% !important;

    padding-left: var(--alyor-page-gap) !important;
    padding-right: var(--alyor-page-gap) !important;

    box-sizing: border-box !important;
}


/* ============================================================
   2. ВСЕ КОНТЕЙНЕРЫ ОДИНАКОВОЙ ШИРИНЫ
============================================================ */

.alyor-benefits-container,
.alyor-control-container,
.alyor-package-container,
.alyor-footer-container,
.alyor-products-container,
.alyor-reviews-container,
.alyor-faq-container {

    width: 100% !important;
    max-width: var(--alyor-max-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* ============================================================
   3. ВАЖНО
   У этих контейнеров padding был внешним отступом.
   Убираем его, иначе получается двойной отступ.
============================================================ */

.alyor-package-container,
.alyor-footer-container,
.alyor-products-container,
.alyor-reviews-container,
.alyor-faq-container {

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ============================================================
   4. BENEFITS И CONTROL
   Здесь контейнер сам является красной карточкой.
   Его внутренний padding оставляем — он нужен для дизайна.
   Меняем только внешнюю геометрию.
============================================================ */

.alyor-benefits-container,
.alyor-control-container {

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   5. СТАНДАРТНАЯ КАРТОЧКА ТОВАРА TILDA T744
============================================================ */

#rec2976428101 .t744 > .t-container {

    width: 100% !important;
    max-width: var(--alyor-max-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* внешние поля стандартного блока товара */
#rec2976428101 {

    padding-left: var(--alyor-page-gap) !important;
    padding-right: var(--alyor-page-gap) !important;

    box-sizing: border-box !important;
}


/* ============================================================
   TABLET
============================================================ */

@media screen and (max-width: 960px) {

    :root {
        --alyor-page-gap: 20px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 640px) {

    :root {
        --alyor-page-gap: 16px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media screen and (max-width: 360px) {

    :root {
        --alyor-page-gap: 12px;
    }

}

</style>