/*
 * Filter section v7 — split vertical sidebar (icon rail + facet pane)
 * Page layout: .plp-shell--fv7 grid — aside (this block) | .plp-shell__main
 */

:root {
	--fv7-z-backdrop: 50000;
	--fv7-z-sheet: 50001;
	--fv7-plp-section-pad: 60px;
	--fv7-sidebar-w: 320px;
	--fv7-rail-w: 68px;
}

.fv7-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.plp-shell--fv7 {
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 32px);
	margin-bottom: 2%;
}

@media (min-width: 992px) {
	.plp-shell--fv7 {
		display: grid;
		grid-template-columns: minmax(0, var(--fv7-sidebar-w)) minmax(0, 1fr);
		gap: clamp(20px, 3vw, 40px);
		align-items: start;
		position: relative;
		z-index: 0;
	}

	.plp-shell--fv7 .plp-shell__aside {
		position: sticky;
		top: calc(88px + env(safe-area-inset-top, 0px));
		align-self: start;
		max-height: calc(100vh - 88px - env(safe-area-inset-top, 0px) - 32px);
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.plp-shell--fv7 .plp-shell__main {
		min-width: 0;
		display: flow-root;
	}
}

.plp-shell--fv7 .plp-shell__main > section.products {
	padding-bottom: var(--fv7-plp-section-pad) !important;
}

body:has(.plp-shell--fv7) footer {
	position: relative;
	z-index: 5;
}

.fv7-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--fv7-z-backdrop);
	background: var(--sc-filter-section-v7-fv7-backdrop-bg, rgba(8, 10, 14, 0.52));
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fv7-backdrop.is-visible {
	display: block;
	opacity: 1;
}

body.fv2-plp-open {
	overflow: hidden;
	touch-action: none;
}

/* Mobile trigger */
.fv7-mob-bar {
	margin-bottom: 12px;
}

@media (min-width: 992px) {
	.fv7-mob-bar {
		display: none !important;
		margin: 0;
		height: 0;
		overflow: hidden;
	}
}

