/*
 * PF Bag - конструктор "Собери сумку в роддом".
 * Только на singular pf_bag (enqueue в includes/class-pf-bag-render.php).
 * Токены - ACSS (var(--...)), без hex/px кроме 1px/0. Адаптив - container queries.
 */

/*
 * inline-size 100% + min-inline-size 0 - обязательны: родитель Bricks (<main class="brxe-container">)
 * это display:flex, а container-type:inline-size на самом .pf-bag включает size containment,
 * из-за которого автоматический flex-basis (по контенту) у элемента-контейнера схлопывается в 0
 * (контент недоступен для расчёта размера) - без явной ширины раскладка и container queries ломаются.
 */
.pf-bag {
	container-type: inline-size;
	inline-size: 100%;
	min-inline-size: 0;
}

/*
 * Раскладка живёт на .pf-bag__layout, а не на .pf-bag: контейнер container query
 * не может менять собственный display/grid-template - только у потомков (проверено).
 */
.pf-bag__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

.pf-bag__groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	min-inline-size: 0;
}

/* ---- Группа (details) ---- */

.pf-bag__group {
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius);
	background: var(--white);
	padding: var(--space-s) var(--space-m);
}

/*
 * Заголовок группы - grid с именованными областями: на узком контейнере название
 * и стрелка в первой строке, «выбрано.../сумма» - во второй строке, мелко, во всю
 * ширину; на широком - всё в одну строку (title / meta / arrow).
 */
.pf-bag__group-head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title arrow"
		"meta  meta";
	column-gap: var(--space-s);
	row-gap: calc(var(--space-xs) * .5);
	align-items: center;
	cursor: pointer;
	list-style: none;
}

.pf-bag__group-head::-webkit-details-marker {
	display: none;
}

.pf-bag__group-head::after {
	content: "";
	grid-area: arrow;
	justify-self: end;
	inline-size: 1em;
	block-size: 1em;
	background: currentColor;
	-webkit-mask: url(/wp-content/uploads/icon-chevron-right.svg) center / contain no-repeat;
	mask: url(/wp-content/uploads/icon-chevron-right.svg) center / contain no-repeat;
	rotate: 90deg;
	color: var(--primary);
	transition: rotate .2s;
}

.pf-bag__group:not([open]) .pf-bag__group-head::after {
	rotate: 0deg;
}

/* T-115 п.6 (решение человека): группы с 4-й по счёту (список строк, не заголовок с
   "выбрано X из Y" - он остаётся обычным, чтобы счётчик был точным сразу) откладывают
   рендер/раскладку офскрин-контента браузером (content-visibility: auto), пока не приблизятся
   к вьюпорту - строки первых 3 групп (обычно то, что видно сразу) рендерятся как раньше.
   contain-intrinsic-size - грубая заглушка высоты, чтобы страница не прыгала при появлении/
   скролле мимо. Ctrl+F/якоря/скринридеры - браузер сам временно раскрывает content-visibility
   при поиске в странице и переходе по фрагменту (Chromium; other engines деградируют к обычному
   рендеру - content-visibility:auto без явного contain-intrinsic-size ниже точки перелома не
   ломает доступность, просто не даёт выигрыша). Sticky-итог (.pf-bag__summary) - вне .pf-bag__list,
   не затронут.

   ВАЖНО ДЛЯ БУДУЩИХ АГЕНТОВ/СКРИНШОТОВ (T-115, найдено T-116 на docs/screens/T-116-bag-komfort-
   1366.png, проверено Playwright): full-page скриншот (Playwright `full_page=True`/Puppeteer
   fullPage, CDP captureBeyondViewport) у групп с 4-й и глубже может показать ПУСТЫЕ строки
   (заголовок группы есть, строк нет) - это АРТЕФАКТ инструмента скриншота, не баг разметки.
   Полностраничный снимок рендерит виртуальный "высокий" вьюпорт одним проходом, и Chromium не
   всегда пересчитывает content-visibility:auto "relevant to user" для новой геометрии - реальный
   пользователь при обычной прокрутке (проверено scrollIntoView() на каждой из 23 групп komfort -
   getBoundingClientRect всех первых строк ненулевой) видит все строки корректно. Для доказательной
   базы задачи со скриншотом - снимай видимую область (viewport screenshot) ПОСЛЕ scrollIntoView()
   нужной группы, а не full_page у всей страницы. */
.pf-bag__group:nth-of-type(n+4) .pf-bag__list {
	content-visibility: auto;
	contain-intrinsic-size: auto 20em;
}

.pf-bag__group-head:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__group-title {
	grid-area: title;
	margin: 0;
	font-size: var(--h5);
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-dark);
}

.pf-bag__group-meta {
	grid-area: meta;
	font-size: var(--text-xs);
	color: var(--text-dark-muted);
	white-space: nowrap;
}

@container (width >= 56em) {
	.pf-bag__group-head {
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "title meta arrow";
		column-gap: var(--space-m);
	}

	.pf-bag__group-meta {
		justify-self: end;
		font-size: var(--text-s);
	}
}

.pf-bag__list {
	display: grid;
	gap: 0;
	margin: var(--space-s) 0 0;
	padding: 0;
	list-style: none;
}

.pf-bag__li--extra {
	display: none;
}

.pf-bag__group--expanded .pf-bag__li--extra {
	display: block;
}

.pf-bag__more {
	display: inline-flex;
	align-items: center;
	margin-block-start: var(--space-s);
	padding: 0;
	border: 0;
	background: none;
	color: var(--secondary);
	font-size: var(--text-s);
	font-weight: 600;
	cursor: pointer;
}

.pf-bag__more:hover {
	text-decoration: underline;
}

