/* ==========================================================================
   Simple (Simple Checkout 4.x) — макет «Оформление заказа» темы Tiki-Toki
   Файл лежит в папке темы tiki_toki и подключается только на ней.
   Цвета, шрифт и масштаб --k — из переменных темы (tiki-toki.css).
   Раскладка: слева корзина и шаги «1/3 Получатель», «2/3 Адрес и способ доставки»,
   «3/3 Способ оплаты», справа липкий «Ваш заказ» (см. README пакета — шаблон страницы Simple).
   ========================================================================== */

.simple-content {
    --s-primary: var(--c-primary, #1800ac);
    --s-primary-dark: #12007f;
    --s-black: var(--c-black, #17132c);
    --s-white: var(--c-white, #f7fbff);
    --s-grey: var(--c-grey, #f5f5f7);
    --s-muted: var(--c-grey-dark, #767676);
    --s-blue: var(--c-light-blue, #f1f7ff);
    --s-red: var(--c-red, #ed4f52);
    --s-pink: var(--c-pink, #f77add);
    --s-k: var(--k, 1);
    --s-sticky-top: 140px;
    --s-label: calc(128px * var(--s-k));
    --s-col-gap: calc(40px * var(--s-k));

    font-family: var(--font, Inter, Arial, sans-serif);
    color: var(--s-black);
    padding-bottom: 40px;
}
.simple-content a { color: var(--s-primary); }

/* Хлебные крошки и заголовок (simple_header) */
.tt .tt-sc__crumbs { margin: calc(40px * var(--k)) 0 calc(24px * var(--k)); padding: 0; }
.tt .tt-sc__title { display: flex; align-items: center; gap: 12px; margin: 0 0 calc(48px * var(--k)); font: 600 max(24px, calc(56px * var(--k))) / 1.2 var(--font); }
.tt-sc__back { display: none; }


/* --------------------------------------------------------------------------
   1. Контейнер и колонки
   -------------------------------------------------------------------------- */

.simple-content.container {
    width: auto;
    max-width: calc(var(--container, 1728px) + 2 * var(--gutter, 16px));
    margin: 0 auto;
    padding-left: var(--gutter, 16px);
    padding-right: var(--gutter, 16px);
}
/* simple_header оставляет страницу внутри .container > .row > #content — вложенному контейнеру поля не нужны */
.tt .container .simple-content.container,
.tt #content .simple-content.container,
.container .simple-content.container,
#content .simple-content.container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

.simple-content [id^="simplecheckout_form_"],
.simple-content .simplecheckout { margin: 0; padding: 0; }
.simple-content .simplecheckout-step.row,
.simple-content .simplecheckout-step { margin-left: 0; margin-right: 0; }

/* Колонки 998 : 706 (как в макете); правая тянется на высоту левой — «Ваш заказ» прилипает */
@media (min-width: 1024px) {
    .simple-content .simplecheckout-step,
    .simple-content :has(> .simplecheckout-left-column) {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        column-gap: calc(24px * var(--s-k));
    }
    .simple-content .simplecheckout-step::before,
    .simple-content .simplecheckout-step::after,
    .simple-content :has(> .simplecheckout-left-column)::before,
    .simple-content :has(> .simplecheckout-left-column)::after { content: none; display: none; }
    .simple-content .simplecheckout-step > *,
    .simple-content :has(> .simplecheckout-left-column) > * { flex: 0 0 100%; min-width: 0; }
    .simple-content .simplecheckout-left-column { flex: 998 1 0; max-width: none; width: auto; float: none; }
    .simple-content .simplecheckout-right-column { flex: 706 1 0; max-width: none; width: auto; float: none; }
    .simple-content .simplecheckout-right-column #simplecheckout_summary { position: -webkit-sticky; position: sticky; top: var(--s-sticky-top); z-index: 5; }
    /* Кнопка «Оформить заказ» под левой колонкой — шириной с неё (блок кнопок — тоже элемент flex-раскладки) */
    .simple-content .simplecheckout > #buttons,
    .simple-content #buttons { flex: 0 0 calc((100% - 24px * var(--s-k)) * 998 / 1704); width: calc((100% - 24px * var(--s-k)) * 998 / 1704); }
}
@media (max-width: 1023px) {
    .simple-content .simplecheckout-left-column,
    .simple-content .simplecheckout-right-column { width: 100%; float: none; }
}


/* --------------------------------------------------------------------------
   2. Блоки и шаги «1/3 · Получатель»
   -------------------------------------------------------------------------- */

.simple-content .simplecheckout-block {
    margin: 0 0 calc(24px * var(--s-k));
    padding: calc(40px * var(--s-k));
    border: 0;
    border-radius: calc(60px * var(--s-k));
    background: var(--s-blue);
    box-shadow: none;
}
.simple-content .simplecheckout-block-content { padding: 0; }
.simple-content #simplecheckout_payment_form:empty { display: none; }

.simple-content .checkout-heading.panel-heading {
    display: grid;
    grid-template-columns: var(--s-label) 1fr auto;
    column-gap: var(--s-col-gap);
    align-items: center;
    margin: 0 0 calc(48px * var(--s-k));
    padding: 0;
    border: 0;
    background: none;
    font: 800 max(20px, calc(32px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif);
    color: var(--s-black);
}
.simple-content .checkout-heading.panel-heading:before { content: ''; }
.simple-content .checkout-heading .heading-title { min-width: 0; }
/* Номер шага слева от заголовка */
.simple-content #simplecheckout_customer .checkout-heading:before { content: '1/3'; }
.simple-content #simplecheckout_shipping .checkout-heading:before { content: '2/3'; }
.simple-content #simplecheckout_payment .checkout-heading:before { content: '3/3'; }
.simple-content .checkout-heading-button a,
.simple-content .login-link-btn { font-size: 16px; font-weight: 500; color: var(--s-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Адрес и комментарий — продолжение шага 2/3 (идут сразу за «Способом доставки» в шаблоне страницы) */
.simple-content #simplecheckout_shipping:has(+ #simplecheckout_shipping_address),
.simple-content #simplecheckout_shipping_address:has(+ #simplecheckout_comment) { margin-bottom: 0; padding-bottom: calc(12px * var(--s-k)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.simple-content #simplecheckout_shipping + #simplecheckout_shipping_address,
.simple-content #simplecheckout_shipping_address + #simplecheckout_comment { padding-top: calc(12px * var(--s-k)); border-top-left-radius: 0; border-top-right-radius: 0; }
.simple-content #simplecheckout_shipping + #simplecheckout_shipping_address .checkout-heading,
.simple-content #simplecheckout_shipping_address + #simplecheckout_comment .checkout-heading { display: none; }

/* Шаги, если оформление разбито на шаги */
#simplecheckout_step_menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
#simplecheckout_step_menu .simple-step { padding: 10px 20px; border-radius: 24px; background: var(--s-grey); font-size: 15px; font-weight: 500; color: var(--s-black); cursor: pointer; }
#simplecheckout_step_menu .simple-step-current { background: var(--s-primary); color: #fff; }
#simplecheckout_step_menu .simple-step-completed { background: var(--s-blue); color: var(--s-primary); }
#simplecheckout_step_menu .simple-step-delimiter { opacity: .4; }


/* --------------------------------------------------------------------------
   3. Поля: подпись группы слева («Ваши данные», «Контакты», «Адрес»), поля справа
   -------------------------------------------------------------------------- */

/* Поля Simple выводит внутри <fieldset class="simple-fieldset-grid"> (simple_rows_begin/end) — обёртка «прозрачна»
   для сетки (display: contents), правила ниже действуют и на прямые элементы блока, и на поля внутри неё */
.simple-content .simplecheckout-block-content {
    display: grid;
    grid-template-columns: var(--s-label) minmax(0, 1fr);
    column-gap: var(--s-col-gap);
    row-gap: calc(24px * var(--s-k));
    align-items: start;
    margin: 0;
}
.simple-content .simplecheckout-block-content fieldset.simple-fieldset-grid { display: contents; }
.simple-content .simplecheckout-block-content > *,
.simple-content .simplecheckout-block-content > fieldset > * { grid-column: 2; min-width: 0; }
.simple-content .simplecheckout-block-content > .tt-srow-head,
.simple-content .simplecheckout-block-content > fieldset > .tt-srow-head { grid-column: 1; }
.simple-content .simplecheckout-block-content > .alert,
.simple-content .simplecheckout-block-content > .you-will-be-registered { grid-column: 1 / -1; }
/* Новая группа полей — с отступом сверху (в макете «Контакты» ниже «Ваших данных» на 56px) */
.simple-content .simplecheckout-block-content .tt-srow-head ~ .tt-srow-head,
.simple-content .simplecheckout-block-content .tt-srow-head ~ .tt-srow-head + * { margin-top: calc(32px * var(--s-k)); }
.tt-srow-head { padding-top: 2px; font: 700 max(14px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); }

.simple-content .simple-field-wrapper,
.simple-content .form-group { margin: 0; padding: 0; width: auto; }
.simple-content .simple-field-wrapper > .control-label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 500; }
/* Звёздочку обязательного поля ставит stylesheet.css OpenCart (.required .control-label:before) */

.simple-content .simplecheckout .form-control,
.simple-content #simplecheckout_comment textarea {
    width: 100%;
    height: max(48px, calc(56px * var(--s-k)));
    padding: 0 calc(32px * var(--s-k));
    border: .5px solid rgba(118, 118, 118, .6);
    border-radius: 16px;
    background: var(--s-white);
    box-shadow: none;
    font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif);
    color: var(--s-black);
}
.simple-content .form-control::placeholder,
.simple-content textarea::placeholder { color: var(--s-black); opacity: .4; }
.simple-content .form-control:focus,
.simple-content textarea:focus { border-color: var(--s-primary); box-shadow: 0 0 0 3px rgba(24, 0, 172, .12); outline: 0; }
.simple-content .simplecheckout textarea.form-control,
.simple-content #simplecheckout_comment textarea { height: calc(260px * var(--s-k)); min-height: 140px; padding: calc(16px * var(--s-k)) calc(32px * var(--s-k)); border-radius: calc(24px * var(--s-k)); resize: vertical; }
.simple-content .simplecheckout select.form-control { appearance: none; padding-right: 56px; background: var(--s-white) url(../image/icons/arrow-down.svg) no-repeat right 24px center / 16px; }
.simple-content .simplecheckout-tooltip { margin-top: 6px; font-size: 14px; opacity: .6; }

/* Список с поиском (select2, например «ОПС Европочта»): как поле темы на всю ширину; окно списка — ниже */
.simple-content .select2-container { display: block; width: 100% !important; }
.simple-content .select2-container .select2-selection--single {
    display: flex; align-items: center; height: max(48px, calc(56px * var(--s-k))); padding: 0 56px 0 calc(32px * var(--s-k));
    border: .5px solid rgba(118, 118, 118, .6); border-radius: 16px; outline: 0; box-shadow: none;
    background: var(--s-white) url(../image/icons/arrow-down.svg) no-repeat right 24px center / 16px;
    font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); color: var(--s-black);
}
.simple-content .select2-container .select2-selection--single .select2-selection__rendered { overflow: hidden; padding: 0; line-height: 1.2; color: var(--s-black); text-overflow: ellipsis; white-space: nowrap; }
.simple-content .select2-container .select2-selection__placeholder { color: var(--s-black); opacity: .4; }
.simple-content .select2-container .select2-selection__arrow { display: none; }
.simple-content .select2-container--open .select2-selection--single,
.simple-content .select2-container--focus .select2-selection--single { border-color: var(--s-primary); box-shadow: 0 0 0 3px rgba(24, 0, 172, .12); }
.simple-content .form-group.has-error .select2-selection--single { border-color: var(--s-red); }
/* Окно списка select2 добавляется в конец страницы — вне .simple-content; simple.css подключён только на Simple */
.select2-container--open .select2-dropdown {
    overflow: hidden; border: .5px solid rgba(118, 118, 118, .4); border-radius: 16px; background: #fff;
    box-shadow: 0 12px 40px rgba(23, 19, 44, .16); font-family: var(--font, Inter, Arial, sans-serif);
}
.select2-container--open .select2-dropdown--below { margin-top: 6px; }
.select2-container--open .select2-dropdown--above { margin-top: -6px; }
.select2-container--open .select2-search--dropdown { padding: 12px; }
.select2-container--open .select2-search--dropdown .select2-search__field {
    width: 100%; height: 44px; padding: 0 16px; border: .5px solid rgba(118, 118, 118, .6); border-radius: 12px; outline: 0; box-shadow: none;
    font: 500 15px / 1.2 var(--font, Inter, Arial, sans-serif); color: var(--c-black, #17132c);
}
.select2-container--open .select2-search--dropdown .select2-search__field:focus { border-color: var(--c-primary, #1800ac); }
.select2-container--open .select2-results > .select2-results__options { max-height: 320px; overflow-y: auto; margin: 0; padding: 0 0 8px; list-style: none; }
.select2-container--open .select2-results__option { padding: 10px 16px; font-size: 14px; line-height: 1.35; color: var(--c-black, #17132c); }
.select2-container--open .select2-results__option[aria-selected="true"] { background: var(--c-light-blue, #f1f7ff); font-weight: 600; }
.select2-container--open .select2-results__option--highlighted[aria-selected] { background: var(--c-pink-light, #fcf2fc); color: var(--c-primary, #1800ac); }
.select2-container--open .select2-results__message { padding: 12px 16px; font-size: 14px; color: var(--c-grey-dark, #767676); }

/* Два поля в ряд: «Кв./офис + Домофон», «Подъезд + Этаж». Классы tt-half задаются в настройках полей Simple
   (до шести полей подряд: 1-е и 3-е — слева, 2-е и 4-е — справа). */
.simple-content .simplecheckout-block-content:has(.tt-half) { grid-template-columns: var(--s-label) minmax(0, 1fr) minmax(0, 1fr); }
.simple-content .simplecheckout-block-content:has(.tt-half) > *,
.simple-content .simplecheckout-block-content:has(.tt-half) > fieldset > * { grid-column: 2 / -1; }
.simple-content .simplecheckout-block-content:has(.tt-half) > .tt-srow-head,
.simple-content .simplecheckout-block-content:has(.tt-half) > fieldset > .tt-srow-head { grid-column: 1; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half { grid-column: 2; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half { grid-column: 3; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half { grid-column: 2; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half { grid-column: 3; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half + .tt-half { grid-column: 2; }
.simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half + .tt-half + .tt-half { grid-column: 3; }

/* Галочки и радио-кнопки в стиле макета */
.tt-cbox, .tt-radio, .simple-content .simple-checkbox-list input, .simple-content .custom-register-container input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: none; width: 24px; height: 24px; margin: 0; padding: 0;
    border: 1px solid var(--s-muted, #767676); border-radius: 4px; background: transparent; cursor: pointer;
}
.tt-cbox:checked, .simple-content .simple-checkbox-list input:checked, .simple-content .custom-register-container input[type="checkbox"]:checked {
    border: 2px solid var(--c-light-blue, #f1f7ff); background: var(--c-primary, #1800ac) url(../image/icons/check16-white.svg) center / 16px no-repeat; border-radius: 4px;
}
.tt-radio { border-radius: 50%; }
.tt-radio:checked { border-color: var(--c-primary, #1800ac); background: radial-gradient(circle, var(--c-primary, #1800ac) 0 9px, transparent 9.5px); }
.tt-cbox:focus-visible, .tt-radio:focus-visible { outline: 2px solid var(--c-primary, #1800ac); outline-offset: 2px; }
.simple-content .checkbox label, .simple-content .radio label { display: inline-flex; align-items: center; gap: 12px; padding-left: 0; font-size: 16px; }
.simple-content .checkbox input, .simple-content .radio input { position: static; margin: 0; }


/* --------------------------------------------------------------------------
   4. Способы доставки и оплаты
   -------------------------------------------------------------------------- */

.tt-smethods { display: flex; flex-direction: column; gap: calc(24px * var(--s-k)); }
.tt-smethods > p { margin: 0; font-weight: 600; }
.tt-smethod { display: flex; align-items: flex-start; gap: calc(24px * var(--s-k)); max-width: 465px; margin: 0; font-weight: 400; cursor: pointer; }
.tt-smethod__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tt-smethod__title { font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); }
.tt-smethod__desc { font-size: max(12px, calc(16px * var(--s-k))); line-height: 1.2; opacity: .6; }
.tt-smethod__desc p { margin: 0; }
.tt-smethods--payment .tt-smethod { align-items: center; }
.tt-smethods--payment .tt-smethod:after { content: ''; flex: none; width: 24px; height: 24px; margin-left: auto; background: center / contain no-repeat; }
.tt-smethods--payment .tt-smethod--cash:after { background-image: url(../image/icons/pay-cash.svg); }
.tt-smethods--payment .tt-smethod--card:after { background-image: url(../image/icons/pay-card.svg); }
/* Картинка способа из FilterIt — справа, вместо значка по коду */
.tt-smethod__img { flex: none; max-width: 64px; max-height: 32px; margin-left: auto; object-fit: contain; }
.tt-smethod--img:after { display: none; }
/* Виджет MSBonus внутри «Ваш заказ» — с отступом от промокода */
.tt-ssum .msb-widget--sticky { margin: 0 0 calc(24px * var(--s-k)); }
/* Логотип ЕРИП — вырезан из полосы платёжных систем подвала */
.tt-smethods--payment .tt-smethod--erip:after { width: 46px; background-image: url(../image/icons/pay-erip.svg); }
.simple-content .simplecheckout-methods-description { margin-top: 8px; font-size: 15px; opacity: .7; }


/* --------------------------------------------------------------------------
   5. Корзина
   -------------------------------------------------------------------------- */

.simple-content #simplecheckout_cart { display: block; }
.tt-scart__head { display: flex; align-items: center; gap: 16px; margin-bottom: calc(32px * var(--s-k)); }
.tt-scart__clear { margin-left: auto; }

.tt-scart__list { display: flex; flex-direction: column; gap: calc(24px * var(--s-k)); }
.tt-scart__row {
    display: grid;
    grid-template-columns: calc(121px * var(--s-k)) minmax(0, 1fr) auto;
    grid-template-areas: "img info actions" "img info qty";
    column-gap: calc(58px * var(--s-k));
    align-items: start;
    min-height: calc(194px * var(--s-k));
    padding-bottom: calc(24px * var(--s-k));
    border-bottom: .5px solid rgba(23, 19, 44, .3);
}
.tt-scart__img { position: relative; grid-area: img; display: flex; align-items: center; justify-content: center; align-self: center; height: calc(176px * var(--s-k)); min-height: 72px; padding: 6px; overflow: hidden; border-radius: 16px; background: var(--s-grey); }
.tt-scart__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tt-scart__info { grid-area: info; display: flex; flex-direction: column; align-self: stretch; gap: 12px; margin-left: calc(27px * var(--s-k)); padding-top: calc(16px * var(--s-k)); }
.tt .tt-scart__name {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: calc(350px * var(--s-k)); min-width: 180px;
    font: 700 max(14px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); color: var(--s-black); text-decoration: none;
}
.tt .tt-scart__name:hover { color: var(--s-primary); }
.tt-scart__options { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; opacity: .7; }
.tt-scart__warning { font-size: 14px; color: var(--s-red); }
.tt-scart__price { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.tt-scart__prices { display: flex; flex-direction: column; }
.tt-scart__price .tt-buy__new { font-size: max(16px, calc(24px * var(--s-k))); }
.tt-scart__price .tt-label { height: max(24px, calc(40px * var(--s-k))); padding: 0 max(10px, calc(16px * var(--s-k))); font-size: max(13px, calc(20px * var(--s-k))); }
.tt-scart__actions { grid-area: actions; display: flex; gap: 11px; padding-top: calc(16px * var(--s-k)); justify-self: end; }
.tt-scart__icon { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 16px; background: var(--s-grey) center / 24px no-repeat; cursor: pointer; transition: background-color .2s; }
.tt-scart__icon:hover { background-color: var(--c-grey-price, #ededed); }
.tt-scart__icon--fav { background-image: url(../image/icons/mark.svg); }
.tt-scart__icon--remove { background-image: url(../image/icons/trash.svg); background-size: 20px; }
.tt-scart__qty { grid-area: qty; align-self: end; justify-self: end; border-width: .5px; }
.tt-scart__qty input { width: 40px; }
.tt-scart__row--gift .tt-scart__gift-icon { position: absolute; top: 6px; left: 6px; z-index: 1; width: 24px; height: 24px; border-radius: 6px; background: var(--s-pink) url(../image/icons/gift-white.svg) center / 16px no-repeat; }
.tt-scart__gift { color: var(--s-pink); font-weight: 600; opacity: 1; }
.tt-scart__row--gift .tt-scart__options { opacity: 1; }


/* --------------------------------------------------------------------------
   6. «Ваш заказ»
   -------------------------------------------------------------------------- */

.tt-ssum__title { margin: 0 0 calc(32px * var(--s-k)); font: 800 max(20px, calc(32px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); }
.tt-ssum__coupon + .tt-ssum__coupon { margin-top: 12px; }
.tt-ssum__coupon-input {
    width: 100%; height: max(48px, calc(56px * var(--s-k))); padding: 0 calc(32px * var(--s-k));
    border: 1px dashed rgba(118, 118, 118, .6); border-radius: 16px; background: var(--s-white);
    font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); color: var(--s-black); outline: 0;
}
.tt-ssum__coupon-input::placeholder { color: var(--s-black); opacity: .4; }
.tt-ssum__coupon-input:focus { border-color: var(--s-primary); border-style: solid; }
.tt-ssum__lines { display: flex; flex-direction: column; gap: calc(24px * var(--s-k)); margin-top: calc(48px * var(--s-k)); padding-bottom: calc(24px * var(--s-k)); border-bottom: .5px solid rgba(23, 19, 44, .3); }
.tt-ssum__line { display: flex; justify-content: space-between; gap: 16px; font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); }
.tt-ssum__line b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.tt-ssum__remove { display: inline-block; width: 20px; height: 20px; background: url(../image/icons/cross.svg) center / 14px no-repeat; opacity: .5; cursor: pointer; }
.tt-ssum__remove:hover { opacity: 1; }
.tt-ssum__total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: calc(40px * var(--s-k)); font: 700 max(18px, calc(24px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif); }
.tt-ssum__sum { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tt-ssum__sum s { font-size: max(14px, calc(20px * var(--s-k))); font-weight: 600; opacity: .5; }
.tt-ssum__comment { margin-top: 24px; font-size: 14px; }
.tt-ssum__btn { width: 100%; margin-top: calc(54px * var(--s-k)); }


/* Бонусы MSBonus — свой блок темы (js/tiki-toki-msbonus.js) */
.tt-msb {
    margin-bottom: calc(24px * var(--s-k)); padding: calc(24px * var(--s-k)) calc(32px * var(--s-k));
    border: .5px solid rgba(118, 118, 118, .6); border-radius: 16px; background: var(--s-white);
    font: 500 max(14px, calc(18px * var(--s-k))) / 1.3 var(--font, Inter, Arial, sans-serif);
}
.tt-msb[hidden] { display: none; }
.tt-msb__head { display: flex; align-items: center; gap: 10px; font-size: max(16px, calc(20px * var(--s-k))); font-weight: 700; }
.tt-msb__icon { flex: none; width: 24px; height: 24px; background: url(../image/icons/coin-hand-dark.svg) center / contain no-repeat; }
.tt-msb__badge { margin-left: auto; padding: 4px 10px; border-radius: 12px; background: var(--c-green, #1eae1e); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tt-msb__body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tt-msb__hint { margin: 0; font-size: max(13px, calc(16px * var(--s-k))); color: var(--s-muted); }
.tt-msb__hint--small { font-size: 12px; }
.tt-msb__error { margin: 0; font-size: 14px; color: var(--s-red); }
.tt-msb__row { display: flex; gap: 8px; }
.tt-msb__input {
    flex: 1; min-width: 0; width: 100%; height: 48px; padding: 0 16px;
    border: .5px solid rgba(118, 118, 118, .6); border-radius: 12px; outline: 0; background: #fff;
    font: 500 16px / 1.2 var(--font, Inter, Arial, sans-serif); color: var(--s-black);
}
.tt-msb__input::placeholder { color: var(--s-black); opacity: .4; }
.tt-msb__input:focus, .tt-msb__phone:focus-within { border-color: var(--s-primary); }
.tt-msb__input--code { flex: 0 0 120px; letter-spacing: 4px; text-align: center; }
.tt-msb__input--code::placeholder { letter-spacing: 0; }
.tt-msb__phone { display: flex; flex: 1; min-width: 0; height: 48px; margin: 0; border: .5px solid rgba(118, 118, 118, .6); border-radius: 12px; background: #fff; overflow: hidden; }
.tt-msb__phone .tt-msb__input { height: 100%; border: 0; border-radius: 0; }
.tt-msb__prefix { display: flex; align-items: center; padding: 0 12px 0 16px; border-right: .5px solid rgba(118, 118, 118, .6); font-size: 16px; }
.tt-msb__btn {
    display: inline-flex; flex: none; align-items: center; justify-content: center; height: 48px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 12px; background: none;
    font: 500 16px / 1 var(--font, Inter, Arial, sans-serif); white-space: nowrap; cursor: pointer; text-decoration: none !important;
    transition: background-color .2s;
}
.tt-msb__btn--primary { background: var(--s-primary); color: var(--s-white) !important; }
.tt-msb__btn--primary:hover { background: var(--s-primary-dark); }
.tt-msb__btn--outline { border-color: var(--s-primary); color: var(--s-black) !important; }
.tt-msb__btn--outline:hover { background: var(--s-blue); }
.tt-msb__btn--wide { width: 100%; }
.tt-msb__links { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-msb__actions { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tt-msb__link { padding: 0; border: 0; background: none; font: 500 14px / 1.3 var(--font, Inter, Arial, sans-serif); color: var(--s-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tt-msb__stats { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; border-radius: 12px; background: var(--s-blue); }
.tt-msb__stat { display: flex; justify-content: space-between; gap: 16px; }
.tt-msb__stat dt { font-weight: 500; opacity: .7; }
.tt-msb__stat dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.tt-msb__stat--name dd { font-weight: 600; }
.tt-msb__earn { color: var(--c-green, #1eae1e); }
.tt-msb__spend { align-items: center; }
.tt-msb__spend-field { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; margin: 0; font-weight: 500; }
.tt-msb__spend-field .tt-msb__input { flex: 0 1 110px; text-align: center; }
.tt-msb__spend-field small { font-size: 14px; color: var(--s-muted); white-space: nowrap; }
.tt-msb__applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #e9f7e9; }
.tt-msb__applied small { display: block; margin-top: 2px; font-size: 13px; color: var(--s-muted); }
.tt-msb__remove { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .7) url(../image/icons/cross.svg) center / 14px no-repeat; cursor: pointer; }
.tt-msb__remove:hover { background-color: #fff; }
.tt-msb__form { display: flex; flex-direction: column; gap: 8px; }
.tt-msb__form > .tt-msb__input, .tt-msb__label .tt-msb__input { flex: none; }
.tt-msb__label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: var(--s-muted); }
.tt-msb__consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; font-weight: 400; }
.tt-msb__loading { width: 28px; height: 28px; margin: 8px auto; border: 3px solid var(--s-primary); border-top-color: transparent; border-radius: 50%; animation: tt-msb-spin .8s linear infinite; }
@keyframes tt-msb-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   7. Кнопки и согласие с условиями
   -------------------------------------------------------------------------- */

.simple-content .button_oc,
.simple-content .btn-primary {
    display: flex; align-items: center; justify-content: center; width: 100%;
    min-height: max(48px, calc(56px * var(--s-k))); padding: 0 32px; border: 0; border-radius: 24px;
    background: var(--s-primary); box-shadow: none;
    font: 500 max(15px, calc(20px * var(--s-k))) / 1.2 var(--font, Inter, Arial, sans-serif);
    text-transform: none; text-decoration: none; color: var(--s-white); cursor: pointer; transition: background-color .2s;
}
.simple-content .button_oc:hover,
.simple-content .btn-primary:hover { background: var(--s-primary-dark); color: #fff; }
.simple-content .button_oc[disabled] { opacity: .5; pointer-events: none; }
.simple-content #simplecheckout_payment_form .buttons { display: none; }
.simple-content #buttons { clear: both; margin: calc(24px * var(--s-k)) 0 0; padding: 0; }
.simple-content #buttons { display: block; }
.simple-content #buttons .simplecheckout-button-right { float: none; display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; }
.simple-content #buttons .simplecheckout-button-left { float: none; display: flex; gap: 12px; margin-top: 12px; }
.simple-content #buttons .simplecheckout-button-left:empty { display: none; }
.simple-content #buttons #simplecheckout_button_back { display: none; }
.simple-content #agreement_checkbox { display: block; padding: 20px 24px; border-radius: 24px; background: var(--s-blue); }
/* Галочек согласия нет — пустой блок не показываем */
.simple-content #agreement_checkbox:not(:has(input)) { display: none; }
.simple-content #agreement_checkbox .checkbox { margin: 0; }
.simple-content #agreement_checkbox a { text-decoration: underline; }

/* Пустая корзина */
.simple-content .simplecheckout > .content { padding: 48px 32px; border-radius: calc(60px * var(--s-k)); background: var(--s-blue); text-align: center; font-size: 18px; }
.simple-content .simplecheckout > .simplecheckout-button-block { display: flex; justify-content: center; margin-top: 24px; }
.simple-content .simplecheckout > .simplecheckout-button-block .button_oc { display: inline-flex; width: auto; }


/* --------------------------------------------------------------------------
   8. Ошибки и уведомления
   -------------------------------------------------------------------------- */

.simple-content .simplecheckout-warning-block {
    display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 16px 20px;
    border: 0; border-radius: 16px; background: #fdeced; font-size: 15px; color: var(--s-red);
}
.simple-content .simplecheckout-warning-block[style*="display:none"],
.simple-content .simplecheckout-warning-block[style*="display: none"] { display: none; }
.simple-content .simplecheckout-warning-block:before {
    content: '!'; display: flex; flex: 0 0 24px; align-items: center; justify-content: center; height: 24px;
    border-radius: 50%; background: var(--s-red); font: 700 14px / 1 Arial, sans-serif; color: #fff;
}
.simple-content .simplecheckout-error-text { display: block; margin-top: 6px; font-size: 13px; color: var(--s-red); }
.simple-content .simple-field-wrapper[data-error="true"] .form-control,
.simple-content .form-group.has-error .form-control { border-color: var(--s-red); box-shadow: 0 0 0 4px rgba(237, 79, 82, .1); }
.simple-content .simplecheckout-proceed-payment { padding: 16px 20px; border-radius: 16px; background: var(--s-blue); }
.simple-content .modal-content { border: 0; border-radius: 32px; box-shadow: 0 8px 60px rgba(23, 19, 44, .2); }


/* --------------------------------------------------------------------------
   9. Телефон (макет 375): одна колонка, подписи групп над полями, «Ваш заказ» внизу
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    /* Внизу и так есть кнопка в «Ваш заказ». !important — Simple после каждого пересчёта показывает кнопку
       через style="display: …" (и добавляет копию кнопки оплаты data-payment-button) */
    .simple-content #buttons #simplecheckout_button_confirm,
    .simple-content #buttons [data-payment-button] { display: none !important; }
}
@media (max-width: 767px) {
    .simple-content { --s-label: 0px; --s-col-gap: 0px; }
    .tt .tt-sc__crumbs { margin: 16px 0 12px; font-size: 12px; }
    .tt .tt-sc__title { margin-bottom: 24px; font-size: 20px; }
    .tt-sc__back { display: block; flex: none; width: 24px; height: 24px; background: url(../image/icons/arrow-down.svg) center / 16px no-repeat; transform: rotate(90deg); }

    .simple-content .simplecheckout-block { margin-bottom: 16px; padding: 24px 16px; border-radius: 28px; }
    .simple-content .checkout-heading.panel-heading { grid-template-columns: auto 1fr auto; column-gap: 12px; margin-bottom: 24px; font-size: 18px; }
    /* «Войти по номеру телефона» — отдельной строкой под заголовком шага, не поверх него */
    .simple-content .checkout-heading-button { grid-column: 1 / -1; margin-top: 8px; }
    .simple-content .checkout-heading-button a, .simple-content .login-link-btn { font-size: 14px; }
    .simple-content .simplecheckout-block-content { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .simple-content .simplecheckout-block-content:has(.tt-half) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px; }
    .simple-content .simplecheckout-block-content:has(.tt-half) > *,
    .simple-content .simplecheckout-block-content:has(.tt-half) > fieldset > *,
    .simple-content .simplecheckout-block-content:has(.tt-half) > .tt-srow-head,
    .simple-content .simplecheckout-block-content:has(.tt-half) > fieldset > .tt-srow-head { grid-column: 1 / -1; }
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half,
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half,
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half + .tt-half { grid-column: 1; }
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half,
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half,
    .simple-content .simplecheckout-block-content:has(.tt-half) .tt-half + .tt-half + .tt-half + .tt-half + .tt-half + .tt-half { grid-column: 2; }
    .tt-srow-head { margin-top: 12px; padding-left: 24px; font-size: 14px; font-weight: 600; }
    .simple-content .simplecheckout-block-content .tt-srow-head ~ .tt-srow-head,
    .simple-content .simplecheckout-block-content .tt-srow-head ~ .tt-srow-head + * { margin-top: 12px; }
    .simple-content .simplecheckout .form-control { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
    .simple-content .select2-container .select2-selection--single { height: 40px; padding: 0 44px 0 16px; border-radius: 12px; background-position: right 16px center; font-size: 14px; }
    .simple-content .simplecheckout textarea.form-control,
    .simple-content #simplecheckout_comment textarea { height: 120px; min-height: 0; padding: 12px 16px; border-radius: 16px; }
    .tt-smethods { gap: 12px; padding-left: 24px; }
    .tt-smethod { gap: 12px; }
    .tt-smethod__title { font-size: 14px; }
    .tt-smethod__desc { font-size: 10px; }
    .tt-smethods--payment .tt-smethod:after { display: none; }

    /* Корзина: фото | название, кнопки | цена и счётчик */
    .tt-scart__head { margin-bottom: 16px; }
    .tt-scart__clear { height: 32px; padding: 0 16px; font-size: 14px; }
    .tt-scart__list { gap: 16px; }
    .tt-scart__row {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas: "img info" "img actions" "qty qty";
        column-gap: 12px; row-gap: 12px; min-height: 0; padding-bottom: 16px;
    }
    .tt-scart__img { height: 100px; min-height: 0; }
    .tt-scart__info { margin-left: 0; padding-top: 0; gap: 8px; }
    .tt .tt-scart__name { -webkit-line-clamp: 2; min-width: 0; font-size: 12px; }
    .tt-scart__price .tt-buy__new { font-size: 16px; }
    .tt-scart__price .tt-label { height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; }
    .tt-scart__actions { justify-self: start; padding-top: 0; gap: 8px; }
    .tt-scart__icon { width: 32px; height: 32px; border-radius: 10px; background-size: 18px; }
    .tt-scart__icon--remove { background-size: 16px; }
    .tt-scart__qty { justify-self: end; width: 116px; height: 40px; border-radius: 12px; }
    .tt-scart__qty .tt-qty__btn { width: 28px; height: 28px; border-radius: 8px; }

    .tt-ssum__title { margin-bottom: 16px; font-size: 18px; }
    .tt-ssum__coupon-input { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
    .tt-msb { margin-bottom: 16px; padding: 16px; border-radius: 12px; font-size: 14px; }
    .tt-msb__head { font-size: 16px; }
    .tt-msb__body { gap: 10px; margin-top: 12px; }
    .tt-msb__input, .tt-msb__phone, .tt-msb__btn { height: 40px; font-size: 14px; }
    .tt-msb__prefix { font-size: 14px; }
    .tt-msb__btn { padding: 0 16px; }
    .tt-msb__stats { padding: 12px; }
    .tt-msb__row { flex-wrap: wrap; }
    .tt-msb__row > .tt-msb__phone { flex: 1 1 100%; }
    .tt-msb__row > .tt-msb__phone + .tt-msb__btn { flex: 1 1 100%; }
    .tt-ssum__lines { gap: 12px; margin-top: 24px; padding-bottom: 16px; }
    .tt-ssum__line { font-size: 14px; }
    .tt-ssum__total { margin-top: 24px; font-size: 16px; }
    .tt-ssum__sum s { font-size: 14px; }
    .tt-ssum__btn { margin-top: 24px; height: 48px; border-radius: 16px; font-size: 16px; }
}