#ztDeliveryPayment {
    --ztdp-ink: #333a43;
    --ztdp-muted: #6b7480;
    --ztdp-yellow: #ffb800;
    --ztdp-yellow-hover: #e5a500;
    --ztdp-blue: #1aa8d8;
    --ztdp-surface: #fff;
    --ztdp-surface-soft: #f7f8fa;
    --ztdp-border: #e1e6eb;
    --ztdp-radius: 16px;
    --ztdp-shadow: 0 12px 32px rgba(29, 34, 40, .075);
    --container-max: 1992px;
    /* Поля берём у шапки. Их потребляет не только правило .ztdp__shell ниже:
       zt-home-unify.css задаёт `.zt-shell { padding: … !important }` через
       ту же переменную и перебивает наше правило. Пока ступени были свои
       (14 px с 767 px против 680 px у шапки), на 681…767 px модуль стоял
       на 6 px уже шапки. Запасные значения — на случай, если site-shell.css
       не подключён. */
    --page-gutter: var(--zt-site-shell-gutter, 28px);

    width: 100%;
    /* Снизу поля нет: ниже идёт CTA, и он приносит свой отступ — 80 px
       margin плюс 64 px padding, — а шаблон добавляет ещё 50 px
       у .zt-page-content-area. Прежние 88 px давали в сумме 282 px
       от таблицы сроков до карточки CTA (замер 07.09.2026, 1440 px);
       у «Сертификатов» на том же сочетании 184 px. */
    padding: 48px 0 0;
    overflow: hidden;
    color: var(--ztdp-ink);
    background: #fff;
    font-family: var(--zt-font, "Tektur", Arial, sans-serif);
}

#ztDeliveryPayment,
#ztDeliveryPayment * {
    box-sizing: border-box;
}

/* Ширина — по шапке. На бою переменные --zt-site-shell-* приходят из
   site-shell.css и меняются на тех же границах, что у шапки: 28 px,
   с 1480 px — 20 px, с 680 px — 14 px. Свои --container-max
   и --page-gutter оставлены запасным вариантом: без site-shell.css
   (изолированное превью) колонка получится та же, только на 14 px
   модуль перейдёт на 767, а не на 680 px. */
#ztDeliveryPayment .ztdp__shell {
    width: 100%;
    max-width: var(--zt-site-shell-max, calc(var(--container-max) + 2 * var(--page-gutter)));
    margin-inline: auto;
    padding-inline: var(--zt-site-shell-gutter, var(--page-gutter));
}

/* =========================================================
   Стыковка с боевым шаблоном (07.09.2026)

   На бою header.php оборачивает внутреннюю страницу так:

     <section class="content-area zt-page-content-area">
       <div class="container">
         <nav class="breadcrumbs zt-breadcrumbs">…</nav>
         <h1 class="zt-page-heading zt-page-heading--content">Доставка</h1>
                                     <- сюда встаёт наш модуль

   Отсюда три правки. Все — через :has, поэтому других страниц
   они не касаются.

   1. Заголовок «Доставка» печатает шаблон, а у модуля свой H1
      «Доставляем точно в срок». Два H1 на странице — и дубль
      для поиска, и лишняя строка для читателя. Прячем шаблонный.

   2. site-shell.css:378 даёт .container ширину и поля шапки, причём
      через !important. Наш .ztdp__shell добавил бы вторые поля —
      модуль стал бы уже шапки на 28 px с каждой стороны, а серый фон
      перестал бы идти во всю ширину. Поэтому поля контейнера снимаем
      (тоже !important, иначе не перебить), колонку задаёт сам модуль.

   3. После этого крошки остались бы у края экрана — возвращаем им
      сетку шапки отдельным правилом. Тот же приём уже применён
      для страницы 404 в site-shell.css:301.

   Без поддержки :has не сработает ни одно: будет лишний заголовок
   и модуль уже шапки, но вёрстка не развалится.
   ========================================================= */
body:has(#ztDeliveryPayment) .zt-page-heading--content {
    display: none;
}

