/*
 * Filter section v6 — vertical sticky sidebar (PLP aside, same layout model as v2)
 * Page layout: .plp-shell--fv6 grid — aside (this block) | .plp-shell__main (products)
 */

:root {
	--fv6-z-backdrop: 50000;
	--fv6-z-sheet: 50001;
	--fv6-plp-section-pad: 60px;
	--fv6-sidebar-w: 300px;
}

.fv6-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;
}

/* ---- Page shell: sidebar | products ---- */
.plp-shell--fv6 {
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 32px);
	margin-bottom: 2%;
}

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

	.plp-shell--fv6 .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--fv6 .plp-shell__main {
		min-width: 0;
		display: flow-root;
	}
}

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

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

/* Backdrop */
.fv6-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--fv6-z-backdrop);
	background: var(--sc-filter-section-v6-fv6-backdrop-bg, rgba(10, 12, 16, 0.5));
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.32s ease;
}

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

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

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

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

.fv6-root .mobile-filter-toggle.fv6-mob {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 14px;
	border: 1px solid var(--sc-filter-section-v6-fv6-mob-border, color-mix(in srgb, var(--primary-title-color, #000) 10%, transparent));
	background: var(--sc-filter-section-v6-fv6-mob-bg, var(--primary-background-color, #fff));
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: var(--sc-filter-section-v6-fv6-mob-text, var(--primary-title-color, #111));
	box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-title-color, #000) 7%, transparent);
}

.fv6-mob__icon {
	color: var(--sc-filter-section-v6-fv6-mob-icon-text, var(--primary-brand-color, #c9a227));
}

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

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

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

/* Panel */
.fv6-root .filter-section.fv6-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--sc-filter-section-v6-fv6-panel-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--sc-filter-section-v6-fv6-panel-border, color-mix(in srgb, var(--primary-title-color, #000) 9%, transparent));
	border-radius: 18px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 16px 40px color-mix(in srgb, var(--primary-title-color, #000) 7%, transparent);
	overflow: hidden;
}

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

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

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

.fv6-panel__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 16px 8px;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
	.fv6-panel__scroll {
		padding-top: 12px;
	}
}

.fv6-panel__foot {
	flex-shrink: 0;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--sc-filter-section-v6-fv6-panel-foot-border-top, color-mix(in srgb, var(--primary-title-color, #000) 8%, transparent));
	background: var(--sc-filter-section-v6-fv6-panel-foot-bg, color-mix(in srgb, var(--secondary-background-color, #f5f2ed) 25%, var(--primary-background-color, #fff)));
}

/* Header */
.fv6-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sc-filter-section-v6-fv6-head-border-bottom, color-mix(in srgb, var(--primary-title-color, #000) 8%, transparent));
}

.fv6-eyebrow {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-filter-section-v6-fv6-eyebrow-text, color-mix(in srgb, var(--primary-text-color, #666) 75%, transparent));
}

.fv6-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--sc-filter-section-v6-fv6-heading-text, var(--primary-title-color, #111));
}

.fv6-root .reset-filters.fv6-clear {
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sc-filter-section-v6-fv6-clear-text, var(--primary-brand-color, #c9a227));
}

.fv6-root .reset-filters.fv6-clear:hover {
	text-decoration: underline;
}

/* Blocks */
.fv6-block {
	margin-bottom: 14px;
	padding: 12px 12px 10px;
	border-radius: 14px;
	background: var(--sc-filter-section-v6-fv6-block-bg, color-mix(in srgb, var(--secondary-background-color, #f5f2ed) 28%, var(--primary-background-color, #fff)));
	border-inline-start: 3px solid var(--sc-filter-section-v6-fv6-block-border-inline-start, var(--primary-brand-color, #c9a227));
}

.fv6-block--last {
	margin-bottom: 4px;
}

.fv6-block__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sc-filter-section-v6-fv6-block-title-text, var(--primary-title-color, #111));
}

.fv6-block__title i {
	color: var(--sc-filter-section-v6-fv6-block-title-icon-text, var(--primary-brand-color, #c9a227));
	font-size: 12px;
}

.fv6-block__empty {
	font-size: 13px;
	color: var(--sc-filter-section-v6-fv6-block-empty-text, color-mix(in srgb, var(--primary-text-color, #666) 80%, transparent));
	list-style: none;
}

/* List rows */
.fv6-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 180px;
	overflow-y: auto;
}

.fv6-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.fv6-row:hover {
	background: var(--sc-filter-section-v6-fv6-row-hover-bg, color-mix(in srgb, var(--primary-title-color, #000) 4%, transparent));
}

.fv6-row input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fv6-row__box {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 5px;
	border: 2px solid var(--sc-filter-section-v6-fv6-row-box-border, color-mix(in srgb, var(--primary-title-color, #000) 18%, transparent));
	background: var(--sc-filter-section-v6-fv6-row-box-bg, var(--primary-background-color, #fff));
	position: relative;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.fv6-row input:checked ~ .fv6-row__box {
	border-color: var(--sc-filter-section-v6-fv6-row-box-checked-border, var(--primary-brand-color, #c9a227));
	background: var(--sc-filter-section-v6-fv6-row-box-checked-bg, var(--primary-brand-color, #c9a227));
}

.fv6-row input:checked ~ .fv6-row__box::after {
	content: '';
	position: absolute;
	inset: 3px 5px 5px 3px;
	border-inline-end: 2px solid var(--sc-filter-section-v6-fv6-row-box-after-checked-border-inline-end, var(--primary-button-text-color, #fff));
	border-block-end: 2px solid var(--sc-filter-section-v6-fv6-row-box-after-checked-border-block-end, var(--primary-button-text-color, #fff));
	transform: rotate(45deg);
}

.fv6-row__label {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--sc-filter-section-v6-fv6-row-label-text, var(--primary-text-color, #333));
	line-height: 1.35;
}

/* Toggle rows */
.fv6-row--toggle {
	justify-content: space-between;
}

.fv6-row--toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fv6-toggle {
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: var(--sc-filter-section-v6-fv6-toggle-bg, color-mix(in srgb, var(--primary-title-color, #000) 14%, transparent));
	position: relative;
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.fv6-toggle__knob {
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sc-filter-section-v6-fv6-toggle-knob-bg, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
}

.fv6-row--toggle input:checked ~ .fv6-toggle {
	background: var(--sc-filter-section-v6-fv6-toggle-checked-bg, var(--primary-brand-color, #c9a227));
}

.fv6-row--toggle input:checked ~ .fv6-toggle .fv6-toggle__knob {
	transform: translateX(18px);
}

[dir='rtl'] .fv6-row--toggle input:checked ~ .fv6-toggle .fv6-toggle__knob {
	transform: translateX(-18px);
}

/* Price */
.fv6-price {
	text-align: center;
	padding: 4px 0 2px;
}

.fv6-price__cap {
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-filter-section-v6-fv6-price-cap-text, color-mix(in srgb, var(--primary-text-color, #666) 75%, transparent));
}

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

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

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

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

/* Sort stack */
.fv6-sort-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

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

.fv6-sort-item__radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--sc-filter-section-v6-fv6-sort-item-radio-border, color-mix(in srgb, var(--primary-title-color, #000) 18%, transparent));
	flex-shrink: 0;
	position: relative;
}

.fv6-sort-item.is-on .fv6-sort-item__radio {
	border-color: var(--sc-filter-section-v6-fv6-sort-item-radio-border-2, var(--primary-brand-color, #c9a227));
}

.fv6-sort-item.is-on .fv6-sort-item__radio::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--sc-filter-section-v6-fv6-sort-item-radio-after-bg, var(--primary-brand-color, #c9a227));
}

.fv6-sort-item__text {
	font-size: 12px;
	font-weight: 600;
	color: var(--sc-filter-section-v6-fv6-sort-item-text-text, var(--primary-text-color, #333));
	line-height: 1.3;
}

/* Attribute blocks */
.fv6-block--attr {
	max-height: none;
}

.fv6-block--attr .fv6-list {
	max-height: 140px;
}

/* Apply */
.fv6-apply {
	width: 100%;
	padding: 14px 18px;
	border: none;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--sc-filter-section-v6-fv6-apply-text, var(--primary-button-text-color, #fff));
	background: var(--sc-filter-section-v6-fv6-apply-bg, var(--primary-button-background-color, #1a1a1a));
	transition: filter 0.2s ease;
}

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

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

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

	.fv6-root .filter-section.fv6-panel {
		position: fixed;
		inset: 0;
		z-index: var(--fv6-z-sheet);
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
		transform: translate3d(0, 105%, 0);
		transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
		visibility: hidden;
		pointer-events: none;
	}

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

	.fv6-panel__foot {
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}
}

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

/* === theme colour controls: inherited values (generated) === */
.fv6-mob__label {
	color: var(--sc-filter-section-v6-fv6-mob-label-text, inherit);
}
/* === end theme colour controls === */