/* Страница «Доставка и оплата товаров». Figma: Dostavka/pc 611:5054 (1920×2606),
   Dostavka/mb 611:5371 (390×4465).
   Секция идёт сразу под шапкой (pc 89, mb 82) и кончается там, где начинается
   «Обратите внимание» (pc 1401, mb 1579).
   Страница переведена в вертикальный flex-поток: H1 → H2 раздела → список/абзацы → блок оплаты.
   Все зазоры сняты замером фактических границ макета и перенесены в margin/gap.
   Блобы фона и кроп логотипов остаются на абсолютном позиционировании (допустимый абсолют). */
.delivery {
  position: relative;
  min-height: 1312px;            /* 1401 − 89, не фиксированная height, чтобы расти при рефлоу */
}

/* Блоб Ellipse 15 (611:5055): 1880×1472 на (20, 359) → центр (960, 1095).
   SVG 2680×2272, центр (1340, 1136) — та же геометрия, что на FAQ.
   Декоративный блоб остаётся абсолютным. */
.delivery__blob {
  left: 50%;
  top: -130px;                   /* (1095 − 89) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

/* Блоб mb-фрейма (611:5378) — только в mb */
.delivery__blob--mb {
  display: none;
}

/* Колонка контента: ограничение max-width вместо жёстких ширин на каждом элементе,
   чтобы текст переносился по границе колонки и отодвигал соседей снизу. */
.delivery__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 994px;
}

/* H1 (611:5057): 261/223 319×86, Rubik Bold 36, жёсткий перенос после «Доставка».
   Отступ сверху: H1 на 134 от верха секции минус высота крошек 13.33 → margin-top 120.67px. */
.delivery__h1 {
  margin: 120.67px 0 0 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Заголовки блоков: Rubik Bold 32, ширина по колонке */
.delivery__h2 {
  width: 100%;
  margin: 0;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--black);
}

/* Первый заголовок (611:5064): зазор от H1 72.67px (292 − (134 + 85.33)),
   зазор до списка 31.33px (398 − (292 + 74.67)).
   В Figma переопределён на lowercase, первая буква — заглавная. */
.delivery__h2--1 {
  margin-top: 72.67px;
  margin-bottom: 31.33px;
  text-transform: lowercase;
}

.delivery__h2--1::first-letter {
  text-transform: uppercase;
}

/* Заголовок «Оплата при получении» (611:5067): зазор от списка 72px (650 − 578),
   зазор до первого абзаца 30.67px (718 − (650 + 37.33)). */
.delivery__h2--2 {
  margin-top: 72px;
  margin-bottom: 30.67px;
}

/* Заголовок «Оплата на сайте» (611:5070): зазор от абзаца p2 72px (906 − (786 + 48)),
   зазор до абзаца p3 30.67px (974 − (906 + 37.33)). */
.delivery__h2--3 {
  margin-top: 72px;
  margin-bottom: 30.67px;
}

/* Список (611:5071): отступ маркера 27px задаётся padding-left списка,
   пункты идут колонкой с gap: 20px. Ширина по колонке. */
.delivery__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0 0 0 27px;
  box-sizing: border-box;
}

/* Пункты списка — обычные li в потоке. Маркер через ::before из css/dot-list.css (left: -17px),
   поэтому li нужен position: relative. */
