/* g4basket.css — корзина / оформление / заказы «как Озон» (волна 7, фронт F6, 04.09.2026).
   Подключается в <head> через local/g4w7/60-basket.head.php ПОСЛЕ g4site.css, поэтому здесь же
   перебиваются правила волны 6: старая панель #g4bsum (g4site.css «п.27») прячется, старая плашка
   #g4freedel больше не создаётся (g4freedel.js v3 рисует .g4fd). Палитра общая: акцент #FF6600,
   «бесплатно» #00A046, текст #001a34/#1a1a1e, вторичный #8a8a90, разделители #ececf0. */

/* ══ плашка «до бесплатной доставки» — конструктор G4FREEDEL.render (g4freedel.js) ══
   Волна 8, п.14 владельца: «текст меньше, не жирный … сумма — обычным». Было (замер computed):
   в корзине 14px/400 #001a34 и сумма 700 #FF6600; на карточке 13px/600 #1a1a1e и сумма 700 #FF6600.
   Стало везде: 13px / 400 / #707070, сумма тем же весом, тёмным #222 (палитра волны 8). */
.g4fd { background: #fff; border: 1px solid #ececf0; border-radius: 12px; padding: 12px 14px 10px; color: #001a34; }
.g4fd__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.g4fd__ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 102, 0, .10); color: #FF6600;
	display: inline-flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.g4fd__ico svg { display: block; }
