/* Variation UI — three sections, three different shapes, one identity.
 *
 * The point of this file is that the three axes do NOT look alike. A buyer should be
 * able to tell at a glance which question they are answering:
 *
 *   Dye Bench    round swatches, colour does the talking
 *   Gauge Rail   wide spec plates in a scrolling rail, ordered by aspect ratio
 *   Count Ledger full-width rows with a right-aligned mono price column
 *
 * Everything here is tokens-only (see tokens.css). No hardcoded colour.
 */

/* Woo's native selects stay in the DOM for cart logic and no-JS buyers.
   Only hide them once our JS has actually built the replacement. */
.variations_form.cj-var-ready .cj-var-native {
	position: absolute;
	/* A <table> ignores width:1px and keeps its content width — on the 317-variation ring
	   page the hidden table was still 1216px wide at left:744 and the document scrolled
	   sideways (found 2026-08-26 by audit/shot.py). Pin it to the corner and force the
	   fixed layout so the 1px width is honoured. */
	left: 0;
	top: 0;
	width: 1px;
	max-width: 1px;
	height: 1px;
	table-layout: fixed;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* min-width:0 all the way down. Without it the Gauge Rail's intrinsic width wins
   over the column and pushes the whole product summary past the page edge — the
   grid/flex "min-content floor" trap. The rail must scroll inside itself, never
   widen its parent. */
.cj-var {
	display: grid;
	gap: var(--space-xl);
	margin: 0 0 var(--space-xl);
	min-width: 0;
	max-width: 100%;
}

.cj-var-sec {
	border-top: var(--rule-hair) solid var(--color-rule);
	padding-top: var(--space-md);
	min-width: 0;
	max-width: 100%;
}

.cj-var-opts {
	min-width: 0;
	max-width: 100%;
}

.cj-var-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.cj-var-title {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0;
}

.cj-var-chosen {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-muted);
	text-align: right;
}

.cj-var-chosen.is-set {
	color: var(--color-ink);
}

.cj-opt {
	position: relative;
	cursor: pointer;
	background: var(--color-paper-2);
	border: var(--rule-hair) solid var(--color-rule);
	border-radius: var(--radius-md);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-align: left;
	transition:
		border-color var(--dur-micro) var(--ease-out),
		background var(--dur-micro) var(--ease-out),
		transform var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.cj-opt:not(:disabled):hover {
		border-color: var(--color-accent);
		transform: translateY(-1px);
	}
}

.cj-opt:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.cj-opt.is-selected {
	border-color: var(--color-accent);
	background: var(--color-paper-3);
	box-shadow: var(--panel-shadow);
}

.cj-opt.is-unavailable,
.cj-opt:disabled {
	cursor: not-allowed;
	opacity: 0.32;
}

/* A struck-through plate reads as "gone" faster than dimming alone. */
.cj-opt.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		var(--color-rule-strong) calc(50% - 1px),
		var(--color-rule-strong) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	border-radius: inherit;
	pointer-events: none;
}

/* ============ 0 · product art ============ =
 *
 * Both the Gauge Rail and the Count Ledger carry a photo of the actual rings, cut
 * from the variation Woo already knows about. Shared frame here; the two sections
 * shape it differently below because they are saying different things with it —
 * the rail says "this is what this size looks like", the ledger says "this is how
 * much of it you get".
 *
 * No art, no frame: a chip whose variation has no photo simply loses the element
 * rather than showing an empty box.
 */

.cj-art {
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--color-paper-3);
	box-shadow: 0 0 0 1px var(--color-rule);
}

.cj-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cj-opt:not(.has-art) .cj-art {
	display: none;
}

.cj-opt.is-selected .cj-art {
	box-shadow: 0 0 0 1px var(--color-gold-hi);
}

/* ============ 1 · the Dye Bench ============ */

.cj-var-sec--color .cj-var-opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.cj-opt--color {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
	border-radius: 999px;
}

.cj-swatch {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	flex: 0 0 auto;
	/* Anodized aluminium is metal: a highlight arc and an inner shadow sell that
	   far better than a flat disc, and it keeps pale colours visible on the void. */
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.45),
		inset 0 -2px 3px rgba(0, 0, 0, 0.45),
		0 0 0 1px var(--color-rule);
}

.cj-swatch--unknown {
	background:
		repeating-linear-gradient(
			45deg,
			var(--color-paper-3) 0 4px,
			var(--color-paper-2) 4px 8px
		);
}

