/*
 * SunRayCity product filter.
 * Values measured from the live HUSKY panel (computed styles), so the new
 * filter looks the same without depending on HUSKY's files.
 */
:root {
	--srxf-accent: #f2bb63;
	--srxf-ink: #000;
	--srxf-muted: #777;
	--srxf-track: #dee4ec;
	--srxf-green: #2eca8b;
}

.srxf-sidebar[hidden],
.srxf-size [hidden],
.srxf-modal[hidden],
.srxf-fms__error[hidden],
.srxf-active[hidden],
.srxf-slider__tip[hidden],
.woocommerce-pagination[hidden],
.woocommerce-result-count[hidden],
ul.products[hidden] {
	display: none !important;
}

/* While a filtered URL is being rendered the grid is hidden -- by an inline
   rule printed with the early script in wp_head (frontend.php, html[data-srxf-pending]),
   so it applies before this stylesheet has even loaded. */

/* ------------------------------------------------------------ section titles */

.srxf-facet__title {
	margin: 0 0 15px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--srxf-ink);
}

.srxf-facet__toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-transform: inherit;
}

.srxf-facet__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: -4px 4px 0 10px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex: none;
}

.srxf-facet.is-collapsed .srxf-facet__toggle::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.srxf-facet__toggle:focus-visible {
	outline: 2px solid var(--srxf-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- sidebar */

.srxf-facet {
	margin: 0 0 24px;
	padding: 0 0 5px;
}

/* Expand/collapse animates height from 0 to its natural size via a 0fr -> 1fr grid
   row -- no fixed max-height guess, so long lists open at the same pace as short. */
.srxf-facet__body,
.srxf-children-wrap {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
}

.srxf-facet__inner,
.srxf-children {
	min-height: 0;
	overflow: hidden;
}

.srxf-facet.is-collapsed .srxf-facet__body {
	grid-template-rows: 0fr;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.srxf-facet__body,
	.srxf-children-wrap {
		transition: none;
	}
}

.srxf-list {
	max-height: 500px;
	overflow-y: auto;
	margin: 0 0 3px;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
}

.srxf-list li,
.srxf-children li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 3px 0;
	list-style: none;
}

.srxf-item__label {
	position: relative; /* contains the hidden checkbox; see .srxf-check */
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: var(--srxf-ink);
	cursor: pointer;
}

/* Positioned inside its own label. Without that, its containing block is the
   whole (fixed, scrolling) off-canvas drawer, and checkboxes deep inside a long
   clipped list extend the drawer's scroll area with ~2,500px of blank space. */
.srxf-check {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* iCheck "square grey" sprite: normal / hover / checked / disabled / checked-disabled */
.srxf-box {
	flex: none;
	width: 22px;
	height: 22px;
	margin-right: 13px;
	background: url(img/checkbox.png) 0 0 no-repeat;
}

@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
	.srxf-box {
		background-image: url(img/checkbox@2x.png);
		background-size: 240px 24px;
	}
}

.srxf-item__label:hover .srxf-box {
	background-position: -24px 0;
}

.srxf-check:checked + .srxf-box {
	background-position: -48px 0;
}

.srxf-check:disabled + .srxf-box {
	background-position: -72px 0;
}

.srxf-check:focus-visible + .srxf-box {
	outline: 2px solid var(--srxf-accent);
	outline-offset: 1px;
}

/* The theme colours every <label> with its accent; HUSKY's names were black with
   only the count in accent. Scoped by id so the theme rule cannot win. */
#srxf-sidebar .srxf-item__label,
#srxf-sidebar .srxf-name {
	color: var(--srxf-ink);
}

#srxf-sidebar .srxf-count {
	margin-left: 3px;
	color: var(--srxf-accent);
}

.srxf-item.is-empty > .srxf-item__label {
	opacity: 0.45;
	cursor: default;
}

.srxf-opener {
	all: unset;
	width: 13px;
	height: 13px;
	margin-left: 7px;
	cursor: pointer;
	background: url(img/plus2.svg) center / 13px 13px no-repeat;
}

.srxf-opener:hover {
	background-size: 16px 16px;
}

.srxf-item.is-open > .srxf-opener {
	background-image: url(img/minus2.svg);
}

.srxf-children-wrap {
	flex-basis: 100%;
	grid-template-rows: 0fr;
	opacity: 0;
}

.srxf-item.is-open > .srxf-children-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
}