.pf-bag__more:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* ---- Строка товара ----
 * Мобильный (узкий контейнер): 2 строки -
 *   1) [чекбокс][фото][инфо (название/краткое/опции)][глаз]
 *   2) отступ под колонку инфо - степпер слева, цена справа (.pf-bag__row2 - flex).
 * Десктоп (широкий контейнер): 1 строка -
 *   [чекбокс][фото][инфо][степпер][цена][глаз] - .pf-bag__row2 становится display:contents,
 *   его дети (степпер/цена) занимают свои именованные grid-области напрямую.
 * Невыбранная строка не гасится целиком (эту практику отменили по правкам ревью):
 * фото - grayscale+opacity, название и цена - чуть приглушены, остальное как есть.
 */

/*
 * T-112 п.1: верхний ряд - только [чекбокс][фото][название][глаз]; краткое описание + выбор
 * вариации (.pf-bag__desc, обёртка внутри .pf-bag__info - см. render_item()) и степпер+цена
 * (.pf-bag__row2) - двумя отдельными full-width строками ПОД верхним рядом, во всю ширину строки
 * (от левого края, area начинается в колонке check). Раздельные именованные области meta/row2
 * (а не общая) - раз элементы .pf-bag__desc и .pf-bag__row2 разные, а не один блок, назначение им
 * ОДНОЙ grid-area заставило бы grid наложить их друг на друга (grid не раскладывает несколько
 * элементов одной area по потоку, как block/flex, а ставит их в одну и ту же ячейку). desktop
 * (>=56em, ниже) переопределяет и area, и display:contents у .pf-bag__info/.pf-bag__desc - там
 * раскладка прежняя, однострочная.
 */
.pf-bag__item {
	position: relative;
	display: grid;
	grid-template-columns: auto 3.5em minmax(0, 1fr) auto;
	grid-template-areas:
		"check img name eye"
		"meta meta meta meta"
		"row2 row2 row2 row2";
	align-items: start;
	column-gap: var(--space-s);
	row-gap: var(--space-xs);
	padding-block: var(--space-s);
	border-block-end: 1px solid var(--neutral-ultra-light);
}

.pf-bag__list > .pf-bag__li:last-child .pf-bag__item {
	border-block-end: 0;
}

.pf-bag__check {
	grid-area: check;
	align-self: start;
	margin-block-start: .35em;
	inline-size: 1.25em;
	block-size: 1.25em;
	accent-color: var(--primary);
}

.pf-bag__check:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__img {
	grid-area: img;
	align-self: start;
	inline-size: 3.5em;
	block-size: 3.5em;
	border-radius: var(--radius-s);
	background: var(--neutral-ultra-light);
	/* T-115 п.1 (уточнение человека): srcset строки - 64w (dgwt-wcas-product-suggestion, без
	кропа, FiboSearch) + 150w (thumbnail, кроп 1:1) - на DPR1 браузер обычно берёт 64 (не
	квадратный файл), поэтому object-fit: cover, а не contain (было при 480x480 - там всегда
	квадратный кроп, обрезка была не нужна). */
	object-fit: cover;
	filter: grayscale(0);
	opacity: 1;
	transition: filter .15s, opacity .15s;
}

.pf-bag__item:not(.pf-bag__item--checked) .pf-bag__img {
	filter: grayscale(1);
	opacity: .5;
}

/* Мобильный (узкий контейнер, по умолчанию): .pf-bag__info - только проводник (display:contents),
   его дети (.pf-bag__name, .pf-bag__desc) становятся прямыми grid-детьми .pf-bag__item и занимают
   каждый свою area (name - верхний ряд, meta - полоса под ним). Десктоп (>=56em, ниже по файлу)
   возвращает .pf-bag__info в обычный flex-блок area:info - как было до T-112. */
.pf-bag__info {
	display: contents;
}

.pf-bag__name {
	grid-area: name;
	align-self: center;
	margin: 0;
	font-size: var(--text-m);
	font-weight: 500;
	line-height: 1.3;
	color: var(--text-dark);
}

/* Обёртка краткого описания + выбора вариации (T-112 п.1) - на мобильном отдельная full-width
   строка (grid-area: meta) под верхним рядом; на десктопе (см. @container >= 56em) снова
   display:contents - её дети возвращаются в обычный поток .pf-bag__info (было так и раньше). */
.pf-bag__desc {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--space-xs) * .5);
	min-inline-size: 0;
}

.pf-bag__item:not(.pf-bag__item--checked) .pf-bag__name {
	color: color-mix(in oklch, var(--text-dark) 70%, transparent);
}

/*
 * Тема Bricks задаёт голому элементу label свой цвет/отступ/насыщенность
 * (frontend-layer.css: `label{color:var(--bricks-text-light);margin-bottom:5px;font-weight:400}`,
 * не в @layer - обычная специфичность 0-0-1 побеждает унаследованный от .pf-bag__name цвет,
 * потому что явное объявление всегда сильнее наследования, даже более слабое).
 * Название выбранной строки выглядело серым из-за этого сброса - обнуляем его точечно здесь.
 */
.pf-bag__name label {
	display: inline;
	margin: 0;
	color: inherit;
	font-weight: inherit;
	cursor: pointer;
}

.pf-bag__short {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--text-dark-muted);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pf-bag__options {
	min-inline-size: 0;
}

.pf-bag__attr {
	margin: var(--space-xs) 0 0;
	padding: 0;
	border: 0;
}

.pf-bag__attr-label {
	padding: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-dark-muted);
}

.pf-bag__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--space-xs) * .6);
	margin: calc(var(--space-xs) * .4) 0 0;
	padding: 0;
}

.pf-bag__swatch {
	display: inline-flex;
}

.pf-bag__swatch input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pf-bag__swatch label {
	padding: .35em .9em;
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius-circle);
	background: var(--white);
	color: var(--text-dark);
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
}

