/* «Доставка, оплата, гарантия» — страница /info/delivery-payment/ и вкладка «Доставка»
   в карточке товара. 10.09.2026 — карточки вместо сплошного текста; 11.09.2026 — шаги оплаты,
   блок гарантии, иконки и появление по мере прокрутки.

   Цвета — только с сайта (см. токены): рамка #e3ecf8, подсветка #bcd3f4, фоны #fbfcfe/#f4f8fd/#f5f9ff,
   плашки #e3eeff, акцент #365edc, ссылки и иконки #1457c8, текст #0f2340/#22385a/#5b6b82.

   ПРО ДВИЖЕНИЕ. У владельца в Windows выключены «эффекты анимации», и всё, что лежит
   в @media (prefers-reduced-motion: no-preference), он просто не видит. Его правило —
   анимации включены всегда, поэтому здесь движение безусловное.
   При этом без JavaScript (и для поисковых роботов) страница видна целиком сразу:
   прятать блоки до появления разрешено, только когда скрипт поставил на корень .dlv-js. */

.dlv{max-width:1000px;--dlv-ease:cubic-bezier(.22,.61,.36,1);--dlv-spring:cubic-bezier(.34,1.56,.64,1)}
.dlv__lead{font-size:16px;line-height:1.62;color:#5b6b82;margin:0 0 22px;max-width:70ch}

.dlv__h{font-weight:700;font-size:21px;line-height:1.3;color:#0f2340;
  margin:36px 0 16px;display:flex;align-items:center;gap:10px}
.dlv__h::before{content:"";flex:0 0 auto;width:4px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,#4c9be8,#365edc)}
.dlv__h--sm{font-size:17px;margin:26px 0 12px}
.dlv__h--sm::before{height:18px}

/* ---------- карточки доставки ---------- */
.dlv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}
.dlv__card{position:relative;border:1px solid #e3ecf8;border-radius:14px;padding:18px 20px;
  background:linear-gradient(180deg,#fbfcfe,#f4f8fd);
  transition:border-color .28s var(--dlv-ease),box-shadow .28s var(--dlv-ease),transform .28s var(--dlv-ease)}
/* во вкладках карточки вместо h3 — div.dlv__kicker (5 одинаковых h3 на каждой из 9 тыс. карточек) */
.dlv__card h3,.dlv__card .dlv__kicker{font-weight:600;font-size:12.5px;line-height:1.35;color:#66788f;margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.06em}
.dlv__card p{margin:0;font-size:14px;line-height:1.6;color:#5b6b82}
.dlv__big{display:block;font-weight:700;font-size:17px;line-height:1.25;color:#0f2340;margin-bottom:7px}
.dlv__ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:#e3eeff;color:#1457c8;margin-bottom:12px;
  transition:transform .35s var(--dlv-spring),background-color .28s var(--dlv-ease)}
.dlv__ico svg{width:22px;height:22px;display:block}

/* ---------- транспортные компании ---------- */
.dlv__tk{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.dlv__tk div{flex:1 1 150px;border:1px solid #e3ecf8;border-radius:12px;padding:11px 14px;background:#fff;
  text-align:center;transition:border-color .28s var(--dlv-ease),transform .28s var(--dlv-ease)}
.dlv__tk b{display:block;font-weight:600;font-size:14px;line-height:1.3;color:#22385a;margin-bottom:2px}
.dlv__tk span{font-size:12.5px;color:#8296ad;white-space:nowrap}

.dlv__sub{font-size:14.5px;color:#22385a;font-weight:600;margin:0 0 8px}
.dlv__sub--plain{font-weight:400;color:#5b6b82;margin-bottom:16px}

.dlv__list{margin:0 0 14px;padding-left:0;list-style:none}
.dlv__list li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;line-height:1.6;
  color:#5b6b82;border-bottom:1px solid #f0f4fa}
.dlv__list li:last-child{border-bottom:0}
/* тема Aspro ставит пунктам списков свой символ «—» (li::before) и перебивает наш кружок:
   без !important внутри кружка остаётся тире, и маркер выглядит как «•_» */
.dlv .dlv__list li::before{content:""!important;position:absolute;left:4px;top:16px;width:6px;height:6px;
  border-radius:50%;background:#bcd3f4}

.dlv__note{display:flex;gap:11px;align-items:flex-start;border:1px solid #e3ecf8;border-radius:12px;
  background:#fbfcfe;padding:13px 16px;font-size:14px;line-height:1.6;color:#5b6b82;margin:6px 0 0}
.dlv__note b{color:#22385a;font-weight:600}
/* номер телефона не рвём посередине («+7 495 / 134-45-15» на телефоне) */
.dlv a[href^="tel:"]{white-space:nowrap}
/* во вкладке карточки плашка срока стоит первой, сразу над карточками — нужен зазор */
.dlv--tab > .dlv__note:first-child{margin:0 0 14px}
.dlv__mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#e3eeff;color:#1457c8;font-weight:700;font-size:13px;line-height:1}

/* ---------- способы оплаты: две карточки в ряд ---------- */
.dlv__cards--duo{grid-template-columns:repeat(2,1fr);margin-bottom:22px}

/* ---------- шаги оплаты ---------- */
.dlv__steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  list-style:none;margin:0 0 16px;padding:0;counter-reset:none}
/* линия, связывающая шаги: проходит через центры номеров и прорисовывается при появлении */
.dlv__steps::before{content:"";position:absolute;left:16.66%;right:16.66%;top:39px;
  height:2px;border-radius:2px;background:linear-gradient(90deg,#bcd3f4,#365edc 55%,#bcd3f4);
  transform-origin:left center}
/* шаги — лента без рамок: в рамках белые карточки прятали линию, и от неё оставались
   обрывки в промежутках. Белые кружки номеров сами перекрывают линию — получаются «станции» */
.dlv__step{position:relative;border-radius:14px;padding:18px 14px 6px;text-align:center;
  transition:transform .28s var(--dlv-ease)}
/* тема ставит пунктам списков отступ «li + li {margin-top:8px}» — в сетке он сдвигал
   второй и третий шаг на 8 px ниже первого, и линия проходила мимо центра номеров */
.dlv .dlv__steps > .dlv__step{margin:0}
.dlv__stepnum{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid #bcd3f4;color:#1457c8;
  font-weight:700;font-size:16px;margin:0 auto 12px;box-shadow:0 0 0 6px #fff;
  transition:background-color .28s var(--dlv-ease),color .28s var(--dlv-ease),border-color .28s var(--dlv-ease)}
.dlv__step--key .dlv__stepnum{background:#365edc;border-color:#365edc;color:#fff}
.dlv__step b{display:block;font-weight:700;font-size:15.5px;line-height:1.3;color:#0f2340;margin-bottom:6px}
.dlv__step p{margin:0;font-size:13.5px;line-height:1.55;color:#5b6b82}

/* ---------- гарантия ---------- */
.dlv__guar{display:flex;gap:18px;align-items:flex-start;border:1px solid #e3ecf8;border-radius:14px;
  background:linear-gradient(180deg,#fbfcfe,#f4f8fd);padding:20px 22px}
.dlv__shield{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:16px;background:#e3eeff;color:#1457c8}
.dlv__shield svg{width:30px;height:30px;display:block;overflow:visible}
.dlv__shield .dlv__tick{stroke-dasharray:22;stroke-dashoffset:0}
.dlv__guar b{display:block;font-weight:700;font-size:16.5px;line-height:1.3;color:#0f2340;margin-bottom:6px}
.dlv__guar p{margin:0;font-size:14.5px;line-height:1.62;color:#5b6b82;max-width:72ch}

.dlv__warn{border:1px solid #f2dede;background:#fdf6f6;border-radius:12px;padding:14px 18px;margin-top:12px}
.dlv__warn>b{display:block;color:#8c3b34;font-weight:600;font-size:14.5px;margin-bottom:8px}
.dlv__warn ul{margin:0;padding-left:18px;font-size:14px;line-height:1.65;color:#6b7c92}

.dlv__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:#1457c8;font-weight:600;
  font-size:14px;text-decoration:none;border-bottom:1px solid rgba(20,87,200,.25);
  transition:border-color .2s var(--dlv-ease),gap .2s var(--dlv-ease)}

/* ---------- отклик на наведение: только там, где есть мышь ---------- */
@media (hover:hover) and (pointer:fine){
  .dlv__card:hover{border-color:#bcd3f4;box-shadow:0 6px 20px -12px rgba(54,94,220,.85);
    transform:translateY(-2px)}
  .dlv__step:hover{transform:translateY(-2px)}
  .dlv__card:hover .dlv__ico{transform:translateY(-2px) rotate(-4deg)}
  .dlv__tk div:hover{border-color:#bcd3f4;transform:translateY(-2px)}
  .dlv__step:hover .dlv__stepnum{border-color:#365edc}
  .dlv__more:hover{border-color:#1457c8;gap:9px}
}

/* ---------- появление по мере прокрутки (безусловно, см. шапку) ---------- */
@media all{
  .dlv-js .dlv-rv{opacity:0;transform:translateY(12px)}
  .dlv-js .dlv-rv.is-in{opacity:1;transform:none;
    transition:opacity .6s var(--dlv-ease),transform .6s var(--dlv-ease);
    transition-delay:calc(var(--i,0) * 80ms)}

  /* линия между шагами оплаты прорисовывается слева направо */
  .dlv-js .dlv__steps::before{transform:scaleX(0)}
  .dlv-js .dlv__steps.is-in::before{transform:scaleX(1);transition:transform .9s var(--dlv-ease) .25s}
  /* номер ключевого шага («Предоплата 100%») отзывается пружинкой, когда до него дошла линия */
  .dlv-js .dlv__steps.is-in .dlv__step--key .dlv__stepnum{animation:dlvPop .5s var(--dlv-spring) .75s both}

  /* галочка в щите гарантии прорисовывается, когда блок появился */
  .dlv-js .dlv__guar .dlv__tick{stroke-dashoffset:22}
  .dlv-js .dlv__guar.is-in .dlv__tick{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--dlv-ease) .35s}
  .dlv-js .dlv__guar.is-in .dlv__shield{animation:dlvPop .5s var(--dlv-spring) .1s both}

  /* иконки способов оплаты отзываются пружинкой вслед за появлением карточки */
  .dlv-js .dlv__card--pay.is-in .dlv__ico{animation:dlvPop .5s var(--dlv-spring) calc(.3s + var(--i,0) * 80ms) both}

  @keyframes dlvPop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
}

@media (max-width:860px){
  .dlv__cards,.dlv__steps{grid-template-columns:1fr}
  .dlv__steps::before{left:38px;right:auto;top:32px;bottom:32px;width:2px;height:auto;
    background:linear-gradient(180deg,#bcd3f4,#365edc 55%,#bcd3f4);transform-origin:center top}
  .dlv-js .dlv__steps::before{transform:scaleY(0)}
  .dlv-js .dlv__steps.is-in::before{transform:scaleY(1)}
  .dlv__step{display:grid;grid-template-columns:42px 1fr;gap:4px 14px;text-align:left;align-items:start;
    padding:10px 0 10px 18px}
  .dlv__stepnum{grid-row:1 / span 2;margin:0}
}
/* две короткие карточки оплаты помещаются в ряд и на планшете */
@media (max-width:860px) and (min-width:560px){
  .dlv__cards--duo{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:479px){
  .dlv__h{font-size:19px}
  .dlv__guar{flex-direction:column;gap:12px}
}