/*
 * Facet heading: the name, a badge with how many values are on, the names of
 * those values (shown when the group is folded), and «Скинути» for this facet
 * alone. Ships with the block, as the contract asks: the plugin prints these
 * classes, so the plugin styles them. Tokens only — docs/design/tokens.md.
 *
 * The heading's own typography and the fold chevron stay with the theme,
 * which owns the rail's rhythm.
 */

.wp-block-gsl-facet-title.gsl-facet__title {
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--20);
}

/* The theme draws the fold chevron as ::after; it stays at the right edge
   whatever else the heading holds. */
.wp-block-gsl-facet-title.gsl-facet__title::after {
	margin-inline-start: auto;
}

.gsl-facet__name {
	flex: 0 0 auto;
}

/* The badge: a small disc in the brand wash, readable on the white card. */
.gsl-facet__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	flex: 0 0 auto;
}

.gsl-facet__n[hidden] {
	display: none;
}

/* What is picked, said in words. Hidden while the group is open — the ticks
   say it there — and shown once it folds, so a closed «Матеріал · Скло,
   Пластик» still reads. The swatch grid keeps it visible: it is the one line
   that lists the picked colours together. */
.gsl-facet__sum {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
	display: none;
}

.gsl-facet.is-closed .gsl-facet__sum,
.gsl-facet__title--swatches .gsl-facet__sum {
	display: block;
}

/* Over a swatch grid the names drop to a line of their own under the
   heading, in full — a 208 px rail cannot hold «Колір · 1 · Синій, Чорний ·
   Скинути» and the chevron on one line, and a cut «Ч…» says nothing. */
.wp-block-gsl-facet-title.gsl-facet__title--swatches {
	flex-wrap: wrap;
}

.gsl-facet__title--swatches .gsl-facet__sum {
	order: 10;
	flex-basis: 100%;
	margin-block-start: 2px;
}

.wp-block-gsl-facet-title.gsl-facet__title--swatches::after {
	order: 5;
}

.gsl-facet__sum:empty {
	display: none;
}

/* Per-facet reset: quiet, underlined, at the right edge before the chevron. */
.gsl-facet__reset {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gsl-facet__reset:hover {
	color: var(--wp--preset--color--contrast);
}

.gsl-facet__reset[hidden] {
	display: none;
}

/* --------------------------------------------------------------- tail ----
 * The values the other applied filters have emptied left the list; they
 * wait here, folded, under it. The heading prints the tail, the list is
 * WooCommerce's and sits between — so the facet lays itself out as a
 * column and the tail takes the last place by order. */
.gsl-facet:has(> .gsl-facet__tail) {
	display: flex;
	flex-direction: column;
}

.gsl-facet__tail {
	order: 10;
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-facet__tail-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.gsl-facet__tail-toggle::-webkit-details-marker {
	display: none;
}

.gsl-facet__tail-toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.14s;
}

.gsl-facet__tail[open] .gsl-facet__tail-toggle::after {
	transform: translateY(2px) rotate(-135deg);
}

.gsl-facet__tail-list {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--10);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.gsl-facet__tail-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	line-height: 1.3;
}

.gsl-facet__tail-name {
	color: var(--wp--preset--color--muted);
}

.gsl-facet__tail-why {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
}