.delivery__list li {
  position: relative;
  width: 100%;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Абзацы (611:5082..5091): в pc стоят на x 271 против x 261 у заголовков
   (дизайнерский фрейм на 261 с padding 10) → margin-left: 10px.
   Между соседними абзацами зазор 20px. */
.delivery__p {
  width: 100%;
  margin: 0 0 20px 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* У последних абзацев в группе нижний margin нулевой — зазор задаёт следующий заголовок/блок */
.delivery__p--2 {
  margin-bottom: 0;
}

.delivery__p--5 {
  margin-bottom: 0;
}

/* Ряд логотипов платёжных систем: зазор от p5 48px (1254 − (1086 + 120)),
   сдвиг на сетку абзацев 10px. Вертикальное выравнивание по центру. */
.delivery__pay-row {
  display: flex;
  align-items: center;
  margin-top: 48px;
  margin-left: 10px;
}

.delivery__pay {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.delivery__pay img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* mir (611:5094): 271/1343 180×58; картинка кропнута — w 106.69%, h 99.33%, left −5.56% */
.delivery__pay--mir {
  width: 180px;
  height: 58px;
}

.delivery__pay--mir img {
  width: 106.69%;
  height: 99.33%;
  margin-left: -5.56%;
}

/* visa (611:5092): 478/1348 144×47; зазор от mir 27px (478 − (271 + 180)) */
.delivery__pay--visa {
  margin-left: 27px;
  width: 144px;
  height: 47px;
}

/* ms (611:5093): 669/1343 74.189×57.611; зазор от visa 47px (669 − (478 + 144)) */
.delivery__pay--ms {
  margin-left: 47px;
  width: 74.189px;
  height: 57.611px;
}

@media (max-width: 1199px) {
  .delivery {
    min-height: 1497px;          /* 1579 − 82 */
    padding-bottom: 50.72px;     /* отступ снизу после логотипов оплаты (1497 − 1446.28) */
  }

  .delivery__blob {
    display: none;
  }

  /* Блоб Ellipse 14 (611:5378): 390×5946 на (0, 234) → центр (195, 3207);
     тот же ассет и та же геометрия, что на FAQ и странице товара */
  .delivery__blob--mb {
    display: block;
    left: 50%;
    top: -248px;                 /* (3207 − 82) − 3373 */
    width: 1190px;
    height: 6746px;
    margin-left: -595px;
  }

  /* В mb сетка контента начинается на x 28 при контейнере x 14 → margin-left 14px.
     Ширина колонки текстов 275px (611:5382, 611:5391). */
  .delivery__col {
    margin-left: 14px;
    max-width: 275px;
  }

  /* H1 (611:5377): 28/157 249×66, Bold 28. Отступ сверху: 75 − 14 = 61px. */
  .delivery__h1 {
    margin-top: 61px;
    font-size: 28px;
  }

  /* Заголовки блоков в mb: Bold 18, ширина 220px для корректных переносов строк */
  .delivery__h2 {
    max-width: 220px;
    font-size: 18px;
  }

  /* В mb первый заголовок без lowercase. Зазор от H1 40px (181 − 141), до списка 17px (264 − 247). */
  .delivery__h2--1 {
    margin-top: 40px;
    margin-bottom: 17px;
    text-transform: none;
  }

  /* Зазор от списка 40px (584 − 544), до p1 19px (625 − 606). */
  .delivery__h2--2 {
    margin-top: 40px;
    margin-bottom: 19px;
  }

  /* Зазор от p2 50px (895 − 845), до p3 19px (936 − 917). */
  .delivery__h2--3 {
    margin-top: 50px;
    margin-bottom: 19px;
  }

  /* Список в mb: отступ маркера 21px (28/336, боксы с padding 10), текст 254px */
  .delivery__list {
    padding: 0 0 0 21px;
  }

  .delivery__list li {
    font-size: 14px;
    line-height: 20px;
  }

  /* В mb все тексты на единой сетке x 28, поэтому margin-left: 0. Между абзацами 20px. */
  .delivery__p {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 20px;
  }

  .delivery__p--2 {
    margin-bottom: 0;
  }

  .delivery__p--5 {
    margin-bottom: 0;
  }

  /* Логотипы в mb: зазор от p5 30px (1406 − 1376) */
  .delivery__pay-row {
    margin-top: 30px;
    margin-left: 0;
  }

  .delivery__pay--mir {
    width: 125.035px;
    height: 40.289px;
  }

  /* Зазор от mir 18.75px: 157.789 − (14 + 125.035) */
  .delivery__pay--visa {
    margin-left: 18.75px;
    width: 100.423px;
    height: 32.52px;
  }

  /* Зазор от visa 32.25px: 304.465 − (171.789 + 100.423) */
  .delivery__pay--ms {
    margin-left: 32.25px;
    width: 51.535px;
    height: 40.019px;
  }
}