/*
 * Списки покупателя: избранное и сравнение.
 *
 * ⚠ Всё под `.wlist` — классом на <main> этих двух страниц. Правила отсюда не
 * должны доставать до каталога и карточки: они верстаются shop.css, и общая
 * плитка `.pcard` используется всеми тремя страницами. Одно правило без
 * приставки — и «крестик убрать» появился бы на каждой плитке каталога.
 *
 * ⚠ Своих цветов нет, только токены витрины (--sh-*). Арендатор красит магазин
 * в «Шаблоне витрины», и зашитый здесь синий остался бы синим у того, кто
 * выбрал зелёный. По той же причине синие кнопки не переписываются, а берутся
 * готовыми классами shop.css (.pcard__go, .pcard__buy).
 */

/* Кнопка «Убрать всё» уезжает вправо, к краю строки заголовка. */
.wlist__push { margin: 0 0 0 auto; }

.wlist__note { margin: 0 0 14px; font-size: 13px; color: var(--sh-muted); }

/* ── пустой список ── */
.wlist__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wlist__empty b { font-size: 17px; color: var(--sh-ink); }
.wlist__empty span { max-width: 480px; font-size: 14px; }
/* Кнопка общая с витриной; здесь только ширина по тексту, а не во всю колонку. */
.wlist__empty .pcard__go { margin-top: 8px; padding: 12px 24px; }

/* ── избранное: плитка ── */
.wlist .pcard { position: relative; }
.wlist__dropform { position: absolute; right: 10px; top: 10px; z-index: 2; margin: 0; }

/*
 * Крестик поверх фото, а не строкой под плиткой: убирают из избранного чаще,
 * чем открывают товар, и место под это должно быть там, куда смотрит рука.
 */
.wlist__drop { width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
	border: .8px solid var(--sh-line); border-radius: 999px; background: var(--sh-card);
	color: var(--sh-muted); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.wlist__drop:hover { color: var(--sh-warn); border-color: var(--sh-warn); }


/* ── сравнение: строка над таблицей ── */
.wlist__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius);
	padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.wlist__only { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.wlist__count { color: var(--sh-muted); }

/*
 * ⚠ Прокрутка вбок живёт ВНУТРИ этого контейнера. Шесть колонок на телефон не
 * помещаются никак; без своей прокрутки вбок ехала бы вся страница вместе с
 * шапкой, поиском и кнопкой каталога — и вернуться к ним было бы нечем.
 */
.wlist__scroll { overflow-x: auto; background: var(--sh-card);
	border: .8px solid var(--sh-line); border-radius: var(--sh-radius); }

/*
 * `separate`, а не `collapse`: у прилипающей первой колонки собранные рамки
 * уезжают вместе с прокруткой и рисуются поверх соседней клетки.
 */
.wlist__cmp { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.wlist__cmp th, .wlist__cmp td { padding: 12px 14px; text-align: left; vertical-align: top;
	font-weight: 400; font-size: 13px; border-bottom: 1px solid var(--sh-line);
	border-right: 1px solid var(--sh-line); }
.wlist__cmp th:last-child, .wlist__cmp td:last-child { border-right: 0; }
.wlist__cmp tr:last-child th, .wlist__cmp tr:last-child td { border-bottom: 0; }
.wlist__cmp thead th { background: var(--sh-card); border-bottom: 1px solid var(--sh-line); }
.wlist__cmp td { min-width: 240px; }

/*
 * ⚠ Первая колонка прилипает к левому краю: уехав вправо к шестому товару,
 * человек иначе видит столбец значений без единого названия свойства — и не
 * знает, что именно сравнивает.
 */
.wlist__prop, .wlist__corner { position: sticky; left: 0; z-index: 1;
	width: 220px; min-width: 220px; background: var(--sh-card); color: var(--sh-muted); }
.wlist__corner { z-index: 2; font-weight: 600; color: var(--sh-ink); }

/* ── сравнение: шапка колонки ── */
.wlist__col { display: flex; flex-direction: column; gap: 8px; width: 240px; }
.wlist__shot { display: block; }
.wlist__shot img { display: block; width: 100%; height: 150px; object-fit: contain;
	background: var(--sh-bg); border-radius: 8px; }
.wlist__noshot { display: grid; place-items: center; height: 150px; background: var(--sh-bg);
	border-radius: 8px; color: var(--sh-muted); font-size: 13px; }
.wlist__off { margin: 0; text-align: center; }

/* Пустая клетка. Цвет тише значения: прочерк — отсутствие, а не ответ. */
.wlist__none { color: var(--sh-muted); }

/*
 * ⚠ «Только различия» прячет строки одним правилом, без единой строки на JS.
 * Флажок стоит в `.wlist__tools`, таблица — соседним блоком, поэтому связывает
 * их `:has()` и соседний селектор. Браузер, который `:has()` не понимает,
 * оставит таблицу полной: переключатель перестанет работать, но страница
 * останется целой — это лучший исход из двух возможных.
 */
.wlist__tools:has(.wlist__only input:checked) ~ .wlist__scroll .is-same { display: none; }

/* Совпало всё: в режиме различий таблица иначе осталась бы пустой без слов. */
.wlist__nodiff { display: none; }
.wlist__tools:has(.wlist__only input:checked) ~ .wlist__scroll .wlist__nodiff { display: table-row; }

@media (max-width: 900px) {
	/* Колонки уже, но не настолько, чтобы название товара шло по одному слову. */
	.wlist__cmp td { min-width: 180px; }
	.wlist__col { width: 180px; }
	.wlist__prop, .wlist__corner { width: 150px; min-width: 150px; }
	.wlist__cmp th, .wlist__cmp td { padding: 10px; }
	.wlist__shot img, .wlist__noshot { height: 110px; }
}