/*
 * «Вы смотрели» — полка над подвалом (local/include/viewed_strip.php, /local/ajax/viewed.php).
 * Общая для ls и ls_mobile. Всё от #lbViewed: глобальные стили шаблонов (aside/section, h2,
 * .addCart с uppercase и !important в мобильном) иначе перебивают классы.
 * Карточки нарочно компактнее полок главной: это напоминание, а не витрина.
 */
#lbViewed {
	--ac: #df5812; --ac-h: #bd4508; --ac-ink: #a53f0c;
	--ink: #222a31; --sub: #56626c; --line: #e6e9ec; --soft: #f5f6f7; --ok: #1d7a46;
	display: block; float: none; clear: both; width: auto; box-sizing: border-box;
	max-width: 1400px; margin: 40px auto 0; padding: 0 25px;
	color: var(--ink); font: 400 15px/1.45 "Roboto", Arial, sans-serif;
}
#lbViewed[hidden] { display: none !important; }
#lbViewed :where(*, *::before, *::after) { box-sizing: border-box; }
#lbViewed :where(h2, p, ul, li) { margin: 0; padding: 0; float: none; width: auto; background: none; }
#lbViewed :where(ul) { list-style: none; }
#lbViewed :where(a, a:hover) { color: inherit; text-decoration: none; }
#lbViewed :where(img) { display: block; max-width: 100%; height: auto; }
#lbViewed :focus-visible { outline: 2px solid var(--ac-h); outline-offset: 2px; border-radius: 6px; }

#lbViewed .lbv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
#lbViewed h2.lbv__title { margin: 0; padding: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
#lbViewed .lbv__clear { flex: none; min-height: 32px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--sub); font: 400 13.5px/1.2 "Roboto", Arial, sans-serif; cursor: pointer; transition: color .15s; }
#lbViewed .lbv__clear:hover { color: var(--ac-ink); }
#lbViewed .lbv__clear:disabled { opacity: .5; cursor: default; }
#lbViewed .lbv__done { padding: 14px 0; color: var(--sub); font-size: 14px; }

/* ---------- Полка ---------- */
#lbViewed .lbv__shelf { position: relative; }
#lbViewed .lbv__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
#lbViewed .lbv__track::-webkit-scrollbar { display: none; }
#lbViewed .lbv__btn {
	position: absolute; top: 34%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
	border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink);
	box-shadow: 0 4px 14px rgba(20, 30, 40, .12); cursor: pointer;
}
#lbViewed .lbv__btn[hidden] { display: none; }
#lbViewed .lbv__btn--prev { left: -17px; }
#lbViewed .lbv__btn--next { right: -17px; }
#lbViewed .lbv__btn:hover { border-color: #c9d1d7; }

/* ---------- Карточка ---------- */
#lbViewed .lbv-card {
	scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
	padding: 12px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s;
}
#lbViewed .lbv-card:hover { border-color: #c9d1d7; }
/* Рамка квадратная, фото вписывается целиком: проценты по высоте внутри aspect-ratio не работают, поэтому absolute */
#lbViewed .lbv-card__img { position: relative; display: block; aspect-ratio: 1; margin-bottom: 10px; }
#lbViewed .lbv-card__img picture { display: contents; }
#lbViewed .lbv-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
#lbViewed .lbv-card__name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: calc(1.35em * 2); margin: 0 0 10px; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--ink);
}
#lbViewed .lbv-card__name:hover { color: var(--ac-ink); }
#lbViewed .lbv-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-top: auto; }
#lbViewed .lbv-card__price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
#lbViewed .lbv-card__out { color: var(--sub); font-size: 13px; }

/* Кнопка «В корзину»: глобальный .addCart рисует свою иконку, капс и отступы (в мобильном — с !important) */
#lbViewed .lbv-card__buy {
	display: grid; place-items: center; flex: none; width: 40px; min-width: 40px; height: 36px; margin: 0; padding: 0 !important;
	border: 0; border-radius: 9px; background: var(--ac); background-image: none; color: #fff !important;
	font-size: 0; line-height: 0; text-transform: none; transition: background-color .15s;
}
#lbViewed .lbv-card__buy::before { content: none !important; }
#lbViewed .lbv-card__buy:hover { background: var(--ac-h); }
#lbViewed .lbv-card__buy.added { display: grid !important; background: var(--ok) !important; font-size: 0 !important; }
#lbViewed .lbv-card__buy.added::after { content: ""; width: 13px; height: 7px; margin-top: -4px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg); }
#lbViewed .lbv-card__buy.added svg { display: none; }

@media (max-width: 1199px) {
	#lbViewed .lbv__track { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
}
@media (max-width: 1023px) {
	#lbViewed .lbv__track { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 767px) {
	#lbViewed { margin-top: 28px; padding: 0 16px; }
	#lbViewed h2.lbv__title { font-size: 19px; }
	#lbViewed .lbv__head { margin-bottom: 10px; }
	/* Телефон: две карточки и край третьей — видно, что полка листается */
	#lbViewed .lbv__track { grid-auto-columns: 42%; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
	#lbViewed .lbv__btn { display: none !important; }
	#lbViewed .lbv-card { padding: 10px 10px 12px; }
	#lbViewed .lbv-card__name { font-size: 13px; }
	#lbViewed .lbv-card__price { font-size: 15px; }
	#lbViewed .lbv-card__buy { width: 36px; min-width: 36px; height: 34px; }
}