.zt-page-content-area > .container:has(#ztDeliveryPayment) {
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* N-772: «отступ меньше от блока верхнего». Между таблицей сроков
   и карточкой CTA было 194 px: у модуля своего поля снизу нет, но
   шаблон добавляет 50 px (`.content-area { padding: 50px 0 }`,
   style.css), а сам CTA приносит 80 px margin и 64 px padding.
   Снимаем шаблонные 50 — остаётся 144 px, ровно столько же, сколько
   на главной между модулем «Как мы работаем» и той же карточкой
   (замер 07.09.2026 на 1440 px). !important не нужен: у правила
   в style.css его нет, а :has даёт больший вес. */
.zt-page-content-area:has(#ztDeliveryPayment) {
    padding-bottom: 0;
}

/* Всё с !important: шаблон компонента крошек задаёт им
   `margin: 0 !important` (…/breadcrumb/breadcrumbs/style.css:28),
   и без этого `margin: auto` не срабатывает. Промах виден только шире
   2048 px — на 1920 контейнер и так уже максимума, распределять нечего,
   и крошки стояли ровно. На 2560 они уезжали к левому краю экрана,
   пока шапка и модуль оставались по центру. */
.zt-page-content-area > .container:has(#ztDeliveryPayment) > .zt-breadcrumbs {
    width: 100% !important;
    max-width: var(--zt-site-shell-max, 2048px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: var(--zt-site-shell-gutter, 28px) !important;
    padding-left: var(--zt-site-shell-gutter, 28px) !important;
}


#ztDeliveryPayment .ztdp-hero {
    position: relative;
    display: grid;
    min-height: 500px;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
    gap: 32px;
    padding: clamp(38px, 4.4vw, 72px);
    padding-right: clamp(320px, 27vw, 510px);
    overflow: hidden;
    border: 1px solid var(--ztdp-border);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(29, 34, 40, .08);
}

#ztDeliveryPayment .ztdp-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 31%, rgba(255,255,255,.83) 48%, rgba(255,255,255,.13) 73%, transparent 100%);
    content: "";
    pointer-events: none;
}

#ztDeliveryPayment .ztdp-hero__picture {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#ztDeliveryPayment .ztdp-hero__picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

#ztDeliveryPayment .ztdp-hero__content,
#ztDeliveryPayment .ztdp-hero__promo {
    position: relative;
    z-index: 2;
}

#ztDeliveryPayment .ztdp-hero__content {
    max-width: 760px;
}

/* N-773: «стиль и цвет как на главной, О компании «ЗИПТЕХ СЕРВИС»».
   Эталон — .zt-company-map__eyebrow (company-map.css:47). Замер плашки
   главной на 1440 px: цвет и рамка #ffb800, рамка 1 px, скругление 8,
   поля 7/11, шрифт 700 12/1.2 Manrope, трекинг .08em, фона нет,
   иконка 17 px с обводкой 1.8. Было: тёмно-янтарный текст #a97600
   на белой подложке и рамка 1.5 px. */
#ztDeliveryPayment .ztdp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--ztdp-yellow);
    border-radius: 8px;
    color: var(--ztdp-yellow);
    background: transparent;
    font: 700 12px/1.2 var(--zt-font-button, "Manrope", Arial, sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* stroke с !important и отдельно на path — как у эталона
   (company-map.css:73 и :83). Через currentColor не работает: обводку
   svg перебивает общее правило темы, и иконка оставалась тёмной
   при жёлтой рамке и подписи. */
#ztDeliveryPayment .ztdp-kicker svg,
#ztDeliveryPayment .ztdp-kicker svg path {
    stroke: var(--ztdp-yellow) !important;
}

#ztDeliveryPayment .ztdp-kicker svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ztDeliveryPayment h1,
#ztDeliveryPayment h2,
#ztDeliveryPayment h3 {
    color: var(--ztdp-ink);
    font-family: var(--zt-font-heading, "Russo One", Arial, sans-serif);
    font-weight: 400;
    letter-spacing: -.025em;
}

