/* RainBow Babies & Kids - Home product carousels v1.1.7 */

.rainbow-home-carousel-section { position: relative; }

/* The product list keeps the original WooCommerce structure. */
.rainbow-home-carousel-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 36px 2px 12px !important;
	gap: 18px !important;
}

.rainbow-home-carousel-list::-webkit-scrollbar { display: none; }

.rainbow-home-carousel-list > .rainbow-home-carousel-item {
	flex: 0 0 calc((100% - 54px) / 4) !important;
	width: calc((100% - 54px) / 4) !important;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
	position: relative !important;
	box-sizing: border-box !important;
	align-self: flex-start !important;
}

/* Keep every product image at exactly the same vertical position.
   The sale badge is overlaid on the image and never participates in layout. */
.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image,
.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link {
	position: relative !important;
	box-sizing: border-box !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	overflow: visible !important;
}

.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image img,
.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link img {
	display: block !important;
	width: 96% !important;
	max-width: 96% !important;
	height: auto !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

/* Sale badge: back inside the image, in the upper corner. */
.rainbow-home-carousel-list > .rainbow-home-carousel-item .onsale,
.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-components-product-sale-badge,
.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-onsale,
.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product .onsale {
	position: absolute !important;
	z-index: 20 !important;
	top: 31px !important;
	left: 4px !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	max-width: calc(100% - 8px) !important;
	overflow: visible !important;
}

/* If the badge is a direct child of the product card, anchor it to the image area. */
.rainbow-home-carousel-list > .rainbow-home-carousel-item > .onsale,
.rainbow-home-carousel-list > .rainbow-home-carousel-item > .wc-block-components-product-sale-badge,
.rainbow-home-carousel-list > .rainbow-home-carousel-item > .wc-block-grid__product-onsale {
	top: 31px !important;
	left: 4px !important;
}

/* Do not allow the theme to clip the bottom price. */
.rainbow-home-carousel-list > .rainbow-home-carousel-item,
.rainbow-home-carousel-list > .rainbow-home-carousel-item * {
	box-sizing: border-box;
}

/* Controls are directly under each individual carousel. */
.rainbow-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 8px 0 18px !important;
	position: relative;
	z-index: 10;
}

.rainbow-carousel-controls button {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 50%;
	background: #fff;
	color: inherit;
	font-size: 27px;
	line-height: 32px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 7px rgba(0,0,0,.08);
	transition: transform .18s ease, box-shadow .18s ease;
}

.rainbow-carousel-controls button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.13);
}

@media (max-width: 1024px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		flex-basis: calc((100% - 36px) / 3) !important;
		width: calc((100% - 36px) / 3) !important;
	}
}

@media (max-width: 767px) {
	.rainbow-home-carousel-list {
		gap: 12px !important;
		padding-top: 34px !important;
		scroll-snap-type: x proximity;
	}
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		flex-basis: calc((100% - 12px) / 2) !important;
		width: calc((100% - 12px) / 2) !important;
	}
	.rainbow-carousel-controls button {
		width: 34px;
		height: 34px;
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		flex-basis: calc((100% - 12px) / 2) !important;
		width: calc((100% - 12px) / 2) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rainbow-home-carousel-list { scroll-behavior: auto; }
}


/* Non-sale products: reserve the exact same badge/image area and nudge only the image wrapper slightly down. */
.rainbow-home-carousel-list > .rainbow-home-carousel-item.rainbow-home-carousel-no-sale .wc-block-grid__product-image,
.rainbow-home-carousel-list > .rainbow-home-carousel-item.rainbow-home-carousel-no-sale .woocommerce-loop-product__link {
	transform: translateY(4px) !important;
}


/* v1.1.17 - Mobile product cards: reset theme/grid layout so the
   image, sale badge, title, price and button stay together. */
@media (max-width: 767px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		float: none !important;
		clear: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		margin: 0 !important;
		transform: none !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image img,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link img {
		display: block !important;
		width: 72% !important;
		max-width: 72% !important;
		height: auto !important;
		max-height: 165px !important;
		margin: 0 auto !important;
		object-fit: contain !important;
		object-position: center !important;
		box-sizing: border-box !important;
	}

	/* Keep title, price and purchase button below the image instead of
	   allowing the theme to place them beside it. */
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__title,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-title,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-add-to-cart {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		float: none !important;
		clear: both !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	/* Sale badge: keep it over the image area. The image occupies 78% of
	   the card, so this places a direct-child badge near that image edge. */
	.rainbow-home-carousel-list > .rainbow-home-carousel-item > .onsale,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item > .wc-block-components-product-sale-badge,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item > .wc-block-grid__product-onsale {
		top: 8px !important;
		left: 14% !important;
		right: auto !important;
		z-index: 20 !important;
	}
}

@media (max-width: 480px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image img,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link img {
		width: 68% !important;
		max-width: 68% !important;
		max-height: 145px !important;
	}
}

/* v1.1.19 - Mobile: constrain the COMPLETE product card so price and
   purchase controls never extend beyond the card/viewport. */
@media (max-width: 767px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		flex: 0 0 calc((100% - 12px) / 2) !important;
		width: calc((100% - 12px) / 2) !important;
		min-width: 0 !important;
		max-width: calc((100% - 12px) / 2) !important;
		overflow: hidden !important;
		padding: 0 6px !important;
		margin: 0 !important;
		align-items: center !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item > *,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__link,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-image,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .woocommerce-loop-product__title,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-title,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-add-to-cart,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item .price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-price {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 2px !important;
		padding-right: 2px !important;
		text-align: center !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item .button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button__link,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wc-block-grid__product-add-to-cart .button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		white-space: normal !important;
		text-align: center !important;
		word-break: normal !important;
	}
}

@media (max-width: 480px) {
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	.rainbow-home-carousel-list > .rainbow-home-carousel-item .button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button__link {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 14px !important;
	}
}


/* v1.1.20 - Mobile: make the heading + entire carousel obey the viewport.
   The previous card fixes were correct, but a wider theme/block ancestor could
   still make the heading, prices and controls render outside the phone width. */
@media (max-width: 767px) {
	/* Kill common desktop/grid constraints on the carousel's own wrappers. */
	.rainbow-home-carousel-section,
	.rainbow-home-carousel-heading-parent {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.rainbow-home-carousel-section {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
	}

	/* The heading is outside the horizontal product scroller, so explicitly
	   constrain it to the phone viewport rather than the desktop parent width. */
	.rainbow-home-carousel-heading {
		box-sizing: border-box !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		min-width: 0 !important;
		margin-left: calc(50% - 50vw + 12px) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
	}

	/* The scroller itself must never be wider than the viewport. */
	.rainbow-home-carousel-list {
		box-sizing: border-box !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		min-width: 0 !important;
		margin-left: 12px !important;
		margin-right: 12px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 10px !important;
	}

	/* Exactly two cards inside the constrained viewport. */
	.rainbow-home-carousel-list > .rainbow-home-carousel-item {
		flex: 0 0 calc((100% - 10px) / 2) !important;
		width: calc((100% - 10px) / 2) !important;
		max-width: calc((100% - 10px) / 2) !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Keep every child of the card inside that card. */
	.rainbow-home-carousel-list > .rainbow-home-carousel-item,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item > *,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item a,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .price,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button,
	.rainbow-home-carousel-list > .rainbow-home-carousel-item .wp-block-button__link {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Controls are also constrained to the phone. */
	.rainbow-carousel-controls {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		margin-left: 12px !important;
		margin-right: 12px !important;
		box-sizing: border-box !important;
	}
}