/* Recommendations in more places (cart page, Pro places). Layout only, the theme styles the cards. */
.lpr-place {
	clear: both;
	margin: 32px 0;
}

.lpr-place__title {
	margin: 0 0 16px;
	font-size: 1.4em;
	line-height: 1.3;
}

.lpr-place__intro {
	margin: -8px 0 16px;
	opacity: 0.8;
}

.lpr-place .lpr-place__products ul.products {
	margin-bottom: 0;
}

/* Grid rows need space between them; the slider sets its own margins. */
.lpr-place:not(.lpr-place--slider) .lpr-place__products ul.products {
	row-gap: 16px;
}

/* Astra shows its add to cart button only on hover. Touch screens have no hover,
   so keep it visible in recommendation lists. */
.lpr-place .ast-on-card-button {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Cart block: same width as the block content. */
.lpr-place--block {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-right: auto;
	margin-left: auto;
}

/* ---------- Slider layout ---------- */
.lpr-place--slider {
	--lpr-gap: 20px;
	--lpr-per-view: 4;
}

.lpr-place--slider .lpr-place__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.lpr-place--slider .lpr-place__head .lpr-place__title {
	margin: 0;
}

.lpr-place__nav {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.lpr-place__nav[hidden] {
	display: none;
}

.lpr-place__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.lpr-place__nav button:hover:not(:disabled),
.lpr-place__nav button:focus-visible {
	opacity: 1;
}

.lpr-place__nav button:disabled {
	opacity: 0.25;
	cursor: default;
}

.lpr-place__nav .lpr-place__next svg {
	transform: scaleX(-1);
}

[dir="rtl"] .lpr-place__nav svg {
	transform: scaleX(-1);
}

[dir="rtl"] .lpr-place__nav .lpr-place__next svg {
	transform: none;
}

/* Narrow cards: keep words whole in theme buttons ("Select options", not "option s"). */
.lpr-place .products .button,
.lpr-place .products .wp-element-button {
	max-width: 100%;
	padding-left: 0.8em;
	padding-right: 0.8em;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

.lpr-place--slider .lpr-place__products ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--lpr-gap);
	grid-template-columns: none !important;
	margin: 0 !important;
	padding: 0 0 4px !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.lpr-place--slider .lpr-place__products ul.products::-webkit-scrollbar {
	display: none;
}

.lpr-place--slider .lpr-place__products ul.products::before,
.lpr-place--slider .lpr-place__products ul.products::after {
	content: none !important;
	display: none !important;
}

.lpr-place--slider .lpr-place__products ul.products li.product {
	flex: 0 0 calc((100% - (var(--lpr-per-view) - 1) * var(--lpr-gap)) / var(--lpr-per-view)) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
}

@media (max-width: 921px) {
	.lpr-place--slider {
		--lpr-per-view: 3 !important;
		--lpr-gap: 16px;
	}
}

@media (max-width: 544px) {
	/* A part of the next card shows, so shoppers can tell the row scrolls. */
	.lpr-place--slider {
		--lpr-per-view: 1.6 !important;
		--lpr-gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpr-place--slider .lpr-place__products ul.products {
		scroll-behavior: auto;
	}
}

/* Touch screens: 44px slider arrows. */
@media (pointer: coarse) {
	.lpr-place__nav button {
		width: 44px;
		height: 44px;
	}
}