/**
 * Cross-sell carousel — "Nezabudli ste na niečo?".
 *
 * One horizontal product scroller rendered in two places: the cart page and the
 * checkout. Visually it is the homepage product row
 * (.hp-row / .row-nav / .hp-scroller in pages/home.css) rebuilt standalone —
 * home.css is not enqueued on cart or checkout, so the head, the arrows and the
 * track are restated here, scoped to .wa-cross-sell so nothing leaks back onto
 * the homepage rows.
 *
 * Cards are the theme's standard .pcard (components/product-card.css); only
 * their width inside the track is set here.
 *
 * How many cards a view shows is one calculation driven by two custom
 * properties, so a variant only has to restate --cs-per / --cs-gap:
 *   column = max( --cs-min, (100% - (--cs-per - 1) * --cs-gap) / --cs-per )
 * The --cs-min floor keeps cards readable in a narrow column; the track simply
 * scrolls further when the floor wins.
 *
 * Spacing is written in literal px on purpose. pages/checkout-tokens.css
 * re-declares --space-* with a value-named scale (--space-8 = 8px) that clashes
 * with tokens.css (--space-8 = 42px), and this file renders in both worlds.
 *
 * @package Bionela_New
 */

/* ============================================================ Shared shell */
.wa-cross-sell {
	--cs-gap: 16px;
	--cs-per: 4;
	--cs-min: 200px;
	position: relative;
}

/* Nothing to recommend — leave no gap behind. */
.wa-cross-sell:empty,
.wa-cross-sell[hidden] { display: none; }

/* Section printed with an empty track (kept in its own rule: a browser without
   :has() would drop the whole selector list, taking :empty with it). */
.wa-cross-sell:not(:has(.wa-cross-sell__scroller li)) { display: none; }

/* ---------------------------------------------------------------- Head row */
.wa-cross-sell__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.wa-cross-sell__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ----------------------------------------------------------- Prev / next */
.wa-cross-sell__nav {
	display: flex;
	flex: none;
	gap: 8px;
}

.wa-cross-sell__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--bg);
	color: var(--teal);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background .13s, color .13s, border-color .13s;
}

.wa-cross-sell__nav button:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.wa-cross-sell__nav button svg { width: 18px; height: 18px; }
.wa-cross-sell__nav button:disabled { opacity: .35; cursor: default; }
.wa-cross-sell__nav button:disabled:hover { background: var(--bg); color: var(--teal); border-color: var(--line); }
.wa-cross-sell__nav button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------------ Track */
/* The scrollbar is hidden — the arrows and drag-to-scroll (cross-sell.js) are
   the affordance, as on the homepage rows. */
.wa-cross-sell__scroller {
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wa-cross-sell__scroller::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.wa-cross-sell__scroller { scroll-behavior: smooth; }
}

/* While dragging with the mouse, snap and smooth would fight the pointer. */
.wa-cross-sell__scroller.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }

/* The WooCommerce loop prints <ul class="products columns-N"> — make it the
   horizontal track and undo the float/clearfix layout the class implies. */
.wa-cross-sell__scroller ul.products {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(
		var(--cs-min),
		calc((100% - (var(--cs-per) - 1) * var(--cs-gap)) / var(--cs-per))
	);
	gap: var(--cs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-cross-sell__scroller ul.products::before,
.wa-cross-sell__scroller ul.products::after { content: none; }

.wa-cross-sell__scroller ul.products > li {
	scroll-snap-align: start;
	width: auto;
	margin: 0;
	float: none;
}

/* Keyboard focus inside a card. outline-offset is negative on purpose: the
   track clips overflow, so an outward outline would be cut off at the edges. */
.wa-cross-sell__scroller li a:focus-visible,
.wa-cross-sell__scroller li button:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: -2px;
	border-radius: var(--radius-sm);
}

/* ======================================================== Variant: cart page */
/* Full width of the content column — the section is a sibling of
   .woocommerce-cart-form / .cart-collaterals. */
.wa-cross-sell--cart { margin: 34px 0 8px; }

@media (max-width: 1100px) {
	.wa-cross-sell--cart { --cs-per: 3; }
}

@media (max-width: 820px) {
	.wa-cross-sell--cart { --cs-per: 2.2; --cs-min: 180px; }
}

@media (max-width: 560px) {
	.wa-cross-sell--cart {
		--cs-per: 1.4;
		--cs-gap: 12px;
		--cs-min: 150px;
		margin-top: 26px;
	}
	.wa-cross-sell--cart .wa-cross-sell__title { font-size: 19px; }
	.wa-cross-sell--cart .wa-cross-sell__nav button { width: 34px; height: 34px; }
	.wa-cross-sell--cart .wa-cross-sell__nav button svg { width: 16px; height: 16px; }
}

/* ====================================================== Variant: checkout */
/* Quieter than the cart: smaller heading, tighter rhythm, a hairline instead of
   a block of its own — it must not compete with the order form. */
.wa-cross-sell--checkout {
	--cs-per: 4;
	--cs-gap: 14px;
	--cs-min: 190px;
	margin: 4px 0 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.wa-cross-sell--checkout .wa-cross-sell__head { margin-bottom: 12px; }

.wa-cross-sell--checkout .wa-cross-sell__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.wa-cross-sell--checkout .wa-cross-sell__nav button { width: 34px; height: 34px; }
.wa-cross-sell--checkout .wa-cross-sell__nav button svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
	.wa-cross-sell--checkout { --cs-per: 3; }
}

@media (max-width: 900px) {
	.wa-cross-sell--checkout { --cs-per: 2.4; --cs-min: 175px; }
}

@media (max-width: 560px) {
	.wa-cross-sell--checkout {
		--cs-per: 1.4;
		--cs-gap: 12px;
		--cs-min: 150px;
		margin-bottom: 22px;
		padding-top: 16px;
	}
	.wa-cross-sell--checkout .wa-cross-sell__title { font-size: 17px; }
	.wa-cross-sell--checkout .wa-cross-sell__nav button { width: 32px; height: 32px; }
	.wa-cross-sell--checkout .wa-cross-sell__nav button svg { width: 15px; height: 15px; }
}