/* ========== Delivery & Payment ========== */
.dp-section {
  background-color: #BABABA;
  padding: 60px 0;
}
.dp-container {
  max-width: 1200px;      /* как в макете */
  padding: 0 40px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dp-title {
  width: auto;
  background-color: #FF6600;
  color: #000;
  font-family: 'Balhattan', sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  padding: 8px 20px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  margin-bottom: 40px;
  display: inline-block;          /* ширина по контенту */
  min-width: 280px;               /* чтобы не сжимались слишком сильно */
  max-width: 80%;                 /* запас, чтобы не убегали из-за длинных слов */
}
.dp-delivery .dp-title { text-align: right; }
.dp-payment  .dp-title { text-align: right; }


.dp-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.dp-payment .dp-content {
  flex-direction: row;
}

.dp-text {
  background: #d9d9d9;
  padding: 25px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  box-sizing: border-box;
}
.dp-delivery .dp-text { margin-left: auto; }
.dp-payment  .dp-text { margin-right: auto; }

.dp-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: block;
}

.dp-logos {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  margin: 20px 0;
}
.dp-logos img {
  max-height: 50px;
  object-fit: contain;
}

.dp-address {
  color: #FF6600;
  font-weight: bold;
  margin: 10px 0;
}

.dp-content > .dp-image,
.dp-content > .dp-text {
  flex: 0 0 50%;          /* делим пополам */
  max-width: 600px;       /* чтобы не выпирали на широких экранах */
}

.dp-delivery .dp-title{
  margin-left:auto;     /* контент вправо  */
  margin-right:0px;   /* уезжаем на величину внутреннего паддинга .dp-container */
}
.dp-payment .dp-title{
  margin-left:auto;    /* контент влево   */
  margin-left:0px;    /* аналогично –-40 px */
}

/* 2. Картинка и текст в каждой секции одинаковой высоты */
.dp-content{ align-items:stretch; }      /* колонки тянутся на полный рост */
.dp-image{ display:flex; }               /* превращаем обёртку в flex-контейнер */
.dp-image img{
  flex:1 1 auto;                         /* <img> занимает всю высоту родителя */
  width:100%; height:100%; object-fit:cover;
}
.dp-text{
  display:flex; flex-direction:column;  /* текстовый блок тоже flex */
  justify-content:center;               /* выравниваем абзацы по центру высоты */
}

/* =========================================================
   MOBILE (≤ 600 px) – окончательная правка
   =========================================================*/
@media (max-width:768px){

  /* 1.  Оранжевая плашка – 100 % ширины контейнера, центровка текста */
  .dp-title{
    margin: 0 0 24px;
    width:calc(100% - 40px) !important;
    text-align: center !important;
    /* полностью снимаем любые лимиты */
    max-width:none !important;
    min-width:0     !important;
  }

  /* 2.  Всё содержимое секций идёт В СТОЛБИК: картинка ⇒ текст */
  .dp-content{
    display:flex;
    flex-direction:column;     /* вертикально */
    gap:20px;                  /* одинаковые промежутки */
    align-items:center;        /* чтобы картинка была по центру */
  }

  /* 3.  Картинка: ширина 100 % «колонки», но не больше 320 px.
         Радиус 16 px, как в макете; можно поставить 8 px или 50 % */
  .dp-image{
    width:100%;
    max-width:320px;
    margin:0 auto;
  }
  .dp-image img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:16px;
    box-shadow:none;
  }

  /* 4.  Текстовая карточка – на всю ширину, чуть меньше шрифт */
  .dp-text{
    width:100%;
    font-size:14px;
    line-height:1.4;
    padding:18px;
  }

  /* 5.  Буллет-список компактно */
  .dp-text ul{margin:0 0 0 16px;}
  .dp-text li{margin-bottom:6px;}

  .dp-logos{
    flex-direction:column;     /* в столбик */
    align-items:flex-start;    /* прижаты влево */
    gap:8px;                   /* равные отступы */
    margin:16px 0 0;           /* чуть «воздуха» сверху */
  }
  .dp-logos img{max-height:42px;}   /* можно подогнать по вкусу */

  /* --- 2.  Блок «Оплата»: фото над текстом --- */
  .dp-payment .dp-content{
    flex-direction:column;     /* один столбик */
    gap:20px;
    align-items:center;
  }

  /* 2.a  картинка — на всю ширину колонки, скругление 16 px */
  .dp-payment .dp-image{
    width:100%;
    max-width:320px;           /* ограничение по макету */
  }
  .dp-payment .dp-image img{
    width:100%;
    aspect-ratio:1/1;          /* квадрат; если нужна «таблетка» — уберите */
    border-radius:16px;
    object-fit:cover;
    box-shadow:none;
  }

  /* 2.b  текстовая карточка — после изображения */
  .dp-payment .dp-text{
    width:100%;
    font-size:14px;
    line-height:1.4;
    padding:18px;
  }


}