/* ==========================================================================
   Корзина (classes/cart.php, Cart::PrintCart / Cart::PrintConfirmCart) и
   страница оформления заказа (shop/confirm.php).

   Раньше обе вёрстки были на <font>/<table>/align=/bgcolor=. Переведено на
   семантичную разметку и токены, с той же дисциплиной именования, что у
   карточки товара (classes/goods.php, классы .pdp-*): каждый компонент —
   свой префикс, модификатор — вторым классом на элементе, без БЭМ-двойных
   дефисов.

   #cart, .del_from_cart, .qtychange, .qtychangeform — имена, на которые
   завязаны assets/js/my.js и inline-обработчики в самой разметке (см.
   AjaxAddToCart/AjaxDelFromCart/AjaxFormOpt/AjaxFormNds/
   AjaxChangeQtyItemFromCart) — переименовывать нельзя, стилизуются здесь.
   ========================================================================== */

/* ================== Модальная корзина (Cart::PrintCart) ==================
   #cart — контейнер, который assets/js/my.js открывает через jQuery UI
   .dialog() по клику на .clearfix-li в шапке. Хром диалога (рамка, шапка,
   крестик закрытия) рисует тема jQuery UI (vendor/ui-lightness) — здесь
   стилизуется только содержимое. */

#cart {
	/* max-width:420px раньше стоял тут же - и оставался у́же, чем обёртка
	   диалога (.cart-dialog, cart.css), когда её расширили до 480px за счёт
	   центрирования и адаптива под мобильные экраны. Контент оказывался
	   у́же самого окна с дурацким отступом справа (жалоба пользователя
	   2026-08-08: "вся инфа в диалогом окне почему-то сдвинулась влево").
	   .cart-dialog уже сам ограничивает ширину диалога - здесь она не нужна. */
	width: 100%;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
}

.cart-toggle {
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.cart-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.cart-toggle-text {
	color: var(--color-ink-soft);
}

.cart-toggle-active {
	color: var(--color-brand-red);
}

.cart-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.cart-item {
	display: grid;
	grid-template-columns: 1fr auto auto auto auto;
	align-items: center;
	column-gap: var(--space-3);
	row-gap: var(--space-1);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.cart-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cart-item-name {
	grid-column: 1 / -1;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-ink);
}

.cart-item-qty,
.cart-item-price,
.cart-item-sum {
	font-size: 13px;
	color: var(--color-ink-soft);
	white-space: nowrap;
}

.cart-item-sum {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-ink);
}

.del_from_cart {
	cursor: pointer;
}

.cart-item-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	/* Раньше в покое не было ни фона, ни рамки - просто серый "×" без формы
	   кнопки, виден только на hover/focus (жалоба пользователя 2026-08-08:
	   "корзина какая-то кривая" - на скриншоте один товар с явной красной
	   кнопкой удаления, другой - с голым крестиком, хотя оба это один и тот
	   же .cart-item-remove, просто под курсором был только первый). Кроме
	   несогласованного вида это ещё и не проходит "reliance on hover only"
	   (сенсорные экраны не наводят курсор) - теперь форма кнопки видна
	   всегда, 24px -> 32px (ближе к минимальному тач-таргету). */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 16px;
	line-height: 1;
	/* !important - .ui-widget-content a { color:#333333 } из vendor-темы
	   (см. комментарий у .cart-checkout-btn) иначе перебивает цвет в покое. */
	color: var(--color-ink-soft) !important;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.cart-item-remove:hover,
.cart-item-remove:focus-visible {
	color: #fff !important;
	background: var(--color-error);
	border-color: var(--color-error);
	outline: none;
}

.cart-nds {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 13px;
}

.cart-nds-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-ink-soft);
	cursor: pointer;
}

.cart-nds-option + .cart-nds-option {
	margin-top: var(--space-2);
}

.cart-clear-form {
	margin: 0 0 var(--space-4);
}

.cart-clear-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) 0;
	background: none;
	border: none;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-ink-soft);
	cursor: pointer;
}

.cart-clear-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cart-clear-btn:hover,
.cart-clear-btn:focus-visible {
	color: var(--color-error);
	outline: none;
}