.srxf-children {
	margin: 0;
	padding: 0 0 0 17px;
	list-style: none;
}

.srxf-loading {
	min-height: 480px;
}

.srxf-error {
	font-size: 14px;
	color: #b32d2e;
}

/* ---------------------------------------------------------- sort dropdown */

/* Sort dropdown: white, dark text, clear edge -- readable against the grey page. */
.nectar-shop-header-bottom .woocommerce-ordering select.orderby,
body[data-fancy-form-rcs="1"] .nectar-shop-header-bottom .woocommerce-ordering select {
	-webkit-appearance: none;
	appearance: none;
	height: 46px;
	padding: 0 44px 0 18px !important;
	border: 1px solid #cfcfcf !important;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b1b1b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px !important;
	color: #1b1b1b;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nectar-shop-header-bottom .woocommerce-ordering select.orderby:hover,
.nectar-shop-header-bottom .woocommerce-ordering select.orderby:focus {
	border-color: var(--srxf-accent) !important;
	box-shadow: 0 0 0 3px rgba(242, 187, 99, 0.28);
	outline: none;
}

/* ------------------------------------------------- sliders (sidebar foot) */

/* An open slider section lets its value tips overhang the column edge instead
   of clipping them; collapsed (and while collapsing) it clips as usual. */
.srxf-facet--range:not(.is-collapsed) .srxf-facet__inner {
	overflow: visible;
}

.srxf-range {
	min-width: 0;
	padding-top: 2px;
}

/* Dual-handle slider built from two native range inputs (keyboard + screen reader
   support for free). Thumb centres travel from 12px to (100% - 12px), so the
   fill and tips use the same mapping: 12px + (100% - 24px) * fraction. */
/* Inset so a tooltip centred on a handle parked at either end stays inside the column. */
.srxf-slider {
	--a: 0;
	--b: 1;
	position: relative;
	height: 60px;
	margin: 0 14px;
}

.srxf-slider__track {
	position: absolute;
	top: 36px;
	left: 12px;
	right: 12px;
	height: 4px;
	border-radius: 4px;
	background: var(--srxf-track);
}

.srxf-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc((100%) * var(--a));
	right: calc((100%) * (1 - var(--b)));
	border-radius: 4px;
	background: var(--srxf-accent);
}

.srxf-slider__input {
	position: absolute;
	top: 26px;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

.srxf-slider__input::-webkit-slider-runnable-track {
	height: 24px;
	background: transparent;
	border: 0;
}

.srxf-slider__input::-moz-range-track {
	height: 24px;
	background: transparent;
	border: 0;
}

.srxf-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 4px solid var(--srxf-accent);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(242, 187, 99, 0.3);
	cursor: grab;
	pointer-events: auto;
}

.srxf-slider__input::-moz-range-thumb {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 4px solid var(--srxf-accent);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(242, 187, 99, 0.3);
	cursor: grab;
	pointer-events: auto;
}

.srxf-slider__input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.srxf-slider__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(242, 187, 99, 0.45);
}

.srxf-slider__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(242, 187, 99, 0.45);
}

.srxf-slider__tip {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	padding: 3px 5px;
	border-radius: 4px;
	background: var(--srxf-accent);
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}

.srxf-slider__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -3px;
	border: 3px solid transparent;
	border-top-color: var(--srxf-accent);
}

/* ------------------------------------------------ find my size (sidebar) */

.srxf-size {
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom: 1px solid #e4e4e4;
}

.srxf-size__title {
	margin-bottom: 8px;
}

.srxf-size__empty,
.srxf-size__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 15px;
	line-height: 22px;
	color: var(--srxf-ink);
}

/* Pill like the site's other buttons: black outline, fills black on hover. */
.srxf-size__cta {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border: 2px solid #1b1b1b;
	border-radius: 999px;
	background: #fff;
	color: #1b1b1b;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.srxf-size__cta:hover {
	background: #1b1b1b;
	color: #fff;
}

/* Salient styles every <button> (square corners, uppercase, accent fill) with
   selectors that outrank a single class; these keep the pill a pill. */
#srxf-sidebar button.srxf-size__cta {
	padding: 7px 16px !important;
	border: 2px solid #1b1b1b !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #1b1b1b !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
}

#srxf-sidebar button.srxf-size__cta:hover {
	background: #1b1b1b !important;
	color: #fff !important;
}