.pf-bag__swatch input:checked + label {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.pf-bag__swatch input:focus-visible + label {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__select {
	margin-block-start: calc(var(--space-xs) * .4);
	padding: .4em .8em;
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius-s);
	background: var(--white);
	color: var(--text-dark);
	font-size: var(--text-s);
}

.pf-bag__select:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/*
 * Строка 2 (степпер + цена): на узком контейнере - flex, отступ слева повторяет
 * колонку .pf-bag__info (grid-area row2 начинается там же); на широком - display:contents,
 * степпер и цена становятся прямыми grid-детьми .pf-bag__item (их области - qty/price).
 */
.pf-bag__row2 {
	grid-area: row2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--space-s);
	min-inline-size: 0;
}

.pf-bag__qty {
	flex: none;
	display: inline-flex;
	align-items: stretch;
	block-size: 2.25em;
	border-radius: var(--radius-circle);
	background: var(--neutral-ultra-light);
	overflow: hidden;
}

.pf-bag__qty-step {
	display: grid;
	place-items: center;
	inline-size: 2.25em;
	border: 0;
	background: transparent;
	color: var(--text-dark);
	cursor: pointer;
}

.pf-bag__qty-step svg {
	inline-size: 1em;
	block-size: 1em;
}

.pf-bag__qty-step:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__qty-input {
	inline-size: 3em;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: var(--text-s);
	font-weight: 600;
	-moz-appearance: textfield;
}

.pf-bag__qty-input::-webkit-inner-spin-button,
.pf-bag__qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pf-bag__price {
	/* T-112b: было margin-inline-start:auto - на мобильном .pf-bag__row2 (flex) это разъезжало
	   степпер (первый ребёнок, остаётся у левого края) и цену (уезжала к правому краю) по разным
	   краям строки вместо требуемой ОДНОЙ группы у правого края. Толкает вправо ВЕСЬ .pf-bag__row2
	   flex-контейнер (justify-content: flex-end, см. правило выше) - цене отдельный auto-margin не
	   нужен (на десктопе строка ниже по файлу и так уже переопределяет margin-inline-start в 0). */
	margin: 0;
	font-size: var(--text-m);
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
}

.pf-bag__item:not(.pf-bag__item--checked) .pf-bag__price {
	color: var(--text-dark-muted);
}

.pf-bag__view {
	grid-area: eye;
	justify-self: end;
	align-self: start;
	display: grid;
	place-items: center;
	inline-size: 1.8em;
	block-size: 1.8em;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: var(--neutral-ultra-light);
	color: var(--text-dark-muted);
	cursor: pointer;
}

.pf-bag__view svg {
	inline-size: 1em;
	block-size: 1em;
}

.pf-bag__view:hover {
	background: var(--primary);
	color: var(--white);
}

.pf-bag__view:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* ---- Итог сумки ---- */

.pf-bag__summary {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-s);
	padding: var(--space-m);
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius);
	background: var(--white);
}

/* Обёртки итога: количество+сумма - одной колонкой, кнопки - рядом (нужно для
компактной мобильной полосы в одну строку - см. @container (width < 56em) ниже). */
.pf-bag__summary-info {
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--space-xs) * .5);
	min-inline-size: 0;
}

.pf-bag__summary-actions {
	display: flex;
	align-items: center;
	column-gap: var(--space-s);
}

.pf-bag__summary-count,
.pf-bag__summary-total {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}

.pf-bag__count {
	font-weight: 600;
	color: var(--text-dark);
}

/* T-120 п.4 (по замечанию человека): «Сумма» - один флекс-ряд, итог (со скидкой, если порог
достигнут - JS updateDiscount() ниже) + рядом мелкая зачёркнутая полная сумма, оба без переноса
посреди числа/валюты (white-space: nowrap - сумма "153 629 сум" не должна ломаться на «сум» с
новой строки). flex-wrap: wrap - на очень узком экране зачёркнутая сумма уйдёт на вторую строку
ЦЕЛИКОМ (не разрывая внутри себя), а не сожмётся до нечитаемого. */
.pf-bag__summary-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-xs);
}

.pf-bag__total {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--primary);
	white-space: nowrap;
}

.pf-bag__total-original {
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--text-dark-muted);
	white-space: nowrap;
}

/* T-110/T-120: строка условия скидки сумки (статична, не зависит от выбора; JS дописывает
«, ещё N до скидки» в тот же узел, .pf-bag__discount-remaining, вместо отдельной строки) + строка
экономии (динамическая, JS показывает/прячет по факту достижения порога - см. assets/pf-bag.js
updateDiscount()). */
.pf-bag__summary-discount-info {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}

.pf-bag__summary-saved {
	margin: 0;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--secondary);
	white-space: nowrap;
}

.pf-bag__saved-amount {
	font-weight: 700;
}

.pf-bag__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3em;
	padding: var(--space-xs) var(--space-m);
	border: 0;
	border-radius: var(--radius-circle);
	background: var(--secondary);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
}

/* T-112 п.2: hover/active/focus-visible - фон var(--primary) (было --secondary-dark). */
@media (hover: hover) {
	.pf-bag__cart:hover:not(:disabled) {
		background: var(--primary);
	}
}

.pf-bag__cart:active:not(:disabled) {
	background: var(--primary);
}

