/* Pharmacy Junction Shop Filters — clean pharmacy styling, sits inside Salient's shop sidebar. */
.ssf {
	--ssf-accent: #0073aa;        /* Pharmacy Junction blue */
	--ssf-accent-dark: #005278;   /* Footer navy */
	--ssf-tint: #eef6fb;          /* Light blue wash */
	--ssf-tint-strong: #dceef8;
	--ssf-sale: #d62335;
	--ssf-border: #e3e8ee;
	--ssf-line: #edf1f5;
	--ssf-muted: #6b7380;
	--ssf-text: #1b2430;
	--ssf-bg: #fff;
	--ssf-radius: 6px;
	color: var(--ssf-text);
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 28px;
}
.ssf *, .ssf *::before, .ssf *::after { box-sizing: border-box; }
.ssf-open, .ssf-close, .ssf-backdrop { display: none; }

/* ---- Card ---------------------------------------------------------------- */
.ssf-form {
	background: var(--ssf-bg);
	border: 1px solid var(--ssf-border);
	border-radius: var(--ssf-radius);
	overflow: hidden;
}

.ssf-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: var(--ssf-tint);
	border-bottom: 1px solid var(--ssf-border);
}
.ssf-head-icon { flex: 0 0 auto; color: var(--ssf-accent); }
.ssf-title {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	color: var(--ssf-accent-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ssf .ssf-clear {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ssf-tint-strong);
	color: var(--ssf-accent) !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .15s, color .15s;
}
.ssf .ssf-clear:hover { background: var(--ssf-accent); color: #fff !important; border-color: var(--ssf-accent); }

/* ---- Groups -------------------------------------------------------------- */
.ssf-groups { padding: 0; }
.ssf-group { border-bottom: 1px solid var(--ssf-line); }
.ssf-group:last-child { border-bottom: 0; }
.ssf-group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 44px 14px 18px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ssf-text);
	position: relative;
	transition: background .15s;
}
.ssf-group > summary:hover { background: #fafcfe; }
.ssf-group > summary::-webkit-details-marker { display: none; }
.ssf-group > summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: var(--ssf-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%230073aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
	transition: transform .2s ease;
}
.ssf-group[open] > summary::after { transform: rotate(180deg); }
.ssf-group > summary:focus-visible { outline: 2px solid var(--ssf-accent); outline-offset: -2px; }
.ssf-label-unit { font-weight: 400; color: var(--ssf-muted); }
.ssf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ssf-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.ssf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ssf-accent); }
.ssf-body { padding: 0 12px 14px; }

/* ---- Options ------------------------------------------------------------- */
.ssf .ssf-options { list-style: none; margin: 0; padding: 0; }
.ssf .ssf-options li { margin: 0; padding: 0; list-style: none; }
.ssf .ssf-options li::before { display: none; }


.ssf-options label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	margin: 0;
	border-radius: 8px;
	cursor: pointer;
	color: var(--ssf-text) !important;
	font-weight: 400;
	font-size: 14px;
	text-decoration: none !important;
	transition: background .12s;
}
.ssf-options label:hover { background: var(--ssf-tint); }
.ssf-options input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid #b7c0cc;
	border-radius: 5px;
	background: #fff;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}
.ssf-options input[type=checkbox]::before {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}
.ssf-options label:hover input[type=checkbox]:not(:disabled) { border-color: var(--ssf-accent); }
.ssf-options input[type=checkbox]:checked { background: var(--ssf-accent); border-color: var(--ssf-accent); }
.ssf-options input[type=checkbox]:checked::before { opacity: 1; }
.ssf-options input[type=checkbox]:checked ~ .ssf-name { font-weight: 600; color: var(--ssf-accent-dark); }
.ssf-options input[type=checkbox]:focus-visible { outline: 2px solid var(--ssf-accent); outline-offset: 2px; }
.ssf-options input[type=checkbox]:disabled, .ssf-options input[type=checkbox]:disabled ~ span { opacity: .4; cursor: default; }
.ssf-options label:has(input:disabled) { cursor: default; background: none; }

.ssf-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ssf-count {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #f2f5f8;
	color: var(--ssf-muted);
	font-size: 11.5px;
	font-weight: 600;
	text-align: center;
	line-height: 1.4;
}
.ssf-options input:checked ~ .ssf-count { background: var(--ssf-tint-strong); color: var(--ssf-accent-dark); }


