/**
 * Vitrine carousel (4-in-row) — scoped styles.
 * Требования:
 * - фото строго квадрат (1:1)
 * - кнопка Order поверх фото, появляется при hover/focus (на таче — всегда)
 * - данные (title / sizes / color) в тёмной плашке ПОД фото, отдельными строками
 */

.na-vitrine__carousel {
	position: relative;
}




.na-vitrine__track {
	--na-gap: clamp(10px, 1.2vw, 18px);

	display: flex;
	gap: var(--na-gap);

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-padding-left: 1px;

	-webkit-overflow-scrolling: touch;

	padding: 4px 2px 8px;
}

.na-vitrine__track::-webkit-scrollbar {
	display: none;
}

.na-vitrine__card {
	flex: 0 0 calc((100% - (var(--na-gap) * 3)) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1200px) {
	.na-vitrine__card {
		flex-basis: calc((100% - (var(--na-gap) * 2)) / 3);
	}
}

@media (max-width: 920px) {
	.na-vitrine__card {
		flex-basis: calc((100% - var(--na-gap)) / 2);
	}
}

@media (max-width: 560px) {
	.na-vitrine__card {
		flex-basis: 100%;
	}
}

/* Карточка: фото сверху, инфо-плашка снизу */
.na-vitrine__figure {
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* КВАДРАТ “железно”: padding-top:100% (не зависит от aspect-ratio и глобальных стилей темы) */
.na-vitrine__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: rgba(0, 0, 0, 0.25);
}

.na-vitrine__media::before {
	content: "";
	display: block;
	padding-top: 100%;
}

/* ВАЖНО: перебиваем глобальные стили темы для img (включая height:auto !important и т.п.) */
.na-vitrine__media img,
.na-vitrine__media img.na-vitrine__img,
.na-vitrine__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
}

/* Плейсхолдер, если картинки нет */
.na-vitrine__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
}

/* Тёмная плашка ПОД фото (тут важно сбить возможные глобальные стили figcaption) */
.na-vitrine__info {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;

	width: 100%;
	flex: 0 0 auto;

	padding: clamp(10px, 1.2vw, 14px);
	
	border-top: var(--na-stroke-w, 1px) solid rgba(255, 255, 255, 0.06);
}

.na-vitrine__title {
	font-family:var(--accent-font);
	margin: 0;
	line-height: 1.2;
}

.na-vitrine__line {
	margin: 6px 0 0;
	opacity: 0.82;
	font-size: 0.80em;
	line-height: 1;
}

.na-vitrine__line--price {
	opacity: 0.92;
	font-weight: 600;
}

/* Order: появляется при наведении */
.na-vitrine__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 180ms ease;
	pointer-events: none;
	z-index: 1;
}

.na-vitrine__order {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 10px 14px;
	border-radius: var(--na-radius-pill, 999px);
	text-decoration: none;

	border: var(--na-stroke-w, 1px) solid currentColor;
	background: rgba(0, 0, 0, 0.45);

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.na-vitrine__card:hover .na-vitrine__order,
.na-vitrine__card:focus-within .na-vitrine__order {
	opacity: 1;
	pointer-events: auto;
}

.na-vitrine__card:hover .na-vitrine__media::after,
.na-vitrine__card:focus-within .na-vitrine__media::after {
	opacity: 1;
}

/* На тач-устройствах кнопку показываем всегда (иначе невозможно заказать) */
@media (hover: none) {
	.na-vitrine__order {
		opacity: 1;
		pointer-events: auto;
	}

	.na-vitrine__media::after {
		opacity: 0.35;
	}
}

/* Стрелки */
.na-vitrine__controls {
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 0 6px;
}

.na-vitrine__arrow {
	pointer-events: auto;
}

/* SVG-стрелки: размеры и выравнивание (через currentColor), как в карусели Портфолио. */
.na-vitrine[data-na-vitrine] .carouselArrow svg {
	width: 1.2em;
	height: 1.2em;
	display: block;
}

.na-vitrine[data-na-vitrine] .carouselArrow {
	line-height: 0;
}