

/* Start:/local/templates/ekspopipe/sections/delivery/style.css?17917936586341*/
/* ==========================================================================
   Страница «Доставка и оплата» (макет «Доставка и оплата»: 1920 / 1440 / 768 / 375).
   Стили секции вне слоёв — перебивают ui-блоки.
   ========================================================================== */

.delivery {
  --delivery-pad-top:    20px;
  --delivery-pad-bottom: 80px;
  --delivery-gap:        60px;  /* между вступлением и блоками   */
  --delivery-head-gap:   28px;  /* заголовок → вступительный текст */
  --delivery-lead-w:     1318px;
  --delivery-block-gap:  24px;  /* заголовок блока → карточки    */
  --delivery-grid-gap:   12px;

  --dc-pad:          24px;
  --dc-radius:       20px;
  --dc-gap:          32px;  /* описание → таблица             */
  --dc-body-gap:     16px;  /* заголовок карточки → текст     */
  --dc-title-fs:     24px;
  --dc-title-s-fs:   24px;  /* заголовок карточки оплаты      */
  --dc-text-fs:      20px;
  --dc-subtitle-fs:  20px;
  --dc-row-pad:      16px;
  --dc-row-fs:       18px;
  --dc-row-bg:       #F6F7F8;

  padding: var(--delivery-pad-top) 0 var(--delivery-pad-bottom);
  background: var(--c-bg);
}

.delivery__inner {
  display: flex;
  flex-direction: column;
  gap: var(--delivery-gap);
}

.delivery__head {
  display: flex;
  flex-direction: column;
  gap: var(--delivery-head-gap);
}

.delivery__title { color: var(--c-black); }

.delivery__lead {
  max-width: var(--delivery-lead-w);
  color: var(--c-text);
  font-size: var(--fs-body-l);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.delivery__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--delivery-block-gap);
}

.delivery__heading {
  color: var(--c-primary-black);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.delivery__grid {
  display: grid;
  gap: var(--delivery-grid-gap);
  width: 100%;
}

.delivery__grid--receive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delivery__grid--payment { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Карточка ------------------------------------------------------------- */
.delivery-card {
  display: flex;
  flex-direction: column;
  gap: var(--dc-gap);
  padding: var(--dc-pad);
  border-radius: var(--dc-radius);
  background: var(--c-white);
  overflow-wrap: break-word;
}

.delivery-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--dc-body-gap);
}

.delivery-card__title {
  color: var(--c-black);
  font-size: var(--dc-title-fs);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.delivery-card--small .delivery-card__title { font-size: var(--dc-title-s-fs); }

.delivery-card__text {
  color: var(--c-text);
  font-size: var(--dc-text-fs);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* Таблица прижата к низу: у соседних карточек разная высота описания */
.delivery-card__table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  color: var(--c-black);
  letter-spacing: var(--ls-base);
}

.delivery-card__subtitle {
  font-size: var(--dc-subtitle-fs);
  font-weight: 500;
  line-height: var(--lh-tight);
}

.delivery-card__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.delivery-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--dc-row-pad);
  border-radius: 8px;
  background: var(--dc-row-bg);
  font-size: var(--dc-row-fs);
}

.delivery-card__label {
  flex: 1 1 0;
  min-width: 0;
  line-height: var(--lh-base);
}

.delivery-card__value {
  flex: 0 0 auto;
  font-weight: 500;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* --- Laptop 1440 ---------------------------------------------------------- */
@media (max-width: 1727px) {
  .delivery {
    --delivery-pad-top:    14px;
    --delivery-pad-bottom: 60px;
    --delivery-gap:        40px;
    --delivery-head-gap:   20px;
    --delivery-lead-w:     calc(50% - 10px);
    --delivery-block-gap:  20px;

    --dc-pad:         20px;
    --dc-radius:      14px;
    --dc-gap:         28px;
    --dc-body-gap:    12px;
    --dc-title-s-fs:  20px;
    --dc-text-fs:     18px;
    --dc-subtitle-fs: 18px;
    --dc-row-pad:     14px;
    --dc-row-fs:      16px;
  }

  .delivery-card--small { --dc-body-gap: 16px; }
}

/* --- Tablet 768 ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .delivery {
    --delivery-pad-top: 6px;
    --delivery-gap:     36px;
    --delivery-lead-w:  none;

    --dc-title-fs:   20px;
    --dc-title-s-fs: 18px;
    --dc-text-fs:    16px;
  }

  .delivery-card--small { --dc-body-gap: 12px; }

  .delivery__grid--receive {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* Ряды одной высоты, как в макете */
  .delivery__grid--payment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}

/* --- Mobile 375 ----------------------------------------------------------- */
@media (max-width: 767px) {
  .delivery {
    --delivery-pad-top:    12px;
    --delivery-pad-bottom: 48px;
    --delivery-gap:        24px;
    --delivery-head-gap:   12px;
    --delivery-block-gap:  16px;
    --delivery-grid-gap:   10px;

    --dc-pad:         14px;
    --dc-gap:         24px;
    --dc-body-gap:    8px;
    --dc-title-fs:    16px;
    --dc-title-s-fs:  14px;
    --dc-text-fs:     14px;
    --dc-subtitle-fs: 14px;
    --dc-row-fs:      14px;
  }

  .delivery-card--small {
    --dc-body-gap: 8px;
    padding-bottom: 20px;
  }

  .delivery__grid--receive { gap: var(--delivery-grid-gap); }
  .delivery__grid--payment {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* Строка таблицы: значение под подписью */
  .delivery-card__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .delivery-card__label { flex: none; }
  .delivery-card__value { white-space: normal; }
}

/* End */
/* /local/templates/ekspopipe/sections/delivery/style.css?17917936586341 */