.ssf-options .ssf-extra { display: none; }
.ssf-options.ssf-show-all .ssf-extra, .ssf-options.ssf-searching .ssf-extra { display: block; }
.ssf-options.ssf-searching li[hidden] { display: none !important; }

.ssf .ssf-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0 8px;
	padding: 4px 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--ssf-accent) !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	cursor: pointer;
	text-decoration: none;
}
.ssf .ssf-more::before {
	content: "+";
	display: inline-grid;
	place-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ssf-tint);
	font-size: 14px;
	line-height: 1;
}
.ssf .ssf-more[aria-expanded="true"]::before { content: "\2212"; }
.ssf .ssf-more:hover { color: var(--ssf-accent-dark) !important; }

/* Search inside long lists (brands, ingredients). */
.ssf .ssf-find {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	padding: 9px 12px 9px 34px !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	border: 1px solid var(--ssf-border) !important;
	border-radius: 999px !important;
	background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px 50% / 15px no-repeat !important;
	color: var(--ssf-text);
	box-shadow: none !important;
	transition: border-color .15s, background-color .15s;
}
.ssf .ssf-find:focus { outline: none; border-color: var(--ssf-accent) !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(0, 115, 170, .12) !important; }


/* ---- Price range --------------------------------------------------------- */
.ssf-range { padding: 4px 8px 0; }
.ssf-slider { position: relative; height: 28px; margin: 4px 9px 10px; }
.ssf-track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--ssf-line); }
.ssf-fill { position: absolute; top: 0; height: 100%; background: var(--ssf-accent); border-radius: 2px; }
.ssf-slider input[type=range] {
	position: absolute;
	left: -9px;
	width: calc(100% + 18px);
	top: 0;
	height: 28px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.ssf-slider input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.ssf-slider input[type=range]::-moz-range-track { background: none; border: 0; }
.ssf-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ssf-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	cursor: grab;
}
.ssf-slider input[type=range]::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ssf-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	cursor: grab;
}
.ssf-inputs { display: flex; align-items: center; gap: 8px; }
.ssf-inputs label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--ssf-border);
	border-radius: 8px;
	background: #f8fafc;
	font-weight: 400;
	transition: border-color .15s, background .15s;
}
.ssf-inputs label:focus-within { border-color: var(--ssf-accent); background: #fff; box-shadow: 0 0 0 3px rgba(0, 115, 170, .12); }
.ssf .ssf-inputs input[type=number] {
	width: 100%;
	min-width: 0;
	border: 0 !important;
	padding: 9px 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	color: var(--ssf-text);
	-moz-appearance: textfield;
}
.ssf .ssf-inputs input[type=number]::-webkit-inner-spin-button,
.ssf .ssf-inputs input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ssf .ssf-inputs input[type=number]:focus { outline: none; }
.ssf-unit { color: var(--ssf-muted); font-size: 13px; }
.ssf-dash { color: var(--ssf-muted); }
.ssf-help { margin: 8px 0 0 !important; padding: 0 !important; font-size: 12px; color: var(--ssf-muted); }

/* ---- Footer (no-JS submit, and the mobile drawer) ------------------------ */
.ssf-foot { padding: 14px 18px; border-top: 1px solid var(--ssf-line); }
.ssf .ssf-apply {
	width: 100%;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ssf-accent) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px !important;
	cursor: pointer;
	transition: background .15s;
}
.ssf .ssf-apply:hover { background: var(--ssf-accent-dark) !important; }
.ssf-js .ssf-foot { display: none; }
.ssf-busy .ssf-form { opacity: .65; transition: opacity .15s; }

/* ---- Results area -------------------------------------------------------- */
.post-area.ssf-loading { position: relative; }
.post-area.ssf-loading > * { opacity: .4; transition: opacity .15s ease; pointer-events: none; }
.post-area.ssf-loading::before {
	content: "";
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 120px;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid #dceef8;
	border-top-color: #0073aa;
	border-radius: 50%;
	animation: ssf-spin .7s linear infinite;
}
@keyframes ssf-spin { to { transform: rotate(360deg); } }

