/*
 * CIZELE — Connected Ring Builder.
 *   .czbs  step spine (fixed, below the header)  — where am I / what is done / what is left
 *   .czb   summary tray (fixed, bottom)          — what I have chosen + the one next action
 *   .czc   Create page (Start choice + Review frame)
 *   .czrv  Review recap (piece + specification + enquiry)
 *   build-mode affordances on the existing cards (.czrb-card--select, .cz-df-card--select)
 *
 * REGISTER — this is PRODUCT UI, not a brand surface. The visitor is in a task, and the chrome exists
 * to serve it. That decides everything below and is why this file looks different from the theme's
 * marketing pages:
 *   · Sans throughout. Cormorant is our voice, but a display serif in a step label or a button is a
 *     product-UI tell — the jewellery is the only thing here allowed to be expressive.
 *   · A fixed rem scale, not clamp(). Fluid type serves a hero; in chrome it just makes labels
 *     wobble between breakpoints for no gain.
 *   · 150-200ms transitions. The visitor is in flow and should never wait for choreography.
 *   · Solid surfaces with real 1px borders — not backdrop blur. Glass reads as decoration and it
 *     puts the jewellery photography behind a scrim it did not ask for.
 *   · One accent. Champagne/gold marks the current step, a completed step and a selected control.
 *     Nothing else in the chrome is allowed to be gold.
 *
 * No price anywhere. Honors reduced-motion; every control has a visible :focus-visible state.
 */

/* Semantic z-index scale — named layers, no arbitrary 9990s. */
.czbs, .czb { --z-spine: 45; --z-tray: 46; }

/* Lucide icons (inc/icons.php). Inline SVG, so they take their colour from the text beside them and
   never need their own colour rule. `flex-shrink:0` because an icon in a flex row is the one thing
   that must not squash when the label is long. */
