/* Yen's quality slider (yens-quality-slider.php). Uses the catalog's --yc-* tokens from catalog.css. */

/* Detail rows read Pearl type, Size, Color, Certificate, SKU, then the slider. */
.yens-rows:has(.yens-qs) { display: flex; flex-direction: column; }
.yens-rows:has(.yens-qs) .yens-row:last-child { border-bottom: 0; }
.yens-rows .yens-qs-row { order: 1; }
.yens-rows .yens-qs-row[hidden] { display: none; }
.yens-qs { order: 2; }

.yens-qs {
	display: flex; flex-direction: column; gap: 6px; padding: 16px 0 14px;
	border-top: 1px solid var(--yc-line); border-bottom: 1px solid var(--yc-line);
}
.yens-qs.is-bare { padding: 0; border-top: 0; }
.yens-qs.is-picks-only { padding-top: 6px; }
.yens-qs__head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
}
.yens-qs__head label { margin: 0; }
.yens-qs__read { font-family: var(--yc-display); font-size: 17px; letter-spacing: .02em; text-transform: none; color: var(--yc-ink); }

.yens-qs input[type="range"] {
	--yens-qs-pct: 100%;
	width: 100%; height: 28px; margin: 4px 0 0; padding: 0; border: 0;
	background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.yens-qs input[type="range"]::-webkit-slider-runnable-track {
	height: 4px; background: linear-gradient(to right, var(--yc-accent) var(--yens-qs-pct), #dad6d2 var(--yens-qs-pct));
}
.yens-qs input[type="range"]::-moz-range-track { height: 4px; background: #dad6d2; }
.yens-qs input[type="range"]::-moz-range-progress { height: 4px; background: var(--yc-accent); }
.yens-qs input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
	background: #fff; border: 2px solid var(--yc-accent); box-shadow: 0 1px 4px rgba(30, 40, 55, .25);
}
.yens-qs input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 2px solid var(--yc-accent); box-shadow: 0 1px 4px rgba(30, 40, 55, .25);
}
.yens-qs input[type="range"]:focus-visible { outline: 2px solid var(--yc-accent); outline-offset: 4px; }

.yens-qs__ticks { display: flex; justify-content: space-between; padding: 0 8px; margin-top: -4px; }
.yens-qs__ticks span { width: 6px; height: 6px; border-radius: 50%; background: #dad6d2; }
.yens-qs__ticks span.is-on { background: var(--yc-accent); }
.yens-qs__ends {
	display: flex; justify-content: space-between;
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--yc-muted);
}

/* A / B / C: pieces that share a tier. */
.yens-qs__picks {
	display: flex; align-items: center; gap: 14px; padding-top: 10px;
	font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
}
.yens-qs__picks[hidden] { display: none; }
.yens-qs__picks-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.yens-pdp .yens-qs__picks button {
	min-width: 42px; height: 38px; padding: 0 12px; margin: 0; cursor: pointer;
	font: inherit; font-size: 13px; letter-spacing: .08em;
	background: #fff !important; color: var(--yc-ink) !important; border: 1px solid var(--yc-line) !important;
}
.yens-pdp .yens-qs__picks button:hover { border-color: var(--yc-accent) !important; }
.yens-pdp .yens-qs__picks button[aria-pressed="true"] {
	background: var(--yc-accent) !important; color: #fff !important; border-color: var(--yc-accent) !important;
}
.yens-pdp .yens-qs__picks button:focus-visible { outline: 2px solid var(--yc-accent); outline-offset: 2px; }