/* ============================================================
 * AUTO108 v4 · Корзина (/preview-v4/cart/)
 * Override-стили для шаблона v4_cart компонента sale.basket.basket.
 * Шаблон унаследован от 108_personal_cart (Bitrix mustache-разметка),
 * поэтому селекторы привязаны к существующим классам и data-entity.
 * Подключается из header.php auto108_v4.
 * ============================================================ */

/* ---------- Внешняя обёртка страницы ---------- */
.v4-cart-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
}

.v4-cart-page__title {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 28px;
	font-weight: 800;
	color: var(--ink-900, #021138);
	margin: 0 0 24px;
	letter-spacing: -0.01em;
}

/* ---------- Десктоп двухколоночный layout ---------- */
@media (min-width: 1076px) {
	#basket-root {
		display: grid;
		grid-template-columns: 1fr 360px;
		grid-template-areas:
			"warning warning"
			"items   total";
		column-gap: 32px;
	}
	#basket-root > .row:nth-of-type(1) { grid-area: warning; }
	#basket-root > .row:nth-of-type(2) { grid-area: items; min-width: 0; }
	#basket-root > .row:nth-of-type(3) {
		grid-area: total;
		position: sticky;
		top: 80px;
		align-self: start;
		margin: 0;
	}
	#basket-root > .row:nth-of-type(3) > .col { padding: 0; }
}

/* ---------- Корневой контейнер ---------- */
#basket-root.bx-basket {
	font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ink-800);
	opacity: 1 !important;
}
#basket-root .row { margin: 0; }
#basket-root .col { padding: 0; }

/* ---------- Список товаров ---------- */
.basket-items-list-wrapper {
	background: var(--panel, #fff);
	border: 1px solid var(--line);
	border-radius: var(--radius, 10px);
	padding: 0;
	overflow: hidden;
	margin-bottom: 0;
}

.basket-items-list-container { margin: 0 !important; }

.basket-items-list-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: transparent;
}

.basket-items-list-table thead { display: none; } /* собственная разметка ниже */