.czi { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

.czbs, .czb, .czc {
	/* Chrome surfaces, one step off the page ground so the rails read as chrome, not as content. */
	--czb-surface: #16111B;
	--czb-line: rgba(231, 214, 182, .14);
	--czb-line-strong: rgba(231, 214, 182, .3);
	--czb-ink: #EDE7EC;
	--czb-ink-mut: #A79BA5;
	--czb-accent: #E7D6B6;
	--czb-t: 180ms;
	--czb-e: cubic-bezier(.4, 0, .2, 1);
}

/* ============================ step spine ============================ */
/* Fixed directly beneath the site header (base.css `.cz-head`: position:fixed, 80px at every width).
   Sticky top:0 would slide under it; putting it in the flow would push the full-bleed heroes down
   and open a dark strip above them. Sits BELOW the header's z-index so the menu drawer still wins. */
.czbs {
	position: fixed; top: 80px; left: 0; right: 0; z-index: var(--z-spine);
	background: var(--czb-surface);
	border-bottom: 1px solid var(--czb-line);
}
.czbs__inner {
	width: min(var(--wrap, 1440px), 100% - 2 * var(--gut, 24px));
	margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.czbs__steps {
	display: flex; align-items: stretch; gap: clamp(.5rem, 2.5vw, 2.5rem);
	list-style: none; margin: 0; padding: 0; min-width: 0;
}
.czbs__step { min-width: 0; }
.czbs__hit {
	display: flex; align-items: center; gap: .625rem;
	padding: .875rem .25rem; min-height: 52px;
	font-family: var(--sans, system-ui, sans-serif);
	color: var(--czb-ink-mut); text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--czb-t) var(--czb-e), border-color var(--czb-t) var(--czb-e);
}
.czbs__hit:hover { color: var(--czb-ink); }
.czbs__hit:focus-visible {
	outline: 2px solid var(--czb-accent); outline-offset: -2px; border-radius: 2px; color: var(--czb-ink);
}
/* The step marker. A number while pending, a check once done — no filled disc, no ring: at 14px a
   circle around a numeral is noise, and the check alone is unambiguous. */
.czbs__n {
	flex: 0 0 auto; width: 18px; height: 18px;
	display: grid; place-items: center;
	font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums;
	color: currentColor;
}
.czbs__b { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.czbs__k { font-size: .75rem; font-weight: 400; color: var(--czb-ink-mut); }
.czbs__l { font-size: .875rem; font-weight: 500; letter-spacing: -.005em; color: inherit; }
/* What was actually chosen — the single most useful thing this bar can carry. */
.czbs__v {
	font-size: .75rem; color: var(--czb-accent);
	max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding-left: .625rem; border-left: 1px solid var(--czb-line);
}
.czbs__v[hidden] { display: none; }

.czbs__step.is-current .czbs__hit { color: var(--czb-ink); border-bottom-color: var(--czb-accent); }
.czbs__step.is-current .czbs__l { color: var(--czb-accent); }
.czbs__step.is-done .czbs__n { color: var(--czb-accent); }
.czbs__step.is-done .czbs__n .czi { width: 16px; height: 16px; }
/* Disabled, and honest about it — a link to an empty summary is a dead end dressed as progress. */
.czbs__hit.is-locked { opacity: .4; pointer-events: none; }

.czbs__reset {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	font-family: var(--sans, system-ui, sans-serif); font-size: .8125rem; font-weight: 400;
	color: var(--czb-ink-mut);
	padding: .75rem .25rem; min-height: 44px;
	transition: color var(--czb-t) var(--czb-e);
}
.czbs__reset:hover { color: var(--czb-ink); }
.czbs__reset:focus-visible { outline: 2px solid var(--czb-accent); outline-offset: 2px; border-radius: 2px; }

/* ============================ summary tray ============================ */
.czb {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tray);
	background: var(--czb-surface);
	color: var(--czb-ink);
	border-top: 1px solid var(--czb-line);
	padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom, 0));
	font-family: var(--sans, system-ui, sans-serif);
}
.czb[hidden] { display: none; }
.czb-inner {
	width: min(var(--wrap, 1440px), 100% - 2 * var(--gut, 24px));
	margin-inline: auto;
	display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
}
.czb-items { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex: 1 1 auto; min-width: 0; }
.czb-item { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.czb-item__thumb {
	flex: 0 0 auto; width: 44px; height: 44px; overflow: hidden;
	background: #100C13; border: 1px solid var(--czb-line);
	display: grid; place-items: center;
}
.czb-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Empty slot: a muted outline of what goes here, not a coloured glow. */
.czb-item__ph { display: grid; place-items: center; color: var(--czb-ink-mut); opacity: .55; }
.czb-item__ph .czi { width: 20px; height: 20px; }
.czb-item__txt { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.czb-item__k { font-size: .6875rem; font-weight: 500; letter-spacing: .04em; color: var(--czb-ink-mut); }
.czb-item__v {
	font-size: .875rem; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch;
}
.czb-item:not(.is-filled) .czb-item__v { color: var(--czb-ink-mut); font-weight: 400; }
.czb-item__s { font-size: .75rem; color: var(--czb-ink-mut); white-space: nowrap; }
.czb-item__x {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	color: var(--czb-ink-mut);
	width: 32px; height: 32px; display: grid; place-items: center; border-radius: 2px;
	transition: color var(--czb-t) var(--czb-e), background-color var(--czb-t) var(--czb-e);
}
.czb-item__x:hover { color: var(--czb-ink); background: rgba(255, 255, 255, .06); }
.czb-item__x:focus-visible { outline: 2px solid var(--czb-accent); outline-offset: 1px; }

.czb-metalgroup { display: flex; align-items: center; gap: .625rem; flex: 0 0 auto; }
.czb-metallab { font-size: .6875rem; font-weight: 500; letter-spacing: .04em; color: var(--czb-ink-mut); }
.czb-metals { display: inline-flex; gap: .375rem; }
/* Selection is carried by a ring AND a check, never by colour alone — these three swatches are
   distinguishable by hue only, which fails for a colour-blind visitor. */
.czb-metal {
	position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	transition: box-shadow var(--czb-t) var(--czb-e);
}
.czb-metal.is-on { box-shadow: 0 0 0 2px var(--czb-surface), 0 0 0 3px var(--czb-accent); }
.czb-metal.is-on::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 9px; height: 5px; border: 1.5px solid rgba(20, 12, 18, .82);
	border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
}
.czb-metal:focus-visible { outline: 2px solid var(--czb-accent); outline-offset: 3px; }

.czb-actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; margin-left: auto; }
.czb-next { font-size: .8125rem; color: var(--czb-ink-mut); }