.pf-bag__cart:focus-visible {
	background: var(--primary);
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* N=0 - приглушённая, не яркая розовая (была --secondary при любом состоянии, в т.ч. пустом выборе). */
.pf-bag__cart:disabled {
	background: var(--neutral-light);
	color: var(--text-dark-muted);
	cursor: not-allowed;
}

/* Успешное добавление (T-112 п.2, доводка T-112b п.4): кнопка «В корзину» скрыта, вместо неё -
   короткая ссылка «Перейти» (полный текст - в aria-label самой ссылки, см. render_summary()) -
   подпись первой строки итога («Выбрано:» -> «Добавлено в корзину:») меняет assets/pf-bag.js
   отдельно (.pf-bag__summary-count-label), отдельного текстового блока тут больше нет (раньше был
   .pf-bag__done-text - 3-я строка не помещалась на 390px, кнопки уезжали за край экрана).
   Любое изменение выбора (recalcAll -> updateSummary) возвращает кнопку и прячет ссылку. */
.pf-bag__cart[hidden] {
	display: none;
}

.pf-bag__done-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: calc(var(--space-xs) * .4);
	min-block-size: 3em;
	padding: var(--space-xs) var(--space-m);
	border-radius: var(--radius-circle);
	background: var(--primary);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.pf-bag__done-link[hidden] {
	display: none;
}

@media (hover: hover) {
	.pf-bag__done-link:hover {
		background: var(--primary-dark);
	}
}

.pf-bag__done-link:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: calc(var(--space-xs) * .6);
	padding: var(--space-xs) var(--space-m);
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius-circle);
	background: var(--white);
	color: var(--text-dark);
	font-size: var(--text-s);
	font-weight: 600;
	cursor: pointer;
}

.pf-bag__share svg {
	inline-size: 1.1em;
	block-size: 1.1em;
	flex: none;
}

.pf-bag__share-label {
	white-space: nowrap;
}

.pf-bag__share:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.pf-bag__share:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__msg {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--text-dark-muted);
}

.pf-bag__msg:empty {
	display: none;
}

/* T-114 п.6 (по замечанию человека): короткая сводка + раскрывающийся список названий вместо
   полного текста ошибок WooCommerce на весь экран (см. buildResultMessage() в assets/pf-bag.js).
   max-block-size у списка - список не растягивает итоговую полосу на весь экран даже при
   большом числе непринятых строк, скроллится внутри себя. */
.pf-bag__msg-summary {
	margin: 0;
}

.pf-bag__msg-details {
	margin-block-start: calc(var(--space-xs) * .5);
}

.pf-bag__msg-details summary {
	cursor: pointer;
	color: var(--secondary);
	font-weight: 600;
	text-decoration: underline;
}

.pf-bag__msg-details summary:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag__msg-list {
	max-block-size: 40vh;
	margin: calc(var(--space-xs) * .5) 0 0;
	padding-inline-start: 1.2em;
	overflow-y: auto;
}

/* ---- Раскладка: десктоп - 2 колонки, итог sticky справа ---- */

@container (width >= 56em) {
	.pf-bag__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18em, 22em);
		align-items: start;
		column-gap: var(--space-l);
	}

	.pf-bag__summary {
		position: sticky;
		inset-block-start: calc(var(--pf-topbar-h) + var(--space-m));
	}

	/* Доработка по ревью: «В корзину (N)» и «Поделиться» рядом в одной строке (правка T-105)
	не оставляли места кнопке корзины - подпись переносилась на 2-3 строки. На широком (колонка
	итога >= 22em) - кнопки друг под другом, каждая во всю ширину колонки, как было в T-104b. */
	.pf-bag__summary-actions {
		flex-direction: column;
		align-items: stretch;
		row-gap: var(--space-xs);
	}

	.pf-bag__cart,
	.pf-bag__share,
	.pf-bag__done-link {
		inline-size: 100%;
	}

	/* Строка товара - одна линия: степпер и цена выходят из .pf-bag__row2
	(display:contents) и садятся в свои области грида рядом с именем и глазом. */
	.pf-bag__item {
		grid-template-columns: auto 4.5em minmax(0, 1fr) 7.5em minmax(7em, auto) auto;
		grid-template-areas: "check img info qty price eye";
		align-items: center;
		column-gap: var(--space-m);
		padding-block: calc(var(--space-xs) * 1.2);
	}

	.pf-bag__img {
		inline-size: 4.5em;
		block-size: 4.5em;
	}

	/* Десктоп - как до T-112: .pf-bag__info снова обычный flex-блок (area:info), .pf-bag__desc
	(обёртка краткого описания + вариаций, добавлена в T-112 п.1 только ради мобильной раскладки) -
	снова display:contents, чтобы её дети (short/options) вернулись в обычный поток .pf-bag__info,
	как было до этого пакета - визуально ничего не меняется. */
	.pf-bag__info {
		grid-area: info;
		display: flex;
		flex-direction: column;
		row-gap: calc(var(--space-xs) * .5);
		min-inline-size: 0;
	}

	.pf-bag__name {
		align-self: auto;
	}

	.pf-bag__desc {
		display: contents;
	}

	.pf-bag__row2 {
		display: contents;
	}

	.pf-bag__qty {
		grid-area: qty;
		justify-self: start;
	}

	.pf-bag__price {
		grid-area: price;
		justify-self: end;
		margin-inline-start: 0;
	}

	.pf-bag__view {
		align-self: center;
	}
}

/*
 * Раскладка: мобильный - итог компактной фиксированной полосой снизу (одна строка),
 * над таббаром сайта. Слева - колонка "Выбрано: N" (мелко) над суммой, справа -
 * кнопка "В корзину" и иконочная "Поделиться" (текст скрыт визуально, aria-label остаётся).
 */