#ztDeliveryPayment .ztdp-hero h1 {
    max-width: 780px;
    margin: 22px 0 18px;
    font-size: clamp(38px, 3.05vw, 58px);
    line-height: 1.04;
    text-transform: uppercase;
}

#ztDeliveryPayment em {
    color: var(--ztdp-yellow);
    font-style: normal;
}

#ztDeliveryPayment .ztdp-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--ztdp-muted);
    font-size: 16px;
    line-height: 1.65;
}

#ztDeliveryPayment .ztdp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

#ztDeliveryPayment .ztdp-facts li {
    min-width: 0;
    padding-left: 13px;
    border-left: 3px solid var(--ztdp-yellow);
}

#ztDeliveryPayment .ztdp-facts strong,
#ztDeliveryPayment .ztdp-facts span {
    display: block;
}

#ztDeliveryPayment .ztdp-facts strong {
    font: 800 15px/1.25 var(--zt-font-button, "Manrope", Arial, sans-serif);
}

#ztDeliveryPayment .ztdp-facts span {
    margin-top: 4px;
    color: var(--ztdp-muted);
    font-size: 12px;
    line-height: 1.35;
}

#ztDeliveryPayment .ztdp-hero__promo {
    position: absolute;
    top: 50%;
    right: clamp(24px, 3vw, 54px);
    display: flex;
    width: clamp(225px, 16vw, 280px);
    min-height: 270px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    border-radius: 18px;
    color: #1d2228;
    background: linear-gradient(145deg, #ffc526, #ffae00);
    box-shadow: 0 16px 34px rgba(255,174,0,.25);
    text-align: center;
    transform: translateY(-50%);
}

#ztDeliveryPayment .ztdp-hero__promo-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.45);
}

#ztDeliveryPayment .ztdp-hero__promo-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

#ztDeliveryPayment .ztdp-hero__promo strong {
    margin: 15px 0 9px;
    font: 400 22px/1.08 var(--zt-font-heading, "Russo One", Arial, sans-serif);
    text-transform: uppercase;
}

#ztDeliveryPayment .ztdp-hero__promo span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

#ztDeliveryPayment .ztdp-hero__promo small {
    margin-top: 15px;
    font-size: 10px;
    line-height: 1.4;
}

#ztDeliveryPayment .ztdp-panel {
    border: 1px solid var(--ztdp-border);
    border-radius: var(--ztdp-radius);
    background: var(--ztdp-surface);
    box-shadow: var(--ztdp-shadow);
}

#ztDeliveryPayment .ztdp-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

#ztDeliveryPayment .ztdp-times {
    grid-column: 1 / -1;
}

#ztDeliveryPayment .ztdp-panel {
    min-width: 0;
    padding: 26px;
}

#ztDeliveryPayment .ztdp-panel > h2 {
    margin: 0 0 8px;
    font-size: clamp(21px, 1.55vw, 28px);
    line-height: 1.15;
    text-transform: uppercase;
}

#ztDeliveryPayment .ztdp-panel > p,
#ztDeliveryPayment .ztdp-panel > small {
    color: var(--ztdp-muted);
    font-size: 12px;
    line-height: 1.5;
}

#ztDeliveryPayment .ztdp-carriers ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0;
    padding: 0;
    border-top: 1px solid var(--ztdp-border);
    border-left: 1px solid var(--ztdp-border);
    list-style: none;
}

#ztDeliveryPayment .ztdp-carriers li {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-right: 1px solid var(--ztdp-border);
    border-bottom: 1px solid var(--ztdp-border);
}

#ztDeliveryPayment .ztdp-carriers img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

#ztDeliveryPayment .ztdp-carriers--wide {
    margin-top: 18px;
    padding: clamp(22px, 2vw, 32px);
}

#ztDeliveryPayment .ztdp-carriers--wide ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0;
}

#ztDeliveryPayment .ztdp-carriers--wide li {
    min-height: 96px;
}