.ssf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; width: 100%; clear: both; }
.ssf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 14px;
	border-radius: 999px;
	background: #eef6fb;
	border: 1px solid #dceef8;
	color: #005278 !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	transition: background .15s, border-color .15s;
}
.ssf-chip span {
	display: inline-grid;
	place-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	font-size: 14px;
	line-height: 1;
}
.ssf-chip:hover { background: #dceef8; border-color: #0073aa; }
.ssf-chip.ssf-chip-clear { background: none; border-color: transparent; padding-left: 6px; color: #0073aa !important; text-decoration: underline !important; font-weight: 600; }
.ssf-empty { font-size: 15px; margin: 10px 0 30px; }

/* ---- Inside Salient's sidebar: inline, no second drawer ------------------- */
#sidebar .ssf { margin-bottom: 24px; }
.ssf-inline .ssf-open, .ssf-inline .ssf-close, .ssf-inline .ssf-backdrop { display: none !important; }

/* ---- Phones: "Filters" button above the products --------------------------- */
.ssf-mobile-trigger { display: none; }
.ssf.ssf-moved .ssf-open { display: none !important; }
@media (max-width: 999px) {
	.ssf-mobile-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		margin: 0 0 16px;
		padding: 12px 16px !important;
		border: 1px solid #0073aa !important;
		border-radius: 999px !important;
		background: #fff !important;
		color: #0073aa !important;
		font-size: 15px !important;
		font-weight: 700;
		line-height: 1.2 !important;
		cursor: pointer;
		box-shadow: none !important;
	}
	/* In the shop header, next to the sort dropdown. */
	.nectar-shop-header .ssf-mobile-trigger { width: auto; flex: 1 1 0; margin: 0; padding: 10px 14px !important; font-size: 14px !important; border-radius: 6px !important; min-height: 42px; }
	.ssf-mobile-trigger .ssf-badge {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
		background: #0073aa; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
	}
}

/* ---- Mobile drawer ------------------------------------------------------- */
@media (max-width: 999px) {
	.ssf:not(.ssf-inline) .ssf-open {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		justify-content: center;
		padding: 12px 16px !important;
		border: 1px solid var(--ssf-accent) !important;
		border-radius: 999px !important;
		background: #fff !important;
		color: var(--ssf-accent) !important;
		font-weight: 700;
		font-size: 15px !important;
		cursor: pointer;
	}
	.ssf:not(.ssf-inline) .ssf-open .ssf-badge { margin-left: 0; }
	.ssf:not(.ssf-inline) .ssf-form {
		position: fixed;
		z-index: 100000;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(88vw, 380px);
		border: 0;
		border-radius: 0 var(--ssf-radius) var(--ssf-radius) 0;
		display: flex;
		flex-direction: column;
		transform: translateX(-105%);
		transition: transform .25s ease;
		box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
		visibility: hidden;
	}
	.ssf:not(.ssf-inline).is-open .ssf-form { transform: none; visibility: visible; }
	.ssf:not(.ssf-inline) .ssf-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
	.ssf:not(.ssf-inline) .ssf-close {
		display: block;
		background: none !important;
		border: 0;
		font-size: 28px !important;
		line-height: 1;
		padding: 0 4px !important;
		color: var(--ssf-accent-dark) !important;
		cursor: pointer;
	}
	.ssf:not(.ssf-inline) .ssf-groups { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.ssf:not(.ssf-inline) .ssf-foot { display: block; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.ssf:not(.ssf-inline) .ssf-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 99999; background: rgba(10, 12, 25, .45); }
	html.ssf-drawer-open, html.ssf-drawer-open body { overflow: hidden; }

	/* Bigger touch targets in the sidebar on phones. */
	.ssf-options label { padding: 9px 8px; }
}

/* ---- Brand colours, pinned so the theme's green accent can't leak in ---------- */
.ssf .ssf-head { background: #005278 !important; border-bottom-color: #005278 !important; }
.ssf .ssf-head-icon { color: #fff !important; }
.ssf .ssf-title { color: #fff !important; }
.ssf .ssf-clear { background: transparent !important; border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; }
.ssf .ssf-clear:hover { background: #fff !important; border-color: #fff !important; color: #005278 !important; }
.ssf .ssf-close { color: #fff !important; }
.ssf .ssf-group > summary,
.ssf .ssf-group > summary:hover,
.ssf .ssf-group[open] > summary { color: #005278 !important; }
.ssf .ssf-options label,
.ssf .ssf-options label:hover,
.ssf .ssf-options label .ssf-name,
.ssf .ssf-options label:hover .ssf-name { color: #005278 !important; }
.ssf .ssf-more, .ssf .ssf-more:hover { color: #005278 !important; }
.ssf .ssf-unit, .ssf .ssf-dash { color: #005278; }
.ssf .ssf-options li[hidden], .ssf .ssf-more[hidden] { display: none !important; }