/* ═══════════════════════════════════════════════════════════════════════════
   Раздел 7 · Корзина. Геометрия из макета: «Корзина — десктоп» 3726:11748,
   «Корзина — мобильная» 3593:387, «Пустая корзина» 4309:33647 и 3601:485.

   Рамка 1280 с полями 80 на десктопе, боковое поле 8 на телефоне.
   ═══════════════════════════════════════════════════════════════════════════ */

.sh-kz { padding: 8px 0 32px; }

.sh-kz-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 8px;
}

.woocommerce-cart .main-page-wrapper .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-cart .page-title,
.woocommerce-cart .wd-sidebar-opener,
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

@media (min-width: 768px) {
	.sh-kz { padding: 8px 0 48px; }
	.sh-kz-wrap { padding: 0 16px; }
}

@media (min-width: 1312px) {
	.sh-kz-wrap { padding: 0; }
}

/* ── Шапка ────────────────────────────────────────────────────────────────── */

/* Крошки — только от 768. На телефоне вместо них строка возврата, как на всех
   остальных экранах; сама она прячется от 768 общим правилом из shell.css. */
.sh-kz-crumbs {
	display: none;
	margin: 16px 0 24px;
	font-size: 13px;
	color: #6e6e7a;
}

.sh-kz-crumbs a { color: #6e6e7a; }
.sh-kz-crumbs a:hover { color: #a73afd; }
.sh-kz-crumbs span { margin: 0 6px; }

@media (min-width: 768px) {
	.sh-kz-crumbs { display: block; }
}

/* Строка «‹ Продолжить покупки» — решение Виталия 07.09.2026, п. 405, вариант «а».
   Корзина была единственным мобильным экраном без пути сверху: на остальных
   стоит «‹ …», а здесь под поиском сразу H1. Отступ снизу не нужен — своё
   верхнее поле есть у H1. */
.sh-kz-wrap .sh-vozvrat { margin: 16px 0 0; }

.sh-kz-h1 {
	margin: 14px 0 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #1e1e1e;
}

@media (min-width: 768px) {
	.sh-kz-h1 { margin: 0 0 24px; font-size: 32px; }
}

/* ── Колонки ──────────────────────────────────────────────────────────────── */

.sh-kz-cols { display: block; }

@media (min-width: 1024px) {
	/* Десктоп: товары 848 и итог 400 с промежутком 32 — из макета.
	   Колонка товаров резиновая, чтобы на 1024–1311 ничего не срезало. */
	.sh-kz-cols {
		display: grid;
		grid-template-columns: minmax(0, 848px) 400px;
		gap: 32px;
		align-items: start;
	}
}

/* ⚠ Раскладку держат оба: .sh-kz-tovary снаружи и .sh-kz-spisok внутри.
   Обёртку добавили, чтобы ответ на «+» подменял только строки и не уносил
   то, что печатают хуки Woo, — и она тут же съела промежуток между строками:
   flex-контейнер остался с одним ребёнком, а gap применяется к детям.
   Замер 30.08 после правки: было 0 вместо 12. */
.sh-kz-tovary,
.sh-kz-spisok { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 768px) {
	.sh-kz-tovary,
	.sh-kz-spisok { gap: 12px; }
}

/* ── Строка товара ────────────────────────────────────────────────────────── */

.sh-kz-stroka {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 14px;
	border-radius: 16px;
	background: #ffffff;
}

/* ⚠ Коробка 3:4 и contain — решение Виталия 07.09.2026, п. 404, вариант «а».
   Было 64 × 64 с cover, и фото товара (3:4 у 5557 из 5638) срезалось на 21 px,
   то есть на четверть кадра: как раз верх и низ, где у чехла вырез камеры
   и подпись модели. Пропорцию задаём один раз здесь, десктоп меняет только
   ширину — иначе 3:4 пришлось бы пересчитывать в двух местах.
   contain, а не cover: у товара на белом фоне обрезка по центру показывает
   белое поле, а не товар. То же правило в оформлении и в окне корзины. */
.sh-kz-foto {
	display: block;
	width: 64px;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background: #f5f5f6;
}

.sh-kz-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sh-kz-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sh-kz-imya {
	font-size: 14px;
	line-height: 1.4;
	color: #525256;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sh-kz-imya:hover { color: #a73afd; }

/* Артикул серым, а не зелёным: зелёный в системе значит «есть в наличии»,
   а артикул — не состояние товара. Расхождение с макетом намеренное. */
.sh-kz-artikul {
	font-size: 12px;
	line-height: 1.35;
	color: #6e6e7a;
}

.sh-kz-nalichie {
	font-size: 12px;
	line-height: 1.35;
	color: #0c7c3b;
}

.sh-kz-nalichie.is-net { color: #6e6e7a; }

.sh-kz-cena-mob {
	margin-top: 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #ff4545;
}

/* Цена отдельной колонкой — только десктоп */
.sh-kz-cena { display: none; }

/* Woodmart красит любую сумму своим фирменным цветом и весом, поэтому цену
   в корзине перебиваем по месту: класс продублирован ради веса селектора,
   тот же приём, что у товарной плитки. */
.sh-kz-cena-mob.sh-kz-cena-mob,
.sh-kz-cena.sh-kz-cena,
.sh-kz-cena-mob.sh-kz-cena-mob .amount,
.sh-kz-cena.sh-kz-cena .amount,
.sh-kz-cena-mob.sh-kz-cena-mob bdi,
.sh-kz-cena.sh-kz-cena bdi {
	color: #ff4545;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

/* Сумма в итоге — тем же красным, что цена товара */
.sh-kz-summa-cifra.sh-kz-summa-cifra,
.sh-kz-summa-cifra.sh-kz-summa-cifra .amount,
.sh-kz-summa-cifra.sh-kz-summa-cifra bdi {
	color: #ff4545;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

/* ⚠ Степпера в макете нет: добавлен как рабочий минимум, реестр п. 193 */
.sh-kz-kolvo {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 8px;
	padding: 2px;
	border-radius: 999px;
	background: #f5f5f6;
	width: max-content;
}

.sh-kz-shag {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #ffffff;
	color: #1e1e1e;
	font-size: 16px;
	line-height: 28px;
	text-align: center;
}

.sh-kz-shag:hover { background: #f8e7ff; color: #a73afd; }

.sh-kz-chislo {
	min-width: 28px;
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	color: #1e1e1e;
}

/* Крестик удаления — на обеих платформах: в макете на телефоне его нет,
   и убрать товар с телефона было бы нечем. Реестр, п. 193. */
.sh-kz-ubrat {
	position: relative;
	width: 24px;
	height: 24px;
	flex: none;
}

.sh-kz-ubrat span::before,
.sh-kz-ubrat span::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 11px;
	width: 14px;
	height: 1.75px;
	border-radius: 2px;
	background: #6e6e7a;
}

.sh-kz-ubrat span::before { transform: rotate(45deg); }
.sh-kz-ubrat span::after { transform: rotate(-45deg); }

.sh-kz-ubrat:hover span::before,
.sh-kz-ubrat:hover span::after { background: #ff4545; }

/* ── Убранный товар ───────────────────────────────────────────────────────── */

/* Заглушка на месте убранной строки — решение владельца 30.08. Удаление идёт
   одним запросом, но не молча: строка становится следом от себя, и отмена
   стоит там, куда смотрит глаз, а не полосой уведомления у шапки.

   ⚠ Своего хранилища у неё нет: строка лежит в removed_cart_contents
   WooCommerce до конца сессии, оттуда её и достаёт «Вернуть». */
.sh-kz-ubrano {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	background: #f5f5f6;
}

.sh-kz-ubrano-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.4;
	color: #6e6e7a;
}

.sh-kz-vernut {
	flex: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #a73afd;
}

.sh-kz-vernut:hover { text-decoration: underline; }

/* На пустой корзине заглушки стоят своим списком под заголовком: убрали
   последнее — вернуть должно быть чем. Ширину держим по колонке товаров,
   иначе полоса растягивается на все 1280 и спорит с центрованным блоком. */
.sh-kz-spisok-pusto {
	max-width: 560px;
	margin: 0 auto 24px;
}

/* Пока идёт запрос — гасим то, что уезжает: строку при удалении и заглушку
   при возврате. Тот же приём и та же прозрачность, что у правой колонки. */
.sh-kz-stroka.is-ubiraem,
.sh-kz-ubrano.is-ubiraem {
	opacity: .55;
	pointer-events: none;
	transition: opacity .12s ease;
}

@media (min-width: 768px) {
	/* Десктоп: фото 72×96, цена отдельной колонкой справа, рамка вместо тени */
	.sh-kz-stroka {
		grid-template-columns: 72px minmax(0, 1fr) auto 100px 24px;
		gap: 16px;
		align-items: center;
		padding: 16px 20px 16px 16px;
		border: 1px solid #eeeeee;
		border-radius: 12px;
	}

	.sh-kz-foto { width: 72px; }
	.sh-kz-imya { font-size: 16px; font-weight: 500; line-height: 1.45; color: #1e1e1e; }
	.sh-kz-artikul,
	.sh-kz-nalichie { font-size: 13px; line-height: 1.4; }
	.sh-kz-cena-mob { display: none; }
	.sh-kz-kolvo { grid-column: auto; margin-top: 0; }

	.sh-kz-cena {
		display: block;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: #ff4545;
		text-align: right;
	}
}

/* ── Итог ─────────────────────────────────────────────────────────────────── */

.sh-kz-itog {
	margin-top: 16px;
	padding: 16px;
	border-radius: 16px;
	background: #ffffff;
}

.sh-kz-summa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sh-kz-summa-imya {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: #525256;
}

.sh-kz-summa-cifra {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #ff4545;
	white-space: nowrap;
}

.sh-kz-samovyvoz {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #0c7c3b;
}

.sh-kz-samovyvoz.is-chastichno { color: #6e6e7a; }

/* Выгода самовывоза и порог доставки — тем же зелёным, что наличие:
   это обещание, которое сбудется на кассе. */
.sh-kz-vygoda,
.sh-kz-porog {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #0c7c3b;
}

.sh-kz-vygoda .amount,
.sh-kz-vygoda bdi,
.sh-kz-porog .amount,
.sh-kz-porog bdi { color: inherit; font-size: inherit; font-weight: 600; }

/* ── Промокод ─────────────────────────────────────────────────────────────── */

.sh-kz-promo { margin-top: 14px; }

.sh-kz-promo > summary {
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
	color: #a73afd;
}

.sh-kz-promo > summary::-webkit-details-marker { display: none; }

.sh-kz-promo-forma {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.sh-kz-promo-forma input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #eeeeee;
	border-radius: 999px;
	background: #ffffff;
	font-family: inherit;
	font-size: 14px;
	color: #1e1e1e;
}

.sh-kz-promo-forma input:focus { outline: 2px solid #a73afd; outline-offset: -2px; }

.sh-kz-promo-forma button.sh-kz-promo-forma,
.sh-kz-promo-forma button {
	flex: none;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: #f8e7ff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #a73afd;
	cursor: pointer;
}

.sh-kz-promo-forma button:hover { background: #f0d6ff; color: #a73afd; }

.sh-kz-kupon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #0c7c3b;
}

.sh-kz-kupon a { color: #6e6e7a; text-decoration: underline; }
.sh-kz-kupon a:hover { color: #ff4545; }

.sh-kz-knopka {
	display: block;
	margin-top: 12px;
	padding: 15px 24px;
	border-radius: 999px;
	background: #a73afd;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.sh-kz-knopka:hover { background: #9028e8; color: #ffffff; }

/* Вторая дорога — доставка. На телефоне мягкая лиловая, на десктопе
   белая с рамкой: так в макете, и так вторая кнопка не спорит с первой. */
.sh-kz-knopka-vtoraya {
	background: #f8e7ff;
	color: #a73afd;
}

.sh-kz-knopka-vtoraya:hover { background: #f0d6ff; color: #a73afd; }

.sh-kz-snoska {
	display: none;
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #6e6e7a;
}

@media (min-width: 768px) {
	.sh-kz-itog { padding: 24px; background: #f5f5f6; }
	.sh-kz-summa-imya { font-size: 18px; font-weight: 600; color: #1e1e1e; }
	.sh-kz-samovyvoz { margin-top: 14px; font-size: 14px; line-height: 1.4; }
	.sh-kz-knopka { margin-top: 14px; }

	.sh-kz-knopka-vtoraya {
		background: #ffffff;
		border: 1px solid #eeeeee;
		color: #1e1e1e;
	}

	.sh-kz-knopka-vtoraya:hover { background: #f5f5f6; color: #1e1e1e; }
	.sh-kz-snoska { display: block; }
}

@media (min-width: 1024px) {
	.sh-kz-itog { margin-top: 0; }
}

/* ── Пустая корзина ───────────────────────────────────────────────────────── */

.sh-kz-pusto-blok {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 8px;
	text-align: center;
}

/* Штучкин вместо декоративного знака корзины — решение владельца 05.09.2026 (п. 355).
   Знак корзины повторял заголовок и ничего не сообщал; персонаж в позе «спит» держит
   тот же смысл тупика, но узнаётся. Фон, а не <img>: RankMath берёт первую картинку
   контента в og:image, и на «Доставке» 29.08 так уже вылезла иконка фургона.
   Размер от замера читаемости 05.09: фигура в рост живёт от 128, ниже не читается. */
.sh-kz-znak {
	width: 128px;
	height: 128px;
	flex: none;
	background: url('../img/personazh/shtuchkin-spit.png?v=1') center / contain no-repeat;
	background-image: image-set(url('../img/personazh/shtuchkin-spit.webp?v=1') type('image/webp'), url('../img/personazh/shtuchkin-spit.png?v=1') type('image/png'));
}

.sh-kz-pusto-imya {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #1e1e1e;
}

.sh-kz-pusto-text {
	margin: 0;
	max-width: 560px;
	font-size: 14px;
	line-height: 1.4;
	color: #525256;
}

.sh-kz-pusto-knopki { width: 100%; }
.sh-kz-pusto-knopki .sh-kz-knopka { margin-top: 12px; }
.sh-kz-pusto-knopki .sh-kz-knopka:first-child { margin-top: 0; }

.sh-kz-polki { width: 100%; margin-top: 8px; }

.sh-kz-polki-imya {
	display: block;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: #1e1e1e;
}

.sh-kz-chipy {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.sh-kz-chip {
	padding: 9px 14px;
	border-radius: 999px;
	background: #f5f5f6;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #525256;
}

.sh-kz-chip span { opacity: .6; }
.sh-kz-chip:hover { background: #f8e7ff; color: #a73afd; }

@media (min-width: 768px) {
	.sh-kz-pusto-blok { gap: 16px; padding: 48px 24px; }
	.sh-kz-znak { width: 160px; height: 160px; }
	.sh-kz-pusto-text { font-size: 16px; line-height: 1.45; }

	/* Кнопки в ряд по 240 — из макета десктопной пустой корзины */
	.sh-kz-pusto-knopki {
		display: flex;
		justify-content: center;
		gap: 12px;
		width: auto;
	}

	.sh-kz-pusto-knopki .sh-kz-knopka { margin-top: 0; width: 240px; }
}

/* Пока считается новая сумма, правая колонка приглушена: цифра под пальцем
   уже изменилась, а деньги придут ответом сервера — без этого признака
   человек секунду видит старую сумму рядом с новым количеством. */
.sh-kz-itog.is-schitaem {
	opacity: .55;
	transition: opacity .12s ease;
}

/* Нажатия при этом не запрещаем: количество копится на клиенте и уходит
   одним запросом, поэтому «+++» подряд должны работать. */
.sh-kz-itog.is-schitaem .sh-kz-knopka {
	pointer-events: none;
}