.cb-block--guide-products {
	padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
}

/* Same fluid width (65vw) and centering as the feature row above. */
.cb-guide-products__inner {
	width: 65vw;
	margin-inline: auto;
	position: relative;
}

.cb-guide-products__heading {
	font-family: var(--cb-font-body);
	font-weight: var(--cb-font-weight-bold);
	font-size: 1.125rem;
	color: #242118;
	margin: 0 0 1rem;
}

.cb-guide-products__carousel {
	position: relative;
}

/* The WooCommerce shortcode list becomes the horizontal scroll track.
   No gap between cards — they sit flush, like the reference design. */
.cb-guide-products .products {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.cb-guide-products .products::-webkit-scrollbar {
	display: none;
}

/* 4 products per view by default (laptops); 6 only on large monitors
   (≥1800px), 2 on phones (≤640px). */
.cb-guide-products .products li.product {
	flex: 0 0 25%;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	position: relative;
	scroll-snap-align: start;
	float: none !important;
}

.cb-guide-products .products li.product img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* Remove the "add to cart / select options" button. */
.cb-guide-products .products li.product > a.button,
.cb-guide-products .products li.product .add_to_cart_button,
.cb-guide-products .products li.product .added_to_cart,
.cb-guide-products .products li.product .woocommerce-loop-add-to-cart {
	display: none !important;
}

.cb-guide-products .products li.product .woocommerce-loop-product__link {
	text-decoration: none;
	display: block;
}

.cb-guide-products .products li.product .woocommerce-loop-product__title {
	font-family: var(--cb-font-body);
	font-size: 1rem;
	color: #242118;
	padding: 0.6rem 0.75rem 0.1rem 0;
	transition: color var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-guide-products .products li.product .price {
	display: block;
	color: var(--cb-color-text);
	font-weight: var(--cb-font-weight-bold);
	padding-right: 0.75rem;
}

/* On hover the product name (and any colour/attribute text) turns brand red. */
.cb-guide-products .products li.product:hover .woocommerce-loop-product__title,
.cb-guide-products .products li.product:hover .cb-loop-meta,
.cb-guide-products .products li.product:hover .cb-loop-colours {
	color: var(--lindex-logo-red, #d6253b);
}

/* Wishlist heart, overlaid inside the top-right of the card.
   (shop.css isn't loaded on this template, so the rules live here too.) */
.cb-guide-products .cb-wishlist-btn--loop {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #242118;
	cursor: pointer;
}

.cb-guide-products .cb-wishlist-btn--loop:hover,
.cb-guide-products .cb-wishlist-btn--loop:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

.cb-guide-products .cb-wishlist-btn--loop .cb-wishlist-btn__icon {
	display: block;
}

.cb-guide-products .cb-wishlist-btn--loop.is-active .cb-wishlist-btn__icon,
.cb-guide-products .cb-wishlist-btn--loop.is-active .cb-wishlist-btn__icon path {
	fill: var(--lindex-logo-red, #d6253b) !important;
	stroke: var(--lindex-logo-red, #d6253b) !important;
}

/* Navigation arrows. */
.cb-guide-products__nav {
	position: absolute;
	top: 36%;
	transform: translateY(-50%);
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--cb-color-border);
	box-shadow: var(--cb-shadow-md);
	color: #242118;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity var(--cb-duration-fast) var(--cb-ease-out),
		background var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-guide-products__nav:hover {
	background: var(--cb-color-bg-alt);
}

.cb-guide-products__nav--prev {
	left: -1.375rem;
}

.cb-guide-products__nav--next {
	right: -1.375rem;
}

.cb-guide-products__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

/* Pagination dots. */
.cb-guide-products__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.cb-guide-products__dots button {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--cb-color-border);
	cursor: pointer;
	transition: background var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-guide-products__dots button[aria-current="true"] {
	background: #242118;
}

/* ≥1800px (large monitors) → 6 per view. */
@media (min-width: 1800px) {
	.cb-guide-products .products li.product {
		flex-basis: 16.6667%;
	}
}

@media (max-width: 56rem) {
	.cb-guide-products__inner {
		width: auto;
		margin-inline: var(--cb-gutter);
	}
}

/* ≤640px → 2 per view. */
@media (max-width: 640px) {
	.cb-guide-products .products li.product {
		flex-basis: 50%;
	}

	.cb-guide-products__nav {
		display: none;
	}
}
