.delivery {
  padding-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.delivery-title {
  font-family: var(--font-body-regular);
  font-size: clamp(1rem, 0.7625rem + 1.1875vw, 2.1875rem);
  line-height: 140%;
  margin-bottom: clamp(1.375rem, 1.275rem + 0.5vw, 1.875rem);
}

/* ============================================================
   HIGHLIGHTS STRIP — Безкоштовно / Нова пошта / Самовивіз
   ============================================================ */
.delivery-highlights__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.275rem + 2.375vw, 3.125rem);
  margin-top: clamp(1.875rem, 1rem + 4.375vw, 6.25rem);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-m);
  padding: clamp(1.75rem, 1.6rem + 0.75vw, 2.5rem)
    clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
}

.delivery-highlights__item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);
}

.delivery-highlights__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 1.95rem + 7.75vw, 11.25rem);
  height: clamp(3.5rem, 1.95rem + 7.75vw, 11.25rem);
  border-radius: 50%;
  background-color: var(--color-bg);
}

.delivery-highlights__icon img {
  object-fit: contain;
}

.delivery-highlights__title {
  font-family: var(--font-heading-bold);
  font-size: clamp(1.1875rem, 0.925rem + 1.3125vw, 2.5rem);
  line-height: 105%;
}

.delivery-highlights__desc {
  margin-top: clamp(0.25rem, 0.175rem + 0.375vw, 0.625rem);
  font-family: var(--font-body-regular);
  font-size: clamp(0.875rem, 0.725rem + 0.75vw, 1.625rem);
  line-height: 125%;
  color: var(--color-primary-delivery);
}

@media (min-width: 768px) {
  .delivery-highlights__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .delivery-highlights__item:first-child {
    border-right: 1px solid var(--color-border);
    padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  }
}

@media (min-width: 1600px) {
  .delivery-highlights__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .delivery-highlights__item:not(:last-child) {
    border-right: 1px solid var(--color-border);
    padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  }
}

/* ============================================================
   METHODS — Способи отримання
   ============================================================ */
.delivery-methods {
  padding-top: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

.delivery-methods__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: clamp(1.3125rem, 0.95rem + 1.8125vw, 3.125rem);
}

.delivery-methods__card {
  min-width: 0;
  background-color: var(--color-payment-bg);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem);
}

.delivery-methods__head {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.875rem + 1.875vw, 3.125rem);
  margin-bottom: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
}

.delivery-methods__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(4rem, 2.55rem + 7.25vw, 11.25rem);
  height: clamp(4rem, 2.55rem + 7.25vw, 11.25rem);
  border-radius: 50%;
  background-color: var(--color-surface-alt);
}

.delivery-methods__icon img {
  object-fit: contain;
}

.delivery-methods__title {
  font-family: var(--font-heading-bold);
  font-size: clamp(1.375rem, 1.15rem + 1.125vw, 2.5rem);
  line-height: 1.15;
}

.delivery-methods__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.delivery-methods__points li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-body-regular);
  font-size: clamp(0.9375rem, 0.825rem + 0.5625vw, 1.5rem);
  line-height: 1.35;
  color: var(--color-primary-soft);
}

.delivery-methods__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-gold);
}

@media (min-width: 768px) {
  .delivery-methods__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .delivery-methods__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .delivery-methods__head {
    gap: clamp(0.625rem, 0.125rem + 2.5vw, 3.125rem);
  }
  .delivery-methods__icon {
    width: clamp(0.625rem, -1.5rem + 10.625vw, 11.25rem);
    height: clamp(0.625rem, -1.5rem + 10.625vw, 11.25rem);
  }
}

/* ============================================================
   CONDITIONS — Умови доставки у вашому місті
   ============================================================ */
.delivery-conditions {
  padding-top: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

.delivery-conditions__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 0.35rem + 0.75vw, 1rem);
  margin-top: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 1rem + 1.25vw, 2rem);
}

.delivery-conditions__tab {
  padding: clamp(0.75rem, 0.7rem + 0.25vw, 1rem)
    clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-soft);
  font-family: var(--font-body-semibold);
  font-size: clamp(0.9375rem, 0.8rem + 0.6875vw, 1.625rem);
  line-height: 1;
  color: var(--color-primary);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.delivery-conditions__tab.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

.delivery-conditions__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.625rem, 1.45rem + 0.875vw, 2.5rem);
  background-color: var(--color-delivery-map-fone);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem);
}

.delivery-conditions__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
}

.delivery-conditions__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
}

.delivery-conditions__icon {
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: clamp(2.75rem, 2.175rem + 2.875vw, 5.625rem);
  height: clamp(1.8125rem, 1.425rem + 1.9375vw, 3.75rem);
}

.delivery-conditions__icon img {
  object-fit: contain;
}

.delivery-conditions__row-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--font-body-bold);
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
  line-height: clamp(1.5625rem, 1.4rem + 0.8125vw, 2.375rem);
}

.delivery-conditions__row-content {
  grid-column: 2;
  grid-row: 2;
}

.delivery-conditions__row-text {
  font-family: var(--font-body-regular);
  font-size: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
  line-height: 1.3;
  color: var(--color-primary-delivery);
}

.delivery-conditions__row-text + .delivery-conditions__row-text {
  margin-top: 2px;
}

/* Map — decorative delivery-zone placeholder */
.delivery-conditions__map {
  position: relative;
  min-height: clamp(11.25rem, 7.125rem + 20.625vw, 31.875rem);
  border-radius: var(--radius-s);
  background-color: var(--color-surface-alt);
  overflow: hidden;
}

.delivery-conditions__map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.delivery-conditions__map.is-map-ready .delivery-conditions__map-zone,
.delivery-conditions__map.is-map-ready .delivery-conditions__map-pin {
  display: none;
}

.delivery-conditions__map-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 64%;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--color-primary-soft);
  border-radius: 50%;
}

.delivery-conditions__map-pin {
  position: absolute;
  top: 45%;
  left: 60%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
  height: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
  border-radius: 50%;
  background-color: var(--color-primary);
}

.delivery-conditions__map-pin img {
  object-fit: contain;
}

.delivery-conditions__note {
  margin-top: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
  font-family: var(--font-body-regular);
  font-size: clamp(0.8125rem, 0.775rem + 0.1875vw, 1rem);
  line-height: 1.5;
  color: var(--color-primary-soft);
}

@media (min-width: 961px) {
  .delivery-conditions__panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: start;
  }
}