@container (width < 56em) {
	.pf-bag__layout {
		padding-block-end: calc(var(--space-l) + var(--space-m));
	}

	.pf-bag__summary {
		position: fixed;
		inset-inline: 0;
		inline-size: 100vw;
		inset-block-end: calc(var(--pf-tabbar-h) + env(safe-area-inset-bottom));
		z-index: 80;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-xs);
		row-gap: 0;
		padding-block: var(--space-xs);
		padding-inline: var(--space-s);
		border-radius: 0;
		border-inline: 0;
		border-block-end: 0;
		box-shadow: 0 calc(var(--space-xs) * -0.3) var(--space-s) color-mix(in oklch, var(--black) 8%, transparent);
	}

	/*
	 * Одна строка: текст (счётчик мелко над суммой, обрезается многоточием, если
	 * не влезает) слева, кнопки справа. flex-wrap:nowrap на .pf-bag__summary
	 * (выше) гарантирует высоту в одну строку при любой ширине счётчика/суммы.
	 */
	.pf-bag__summary-info {
		flex: 1 1 auto;
		row-gap: 0;
		min-inline-size: 0;
		overflow: hidden;
	}

	.pf-bag__summary-count {
		order: -1;
		font-size: var(--text-xs);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pf-bag__summary-total {
		font-size: var(--text-m);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pf-bag__summary-actions {
		flex: none;
		column-gap: calc(var(--space-xs) * .6);
	}

	.pf-bag__cart {
		min-block-size: 2.5em;
		padding-inline: var(--space-xs);
		font-size: var(--text-xs);
		white-space: nowrap;
	}

	/* Ссылка «Перейти» - той же высоты, что кнопка «В корзину», которую она замещает (T-112
	п.2/T-112b п.4). Компактная (короткий текст, см. render_summary()) - вместе с иконочной
	«Поделиться» надёжно помещается в ряд на 390px (текст итога слева сжимается первым за счёт
	overflow:hidden/ellipsis на .pf-bag__summary-info). */
	.pf-bag__done-link {
		flex: none;
		min-block-size: 2.5em;
		padding-inline: var(--space-s);
		font-size: var(--text-xs);
	}

	.pf-bag__share {
		inline-size: 2.5em;
		block-size: 2.5em;
		padding: 0;
		column-gap: 0;
		flex: none;
	}

	/* Текст "Поделиться" скрыт визуально на мобильном - кнопка остаётся иконочной,
	доступное имя даёт aria-label на самой кнопке (см. render_summary()). */
	.pf-bag__share-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pf-bag__msg {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-bag__group-head::after {
		transition: none;
	}

	.pf-bag__img {
		transition: none;
	}
}

/* ---- Быстрый просмотр: <dialog> (T-108) ----
 * Своё окно плагина (не popup Bricks) - живёт вне .pf-bag (JS создаёт один <dialog> и добавляет
 * в конец body при первом открытии), поэтому раскладка - обычные media query, не container query
 * (нет контейнера-предка с container-type у .pf-bag-qv). Десктоп - по центру, max-inline-size
 * ~40em; мобильный (< 48em) - лист снизу во всю ширину (sheet).
 */

/* T-114 п.2 (находка советника + измерение Playwright PerformanceObserver): overflow:hidden
   убирает полосу прокрутки страницы - без компенсации доступная ширина растёт, контент под ней
   сдвигается (тоже layout shift, считается в CLS). padding-inline-end - ТОЧНО измеренная ширина
   убранной полосы (qvUpdateLock() в pf-bag.js, window.innerWidth - clientWidth ДО блокировки),
   не эвристика scrollbar-gutter:stable (пробовали - расхождение в несколько px, CLS не был
   строго нулём). --pf-bag-scrollbar-w выставляется JS только при первом открытии, по умолчанию
   0px (в браузерах с оверлей-скроллбарами, где полоса и так не занимает места, замер даст 0). */
html.pf-bag-qv-locked {
	overflow: hidden;
	padding-inline-end: var(--pf-bag-scrollbar-w, 0px);
}

.pf-bag-qv {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	inline-size: 100vw;
	block-size: 100vh;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: var(--space-m);
	border: 0;
	background: transparent;
	align-items: center;
	justify-content: center;
}

.pf-bag-qv[open] {
	display: flex;
}

.pf-bag-qv::backdrop {
	background: color-mix(in oklch, var(--black) 55%, transparent);
}

/* T-120 п.1 (по замечанию человека - «сильно уменьшить» верхний и нижний отступы, крестик не
должен добавлять высоту над фото). .pf-bag-qv__inner - только рамка карточки: сама больше НЕ
скроллится (overflow: hidden - заодно скругляет углы прокручиваемого контента), позиционирует
крестик; настоящая прокрутка - вложенный .pf-bag-qv__scroll ниже. Разделение важно для регрессии
T-114 п.2 "крестик остаётся видимым после прокрутки до конца": будь крестик абсолютным потомком
САМОГО скролл-контейнера, он ехал бы вместе с содержимым при прокрутке - будучи потомком рамки
(которая не скроллится), он неподвижен всегда, при этом не занимает своей строки в потоке. */
.pf-bag-qv__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	max-inline-size: 40em;
	max-block-size: 100%;
	/* min-block-size:0 - грабля flexbox: без неё flex-item по умолчанию не сжимается меньше
	   высоты содержимого (даже с заданным max-block-size), .pf-bag-qv__scroll внутри не получал
	   бы места для собственного overflow-y:auto. */
	min-block-size: 0;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--white);
}

.pf-bag-qv__scroll {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	min-block-size: 0;
	/* Верхний padding - место только под крестик по высоте текста (крестик сам - absolute,
	   не участвует в потоке, но контенту не стоит вплотную начинаться под ним); нижний - заметно
	   меньше, чем в T-111 (var(--space-l) -> var(--space-xs)), но с той же безопасной зоной снизу
	   (env(safe-area-inset-bottom), T-111 п.4). */
	padding: var(--space-xs) var(--space-m) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
}

/* Крестик закрытия (T-120 п.1, по замечанию человека): раньше - обычный элемент в потоке (T-114
   п.2, свой отступ + отрицательный margin), сама СТРОКА крестика всё равно добавляла высоту над
   фото. Теперь - position: absolute поверх верхнего правого угла листа/строки с фото (тот же
   визуальный приём, что у .pf-bag-qv__photo-expand - иконка "развернуть" поверх самого фото),
   вообще не участвует в потоке - ноль добавленной высоты сверху. */
.pf-bag-qv__topbar {
	position: absolute;
	inset-block-start: var(--space-xs);
	inset-inline-end: var(--space-xs);
	z-index: 2;
}

