/* Корзина, оформление заказа и страница «заказ принят». Цвета и радиусы — только из токенов; текст на оранжевом всегда белый (.btn.primary). */
.co-page { padding-bottom: var(--space-48); }
.co-page [hidden] { display: none !important; }
.co-title { margin: 0 0 var(--space-24); font-size: 30px; font-weight: 500; line-height: 1.2; }

.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-32); align-items: start; }
.co-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }

/* ---------- Карточки блоков формы ---------- */
.co-card { padding: var(--space-24); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); }
.co-card__title { display: flex; align-items: center; gap: var(--space-12); margin: 0 0 var(--space-16); font-size: 18px; font-weight: 700; line-height: 1.3; }
.co-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-tile); background: var(--primary-tint); color: var(--primary-pressed); font-size: 14px; font-weight: 700; }

/* ---------- Поля ---------- */
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.co-field { min-width: 0; }
.co-field--wide { grid-column: 1 / -1; }
.co-label { display: block; margin: 0 0 6px; color: var(--ink-muted); font-size: 13px; font-weight: 600; line-height: 1.3; }
.co-label--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-req { color: var(--primary-pressed); }
.co-input { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-input); background: var(--canvas); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease; }
textarea.co-input { resize: vertical; min-height: 88px; }
select.co-input { padding-right: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5044' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.co-input::placeholder { color: var(--ink-subtle); }
.co-input:hover { border-color: var(--hairline-strong); }
.co-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.co-input[aria-invalid="true"] { border-color: var(--error); }
.co-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px var(--error); }
.co-error { margin: 6px 0 0; color: var(--error); font-size: 13px; line-height: 1.35; }
.co-hint { margin: 6px 0 0; color: var(--ink-subtle); font-size: 13px; line-height: 1.4; }
.co-hint a, .co-panel a { color: var(--primary-pressed); text-decoration: underline; text-underline-offset: 2px; }
.co-hint--warn { color: var(--warning); }
.co-fieldset { min-width: 0; margin: var(--space-16) 0 0; padding: 0; border: 0; }
.co-fieldset--inline { margin-top: 0; }
.co-fieldset .co-label { padding: 0; }

/* ---------- Переключатель из двух вариантов: оранжевый ползунок плавно скользит к выбранному ---------- */
.co-segment { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radius-input); background: var(--surface-1); }
.co-segment::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-btn); background: var(--primary); transition: transform var(--dur-slow) var(--ease); }
.co-segment:has(.co-segment__item:nth-child(2) input:checked)::before { transform: translateX(100%); }
.co-panel .co-segment, .co-company .co-segment { background: var(--canvas); }
.co-segment__item { position: relative; z-index: 1; display: block; cursor: pointer; }
.co-segment__item input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.co-segment__item span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; transition: color var(--dur) var(--ease); }
.co-segment__item:hover input:not(:checked) + span { color: var(--ink); }
.co-segment__item input:checked + span { color: var(--on-primary); }
.co-segment__item input:focus-visible + span { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); border-radius: var(--radius-btn); }

/* ---------- Карточки выбора оплаты и доставки ---------- */
.co-options { display: flex; flex-direction: column; gap: var(--space-8); }
.co-option { position: relative; display: grid; grid-template-columns: 20px 40px minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-tile); background: var(--canvas); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.co-option:hover { border-color: var(--hairline-strong); }
.co-option:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: inset 0 0 0 1px var(--primary); }
.co-option:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.co-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.co-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-tile); background: var(--surface-1); color: var(--ink); }
.co-option:has(input:checked) .co-option__icon { background: var(--canvas); color: var(--primary-pressed); }
.co-option__icon .icon { width: 22px; height: 22px; }
.co-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-option__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.co-option__text { color: var(--ink-muted); font-size: 13px; line-height: 1.45; }
.co-option__price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.co-option__note { display: block; margin-top: 6px; color: var(--error); font-size: 13px; line-height: 1.4; }
.co-option.is-disabled { cursor: not-allowed; background: var(--surface-1); }
.co-option.is-disabled input { cursor: not-allowed; }
.co-option.is-disabled .co-option__icon, .co-option.is-disabled .co-option__title, .co-option.is-disabled .co-option__text { opacity: 0.55; }

