/**
 * Heat Archive Toolbar
 *
 * Every value is a custom property on :root, so the theme can override any of them
 * (e.g. :root { --hc-navy: #000; }). Manrope is expected to be loaded by the theme.
 */

:root {
	--hc-navy: #0F016D;
	--hc-accent: #FA2C05;
	--hc-muted: #4A4190;
	--hc-soft: #8B85B8;
	--hc-border: #E4E2F1;
	--hc-on-navy: #FFFFFF;
	--hc-surface: #FFFFFF;
	--hc-font: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Toolbar */
	--hc-toolbar-gap: 16px;
	--hc-toolbar-end-gap: 20px;
	--hc-toolbar-pad-bottom: 18px;
	--hc-field-gap: 10px;

	/* Segmented control */
	--hc-seg-border: 2px;
	--hc-seg-pad: 3px;
	--hc-seg-height: 32px;
	--hc-seg-pad-x: 10px;
	--hc-bar-w: 4px;
	--hc-bar-h: 14px;
	--hc-bar-gap: 2px;

	/* Select */
	--hc-select-height: 42px;
	--hc-select-pad-x: 16px;
	--hc-select-arrow-space: 40px;

	/* Grid (set per choice by JS; 5+ columns use the tighter values below) */
	--hc-cols: 4;
	--hc-gap: 24px;
	--hc-min: 200px;
}

:root[data-hc-cols="5"],
:root[data-hc-cols="6"] {
	--hc-gap: 16px;
	--hc-min: 170px;
}

/* ---------- Toolbar layout ---------- */

.hc-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--hc-toolbar-gap);
	flex-wrap: wrap;
	font-family: var(--hc-font);
}

.hc-toolbar__end {
	display: flex;
	align-items: center;
	gap: var(--hc-toolbar-end-gap);
	flex-wrap: wrap;
}

.hc-view,
.hc-pp {
	display: inline-flex;
	align-items: center;
	gap: var(--hc-field-gap);
}

.hc-label {
	margin: 0;
	font-family: var(--hc-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hc-muted);
	white-space: nowrap;
}

/* ---------- Result count ---------- */

.hc-count {
	margin: 0;
	font-family: var(--hc-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--hc-muted);
}

/* Total not known yet (custom-query Loop Grid below): keep the space, hide the number. */
.hc-count--pending {
	visibility: hidden;
}

.hc-count .hc-count__num {
	font-weight: 800;
	color: var(--hc-navy);
}

/* ---------- View switcher ---------- */

.hc-seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: var(--hc-seg-pad);
	border: var(--hc-seg-border) solid var(--hc-border);
	border-radius: 999px;
	background: transparent;
}

/* Doubled class to beat theme button styles (Hello Elementor, Astra, etc.). */
.hc-seg .hc-seg__opt {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--hc-seg-height);
	min-height: 0;
	margin: 0;
	padding: 0 var(--hc-seg-pad-x);
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--hc-soft);
	font-size: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hc-seg .hc-seg__opt:hover,
.hc-seg .hc-seg__opt:focus {
	background: transparent;
	color: var(--hc-navy);
}

.hc-seg .hc-seg__opt[aria-checked="true"],
.hc-seg .hc-seg__opt[aria-checked="true"]:hover,
.hc-seg .hc-seg__opt[aria-checked="true"]:focus {
	background: var(--hc-navy);
	color: var(--hc-on-navy);
}

.hc-seg .hc-seg__opt:focus-visible {
	outline: 2px solid var(--hc-accent);
	outline-offset: 2px;
}

.hc-bars {
	display: inline-flex;
	gap: var(--hc-bar-gap);
}

.hc-bar {
	display: block;
	width: var(--hc-bar-w);
	height: var(--hc-bar-h);
	border-radius: 1px;
	background: currentColor;
}

/* ---------- Pill select (per page) ---------- */

.hc-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.hc-select > select {
	-webkit-appearance: none;
	appearance: none;
	height: var(--hc-select-height);
	min-height: 0;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0 var(--hc-select-arrow-space) 0 var(--hc-select-pad-x);
	border: 2px solid var(--hc-navy);
	border-radius: 999px;
	background: var(--hc-surface);
	box-shadow: none;
	color: var(--hc-navy);
	font-family: var(--hc-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.hc-select > select:focus-visible {
	outline: 2px solid var(--hc-accent);
	outline-offset: 2px;
}

/* Chevron, drawn with borders so it follows --hc-navy. */
.hc-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--hc-select-pad-x) + 1px);
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--hc-navy);
	border-bottom: 2px solid var(--hc-navy);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* ---------- Hide WooCommerce's default count (replaced by .hc-count) ---------- */
/* Backup for when the shortcode renders after the loop hooks have already run. */

body:has(.hc-count) .woocommerce-result-count {
	display: none;
}

/* ---------- Product grid ---------- */
/* .hc-grid is added to the target before first paint: ul.products or an
   Elementor Pro product Loop Grid (.elementor-loop-container). The !important
   rules override Elementor's .elementor-grid-N column classes. */

.hc-grid {
	display: grid !important;
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--hc-min), calc((100% - (var(--hc-cols) - 1) * var(--hc-gap)) / var(--hc-cols)))),
			1fr
		)
	) !important;
	gap: var(--hc-gap) !important;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce clearfix pseudo-elements would otherwise become grid items. */
.hc-grid::before,
.hc-grid::after {
	content: none !important;
	display: none !important;
}

.hc-grid > * {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.hc-seg .hc-seg__opt {
		transition: none;
	}
}