.cj-opt--color.is-selected .cj-swatch {
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.45),
		inset 0 -2px 3px rgba(0, 0, 0, 0.45),
		0 0 0 2px var(--color-gold-hi);
}

.cj-opt-label {
	white-space: nowrap;
}

/* ============ 2 · the Gauge Rail ============ */

.cj-var-sec--size .cj-var-opts {
	display: flex;
	gap: var(--space-sm);
	overflow-x: auto;
	padding-bottom: var(--space-xs);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	/* The rail is the one place horizontal scrolling is wanted — but only here. */
	min-width: 0;
	max-width: 100%;
}

/* Photo first, then the numbers. Every ring photo is shot at the same distance, so
   scrolling the rail is watching the rings go from sand to hoops — the size axis
   showing itself rather than being described. */
.cj-opt--size {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	flex: 0 0 auto;
	min-width: 11rem;
	padding: var(--space-sm) var(--space-md);
	scroll-snap-align: start;
}

/* Capped, not just floored. A plate sizes itself to the longest weave hint, and
   adding the photo pushed every one of them ~60px wider — twenty of those turns
   the rail into nine screens of scrolling. The cap makes the hint wrap instead. */
.cj-opt--size.has-art {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-sm);
	min-width: 14rem;
	max-width: 16.5rem;
}

.cj-spec-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cj-spec-thumb {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-md);
}

.cj-spec-line {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.cj-spec-gauge {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-ink);
}

.cj-spec-id {
	font-size: var(--text-xs);
	color: var(--color-ink-2);
}

.cj-spec-ar {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.cj-spec-ar-k {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--color-muted);
}

.cj-spec-ar-v {
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1;
	color: var(--color-accent);
}

.cj-opt--size.is-selected .cj-spec-ar-v {
	color: var(--color-quest);
}

.cj-spec-weave {
	font-size: var(--text-xs);
	line-height: 1.3;
	color: var(--color-muted);
	white-space: normal;
}

/* ============ 3 · the Count Ledger ============ */

.cj-var-sec--pack .cj-var-opts {
	display: grid;
	gap: var(--space-xs);
}

.cj-opt--pack {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: var(--space-xs) var(--space-md);
	padding: var(--space-sm) var(--space-md);
}

/* The heap. Its diameter is set inline from the real weight (area = ounces), and
   the gutter is a fixed width for all three rows so the discs share one centre
   line — that alignment is the only reason the sizes compare at a glance. */
.cj-opt--pack.has-art {
	grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
}

.cj-pack-heap {
	--cj-heap: 2rem;
	width: var(--cj-heap);
	height: var(--cj-heap);
	border-radius: 50%;
	align-self: center;
	justify-self: center;
}

.cj-pack-name {
	font-size: var(--text-base);
	color: var(--color-ink);
}

.cj-pack-oz {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-muted);
	justify-self: end;
}

.cj-pack-price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-accent);
	justify-self: end;
}

/* The number nobody else prints. Spans the row so it reads as the verdict
   on the row above it, not as another column of noise. */
.cj-pack-unit {
	grid-column: 1 / -1;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-xs);
	color: var(--color-muted);
}

/* Skip the heap gutter so the verdict line sits under the pack name. */
.cj-opt--pack.has-art .cj-pack-unit {
	grid-column: 2 / -1;
}

.cj-opt--pack.is-selected .cj-pack-unit {
	color: var(--color-ink-2);
}

/* Cheapest per ring for the current colour + spec. Called out even when it is the
   small pack — the pitch is honest counts, not upselling the biggest bag. */
.cj-opt--pack.is-best .cj-pack-unit::after {
	content: "best per ring";
	margin-left: var(--space-xs);
	padding: 1px var(--space-xs);
	border: var(--rule-hair) solid var(--color-accent);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-quest);
	white-space: nowrap;
}

/* ============ plain fallback ============ */

.cj-var-sec--plain .cj-var-opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.cj-opt--plain {
	padding: var(--space-xs) var(--space-md);
}

@media (max-width: 640px) {
	.cj-opt--size {
		min-width: 9.5rem;
	}

	.cj-opt--size.has-art {
		min-width: 12rem;
	}

	.cj-spec-thumb {
		width: 2.75rem;
		height: 2.75rem;
	}

	.cj-opt--pack.has-art {
		grid-template-columns: 3rem minmax(0, 1fr) auto auto;
	}

	.cj-var-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2xs);
	}

	.cj-var-chosen {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cj-opt {
		transition: none;
	}

	.cj-opt:not(:disabled):hover {
		transform: none;
	}
}