/*
 * 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;
}

.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-042 п.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);
	object-fit: contain;
	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-042. */
.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-042 п.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 {
	margin: 0;
	margin-inline-start: auto;
	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);
}

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

.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-042 п.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-042 п.2): кнопка «В корзину» скрыта, вместо неё - текст +
   ссылка «Перейти в корзину» (см. .pf-bag__done в разметке итога, assets/pf-bag.js onAddToCartResult()).
   Любое изменение выбора (recalcAll -> updateSummary) возвращает кнопку и прячет .pf-bag__done. */
.pf-bag__cart[hidden] {
	display: none;
}

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

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

.pf-bag__done-text {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark);
}

.pf-bag__done-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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;
}

@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;
}

/* ---- Раскладка: десктоп - 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-035)
	не оставляли места кнопке корзины - подпись переносилась на 2-3 строки. На широком (колонка
	итога >= 22em) - кнопки друг под другом, каждая во всю ширину колонки, как было в T-034b. */
	.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-042: .pf-bag__info снова обычный flex-блок (area:info), .pf-bag__desc
	(обёртка краткого описания + вариаций, добавлена в T-042 п.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-042 п.2). */
	.pf-bag__done {
		flex-direction: row;
		align-items: center;
		column-gap: calc(var(--space-xs) * .6);
		min-inline-size: 0;
	}

	.pf-bag__done-text {
		flex: 1 1 auto;
		min-inline-size: 0;
		overflow: hidden;
		font-size: var(--text-xs);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

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

html.pf-bag-qv-locked {
	overflow: hidden;
}

.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);
}

.pf-bag-qv__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	inline-size: 100%;
	max-inline-size: 40em;
	max-block-size: 100%;
	overflow-y: auto;
	/* Нижний отступ - место таблице атрибутов (последний контент) не липнуть к краю листа
	   на мобильном + safe-area (T-041, п.4). */
	padding: var(--space-m) var(--space-m) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
	border-radius: var(--radius-l);
	background: var(--white);
}

/* Шапка окна - sticky сверху внутри .pf-bag-qv__inner (сам __inner - скролл-контейнер), всегда
   видна и кликабельна при любой прокрутке длинного содержимого (T-041, п.3: раньше крестик был
   абсолютным поверх фото и на части товаров обрезался/наезжал на край). Отрицательные margin -
   бридж по всей ширине __inner (компенсирует его padding), inset-block-start: 0 - прилипание
   к самому верху скролл-контейнера. */
.pf-bag-qv__topbar {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
	padding: var(--space-s) var(--space-m) 0;
	background: var(--white);
}

.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: var(--neutral-ultra-light);
	color: var(--text-dark-muted);
	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-042 п.8, по замечанию человека -
   было горизонтальной лентой ПОД фото, T-041).
   "Высота ленты = высоте главного фото" - оба фиксированы ОДНИМ и тем же значением
   (--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 {
	--pf-bag-qv-photo-size: 9em;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	column-gap: var(--space-xs);
	inline-size: 100%;
	max-inline-size: 14em;
	margin-inline: auto;
}

.pf-bag-qv__photo-btn {
	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;
}

/* Лента миниатюр: вертикальная прокрутка, высота ФИКСИРОВАНА той же переменной, что и главное
   фото (--pf-bag-qv-photo-size, см. .pf-bag-qv__media выше) - НЕ через flex align-items:stretch
   (см. комментарий там же про круговую зависимость, которую это вызывало). Не помещаются -
   затухание снизу (пропадает в конце прокрутки) и/или сверху (когда прокручено от начала) -
   общие классы pf-bag-fade--at-start/--at-end (JS updateScrollFadeState(), тот же приём для
   ленты табов сумок - см. tools/t036/build.py, pf-bag-page__nav). Двусторонняя маска через
   JS-классы, а не scroll-driven animation (T-041 использовал animation-timeline для
   одностороннего затухания) - для ДВУХ независимых краёв чистым CSS понадобилось бы две
   анимации с разным fill/direction, JS-классы проще и надёжнее кросс-браузерно. */
.pf-bag-qv__thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	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));
}

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

.pf-bag-qv__thumbs[hidden] {
	display: none;
}

.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;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}

.pf-bag-qv__short[hidden] {
	display: none;
}

/* Клон .pf-bag__options строки (выбор вариации внутри окна, T-041 п.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);
}

.pf-bag-qv__body {
	border-block-start: 1px solid var(--neutral-ultra-light);
	padding-block-start: var(--space-m);
}

.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-041) переехала в шапку диалога (.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-041, п.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;
}