.basket-items-list-item-container {
	border-bottom: 1px solid var(--line-soft, #EDF2F8);
	transition: background .15s;
}
.basket-items-list-item-container:last-child { border-bottom: 0; }
.basket-items-list-item-container:hover { background: var(--ink-100, #F5F8FC); }

.basket-items-list-item-container > td {
	vertical-align: middle;
	padding: 16px 12px;
	border: 0;
}

/* Фото */
.basket-items-list-item-photo {
	width: 120px;
	padding-left: 20px !important;
}
.basket-item-block-image {
	width: 96px;
	height: 96px;
	background: var(--ink-100, #F5F8FC);
	border-radius: 8px;
	overflow: hidden;
	display: grid;
	place-items: center;
	position: relative;
}
.basket-item-image-link { display: block; width: 100%; height: 100%; }
.basket-item-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}
.basket-item-label-ring {
	position: absolute;
	top: 6px;
	left: 6px;
	background: oklch(0.94 0.05 30);
	color: oklch(0.5 0.18 30);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 5px;
}

/* Название и свойства */
.basket-items-list-item-descriptions { min-width: 0; }
.basket-items-list-item-descriptions-inner { display: block; }

.basket-item-info-name {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 6px;
	color: var(--ink-900, #021138);
}
.basket-item-info-name-link {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}
.basket-item-info-name-link:hover { color: var(--accent, #238EE3); }

.basket-item-block-properties { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.basket-item-property,
.basket-item-property-custom {
	display: flex;
	gap: 4px;
	font-size: 12px;
	color: var(--ink-500, #6B7A90);
	line-height: 1.4;
}
.basket-item-property-name,
.basket-item-property-custom-name { color: var(--ink-500); }
.basket-item-property-name::after { content: ':'; }
.basket-item-property-value,
.basket-item-property-custom-value { color: var(--ink-800); }

/* Степпер количества */
.basket-items-list-item-amount {
	width: 130px;
	padding: 16px 8px !important;
}
.basket-item-block-amount {
	display: grid;
	grid-template-columns: 32px 1fr 32px;
	align-items: stretch;
	border: 1px solid var(--accent, #238EE3);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	height: 36px;
	max-width: 110px;
}
.basket-item-amount-btn-minus,
.basket-item-amount-btn-plus {
	background: transparent;
	color: var(--accent, #238EE3);
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	user-select: none;
	transition: background .12s;
	border: 0;
}
.basket-item-amount-btn-minus::before { content: '−'; }
.basket-item-amount-btn-plus::before { content: '+'; }
.basket-item-amount-btn-minus:hover,
.basket-item-amount-btn-plus:hover { background: rgba(35,142,227,0.08); }

.basket-item-amount-filed-block {
	border-left: 1px solid var(--line, #E4EAF1);
	border-right: 1px solid var(--line, #E4EAF1);
	display: grid;
	place-items: center;
}
.basket-item-amount-filed {
	width: 100%;
	height: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-900, #021138);
	outline: none;
	padding: 0;
}
.basket-item-amount-field-description {
	display: none; /* «шт» — не нужен, кратко и понятно */
}

/* Цена за штуку */
.basket-items-list-item-price.basket-items-list-item-price-for-one {
	width: 130px;
	text-align: right;
}
.basket-item-block-price { font-family: var(--font-display, 'Manrope', sans-serif); }
.basket-item-price-old {
	font-size: 12px;
	color: var(--ink-500, #6B7A90);
	text-decoration: line-through;
	margin-bottom: 2px;
}
.basket-item-price-current {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900, #021138);
}
.basket-item-price-title {
	font-size: 11px;
	color: var(--ink-500, #6B7A90);
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.basket-item-price-difference {
	font-size: 11px;
	color: var(--ok, #25D366);
	margin-top: 2px;
}

/* Сумма */
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) {
	width: 130px;
	text-align: right;
}
.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current {
	font-size: 17px;
	color: var(--accent, #238EE3);
}

/* Удалить — оставляем только колонку справа от суммы.
 * Mustache-шаблон выводит дублирующую иконку внутри .basket-item-block-info
 * (для мобильной разметки 108_personal_cart). В v4 она избыточна: и на десктопе,
 * и на мобиле пользуемся одной кнопкой в правом столбце .basket-items-list-item-remove. */
.basket-item-block-info > .basket-item-actions-remove { display: none !important; }

.basket-items-list-item-remove,
.basket-items-list-item-remove.d-none.d-md-block {
	width: 48px;
	padding-right: 16px !important;
	display: table-cell !important;
}
.basket-item-block-actions { display: grid; place-items: center; }
.basket-item-actions-remove {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: var(--ink-100, #F5F8FC);
	color: var(--ink-500, #6B7A90);
	cursor: pointer;
	display: grid;
	place-items: center;
	border: 0;
	transition: color .12s, background .12s;
}
.basket-item-actions-remove::before {
	content: '';
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>") no-repeat center / contain;
}
.basket-item-actions-remove:hover {
	color: #E0394A;
	background: #FFF5F6;
}

/* Восстановление (после удаления) */
.basket-items-list-item-container-expend {
	background: var(--accent-soft, #EDF2F8);
}
.basket-items-list-item-notification {
	padding: 16px 20px !important;
}
.basket-items-list-item-notification-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	color: var(--ink-800);
	font-size: 13px;
}
.basket-items-list-item-removed-block a {
	color: var(--accent, #238EE3);
	font-weight: 600;
	text-decoration: none;
	margin-right: 12px;
}
.basket-items-list-item-clear-btn {
	cursor: pointer;
	color: var(--ink-500);
	font-size: 18px;
}
.basket-items-list-item-clear-btn::before { content: '×'; }

/* ---------- Total / Чекаут блок ---------- */
.basket-checkout-container {
	background: var(--panel, #fff);
	border: 1px solid var(--line);
	border-radius: var(--radius, 10px);
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* Купон */
.basket-coupon-section {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-soft, #EDF2F8);
	margin-bottom: 16px;
}
.basket-coupon-block-field-description {
	font-size: 12px;
	color: var(--ink-500, #6B7A90);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.basket-coupon-section .form,
.basket-coupon-section .form-group { margin: 0; position: relative; }
.basket-coupon-section input.form-control {
	width: 100%;
	padding: 10px 38px 10px 12px;
	background: var(--ink-100, #F5F8FC);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 13px;
	color: var(--ink-900);
	outline: none;
	font-family: inherit;
	transition: border-color .15s, background .15s;
}
.basket-coupon-section input.form-control:focus {
	border-color: var(--accent, #238EE3);
	background: #fff;
}
.basket-coupon-block-coupon-btn {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--accent, #238EE3);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.basket-coupon-block-coupon-btn::before {
	content: '';
	width: 14px;
	height: 14px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.basket-coupon-alert-section { margin-top: 8px; }
.basket-coupon-alert {
	background: var(--ok-soft, #E8F8EE);
	color: oklch(0.35 0.12 155);
	font-size: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.basket-coupon-alert.text-danger { background: #FFF1F1; color: #B5212E; }
.basket-coupon-alert .close-link {
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
	font-size: 11px;
}

/* Итого */
.basket-checkout-section-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.basket-checkout-block-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.basket-checkout-block-total-title {
	font-size: 13px;
	color: var(--ink-500, #6B7A90);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.basket-checkout-block-total-price-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-bottom: 16px;
}
.basket-coupon-block-total-price-old {
	font-size: 13px;
	color: var(--ink-500);
	text-decoration: line-through;
}
.basket-coupon-block-total-price-current {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 28px;
	font-weight: 800;
	color: var(--ink-900, #021138);
	letter-spacing: -0.01em;
	line-height: 1;
}
.basket-coupon-block-total-price-difference {
	font-size: 12px;
	color: var(--ok, #25D366);
	margin-top: 4px;
}

/* Кнопка «Оформить заказ» */
.basket-checkout-block-btn { margin-top: 8px; }
button.basket-btn-checkout {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	background: var(--accent, #238EE3);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s;
}
button.basket-btn-checkout:hover { background: var(--accent-hover, oklch(0.48 0.17 240)); }
button.basket-btn-checkout.disabled,
button.basket-btn-checkout:disabled {
	background: var(--ink-150);
	color: var(--ink-500);
	cursor: not-allowed;
}

/* Сброс старых bootstrap-классов в шаблоне */
.basket-checkout-block-btn .w-35,
.basket-checkout-block-btn .float-right,
.basket-checkout-block-btn .btn-sm { width: 100%; float: none; padding: 14px 18px; font-size: 14px; }

/* ---------- Пустая корзина ---------- */
.bx-sbb-empty-cart-container {
	background: var(--panel, #fff);
	border: 1px solid var(--line);
	border-radius: var(--radius, 10px);
	padding: 64px 32px;
	text-align: center;
}
.bx-sbb-empty-cart-image { display: none; }
.bx-sbb-empty-cart-text {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 8px;
}
.bx-sbb-empty-cart-desc {
	font-size: 14px;
	color: var(--ink-600);
}
.bx-sbb-empty-cart-desc a {
	color: var(--accent, #238EE3);
	font-weight: 600;
	text-decoration: none;
}
.bx-sbb-empty-cart-desc a:hover { text-decoration: underline; }

/* ---------- Алерты / предупреждения ---------- */
#basket-warning,
.alert-warning {
	background: oklch(0.96 0.05 70);
	color: oklch(0.4 0.15 70);
	border: 1px solid oklch(0.85 0.12 70);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
#basket-warning .close,
.alert-warning .close {
	cursor: pointer;
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	opacity: 0.7;
}

/* ---------- Бейдж «оптовая цена» ---------- */
.v4-cart-wholesale-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ok-soft, #E8F8EE);
	color: oklch(0.35 0.12 155);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 12px;
	vertical-align: middle;
}

/* ---------- Мобильная вёрстка ---------- */
@media (max-width: 1075px) {
	.v4-cart-page { padding: 16px; }
	.v4-cart-page__title { font-size: 22px; margin-bottom: 16px; }

	.basket-items-list-item-container { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; padding: 12px; }
	.basket-items-list-item-container > td { padding: 0 !important; vertical-align: top; }

	.basket-items-list-item-photo { width: 80px; padding-left: 0 !important; grid-column: 1; grid-row: 1 / span 2; }
	.basket-item-block-image { width: 80px; height: 80px; }

	.basket-items-list-item-descriptions { grid-column: 2 / span 2; grid-row: 1; }
	.basket-item-info-name { font-size: 14px; }

	.basket-items-list-item-amount { grid-column: 2; grid-row: 2; width: auto; }
	.basket-item-block-amount { max-width: 120px; }

	.basket-items-list-item-price { grid-column: 3; grid-row: 2; width: auto; text-align: right; }
	.basket-items-list-item-price-for-one { display: none !important; }

	.basket-items-list-item-remove,
	.basket-items-list-item-remove.d-none.d-md-block {
		position: absolute;
		top: 12px;
		right: 12px;
		width: auto;
		padding: 0 !important;
		display: block !important;
	}
	.basket-items-list-item-container { position: relative; }

	#basket-root .row:nth-of-type(3) {
		position: sticky;
		bottom: 0;
		background: var(--bg, #fff);
		padding: 8px 0 0;
		margin-top: 12px;
		z-index: 10;
	}
}