.fv7-root .mobile-filter-toggle.fv7-mob {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid var(--sc-filter-section-v7-fv7-mob-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--primary-button-background-color, #1a1a1a) 92%, #333),
		var(--primary-button-background-color, #1a1a1a)
	);
	color: var(--sc-filter-section-v7-fv7-mob-text, var(--primary-button-text-color, #fff));
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-title-color, #000) 16%, transparent);
}

.fv7-mob-sheet-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	padding-top: max(12px, env(safe-area-inset-top, 0px));
	border-bottom: 1px solid var(--sc-filter-section-v7-fv7-mob-sheet-header-border-bottom, color-mix(in srgb, var(--primary-title-color, #000) 8%, transparent));
	background: var(--sc-filter-section-v7-fv7-mob-sheet-header-bg, var(--primary-background-color, #fff));
	flex-shrink: 0;
}

.fv7-mob-sheet-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--sc-filter-section-v7-fv7-mob-sheet-title-text, var(--primary-title-color, #111));
}

.fv7-close-sheet {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	background: var(--sc-filter-section-v7-fv7-close-sheet-bg, color-mix(in srgb, var(--primary-title-color, #000) 6%, transparent));
	cursor: pointer;
}

/* Panel shell */
.fv7-root .filter-section.fv7-panel {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-height: 0;
	background: var(--sc-filter-section-v7-fv7-panel-bg, transparent);
	border: none;
	box-shadow: none;
	overflow: hidden;
}

@media (min-width: 992px) {
	.fv7-root.plp-shell__aside .filter-section.fv7-panel {
		flex: 1 1 auto;
		max-height: 100%;
	}

	.fv7-backdrop {
		display: none !important;
	}

	.fv7-mob-sheet-header {
		display: none !important;
	}
}

/* Split layout */
.fv7-split {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--sc-filter-section-v7-fv7-split-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	box-shadow: 0 14px 40px color-mix(in srgb, var(--primary-title-color, #000) 8%, transparent);
}

/* Dark icon rail */
.fv7-rail {
	display: flex;
	flex-direction: column;
	width: var(--fv7-rail-w);
	flex-shrink: 0;
	padding: 10px 6px;
	gap: 6px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--primary-button-background-color, #1a1a1a) 96%, #000),
		color-mix(in srgb, var(--primary-button-background-color, #1a1a1a) 88%, #222)
	);
}

.fv7-rail__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 10px 4px;
	border: none;
	border-radius: 12px;
	background: var(--sc-filter-section-v7-fv7-rail-btn-bg, transparent);
	color: var(--sc-filter-section-v7-fv7-rail-btn-text, color-mix(in srgb, var(--primary-button-text-color, #fff) 65%, transparent));
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		transform 0.12s ease;
}

.fv7-rail__btn i {
	font-size: 15px;
}

.fv7-rail__lbl {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
	text-align: center;
}

.fv7-rail__btn:hover {
	background: var(--sc-filter-section-v7-fv7-rail-btn-hover-bg, rgba(255, 255, 255, 0.08));
	color: var(--sc-filter-section-v7-fv7-rail-btn-hover-text, var(--primary-button-text-color, #fff));
}

.fv7-rail__btn.is-active {
	background: var(--sc-filter-section-v7-fv7-rail-btn-is-active-bg, var(--primary-brand-color, #c9a227));
	color: var(--sc-filter-section-v7-fv7-rail-btn-is-active-text, var(--primary-button-text-color, #fff));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-brand-color, #c9a227) 45%, transparent);
}

.fv7-rail__dot {
	position: absolute;
	top: 6px;
	inset-inline-end: 8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	background: var(--sc-filter-section-v7-fv7-rail-dot-bg, #fff);
	color: var(--sc-filter-section-v7-fv7-rail-dot-text, var(--primary-button-background-color, #1a1a1a));
}

.fv7-rail__btn.is-active .fv7-rail__dot {
	background: var(--sc-filter-section-v7-fv7-rail-dot-bg-2, var(--primary-button-background-color, #1a1a1a));
	color: var(--sc-filter-section-v7-fv7-rail-dot-text-2, #fff);
}

.fv7-rail__dot[hidden] {
	display: none !important;
}

/* Content pane */
.fv7-pane-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: var(--sc-filter-section-v7-fv7-pane-wrap-bg, var(--primary-background-color, #fff));
}

.fv7-pane-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 14px 10px;
	border-bottom: 1px solid var(--sc-filter-section-v7-fv7-pane-head-border-bottom, color-mix(in srgb, var(--primary-title-color, #000) 7%, transparent));
	flex-shrink: 0;
}

.fv7-pane-head__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--sc-filter-section-v7-fv7-pane-head-title-text, var(--primary-title-color, #111));
}

.fv7-pane-head__reset {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--sc-filter-section-v7-fv7-pane-head-reset-text, var(--primary-brand-color, #c9a227));
}

.fv7-panes {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 12px 14px;
	-webkit-overflow-scrolling: touch;
}

.fv7-pane {
	display: none;
	animation: fv7-pane-in 0.2s ease;
}

.fv7-pane.is-active {
	display: block;
}

@keyframes fv7-pane-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fv7-pane__empty {
	margin: 0;
	font-size: 13px;
	color: var(--sc-filter-section-v7-fv7-pane-empty-text, color-mix(in srgb, var(--primary-text-color, #666) 80%, transparent));
}

/* Pills */
.fv7-pill-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fv7-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fv7-pill__face {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sc-filter-section-v7-fv7-pill-face-text, var(--primary-text-color, #444));
	background: var(--sc-filter-section-v7-fv7-pill-face-bg, color-mix(in srgb, var(--primary-title-color, #000) 4%, transparent));
	border: 1px solid var(--sc-filter-section-v7-fv7-pill-face-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}

.fv7-pill input:checked + .fv7-pill__face {
	border-color: var(--sc-filter-section-v7-fv7-pill-face-checked-border, var(--primary-brand-color, #c9a227));
	background: var(--sc-filter-section-v7-fv7-pill-face-checked-bg, color-mix(in srgb, var(--primary-brand-color, #c9a227) 14%, var(--primary-background-color, #fff)));
	color: var(--sc-filter-section-v7-fv7-pill-face-checked-text, var(--primary-title-color, #111));
}

/* Price */
.fv7-price {
	text-align: center;
	padding: 8px 4px;
}

.fv7-price__label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sc-filter-section-v7-fv7-price-label-text, color-mix(in srgb, var(--primary-text-color, #666) 75%, transparent));
}

.fv7-price__val {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 800;
	color: var(--sc-filter-section-v7-fv7-price-val-text, var(--primary-title-color, #111));
	font-variant-numeric: tabular-nums;
}

.fv7-price__unit {
	font-size: 12px;
	font-weight: 700;
	margin-inline-start: 4px;
	color: var(--sc-filter-section-v7-fv7-price-unit-text, color-mix(in srgb, var(--primary-text-color, #666) 75%, transparent));
}

.fv7-price__range {
	width: 100%;
	accent-color: var(--primary-brand-color, #c9a227);
}

.fv7-price__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: var(--sc-filter-section-v7-fv7-price-scale-text, color-mix(in srgb, var(--primary-text-color, #666) 78%, transparent));
}

/* Sort lines */
.fv7-sort-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fv7-sort-line {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--sc-filter-section-v7-fv7-sort-line-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	background: var(--sc-filter-section-v7-fv7-sort-line-bg, var(--primary-background-color, #fff));
	cursor: pointer;
	text-align: start;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.fv7-sort-line.is-on {
	border-color: var(--sc-filter-section-v7-is-on-border, var(--primary-brand-color, #c9a227));
	background: var(--sc-filter-section-v7-is-on-bg, color-mix(in srgb, var(--primary-brand-color, #c9a227) 10%, var(--primary-background-color, #fff)));
}

.fv7-sort-line__icon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--sc-filter-section-v7-fv7-sort-line-icon-bg, color-mix(in srgb, var(--primary-brand-color, #c9a227) 12%, transparent));
	color: var(--sc-filter-section-v7-fv7-sort-line-icon-text, var(--primary-brand-color, #c9a227));
	font-size: 13px;
	flex-shrink: 0;
}

.fv7-sort-line__mark {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--sc-filter-section-v7-fv7-sort-line-mark-border, color-mix(in srgb, var(--primary-title-color, #000) 18%, transparent));
	flex-shrink: 0;
}

.fv7-sort-line.is-on .fv7-sort-line__mark {
	border-color: var(--sc-filter-section-v7-fv7-sort-line-mark-border-2, var(--primary-brand-color, #c9a227));
	background: radial-gradient(circle, var(--primary-brand-color, #c9a227) 45%, transparent 46%);
}

.fv7-sort-line__text {
	font-size: 12px;
	font-weight: 600;
	color: var(--sc-filter-section-v7-fv7-sort-line-text-text, var(--primary-text-color, #333));
	line-height: 1.35;
}

/* Extras flags */
.fv7-extras {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}

.fv7-flag input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fv7-flag__face {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sc-filter-section-v7-fv7-flag-face-text, var(--primary-text-color, #333));
	border: 1px solid var(--sc-filter-section-v7-fv7-flag-face-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.fv7-flag__face i {
	color: var(--sc-filter-section-v7-fv7-flag-face-icon-text, var(--primary-brand-color, #c9a227));
}

.fv7-flag input:checked + .fv7-flag__face {
	border-color: var(--sc-filter-section-v7-fv7-flag-face-checked-border, var(--primary-brand-color, #c9a227));
	background: var(--sc-filter-section-v7-fv7-flag-face-checked-bg, color-mix(in srgb, var(--primary-brand-color, #c9a227) 10%, var(--primary-background-color, #fff)));
}

/* Attribute group */
.fv7-attr-group {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--sc-filter-section-v7-fv7-attr-group-border-top, color-mix(in srgb, var(--primary-title-color, #000) 12%, transparent));
}

.fv7-attr-group__title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sc-filter-section-v7-fv7-attr-group-title-text, var(--primary-title-color, #111));
}

.fv7-attr-group__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Apply */
.fv7-pane-foot {
	flex-shrink: 0;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--sc-filter-section-v7-fv7-pane-foot-border-top, color-mix(in srgb, var(--primary-title-color, #000) 7%, transparent));
	background: var(--sc-filter-section-v7-fv7-pane-foot-bg, color-mix(in srgb, var(--secondary-background-color, #f5f2ed) 20%, var(--primary-background-color, #fff)));
}

.fv7-apply {
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--sc-filter-section-v7-fv7-apply-text, var(--primary-button-text-color, #fff));
	background: var(--sc-filter-section-v7-fv7-apply-bg, var(--primary-button-background-color, #1a1a1a));
	transition: filter 0.2s ease;
}

.fv7-apply:hover {
	filter: brightness(1.06);
}

/* Mobile sheet */
@media (max-width: 991px) {
	.fv7-root .mobile-filter-toggle.fv7-mob {
		display: flex;
	}

	.fv7-root .filter-section.fv7-panel .fv7-mob-sheet-header {
		display: flex;
	}

	.fv7-root .filter-section.fv7-panel {
		position: fixed;
		inset: 0;
		z-index: var(--fv7-z-sheet);
		max-height: 100vh;
		max-height: 100dvh;
		background: var(--sc-filter-section-v7-fv7-panel-bg, var(--primary-background-color, #fff));
		transform: translate3d(0, 105%, 0);
		transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
		visibility: hidden;
		pointer-events: none;
	}

	.fv7-root .filter-section.fv7-panel.active {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
	}

	.fv7-split {
		flex: 1;
		min-height: 0;
		border-radius: 0;
		border: none;
		box-shadow: none;
	}

	.fv7-rail {
		width: 56px;
		padding-top: max(10px, env(safe-area-inset-top, 0px));
	}

	.fv7-rail__lbl {
		display: none;
	}

	.fv7-pane-foot {
		padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv7-root .filter-section.fv7-panel,
	.fv7-pane {
		animation: none;
		transition: none;
	}
}

/* === theme colour controls: inherited values (generated) === */
.fv7-mob__icon {
	color: var(--sc-filter-section-v7-fv7-mob-icon-text, inherit);
}

.fv7-mob__label {
	color: var(--sc-filter-section-v7-fv7-mob-label-text, inherit);
}

.fv7-rail__lbl {
	color: var(--sc-filter-section-v7-fv7-rail-lbl-text, inherit);
}
/* === end theme colour controls === */