/* g4fav.css — страница «Избранное» /favorites/ «как у Озона» (волна 7, F7, пп.19/21, 04.09.2026).
   Подключается только на /favorites/ (local/g4w7/70-fav.head.php), грузится ПОСЛЕ g4site.css —
   старые правила .g4fav* из g4site.css (список для владельца F3 — в отчёте) перебиваем здесь.
   Карточки — штатные плитки каталога (сетка g4catgrid.css), своих карточек больше нет. */

/* серую плашку темы с заголовком и хлебными крошками не показываем — заголовок свой, как у Озона.
   Селектор без :has() намеренно: файл подключается ТОЛЬКО на /favorites/ (70-fav.head.php),
   а :has() не понимают Safari < 15.4 и старые Firefox — там плашка вылезала бы над нашим заголовком. */
.page-top-wrapper { display: none; }

.g4fav { max-width: none; margin: 0; padding: 8px 0 32px; }

/* ── шапка: «Избранное N» + чипы категорий + сортировка ОДНОЙ строкой слева ── */
.g4fav__head { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 10px 20px; margin: 6px 0 18px; }
.g4fav__head[hidden] { display: none; }
.g4fav__h1 { display: flex; align-items: baseline; gap: 8px; flex: none; margin: 0; padding: 0; font-size: 28px; line-height: 36px; font-weight: 700; color: #001a34; white-space: nowrap; }
/* padding:0 — у h1 в теме padding-bottom:25px: строка «Избранное N» была на 25 px выше чипов
   (на мобильной ширине это давало провал под заголовком) */
.g4fav__cnt { font-size: 16px; line-height: 1; font-weight: 600; color: #8a8a90; }
.g4fav__tools { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* коробка чипов: одна строка, при переполнении — прокрутка со стрелками (как у Озона),
   вторая строка не появляется даже при 6+ разделах */
.g4fav__chipsbox { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.g4fav__chipsbox[hidden] { display: none; }
.g4fav__chips { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.g4fav__chips::-webkit-scrollbar { display: none; }
.g4fav__chips[hidden] { display: none; }
/* стрелки прокрутки чипов: белый кружок с тенью, появляются при наведении на строку */
.g4fav__arr {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; padding: 0;
	display: flex; align-items: center; justify-content: center; border: 1px solid #ececf0; border-radius: 50%;
	background: #fff; color: #001a34; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 26, 52, .16);
	opacity: 0; transition: opacity .18s, border-color .15s;
}
.g4fav__arr[hidden] { display: none; }
.g4fav__arr--l { left: -2px; }
.g4fav__arr--r { right: -2px; }
.g4fav__chipsbox:hover .g4fav__arr, .g4fav__arr:focus-visible { opacity: 1; }
.g4fav__arr:hover { border-color: #d5d6dc; }
/* мягкие «тени» у краёв прокручиваемой строки — видно, что она продолжается */
.g4fav__chipsbox.is-scroll::before, .g4fav__chipsbox.is-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .18s; }
.g4fav__chipsbox.is-scroll::before { left: 0; background: linear-gradient(90deg, #fff 20%, rgba(255, 255, 255, 0)); }
.g4fav__chipsbox.is-scroll::after { right: 0; background: linear-gradient(270deg, #fff 20%, rgba(255, 255, 255, 0)); }
.g4fav__chipsbox.is-scroll.has-l::before, .g4fav__chipsbox.is-scroll.has-r::after { opacity: 1; }
.g4fav__cat {
	height: 36px; padding: 0 14px; border: 0; border-radius: 12px; background: #f0f1f3; color: #001a34;
	font-family: inherit; font-size: 14px; line-height: 36px; font-weight: 600; cursor: pointer;
	transition: background-color .15s, color .15s; white-space: nowrap;
}
.g4fav__cat i { font-style: normal; font-size: 13px; font-weight: 600; color: #8a8a90; margin-left: 4px; }
.g4fav__cat:hover { background: #e6e7ea; color: #001a34; }
.g4fav__cat.is-on { background: #001a34; color: #fff; }
.g4fav__cat.is-on i { color: rgba(255, 255, 255, .7); }
.g4fav__cat[hidden] { display: none; }

.g4fav__sortwrap { position: relative; }
.g4fav__sortbtn {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 14px;
	border: 1px solid #ececf0; border-radius: 12px; background: #fff; color: #001a34;
	font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
	transition: border-color .15s, background-color .15s;
}
.g4fav__sortbtn:hover { border-color: #d5d6dc; }
.g4fav__sortbtn span { color: inherit; }
.g4fav__sortbtn svg { color: #8a8a90; transition: transform .15s; }
.g4fav__sortbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.g4fav__sortpop {
	position: absolute; left: 0; right: auto; top: calc(100% + 6px); z-index: 60; min-width: 200px; padding: 6px;
	background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 26, 52, .16);
}
.g4fav__sortpop[hidden] { display: none; }
.g4fav__sortit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #001a34; cursor: pointer; white-space: nowrap; }
.g4fav__sortit:hover { background: #f5f5f8; }
.g4fav__sortit.is-on { font-weight: 700; }
.g4fav__sortit.is-on::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #FF6600; flex: none; }

/* ── сетка: партии рендера (простые товары / ТП) сливаем в одну сетку каталога ── */
.g4fav__grid > .top_wrapper, .g4fav__grid > .top_wrapper > .catalog_block { display: contents; }
.g4fav__grid .bottom_nav { display: none; }
.g4fav__grid .item_block { transition: opacity .2s ease, transform .2s ease; }
.g4fav__grid .item_block.is-gone { opacity: 0; transform: scale(.96); pointer-events: none; }
.g4fav__grid .item_block.g4fav-hide, .g4fav__grid .item_block.g4fav-filt { display: none !important; }
.g4fav__grid[hidden] { display: none; }

/* сердце в избранном видно всегда (в каталоге тема показывает его только при наведении):
   белый кружок с тенью и залитое сердце — как у Озона; спрайт темы не используем.
   ВАЖНО: правила висят на `.wish_item.in` БЕЗ класса `added`. Аспро в markProductAddBasket
   (main.js:143) снимает `added` со всех значков товара при добавлении в корзину — после
   «В корзину» сердце на карточке избранного превращалось в бледный контур 30×30 (а в теме
   есть состояния, где оно ещё и прозрачное), то есть значок врал: карточка в избранном, а
   сердце выглядит как «не в избранном». Здесь вид сердца от класса `added` не зависит. */
.g4fav__grid .like_icons { opacity: 1 !important; visibility: visible !important; }
.g4fav__grid .like_icons .wish_item_button { display: block !important; }
.g4fav__grid .wish_item.to { display: none !important; }
/* display НЕ трогаем (и уж точно не !important): показ/скрытие значка — это inline-стиль,
   которым управляет общий перехват сердца (g4site.js markFav) при удалении и откате */
.g4fav__grid .wish_item.in {
	width: 36px; height: 36px; box-sizing: border-box;
	border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 26, 52, .14); cursor: pointer;
	transition: transform .12s;
}
.g4fav__grid .wish_item.in:hover { transform: scale(1.08); }
.g4fav__grid .wish_item.in, .g4fav__grid .wish_item.in i { opacity: 1 !important; }
.g4fav__grid .wish_item.in i {
	display: block; width: 20px; height: 20px; background: none; margin: 8px auto 0;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF6600' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
/* карточка отложенного ТП: до подстановки данных предложения (g4fav.js) не показываем родительскую
   «от …» цену; свотчи/«Подробнее» родителя в избранном не нужны — ровно отложенный вариант (п.20) */
.g4fav__grid .catalog_item_wrapp[data-g4offer]:not(.g4fav-filled) { visibility: hidden; }
/* запасной путь: подстановка сорвалась (сменилась разметка темы, старый браузер) — показываем
   карточку как есть, родительской ценой. Пустые места с одними сердцами покупателю не показываем. */
.g4fav__grid.g4fav-raw .catalog_item_wrapp[data-g4offer] { visibility: visible; }
.g4fav__grid .sku_props, .g4fav__grid .wrapper_sku, .g4fav__grid .bx_catalog_item_scu { display: none !important; }

/* ── плашка «не получилось» (правило волны 7: при неудаче откат + плашка) ──
   Класс СВОЙ, а не общий .notice-surface: у темы (notice.min.css) этот класс задаёт
   position:fixed; top:28px; right:32px; max-width:calc(100% - 64px); max-height:calc(100vh - 56px),
   и вместе с положением «снизу по центру» коробка растягивается на пол-экрана
   (замер 06.09 на /favorites/: белое полотно 688×844 поверх страницы). */
.g4fav__toast {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 100002;
	display: flex; align-items: center; gap: 10px; max-width: 92vw; width: max-content;
	padding: 13px 18px; border-radius: 14px; background: #fff; color: #1a1a1e;
	font-size: 14px; line-height: 20px; box-shadow: 0 8px 32px rgba(0, 26, 52, .16);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.g4fav__toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.g4fav__toast svg { flex: none; color: #FF6600; }
/* на телефоне поднимаем плашку над кружком чата (замер 06.09: кружок закрывал правый край текста) */
@media (max-width: 767px) { .g4fav__toast { bottom: 96px; } }

/* ── пустое состояние (разметка прежняя, стили из g4site.css; здесь — только отступы) ── */
.g4fav__empty { padding: 56px 16px 72px; }
.g4fav__empty[hidden] { display: none; }

/* ── мобильная ширина: заголовок сверху, под ним строка чипов + сортировка (пальцем листается) ── */
@media (max-width: 767px) {
	.g4fav { padding: 4px 0 24px; }
	.g4fav__head { flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 12px; }
	.g4fav__h1 { font-size: 22px; line-height: 28px; }
	.g4fav__cnt { font-size: 14px; }
	.g4fav__tools { width: 100%; }
	.g4fav__chipsbox { flex: 1 1 auto; }
	.g4fav__chips { padding-bottom: 2px; }
	.g4fav__arr { display: none; }   /* на телефоне строка листается пальцем — стрелки не нужны */
	.g4fav__sortwrap { flex: none; }
	.g4fav__cat, .g4fav__sortbtn { height: 32px; line-height: 32px; font-size: 13px; padding-left: 12px; padding-right: 12px; }
	.g4fav__sortbtn { padding-right: 8px; }
	.g4fav__sortpop { left: auto; right: 0; }
}