#ztDeliveryPayment .ztdp-methods__list {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    border-bottom: 1px solid var(--ztdp-border);
    list-style: none;
}

#ztDeliveryPayment .ztdp-methods__list li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 22px;
    padding: 14px 0;
    border-top: 1px solid var(--ztdp-border);
}

#ztDeliveryPayment .ztdp-methods__list li > img {
    width: clamp(86px, 5.2vw, 112px);
    height: clamp(86px, 5.2vw, 112px);
    flex: 0 0 clamp(86px, 5.2vw, 112px);
    object-fit: contain;
    transform: scale(1.4);
    transform-origin: center;
}

#ztDeliveryPayment .ztdp-methods__list p,
#ztDeliveryPayment .ztdp-methods__list strong,
#ztDeliveryPayment .ztdp-methods__list small {
    display: block;
    margin: 0;
}

#ztDeliveryPayment .ztdp-methods__list strong {
    color: var(--ztdp-text);
    font: 800 12px/1.35 var(--zt-font-button, "Manrope", Arial, sans-serif);
    text-transform: uppercase;
}

#ztDeliveryPayment .ztdp-methods__list small {
    margin-top: 4px;
    color: var(--ztdp-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

#ztDeliveryPayment .ztdp-methods__list a {
    color: #a97600;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#ztDeliveryPayment .ztdp-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-top: 20px;
}

#ztDeliveryPayment .ztdp-benefit {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

#ztDeliveryPayment .ztdp-benefit img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
}

#ztDeliveryPayment .ztdp-benefit p {
    margin: 3px 0 0;
}

#ztDeliveryPayment .ztdp-benefit strong,
#ztDeliveryPayment .ztdp-benefit span {
    display: block;
}

#ztDeliveryPayment .ztdp-benefit strong {
    font: 800 13px/1.35 var(--zt-font-button, "Manrope", Arial, sans-serif);
    text-transform: uppercase;
}

#ztDeliveryPayment .ztdp-benefit span {
    margin-top: 5px;
    color: var(--ztdp-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

#ztDeliveryPayment .ztdp-times table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    font-size: 12px;
}

#ztDeliveryPayment .ztdp-times th,
#ztDeliveryPayment .ztdp-times td {
    padding: 11px 9px;
    border: 1px solid var(--ztdp-border);
    text-align: left;
}

#ztDeliveryPayment .ztdp-times thead th {
    background: #f3f5f7;
    font: 800 11px/1.3 var(--zt-font-button, "Manrope", Arial, sans-serif);
    text-transform: uppercase;
}

#ztDeliveryPayment .ztdp-times tbody th {
    background: #fbfcfd;
}

#ztDeliveryPayment .ztdp-notes {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--ztdp-muted);
    font-size: 10px;
    line-height: 1.45;
}

/* Правила .ztdp-cta и .ztdp-button убраны 31.08.2026: по решению заказчика
   страница показывает тот же контактный модуль #ziptehLeadModule, что и
   главная, — он приходит из /local/include/main/feedback-form.php и оформлен
   в contact-module.css. Восстановить прежний блок можно из
   Редизайн/Пакеты/2026-08-24 Доставка и оплата/Превью/module.css. */

#ztDeliveryPayment a:focus-visible,
#ztDeliveryPayment button:focus-visible {
    outline: 3px solid #1389b9;
    outline-offset: 3px;
}

#ztDeliveryPayment .ztdp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1480px) {
    #ztDeliveryPayment { --page-gutter: var(--zt-site-shell-gutter, 20px); }
}

/* 680 px, а не 767: ступень шапки (site-shell.css:70). */
@media (max-width: 680px) {
    #ztDeliveryPayment { --page-gutter: var(--zt-site-shell-gutter, 14px); }
}

