/**
 * Free Style 3 — Shop archive
 * Filter sidebar, results toolbar, active-filter chips, archive grid columns
 * and pagination for the Shop page, product search and product taxonomy
 * archives. Markup: inc/woo/shop-filters.php. Loaded only on those archives
 * ('shop-archive' condition), after woocommerce.css.
 */

/* ---- Layout ---- */
.fsp-shop-layout {
	margin-block-start: var(--fsp-space-4);
}

.fsp-shop-main {
	min-width: 0;
}

/* desktop ≥64rem: sidebar column beside the results */
@media (min-width: 64rem) {
	.fsp-shop-layout {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--fsp-space-8);
		align-items: start;
	}
}

/* ---- Sidebar ---- */

/* Elements shop-filters.js reveals; component display rules must not unhide them. */
.fsp-shop-sidebar [hidden] {
	display: none;
}

.fsp-shop-sidebar__body {
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	padding: var(--fsp-space-4);
}

.fsp-shop-sidebar__toggle {
	display: flex;
	align-items: center;
	gap: var(--fsp-space-2);
	width: 100%;
	padding: var(--fsp-space-3) var(--fsp-space-4);
	background: var(--fsp-surface);
	color: var(--fsp-heading);
	font-weight: 700;
	text-align: start;
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	box-shadow: var(--fsp-shadow-sm);
}

.fsp-shop-sidebar__toggle:hover {
	border-color: var(--fsp-blue-300);
}

.fsp-shop-sidebar__toggle .fsp-shop-icon--chevron {
	margin-inline-start: auto;
	transition: transform var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-sidebar.is-open .fsp-shop-sidebar__toggle .fsp-shop-icon--chevron {
	transform: rotate(180deg);
}

.fsp-shop-sidebar__badge {
	padding: 0 var(--fsp-space-2);
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-700);
	font-size: var(--fsp-text-xs);
	font-weight: 700;
	line-height: 1.6;
	border-radius: var(--fsp-radius-pill);
}

/* Below 64rem the body folds behind the toggle (only once JS has added the toggle). */
@media (max-width: 63.99rem) {
	.fsp-shop-sidebar {
		margin-block-end: var(--fsp-space-4);
	}

	.fsp-shop-sidebar--collapsible .fsp-shop-sidebar__body {
		margin-block-start: var(--fsp-space-2);
	}

	.fsp-shop-sidebar--collapsible:not(.is-open) .fsp-shop-sidebar__body {
		display: none;
	}
}

@media (min-width: 64rem) {
	.fsp-shop-sidebar__toggle {
		display: none;
	}
}

.fsp-shop-icon {
	flex: none;
}

/* ---- Search ---- */
.fsp-shop-search {
	position: relative;
}

.fsp-shop-search .fsp-shop-search__input {
	padding-inline-end: var(--fsp-space-12);
	background: var(--fsp-surface);
	border-radius: var(--fsp-radius-md);
}

.fsp-shop-search__submit {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fsp-space-12);
	padding: 0;
	background: transparent;
	color: var(--fsp-text-soft);
	border: 0;
	border-radius: 0 var(--fsp-radius-md) var(--fsp-radius-md) 0;
}

.fsp-shop-search__submit:hover {
	color: var(--fsp-primary-hover);
}

.fsp-shop-search__submit .fsp-shop-icon {
	width: 18px;
	height: 18px;
}

/* ---- Panels (categories, facets) ---- */
.fsp-shop-panel {
	margin-block-start: var(--fsp-space-4);
	padding-block-start: var(--fsp-space-4);
	border-block-start: 1px solid var(--fsp-border);
}

.fsp-shop-panel__title {
	display: flex;
	align-items: center;
	gap: var(--fsp-space-2);
	list-style: none;
	cursor: pointer;
	color: var(--fsp-heading);
	font-size: var(--fsp-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fsp-shop-panel__title::-webkit-details-marker {
	display: none;
}

.fsp-shop-panel__title .fsp-shop-icon--chevron {
	margin-inline-start: auto;
	color: var(--fsp-text-soft);
	transition: transform var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-panel:not([open]) .fsp-shop-panel__title .fsp-shop-icon--chevron {
	transform: rotate(-90deg);
}

/* White on blue-700 is 7.8:1; on brand blue it would fail AA (2.6:1). */
.fsp-shop-panel__badge {
	min-width: 1.25rem;
	padding: 0 var(--fsp-space-1);
	background: var(--fsp-blue-700);
	color: var(--fsp-on-primary);
	font-size: var(--fsp-text-xs);
	line-height: 1.25rem;
	letter-spacing: 0;
	text-align: center;
	border-radius: var(--fsp-radius-pill);
}

/* ---- Category tree ---- */
.fsp-shop-cats,
.fsp-shop-cats__children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fsp-shop-cats {
	margin-block-start: var(--fsp-space-3);
}

.fsp-shop-cats__children {
	margin-inline-start: var(--fsp-space-3);
	padding-inline-start: var(--fsp-space-2);
	border-inline-start: 1px solid var(--fsp-border);
}

.fsp-shop-cats__row {
	display: flex;
	align-items: center;
	gap: var(--fsp-space-1);
}

.fsp-shop-cats__link {
	flex: 1;
	min-width: 0;
	padding: var(--fsp-space-2) var(--fsp-space-3);
	color: var(--fsp-text);
	font-size: var(--fsp-text-sm);
	line-height: 1.35;
	text-decoration: none;
	border-radius: var(--fsp-radius-sm);
	transition: background-color var(--fsp-dur-fast) var(--fsp-ease),
		color var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-cats__link:hover {
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-700);
	text-decoration: none;
}

.fsp-shop-cats__link.is-current {
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-900);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--fsp-primary);
}

.fsp-shop-cats__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	color: var(--fsp-text-soft);
	border: 0;
	border-radius: var(--fsp-radius-sm);
}