.pf-bag-qv__close {
	display: grid;
	place-items: center;
	inline-size: 2.25em;
	block-size: 2.25em;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: color-mix(in oklch, var(--white) 85%, transparent);
	color: var(--text-dark-muted);
	box-shadow: var(--box-shadow-1);
	cursor: pointer;
}

.pf-bag-qv__close svg {
	inline-size: 1.1em;
	block-size: 1.1em;
}

.pf-bag-qv__close:hover {
	background: var(--primary);
	color: var(--white);
}

.pf-bag-qv__close:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-qv__head {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-s);
}

/* Главное фото + вертикальная лента миниатюр СЛЕВА от него (T-112 п.8, по замечанию человека -
   было горизонтальной лентой ПОД фото, T-111).
   "Высота ленты = высоте главного фото" - оба фиксированы ОДНИМ и тем же значением
   (--pf-bag-qv-photo-size), а не выводятся друг из друга через flex align-items:stretch:
   первая версия полагалась на stretch (лента - flex-item с содержимым по высоте больше, чем
   квадратное фото по aspect-ratio:1 от своей ширины) - у flex-строки высота линии считается
   по МАКСИМУМУ гипотетических (не растянутых) высот всех элементов, а высота ленты из 5 миниатюр
   ~292px оказывалась больше квадрата фото (~80px) - в итоге растягивалось не фото до ленты,
   а фото-кнопка ленту ниже своего квадрата (пустое место сверху/снизу вокруг маленького фото
   по центру растянутой кнопки), проверено Playwright (getBoundingClientRect фото меньше кнопки).
   Общий фиксированный размер убирает эту круговую зависимость: лента сама ограничена той же
   высотой и скроллится внутри неё, если миниатюр больше, чем помещается. Порядок в разметке
   (см. qvEnsureDialog(), assets/pf-bag.js) - лента ПЕРЕД фото (визуальный порядок = DOM/табуляция).
   Один товар с 1 фото - лента скрыта (gallery.length < 2, см. qvRenderThumbs()), фото по центру. */
.pf-bag-qv__media {
	/* T-112b (ревью п.6): было 9em - крупнее примерно на 20% (человек попросил увеличить главное
	фото; лента миниатюр следует за той же переменной, см. .pf-bag-qv__thumbs ниже). */
	--pf-bag-qv-photo-size: 10.8em;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	column-gap: var(--space-xs);
	inline-size: 100%;
	max-inline-size: 16.8em;
	margin-inline: auto;
}

.pf-bag-qv__photo-btn {
	position: relative;
	display: block;
	flex: none;
	inline-size: var(--pf-bag-qv-photo-size);
	block-size: var(--pf-bag-qv-photo-size);
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.pf-bag-qv__photo {
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--radius);
	background: var(--neutral-ultra-light);
	object-fit: contain;
}

/* T-112b п.6: иконка «развернуть» - подсказка, что фото кликабельно (открывает полноэкранный
просмотрщик), в правом верхнем углу главного фото, поверх него. */
.pf-bag-qv__photo-expand {
	position: absolute;
	inset-block-start: var(--space-xs);
	inset-inline-end: var(--space-xs);
	display: grid;
	place-items: center;
	inline-size: calc(var(--text-m) * 1.75);
	block-size: calc(var(--text-m) * 1.75);
	border-radius: var(--radius-circle);
	background: color-mix(in oklch, var(--white) 85%, transparent);
	color: var(--text-dark);
	box-shadow: var(--box-shadow-1);
	pointer-events: none;
}

.pf-bag-qv__photo-expand svg {
	inline-size: 1em;
	block-size: 1em;
}

/* Лента миниатюр: вертикальная прокрутка, высота ФИКСИРОВАНА той же переменной, что и главное
   фото (--pf-bag-qv-photo-size, см. .pf-bag-qv__media выше) - НЕ через flex align-items:stretch
   (см. комментарий там же про круговую зависимость, которую это вызывало). Не помещаются -
   затухание снизу (пропадает в конце прокрутки) и/или сверху (когда прокручено от начала) -
   общие классы pf-bag-fade--at-start/--at-end (JS updateScrollFadeState(), тот же приём для
   ленты табов сумок - см. tools/t106/build.py, pf-bag-page__nav). Двусторонняя маска через
   JS-классы, а не scroll-driven animation (T-111 использовал animation-timeline для
   одностороннего затухания) - для ДВУХ независимых краёв чистым CSS понадобилось бы две
   анимации с разным fill/direction, JS-классы проще и надёжнее кросс-браузерно. */
.pf-bag-qv__thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	/* inline-size зарезервирован ВСЕГДА (T-114 п.2), не только когда есть миниатюры: серверная
	галерея (qv «k(e)» в pf-bag.js) приходит асинхронно ПОСЛЕ первого открытия окна на локальных
	данных (обычно 1 фото) - когда она приносит >= 2 фото, лента должна появиться БЕЗ сдвига
	главного фото по горизонтали (было - ширина ленты равна 0 до появления миниатюр, .pf-bag-qv__media
	центрирует контент, значит появление ленты двигало фото вправо - классический скачок
	раскладки). Видимость управляется через .pf-bag-qv__thumbs[hidden] ниже (visibility, не
	display: none), а не удалением из потока. */
	inline-size: calc(3.25em + var(--focus-width) * 4);
	block-size: var(--pf-bag-qv-photo-size);
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scroll-snap-type: y proximity;
	list-style: none;
	scrollbar-width: none;
	mask-image: linear-gradient(to bottom, transparent, var(--black) var(--space-m), var(--black) calc(100% - var(--space-m)), transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, var(--black) var(--space-m), var(--black) calc(100% - var(--space-m)), transparent);
}

.pf-bag-qv__thumbs.pf-bag-fade--at-start {
	mask-image: linear-gradient(to bottom, var(--black) calc(100% - var(--space-m)), transparent);
	-webkit-mask-image: linear-gradient(to bottom, var(--black) calc(100% - var(--space-m)), transparent);
}

