/**
 * Related-products carousel — the [bozpo_related_products] shortcode used at the
 * end of blog articles. Mirrors the homepage "Odporúčame" carousel
 * (.home-featured) visually, scoped to .bozpo-related so it is self-contained
 * inside the article body. Product cards come from components/product-card.css.
 */

.bozpo-related {
	margin: var(--space-40) 0 var(--space-16);
}

.bozpo-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.bozpo-related__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-25);
	font-weight: 700;
}

.bozpo-related__nav {
	display: flex;
	gap: var(--space-8);
}

.bozpo-related__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--color-text);
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.bozpo-related__arrow svg {
	width: 18px;
	height: 18px;
}

.bozpo-related__arrow:not(:disabled):hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.bozpo-related__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.bozpo-related__viewport {
	overflow: hidden;
}

.bozpo-related .products {
	display: flex;
	gap: var(--space-18);
	margin: 0;
	padding: 0 0 var(--space-6);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.bozpo-related .products::-webkit-scrollbar {
	display: none;
}

/* While the user drags with the mouse, disable snap + smooth so the track
   follows the pointer 1:1 instead of stuttering between card boundaries. */
.bozpo-related .products.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.bozpo-related .products > li.product-card {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

@media (min-width: 561px) {
	.bozpo-related .products > li.product-card {
		flex-basis: 262px;
	}
}

@media (min-width: 981px) {
	.bozpo-related__title {
		font-size: var(--text-30);
	}
}

/* --------------------------------------------------------------------------
 * Insulate the product cards from the blog article body typography.
 * The carousel renders inside .entry-content (single-post.css), whose link and
 * list rules would otherwise cascade into the WooCommerce cards and make them
 * differ from the homepage. Neutralise the specific leaks:
 *   1. The "→" arrow that .entry-content a::before prepends to every link — it
 *      is injected as a stray flex child of the card's wrapper link, which also
 *      shifts the price/button spacing. The add-to-cart button keeps its own
 *      cart glyph (excluded via :not).
 *   2. The bottom margin .entry-content li adds to the <li> product cards.
 * -------------------------------------------------------------------------- */
.bozpo-related .product-card a:not(.add_to_cart_button)::before {
	content: none;
}

.bozpo-related .products > li.product-card {
	margin-bottom: 0;
}

/*
 * Match the homepage card layout exactly. On the front page the cards are laid
 * out by pages/home.css as a grid with a row-gap — that stylesheet only loads on
 * the front page, so elsewhere the card falls back to the flex layout in
 * components/product-card.css (price sits flush against the button). Replicate
 * the homepage grid here so the article carousel gets the same spacing between
 * the price and the add-to-cart button. Keep these values in sync with the
 * `.product-card` block in pages/home.css.
 */
.bozpo-related .product-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-22);
	align-items: start;
	padding: var(--space-28) var(--wrap-pad) var(--space-10);
}

.bozpo-related .woocommerce-loop-product__link {
	align-self: flex-end;
}