/**
 * Sterling Peptide UK — Phase 4 catalogue and mobile filter layer.
 */

.sterling-shop-filter-shell {
	position: relative;
	width: min(calc(100% - 32px), var(--sp-container));
	margin: 20px auto 28px;
}

.sterling-filter-toggle,
.sterling-filter-backdrop,
.sterling-filter-close {
	display: none;
}

.sterling-shop-filters {
	border-block: 1px solid var(--sp-border);
	background: var(--sp-white);
}

.sterling-shop-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 0;
}

.sterling-shop-filters__header h2 {
	margin: 0;
	font-size: 1rem;
}

.sterling-shop-filter-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 0.72fr);
	gap: 12px;
	align-items: end;
	padding-block: 16px;
}

.sterling-filter-field {
	display: grid;
	gap: 6px;
}

.sterling-filter-field label,
.sterling-filter-check {
	color: var(--sp-ink);
	font-size: 0.78rem;
	font-weight: 750;
}

.sterling-filter-field select {
	width: 100%;
	min-height: 44px;
	padding: 8px 34px 8px 11px;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	background-color: var(--sp-white);
	color: var(--sp-ink);
	font: inherit;
}

.sterling-filter-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--sp-border);
}

.sterling-filter-check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--sp-teal);
}

.sterling-shop-filter-form__actions {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 16px;
}

.woocommerce .sterling-filter-apply.button,
.sterling-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--sp-teal);
	border-radius: var(--sp-radius);
	background: var(--sp-teal);
	color: var(--sp-white);
	font-weight: 800;
	text-decoration: none;
}

.sterling-shop-filter-form__actions > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sp-navy);
	font-weight: 750;
	text-underline-offset: 3px;
}

.sterling-catalogue-pagination {
	display: grid;
	justify-items: center;
	gap: 12px;
	width: min(calc(100% - 32px), var(--sp-container));
	margin: 30px auto 0;
}

.sterling-load-more.is-loading {
	cursor: progress;
	opacity: 0.7;
}

.sterling-load-more[hidden] {
	display: none;
}

.sterling-load-status {
	min-height: 1.5em;
	margin: 0;
	color: var(--sp-muted);
	font-size: 0.82rem;
	text-align: center;
}

.sterling-load-sentinel {
	width: 100%;
	height: 1px;
}

.sterling-infinite-js .sterling-native-pagination {
	display: none;
}

@media (max-width: 1024px) {
	.sterling-shop-filter-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sterling-shop-filter-shell {
		width: min(calc(100% - 20px), var(--sp-container));
		margin-block: 12px 18px;
	}

	.woocommerce ul.products[data-sterling-product-grid],
	.woocommerce-page ul.products[data-sterling-product-grid] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.woocommerce ul.products[data-sterling-product-grid] li.product,
	.woocommerce-page ul.products[data-sterling-product-grid] li.product {
		float: none;
		width: auto;
		min-width: 0;
		margin: 0;
	}

	.sterling-filter-js .sterling-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 48px;
		padding: 10px 14px;
		border: 1px solid var(--sp-border);
		border-radius: var(--sp-radius);
		background: var(--sp-white);
		color: var(--sp-navy);
		font: inherit;
		font-weight: 800;
		cursor: pointer;
	}

	.sterling-filter-js .sterling-filter-backdrop {
		display: block;
		position: fixed;
		z-index: calc(var(--sp-z-drawer) - 1);
		inset: 0;
		border: 0;
		background: rgb(15 23 42 / 58%);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--sp-transition), visibility var(--sp-transition);
	}

	.sterling-filter-js .sterling-shop-filters {
		position: fixed;
		z-index: var(--sp-z-drawer);
		top: 0;
		bottom: 0;
		left: 0;
		width: min(92vw, 390px);
		padding: 0 18px max(18px, env(safe-area-inset-bottom));
		border: 0;
		box-shadow: 18px 0 50px rgb(15 23 42 / 18%);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform var(--sp-transition), visibility var(--sp-transition);
	}

	.sp-mobile-drawer-right .sterling-shop-filters {
		right: 0;
		left: auto;
		box-shadow: -18px 0 50px rgb(15 23 42 / 18%);
		transform: translateX(102%);
	}

	.sterling-filter-js .sterling-shop-filter-shell.is-open .sterling-filter-backdrop {
		opacity: 1;
		visibility: visible;
	}

	.sterling-filter-js .sterling-shop-filter-shell.is-open .sterling-shop-filters,
	.sp-mobile-drawer-right .sterling-shop-filter-shell.is-open .sterling-shop-filters {
		transform: translateX(0);
		visibility: visible;
	}

	.sterling-filter-js .sterling-filter-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--sp-border);
		border-radius: var(--sp-radius);
		background: var(--sp-white);
		color: var(--sp-navy);
		font: inherit;
		font-size: 1.5rem;
		cursor: pointer;
	}

	.sterling-shop-filters__header {
		position: sticky;
		top: 0;
		z-index: 1;
		padding-block: 14px;
		border-bottom: 1px solid var(--sp-border);
		background: var(--sp-white);
	}

	.sterling-shop-filter-form {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 18px;
	}

	.sterling-shop-filter-form__actions {
		position: sticky;
		bottom: 0;
		display: grid;
		grid-column: auto;
		grid-template-columns: 1fr;
		padding-block: 12px;
		background: var(--sp-white);
	}

	.sterling-shop-filter-form__actions > a {
		justify-content: center;
	}

	.sterling-catalogue-pagination {
		width: min(calc(100% - 20px), var(--sp-container));
		margin-top: 22px;
	}

	.sterling-load-more {
		width: 100%;
	}

	body.sterling-filter-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sterling-filter-backdrop,
	.sterling-shop-filters {
		transition: none !important;
	}
}