/* Карусель всех видов плитки на главной */

.home-tiles-carousel {
	position: relative;
	padding: clamp(2rem, 5vw, 3rem) 0;
	background: linear-gradient(180deg, #f6f7f6 0%, #eef1f0 100%);
	border-top: 1px solid rgba(33, 48, 47, 0.08);
}

.home-tiles-carousel__header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto clamp(1.25rem, 4vw, 2rem);
	padding: 0 0.5rem;
}

.home-tiles-carousel__eyebrow {
	display: inline-block;
	margin-bottom: 0.45rem;
	font-family: var(--nd-font, "Segoe UI", system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-gold-dark, #d99a2e);
}

.home-tiles-carousel__title {
	margin: 0 0 0.6rem;
	font-family: var(--nd-font, "Segoe UI", system-ui, sans-serif);
	font-size: clamp(1.35rem, 4vw, 2rem);
	font-weight: 500;
	color: var(--nd-green, #21302f);
	line-height: 1.2;
}

.home-tiles-carousel__title span {
	color: var(--nd-gold-dark, #d99a2e);
}

.home-tiles-carousel__lead {
	margin: 0;
	font-family: var(--nd-font, "Segoe UI", system-ui, sans-serif);
	font-size: clamp(0.88rem, 2.5vw, 1rem);
	line-height: 1.55;
	color: var(--nd-muted, #5a6b69);
}

.home-tiles-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding: 0 0.25rem;
}

.home-tiles-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--nd-green, #21302f);
	background: #fff;
	border: 1px solid var(--nd-line, rgba(33, 48, 47, 0.14));
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-tiles-carousel__arrow:hover {
	background: var(--nd-green, #21302f);
	border-color: var(--nd-green, #21302f);
	color: #fff;
}

.home-tiles-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.home-tiles-carousel__viewport {
	position: relative;
	margin: 0 -0.25rem;
}

.home-tiles-carousel__viewport::before,
.home-tiles-carousel__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(12px, 3vw, 40px);
	z-index: 2;
	pointer-events: none;
}

.home-tiles-carousel__viewport::before {
	left: 0;
	background: linear-gradient(90deg, #f6f7f6 0%, transparent 100%);
}

.home-tiles-carousel__viewport::after {
	right: 0;
	background: linear-gradient(270deg, #eef1f0 0%, transparent 100%);
}

.home-tiles-carousel__track {
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.15rem);
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 0.35rem clamp(0.5rem, 2vw, 0.75rem) 1.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--nd-gold, #f8b34b) rgba(33, 48, 47, 0.08);
	cursor: grab;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
}

/* Десктоп: горизонтальная прокрутка мышью */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.home-tiles-carousel__track {
		-webkit-overflow-scrolling: touch;
	}
}

.home-tiles-carousel__track.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.home-tiles-carousel__track.is-dragging a {
	pointer-events: none;
}

.home-tiles-carousel__track:focus {
	outline: 2px solid var(--nd-gold, #f8b34b);
	outline-offset: 4px;
}

.home-tiles-carousel__track::-webkit-scrollbar {
	height: 8px;
}

.home-tiles-carousel__track::-webkit-scrollbar-thumb {
	background: var(--nd-gold, #f8b34b);
	border-radius: 4px;
}

.home-tiles-carousel__slide {
	position: relative;
	flex: 0 0 min(300px, 88vw);
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.home-tiles-carousel__slide {
		flex: 0 0 280px;
	}
}

@media (min-width: 1200px) {
	.home-tiles-carousel__slide {
		flex: 0 0 300px;
	}
}

.home-tiles-carousel__type {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 0.3rem 0.55rem;
	font-family: var(--nd-font, "Segoe UI", system-ui, sans-serif);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nd-green, #21302f);
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--nd-line, rgba(33, 48, 47, 0.14));
	border-radius: 2px;
}

.home-tiles-carousel__type--vibrolit {
	border-left: 3px solid var(--nd-gold, #f8b34b);
}

.home-tiles-carousel__type--vibropres {
	border-left: 3px solid var(--nd-green, #21302f);
}

.home-tiles-carousel__slide .nd-card,
.home-tiles-carousel__slide .home-product-card {
	height: 100%;
	min-height: 100%;
}

.home-tiles-carousel__slide .nd-card__media img {
	object-fit: cover;
}

.home-tiles-carousel__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.home-tiles-carousel__catalog-link {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1rem;
	font-family: var(--nd-font, "Segoe UI", system-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--nd-green, #21302f);
	background: #fff;
	border: 1px solid var(--nd-line, rgba(33, 48, 47, 0.14));
	border-radius: 2px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-tiles-carousel__catalog-link:hover {
	border-color: var(--nd-green, #21302f);
	background: var(--nd-green, #21302f);
	color: #fff;
}

.home-tiles-carousel__catalog-link--accent {
	background: var(--nd-gold, #f8b34b);
	border-color: var(--nd-gold, #f8b34b);
	color: var(--nd-green, #21302f);
}

.home-tiles-carousel__catalog-link--accent:hover {
	background: var(--nd-green, #21302f);
	border-color: var(--nd-green, #21302f);
	color: #fff;
}

.home-tiles-carousel__empty {
	text-align: center;
	font-size: 0.95rem;
	color: var(--nd-muted, #5a6b69);
}

.home-tiles-carousel__empty a {
	color: var(--nd-green, #21302f);
	font-weight: 500;
}

/* Карточки в карусели без скрытия до скролла */
.home-tiles-carousel .js-scroll {
	opacity: 1;
}

/*
 * Мобильные: без горизонтального touch-scroll (не блокирует скролл страницы).
 * Листание — стрелки и автопрокрутка. Карточки — div, не ссылка.
 */
@media (max-width: 767px) {
	.home-tiles-carousel,
	.home-tiles-carousel .container,
	.home-tiles-carousel__viewport,
	.home-tiles-carousel__slide,
	.home-product-card--carousel {
		touch-action: auto;
	}

	.home-tiles-carousel__track {
		overflow-x: hidden;
		overflow-y: visible;
		scroll-snap-type: none;
		cursor: default;
		overscroll-behavior: auto;
		-webkit-overflow-scrolling: auto;
	}

	.home-tiles-carousel__track.is-dragging {
		cursor: default;
	}

	.home-tiles-carousel__track.is-dragging a,
	.home-tiles-carousel__track.is-dragging button {
		pointer-events: auto;
	}
}

/* Мобильная: компактнее */
@media (max-width: 767px) {
	.home-tiles-carousel {
		padding: 1.15rem 0 1.35rem;
		overflow: visible;
	}

	.home-tiles-carousel .container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.home-tiles-carousel__header {
		margin-bottom: 0.75rem;
	}

	.home-tiles-carousel__title {
		font-size: 1.2rem;
	}

	.home-tiles-carousel__lead {
		font-size: 0.82rem;
		line-height: 1.45;
	}

	.home-tiles-carousel__controls {
		margin-bottom: 0.5rem;
	}

	.home-tiles-carousel__arrow {
		width: 44px;
		height: 44px;
		font-size: 1.6rem;
	}

	.home-tiles-carousel__viewport {
		margin: 0;
	}

	.home-tiles-carousel__viewport::before,
	.home-tiles-carousel__viewport::after {
		width: 16px;
	}

	.home-tiles-carousel__track {
		gap: 0.55rem;
		padding: 0.2rem 0 0.5rem;
		scrollbar-width: none;
	}

	.home-tiles-carousel__track::-webkit-scrollbar {
		display: none;
		height: 0;
	}

	.home-tiles-carousel__slide {
		flex: 0 0 min(210px, 72vw);
		min-width: 0;
	}

	.home-tiles-carousel__slide .nd-card,
	.home-tiles-carousel__slide .home-product-card {
		height: auto;
		min-height: 0;
	}

	.home-tiles-carousel__type {
		top: 6px;
		left: 6px;
		padding: 0.2rem 0.4rem;
		font-size: 0.55rem;
	}

	.home-tiles-carousel__slide .nd-card__media,
	.home-tiles-carousel__slide .home-product-card__media {
		aspect-ratio: 5 / 4;
		padding: 0.45rem;
	}

	.home-tiles-carousel__slide .nd-card__media img,
	.home-tiles-carousel__slide .home-product-card__media img {
		width: 88%;
		height: 88%;
	}

	.home-tiles-carousel__slide .nd-card__body,
	.home-tiles-carousel__slide .home-product-card__body {
		padding: 0.6rem 0.65rem 0.7rem;
		gap: 0.3rem;
	}

	.home-tiles-carousel__slide .nd-card__eyebrow {
		font-size: 0.58rem;
	}

	.home-tiles-carousel__slide .nd-card__title span {
		font-size: 0.86rem;
		line-height: 1.25;
	}

	.home-tiles-carousel__slide .nd-card__meta {
		margin-top: 0;
		padding-top: 0.45rem;
		gap: 0.3rem;
	}

	.home-tiles-carousel__slide .nd-card__row dt {
		font-size: 0.58rem;
	}

	.home-tiles-carousel__slide .nd-card__row dd {
		font-size: 0.78rem;
	}

	.home-tiles-carousel__slide .nd-card__row--price dd {
		font-size: 0.88rem;
	}

	.home-tiles-carousel__slide .nd-card__badge,
	.home-tiles-carousel__slide .home-product-card__price-tag {
		font-size: 0.7rem;
		padding: 0.22rem 0.4rem;
		top: 6px;
		right: 6px;
	}

	.home-tiles-carousel__slide .nd-card__badge small,
	.home-tiles-carousel__slide .home-product-card__price-tag small {
		font-size: 0.52rem;
	}

	.home-tiles-carousel__slide .nd-card__cta,
	.home-tiles-carousel__slide .home-product-card__cta {
		padding: 0.5rem 0.4rem;
		font-size: 0.62rem;
	}

	.home-tiles-carousel__footer {
		margin-top: 0.35rem;
		gap: 0.4rem;
	}

	.home-tiles-carousel__catalog-link {
		padding: 0.45rem 0.75rem;
		font-size: 0.72rem;
	}
}