/*
 * CIZELE — Engagement discovery: the live Ring Browser (.czrb) + discovery layers.
 * Scoped under .czrb. Uses design-system tokens (base.css). No price anywhere.
 *
 * Product-first composition (benchmarked against Cullen): the jewellery photography dominates —
 * large 4:5 cards, ~3 per row at desktop, generous gaps. Functional filters live in a premium
 * off-canvas drawer so they never compete with the catalogue; the toolbar stays restrained
 * (count · Filters · Sort). Full-bleed ivory surface, self-contained wherever it is mounted.
 */

.czrb {
	--czrb-surface: var(--ivory, #f7f3ed);
	--czrb-ink: var(--plum-deep, #2e1726);
	--czrb-mut: #7a6f78;
	--czrb-line: rgba(46, 23, 38, .14);
	--czrb-accent: var(--plum, #5e3450);
	background: var(--czrb-surface);
	color: var(--czrb-ink);
	margin-inline: calc(50% - 50vw);
}

/* Centred content column with intentional luxury margins (mirrors --wrap/--gut). */
.czrb-inner {
	max-width: var(--wrap, 1440px);
	margin-inline: auto;
	padding: clamp(2.6rem, 6vw, 4.6rem) var(--gut, 2rem);
}

/* ---- toolbar (restrained: count · Filters · Sort) ---- */
.czrb-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--czrb-line);
}
.czrb-count {
	margin: 0;
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 400;
	letter-spacing: .01em;
}
.czrb-toolbar__actions { display: flex; align-items: center; gap: .7rem; }

.czrb-filterbtn,
.czrb-sort {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: transparent;
	border: 1px solid var(--czrb-line);
	border-radius: var(--r-pill, 999px);
	padding: .62rem 1.15rem;
	font: inherit;
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--czrb-ink);
	cursor: pointer;
	transition: border-color .25s var(--e, ease), background-color .25s var(--e, ease);
}
.czrb-filterbtn:hover { border-color: var(--czrb-accent); }
.czrb-filterbtn__n {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
	border-radius: 999px;
	background: var(--czrb-accent); color: #fff;
	font-size: .68rem; line-height: 1;
}
.czrb-sortwrap { position: relative; }
.czrb-sort { appearance: none; padding-right: 2.3rem; }
.czrb-sortwrap::after {
	content: ""; position: absolute; right: 1.05rem; top: 50%;
	width: .5rem; height: .5rem;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .55;
}

/* ---- active chips (only when filters are set) ---- */
.czrb-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.2rem; }
.czrb-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	background: rgba(94, 52, 80, .08);
	border: 1px solid transparent;
	border-radius: var(--r-pill, 999px);
	padding: .4rem .85rem;
	font: inherit; font-size: .8rem;
	color: var(--czrb-accent);
	cursor: pointer;
}
.czrb-chip i { font-size: .72em; }
.czrb-chip--clear { background: transparent; text-decoration: underline; }

/* ---- results grid: the jewellery dominates ---- */
.czrb-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.6vw, 2.6rem) clamp(1.4rem, 2.2vw, 2.2rem);
	margin-top: 2rem;
	min-height: 50vh;
}
.czrb.is-loading .czrb-results { opacity: .5; transition: opacity .2s ease; }

.czrb-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.czrb-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-lg, 18px);
	background: #efe7db;
}
.czrb-card__media img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	transition: transform .9s var(--e, ease);
}
.czrb-card:hover .czrb-card__media img { transform: scale(1.045); }
/* Background-free renders (template-parts/ring-card.php adds .is-cutout when the design has one).
   No tint, no rounded tile, no crop: the ring sits on the page's own ground with room around it, and
   the grid stops looking like a wall of separate photographs. Contained rather than covered, because
   cropping a cut-out would slice the band. */
.czrb-card__media.is-cutout { background: transparent; border-radius: 0; }
.czrb-card__media.is-cutout img { object-fit: contain; padding: 6%; }
/* Photographs still take the zoom; a cut-out on a plain ground has no frame to move within, so the
   same 4.5% scale just makes it wobble. */