.co-panel { margin-top: var(--space-16); padding: var(--space-16); border-radius: var(--radius-tile); background: var(--surface-1); font-size: 14px; line-height: 1.5; }
.co-panel > p { margin: 0 0 6px; }
.co-panel > p:last-child { margin-bottom: 0; }
.co-panel .co-grid { margin-bottom: var(--space-8); }
.co-company { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-16); padding: var(--space-16); border-radius: var(--radius-tile); background: var(--surface-1); }

/* Блоки, которые раскрываются по выбору (юрлицо, способ доставки, «указать свою»): плавно, без скачка страницы.
   Закрытое содержимое недоступно с клавиатуры (inert) и читалке экрана (aria-hidden). */
.co-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: grid-template-rows var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); }
.co-collapse.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.co-collapse__inner { min-height: 0; overflow: hidden; }
.co-collapse.is-open.is-settled > .co-collapse__inner { overflow: visible; }
.co-grid--tight { row-gap: 0; }
.co-grid--tight > .co-field, .co-grid--tight > .co-fieldset, .co-grid--tight .co-collapse__inner > .co-field { margin: 0; padding-bottom: var(--space-16); }

/* ---------- Загрузка файла: карточка с зоной перетаскивания; зона подсвечивается, пока файл тащат над ней ---------- */
.co-upload { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); overflow: hidden; }
.co-upload__head { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-24) var(--space-24) 0; }
.co-upload__badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink-muted); }
.co-upload__badge .icon { width: 24px; height: 24px; }
.co-upload__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.co-upload__sub { margin: 2px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.co-upload__warn { margin: 0 var(--space-24) 12px; }
.co-dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.co-dropzone__area { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: var(--space-24); padding: 28px var(--space-16); border: 2px dashed var(--hairline); border-radius: var(--radius-tile); background: var(--canvas); text-align: center; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.co-dropzone__icon { width: 40px; height: 40px; margin-bottom: 4px; color: var(--ink-subtle); transition: color 150ms ease; }
.co-dropzone__text { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.co-dropzone__hint { color: var(--ink-subtle); font-size: 12px; line-height: 1.4; }
.co-dropzone__btn { margin-top: 8px; min-height: 36px; padding: 0 16px; font-size: 13px; pointer-events: none; }
.co-dropzone__area:hover { border-color: var(--hairline-strong); }
.co-dropzone__input:focus-visible + .co-dropzone__area { box-shadow: var(--shadow-focus); }
.co-dropzone__drag { display: none; color: var(--primary-pressed); }
.co-upload.is-dragover .co-dropzone__area { border-color: var(--primary); border-style: solid; background: var(--primary-tint); transform: scale(1.01); }
.co-upload.is-dragover .co-dropzone__icon { color: var(--primary); }
.co-upload.is-dragover .co-dropzone__idle { display: none; }
.co-upload.is-dragover .co-dropzone__drag { display: inline; }
.co-files { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: var(--space-24); list-style: none; border-top: 1px solid var(--hairline-soft); }
.co-files:empty { display: none; }
.co-files__item { display: flex; align-items: center; gap: var(--space-12); animation: co-file-in 220ms ease-out; }
@keyframes co-file-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.co-files__type { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.co-files__info { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.co-files__name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.co-files__meta { display: flex; gap: 6px; color: var(--ink-subtle); font-size: 12px; }
.co-files__status { color: var(--success); }
.co-files__ok { flex: none; width: 20px; height: 20px; color: var(--success); }
.co-files__remove { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; }
.co-files__remove:hover { background: var(--surface-1); color: var(--error); }
.co-files__remove:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-files__remove .icon { width: 18px; height: 18px; }

/* ---------- Подсказки города и адреса ---------- */
.co-suggest { position: relative; }
.co-suggest__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 264px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--hairline); border-radius: var(--radius-tile); background: var(--canvas); box-shadow: var(--shadow-tooltip); }
.co-suggest__option { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.35; cursor: pointer; }
.co-suggest__option:hover, .co-suggest__option[aria-selected="true"] { background: var(--surface-1); }
.co-suggest__option--custom { margin-top: 4px; border-top: 1px solid var(--hairline-soft); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--primary-pressed); font-weight: 600; }
.co-combo .co-input { padding-right: 38px; }
.co-combo__chevron { position: absolute; top: 22px; right: 12px; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-muted); cursor: pointer; }

/* ---------- Согласия и кнопка ---------- */
.co-consents { display: flex; flex-direction: column; gap: var(--space-12); padding: 0 var(--space-4); }
.co-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-16); }
.co-submit__total { margin: 0; font-size: 18px; }
.co-submit__btn { min-width: 280px; min-height: 52px; font-size: 16px; }
.co-alert { margin: 0 0 var(--space-16); padding: 14px 16px; border: 1px solid var(--error); border-radius: var(--radius-tile); background: #fbeef2; color: #6b1229; font-size: 14px; line-height: 1.45; }
.co-alert:focus { outline: none; box-shadow: 0 0 0 2px var(--error); }
.co-alert ul { margin: 6px 0 0; padding-left: 1.2em; }
.co-alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Итог заказа ---------- */
.co-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-16); }
.co-summary { position: sticky; top: 96px; padding: var(--space-24); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); }
.co-side .co-summary { position: static; }
.co-summary__title { margin: 0 0 var(--space-16); font-size: 18px; font-weight: 700; }
.co-summary__items { margin: 0 0 var(--space-16); padding: 0; list-style: none; }
.co-summary__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline-soft); font-size: 14px; }
.co-summary__item:first-child { border-top: 0; padding-top: 0; }
.co-summary__item img, .co-summary__noimg { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: contain; background: var(--canvas); }
.co-summary__name { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; }
.co-summary__qty { color: var(--ink-subtle); font-size: 12px; }
.co-summary__item strong { white-space: nowrap; }
/* Крестик «убрать из заказа» у позиции (02.10.2026): колонка появляется, только когда крестик есть (позиций больше одной); кликабельная зона 44 px */
.co-summary__item:has(.co-summary__remove-form:not([hidden])) { grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: var(--space-8) var(--space-12); }
.co-summary__remove-form { margin: 0; }
.co-summary__remove { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-subtle); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.co-summary__remove::before { content: ""; position: absolute; inset: -6px; }
.co-summary__remove .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .co-summary__remove:hover { background: var(--surface-1); color: var(--error); } }
.co-summary__remove:active { transform: scale(0.92); }
.co-summary__remove:focus-visible { outline: none; color: var(--error); box-shadow: var(--shadow-focus); }
.co-summary__item.is-busy { opacity: 0.45; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
/* Вместо убранной позиции: подпись и «Вернуть» */
.co-summary__undo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--hairline); border-radius: var(--radius-tile); background: var(--surface-1); color: var(--ink-muted); font-size: 13px; line-height: 1.35; animation: co-tick var(--dur) var(--ease); }
.co-summary__undo:first-child { margin-top: 0; }
.co-summary__undo-text { min-width: 0; overflow-wrap: anywhere; }
.co-summary__undo-text strong { color: var(--ink); font-weight: 600; }
.co-summary__undo-btn { flex: none; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--primary-pressed); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.co-summary__undo-btn:hover { background: var(--primary-tint); }
.co-summary__undo-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-summary__undo-btn:disabled { opacity: 0.5; cursor: default; }
.co-summary__rows { margin: 0; padding-top: var(--space-12); border-top: 1px solid var(--hairline-soft); }
.co-summary__row { display: flex; justify-content: space-between; gap: var(--space-12); padding: 4px 0; font-size: 14px; }
.co-summary__row dt { color: var(--ink-muted); }
.co-summary__row dd { margin: 0; font-weight: 600; text-align: right; }
.co-summary__muted { color: var(--ink-subtle); font-weight: 400 !important; }
.co-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-8); padding-top: var(--space-12); border-top: 1px solid var(--hairline-soft); font-size: 16px; }
.co-summary__total strong { font-size: 28px; font-weight: 600; line-height: 1.1; }
.co-checkout-btn { display: flex; width: 100%; min-height: 52px; margin-top: var(--space-16); font-size: 16px; }
.co-back { display: block; margin-top: var(--space-12); color: var(--ink-muted); font-size: 14px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.co-back:hover { color: var(--primary-pressed); }
.co-promo { margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--hairline-soft); }
.co-promo__row { display: flex; gap: var(--space-8); }
.co-promo__msg { margin: 6px 0 0; font-size: 13px; }
.co-promo__msg--ok { color: var(--success); }
.co-promo__msg--error { color: var(--error); }
.co-min { margin: var(--space-16) 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #fff6e5; color: #6b4700; font-size: 13px; line-height: 1.4; }
/* Кнопка «в тон сайту»: бежевая плитка, как «Быстрый заказ» на карточке товара */
.co-btn-soft { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-16); border: 0; border-radius: var(--radius-btn); background: var(--surface-1); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.co-btn-soft:hover { background: var(--surface-2); }
.co-btn-soft:active { transform: translateY(1px); }
.co-btn-soft:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* ---------- Корзина ---------- */
.cart-items { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.cart-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 120px 44px; gap: var(--space-16); align-items: center; padding: var(--space-16); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); transition: opacity var(--dur) var(--ease), height var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease), margin var(--dur-slow) var(--ease), border-width var(--dur-slow) var(--ease); }
.cart-item.is-removing { height: 0 !important; margin-block: calc(var(--space-12) / -2); padding-block: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.cart-item__img { display: block; width: 104px; height: 104px; border: 1px solid var(--hairline-soft); border-radius: var(--radius-tile); background: var(--canvas); }
.cart-item__img img { display: block; width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.cart-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-item__name { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.35; transition: color var(--dur) var(--ease); }
.cart-item__name:hover { color: var(--primary-pressed); }
.cart-item__meta { color: var(--ink-subtle); font-size: 13px; }
.cart-item__unit { color: var(--ink-muted); font-size: 14px; }
.cart-item__sum { display: inline-block; font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }
.cart-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: var(--tool-bg); color: var(--tool-ink); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.cart-item__remove:hover { background: var(--surface-1); color: var(--error); }
.cart-item__remove:active { transform: scale(0.94); }
.cart-item__remove:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cart-item__remove .icon { width: 20px; height: 20px; }
.cart-qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-input); background: var(--surface-1); }
.cart-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.cart-qty__btn:hover { background: var(--canvas); }
.cart-qty__btn:active { transform: scale(0.92); }
.cart-qty__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cart-qty__btn .icon { width: 16px; height: 16px; }
.cart-qty__input { width: 48px; height: 42px; padding: 0; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.cart-qty__input::-webkit-outer-spin-button, .cart-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty__input:focus { outline: none; background: var(--canvas); box-shadow: var(--shadow-focus); }
.cart-item.is-busy .cart-item__sum { opacity: 0.5; }

/* ---------- Пустая корзина и «заказ принят» ---------- */
.co-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: 56px var(--space-16); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); text-align: center; }
.co-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-8); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink-muted); }
.co-empty__icon .icon { width: 30px; height: 30px; }
.co-empty__title { margin: 0; font-size: 20px; font-weight: 700; }
.co-empty__text { max-width: 420px; margin: 0 0 var(--space-12); color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
/* ---------- Заказ принят ---------- */
.so-hero { margin-bottom: var(--space-32); padding: var(--space-32) var(--space-32) var(--space-24); border-radius: var(--radius-card); background: var(--surface-1); }
.so-hero__main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-24); }
.so-title { margin: 0; font-size: 36px; font-weight: 500; line-height: 1.15; }
.so-num { color: var(--primary-pressed); font-weight: 600; white-space: nowrap; }
.so-lead { margin: var(--space-16) 0 var(--space-8); max-width: 640px; font-size: 18px; line-height: 1.5; }
.so-mail { max-width: 640px; margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.so-mail strong { color: var(--ink); }
.so-mail--wait { padding: 10px 14px; border-radius: var(--radius-tile); background: #fff6e5; color: #6b4700; }
.so-mail--wait strong { color: inherit; }

/* Что дальше: линия шагов. Выполненный шаг залит оранжевым, текущий отмечен кольцом, будущие серые. */
.so-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 var(--space-16); margin: var(--space-32) 0 0; padding: var(--space-24) 0 0; list-style: none; border-top: 1px solid var(--hairline); }
.so-step { position: relative; display: flex; flex-direction: column; gap: var(--space-12); }
.so-step::before, .so-step::after { content: ""; position: absolute; top: 13px; left: 40px; right: calc(var(--space-16) * -1 + 4px); height: 2px; border-radius: 2px; }
.so-step:last-child::before, .so-step:last-child::after { display: none; }
.so-step::before { background: var(--hairline); }
.so-step::after { background: var(--primary); transform: scaleX(0); transform-origin: left; }
.so-step.is-done::after { transform: scaleX(1); }
.so-step__node { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hairline); background: var(--surface-1); color: var(--on-primary); }
.so-step__node .icon { width: 16px; height: 16px; }
.so-step.is-done .so-step__node { border-color: var(--primary); background: var(--primary); }
.so-step.is-current .so-step__node { border-color: var(--primary); background: var(--canvas); }
.so-step.is-current .so-step__node::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.so-step__body { display: flex; flex-direction: column; gap: 2px; padding-right: var(--space-8); }
.so-step__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.so-step__text { color: var(--ink-muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.so-nowrap { white-space: nowrap; }
.so-step.is-next .so-step__title { color: var(--ink-muted); }
.so-card { background: var(--canvas); }

.co-lines { margin: 0; }
.co-lines__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-12); padding: 8px 0; border-top: 1px solid var(--hairline-soft); font-size: 14px; line-height: 1.45; }
.co-lines__row:first-child { border-top: 0; padding-top: 0; }
.co-lines__row dt { color: var(--ink-muted); }
.co-lines__row dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Движение: характер Corporate (120/200/280 мс, кривая сайта). Двигаем только transform и opacity; выключается у тех, кто просит меньше анимации ---------- */
@keyframes co-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes co-tick { from { opacity: 0.35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes co-spin { to { transform: rotate(360deg); } }
@keyframes co-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes co-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes co-ring { 0% { box-shadow: 0 0 0 0 rgba(237, 97, 51, 0.35); } 70%, 100% { box-shadow: 0 0 0 9px rgba(237, 97, 51, 0); } }
[data-subtotal], [data-total], [data-discount], [data-line-total], [data-co-total], [data-co-total-inline], [data-co-delivery], [data-cart-count] { display: inline-block; }
.is-tick { animation: co-tick var(--dur) var(--ease); }
.co-error:not([hidden]) { animation: co-rise var(--dur) var(--ease); }
.co-alert { animation: co-rise var(--dur) var(--ease); }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--on-primary); border-radius: 50%; animation: co-spin 700ms linear infinite; }
@media (prefers-reduced-motion: no-preference) {
  .co-enter .co-title, .co-enter .co-empty { animation: co-rise var(--dur-slow) var(--ease) both; }
  .co-enter .co-main > *, .co-enter .co-side > *, .co-enter .cart-item, .co-enter .co-summary { animation: co-rise var(--dur-slow) var(--ease) both; animation-delay: 60ms; }
  .co-enter .co-main > :nth-child(2), .co-enter .co-side > :nth-child(2), .co-enter .cart-item:nth-child(2) { animation-delay: 110ms; }
  .co-enter .co-main > :nth-child(3), .co-enter .cart-item:nth-child(3) { animation-delay: 160ms; }
  .co-enter .co-main > :nth-child(4), .co-enter .cart-item:nth-child(4) { animation-delay: 210ms; }
  .co-enter .co-main > :nth-child(n+5), .co-enter .cart-item:nth-child(n+5) { animation-delay: 260ms; }
  .so-hero { animation: co-rise var(--dur-slow) var(--ease) both; }
  .so-num { display: inline-block; animation: co-pop var(--dur-slow) var(--ease) 120ms both; }
  .so-lead, .so-mail { animation: co-rise var(--dur-slow) var(--ease) 180ms both; }
  .so-step__node { animation: co-pop var(--dur) var(--ease) both; animation-delay: calc(220ms + var(--i) * 110ms); }
  .so-step__body { animation: co-rise var(--dur-slow) var(--ease) both; animation-delay: calc(260ms + var(--i) * 110ms); }
  .so-step.is-done::after { animation: co-draw var(--dur-slow) var(--ease) 420ms both; }
  .so-step.is-current .so-step__node { animation: co-pop var(--dur) var(--ease) 330ms both, co-ring 2200ms ease-out 900ms infinite; }
  .so-layout > *, .co-layout--done .co-main > *, .co-layout--done .co-summary { animation: co-rise var(--dur-slow) var(--ease) both; animation-delay: 420ms; }
  .co-layout--done .co-main > :nth-child(2) { animation-delay: 480ms; }
  .co-layout--done .co-summary { animation-delay: 540ms; }
}
@media (prefers-reduced-motion: reduce) {
  .co-dropzone__area, .co-option, .co-input, .co-segment::before, .co-segment__item span, .cart-item, .cart-item__remove, .co-collapse, .co-btn-soft { transition: none; }
  .co-upload.is-dragover .co-dropzone__area { transform: none; }
  .co-files__item { animation: none; }
  .btn.is-loading::after { animation-duration: 1600ms; }
}

