/* ============================================================
   Оформление подписки (/podpiska/) — порт SubscribeConfig.jsx.
   Скоуп .pd-sbc внутри .pd-sets-rb (токены дизайн-системы).
   Блоки 06-09 стилизует checkout-redesign.css (классы pd-checkout-*).
   ============================================================ */

.pd-sbc {
    --sbc-green: var(--green, #1F5B42);
    --sbc-green-700: var(--green-700, #164230);
    --sbc-tint: var(--green-tint, #E3EDE7);
    --sbc-tint-2: var(--green-tint-2, #C8DDD2);
    --sbc-cream: var(--cream, #F5EEE2);
    --sbc-cream-deep: var(--cream-deep, #EADFCD);
    --sbc-line: var(--line, #E7E1D6);
    --sbc-ink: var(--ink, #211F1A);
    --sbc-muted: var(--muted, #6E695E);
    --sbc-surface: #fff;
    --sbc-warm: var(--warm-600, #CC7120);
    --sbc-warm-tint: var(--warm-tint, #FBE7D2);
}

/* Панели/строки прячем атрибутом hidden, а собственный display:flex/grid
   перебивает [hidden] из UA-стилей — поэтому гасим явно по всему скоупу.
   Касается переключателя оплаты, строки доставки в сводке и блоков чекаута. */
.pd-sbc [hidden] { display: none !important; }

/* Ширина контента — общий .pd-sets-rb__wrap из sets-rebrand.css.
   Герой (крошки/надзаголовок/H1/лид) — тоже классы .pd-sets-rb__*, как на «Готовых наборах». */
.pd-sbc-wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ---------- Сетка ---------- */
.pd-sbc-main { padding: 30px 0 70px; }
.pd-sbc-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; }
.pd-sbc-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-sbc-step { display: flex; flex-direction: column; gap: 18px; }
.pd-sbc-step[hidden] { display: none; }

/* ---------- Карточка блока ---------- */
.pd-sbc-card {
    background: var(--sbc-surface); border: 1px solid var(--sbc-line);
    border-radius: 18px; padding: 24px;
}
.pd-sbc-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pd-sbc-card__headin { display: flex; gap: 14px; align-items: flex-start; }
.pd-sbc-card__n {
    font-family: var(--display, 'Nunito', sans-serif); font-weight: 800;
    font-size: 1.05rem; color: var(--sbc-tint-2); line-height: 1.3; flex: 0 0 auto;
}
.pd-sbc-card__t { font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; margin: 0; }
.pd-sbc-card__hint { margin: 3px 0 0; color: var(--sbc-muted); font-size: .88rem; line-height: 1.45; }

/* ---------- 01 объём ---------- */
.pd-sbc-vol { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pd-sbc-stepper { display: flex; align-items: center; gap: 4px; background: var(--sbc-cream-deep); border-radius: 99px; padding: 5px; }
.pd-sbc-stepbtn {
    width: 40px; height: 40px; border: 0; border-radius: 99px; background: var(--sbc-surface);
    box-shadow: 0 1px 3px rgba(60, 45, 30, .12); color: var(--sbc-ink);
    font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.pd-sbc-stepper__val { min-width: 92px; text-align: center; }
.pd-sbc-stepper__val b { display: block; font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.pd-sbc-stepper__val span { font-size: .72rem; color: var(--sbc-muted); font-weight: 600; }
.pd-sbc-vol__note { font-size: .9rem; color: var(--sbc-muted); line-height: 1.5; }
.pd-sbc-range { width: 100%; margin-top: 18px; accent-color: var(--sbc-green); }

/* ---------- 02 вкусы ---------- */
.pd-sbc-tastes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-sbc-taste {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    text-align: left; cursor: pointer; background: var(--sbc-surface);
    border: 1.5px solid var(--sbc-line); transition: all .15s;
}
.pd-sbc-taste.is-on { background: var(--sbc-tint); border-color: var(--sbc-green); box-shadow: 0 0 0 2px var(--sbc-tint); }
.pd-sbc-taste__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.pd-sbc-taste__ic i { width: 16px; height: 16px; border-radius: 5px; display: block; }
.pd-sbc-taste__n { font-weight: 600; font-size: .92rem; flex: 1; min-width: 0; }
.pd-sbc-taste__c {
    width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 2px var(--sbc-line);
}
.pd-sbc-taste.is-on .pd-sbc-taste__c {
    background: var(--sbc-green); box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px; background-position: center; background-repeat: no-repeat;
}

/* ---------- 03 пропорции ---------- */
.pd-sbc-even {
    border: 0; background: var(--sbc-tint); color: var(--sbc-green-700);
    font-weight: 700; font-size: .84rem; padding: 7px 13px; border-radius: 99px; cursor: pointer;
}
.pd-sbc-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin-bottom: 18px; box-shadow: inset 0 0 0 1px var(--sbc-line); }
.pd-sbc-bar span { transition: width .2s; }
.pd-sbc-alloc { display: flex; flex-direction: column; gap: 10px; }
.pd-sbc-alloc__row { display: flex; align-items: center; gap: 12px; }
.pd-sbc-alloc__dot { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.pd-sbc-alloc__n { font-weight: 600; font-size: .94rem; flex: 1; }
.pd-sbc-alloc__pct { font-size: .86rem; color: var(--sbc-muted); min-width: 44px; text-align: right; }
.pd-sbc-alloc__st { display: flex; align-items: center; gap: 4px; background: var(--sbc-cream-deep); border-radius: 99px; padding: 4px; }
.pd-sbc-alloc__st button {
    width: 26px; height: 26px; border: 0; border-radius: 99px; background: var(--sbc-surface);
    box-shadow: 0 1px 3px rgba(60, 45, 30, .12); cursor: pointer; font-size: 14px; line-height: 1;
}
.pd-sbc-alloc__st b { min-width: 34px; text-align: center; font-weight: 700; font-size: .95rem; }
/* 12px — минимум для мобильной читаемости, принятый по сайту (было .68rem ≈ 11px). */
.pd-sbc-alloc__st i { font-style: normal; font-size: .75rem; color: var(--sbc-muted); font-weight: 600; }

/* ---------- 04 частота / общие радио-карточки ---------- */
.pd-sbc-freq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-sbc-opt {
    text-align: left; padding: 16px 18px; border-radius: 12px; cursor: pointer;
    background: var(--sbc-surface); border: 1.5px solid var(--sbc-line); transition: all .15s;
}
.pd-sbc-opt.is-on { background: var(--sbc-tint); border-color: var(--sbc-green); box-shadow: 0 0 0 2px var(--sbc-tint); }
.pd-sbc-opt__row { display: flex; justify-content: space-between; align-items: center; }
.pd-sbc-opt__row b { font-weight: 700; font-size: 1.02rem; }
.pd-sbc-opt.is-on .pd-sbc-opt__row b { color: var(--sbc-green-700); }
.pd-sbc-opt__sub { display: block; font-size: .86rem; color: var(--sbc-muted); margin-top: 4px; }
.pd-sbc-radio { width: 18px; height: 18px; border-radius: 99px; flex: 0 0 auto; border: 2px solid var(--sbc-line); display: grid; place-items: center; }
.is-on .pd-sbc-radio { border-color: var(--sbc-green); }
.is-on .pd-sbc-radio::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--sbc-green); }

/* ---------- 05 оплата ---------- */
.pd-sbc-seg { display: flex; background: var(--sbc-cream-deep); border-radius: 99px; padding: 4px; gap: 4px; margin-bottom: 20px; }
.pd-sbc-seg button {
    flex: 1; border: 0; border-radius: 99px; padding: 11px 8px; cursor: pointer;
    font-weight: 700; font-size: .94rem; background: transparent; color: var(--sbc-muted); transition: all .18s;
}
.pd-sbc-seg button.is-on { background: var(--sbc-surface); color: var(--sbc-green-700); box-shadow: 0 1px 3px rgba(60, 45, 30, .12); }
/* Состояние недоступного способа оплаты в переключателе (сейчас не используется:
   ежемесячная разблокирована, но состояние может понадобиться снова). */
.pd-sbc-seg button[disabled] { cursor: default; opacity: .75; }
.pd-sbc-seg button[disabled]:hover { background: transparent; }
.pd-sbc-prepay { display: flex; flex-direction: column; gap: 10px; }
.pd-sbc-pp {
    display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px;
    border-radius: 12px; cursor: pointer; background: var(--sbc-surface);
    border: 1.5px solid var(--sbc-line); transition: all .15s;
}
.pd-sbc-pp.is-on { background: var(--sbc-tint); border-color: var(--sbc-green); box-shadow: 0 0 0 2px var(--sbc-tint); }
.pd-sbc-pp__mid { flex: 1; min-width: 0; }
.pd-sbc-pp__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-sbc-pp__top b { font-weight: 700; font-size: 1.02rem; }
.pd-sbc-pp__sub { display: block; font-size: .84rem; color: var(--sbc-muted); margin-top: 2px; }
.pd-sbc-pp__right { text-align: right; flex: 0 0 auto; }
.pd-sbc-pp__right b { display: block; font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.15rem; }
.pd-sbc-pp.is-on .pd-sbc-pp__right b { color: var(--sbc-green-700); }
.pd-sbc-pp__right s { font-size: .78rem; color: #A9A296; }
.pd-sbc-tag { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--sbc-cream-deep); color: var(--sbc-muted); }
.pd-sbc-tag.is-warm { background: var(--sbc-warm-tint); color: var(--sbc-warm); }
.pd-sbc-note { font-size: .84rem; color: var(--sbc-muted); line-height: 1.5; margin: 10px 0 0; }
.pd-sbc-recur { display: flex; flex-direction: column; gap: 8px; }
.pd-sbc-tier {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
    background: var(--sbc-tint); border: 1px solid var(--sbc-tint-2);
}
.pd-sbc-tier.is-first { background: #FCF8F1; border-color: var(--sbc-line); }
.pd-sbc-tier__n {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--sbc-green); color: #fff; font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: .9rem;
}
.pd-sbc-tier.is-first .pd-sbc-tier__n { background: var(--sbc-cream-deep); color: var(--sbc-muted); }
.pd-sbc-tier__l { font-weight: 600; font-size: .94rem; flex: 1; }
.pd-sbc-tier__d { font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.05rem; color: var(--sbc-green-700); }
.pd-sbc-tier.is-first .pd-sbc-tier__d { color: var(--sbc-muted); }
.pd-sbc-tier__p { font-size: .84rem; color: var(--sbc-muted); min-width: 92px; text-align: right; }
.pd-sbc-freeze {
    margin-top: 12px; padding: 14px 16px; border-radius: 12px;
    background: #EAF2F7; border: 1px solid #CFE1EC; font-size: .9rem; line-height: 1.55; color: #3F4A52;
}

/* ---------- Шаг 2 ---------- */
.pd-sbc-back {
    /* align-self держит кнопку слева во flex-колонке, justify-self — в grid
       (на шаге 2 колонка grid-овая, там align-self работает по вертикали, и без
       justify-self кнопка растягивалась на всю ширину, центрируя свой текст). */
    align-self: flex-start; justify-self: start; text-align: left;
    border: 0; background: none; cursor: pointer;
    color: var(--sbc-green-700); font-weight: 700; font-size: .9rem; padding: 0;
}
/* блоки чекаута внутри подписки — снимаем внешние отступы страницы чекаута */
.pd-sbc .pd-checkout-card { margin: 0; }

/* ---------- Сводка ---------- */
.pd-sbc-sum {
    position: sticky; top: 92px; background: var(--sbc-surface);
    border: 1px solid var(--sbc-line); border-radius: 18px; overflow: hidden;
}
.pd-sbc-sum__head { padding: 18px 22px; border-bottom: 1px solid var(--sbc-line); }
.pd-sbc-sum__head h3 { font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.2rem; margin: 0; }
.pd-sbc-sum__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.pd-sbc-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pd-sbc-sum__row span { font-size: .9rem; color: var(--sbc-muted); }
.pd-sbc-sum__row b { font-weight: 600; font-size: .94rem; text-align: right; }
.pd-sbc-sum__tastes > span { display: block; font-size: .82rem; color: var(--sbc-muted); font-weight: 600; margin-bottom: 6px; }
.pd-sbc-sum__tastes > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-sbc-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600;
    padding: 4px 10px; border-radius: 99px; background: var(--sbc-cream-deep);
}
.pd-sbc-chip i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.pd-sbc-sum__total { padding: 18px 22px; background: var(--sbc-tint); }
.pd-sbc-sum__totalrow { display: flex; justify-content: space-between; align-items: baseline; }
.pd-sbc-sum__totalrow span { font-weight: 600; color: var(--sbc-green-700); }
.pd-sbc-sum__totalrow b { font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 1.7rem; color: var(--sbc-green-700); }
.pd-sbc-sum__note { font-size: .84rem; color: var(--sbc-green-700); margin-top: 2px; }
.pd-sbc-sum__cta { padding: 16px 22px; }
.pd-sbc-btn {
    width: 100%; border: 0; border-radius: 13px; padding: 17px 24px; cursor: pointer;
    background: var(--sbc-green); color: #fff; font-weight: 700; font-size: 1.06rem;
}
.pd-sbc-btn:hover { background: var(--sbc-green-700); }
.pd-sbc-btn[disabled] { opacity: .6; cursor: default; }
.pd-sbc-sum__safe { text-align: center; font-size: .82rem; color: var(--sbc-muted); margin-top: 12px; }

/* ---------- Схема работы ---------- */
.pd-sbc-how { background: #FCF8F1; border-top: 1px solid var(--sbc-line); padding: 56px 0; }
.pd-sbc-how__head { text-align: center; margin-bottom: 40px; }
.pd-sbc-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sbc-green-700); }
.pd-sbc-how__head h2 { font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 2.1rem; margin: 6px 0 0; }
.pd-sbc-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pd-sbc-how__card { background: var(--sbc-surface); border: 1px solid var(--sbc-line); border-radius: 18px; padding: 24px; }
.pd-sbc-how__n { font-family: var(--display, 'Nunito', sans-serif); font-size: 2.2rem; font-weight: 800; color: var(--sbc-tint-2); line-height: 1; display: block; margin-bottom: 14px; }
.pd-sbc-how__card h3 { font-weight: 700; font-size: 1.1rem; margin: 0; }
.pd-sbc-how__card p { color: var(--sbc-muted); font-size: .9rem; margin: 6px 0 0; line-height: 1.55; }

/* ---------- FAQ ---------- */
.pd-sbc-faq { padding: 56px 0; }
.pd-sbc-faq h2 { text-align: center; font-family: var(--display, 'Nunito', sans-serif); font-weight: 800; font-size: 2rem; margin: 0 0 26px; }
.pd-sbc-faq__list { display: flex; flex-direction: column; gap: 10px; }
.pd-sbc-faq__item { background: var(--sbc-surface); border: 1px solid var(--sbc-line); border-radius: 18px; overflow: hidden; }
.pd-sbc-faq__item[open] { border-color: var(--sbc-green); }
.pd-sbc-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.pd-sbc-faq__item summary::-webkit-details-marker { display: none; }
.pd-sbc-faq__item summary h3 { font-weight: 700; font-size: 1.02rem; line-height: 1.35; margin: 0; }
.pd-sbc-faq__item[open] summary h3 { color: var(--sbc-green-700); }
.pd-sbc-faq__ic { width: 30px; height: 30px; border-radius: 99px; flex: 0 0 auto; background: var(--sbc-cream-deep); position: relative; transition: all .2s; }
.pd-sbc-faq__ic::before, .pd-sbc-faq__ic::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--sbc-muted); }
.pd-sbc-faq__ic::before { width: 12px; height: 2px; }
.pd-sbc-faq__ic::after { width: 2px; height: 12px; transition: transform .22s; }
.pd-sbc-faq__item[open] .pd-sbc-faq__ic { background: var(--sbc-green); }
.pd-sbc-faq__item[open] .pd-sbc-faq__ic::before, .pd-sbc-faq__item[open] .pd-sbc-faq__ic::after { background: #fff; }
.pd-sbc-faq__item[open] .pd-sbc-faq__ic::after { transform: scaleY(0); }
.pd-sbc-faq__a { padding: 0 20px 20px; }
.pd-sbc-faq__a p { color: #4A453D; font-size: .98rem; line-height: 1.65; margin: 0; }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
    .pd-sbc-grid { grid-template-columns: 1fr; }
    .pd-sbc-sum { position: static; }
    .pd-sbc-how__grid { grid-template-columns: repeat(2, 1fr); }
    .pd-sbc-main { padding: 22px 0 48px; }
}
@media (max-width: 640px) {
    .pd-sbc-wrap-narrow { padding: 0 16px; }
    .pd-sbc-card { padding: 18px; }
    .pd-sbc-tastes { grid-template-columns: 1fr 1fr; }
    .pd-sbc-how__grid { grid-template-columns: 1fr; }
    .pd-sbc-freq { grid-template-columns: 1fr; }
    .pd-sbc-pp { flex-wrap: wrap; }
    .pd-sbc-tier__p { min-width: 0; }
    .pd-sbc-how, .pd-sbc-faq { padding: 36px 0; }
}

/* Подсказка в сводке, пока тариф доставки не выбран */
.pd-sbc-sum__hint { font-size: .82rem; color: var(--sbc-muted); line-height: 1.4; }

/* Юридические согласия в сводке — 1:1 с «Составом заказа» на чекауте.
   Вид даёт checkout-redesign.css + ui-overlays.css (сводка помечена классом
   .pd-checkout, токены --pdc-* берутся с .pd-body--checkout на .pd-sbc).
   Вертикальные отступы задают САМИ лейблы: .pd-checkout-check margin 0 0 20px
   и .pd-checkout-check--consent margin-top 20px (оба !important). Поэтому
   обёртка — обычный блок только с боковыми padding: с flex+gap margin-ы не
   схлопывались и вместо 20px между чекбоксами получалось 54px, а от блока
   итога 34px вместо 20px. */
.pd-sbc-sum__consent { padding: 0 22px; }

/* ------------------------------------------------------------------
   Компенсация сброса дизайн-системы для перенесённых блоков чекаута 06-09.
   sets-rebrand.css содержит `.pd-sets-rb *{margin:0;padding:0}` (0,1,0) и
   `.pd-sets-rb a{text-decoration:none}` (0,1,1), а грузится ПОСЛЕ
   ui-overlays.css — при равной специфичности выигрывает и гасит отступы и
   подчёркивания, заданные без !important. Ниже возвращены ровно те значения,
   что даёт чекаут (сверено поузловым замером computed-стилей всех четырёх
   карточек: Контакты / Доставка / Оплата / Комментарий).
   ------------------------------------------------------------------ */
.pd-sbc .pd-checkout-dtype { margin-bottom: 18px; }   /* зазор до «Выбрать адрес на карте» */
.pd-sbc .pd-checkout-dtype__item { padding: 0 10px; }
.pd-sbc .pd-checkout-mapbtn { padding: 0 22px; }
.pd-sbc .pd-checkout-options { margin-bottom: 20px; } /* блок способов оплаты */
/* Браузерные margin-ы радио внутри переключателя/тарифов/чипов времени:
   на чекауте их никто не сбрасывает, там работает дефолт Chrome. */
.pd-sbc .pd-checkout-dtype__item > input,
.pd-sbc .pd-checkout-tariff > input,
.pd-sbc .pd-checkout-chip > input { margin: 3px 3px 0 5px; }
.pd-sbc .pd-checkout-time select option { padding: 0 2px 1px; }
/* Ссылки в согласиях — подчёркнуты, как в «Составе заказа». */
.pd-sbc .pd-checkout-check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* .pd-sets-rb задаёт line-height 1.5, на чекауте в карточках наследуется normal. */
.pd-sbc .pd-checkout-card { line-height: normal; }
/* Тост подписки */
.pd-sbc-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
    max-width: min(520px, calc(100vw - 32px)); z-index: 9999;
    background: #211F1A; color: #fff; padding: 13px 20px; border-radius: 12px;
    font-size: .94rem; box-shadow: 0 12px 30px rgba(33, 31, 26, .25);
    opacity: 0; transition: opacity .25s, transform .25s;
}
.pd-sbc-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.pd-sbc-toast.is-error { background: #A3324C; }

/* ------------------------------------------------------------------
   Шаг 2 (оформление) — каркас один в один с /personal/order/make/.
   Значения взяты из ui-overlays.css (.pd-checkout, .pd-checkout__layout,
   .pd-checkout__form) и checkout-redesign.css (.pd-checkout-summary),
   сверено замером computed-стилей в iframe 1280px. Класс is-checkout
   вешает subscribe.js в goStep(), чтобы шаг 1 сохранил свою раскладку.
   ------------------------------------------------------------------ */
/* Класс .pd-checkout на шаге, сводке и хосте модалки нужен только как скоуп
   стилей чекаута. Его собственная «страничная» геометрия из ui-overlays.css
   (width: min(1160px, calc(100% - 32px)) + margin: 36px auto 84px) здесь лишняя:
   ширину колонок задаёт сетка, а у хоста модалки эти отступы добавляли ~120px
   пустоты в конце страницы. */
.pd-sbc .pd-checkout,
.pd-sbc-modal-host.pd-checkout { width: auto; max-width: none; margin: 0; }

.pd-sbc-main.is-checkout { padding: 0; }
.pd-sbc-main.is-checkout .pd-sets-rb__wrap {
    width: min(1160px, calc(100% - 32px));
    max-width: none;
    padding: 0;
    margin: 36px auto 84px;
}
.pd-sbc-main.is-checkout .pd-sbc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 48px;
}
.pd-sbc-main.is-checkout .pd-sbc-col { display: grid; gap: 20px; }
.pd-sbc-main.is-checkout .pd-sbc-step { display: grid; gap: 20px; }
/* Сводка: та же рамка и та же липкая позиция, что у «Состава заказа».
   position задаём явно — иначе на ≤980 сработает общее правило шага 1
   (.pd-sbc-sum{position:static}), а у чекаута липкость держится до 720. */
.pd-sbc-main.is-checkout .pd-sbc-sum {
    position: sticky;
    top: 124px;
    border-color: #e9dec9;
    box-shadow: 0 10px 26px rgba(33, 31, 26, .09);
}
/* Мобильная раскладка чекаута начинается с 720px и со своими значениями
   (ui-overlays.css: width 100%-24px, margin 32/58, одна колонка, сводка static).
   Отступы карточек на мобильном приходят сами: класс .pd-checkout-card уже
   внутри .pd-checkout. */
@media (max-width: 720px) {
    .pd-sbc-main.is-checkout .pd-sets-rb__wrap { width: min(100% - 24px, 1160px); margin: 32px auto 58px; }
    .pd-sbc-main.is-checkout .pd-sbc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pd-sbc-main.is-checkout .pd-sbc-sum { position: static; }
}

/* Строка скидки в сводке — зелёная, как скидки в «Составе заказа» на чекауте
   (.pd-checkout-summary__discount strong: #2e8b57). */
.pd-sbc-sum__row--disc b { color: #2e8b57; }

/* Вкус, не прошедший по расчёту калькулятора: выключен нативно (disabled),
   поэтому клик до обработчика не доходит — здесь только вид. */
.pd-sbc-taste.is-off { opacity: .45; cursor: default; }
.pd-sbc-taste.is-off:hover { border-color: var(--sbc-line); background: var(--sbc-surface); box-shadow: none; }

/* ---------- Ошибка оформления и экран «Подписка оформлена» ---------- */
.pd-sbc-err {
    margin: 18px 0 0; padding: 14px 18px; border-radius: 14px;
    background: #FBE4E4; color: #A3324C; font-weight: 600; font-size: .95rem;
}
.pd-sbc-done {
    max-width: 720px; margin: 32px auto 84px; background: var(--sbc-surface);
    border: 1px solid var(--sbc-line); border-radius: 18px; padding: 32px;
    box-shadow: 0 10px 26px rgba(33, 31, 26, .09);
}
.pd-sbc-done h1 {
    font-family: var(--display, 'Nunito', sans-serif); font-weight: 800;
    font-size: 1.9rem; margin: 0; color: var(--sbc-green-700);
}
.pd-sbc-done__lead { margin: 10px 0 0; color: var(--sbc-ink); line-height: 1.55; }
.pd-sbc-done__rows { display: grid; gap: 10px; margin: 22px 0; }
.pd-sbc-done__rows > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.pd-sbc-done__rows span { color: var(--sbc-muted); font-size: .94rem; }
.pd-sbc-done__rows b { font-weight: 700; }
.pd-sbc-done__note { color: var(--sbc-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 22px; }
.pd-sbc-done__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pd-sbc-done__cta .pd-sbc-btn { width: auto; padding: 15px 26px; }
.pd-sbc-done__link { color: var(--sbc-green-700); font-weight: 700; }
@media (max-width: 720px) {
    .pd-sbc-done { margin: 22px 16px 48px; padding: 22px 18px; }
    .pd-sbc-done h1 { font-size: 1.5rem; }
}