/**
 * Shop Kit · Sort menu — the look (markup: sort-menu.php; behaviour: sort-menu.js).
 *
 * A quiet face "מיון: <value> ⌄"; a dropdown on desktop, a bottom sheet on the phone (≤992px, the kit's line). Square
 * corners, hairlines; the selected option is weight + a check, never a fill; the ring is :focus-visible only. The
 * floating panel may carry one soft shadow (a token: none by default). The defaults are declared on :where(:root) —
 * zero specificity — so a store's :root mapping wins in any load order (Love Pharm: assets/css/pdp.css, the listing
 * sort's values, so the two read as one control).
 */

:where(:root) {
	--sk-sort-ink: #1a1a1a;
	--sk-sort-muted: #6b6560;
	--sk-sort-line: #e2e2e2;
	--sk-sort-bg: #ffffff;
	--sk-sort-focus: #1a1a1a;                       /* keyboard focus ring */
	--sk-sort-scrim: rgba(26, 26, 26, 0.42);        /* the dim behind the phone's sheet */
	--sk-sort-size: 14px;                           /* the face and the dropdown's rows */
	--sk-sort-face-h: 32px;
	--sk-sort-drop: 8px;                            /* the face ↔ the dropdown's top edge */
	--sk-sort-w: 248px;                             /* the dropdown's minimum width */
	--sk-sort-row: 40px;                            /* one option, desktop */
	--sk-sort-row-narrow: 52px;                     /* one option, the phone's sheet */
	--sk-sort-size-narrow: 15px;
	--sk-sort-head: 56px;                           /* the sheet's head row */
	--sk-sort-sheet-h: 88dvh;
	--sk-sort-gutter-narrow: 16px;                  /* the sheet's side padding */
	--sk-sort-shadow: none;                         /* the dropdown's (a store may give it one soft shadow) */
	--sk-sort-sheet-shadow: none;                   /* the sheet's */
	--sk-sort-z: 30;                                /* the dropdown over the content beside it */
	--sk-sort-z-sheet: 100000;                      /* the sheet over a sticky header */
	--sk-sort-motion: 220ms;                        /* fade + 4px drop / the sheet's slide; sort-menu.js reads it (a test sets 0ms) */
}

.sk-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--sk-sort-face-h);
}
.sk-sort__ico {
	display: block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* the face: "מיון:" muted, the value ink, the chevron muted; no box */
.sk-sort__face {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--sk-sort-face-h);
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sk-sort-ink) !important;
	font: inherit;
	font-size: var(--sk-sort-size);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
.sk-sort__label {
	color: var(--sk-sort-muted);
}
.sk-sort__label::after {
	content: ":";
}
.sk-sort__face .sk-sort__ico--chevron {
	color: var(--sk-sort-muted);
	transition: transform var(--sk-sort-motion);
}
.sk-sort__face[aria-expanded="true"] .sk-sort__ico--chevron {
	transform: rotate(180deg);
}
.sk-sort__face:focus-visible,
.sk-sort__close:focus-visible {
	outline: 2px solid var(--sk-sort-focus);
	outline-offset: 2px;
}
.sk-sort__face:focus:not(:focus-visible),
.sk-sort__opt:focus:not(:focus-visible),
.sk-sort__close:focus:not(:focus-visible),
.sk-sort__panel:focus {
	outline: none;
}

/* desktop: a dropdown hanging from the face */
.sk-sort__menu {
	position: absolute;
	z-index: var(--sk-sort-z);
	top: calc(100% + var(--sk-sort-drop));
	inset-inline-start: 0;
	min-width: var(--sk-sort-w);
	padding: 8px 0;
	border: 1px solid var(--sk-sort-line);
	background: var(--sk-sort-bg);
	box-shadow: var(--sk-sort-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--sk-sort-motion) ease-out, transform var(--sk-sort-motion) ease-out, visibility 0s linear var(--sk-sort-motion);
}
.sk-sort--end .sk-sort__menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}
.sk-sort__menu.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.sk-sort__scrim,
.sk-sort__head {
	display: none;
}
.sk-sort__list,
.sk-sort__list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.sk-sort__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--sk-sort-row);
	margin: 0;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sk-sort-ink) !important;
	font: inherit;
	font-size: var(--sk-sort-size);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: start;
	text-decoration: none !important;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
.sk-sort__opt:focus-visible {
	outline: 2px solid var(--sk-sort-focus);
	outline-offset: -2px;
}
.sk-sort__opt .sk-sort__ico--check {
	stroke-width: 2;
	visibility: hidden;
}
/* selected = weight and a check, never a fill (the store's rule for a selected state) */
.sk-sort__opt[aria-checked="true"] {
	font-weight: 600;
}
.sk-sort__opt[aria-checked="true"] .sk-sort__ico--check {
	visibility: visible;
}
/* hover = the system's cue, a thin underline under the name; only where the pointer hovers (on touch it sticks) */
@media (hover: hover) {
	.sk-sort__face:hover .sk-sort__value,
	.sk-sort__opt:hover .sk-sort__name {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}
}

/* the phone: a bottom sheet over everything (sort-menu.js moves the menu into <body> while it is open) */
@media (max-width: 992px) {
	.sk-sort--compact .sk-sort__label::after {
		content: none;
	}
	.sk-sort--compact .sk-sort__value {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sk-sort__menu {
		position: fixed;
		inset: 0;
		z-index: var(--sk-sort-z-sheet);
		display: none;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.sk-sort__menu.is-open {
		display: block;
	}
	.sk-sort__scrim {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--sk-sort-scrim);
		opacity: 0;
		transition: opacity var(--sk-sort-motion) ease;
		cursor: default;
	}
	.sk-sort__panel {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: var(--sk-sort-sheet-h);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--sk-sort-bg);
		box-shadow: var(--sk-sort-sheet-shadow);
		transform: translateY(100%);
		transition: transform var(--sk-sort-motion) ease;
	}
	.sk-sort__menu.is-visible .sk-sort__scrim {
		opacity: 1;
	}
	.sk-sort__menu.is-visible .sk-sort__panel {
		transform: none;
	}
	.sk-sort__head {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 14px;
		min-height: var(--sk-sort-head);
		padding: 0 var(--sk-sort-gutter-narrow);
		border-bottom: 1px solid var(--sk-sort-line);
	}
	.sk-sort__title {
		margin: 0;
		color: var(--sk-sort-ink);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
	}
	.sk-sort__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		margin-inline-start: auto;
		margin-inline-end: -10px;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--sk-sort-ink) !important;
		cursor: pointer;
	}
	.sk-sort__close .sk-sort__ico {
		width: 20px;
		height: 20px;
	}
	.sk-sort__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0 var(--sk-sort-gutter-narrow) 8px !important;
	}
	.sk-sort__list li + li {
		border-top: 1px solid var(--sk-sort-line);
	}
	.sk-sort__opt {
		min-height: var(--sk-sort-row-narrow);
		padding: 0 !important;
		font-size: var(--sk-sort-size-narrow);
	}
	.sk-sort__opt .sk-sort__ico--check {
		width: 16px;
		height: 16px;
	}
}
/* the page under an open sheet stays still */
html.sk-sort-lock,
html.sk-sort-lock body {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.sk-sort__menu,
	.sk-sort__panel,
	.sk-sort__scrim,
	.sk-sort__ico--chevron {
		transition: none !important;
	}
}