@media (max-width: 1399px) {
    #ztDeliveryPayment .ztdp-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ztDeliveryPayment .ztdp-times { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
    #ztDeliveryPayment .ztdp-hero {
        grid-template-columns: 1fr;
        padding: 38px 28px 320px;
    }
    #ztDeliveryPayment .ztdp-hero::after {
        background: linear-gradient(#fff 0%, #fff 45%, rgba(255,255,255,.7) 62%, transparent 82%);
    }
    #ztDeliveryPayment .ztdp-hero__picture img { object-position: center bottom; }
    #ztDeliveryPayment .ztdp-hero__promo {
        top: auto;
        right: 24px;
        bottom: 24px;
        width: 230px;
        min-height: 190px;
        transform: none;
    }
    #ztDeliveryPayment .ztdp-panels { grid-template-columns: 1fr; }
    #ztDeliveryPayment .ztdp-times { grid-column: auto; }
}

@media (max-width: 1023px) {
    #ztDeliveryPayment .ztdp-carriers--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    #ztDeliveryPayment {
        padding: 28px 0 0;
    }
    #ztDeliveryPayment .ztdp-hero {
        min-height: 0;
        padding: 24px 18px 18px;
        border-radius: 16px;
    }
    #ztDeliveryPayment .ztdp-hero::after { background: linear-gradient(#fff 0%, #fff 48%, rgba(255,255,255,.84) 64%, rgba(255,255,255,.2) 100%); }
    #ztDeliveryPayment .ztdp-hero__content { z-index: 3; }
    #ztDeliveryPayment .ztdp-hero h1 { margin-top: 18px; font-size: clamp(30px, 9vw, 40px); }
    #ztDeliveryPayment .ztdp-hero__lead { font-size: 14px; line-height: 1.55; }
    #ztDeliveryPayment .ztdp-facts { grid-template-columns: 1fr; gap: 10px; }
    #ztDeliveryPayment .ztdp-hero__picture {
        position: relative;
        z-index: 2;
        inset: auto;
        height: 220px;
        margin: 18px -18px 0;
    }
    #ztDeliveryPayment .ztdp-hero__picture img { object-fit: cover; object-position: center; }
    #ztDeliveryPayment .ztdp-hero__promo {
        position: relative;
        inset: auto;
        z-index: 3;
        width: 100%;
        min-height: 0;
        margin-top: -30px;
        padding: 18px;
        transform: none;
    }
    #ztDeliveryPayment .ztdp-hero__promo-icon { width: 44px; height: 44px; }
    #ztDeliveryPayment .ztdp-hero__promo strong { margin: 10px 0 7px; font-size: 19px; }
    #ztDeliveryPayment .ztdp-panels { grid-template-columns: 1fr; }
    #ztDeliveryPayment .ztdp-panel { padding: 20px; }
    #ztDeliveryPayment .ztdp-panel > h2 { font-size: 21px; }
    #ztDeliveryPayment .ztdp-methods__list li { gap: 18px; }
    #ztDeliveryPayment .ztdp-methods__list li > img { width: 68px; height: 68px; flex-basis: 68px; }
    #ztDeliveryPayment .ztdp-carriers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ztDeliveryPayment .ztdp-benefits__grid { grid-template-columns: 1fr; }
    #ztDeliveryPayment .ztdp-times table,
    #ztDeliveryPayment .ztdp-times thead,
    #ztDeliveryPayment .ztdp-times tbody,
    #ztDeliveryPayment .ztdp-times tr,
    #ztDeliveryPayment .ztdp-times th,
    #ztDeliveryPayment .ztdp-times td { display: block; }
    #ztDeliveryPayment .ztdp-times thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #ztDeliveryPayment .ztdp-times tr { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--ztdp-border); border-radius: 10px; }
    #ztDeliveryPayment .ztdp-times tbody th { font-size: 15px; }
    #ztDeliveryPayment .ztdp-times td { display: grid; grid-template-columns: 72px 1fr; gap: 8px; border-width: 1px 0 0; }
    #ztDeliveryPayment .ztdp-times td::before { color: #168cb5; font-weight: 800; content: attr(data-label); }
}

@media (prefers-reduced-motion: reduce) {
    #ztDeliveryPayment * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}