/*
 * Alican Premium 1.4.1 — focused homepage repair.
 * Keeps every hero visual in the same frame and prevents invalid product-card
 * markup from being amplified by the carousel layout.
 */

/* Hero: all three slides use one visual container model. */
.hero-slide__visual,
.hero-slide--lab .hero-slide__visual,
.hero-slide--car .hero-slide__visual {
	top: 34px;
	right: 0;
	bottom: 46px;
	width: min(650px, 54vw);
	overflow: hidden;
	border: 1px solid var(--alican-border);
	border-radius: 22px;
	background: #f7f8f5;
	box-shadow: var(--alican-shadow-soft);
}

.hero-slide__visual::before,
.hero-slide--lab .hero-slide__visual::before,
.hero-slide--car .hero-slide__visual::before {
	display: none;
}

.hero-slide__visual img,
.hero-slide--lab .hero-slide__visual img,
.hero-slide--car .hero-slide__visual img {
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: cover;
	object-position: center;
}

.hero-slide--paint .hero-slide__visual {
	background: #fff;
}

.hero-slide--paint .hero-slide__visual img {
	padding: 18px;
	object-fit: contain;
	object-position: center;
}

/* Product showcase: use a real grid when everything already fits. */
.product-carousel--grid {
	display: grid;
	grid-template-columns: repeat(var(--home-product-count, 4), minmax(0, 1fr));
	grid-auto-columns: auto;
	grid-auto-flow: row;
	gap: 16px;
	overflow: visible;
	padding: 3px 3px 8px;
	scroll-snap-type: none;
}

.product-carousel--grid .product-card {
	scroll-snap-align: none;
}

.product-carousel--wide-cards {
	grid-template-columns: repeat(var(--home-product-count, 2), minmax(0, 1fr));
}

.product-carousel--wide-cards .product-card--wide {
	grid-template-columns: minmax(220px, 0.88fr) minmax(0, 1.12fr);
	grid-template-rows: minmax(0, 1fr);
	min-height: 300px;
}

.product-carousel--wide-cards .product-card__media {
	min-height: 298px;
	padding: 24px;
	border-right: 1px solid var(--alican-border);
	background: linear-gradient(180deg, #fafbf9, #f3f5f1);
}

.product-carousel--wide-cards .product-card__media img,
.product-carousel--wide-cards .product-card__image {
	height: 242px;
	max-width: 100%;
}

.product-carousel--wide-cards .product-card__body {
	align-items: center;
	min-height: 298px;
	padding: 28px;
}

.product-carousel--wide-cards .product-card h3 {
	max-width: 245px;
	font-size: clamp(1rem, 1.25vw, 1.18rem);
	line-height: 1.28;
}

.product-carousel--wide-cards .product-card__category {
	margin-bottom: 8px;
	font-size: 0.7rem;
	line-height: 1.4;
}

/* Standard cards remain compact and fully self-contained. */
.product-carousel--grid:not(.product-carousel--wide-cards) .product-card {
	min-height: 356px;
}

.product-carousel--grid:not(.product-carousel--wide-cards) .product-card__media {
	min-height: 244px;
}

.product-carousel--grid:not(.product-carousel--wide-cards) .product-card__media img,
.product-carousel--grid:not(.product-carousel--wide-cards) .product-card__image {
	height: 220px;
}

.product-carousel--grid:not(.product-carousel--wide-cards) .product-card__body {
	min-height: 108px;
}

@media (max-width: 980px) {
	.hero-slide__visual,
	.hero-slide--lab .hero-slide__visual,
	.hero-slide--car .hero-slide__visual {
		top: auto;
		right: 18px;
		bottom: 34px;
		width: min(570px, calc(100% - 36px));
		height: 275px;
		border-radius: 20px;
	}

	.product-carousel--wide-cards .product-card--wide {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.product-carousel--wide-cards .product-card__media {
		min-height: 235px;
		border-right: 0;
		border-bottom: 1px solid var(--alican-border);
	}

	.product-carousel--wide-cards .product-card__media img,
	.product-carousel--wide-cards .product-card__image {
		height: 210px;
	}

	.product-carousel--wide-cards .product-card__body {
		align-items: flex-end;
		min-height: 112px;
		padding: 18px;
	}
}

@media (max-width: 782px) {
	.product-carousel--grid,
	.product-carousel--wide-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.product-carousel--grid,
	.product-carousel--wide-cards {
		grid-template-columns: 1fr;
	}

	.product-carousel--wide-cards .product-card--wide {
		min-height: 0;
	}
}
