/**
 * Collection archive composition.
 *
 * Layout and page-specific behaviour only - the product card itself is a
 * component and lives in components.css, because search results and family
 * listings render the same card.
 *
 * Load order: tokens -> components -> this.
 */

/* =========================================================== the shell === */

body.hs-collection .product-count,
body.hs-collection #product-count-number_parent {
	font-family: var(--hs-font-body);
	font-size: var(--hs-text-base);
	color: var(--hs-muted);
	margin-bottom: var(--hs-space-5);
}

/* ==================================================== child collections === */
/*
 * The cards a parent term shows instead of - or above - its products. Same
 * visual language as the product card, one step quieter.
 */

body.hs-collection .hs-ccard {
	display: flex;
	align-items: center;
	gap: var(--hs-space-3);
	height: 100%;
	padding: var(--hs-space-4) var(--hs-space-5);
	background: var(--hs-surface);
	border: var(--hs-border);
	border-radius: var(--hs-radius-md);
	text-decoration: none;
	transition: border-color var(--hs-fast) var(--hs-ease),
	            box-shadow var(--hs-fast) var(--hs-ease),
	            transform var(--hs-fast) var(--hs-ease);
}

body.hs-collection .hs-ccard:hover,
body.hs-collection .hs-ccard:focus-visible {
	border-color: var(--hs-accent);
	box-shadow: var(--hs-shadow-sm);
	transform: translateY(-2px);
}

/* ======================================================= filter sidebar === */
/*
 * WHY THIS EXISTS
 *
 * The sidebar already carried `position: sticky` before this file, and it still
 * never stuck. Measured on /collection/marine-hose-fittings/: the sidebar is
 * 6,297px tall against a 1,000px viewport. A sticky element only pins once its
 * top edge reaches the offset, so an element far taller than the viewport
 * simply scrolls away like any other block - the declaration was decorative.
 *
 * Two things are therefore required, not one:
 *   1. constrain the height to the viewport and let it scroll internally;
 *   2. `align-self: flex-start` - Bootstrap rows are flex containers and the
 *      default `align-items: stretch` forces the column to full row height,
 *      which defeats sticky no matter what the height rule says.
 *
 * The offset clears .hsh-bar, the fixed 72px header bar from the hs-header
 * plugin, measured on both sites.
 *
 * The column also used to carry Bootstrap's .position-relative utility, which
 * is declared "position: relative !important" and silently beat any sticky
 * rule written here. It was removed from taxonomy-collection.php on both sites
 * rather than escalated to !important. If a sticky sidebar ever stops working,
 * check for that class coming back before changing anything below.
 */

@media (min-width: 992px) {
	/*
	 * THE actual blocker, found by walking the ancestor chain: main.site-main
	 * computes to `overflow: hidden auto`. Setting overflow-x: hidden forces the
	 * other axis to auto, and an ancestor with a scrollable axis becomes the
	 * sticky element's scroll container - so the sidebar was sticking relative
	 * to <main>, which never scrolls, instead of the viewport.
	 *
	 * overflow-x: clip gives the same visual result (nothing spills sideways)
	 * WITHOUT creating a scroll container, which is exactly what is wanted here.
	 * Scoped to collection pages so no other template changes behaviour.
	 */
	body.hs-collection main.site-main {
		overflow-x: clip;
		overflow-y: visible;
	}

	body.hs-collection .desktop-filter-col {
		position: sticky;
		top: calc(var(--hs-header-bar-h) + var(--hs-space-4));
		align-self: flex-start;
		max-height: calc(100vh - var(--hs-header-bar-h) - var(--hs-space-7));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--hs-line) transparent;
	}

	/* The inner wrapper must not also try to stick, or the two fight and the
	   inner one wins at the wrong offset. */
	body.hs-collection .desktop-filter-col .sidebar.sticky-sidebar {
		position: static;
		max-height: none;
		top: auto;
	}

	body.hs-collection .desktop-filter-col::-webkit-scrollbar {
		width: 8px;
	}

	body.hs-collection .desktop-filter-col::-webkit-scrollbar-thumb {
		background: var(--hs-line);
		border-radius: 999px;
	}

	body.hs-collection .desktop-filter-col::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* ============================================================== grid ===== */

body.hs-collection #content-list-inner {
	/* Cards are flex children of a Bootstrap row; without this a short card
	   does not fill its track and the row looks broken-toothed. */
	align-items: stretch;
}

body.hs-collection #content-list-inner > .row > [class*="col-"],
body.hs-collection #content-list-inner > [class*="col-"] {
	display: flex;
	margin-bottom: var(--hs-space-5);
}

/* ============================================================ reduced ==== */

@media (prefers-reduced-motion: reduce) {
	body.hs-collection .hs-ccard:hover,
	body.hs-collection .hs-ccard:focus-visible {
		transform: none;
	}
}