/*
 * Catalogue: the filter rail, the toolbar above the grid, and the empty state.
 *
 * Enqueued on the shop, on product category archives and on search results. The
 * product card itself lives in style.css, because the home page draws it too.
 */
.gsl-cat__cols {
	margin-top: var(--wp--preset--spacing--50);
}

.gsl-aside {
	flex-grow: 0;
}

.gsl-toolbar {
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
	border-block: 1px solid var(--wp--preset--color--border);
}

.gsl-toolbar__count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.gsl-toolbar__right {
	gap: var(--wp--preset--spacing--40);
	margin-left: auto;
}

/* Native select, styled to match `.gsl-range__input` and the other form
   controls in the toolbar instead of the browser's own chrome. */
.gsl-toolbar__sort select {
	appearance: none;
	height: 38px;
	padding-inline: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	background:
		var(--wp--preset--color--base)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
		no-repeat right var(--wp--preset--spacing--30) center;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.gsl-toolbar__sort select:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
}

@media (hover: none) {
	.gsl-toolbar__sort select {
		height: 44px;
	}
}

/* ------------------------------------------------------------- filters ----- */

/* No box around the rail: the approved layout separates facets from each other
   with a hairline and from the grid with whitespace only (prototype `.filters`).
   A border here read as a second, competing panel next to the product grid. */
.gsl-filters {
	position: sticky;
	top: var(--wp--preset--spacing--40);
}

.gsl-facet {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--hairline);

	/* WooCommerce's checkbox list draws itself from these four custom properties
	   and defaults every one of them to `transparent` or `currentColor`, which is
	   why an unconfigured facet shows a grey smudge where the box should be. */
	--wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--base);
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--border-strong);
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--base);
	--wc-product-filter-checkbox-list-label-element: var(--wp--preset--color--contrast);
}

.gsl-facet:first-of-type {
	border-top: 0;
}

/* A facet that renders nothing must not leave its separator behind: a stack of
   bare hairlines above the first real filter is how the empty facets announced
   themselves before they had inner blocks. */
.gsl-facet:empty {
	display: none;
}

/* Nothing inside the rail may set its own width: the price slider and the
   checkbox list both come from WooCommerce and know nothing about a 262 px
   column. */
.gsl-filters * {
	max-width: 100%;
}

.gsl-facet h3,
.gsl-facet .wp-block-heading {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* --------------------------------------------- WooCommerce's own controls ---- */

/* WooCommerce 10.9.4 ships the checkbox list's styles under the root class
   `wc-block-product-filter-checkbox-list` and renders the root element with
   `wp-block-woocommerce-product-filter-checkbox-list`. Every rule keyed on a
   `__element` class still lands; the one rule scoped by that root — the fieldset
   reset — never matches, so each facet came out wrapped in the browser's default
   fieldset border. That is the boxed, unstyled look the rail had.
   Checked against the shipped product-filter-checkbox-list-style.css; when a
   WooCommerce upgrade fixes the selector this rule becomes a harmless repeat. */
.gsl-facet .wp-block-woocommerce-product-filter-checkbox-list fieldset {
	display: contents;
}

.gsl-facet .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
}

.gsl-facet .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	padding-block: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
}

.gsl-facet .wc-block-product-filter-checkbox-list__label:hover {
	color: var(--wp--preset--color--brand-text);
}

/* The grey square that showed instead of a checkbox: a `currentColor` overlay
   WooCommerce paints under the input while its own colours are unset. */
.gsl-facet .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

/* `input[type=checkbox].wc-…__input` is how WooCommerce writes its own rule, and
   an element in the selector outranks a class: without matching that shape the
   box stays at its 1em default and the tick lands off-centre. */
.gsl-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input,
.gsl-facet .wc-block-product-filter-checkbox-list__mark {
	width: 17px;
	height: 17px;
}

.gsl-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border-width: 1.5px;
	border-radius: 4px;
}

.gsl-facet .wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--brand-action);
	border-color: var(--wp--preset--color--brand-action);
}

.gsl-facet .wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.gsl-facet .wc-block-product-filter-checkbox-list__text-wrapper {
	flex: 1;
	min-width: 0;
	font-size: inherit;
}

.gsl-facet .wc-block-product-filter-checkbox-list__count {
	margin-left: auto;
	padding-left: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* «Показати ще N» is a link, not a button: it reveals rows in place and never
   leaves the page. WooCommerce underlines it by default and drops the underline
   on hover, which is backwards for something that reads as a link. */
.gsl-facet .wc-block-product-filter-checkbox-list__show-more {
	margin-top: var(--wp--preset--spacing--20);
}

.gsl-facet .wc-block-product-filter-checkbox-list__show-more-button {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-action);
	text-decoration: none;
}

.gsl-facet .wc-block-product-filter-checkbox-list__show-more-button:hover,
.gsl-facet .wc-block-product-filter-checkbox-list__show-more-button:focus {
	text-decoration: underline;
}

/* The price slider laid itself out as `auto 1fr auto`, and the two text inputs
   size from their `size` attribute — about twenty characters each. In a 262 px
   rail that pushed the track and the upper bound out over the product grid,
   which is the «цена уехала за пределы блока» defect. Two equal columns that may
   shrink to nothing removes the intrinsic floor for good. */
.gsl-facet .wc-block-product-filter-price-slider__content {
	grid-template-areas:
		"price-slider price-slider"
		"left-input   right-input";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	--wc-product-filter-price-slider: var(--wp--preset--color--brand);
	--wc-product-filter-price-slider-handle: var(--wp--preset--color--base);
	--wc-product-filter-price-slider-handle-border: var(--wp--preset--color--brand-action);
}

.gsl-facet .wc-block-product-filter-price-slider__left,
.gsl-facet .wc-block-product-filter-price-slider__right {
	min-width: 0;
}

.gsl-facet .wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 38px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--base);
}

.gsl-facet .wc-block-product-filter-price-slider .text input[type="text"]:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
}

.gsl-facet .wc-block-product-filter-price-slider__right input[type="text"] {
	text-align: right;
}

/* Chips and «Скинути» sit above the first facet and belong to the whole rail. */
.gsl-facet .wc-block-product-filter-removable-chips__item {
	font-size: var(--wp--preset--font-size--small);
}

.gsl-empty {
	padding: var(--wp--preset--spacing--70) 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------- narrower ---- */

/* The rail stops being sticky before it stops being a rail: below 1080 px it is
   still a column, just not one worth pinning. */
@media (max-width: 1080px) {
	.gsl-filters {
		position: static;
	}
}