.pf-bag-qv__thumbs.pf-bag-fade--at-end {
	mask-image: linear-gradient(to bottom, transparent, var(--black) var(--space-m));
	-webkit-mask-image: linear-gradient(to bottom, transparent, var(--black) var(--space-m));
}

/* T-115 доп. п.9 (по замечанию человека): товар с гарантированно ОДНИМ фото (item.img_count<=1,
   класс ставится синхронно в qvOpen(), assets/pf-bag.js, ДО показа диалога - без скачка раскладки)
   - лента миниатюр не резервирует место вовсе (display:none, не visibility - для guaranteed-single
   строки лента НИКОГДА не появится, в отличие от обычного случая в T-114 п.2, где резерв нужен на
   случай будущей серверной галереи/другой вариации с фото). Без ленты .pf-bag-qv__media
   (justify-content:center) центрирует один оставшийся элемент - главное фото. */
.pf-bag-qv--single .pf-bag-qv__thumbs {
	display: none;
}

.pf-bag-qv__thumbs.pf-bag-fade--at-start.pf-bag-fade--at-end {
	mask-image: none;
	-webkit-mask-image: none;
}

/* Не display:none (убирал бы ленту из потока и сдвигал главное фото - см. комментарий у
   .pf-bag-qv__thumbs выше, T-114 п.2): ширина остаётся зарезервированной, лента невидима и
   не мешает фокусу/клику (нет дочерних кнопок, пока пуста - см. w()/qvRenderThumbs() в pf-bag.js). */
.pf-bag-qv__thumbs[hidden] {
	visibility: hidden;
}

.pf-bag-qv__thumbs::-webkit-scrollbar {
	display: none;
}

.pf-bag-qv__thumbs li {
	flex: none;
	scroll-snap-align: start;
}

.pf-bag-qv__thumb {
	display: block;
	padding: calc(var(--focus-width) * 2);
	border: var(--focus-width) solid transparent;
	border-radius: var(--radius-s);
	background: none;
	line-height: 0;
	cursor: pointer;
}

.pf-bag-qv__thumb[aria-pressed="true"] {
	border-color: var(--primary);
}

.pf-bag-qv__thumb:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-qv__thumb img {
	inline-size: 3.25em;
	block-size: 3.25em;
	border-radius: calc(var(--radius-s) * .7);
	background: var(--neutral-ultra-light);
	object-fit: contain;
}

.pf-bag-qv__info {
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--space-xs) * .5);
}

.pf-bag-qv__title {
	margin: 0;
	font-size: var(--h5);
	font-weight: 600;
	color: var(--text-dark);
}

.pf-bag-qv__price {
	margin: 0;
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--primary);
}

.pf-bag-qv__short {
	margin: 0;
	min-block-size: calc(var(--text-s) * 1.4);
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}

/* Не display:none (T-114 п.2, находка советника): AJAX-ответ (k(e) в pf-bag.js) прячет короткое
   описание, как только приходит полный desc_html - убирать блок из потока сдвигало бы всё, что
   ниже (варианты/кнопки/тело), вверх ПОСЛЕ первой отрисовки = layout shift. visibility сохраняет
   зарезервированную высоту (min-block-size выше - одна строка), меняется только видимость текста. */
.pf-bag-qv__short[hidden] {
	visibility: hidden;
}

/* Клон .pf-bag__options строки (выбор вариации внутри окна, T-111 п.5) - переиспользует стили
   свотчей/select строки (.pf-bag__swatch/.pf-bag__select и т.д. - те же классы у клона). */
.pf-bag-qv__options[hidden] {
	display: none;
}

.pf-bag-qv__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-s);
	row-gap: var(--space-xs);
	margin-block-start: var(--space-xs);
}

.pf-bag-qv__toggle {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.5em;
	padding-inline: var(--space-m);
	border: 0;
	border-radius: var(--radius-circle);
	background: var(--secondary);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 600;
	cursor: pointer;
}

.pf-bag-qv__toggle[aria-pressed="true"] {
	background: var(--neutral-ultra-light);
	color: var(--text-dark);
}

.pf-bag-qv__toggle:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-qv__link {
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--secondary);
	text-decoration: underline;
}

.pf-bag-qv__link:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* min-block-size (T-114 п.2, находка советника): «Загрузка…» (первая отрисовка, см.
   .pf-bag-qv__loading ниже) заметно ниже настоящих description+таблицы атрибутов - без резерва
   ответ AJAX (k(e) в pf-bag.js, innerHTML=desc_html+attrs_html) резко увеличивал высоту тела ПОСЛЕ
   открытия окна = крупный layout shift. Значение - приблизительная типичная высота описания
   в 3-4 строки + таблица из нескольких атрибутов (см. class-pf-bag-quickview.php); не гарантия
   математического нуля для любого товара (описания разной длины), но резерв близкий к типичному
   контенту резко уменьшает сдвиг для подавляющего большинства карточек. */
.pf-bag-qv__body {
	border-block-start: 1px solid var(--neutral-ultra-light);
	padding-block-start: var(--space-m);
	min-block-size: 14em;
}

.pf-bag-qv__body:empty {
	display: none;
}

.pf-bag-qv__loading,
.pf-bag-qv__error {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}

/* ---- Тело диалога AJAX (полное описание + таблица атрибутов) - см. class-pf-bag-quickview.php.
   Галерея (T-111) переехала в шапку диалога (.pf-bag-qv__media/__thumbs выше) - тело содержит
   только описание и таблицу атрибутов. ---- */

.pf-bag-qv__desc {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--text-dark);
}

.pf-bag-qv__attrs-wrap table {
	inline-size: 100%;
	margin-block-start: var(--space-m);
	border-collapse: collapse;
	font-size: var(--text-s);
}

