/* Shared layout for the WooCommerce Product Upsells and Cart Cross-Sells widgets. */
.efp-related-products {
	width: 100%;
	min-width: 0;
	position: relative;
}

/* Match the New Arrivals carousel structure and edge-to-edge scrolling behavior. */
.efp-related-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	padding: 0 20px;
	margin: 0 -20px;
}

.efp-related-track-wrap {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.efp-related-track {
	--efp-related-gap-current: var(--efp-related-gap, 24px);
	display: flex;
	gap: var(--efp-related-gap-current);
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.efp-related-track::-webkit-scrollbar {
	display: none;
}

/* Override the shared generic card width with the widget's responsive slide count. */
.efp-related-track > .efp-card {
	flex: 0 0 calc((100% - (var(--efp-related-columns-desktop, 4) - 1) * var(--efp-related-gap-current, 24px)) / var(--efp-related-columns-desktop, 4));
	width: auto;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	scroll-snap-align: start;
}

.efp-related-track .efp-card-media {
	width: 100%;
}

.efp-related-track .efp-card-link {
	min-width: 0;
}

/* Use the same arrow styling as the New Arrivals carousel. */
.efp-related-arrow {
	flex: 0 0 auto;
	z-index: 2;
}

.efp-related-products-notice {
	padding: 16px 18px;
	border: 1px dashed #c9c9c9;
	background: #f8f8f8;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
}

/* Fallback: hide desktop arrows when all products fit in the desktop row. */
@media (min-width: 1025px) {
	.efp-related-products--no-desktop-overflow .efp-related-arrow {
		display: none;
	}
}

@media (max-width: 1024px) {
	.efp-related-track > .efp-card {
		flex-basis: calc((100% - (var(--efp-related-columns-tablet, 2) - 1) * var(--efp-related-gap-current, 24px)) / var(--efp-related-columns-tablet, 2));
	}
}

@media (max-width: 767px) {
	.efp-related-products-title {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.efp-related-products-description {
		margin-bottom: 16px;
	}

	.efp-related-track {
		--efp-related-gap-current: min(var(--efp-related-gap, 24px), 16px);
	}

	.efp-related-track > .efp-card {
		flex-basis: calc((100% - (var(--efp-related-columns-mobile, 1) - 1) * var(--efp-related-gap-current, 16px)) / var(--efp-related-columns-mobile, 1));
	}
}