.czrb-card:hover .czrb-card__media.is-cutout img { transform: scale(1.015); }
.czrb-card__ph { position: absolute; inset: 0; background: linear-gradient(135deg, #efe7db, #e2d6c4); }

.czrb-card__body { display: flex; flex-direction: column; gap: .28rem; padding: 1.1rem .2rem 0; }
.czrb-card__name {
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(1.3rem, 1.7vw, 1.6rem);
	line-height: 1.12;
	letter-spacing: .005em;
}
.czrb-card__sub {
	font-size: .84rem;
	letter-spacing: .02em;
	color: var(--czrb-mut);
}
.czrb-card__metals { display: flex; gap: .35rem; margin-top: .45rem; }
.czrb-card__swatch {
	width: 14px; height: 14px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.czrb-card__cta {
	display: inline-flex; align-items: center; gap: .45rem;
	margin-top: .7rem;
	font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--czrb-accent);
}
.czrb-card__cta i { transition: transform .3s var(--e, ease); }
.czrb-card:hover .czrb-card__cta i { transform: translateX(4px); }

/* ---- load more ---- */
.czrb-loadmore { display: flex; justify-content: center; padding-top: 3rem; }

/* ---- empty state ---- */
.czrb-empty { text-align: center; padding: 4rem 1rem; }
.czrb-empty__t { font-family: var(--serif, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .7rem 0 .9rem; }
.czrb-empty__p { color: var(--czrb-mut); max-width: 48ch; margin: 0 auto 1.8rem; }
.czrb-empty__btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---- refine drawer (off-canvas) ---- */
.czrb-scrim {
	position: fixed; inset: 0; z-index: 9998; /* above the sticky site header so the modal fully overlays */
	background: rgba(20, 12, 16, .5);
	opacity: 0; transition: opacity .35s var(--e, ease);
}
.czrb-scrim.is-open { opacity: 1; }
.czrb-drawer {
	/* Deep-plum modal surface (our primary), a rich contrast to the ivory catalogue. Portaled to
	   <body>, so it sits outside .czrb — re-declare the palette here so the vars resolve. Grey
	   line-art icons (#6B6A72) are forced to light within the drawer for clear contrast (see below). */
	--czrb-surface: var(--plum-deep, #2e1726);
	--czrb-ink: var(--ivory, #f7f3ed);
	--czrb-mut: #c3b2bd;
	--czrb-line: rgba(255, 255, 255, .16);
	--czrb-accent: var(--champ, #e7d6b6);
	position: fixed; top: 0; right: 0; z-index: 9999;
	width: min(440px, 92vw); height: 100%;
	display: flex; flex-direction: column;
	background: var(--czrb-surface);
	color: var(--czrb-ink);
	box-shadow: -18px 0 60px rgba(20, 12, 16, .28);
	transform: translateX(100%);
	transition: transform .4s var(--e2, cubic-bezier(.62, .05, .01, .99));
	visibility: hidden;
}
.czrb-drawer.is-open { transform: translateX(0); visibility: visible; }
.czrb-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.5rem 1.7rem; border-bottom: 1px solid var(--czrb-line);
}
.czrb-drawer__title { font-family: var(--serif, Georgia, serif); font-size: 1.5rem; }
.czrb-drawer__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem;
	background: transparent; border: 1px solid var(--czrb-line); border-radius: 50%;
	color: inherit; cursor: pointer;
}
.czrb-drawer__foot {
	margin-top: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.3rem 1.7rem; border-top: 1px solid var(--czrb-line);
}
.czrb-drawer__clear { background: transparent; border: 0; font: inherit; font-size: .85rem; color: var(--czrb-accent); text-decoration: underline; cursor: pointer; }

/* ---- filters (inside the drawer) ---- */
.czrb-filters { flex: 1; overflow-y: auto; padding: 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 1.8rem; }
.czrb-group { display: flex; flex-direction: column; gap: .8rem; }
.czrb-group__label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--czrb-mut); }
.czrb-group__opts { display: flex; flex-wrap: wrap; gap: .55rem; }

.czrb-opt {
	display: inline-flex; align-items: center; gap: .5rem;
	background: transparent;
	border: 1px solid var(--czrb-line);
	border-radius: var(--r-pill, 999px);
	padding: .5rem .95rem;
	font: inherit; font-size: .84rem; color: var(--czrb-ink);
	cursor: pointer;
	transition: border-color .25s var(--e, ease), background-color .25s var(--e, ease), color .25s var(--e, ease);
}
.czrb-opt:hover { border-color: var(--czrb-accent); }
.czrb-opt.is-on { background: var(--czrb-accent); border-color: var(--czrb-accent); color: #fff; }
.czrb-opt.is-empty { opacity: .34; cursor: not-allowed; }
.czrb-opt__icon { width: 26px; height: 26px; object-fit: contain; }
.czrb-opt.is-on .czrb-opt__icon { filter: brightness(0) invert(1); }
.czrb-opt__swatch { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.czrb-group--icons .czrb-opt { flex-direction: column; padding: .85rem 1.05rem; min-width: 84px; }
.czrb-group--icons .czrb-opt__label { font-size: .78rem; }

/* Drawer is deep plum: render the grey line-art icons as light so they read clearly, and use a
   champagne selected state (dark icon/label on champagne) rather than white-on-plum. */
.czrb-drawer .czrb-opt { border-color: rgba(255, 255, 255, .18); }
.czrb-drawer .czrb-opt:hover { border-color: var(--champ, #e7d6b6); }
.czrb-drawer .czrb-opt__icon { filter: brightness(0) invert(1); opacity: .92; }
.czrb-drawer .czrb-opt.is-on {
	background: var(--champ, #e7d6b6);
	border-color: var(--champ, #e7d6b6);
	color: var(--plum-deep, #2e1726);
}
.czrb-drawer .czrb-opt.is-on .czrb-opt__icon { filter: brightness(0); opacity: 1; }
.czrb-drawer .czrb-drawer__close { border-color: rgba(255, 255, 255, .22); }
.czrb-drawer .czrb-drawer__clear { color: var(--champ, #e7d6b6); }

/* ---- responsive ---- */
@media (min-width: 1700px) {
	.czrb-results { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.czrb-results { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.czrb-results { gap: 1.1rem; }
	.czrb-card__name { font-size: 1.12rem; }
	.czrb-card__body { padding-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.czrb-card__media img, .czrb-card__cta i, .czrb-opt,
	.czrb-scrim, .czrb-drawer { transition: none; }
	.czrb-card:hover .czrb-card__media img { transform: none; }
}

/* ============================================================================
 * Discovery-page sections (Slice 5): restrained hero, Make-It-Yours steps, bespoke steps,
 * editorial break, education links. Complements page-home-a.css (the .cza system).
 * ========================================================================== */

/* Restrained intro: shorter than a full-viewport hero so products come quickly. */
.cza-hero--compact { min-height: min(74vh, 720px); }

/* Make It Entirely Yours — 3-step grid */
.cza-mky .cza-steps {
	list-style: none; margin: 0 auto; padding: 0;
	max-width: var(--wrap, 1440px);
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	padding-inline: var(--gut, 2rem);
}
.cza-step { display: flex; flex-direction: column; gap: .5rem; }
.cza-step__n {
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--plum, #5e3450); line-height: 1;
}
/* Make-It-Yours sits on an ivory tone — force dark ink so titles/copy don't inherit the light --txt. */
.cza-step__t { font-family: var(--serif, Georgia, serif); font-size: 1.3rem; color: var(--plum-deep, #2e1726); }
.cza-step__m { color: #6f6470; font-size: .95rem; line-height: 1.55; }
.cza-steps__cta { text-align: center; margin-top: clamp(1.8rem, 4vw, 2.8rem); }

/* Bespoke — inline conversation/design/creation steps inside the story copy */
.cza-bespoke__steps { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .9rem; }
.cza-bespoke__steps li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1rem; border-left: 2px solid var(--gold, #c9a86a); }
.cza-bespoke__t { font-family: var(--serif, Georgia, serif); font-size: 1.15rem; }
.cza-bespoke__m { color: var(--mut, #9a8e98); font-size: .92rem; }

/* Education — guide links as quiet cards on the ivory tone (dark ink + dark hairline border). */
.cza-learncol--link { text-decoration: none; color: var(--plum-deep, #2e1726); display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(46, 23, 38, .16); border-radius: var(--r, 14px); transition: border-color .25s var(--e, ease); }
.cza-learncol--link .cz-eyebrow { color: var(--plum-deep, #2e1726); }
.cza-learncol--link:hover { border-color: var(--plum, #5e3450); }
.cza-learncol__go { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plum, #5e3450); }

@media (max-width: 860px) {
	.cza-mky .cza-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.cza-learncol--link { transition: none; }
}

/* focus-visible on every interactive control */
.czrb-opt:focus-visible,
.czrb-chip:focus-visible,
.czrb-sort:focus-visible,
.czrb-filterbtn:focus-visible,
.czrb-drawer__close:focus-visible,
.czrb-drawer__clear:focus-visible,
.czrb-card:focus-visible {
	outline: 2px solid var(--czrb-accent);
	outline-offset: 3px;
}