.gsl-facet__tail-undo {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* In the phone sheet a value the pending ticks have emptied greys in place
   and stops answering taps; nothing moves under the thumb. */
.gsl-facet .wc-block-product-filter-checkbox-list__item.is-zero {
	opacity: 0.4;
	pointer-events: none;
}

@media (hover: none) {
	.gsl-facet__tail-toggle {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------- search ----
 * A long list gets a search field under its heading. Typing hides the rows
 * that do not match and brings out the ones the list keeps behind «Ще N»
 * when they do; the button itself retires while a query stands. */
.gsl-facet__search {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.gsl-facet__search-input {
	display: block;
	width: 100%;
	min-height: 32px;
	padding: 0 10px 0 30px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.5' stroke='%236B6B6B' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 9px center;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	-webkit-appearance: none;
	appearance: none;
}

.gsl-facet__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.gsl-facet__search-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-action);
	background-color: var(--wp--preset--color--base);
}

.gsl-facet.is-searching .wc-block-product-filter-checkbox-list__item.is-miss {
	display: none;
}

.gsl-facet.is-searching .wc-block-product-filter-checkbox-list__item[hidden]:not(.is-miss) {
	display: block;
}

.gsl-facet.is-searching .wc-block-product-filter-checkbox-list__show-more-button {
	display: none;
}

@media (hover: none) {
	.gsl-facet__search-input {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------ swatches ----
 *
 * The colour list that follows a swatch heading becomes a grid of round
 * swatches, each with its name underneath. Every selector below addresses
 * WooCommerce's own checkbox-list markup, unchanged: the label's `for`
 * carries the slug, the input is the swatch itself (appearance: none,
 * background from the map the heading printed), the SVG tick WooCommerce
 * draws for a checked box becomes the tick on the swatch, and the text span
 * is the caption. Four across in the rail, five in the phone sheet: what a
 * name like «Помаранчевий» needs to stay readable at caption size. All 23
 * values show at once — the grid overrides the list's «show more»
 * truncation.
 *
 * The names are there for the phone above all (the owner, 17.09, after the
 * market check): on a touch screen there is no tooltip, and «золотистий»,
 * «сріблястий», «бронзовий» and «античне золото» as gradients alone are four
 * guesses. Ukrainian shops that draw swatches at all (Kasta) always print the
 * name beside them.
 *
 * Every rule carries the `.gsl-facet` ancestor and the `input[type=checkbox]`
 * spelling on purpose: the theme's own checkbox rules sit at that
 * specificity and load later, so the grid has to outrank them, not match.
 */

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--10) 0;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item,
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item[hidden] {
	display: block;
	position: relative;
	margin: 0;
	min-width: 0;
	min-height: 0;
	line-height: 0;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 0;
	min-height: 0;
	cursor: pointer;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input-wrapper {
	display: block;
	position: relative;
	width: 28px;
	height: 28px;
	margin: 0;
	flex: 0 0 auto;
}

/* WooCommerce draws its own box as ::before on the wrapper; the swatch is
   the input itself, so that box goes. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input-wrapper::before,
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input-wrapper::after {
	display: none;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sw-fill, var(--wp--preset--color--border));
	border: 1px solid var(--sw-edge, var(--wp--preset--color--border));
	box-shadow: none;
	cursor: pointer;
	transition: box-shadow 0.12s;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:hover {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 3px var(--wp--preset--color--brand-light);
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--sw-fill, var(--wp--preset--color--border));
	border-color: var(--sw-edge, var(--wp--preset--color--border));
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--brand-action);
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* A value at zero for this combination stays, faded, like a greyed row. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:disabled {
	opacity: 0.35;
	cursor: default;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__mark {
	position: absolute;
	inset: 0;
	width: 12px;
	height: 12px;
	margin: auto;
	padding: 0;
	color: var(--sw-mark, var(--wp--preset--color--base));
	opacity: 0;
	pointer-events: none;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
	opacity: 1;
}

/* The caption: the name under the swatch, centred, wrapping by syllable
   where the language allows and anywhere else rather than overflowing. The
   count stays in the accessible text but not on the grid — the space is the
   name's. A picked name reads darker. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text-wrapper {
	display: block;
	width: 100%;
	min-width: 0;
	text-align: center;
	/* A tenth under the label size: «Помаранчевий» in a 49 px cell. Words
	   break at syllables where the browser has the dictionary (Chrome,
	   Safari and Firefox ship Ukrainian and Russian ones) and otherwise run
	   a few pixels past the cell, centred — never mid-letter. */
	font-size: calc(var(--wp--preset--font-size--label) * 0.9);
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--wp--preset--color--muted);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
	white-space: normal;
}

/* WooCommerce lets the text break inside a word; a caption must not. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text {
	display: block;
	padding: 0;
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__count {
	display: none;
}

/* «+2» after a family's name — how many shades wait behind it (the heading
   prints the number per family); «↳» before a shade's name says whose it is. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text::after {
	color: var(--wp--preset--color--brand-action);
	font-weight: 600;
	white-space: nowrap;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text::before {
	color: var(--wp--preset--color--brand-action);
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__text-wrapper {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Two rows by default, the rest behind «Ще N кольорів» (owner, 17.09: a
   grid of 23 named swatches took the whole screen and pushed every other
   facet below it). The list is sorted by popularity, so the first two rows
   are the colours most people want; a picked colour is never hidden — it
   moves to the front of the grid. WooCommerce's own «show more» button is
   the control: while it is visible the grid is folded; its click marks the
   list expanded and hides the button, and the grid opens up. Values beyond
   WooCommerce's own limit of 15 are shown too once expanded. */
/* The script marks the families past the fold; a picked colour behind the
   fold unfolds the grid instead of moving (Nike and Kasta leave a chosen
   swatch in place — a grid that rearranges itself loses the eye's memory of
   it), and with nothing to fold the button retires. */
.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item.is-fold-hidden {
	display: none;
}

.gsl-facet.is-nofold .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more-button {
	display: none;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more {
	padding-block: var(--wp--preset--spacing--10) 0;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more-button::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more-button[hidden] {
	display: none;
}

/* The phone sheet is wider and touched, not hovered: five across, 36 px each. */
@media (max-width: 640px) {
	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__items {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	}

	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input-wrapper,
	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
		width: 36px;
		height: 36px;
	}

	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__mark {
		width: 14px;
		height: 14px;
	}

	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text-wrapper {
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: 0;
	}

	.gsl-facet .gsl-facet__title--swatches ~ .wp-block-woocommerce-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__show-more-button {
		min-height: 40px;
	}
}