.cart-summary {
	margin: 0 0 var(--space-4);
	padding-top: var(--space-3);
}

.cart-summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 14px;
	color: var(--color-ink-soft);
}

.cart-summary-row + .cart-summary-row {
	margin-top: var(--space-2);
}

.cart-summary-row strong {
	color: var(--color-ink);
}

.cart-summary-row.cart-summary-total {
	font-size: 15px;
}

.cart-summary-row.cart-summary-total strong {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-brand-red);
}

.cart-note {
	margin: var(--space-2) 0 0;
	font-size: 12px;
	color: var(--color-ink-soft);
}

.cart-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	/* !important - иначе проигрывает vendor/ui-lightness: .ui-widget-content a
	   { color: #333333 } - это (класс+тег) специфичнее, чем один класс
	   .cart-checkout-btn, и побеждает независимо от порядка подключения
	   (жалоба пользователя 2026-08-08: кнопка "Заказать" с чёрным текстом
	   на красном фоне). Та же категория бага, что уже правили у крестика
	   закрытия/фона диалогов - vendor-тема живёт внутри .ui-widget-content,
	   в который попадает всё содержимое #cart. */
	color: #fff !important;
	background: var(--color-brand-red);
	border: none;
	border-radius: var(--radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.cart-checkout-btn:hover,
.cart-checkout-btn:focus-visible {
	background: var(--color-brand-red-dark);
	outline: none;
}

.cart-checkout-btn:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* Пустое состояние — сессия ещё не тронута или корзину очистили целиком. */
.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-2) 0;
}

.cart-empty-text {
	margin: 0;
	color: var(--color-ink-soft);
	line-height: 1.5;
}

.cart-empty-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	/* !important - тот же .ui-widget-content a { color: #333333 } из
	   vendor/ui-lightness, что перебивал .cart-checkout-btn (см. комментарий
	   там). #cart сам становится .ui-widget-content, как только jQuery UI
	   инициализирует его как диалог - эта ссылка живёт внутри. */
	color: var(--color-brand-red) !important;
	text-decoration: none;
}

.cart-empty-link:hover,
.cart-empty-link:focus-visible {
	text-decoration: underline;
}

@media (max-width: 480px) {
	#cart {
		max-width: none;
	}
	.cart-item {
		grid-template-columns: 1fr auto;
	}
	.cart-item-qty,
	.cart-item-price {
		grid-column: 1 / -1;
	}
}

/* ================== Оформление заказа (Cart::PrintConfirmCart,
   shop/confirm.php) ==================
   confirm.php оборачивает вывод PrintConfirmCart в <div id="order_table">
   (id нужен — на него ссылаются AjaxDelFromCart/AjaxChangeQtyItemFromCart
   как на result_id) — сам .checkout ниже стилизует контент внутри. */

/* Список слева, "Сумма+кнопка" - отдельная карточка справа на ≥800px (см.
   .checkout-summary-card ниже) - раньше сумма/кнопка были голым текстом,
   прибитым вправо в потоке страницы, без своей поверхности, что на широких
   экранах выглядело как оторванный от списка фрагмент в пустом поле (жалоба
   заказчицы 2026-08-09: "идейно нравится, но расположение плохо
   выглядит"). */
.checkout {
	/* Раньше свой max-width:1100px + margin:0 auto — центрировался ВТОРОЙ
	   раз внутри уже центрированного .order-section (max-width:1200px),
	   что давало на 42px больший отступ слева/справа, чем у заголовка
	   "Корзина" (.checkout-page-title) над ним — карточки товаров и
	   карточка суммы не совпадали по краю с заголовком страницы (жалоба
	   заказчицы 2026-08-09: "надо чтобы оно было по границам полей").
	   Теперь на всю ширину .order-section - те же левый/правый края, что
	   у заголовка. */
	width: 100%;
	margin: var(--space-7) 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}

@media (min-width: 800px) {
	.checkout {
		grid-template-columns: 1.7fr 1fr;
	}

	.checkout-summary-card {
		position: sticky;
		top: var(--space-5);
	}
}