.g4fd__txt { font-size: 13px; line-height: 1.35; font-weight: 400; color: #707070; }
.g4fd__txt b { font-weight: 400; color: #222; white-space: nowrap; }
.g4fd__track { height: 6px; border-radius: 3px; background: #ececf0; overflow: hidden; }
.g4fd__fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff8a3d, #FF6600);
	transition: width .55s cubic-bezier(.22, .61, .36, 1); }
.g4fd__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: #8a8a90; margin-top: 6px; }
.g4fd.is-free .g4fd__ico { background: rgba(0, 160, 70, .12); color: #00A046; }
.g4fd.is-free .g4fd__txt { font-weight: 400; color: #00A046; }
.g4fd.is-free .g4fd__txt b { color: #00A046; }
.g4fd.is-free .g4fd__fill { background: linear-gradient(90deg, #2bb866, #00A046); }
/* мини-версия внутри строки доставки на карточке товара (#g4delivfree — <span>, g4freedel.js делает его блоком) */
#g4delivfree .g4fd { display: block; }
.g4fd--mini { border: 0; padding: 0; background: transparent; margin-top: 6px; max-width: 340px; }
.g4fd--mini .g4fd__head { gap: 7px; margin-bottom: 6px; }
.g4fd--mini .g4fd__ico { flex-basis: 22px; width: 22px; height: 22px; }
.g4fd--mini .g4fd__ico svg { width: 13px; height: 13px; }
.g4fd--mini .g4fd__txt { font-size: 13px; font-weight: 400; color: #707070; }
.g4fd--mini .g4fd__track { height: 4px; border-radius: 2px; }
.g4fd--mini.is-free .g4fd__txt { color: #00A046; }
[hidden] > .g4fd { display: none; }

/* ══ крутилка внутри кнопок (кнопка НЕ блёкнет — блёклую владелец читает как «зависло») ══ */
.g4bk-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
	border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: g4bkspin .7s linear infinite; }
@keyframes g4bkspin { to { transform: rotate(360deg); } }

/* ══ плашка-сообщение (window.G4BK.toast) ══ */
.g4bk-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 10050;
	background: #1a1a1e; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; line-height: 1.35;
	max-width: min(92vw, 440px); box-shadow: 0 8px 32px rgba(0, 26, 52, .16);
	opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.g4bk-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ══ корзина: правая панель оформления (десктоп ≥992px) ══
   Блоки родного компонента адресуем КЛАССАМИ (.g4b-total — родной «Итого», .g4b-items — список
   товаров, .g4b-etc — остальное): раньше здесь стояли порядковые nth-child, и любая смена
   параметров компонента увела бы display:none в чужой блок.
   w8 F6 r2 (F6r2-2): классы и признак «две колонки» теперь стоят в СЕРВЕРНОЙ разметке
   (template.php нашей копии шаблона), а не появляются из JS вторым кадром — до этой правки
   список перекладывался 1288 → 904 px через 165–390 мс после первой отрисовки.
   Признак переехал с `body.g4bp-on` на сам `#basket-root.g4bp-on`: класс на <body> стоит
   80–330 мс пересчёта стилей (грабля среды), а серверная разметка body нам не принадлежит. */
@media (min-width: 992px) {
	#basket-root.g4bp-on { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
	#basket-root.g4bp-on > *:not(#g4bpanel) { grid-column: 1; order: 0; }
	/* :not(#g4bpanel) здесь не для отбора, а ради веса: в g4site.css (волна 6, чужой файл) стоит
	   `#basket-root > .row:nth-child(3){order:1}`, а у правила выше вес поднимает id внутри :not() —
	   без этого «список товаров первым» проигрывало и над списком зияла пустая строка предупреждений */
	#basket-root.g4bp-on > .g4b-items:not(#g4bpanel) { order: -1; }   /* список товаров — первым */
	#basket-root.g4bp-on > .g4b-total { display: none; }          /* родной «Итого» — его данные в панели */
	#g4bpanel { grid-column: 2; grid-row: 1; position: sticky; top: 14px;
		background: #fff; border: 1px solid #ececf0; border-radius: 16px; padding: 16px;
		box-shadow: 0 2px 12px rgba(0, 26, 52, .05); }
}

/* полоса загрузки при переходе на оформление (вместо затемнения всей страницы крутилкой) */
#g4bprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10060; border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, #ff8a3d, #FF6600); box-shadow: 0 0 10px rgba(255, 102, 0, .55);
	transition: width .45s cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
body.g4bp-going #g4site-spin { display: none !important; }
#g4bsum { display: none !important; }      /* панель волны 6 (g4site.js) — заменена #g4bpanel */
#g4bpanel[hidden] { display: none !important; }
@media (max-width: 991px) { #g4bpanel { display: none !important; } }
.g4bp__fd { margin-bottom: 14px; }
.g4bp__fd[hidden] { display: none; }
.g4bp__go { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 50px; margin: 0; border: 0; border-radius: 12px; background: #FF6600; color: #fff;
	font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
	transition: background .15s; -webkit-tap-highlight-color: transparent; }
.g4bp__go:hover { background: #e65c00; }
/* Пока палец/кнопка мыши держит кнопку — только подсветка нажатия, никаких слов о том, что
   что-то уже происходит. Прошлая ревизия писала «Открываем оформление…» прямо на pointerdown:
   на телефоне это начало обычного скролла, начатого с кнопки, — кнопка врала; при длинном
   нажатии надпись ещё и мигала туда-обратно (сброс через 700 мс). Класс, а не :active, —
   чтобы состояние держалось и когда обработчик увёл фокус. */
.g4bp__go:active, .g4bp__go.is-press { background: #d95700; }
/* «занятая» кнопка НЕ блёкнет и НЕ теряет клики: pointer-events:none здесь стоять не может —
   «занятый» вид ставится уже на нажатии (pointerdown), и с pointer-events:none следом идущий
   click ушёл бы мимо кнопки (проверено: обработчик не вызывался вовсе) */
.g4bp__go.is-busy { background: #FF6600; cursor: default; }
.g4bp__go.is-off { background: #ececf0; color: #8a8a90; cursor: default; }
.g4bp__gobusy { display: none; align-items: center; gap: 10px; }
.g4bp__go.is-busy .g4bp__golbl { display: none; }
.g4bp__go.is-busy .g4bp__gobusy { display: inline-flex; }
.g4bp__hint { font-size: 12.5px; color: #8a8a90; margin: 10px 0 16px; line-height: 1.45; }
.g4bp__t { font-weight: 700; font-size: 18px; color: #001a34; line-height: 1.2; }
.g4bp__meta { font-size: 13px; color: #8a8a90; margin: 3px 0 10px; }
.g4bp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-size: 14px; color: #1a1a1e; padding: 5px 0; }
.g4bp__row[hidden] { display: none; }
.g4bp__v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.g4bp__row--disc .g4bp__v { color: #d14343; }
.g4bp__row--total { border-top: 1px solid #ececf0; margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 16px; }
.g4bp__row--total .g4bp__v { font-size: 22px; }
/* поле «Фильтр» над списком товаров (родное bitrix sale.basket.basket, рисуется в разметке всегда,
   параметром SHOW_FILTER не убирается) — у Озона такого нет, а на корзине из двух строк это мусор.
   Прячем поле, счётчики «Отложенные/С ошибками» в той же шапке остаются рабочими. */
#basket-root .basket-items-search-field { display: none !important; }
#basket-root .basket-items-list-header:empty,
#basket-root .basket-items-list-header { padding-top: 0; padding-bottom: 0; }

/* телефон/планшет: плашка доставки над родным блоком «Итого» */
.g4bp__fdm { margin: 12px 0 14px; }
.g4bp__fdm[hidden] { display: none; }

/* телефон/планшет: НАША кнопка вместо родной (мгновенный отклик, крутилка внутри) */
@media (min-width: 992px) { .g4bp__go--mob { display: none !important; } }
@media (max-width: 991px) {
	.g4bp__go--mob { width: 100%; margin: 0; }
	/* родную прячем только когда наша уже стоит рядом (класс ставит js) — иначе кнопки не будет вовсе */
	body.g4bp-mob #basket-root .basket-checkout-block-btn > .basket-btn-checkout { display: none !important; }
}

/* телефон/планшет: родная кнопка «Оформить заказ» — главное действие страницы, а тема рисует её
   белой с тонкой рамкой (радиус 2px, высота 40) — рядом с оранжевыми кнопками сайта читается как
   второстепенная. Приводим к тому же виду, что панель на десктопе: заливка, 50px, радиус 12. */
@media (max-width: 991px) {
	/* Планшет 768–991: тема кладёт «Итого» и кнопку в один ряд из inline-block'ов, и крупная цена
	   ЗАЕЗЖАЕТ ПОД кнопку (проверено на 900px: кнопка перекрывала «395 ₽» — и с нашей кнопкой,
	   и с родной). Раскладываем в столбик, как на телефоне: цена сверху, кнопка на всю ширину. */
	/* !important: у темы эти же свойства заданы правилами с большим весом */
	#basket-root .basket-checkout-container { display: block !important; }
	#basket-root .basket-checkout-section-inner { display: block !important; text-align: left !important; }
	#basket-root .basket-checkout-block { display: block !important; width: auto !important; }
	#basket-root .basket-checkout-block-btn { display: block !important; width: 100% !important; }
	/* блок с итоговой ценой упирается в кнопку вплотную (крупные цифры «наезжают») — даём воздух */
	#basket-root .basket-checkout-block-btn { padding: 16px 0 0; }
	/* !important: у темы `.btn.white`/`.btn-default` заливка и цвет тоже с !important */
	#basket-root .basket-btn-checkout.btn {
		display: block; width: 100%; height: 50px; padding: 0 18px; margin: 0;
		border: 0 !important; border-radius: 12px; background: #FF6600 !important; color: #fff !important;
		font-family: inherit; font-size: 16px; font-weight: 700; line-height: 50px;
		text-shadow: none; box-shadow: none; -webkit-tap-highlight-color: transparent;
	}
	#basket-root .basket-btn-checkout.btn:hover,
	#basket-root .basket-btn-checkout.btn:focus { background: #e65c00 !important; color: #fff !important; }
	#basket-root .basket-btn-checkout.btn:active { background: #d95700 !important; color: #fff !important; }
	#basket-root .basket-btn-checkout.btn.disabled,
	#basket-root .basket-btn-checkout.btn[disabled] { background: #ececf0 !important; color: #8a8a90 !important; }
}

/* ══ /personal/orders/: «Повторить заказ» и сетка рекомендаций ══ */
/* рекомендации лежат ВНЕ .g4orders (max-width 980px в g4site.css) — плитка на всю ширину контента, как в каталоге */
.g4ordreco { margin-top: 40px; clear: both; }
.g4ordreco .g4feed__title { font-size: 21px; font-weight: 700; margin: 0 0 14px; }
.g4ordreco .catalog_block.items { margin: 0; }
/* кнопка: три состояния — «Повторить заказ» / «Добавляем…» (крутилка внутри, не блёкнет) / «В корзине ✓» (зелёная) */
.g4ord__repeat { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; height: 44px;
	padding: 0 22px; border: 0; border-radius: 12px; background: #FF6600; color: #fff; font-family: inherit; font-size: 14.5px;
	font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.g4ord__repeat:hover { background: #e65c00; }
.g4ord__repeat:active { background: #d95700; }
.g4ord__repeat.is-busy { pointer-events: none; background: #FF6600; }
.g4ord__repeat.is-done { background: #00A046; pointer-events: none; }
.g4ord__repeat > span { display: none; align-items: center; gap: 9px; }
.g4ord__repeat .g4ord__rlbl { display: inline-flex; }
.g4ord__repeat.is-busy .g4ord__rlbl, .g4ord__repeat.is-done .g4ord__rlbl { display: none; }
.g4ord__repeat.is-busy .g4ord__rbusy { display: inline-flex; }
.g4ord__repeat.is-done .g4ord__rdone { display: inline-flex; }
.g4ord__repeat svg { display: block; flex: 0 0 auto; }
/* Скелет первого экрана /order/ (п.18) переехал ИНЛАЙНОМ в local/g4w7/60-basket.head.php:
   на /order/ этот файл больше не подключается (лишний render-blocking запрос), а правила скелета
   и снятие белого прелоадера темы должны работать до первого кадра. */

/* ══ w8 F6 r2 (F6r2-2): скелет строк на время, пока их рисует JS ══
   Строк корзины в серверном HTML нет вообще (замер: 0 узлов tr[data-entity=basket-item]),
   первая строка появлялась в 1623 мс — до этого на месте списка была пустота, а всё, что ниже
   (рекомендации, подвал), уезжало вниз на высоту списка. Высота строки замерена на живой
   странице: десктоп 215 px (три позиции — 215/215/215), телефон — 263 px.
   Скелет гаснет ровно тем кадром, в котором в таблице появляется первая строка (CSS-условие
   ниже), поэтому своего промаргивания не даёт. */
.g4b-skel { padding: 0; }
#basket-item-table:not(:empty) ~ .g4b-skel { display: none; }
.g4b-skel__row { display: flex; align-items: flex-start; gap: 24px; box-sizing: border-box;
	height: 215px; padding: 29px 0 33px 41px; }
.g4b-skel__img { flex: 0 0 117px; height: 152px; border-radius: 8px; background: #f3f4f7; }
.g4b-skel__txt { flex: 1 1 auto; padding-top: 6px; }
.g4b-skel__txt i { display: block; height: 14px; margin-bottom: 12px; border-radius: 7px; background: #f3f4f7; }
.g4b-skel__txt i:first-child { width: 62%; }
.g4b-skel__txt i:last-child { width: 34%; }
@media (max-width: 580px) {
	.g4b-skel__row { height: 263px; gap: 12px; padding: 12px 0 10px; }
	.g4b-skel__img { flex: 0 0 110px; height: 150px; }
}

/* ══ w9 F6 п.2 (11.09.2026): строка «Под заказ» — позиция, которую Битрикс отдаёт с CAN_BUY=N ══
   Владелец (скрин С3): «призрачные товары, которые не мог ни добавить, ни убрать». Замер: такие
   строки — NOT_AVAILABLE у компонента (class.php:1539 `CAN_BUY !== 'Y'` → NOT_AVAILABLE), степпер
   у них disabled, а сервер игнорирует любое количество (class.php:3530 `elseif ($item->canBuy())`)
   — удалить МОЖНО (processDelete идёт до этой проверки). Поэтому: степпер и колонку суммы прячем
   (в сумму строка не входит), название и цену — серым, подпись «Под заказ» (basket-item.php),
   крестик — обычный. Селекторы с #basket-root — чтобы перебить бандл темы весом. */
#basket-root tr.g4-na-row .basket-item-info-name,
#basket-root tr.g4-na-row .basket-item-info-name-link,
#basket-root tr.g4-na-row .basket-item-info-name-link:hover { color: #707070; }
#basket-root tr.g4-na-row .basket-item-image { opacity: .55; }
#basket-root tr.g4-na-row .g4-na { display: inline-block; margin-top: 8px; font-size: 13px; line-height: 1.3; color: #707070; }
#basket-root tr.g4-na-row .basket-item-block-amount { display: none !important; }
#basket-root tr.g4-na-row .basket-item-price-current-text { color: #707070; }
#basket-root tr.g4-na-row td.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-block-price { visibility: hidden; }

/* ══ w9 F6 п.4: текст кнопок на странице корзины — всегда белый ══
   Замер 11.09 (harness/f6w9-btn.js, 1440): «Перейти к оформлению» rgb(255,255,255) в обычном /
   hover / is-press / is-busy; «В корзину» в рекомендациях (.g4cb, F3) — rgb(255,255,255) в обычном /
   hover / active / после клика. Правила ниже — страховка на случай чужих правок темы: свои состояния
   кнопки панели и родные кнопки аспро в блоке рекомендаций (они показываются лишь до того, как F3
   дорисует свой ряд покупки; у них тема даёт белый фон и тёмный текст — «то чёрный, то белый»). */
.g4bp__go, .g4bp__go:hover, .g4bp__go:focus, .g4bp__go:active, .g4bp__go.is-press, .g4bp__go.is-busy { color: #fff; }
[class*="bigdata"] .catalog_item .to-cart.btn,
[class*="bigdata"] .catalog_item .to-cart.btn:hover,
[class*="bigdata"] .catalog_item .in-cart.btn,
[class*="bigdata"] .catalog_item .in-cart.btn:hover,
[class*="bigdata"] .catalog_item .g4cb:not(.g4cb--order):not(.g4cb--ghost),
[class*="bigdata"] .catalog_item .g4cb:not(.g4cb--order):not(.g4cb--ghost):hover,
[class*="bigdata"] .catalog_item .g4cb:not(.g4cb--order):not(.g4cb--ghost):active { color: #fff !important; }

/* ══ w10 F4 п.1–2 (14.09.2026): «Под заказ» = обычная строка с остатком 0; строка про срок ══
   Подпись под названием — мелко серым с маленьким синим самолётиком (тот же знак, что F1 ставит в
   карточке; цвет облаков баннера ref/w10/banner-free-delivery.jpg ≈ #70b0c0, для 14px на белом взят
   тёмный край допуска #4a9fb3 — читаемость). Строка про срок — под подсказкой панели (десктоп) и
   под кнопкой оформления (телефон), показывается только при наличии таких позиций (g4basket.js). */
#basket-root .g4-po { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; line-height: 1.3; color: #707070; }
#basket-root .g4-po svg { width: 14px; height: 14px; flex: 0 0 auto; fill: #4a9fb3; }
.g4bp__po { font-size: 12.5px; color: #8a8a90; line-height: 1.45; margin: -10px 0 16px; }
.g4bp__po--mob { margin: 10px 0 0; text-align: left; }