/* Keep page content clear of the fixed tray. */
body:has(.czb:not([hidden])) { padding-bottom: 92px; }

/* ============================ build-mode card affordances ============================ */
.czrb-card--select .czrb-card__cta,
.cz-df-card--select .cz-df-cardcta { color: var(--gold, #c9a86a); font-weight: 600; }
.czrb-card--select:hover { outline: 1px solid var(--gold, #c9a86a); outline-offset: 3px; }
.cz-df-card--select:hover { outline: 1px solid var(--gold, #c9a86a); outline-offset: 3px; }
.czrb-card--select:focus-visible,
.cz-df-card--select:focus-visible { outline: 2px solid var(--gold, #c9a86a); outline-offset: 3px; }
.czrb-card__seed {
	position: absolute; top: .6rem; left: .6rem; z-index: 2;
	font-size: .6875rem; letter-spacing: .04em;
	background: rgba(22, 17, 27, .88); color: var(--czb-accent);
	padding: .25rem .5rem; border-radius: 2px;
}
.czrb-card__media { position: relative; }

/* build-mode empty state: teaches the escape route, never "no results" */
.czrb-bespoke {
	grid-column: 1 / -1; text-align: center; max-width: 46ch; margin: clamp(1.5rem, 5vw, 3.5rem) auto;
	display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.czrb-bespoke__h { font-family: var(--serif, "Cormorant Garamond", serif); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--plum-deep, #2e1726); }
.czrb-bespoke__m { color: #5f5560; line-height: 1.65; }

/* ============================ Create page ============================ */
.czc { background: var(--ivory, #f7f3ed); color: var(--plum-deep, #2e1726); min-height: 60vh; }
.czc-start__inner, .czc-review__inner {
	width: min(var(--wrap, 1440px), 100% - 2 * var(--gut, 24px));
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 7rem) 0;
	text-align: center;
}
/* The start screen is a decision, not a page to read: it gets a tighter frame and a narrower measure
   so the two doors sit together in one view rather than spanning the full 1440.
   The 80px top offset clears the site header, which is `position:fixed` and therefore out of flow —
   without it the h1 renders underneath the nav bar. (The review screen adds a further 56px for the
   step spine; this screen deliberately has no spine, so 80 is the whole allowance.) */
.czc-start__inner {
	max-width: 1100px;
	padding-block: calc(80px + clamp(2rem, 4vw, 3rem)) clamp(3rem, 6vw, 4.5rem);
}
.czc-review__inner { text-align: left; max-width: 1080px; }
/* The element is named in the selector on purpose. base.css sets `.cz h1{font-size:var(--h1)}` at
   specificity (0,1,1); a class-only rule (0,1,0) loses regardless of load order, and the heading
   silently renders at the ~120px homepage-hero size. Same trap already documented for the Guide. */
.cz h1.czc-start__h, .cz h1.czc-review__h {
	font-family: var(--serif, "Cormorant Garamond", serif);
	font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.06;
	letter-spacing: -.02em; text-wrap: balance;
	margin: .25rem 0 1rem; color: var(--plum-deep, #2e1726);
}
/* A recap is a confirmation, not a hero. */
.cz h1.czc-review__h { font-size: 1.75rem; letter-spacing: -.01em; margin-bottom: 1.75rem; }
.czc-start__lede {
	max-width: 60ch; margin: 0 auto 2.5rem; color: #5f5560;
	font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty;
}
/* The two doors. Photography leads: a choice between two pictures is easier to make than a choice
   between two abstract nouns, and this is the one screen where the visitor has not yet seen anything
   we make. The frame is a single hairline — the photograph provides the edge, the border only makes
   the whole panel legible as one clickable object. */
.czc-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); text-align: left; }
.czc-door {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid rgba(46, 23, 38, .12);
	text-decoration: none; color: inherit; overflow: hidden;
	transition: border-color var(--czb-t) var(--czb-e), box-shadow var(--czb-t) var(--czb-e);
}
.czc-door:hover { border-color: rgba(46, 23, 38, .3); box-shadow: 0 1px 3px rgba(46, 23, 38, .06); }
.czc-door:focus-visible { outline: 2px solid var(--plum, #5e3450); outline-offset: 2px; }
/* 16/10, not a portrait crop. Measured at 1440x900: a 6/5 panel made each image ~550px tall and
   pushed both door titles and the whole reassurance line below the fold — the visitor saw two
   photographs and no way to tell what either one was for. The choice must be complete in one view. */
/* ONE GROUND FOR BOTH DOORS.
   The stone photograph's own backdrop is a flat, uniform #CACDD4 (sampled at all four corners), so
   adopting that exact colour as the tile background makes the photo blend edge to edge with no seam,
   and lets the ring cut-out float on the identical surface beside it. The pair now reads as two
   objects photographed in the same studio rather than two images borrowed from different places —
   which was the actual problem, not the crop or the copy. */
.czc-door__media {
	aspect-ratio: 16 / 10; overflow: hidden; background: #CACDD4;
	display: grid; place-items: center;
}
/* BOTH images are contained, not cropped. Cover made the stone a full-bleed macro next to a ring
   sitting politely in the middle of its frame — same ground, but wildly different scale, so the pair
   still read as unrelated. Contained, each is an object resting on the shared surface at a comparable
   size. This only works because the tile background is the stone photo's own colour: the letterboxed
   area blends invisibly instead of showing bars. */
.czc-door__media img {
	width: 100%; height: 100%; object-fit: contain; padding: 5%;
	transition: transform 600ms var(--czb-e);
}
/* The setting door uses a background-free render, so it is contained on the shared ground rather than
   cropped. Padding is asymmetric on purpose: these renders sit low in their own frame, and even
   padding left the ring floating high with dead space beneath it. */
.czc-door--cutout .czc-door__media img { object-fit: contain; padding: 8% 12% 6%; }
/* 1.5%: enough to acknowledge the pointer, not enough to feel like a shop. */
.czc-door:hover .czc-door__media img { transform: scale(1.015); }
.czc-door__ph { color: #a2949f; }
.czc-door__body { display: flex; flex-direction: column; gap: .375rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.czc-door__k { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 1.5rem; line-height: 1.2; color: var(--plum-deep, #2e1726); }
.czc-door__d { font-family: var(--sans, system-ui, sans-serif); font-size: .9375rem; color: #5f5560; line-height: 1.6; text-wrap: pretty; }
.czc-door__cta {
	margin-top: .5rem; display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--sans, system-ui, sans-serif); font-size: .875rem; font-weight: 500;
	color: var(--plum, #5e3450);
}
.czc-door__cta .czi { transition: transform var(--czb-t) var(--czb-e); }
.czc-door:hover .czc-door__cta .czi { transform: translateX(3px); }

/* Reassurance, and the third way out for someone who does not want to browse at all. */
.czc-start__note {
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; max-width: 60ch;
	font-family: var(--sans, system-ui, sans-serif); font-size: .875rem; color: #5f5560;
}
/* The link is one phrase and must not break across lines ("Or / let a designer guide you" read as two
   fragments); it wraps as a whole unit instead. */
.czc-start__note a {
	color: var(--plum, #5e3450); text-decoration: underline; text-underline-offset: 3px;
	margin-left: .35rem; display: inline-block;
}
.czc-start__note a:hover { color: var(--plum-deep, #2e1726); }

/* ============================ Review recap ============================ */
/* The piece at full size on the left, its specification on the right. Two product cards side by side
   (the earlier layout) kept the visitor in shopping mode at the exact moment the decision is done. */
.czrv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.czrv-stage {
	aspect-ratio: 1 / 1; background: #fff;
	border: 1px solid rgba(46, 23, 38, .1); overflow: hidden;
	display: grid; place-items: center;
}
.czrv-stage img { width: 100%; height: 100%; object-fit: cover; }
.czrv-ph { display: block; width: 100%; height: 100%; background: #f1ebe3; }

.czrv-spec { font-family: var(--sans, system-ui, sans-serif); }
.czrv-rows { display: flex; flex-direction: column; }
.czrv-row {
	display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 1rem;
	padding: 1rem 0; border-bottom: 1px solid rgba(46, 23, 38, .12);
}
.czrv-row:first-child { border-top: 1px solid rgba(46, 23, 38, .12); }
.czrv-row__thumb {
	width: 52px; height: 52px; overflow: hidden; background: #f1ebe3;
	border: 1px solid rgba(46, 23, 38, .08); display: grid; place-items: center;
}
.czrv-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.czrv-row__txt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.czrv-row__k { font-size: .6875rem; font-weight: 500; letter-spacing: .04em; color: #7a7078; }
.czrv-row__t { font-size: 1rem; font-weight: 500; color: var(--plum-deep, #2e1726); }
.czrv-row:not(.is-filled) .czrv-row__t { color: #7a7078; font-weight: 400; }
.czrv-row__s { font-size: .8125rem; color: #5f5560; }
.czrv-row__edit {
	display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: .5rem 0;
	font-size: .8125rem; font-weight: 500; color: var(--plum, #5e3450);
	transition: color var(--czb-t) var(--czb-e);
}
.czrv-row__edit:hover { color: var(--plum-deep, #2e1726); text-decoration: underline; }
.czrv-row__edit:focus-visible { outline: 2px solid var(--plum, #5e3450); outline-offset: 2px; border-radius: 2px; }

.czrv-meta { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1.75rem; }
.czrv-metal-lab { font-size: .6875rem; font-weight: 500; letter-spacing: .04em; color: #7a7078; }
.czrv-meta .czb-metal { border-color: rgba(46, 23, 38, .22); }
.czrv-meta .czb-metal.is-on { box-shadow: 0 0 0 2px #f7f3ed, 0 0 0 3px var(--plum, #5e3450); }
.czrv-metal-name { font-size: .875rem; font-weight: 500; color: var(--plum-deep, #2e1726); }
.czrv-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.czrv-say { max-width: 46ch; margin: 1.25rem 0 0; color: #5f5560; font-size: .875rem; line-height: 1.65; text-wrap: pretty; }

/* ============================ responsive ============================ */
@media (max-width: 900px) {
	.czrv { grid-template-columns: 1fr; }
	.czrv-stage { aspect-ratio: 4 / 3; }
	.czc-doors { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	/* Spine: numerals plus the current step's label only. Three full labels cannot fit at 390px
	   without wrapping into a stack that is harder to read than no labels at all. */
	.czbs__inner { gap: .5rem; }
	.czbs__steps { gap: .25rem; flex: 1 1 auto; }
	.czbs__hit { gap: .375rem; padding: .75rem .125rem; min-height: 48px; }
	.czbs__k, .czbs__v { display: none; }
	.czbs__step:not(.is-current) .czbs__b { display: none; }
	.czbs__reset { font-size: .75rem; }

	/* Tray: two rows. Chosen pieces on top, the action full width beneath — thumb-reachable. */
	.czb-inner { flex-wrap: wrap; gap: .625rem 1rem; }
	.czb-items { order: 1; flex: 1 1 100%; justify-content: flex-start; gap: 1.25rem; }
	.czb-item__thumb { width: 40px; height: 40px; }
	.czb-item__v { font-size: .8125rem; max-width: 11ch; }
	.czb-item__s { display: none; }
	.czb-metalgroup { order: 2; flex: 0 0 auto; }
	.czb-actions { order: 3; flex: 1 1 auto; margin-left: 0; justify-content: flex-end; }
	.czb-actions .cz-btn { flex: 1 1 auto; justify-content: space-between; }
	body:has(.czb:not([hidden])) { padding-bottom: 148px; }

	.czrv-row { grid-template-columns: 44px 1fr; grid-template-areas: "thumb txt" "edit edit"; gap: .5rem 1rem; }
	.czrv-row__thumb { grid-area: thumb; width: 44px; height: 44px; }
	.czrv-row__txt { grid-area: txt; }
	.czrv-row__edit { grid-area: edit; justify-self: start; }
	.czrv-actions .cz-btn { flex: 1 1 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.czc-door, .czb-metal, .czbs__hit, .czb-item__x, .czrv-row__edit, .czc-door__cta .czi { transition: none; }
	.czc-door:hover .czc-door__cta .czi { transform: none; }
}