.checkout-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.checkout-item-photo {
	flex: 0 0 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.checkout-item-photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.checkout-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.checkout-item-name {
	margin: 0 0 var(--space-2);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink);
}

.checkout-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	row-gap: var(--space-2);
	font-size: 13px;
	color: var(--color-ink-soft);
}

.checkout-item-qty-form {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.checkout-item-qty-label {
	color: var(--color-ink-soft);
}

.qtychange.checkout-item-qty-input {
	width: 64px;
	min-height: 36px;
	padding: 0 var(--space-2);
	font-size: 14px;
	font-family: var(--font-body);
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
}

.qtychange.checkout-item-qty-input:focus-visible {
	outline: none;
	border-color: var(--color-brand-red);
	box-shadow: 0 0 0 3px rgba(207, 24, 24, 0.15);
}

.checkout-item-price,
.checkout-item-sum {
	white-space: nowrap;
}

.checkout-item-sum {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-ink);
}

.checkout-item-stock strong,
.checkout-item-stock {
	white-space: nowrap;
}

/* flex-basis:100% в wrap-контейнере .checkout-item-meta заставляет "В наличии"
   всегда переноситься на свою строку - не по случайному стечению длины
   кол-ва/цены/суммы у конкретного товара (жалоба пользователя 2026-08-08:
   "список покупок... они вообще как-то по-разному свёрстаны" - у одного
   товара статус наличия оставался на строке с суммой, у другого - нет,
   в зависимости от того, куда попадала точка переноса). */
.checkout-item-stock {
	flex-basis: 100%;
}

.checkout-item-stock-ok {
	color: var(--color-success);
	font-weight: 600;
}

.checkout-item-stock-err {
	color: var(--color-error);
	font-weight: 600;
}

.checkout-item-remove-form {
	flex: 0 0 auto;
}

.checkout-item-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	/* Форма кнопки видна и в покое, не только на hover - тот же фикс, что у
	   .cart-item-remove в попапе корзины (см. комментарий там). */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 18px;
	line-height: 1;
	color: var(--color-ink-soft);
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.checkout-item-remove:hover,
.checkout-item-remove:focus-visible {
	color: #fff;
	background: var(--color-error);
	border-color: var(--color-error);
	outline: none;
}

/* Карточка-поверхность вокруг суммы+кнопки - тот же приём, что у
   .checkout-item/.top_order_form (см. комментарий у .checkout выше). */
.checkout-summary-card {
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.checkout-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.checkout-summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 14px;
	color: var(--color-ink-soft);
}

/* Своё display:flex выше и UA-правило [hidden]{display:none} равны по
   специфичности - при равенстве побеждает авторский стиль, поэтому без
   этого переопределения #checkoutDeliveryRow (shop/confirm.php,
   изначально hidden, показывается только когда сработала оценка доставки -
   assets/js/my.js) был виден всегда, несмотря на атрибут hidden (тот же
   класс бага уже чинили в pcb-quote.css - см. комментарий там). */
.checkout-summary-row[hidden] {
	display: none;
}

.checkout-summary-row strong {
	color: var(--color-ink);
}

.checkout-summary-row.checkout-summary-total strong {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-brand-red);
}

/* Кнопка "Перейти к оформлению" на /cart/ (classes/cart.php::PrintConfirmCart) -
   тот же .service-cta-btn (style.css), что и на странице "Заказ оформлен".
   На всю ширину карточки .checkout-summary-card - сильный заметный якорь
   действия внизу карточки, а не мелкая кнопка, прижатая к краю. Разблокированная
   кнопка "Отправить" ниже минимальной суммы - отдельная защита на самой
   /checkout/ (assets/js/formordercheck.js), эта кнопка - только чтобы не
   пускать туда раньше времени с самого /cart/. */
.cart-page-cta {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.cart-page-cta .service-cta-btn {
	width: 100%;
}

.checkout-cta-btn-disabled {
	pointer-events: none;
	background: var(--color-border);
	color: var(--color-ink-soft);
}

.checkout-cta-btn-disabled:hover {
	background: var(--color-border);
}

.cart-page-minorder-note {
	margin: var(--space-2) 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-ink-soft);
	text-align: center;
}