.fsp-shop-cats__toggle:hover {
	background: var(--fsp-ink-075);
	color: var(--fsp-heading);
}

.fsp-shop-cats__toggle .fsp-shop-icon {
	transform: rotate(-90deg);
	transition: transform var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-cats__toggle[aria-expanded="true"] .fsp-shop-icon {
	transform: none;
}

/* ---- Facets (brand, color) ---- */
.fsp-shop-facet .fsp-shop-facet__find {
	margin-block-start: var(--fsp-space-3);
	padding: var(--fsp-space-2) var(--fsp-space-3);
	font-size: var(--fsp-text-sm);
	background: var(--fsp-surface);
}

.fsp-shop-facet__list {
	list-style: none;
	max-height: 16rem;
	margin: var(--fsp-space-2) 0 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.fsp-shop-facet__option {
	display: flex;
	align-items: center;
	gap: var(--fsp-space-2);
	padding: var(--fsp-space-2) var(--fsp-space-3);
	color: var(--fsp-text);
	font-size: var(--fsp-text-sm);
	line-height: 1.35;
	text-decoration: none;
	border-radius: var(--fsp-radius-sm);
	transition: background-color var(--fsp-dur-fast) var(--fsp-ease),
		color var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-facet__option:hover {
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-700);
	text-decoration: none;
}

.fsp-shop-facet__option.is-active {
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-900);
	font-weight: 700;
}

.fsp-shop-facet__option.is-active .fsp-shop-icon {
	margin-inline-start: auto;
	width: 14px;
	height: 14px;
}

.fsp-shop-facet__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fsp-shop-facet__empty {
	margin: var(--fsp-space-2) 0 0;
	padding-inline: var(--fsp-space-3);
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-sm);
}

/* Color dot; the HEX comes from the term's Color Swatches setting. */
.fsp-shop-swatch {
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--fsp-swatch-color, var(--fsp-surface));
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-pill);
	box-shadow: inset 0 0 0 1px var(--fsp-surface);
}

.fsp-shop-swatch--none {
	border-style: dashed;
	border-color: var(--fsp-ink-300);
	box-shadow: none;
}

/* ---- Results toolbar ---- */
.fsp-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fsp-space-3);
	padding-block-end: var(--fsp-space-3);
	border-block-end: 1px solid var(--fsp-border);
}

.fsp-shop-toolbar__count {
	margin: 0;
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-sm);
	font-weight: 600;
}

.fsp-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.fsp-shop-toolbar .woocommerce-ordering select {
	min-width: 14rem;
	padding: var(--fsp-space-2) var(--fsp-space-3);
	font-size: var(--fsp-text-sm);
	background-color: var(--fsp-surface);
	border-radius: var(--fsp-radius-md);
}

/* ---- Active-filter chips ---- */
.fsp-shop-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fsp-space-2) var(--fsp-space-3);
	margin-block-start: var(--fsp-space-3);
}

.fsp-shop-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsp-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fsp-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--fsp-space-1);
	padding: var(--fsp-space-1) var(--fsp-space-3);
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-900);
	font-size: var(--fsp-text-sm);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid var(--fsp-blue-100);
	border-radius: var(--fsp-radius-pill);
	transition: background-color var(--fsp-dur-fast) var(--fsp-ease),
		border-color var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-shop-chip:hover {
	background: var(--fsp-blue-100);
	border-color: var(--fsp-blue-300);
	color: var(--fsp-blue-900);
	text-decoration: none;
}

.fsp-shop-chip__label {
	color: var(--fsp-blue-700);
	font-weight: 600;
}

.fsp-shop-chip .fsp-shop-icon {
	width: 14px;
	height: 14px;
	margin-inline-start: var(--fsp-space-1);
}

.fsp-shop-chips__clear {
	color: var(--fsp-link);
	font-size: var(--fsp-text-sm);
	font-weight: 600;
}

.fsp-shop-empty {
	margin-block: var(--fsp-space-4) 0;
}

/* ---- Product grid in the results column ---- */

/* The sidebar takes a column, so the grid steps up one breakpoint later than woocommerce.css. */
.woocommerce .fsp-shop-main ul.products {
	gap: var(--fsp-space-4);
	margin-block: var(--fsp-space-6) 0;
}

@media (min-width: 48rem) {
	.woocommerce .fsp-shop-main ul.products {
		gap: var(--fsp-space-6);
	}
}

@media (min-width: 64rem) {
	.woocommerce .fsp-shop-main ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 80rem) {
	.woocommerce .fsp-shop-main ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- Pagination (replaces Woo's bordered strip) ---- */
.woocommerce nav.woocommerce-pagination {
	margin-block: var(--fsp-space-8) 0;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-2);
	margin: 0;
	white-space: normal;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	display: block;
	float: none;
	overflow: visible;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 var(--fsp-space-3);
	background: var(--fsp-surface);
	color: var(--fsp-text);
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	transition: background-color var(--fsp-dur-fast) var(--fsp-ease),
		border-color var(--fsp-dur-fast) var(--fsp-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	background: var(--fsp-blue-50);
	color: var(--fsp-blue-700);
	border-color: var(--fsp-blue-300);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--fsp-blue-700);
	color: var(--fsp-on-primary);
	border-color: var(--fsp-blue-700);
}

.woocommerce nav.woocommerce-pagination ul li span.dots {
	background: transparent;
	border-color: transparent;
}