.srxf-size__cta:focus-visible,
.srxf-size__link:focus-visible {
	outline: 2px solid var(--srxf-accent);
	outline-offset: 2px;
}

.srxf-size__icon {
	width: 15px;
	height: 15px;
	flex: none;
}

.srxf-size__label {
	font-weight: 700;
}

.srxf-size__value {
	font-size: 17px;
}

.srxf-size__count {
	color: var(--srxf-muted);
	font-size: 14px;
}

.srxf-size__link {
	all: unset;
	cursor: pointer;
	font-size: 14px;
	color: var(--srxf-ink);
	text-decoration: underline;
}

.srxf-size__link:hover {
	color: #a8741f;
}

/* The square between lens and bridge, drawn so it looks the same in every font. */
.srxf-sq {
	display: inline-block;
	box-sizing: border-box;
	width: 0.62em;
	height: 0.62em;
	margin: 0 0.12em;
	border: 2px solid currentColor;
	vertical-align: 0;
}

/* ------------------------------------------------- find my size (dialog) */

html.srxf-modal-open,
html.srxf-modal-open body {
	overflow: hidden !important;
}

.srxf-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* not `inset`: iOS Safari before 14.5 ignores it */
	z-index: 999999; /* above the header and the off-canvas Filters drawer */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.srxf-modal__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* not `inset`: iOS Safari before 14.5 ignores it */
	background: rgba(0, 0, 0, 0.55);
	animation: srxf-fade 0.18s ease;
}

.srxf-modal__box {
	position: relative;
	box-sizing: border-box;
	width: min(600px, 100%);
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	overflow: auto;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	color: #1b1b1b;
	animation: srxf-pop 0.22s ease;
}

.srxf-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 24px;
	border-bottom: 1px solid #e6e6e6;
}

.srxf-modal .srxf-modal__title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #1b1b1b;
}

.srxf-modal__close {
	all: unset;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #1b1b1b;
	cursor: pointer;
}

.srxf-modal__close:hover {
	background: #f2f2f2;
}

.srxf-modal__close:focus-visible {
	outline: 2px solid var(--srxf-accent);
}

.srxf-modal__close svg {
	width: 16px;
	height: 16px;
}

.srxf-fms {
	padding: 22px 28px 30px;
	text-align: center;
}

.srxf-modal .srxf-fms p {
	padding: 0;
}

.srxf-modal .srxf-fms__lead {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1b1b1b;
}

.srxf-modal .srxf-fms__sub,
.srxf-modal .srxf-fms__how {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.45;
	color: #555;
}

.srxf-fms__art {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin: 0 auto 4px;
}

.srxf-modal .srxf-fms__legend {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: #1b1b1b;
}

.srxf-fms__fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	text-align: left;
}

/* Four boxes side by side need ~560px; below that, two rows of two. */
@media (max-width: 600px) {
	.srxf-fms__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.srxf-modal .srxf-fms__field {
	display: block;
	margin: 0;
	color: #1b1b1b;
}

.srxf-modal .srxf-fms__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #1b1b1b !important; /* the theme colours every label with its accent */
}

.srxf-fms__req {
	color: #c62828;
}

/* "optional" beside Vertical: quiet, like the "mm" in the boxes. */
.srxf-modal .srxf-fms__opt {
	margin-left: 2px;
	font-size: 13px;
	font-weight: 400;
	color: #8a8a8a !important; /* the theme colours every label with its accent */
	white-space: nowrap;
}

.srxf-fms__box {
	position: relative;
	display: block;
}

/* The theme styles text inputs heavily; these must win inside the dialog. */
.srxf-modal .srxf-fms__box input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 40px 0 14px !important;
	border: 1px solid #bfc7cc !important;
	border-radius: 4px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #1b1b1b !important;
	font-size: 17px !important; /* 16px+ so iPhones do not zoom in on focus */
	line-height: 46px !important;
}

.srxf-modal .srxf-fms__box input::placeholder {
	color: #a4acb1;
	opacity: 1;
}

.srxf-modal .srxf-fms__box input:focus {
	border-color: var(--srxf-accent) !important;
	box-shadow: 0 0 0 3px rgba(242, 187, 99, 0.3) !important;
	outline: none;
}

.srxf-fms__box em {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: 13px;
	font-style: normal;
	color: #8a8a8a;
	pointer-events: none;
}

.srxf-modal .srxf-fms__error {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: left;
	color: #b32d2e;
}