.checkout-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 900px;
	margin: 0 auto;
	padding: var(--space-7) var(--space-4);
	text-align: center;
}

.checkout-empty-text {
	margin: 0;
	color: var(--color-ink-soft);
}

.checkout-empty-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--color-brand-red);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.checkout-empty-link:hover,
.checkout-empty-link:focus-visible {
	background: var(--color-brand-red-dark);
	outline: none;
}

@media (max-width: 620px) {
	/* Раньше .checkout-item { flex-wrap: wrap } - на узких экранах кнопке
	   "×" (flex: 0 0 auto, третий элемент строки после фото и текста) не
	   хватало места в строке, и она переносилась на СВОЮ строку целиком, с
	   выравниванием по левому краю - повисала отдельным квадратом под
	   "В наличии", оторванная от карточки (жалоба заказчицы 2026-08-09:
	   "товары... странно расположены"). Вместо переноса всей строки -
	   кнопка удаления снята с потока и приколота в правый верхний угол
	   карточки, как и на десктопе (там она визуально там же благодаря
	   align-items:flex-start и порядку во flex-строке, просто не нужно
	   position:absolute - хватает места). padding-right у самой карточки
	   освобождает под неё место, чтобы текст названия/статуса не наезжал. */
	.checkout-item {
		position: relative;
		padding-right: calc(var(--space-4) + 40px);
	}
	.checkout-item-photo {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
	}
	.checkout-item-remove-form {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cart-checkout-btn,
	.cart-item-remove,
	.checkout-item-remove {
		transition: none;
	}
}

/* ================== Хром jQuery UI dialog вокруг #cart ==================
   Раньше был нестилизованной темой vendor/ui-lightness — оранжевая шапка
   диалога (#f6a828), выбивалась из красно-чёрного бренда сайта (жалоба
   пользователя 2026-08-02: «проблема с версткой корзины»). dialogClass:
   "cart-dialog" добавлен в assets/js/my.js (все 4 вызова .dialog() для
   #cart) специально, чтобы стилизовать только этот диалог, не трогая
   общую тему vendor (используется и другими .dialog(), напр. #minorder). */
.cart-dialog.ui-widget-content,
.minorder-dialog.ui-widget-content {
	/* Без явного background побеждает серый фон темы vendor/ui-lightness
	   (жалоба пользователя 2026-08-08: "фон серого цвета, а мы везде делали
	   белый фон для окон диалоговых") - белый, как у попапа входа
	   (panel-login.css .loginfild) и у .order-detail-dialog-chrome. */
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(23, 20, 18, 0.16);
}

/* Позиционирование #cart. Раньше 4 вызова .dialog() в my.js держали жёсткое
   "position: {my:'right+300%', at:'top'}" (расчёт под старую вёрстку шапки):
   на практике окно прилипало к top:0 и обрезалось правым краем экрана
   (жалоба пользователя 2026-08-08: "не нравится диалоговое окно корзины") -
   правили центрированием по образцу попапа входа. Пользователь позже
   показал референс (irnby): клик по значку корзины в шапке открывает
   выпадающую панель ИЗ-ПОД значка, а не модалку по центру экрана
   ("нажимая на наш значок корзины вот так всплывает корзина, а не по
   середине окна"). На широких экранах - панель у правого края под шапкой;
   на узких (нет места сбоку под 480px-панель) - остаётся по центру, тот же
   приём, что у остальных диалогов сайта. !important - иначе проигрывает
   инлайн top/left/margin, которые jQuery UI сам проставляет на элемент при
   открытии диалога. */
.cart-dialog {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	width: min(480px, calc(100vw - 2 * var(--space-5))) !important;
	max-height: calc(100vh - 2 * var(--space-5));
	overflow-y: auto;
}

@media (min-width: 768px) {
	.cart-dialog {
		top: calc(var(--space-8) + var(--space-6)) !important;
		left: auto !important;
		/* Было "right: var(--space-5)" - фиксированный отступ от края
		   ОКНА, а не от правого края шапки/.goods (max-width:1200,
		   margin:auto). На широких экранах шапка сама центрирована и её
		   правый край дальше от края окна, чем 24px - попап выступал за
		   эту границу (жалоба 2026-08-09: "корзина криво расположена").
		   Формула ниже - та же, что уже используется для .order-notice/.m
		   в footer.css/style.css: max(отступ, (доступная ширина - 1200)/2
		   + отступ), только через right, а не margin. 100% - не 100vw:
		   100vw включает ширину скроллбара и на некоторых экранах давал
		   ещё +10-15px мимо края шапки. */
		right: max(var(--space-5), calc((100% - 1200px) / 2)) !important;
		transform: none;
		max-height: calc(100vh - var(--space-8) - var(--space-6) - var(--space-5));
	}
}

.cart-dialog .ui-dialog-titlebar,
.minorder-dialog .ui-dialog-titlebar {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background: var(--color-brand-red);
}

.cart-dialog .ui-dialog-title,
.minorder-dialog .ui-dialog-title {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.cart-dialog .ui-dialog-titlebar-close,
.order-detail-dialog-chrome .ui-dialog-titlebar-close,
.minorder-dialog .ui-dialog-titlebar-close {
	/* !important - иначе проигрывает .ui-state-default темы (постоянный
	   класс на этой кнопке, не только при наведении: border 1px #cccccc +
	   background #f6f6f6), тот же порядок подключения, что у .ui-widget-overlay. */
	border: 0 !important;
	background: transparent !important;
	border-radius: var(--radius-sm);
	/* display:flex у самой кнопки - глиф центрируем этим, а не абсолютным
	   позиционированием темы (см. .ui-icon ниже). */
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Сам глиф "×" внутри кнопки - это не текст, а спрайт-картинка темы
   (ui-icons_ef8c08_256x240.png - ef8c08 - жёлто-оранжевый, зашит в саму
   картинку), никакой background/color тут не поможет. Прячем картинку и
   рисуем крестик заново тем же символом (\2715), что уже используется в
   [id='login-toggle'] .login-toggle:after (panel-login.css) - для
   единообразия крестиков закрытия по сайту. */
.cart-dialog .ui-dialog-titlebar-close .ui-icon,
.order-detail-dialog-chrome .ui-dialog-titlebar-close .ui-icon,
.minorder-dialog .ui-dialog-titlebar-close .ui-icon {
	background-image: none !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	display: inline-block;
	/* Тема сама навешивает на .ui-icon position:absolute;top:10px;left:10px;
	   margin:-8px 0 0 -8px - расчёт центровки под ФИКСИРОВАННУЮ иконку
	   16×16px (старый спрайт). Наш текстовый глиф "×" по метрикам шрифта не
	   16×16 (уже, чем высокий) - тот же отступ сдвигал его от центра кнопки
	   (жалоба пользователя 2026-08-08: "крестик... не по середине кнопки").
	   Сбрасываем позиционирование темы - центрируем flexbox'ом кнопки выше,
	   а не пиксельным расчётом, который ломается при любой смене размера глифа. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
}

.cart-dialog .ui-dialog-titlebar-close .ui-icon::before,
.order-detail-dialog-chrome .ui-dialog-titlebar-close .ui-icon::before,
.minorder-dialog .ui-dialog-titlebar-close .ui-icon::before {
	content: '\2715';
	display: block;
	font-size: 16px;
	line-height: 1;
	color: #fff;
}

/* jQuery UI кладёт в кнопку закрытия ВТОРОЙ span - .ui-button-text
   ("close", для скринридеров), спрятанный только text-indent:-1e7px. Сам
   текст уходит за экран, но БОКС span'а остаётся во flex-строке кнопки
   (см. display:flex у .ui-dialog-titlebar-close выше) и толкает .ui-icon
   влево от центра - на это и жаловался пользователь ("крестик... не по
   середине кнопки", 2026-08-08). Изымаем из раскладки стандартным
   sr-only-приёмом (не display:none - так текст остаётся доступным
   скринридерам, просто не участвует в flex). */
.cart-dialog .ui-dialog-titlebar-close .ui-button-text,
.order-detail-dialog-chrome .ui-dialog-titlebar-close .ui-button-text,
.minorder-dialog .ui-dialog-titlebar-close .ui-button-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}

/* jQuery UI ставит фокус на крестик сразу при открытии диалога, а тема
   vendor/ui-lightness красит .ui-state-hover/.ui-state-focus/.ui-state-active
   в жёлто-оранжевый (#fdf5ce/#fbcb09) - крестик оказывался оранжевым уже в
   момент открытия, без единого движения мыши (жалоба пользователя
   2026-08-08 - "крестик закрытия не правильный"). !important по той же
   причине, что у .ui-widget-overlay выше: cart.css грузится раньше темы. */
.cart-dialog .ui-dialog-titlebar-close:hover,
.cart-dialog .ui-dialog-titlebar-close:focus,
.cart-dialog .ui-dialog-titlebar-close.ui-state-hover,
.cart-dialog .ui-dialog-titlebar-close.ui-state-focus,
.cart-dialog .ui-dialog-titlebar-close.ui-state-active,
.order-detail-dialog-chrome .ui-dialog-titlebar-close:hover,
.order-detail-dialog-chrome .ui-dialog-titlebar-close:focus,
.order-detail-dialog-chrome .ui-dialog-titlebar-close.ui-state-hover,
.order-detail-dialog-chrome .ui-dialog-titlebar-close.ui-state-focus,
.order-detail-dialog-chrome .ui-dialog-titlebar-close.ui-state-active,
.minorder-dialog .ui-dialog-titlebar-close:hover,
.minorder-dialog .ui-dialog-titlebar-close:focus,
.minorder-dialog .ui-dialog-titlebar-close.ui-state-hover,
.minorder-dialog .ui-dialog-titlebar-close.ui-state-focus,
.minorder-dialog .ui-dialog-titlebar-close.ui-state-active {
	background: var(--color-brand-red-dark) !important;
	border: 0 !important;
}

.cart-dialog .ui-dialog-content {
	padding: var(--space-4);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink);
}

/* Центр и по горизонтали, и по вертикали - для ЛЮБОГО текста в этом
   диалоге (предупреждение о минимальной сумме заказа, ShowNotice в
   assets/js/auth.js) - жалоба 2026-08-09: "все такие уведомительные
   текста должны быть по середине как по вертикале так и по горизонтале".
   min-height даёт вертикали место для центрирования короткого текста
   (без него flex сжимался бы точно по контенту, и justify-content:center
   был бы не виден). */
.minorder-dialog .ui-dialog-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: var(--space-4);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink);
	text-align: center;
}

