/**
 * YITH swatches for the shop color filters — Premier Polysteel (#443/#446).
 *
 * Rendered by facetwp-yith-swatches.php into the checkbox display value: a chip (hex color or
 * image) plus the color name. Presentation per Miranda (Jul 7, 2026): show ONLY the circular
 * swatches (no inline text, no counts); the color name appears as a tooltip on hover. Scoped to
 * #pp-shop-filters, and only to options that carry a .pp-yith-swatch (so the plain checkbox
 * facets — categories, length, etc. — are untouched).
 */

/* Color facets → compact grid of circular swatches. */
#pp-shop-filters .facetwp-facet:has( .pp-yith-swatch ) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	overflow: visible;
}

/* Strip FacetWP's checkbox chrome + counts from swatch options — just the circle. */
#pp-shop-filters .facetwp-checkbox:has( .pp-yith-swatch ) {
	margin: 0;
	padding-left: 0;
	background: none;
}

#pp-shop-filters .facetwp-checkbox:has( .pp-yith-swatch )::before,
#pp-shop-filters .facetwp-checkbox:has( .pp-yith-swatch )::after {
	display: none;
}

#pp-shop-filters .facetwp-checkbox:has( .pp-yith-swatch ) .facetwp-counter {
	display: none;
}

/* The swatch wrapper anchors the tooltip. */
#pp-shop-filters .pp-yith-swatch {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* The circle. */
#pp-shop-filters .pp-yith-swatch__chip {
	display: block;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

/* Selected state — ring around the circle. */
#pp-shop-filters .facetwp-checkbox.checked:has( .pp-yith-swatch ) .pp-yith-swatch__chip {
	outline: 2px solid #0e141b;
	outline-offset: 2px;
}

/* Color name → hover tooltip (reuse the label span; hidden at rest, still read by SRs). */
#pp-shop-filters .pp-yith-swatch__label {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	z-index: 20;
	padding: 5px 8px;
	border-radius: 4px;
	background: #0e141b;
	color: #fff;
	font-size: 12px;
	line-height: 1.1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

#pp-shop-filters .pp-yith-swatch:hover .pp-yith-swatch__label {
	opacity: 1;
}

/**
 * "Show more" (soft limit): FacetWP wraps the overflow options in a single
 * div.facetwp-overflow. As one flex item its children would stack vertically. display:contents
 * dissolves the wrapper so the hidden swatches rejoin the same horizontal grid; the See more/less
 * toggle drops to its own full-width line under the circles. (:not(.facetwp-hidden) keeps the
 * collapsed state hidden.)
 */
#pp-shop-filters .facetwp-facet:has( .pp-yith-swatch ) .facetwp-overflow:not( .facetwp-hidden ) {
	display: contents;
}

#pp-shop-filters .facetwp-facet:has( .pp-yith-swatch ) .facetwp-toggle {
	flex: 0 0 100%;
	margin-top: 4px;
}