.srxf-fms__submit {
	all: unset;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 20px;
	padding: 13px 34px;
	border-radius: 999px;
	background: #1b1b1b;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.srxf-fms__submit:hover {
	background: var(--srxf-accent);
	color: #1b1b1b;
}

/* Same reason as the sidebar pill: the theme's submit-button rules win otherwise
   (pale accent fill with white uppercase text -- too little contrast). */
.srxf-modal .srxf-fms button.srxf-fms__submit {
	height: auto !important;
	padding: 13px 34px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #1b1b1b !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.srxf-modal .srxf-fms button.srxf-fms__submit:hover,
.srxf-modal .srxf-fms button.srxf-fms__submit:focus-visible {
	background: var(--srxf-accent) !important;
	color: #1b1b1b !important;
}

.srxf-fms__submit:focus-visible {
	outline: 2px solid var(--srxf-accent);
	outline-offset: 3px;
}

.srxf-modal .srxf-fms__count {
	margin: 16px 0 0;
	line-height: 20px;
	font-size: 14px;
	font-weight: 600;
	color: #1b1b1b;
}

.srxf-modal .srxf-fms__count:empty {
	display: none;
}

/* Room above (from the button or the match count) and a clear line break. */
.srxf-modal .srxf-fms__note {
	max-width: 480px;
	text-wrap: pretty;
	margin: 18px auto 0;
	font-size: 13px;
	line-height: 1.55;
	color: #777;
}

@keyframes srxf-pop {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

@keyframes srxf-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.srxf-modal__box,
	.srxf-modal__backdrop {
		animation: none;
	}
}

@media (max-width: 480px) {
	.srxf-fms {
		padding: 18px 16px 20px;
	}

	.srxf-fms__fields {
		gap: 8px;
	}

	.srxf-modal .srxf-fms__box input {
		padding: 0 30px 0 10px !important;
	}

	.srxf-fms__box em {
		right: 8px;
	}

	.srxf-modal .srxf-fms__lead {
		font-size: 18px;
	}
}

/* ------------------------------------------------------- product card spacing */

/* The theme reserves a fixed 100px under every title, so one- and two-line titles
   leave a gap above the price. Instead: cards in a row share the row's height
   (the grid is already flexbox) and the price sits at the bottom of each card --
   prices line up with the TALLEST title in that row, with no reserve beyond it. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	min-height: 0 !important;
	height: auto !important;
}

.woocommerce ul.products li.product > .price {
	margin-top: auto;
	padding-top: 8px;
	line-height: 26px; /* fixed, so a sale price (with <del>) is not taller than a regular one */
}

/* ------------------------------------------------ active filters (above grid) */

.srxf-active {
	margin: 5px 0 15px;
	padding: 10px;
	border-radius: 5px;
	background: var(--srxf-accent);
	font-size: 15px;
}

.srxf-active__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srxf-active__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.srxf-active__clear {
	all: unset;
	cursor: pointer;
	padding: 6px 20px;
	border-radius: 4px;
	background: #1b1b1b;
	color: #fff;
	font-size: 15px;
	line-height: 20px;
}

.srxf-active__label {
	margin-right: 6px;
	font-weight: 700;
}

.srxf-chip {
	display: inline-flex;
	align-items: center;
	margin-right: 10px;
	color: var(--srxf-ink) !important;
	text-decoration: underline !important;
}

/* Circle and cross drawn as one SVG: a text "×" sits off-centre by a font's metrics. */
/* The size chip holds text plus the drawn square; kept as one run so the flex
   chip does not swallow the spaces around the square. */
.srxf-chip__text {
	white-space: nowrap;
}

.srxf-chip::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: -5px; /* optically centred on the text (the underline weighs the line down) */
	margin-left: 5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%231b1b1b'/%3E%3Cpath d='M4.6 4.6l4.8 4.8M9.4 4.6l-4.8 4.8' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 999px) {
	/* "Clear All" goes last, on a row of its own, at every phone/tablet width --
	   never inline at the end of the last chip row. */
	.srxf-active__list > li:first-child {
		order: 99;
		flex-basis: 100%;
	}

	/* In the off-canvas drawer, only the drawer scrolls: no scroll boxes inside a
	   scrolling panel (on touch, a finger kept catching an inner list). Sections
	   start collapsed here instead, so the drawer stays short. */
	.srxf-list {
		max-height: none;
		overflow: visible;
	}
}