/* #minorder переиспользует хром .cart-dialog/.order-detail-dialog-chrome
   (шапка/крестик/оверлей), но нужен и центр экрана: у него нет своего JS
   position (только modal:true), а ширина по умолчанию у jQuery UI (300px)
   слишком узкая под текст "Минимальная сумма заказа...". Тот же приём
   position:fixed+transform, что у .order-detail-dialog-chrome в account.css. */
.minorder-dialog {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	width: min(420px, calc(100vw - 2 * var(--space-5))) !important;
}

/* Затемнение позади ЛЮБОГО modal:true jQuery UI dialog (#cart в minorder-
   сценарии, #minorder, order-detail.js) - тема vendor/ui-lightness рисует
   тут не просто затемнение, а серую диагональную штриховку
   (ui-bg_diagonals-thick_20_666666_40x40.png), совсем не по бренду (жалоба
   пользователя 2026-08-08 - "странный полосатый фон"). Не через dialogClass
   (он красит только .ui-dialog, не оверлей) - global override, тот же
   rgba(0,0,0,.4), что у подложки попапа входа (panel-login.css .mask-content),
   для визуальной согласованности всех модалок на сайте. */
.ui-widget-overlay {
	/* !important - иначе проигрывает по порядку подключения: cart.css
	   грузится в header.inc РАНЬШE самой темы vendor/ui-lightness (та
	   идёт почти в конце списка), и при равной специфичности (класс
	   против класса) побеждает подключённый последним. */
	background: rgba(0, 0, 0, 0.4) !important;
	opacity: 1 !important;
}