/* Homepage landing tweaks — spacing, cards, tiles, image banners */

/* 1) Hero → next section: 12px */
.home .hero,
.home .hero__container {
	margin-bottom: 12px;
}

/* 2) Carousels: 12px top + 12px bottom (= 24px between) */
.home .block[class*="products-"]__wrapper,
.home .home-carousel,
.home .home-section--ready-shipping {
	padding-top: 12px;
	padding-bottom: 12px;
}

.home .block > .carousel {
	padding-bottom: 0;
}

.home .carousel__header {
	padding-top: 0;
	margin-bottom: 12px;
}

@media (max-width: 1440px) {
	.home .carousel__header {
		padding-top: 0;
	}
}

@media (max-width: 768px) {
	.home .carousel__header {
		padding-top: 0;
	}
}

/* 3) Product cards: image 10% shorter; mobile width -20% (slick shows more on desktop) */
.home .carousel__content li a {
	padding-bottom: 90%;
}

@media (max-width: 480px) {
	.home .slick-list .product {
		width: 200px; /* was 250px → -20% */
		height: auto;
	}
}

/* Color swatches on the same row as price */
.home .product .woocommerce-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 8px;
	position: relative;
}

.home .product .woocommerce-loop-product__title {
	width: 100%;
	flex: 0 0 100%;
}

.home .product .product-color-container {
	position: static;
	bottom: auto;
	left: auto;
	order: 2;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.home .product .woocommerce-card__header .price,
.home .carousel .product .price {
	order: 1;
	margin: 0;
	flex: 1 1 auto;
}

/* 4) Image banners */
.home-image-banner__section {
	padding-top: 12px;
	padding-bottom: 12px;
}

.home-image-banner {
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	aspect-ratio: 1272 / 260; /* desktop both variants */
}

.home-image-banner__img,
.home-image-banner picture,
.home-image-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.home-image-banner--tall {
		aspect-ratio: 390 / 400;
	}

	.home-image-banner--short {
		aspect-ratio: 390 / 221;
	}
}

/* 5) Category tiles: desktop fill row evenly (center-weighted when < 6) */
@media (min-width: 768px) {
	.home .home-categories {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		gap: 1px;
		grid-template-columns: none;
	}

	.home .home-categories > a {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
}