.pf-bag-qv__attrs-wrap th,
.pf-bag-qv__attrs-wrap td {
	padding: calc(var(--space-xs) * .6) var(--space-xs);
	border-block-end: 1px solid var(--neutral-ultra-light);
	text-align: start;
}

@media (width < 48em) {
	.pf-bag-qv {
		align-items: flex-end;
		padding: 0;
	}

	.pf-bag-qv__inner {
		max-inline-size: none;
		max-block-size: 85vh;
		border-radius: var(--radius-l) var(--radius-l) 0 0;
	}
}

/* ---- Полноэкранный просмотрщик фото - второй <dialog> (T-111, п.1) ----
 * На весь экран (в отличие от .pf-bag-qv - тут не sheet/по центру), лента фото scroll-snap
 * во всю ширину, свайп - штатный скролл (touch), стрелки - только на устройствах с hover (мышь).
 */

.pf-bag-qv-view {
	position: fixed;
	inset: 0;
	z-index: 1010;
	display: none;
	inline-size: 100vw;
	block-size: 100vh;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--black);
	color: var(--white);
}

.pf-bag-qv-view[open] {
	display: block;
}

.pf-bag-qv-view::backdrop {
	background: var(--black);
}

.pf-bag-qv-view__track {
	display: flex;
	flex-wrap: nowrap;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	list-style: none;
	scrollbar-width: none;
}

.pf-bag-qv-view__track::-webkit-scrollbar {
	display: none;
}

.pf-bag-qv-view__slide {
	flex: none;
	inline-size: 100%;
	block-size: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.pf-bag-qv-view__slide img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.pf-bag-qv-view__close {
	position: absolute;
	inset-block-start: var(--space-m);
	inset-inline-end: var(--space-m);
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 2.5em;
	block-size: 2.5em;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: color-mix(in oklch, var(--black) 45%, transparent);
	color: var(--white);
	cursor: pointer;
}

.pf-bag-qv-view__close svg {
	inline-size: 1.2em;
	block-size: 1.2em;
}

.pf-bag-qv-view__close:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-qv-view__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	z-index: 1;
	display: none;
	place-items: center;
	inline-size: 2.75em;
	block-size: 2.75em;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: color-mix(in oklch, var(--black) 45%, transparent);
	color: var(--white);
	cursor: pointer;
}

.pf-bag-qv-view__nav svg {
	inline-size: 1.4em;
	block-size: 1.4em;
}

.pf-bag-qv-view__nav:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-qv-view__prev {
	inset-inline-start: var(--space-m);
}

.pf-bag-qv-view__next {
	inset-inline-end: var(--space-m);
}

/* Стрелки - только на устройствах с мышью (hover): на тачскрине листают свайпом. */
@media (hover: hover) {
	.pf-bag-qv-view__nav {
		display: grid;
	}
}

.pf-bag-qv-view__count {
	position: absolute;
	inset-block-end: var(--space-m);
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 1;
	margin: 0;
	padding: .3em .9em;
	border-radius: var(--radius-circle);
	background: color-mix(in oklch, var(--black) 45%, transparent);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 600;
}

/*
 * T-112b: тост «Товар добавлен» (родной popup Bricks 208697, глобальный класс .pf-toast,
 * tools/t009 - вне рамок этого пакета, не трогаем) на странице сумки визуально пересекался с
 * мобильной sticky-полосой итога (.pf-bag__summary, position:fixed снизу): z-index тоста (10001,
 * .brx-popup) выше полосы (80) - тост технически поверх, но его фон полупрозрачный (color-mix
 * white 80% + blur) - силуэт текста полосы читался сквозь нижнюю часть карточки тоста, выглядело
 * как графический баг. Не трогаем глобальную полупрозрачность (другие страницы сайта используют
 * тот же тост поверх обычного контента, там это ок) - вместо этого, только на singular pf_bag
 * (этот файл больше нигде не подключается), поднимаем тост НАД полосой итога дополнительным
 * отступом снизу. Высота полосы плавает (кнопка «В корзину (N)» короче «Добавлено в корзину:
 * N товаров» + ссылки) - фиксированный токен не подошёл (перепроверено с запасом в 2 токена -
 * всё равно пересекалось при более длинном состоянии «Добавлено»), поэтому --pf-bag-summary-h
 * измеряется в JS (initSummaryHeightVar(), assets/pf-bag.js) и обновляется ResizeObserver'ом.
 * var(...,6em) - запасной вариант на случай, если JS ещё не выполнился/отключён.
 */
@media (width < 56em) {
	.pf-toast {
		margin-block-end: calc(var(--pf-bag-summary-h, 6em) + var(--space-s));
	}
}

/*
 * T-113 (правка по замечанию человека): SEO-текст сумки, свёрнутое состояние. Раньше жило
 * Bricks-глобальным классом .pf-bag-page__seo-body--clamped (tools/t106/build.py) - на практике
 * никогда не попадало в CSS страницы, потому что Bricks компилирует CSS ТОЛЬКО для классов,
 * реально стоящих в _cssGlobalClasses какого-либо элемента дерева на момент сборки; модификатор
 * --clamped навешивался/снимался только JS-ом в браузере (add/remove class), в самом дереве
 * шаблона он нигде не значился - подтверждено: класс есть в bricks_global_classes, но его
 * правило отсутствует в сгенерированном post-220724.min.css. T-112 обошёл это инлайн-style в
 * initSeoToggle() (assets/pf-bag.js) - рабочий, но не по правилам (визуальные состояния - в CSS,
 * JS только переключает класс/aria-expanded). Правильное место - здесь: файл плагина грузится
 * на singular pf_bag (class-pf-bag-render.php), значит правило точно попадёт в браузер
 * независимо от того, стоит ли класс в Bricks-дереве.
 */
.pf-bag-page__seo-body--clamped {
	overflow: hidden;
	mask-image: linear-gradient(to bottom, var(--black) 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, var(--black) 80%, transparent 100%);
}