@media (max-width: 1023px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .co-summary { position: static; }
  .co-side { position: static; }
}
@media (max-width: 719px) {
  .co-title { font-size: 24px; }
  .so-hero { padding: var(--space-24) var(--space-16) var(--space-16); }
  .so-title { font-size: 26px; }
  .so-lead { font-size: 16px; }
  .so-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .so-step { flex-direction: row; align-items: flex-start; }
  .so-step::before, .so-step::after { top: 36px; bottom: -16px; left: 13px; right: auto; width: 2px; height: auto; }
  .so-step::after { transform: scaleY(0); transform-origin: top; }
  .so-step.is-done::after { transform: scaleY(1); }
  .so-step__body { padding-top: 3px; }
  .co-card { padding: var(--space-16); }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-option { grid-template-columns: 20px minmax(0, 1fr); }
  .co-option__icon { display: none; }
  .co-option input { grid-row: 1 / span 2; }
  .co-option__body { grid-row: 1; }
  .co-option__price { grid-column: 2; grid-row: 2; color: var(--ink-muted); font-weight: 600; }
  .co-segment { display: grid; width: 100%; }
  .co-segment__item span { padding: 0 10px; }
  .co-submit { flex-direction: column; align-items: stretch; }
  .co-submit__btn { min-width: 0; width: 100%; }
  .cart-item { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info remove" "qty qty sum"; gap: var(--space-12); padding: var(--space-12); }
  .cart-item__img { width: 72px; height: 72px; }
  .cart-item__img { grid-area: img; }
  .cart-item__info { grid-area: info; }
  .cart-item__remove { grid-area: remove; align-self: start; }
  .cart-qty { grid-area: qty; justify-self: start; }
  .cart-item__sum { grid-area: sum; align-self: center; }
  .co-lines__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}