/* Oral Clean — keep product carousels usable on all widths */

/*
 * Compact “Recently Viewed” / product strips use too many columns at mid
 * breakpoints, so the last card gets clipped. Override WoodMart column
 * vars (inline styles need !important) and keep each slide fully in view.
 */
.wd-carousel-container.wd-products-element .wd-carousel,
.wd-carousel-container.wd-products-with-bg .wd-carousel {
	--wd-col-lg: 4 !important;
	--wd-col-md: 3 !important;
	--wd-col-sm: 2 !important;
	--wd-gap-lg: 16px !important;
	--wd-gap-sm: 10px !important;
}

@media (max-width: 1200px) {
	.wd-carousel-container.wd-products-element .wd-carousel,
	.wd-carousel-container.wd-products-with-bg .wd-carousel {
		--wd-col-lg: 3 !important;
	}
}

@media (max-width: 900px) {
	.wd-carousel-container.wd-products-element .wd-carousel,
	.wd-carousel-container.wd-products-with-bg .wd-carousel {
		--wd-col-lg: 2 !important;
		--wd-col-md: 2 !important;
	}
}

@media (max-width: 560px) {
	.wd-carousel-container.wd-products-element .wd-carousel,
	.wd-carousel-container.wd-products-with-bg .wd-carousel {
		--wd-col-lg: 1 !important;
		--wd-col-md: 1 !important;
		--wd-col-sm: 1 !important;
	}
}

/* Prefer full cards over a clipped “peek” of the next slide */
.wd-carousel-container.wd-products-element .wd-carousel,
.wd-carousel-container.wd-products-with-bg .wd-carousel {
	overflow: hidden;
}

.wd-carousel-container.wd-products-element .wd-carousel-item,
.wd-carousel-container.wd-products-with-bg .wd-carousel-item {
	box-sizing: border-box;
	max-width: 100%;
}

/* Small horizontal product cards: stop titles overflowing the card */
.wd-product.wd-hover-small .wd-entities-title,
.wd-product.wd-hover-small .wd-entities-title a,
.wd-product.wd-hover-small .product-title,
.wd-product.wd-hover-small .woocommerce-loop-product__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.wd-product.wd-hover-small .product-wrapper,
.wd-product.wd-hover-small .product-element-bottom {
	min-width: 0;
}

/* Keep arrow controls usable (especially on touch) */
.wd-carousel-container.wd-products-element .wd-nav-arrows,
.wd-carousel-container.wd-products-with-bg .wd-nav-arrows {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (max-width: 768px) {
	.wd-carousel-container.wd-products-element .wd-nav-arrows,
	.wd-carousel-container.wd-products-with-bg .wd-nav-arrows {
		display: flex;
	}

	.wd-carousel-container.wd-products-element .wd-btn-arrow,
	.wd-carousel-container.wd-products-with-bg .wd-btn-arrow {
		opacity: 1;
	}
}