/* Ring Maker 3D (/ringmaker/, Luke 28 Oct 2026). Mobile first: the 3D ring stays pinned at the top while the
   choices scroll underneath; one step at a time, with a bar along the bottom of the screen.
   Desktop (992px+): ring on the left, choices on the right. Colours and radius from ctd-global.css. */

/* The two dialogs (stone video, ring size) sit outside .rm3d-page, at the end of the page, so they get the colours too.
   Without them the ring size panel's gold Add to basket button had no background: white text on white (Luke 3 Nov). */
.rm3d-page, .rm3d-video, .rm3d-size {
	--rm3d-line: #E4E0D8;
	--rm3d-ink: #1B1C1A;
	--rm3d-grey: #6B6B6B;
	--rm3d-cream: #F7F5F1;
	--rm3d-gold: var(--ctd-gold, #C2A559);
	--rm3d-gold-hover: var(--ctd-gold-hover, #B3944F);
	--rm3d-radius: var(--ctd-radius, 6px);
	--rm3d-sticky-top: 0px;    /* set by ringmaker3d.js to sit under the site's sticky header */
	--rm3d-bar-h: 132px;
}

.rm3d-head { text-align: center; margin: 0 auto 6px; }
.rm3d-head h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.rm3d-head h1 span { display: block; font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: .04em; color: var(--rm3d-grey); margin-top: 2px; }

/* Guide and FAQs under the builder */
.rm3d-guide { max-width: 860px; margin: 36px auto 0; }
.rm3d-guide section { margin: 0 0 32px; }
.rm3d-guide h2 { font-size: 26px; margin: 0 0 12px; }
.rm3d-guide h3 { font-size: 20px; margin: 0 0 6px; }
.rm3d-guide p, .rm3d-guide li { font-size: 17px; line-height: 1.7; }
.rm3d-guide p { margin: 0 0 12px; }
.rm3d-guide a { color: var(--rm3d-ink); text-decoration: underline; text-underline-offset: 3px; }
.rm3d-howto { margin: 0; padding-left: 22px; }
.rm3d-howto li { margin: 0 0 8px; }
.rm3d-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.rm3d-cards > div { padding: 16px; border: 1px solid var(--rm3d-line); border-radius: var(--rm3d-radius); background: #FFFFFF; }
.rm3d-cards p { margin: 0; }
.rm3d-cards a { display: block; margin-top: 8px; }
.rm3d-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rm3d-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rm3d-line); border-radius: var(--rm3d-radius); text-decoration: none; font-size: 15px; }
.rm3d-faq details { border-bottom: 1px solid var(--rm3d-line); }
.rm3d-faq summary { list-style: none; cursor: pointer; padding: 14px 32px 14px 0; position: relative; min-height: 44px; }
.rm3d-faq summary::-webkit-details-marker { display: none; }
.rm3d-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--rm3d-gold); }
.rm3d-faq details[open] summary::after { content: '\2212'; }
.rm3d-faq summary h3 { display: inline; font-size: 18px; margin: 0; }
.rm3d-faq details p { margin: 0 0 14px; }
@media (min-width: 768px) {
	.rm3d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rm3d { position: relative; padding-bottom: calc(var(--rm3d-bar-h) + env(safe-area-inset-bottom)); }

/* ---------- the ring ---------- */
.rm3d-stage {
	position: sticky;
	top: var(--rm3d-sticky-top);
	z-index: 5;
	background: #FFFFFF;
	padding: 4px 0 8px;
}
.rm3d-viewer {
	position: relative;
	width: min(100%, 40vh);
	width: min(100%, 40svh);
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	border: 1px solid var(--rm3d-line);
	border-radius: var(--rm3d-radius);
	overflow: hidden;
	background: #FFFFFF;
}
.rm3d-viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Phones and tablets: the ring is docked, edge to edge under the site header, as large as leaves room for the choices
   (Luke 28 Oct: "the viewer is a bit small, should we dock it") */
@media (max-width: 991px) {
	/* The ring stays docked only while the builder's own box is on screen, so the builder is at least a screen tall:
	   the ring stays put through every step, and the guide below only comes into view after it */
	.rm3d { min-height: 100vh; min-height: 100svh; }
	.rm3d-stage {
		margin: 0 calc(50% - 50vw);
		padding: 0;
		box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18);
	}
	.rm3d-viewer {
		width: 100%;
		height: min(100vw, 47vh);
		height: min(100vw, 47svh);
		aspect-ratio: auto;
		border: 0;
		border-radius: 0;
	}
	.rm3d-head { margin-bottom: 4px; }
	.rm3d-head h1 { font-size: 24px; }
	.rm3d-head h1 span { font-size: 13px; }
	.rm3d-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
}
/* The docked ring needs position: sticky, which Journal's .site-wrapper (overflow: hidden) stops working. On this page
   only, it clips with overflow: clip instead: the same clipping, but it isn't a scroll box, so sticky works (Luke 28 Oct:
   "it's not docking"). ringmaker3d.js does the same for any other clipping wrapper, for browsers without :has(). */
.site-wrapper:has(.rm3d) { overflow: clip; }
/* Journal's mobile bottom menu (Home, Account, Email, Call us) sat over the Ring Maker bar: hidden while the builder is
   in use, back when reading the guide below */
@media (max-width: 991px) {
	/* !important: Journal slides the menu in and out itself as the page scrolls */
	body.rm3d-on .bottom-menu { display: none !important; }
}

/* Shorter phones: a little less ring, so the choices still fit between it and the bar */
@media (max-width: 991px) and (max-height: 780px) {
	.rm3d-viewer { height: min(100vw, 40vh); height: min(100vw, 40svh); }
}

/* A thin gold line along the top while the next ring loads (the old ring stays on screen meanwhile) */
.rm3d-busy { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.rm3d-busy span { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--rm3d-gold); animation: rm3d-slide 1s ease-in-out infinite; }
.rm3d.is-busy .rm3d-busy { opacity: 1; }
@keyframes rm3d-slide { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .rm3d-busy span { animation: none; left: 0; width: 100%; } }

/* ---------- steps ---------- */
.rm3d-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	margin: 4px 0 10px;
	border-bottom: 1px solid var(--rm3d-line);
}
.rm3d-steps button {
	min-height: 52px;
	padding: 6px 2px 8px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--rm3d-grey);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: pointer;
	font: inherit;
}
.rm3d-steps button span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rm3d-steps button b { font-size: 13px; font-weight: 500; color: var(--rm3d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rm3d-steps button[aria-selected="true"] { border-bottom-color: var(--rm3d-gold); color: var(--rm3d-ink); }
.rm3d-steps button:focus-visible { outline: 2px solid var(--rm3d-gold); outline-offset: 2px; }

.rm3d-step h2 { font-size: 20px; margin: 0 0 8px; }
.rm3d-step h3 { font-size: 16px; margin: 0 0 8px; letter-spacing: .06em; text-transform: uppercase; font-family: inherit; font-weight: 500; color: var(--rm3d-grey); }
.rm3d-step[hidden] { display: none; }
.rm3d-panel { scroll-margin-top: calc(var(--rm3d-sticky-top) + 40vh + 24px); }
@media (min-width: 992px) {
	.rm3d-head h1 { font-size: 40px; }
	.rm3d-head h1 span { font-size: 18px; }
	.rm3d-step h2 { font-size: 24px; }
}

/* Options: a swipeable row on phones, a grid on bigger screens */
.rm3d-options {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 2px 2px 10px;
	margin: 0 -2px;
	scrollbar-width: none;
}
.rm3d-options::-webkit-scrollbar { display: none; }
.rm3d-opt {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-height: 48px;
	min-width: 96px;
	padding: 10px 12px;
	background: #FFFFFF;
	border: 1px solid var(--rm3d-line);
	border-radius: var(--rm3d-radius);
	color: var(--rm3d-ink);
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	touch-action: manipulation;
}
.rm3d-opt img { width: 48px; height: 48px; object-fit: contain; display: block; }
.rm3d-opt span { font-size: 16px; line-height: 1.2; }
.rm3d-opt small { font-size: 14px; line-height: 1.4; color: var(--rm3d-grey); text-align: left; }
.rm3d-opt--text { width: 72vw; max-width: 260px; align-items: flex-start; text-align: left; }
.rm3d-opt--text span { font-weight: 500; }
/* Setting and band cards with a picture of the ring (Luke 2 Nov): a swipeable row of cards on phones,
   four across from tablets up */
.rm3d-opt--pic { width: 40vw; max-width: 180px; padding: 8px 8px 10px; justify-content: flex-start; }
.rm3d-opt--pic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--rm3d-radius); background: #FFFFFF; }
.rm3d-opt--pic span, .rm3d-opt--pic small { padding: 0 2px; }
.rm3d-opt.is-on { border-color: var(--rm3d-gold); box-shadow: inset 0 0 0 1px var(--rm3d-gold); }
.rm3d-opt:focus-visible { outline: 2px solid var(--rm3d-gold); outline-offset: 2px; }
@media (hover: hover) { .rm3d-opt:hover { border-color: var(--rm3d-gold); } }

/* Metal: the product pages' tabs and swatch pictures (custom.css .ctd-metal-*); here they are buttons */
.rm3d-chosen { font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rm3d-grey); margin-left: 6px; }
/* Phones: the three metal tabs side by side (the ring pages stack them), so the swatches stay in view */
.rm3d-page .ctd-metal-tabs { flex-direction: row; }
.rm3d-page .ctd-metal-swatches[hidden] { display: none; }
.rm3d-page button.ctd-metal-tab { min-height: 44px; font: inherit; font-size: 13px; }
.rm3d-page button.ctd-metal-swatch { padding: 0; font: inherit; line-height: 0; }
.rm3d-page .ctd-metal-swatch img { display: block; width: 100%; height: auto; }
.rm3d-page button.ctd-metal-swatch.is-unavailable { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.rm3d-sku { font-size: 16px; margin: 0 0 12px; }
.rm3d-page button.ctd-metal-swatch:focus-visible,
.rm3d-page button.ctd-diamond-colour:focus-visible { outline: 2px solid var(--rm3d-gold); outline-offset: 2px; }

/* Diamond: the product pages' colour swatches (ctd-global.css .ctd-diamond-colours-wrapper), as buttons */
.rm3d-page .ctd-diamond-colours-wrapper { flex-direction: row; justify-content: flex-start; margin-bottom: 14px; }
.rm3d-page button.ctd-diamond-colour { background: none; font: inherit; color: inherit; }
.rm3d-page button.ctd-diamond-colour.active { background: #F0ECE0; }

.rm3d-radios { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; }
.rm3d-radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 400; margin: 0; cursor: pointer; }
.rm3d-radios input { width: 20px; height: 20px; accent-color: var(--rm3d-gold); margin: 0; }
.rm3d-budget-label { display: block; font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.rm3d-budget { width: 100%; min-height: 48px; font-size: 16px; border-radius: var(--rm3d-radius); }
.rm3d-msg { margin: 8px 0 0; font-size: 15px; color: #A33A2B; }
.rm3d-search-actions { display: flex; gap: 8px; margin-top: 12px; }
.rm3d-search-actions .rm3d-btn { flex: 1 1 0; }
.rm3d-note { font-size: 15px; line-height: 1.5; color: var(--rm3d-grey); margin: 8px 0 0; }

/* The chosen stone */
.rm3d-selected { margin: 0 0 18px; scroll-margin-top: calc(var(--rm3d-sticky-top) + 24px); padding: 14px; border: 1px solid var(--rm3d-gold); border-radius: var(--rm3d-radius); background: var(--rm3d-cream); }
.rm3d-selected[hidden] { display: none; }
.rm3d-stone { display: flex; gap: 14px; align-items: flex-start; }
.rm3d-stone img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--rm3d-radius); background: #FFFFFF; flex: 0 0 auto; }
.rm3d-stone p { margin: 0 0 2px; font-size: 15px; line-height: 1.45; }
.rm3d-stone .rm3d-stone-title { font-size: 17px; font-weight: 500; }
.rm3d-stone .rm3d-stone-price { font-size: 17px; font-weight: 500; margin-top: 4px; }
.rm3d-stone-price span { font-size: 14px; font-weight: 400; color: var(--rm3d-grey); }
.rm3d-stone-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.rm3d-link { min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--rm3d-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; }

/* Fast Search results: the ring pages' cards (ctd-global.css / custom.css), full width under the builder */
.rm3d-results:empty { display: none; }
.rm3d-results { position: relative; z-index: 6; margin-top: 18px; scroll-margin-top: calc(var(--rm3d-sticky-top) + 12px); background: #FFFFFF; }
/* While the results are open the ring stops following the page, on every screen, so it never covers the cards */
.rm3d.is-results .rm3d-stage { position: relative; top: 0; }
/* Phones: the chosen stone scrolls into view below the pinned ring */
@media (max-width: 991px) {
	.rm3d-selected { scroll-margin-top: calc(var(--rm3d-sticky-top) + 40vh + 24px); }
}

/* Ring Maker result cards: a list on phones (photo left, details right), three across on wider screens */
.rm3d-res { padding: 16px; border: 1px solid var(--rm3d-line); border-radius: var(--rm3d-radius); background: #FFFFFF; }
.rm3d-res-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rm3d-res-head h3 { margin: 0; font-size: 22px; }
.rm3d-res-none { font-size: 16px; margin: 0 0 12px; }
.rm3d-res-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: #F0ECE0; border-radius: 8px; }
.rm3d-res-tabs button { flex: 1 1 0; min-height: 44px; border: 0; border-radius: var(--rm3d-radius); background: transparent; font: inherit; font-size: 15px; color: var(--rm3d-grey); cursor: pointer; }
.rm3d-res-tabs button.active { background: var(--rm3d-gold); color: #FFFFFF; }
.rm3d-res-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rm3d-dcard { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--rm3d-line); border-radius: var(--rm3d-radius); background: #FFFFFF; }
.rm3d-dcard-tag { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 2px 8px; border-radius: 4px; background: var(--rm3d-gold); color: #FFFFFF; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.rm3d-dcard-img { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: var(--rm3d-radius); overflow: hidden; background: #F4F4F6; cursor: zoom-in; }
.rm3d-dcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rm3d-dcard-body p { margin: 0 0 2px; font-size: 15px; line-height: 1.4; }
.rm3d-dcard-title { font-size: 17px !important; font-weight: 500; }
.rm3d-dcard-price { margin-top: 4px !important; font-size: 17px !important; font-weight: 500; }
.rm3d-dcard-price span { font-size: 13px; font-weight: 400; color: var(--rm3d-grey); }
.rm3d-dcard-acts { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.rm3d-dcard-acts .rm3d-btn { flex: 0 0 auto; min-height: 44px; padding: 8px 22px; }
@media (min-width: 768px) {
	.rm3d-res-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.rm3d-dcard { grid-template-columns: 140px minmax(0, 1fr); }
	.rm3d-dcard-acts { flex-wrap: wrap; }
}

/* Diamond video and photo viewer */
.rm3d-video { width: min(92vw, 720px); padding: 0; border: 0; border-radius: var(--rm3d-radius); }
.rm3d-video::backdrop { background: rgba(0, 0, 0, .6); }
.rm3d-video-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 16px; }
.rm3d-video-head p { margin: 0; font-size: 16px; }
.rm3d-video-close { width: 44px; height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; }
.rm3d-video-frame { position: relative; aspect-ratio: 1 / 1; background: #000000; }
.rm3d-video-frame iframe, .rm3d-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm3d-video-frame img { object-fit: contain; background: #FFFFFF; }

/* ---------- ring size panel (Add to basket goes straight to the basket, Luke 3 Nov) ---------- */
.rm3d-size { width: min(92vw, 420px); padding: 0; border: 0; border-radius: var(--rm3d-radius); color: var(--rm3d-ink); background: #FFFFFF; }
.rm3d-size::backdrop { background: rgba(0, 0, 0, .6); }
.rm3d-size-form { display: flex; flex-direction: column; gap: 12px; padding: 6px 20px 20px; margin: 0; }
.rm3d-size-head { display: flex; align-items: center; justify-content: space-between; margin-right: -14px; }
.rm3d-size-title { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; line-height: 1.2; }
.rm3d-size-label { margin: 0; font-size: 16px; font-weight: 500; }
.rm3d-size-select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--ctd-border-dark, #444444);
	border-radius: var(--rm3d-radius);
	background: #FFFFFF;
	color: var(--rm3d-ink);
	font: inherit;
	font-size: 16px;   /* 16px or more: iOS doesn't zoom in on focus */
}
.rm3d-size-select[aria-invalid="true"] { border-color: #B00020; }
.rm3d-size-msg { margin: 0; font-size: 15px; line-height: 1.4; color: #B00020; }
.rm3d-size-msg a { color: inherit; text-decoration: underline; }
.rm3d-size .rm3d-btn { flex: 0 0 auto; width: 100%; }
.rm3d-size-unsure { flex-direction: column; gap: 2px; line-height: 1.25; }
.rm3d-size-unsure span { font-size: 14px; font-weight: 400; color: var(--rm3d-grey); }
.rm3d-size.is-busy .rm3d-btn { cursor: progress; opacity: .75; }
@media (max-width: 575px) {
	/* Phones: a sheet from the bottom of the screen */
	.rm3d-size { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--rm3d-radius) var(--rm3d-radius) 0 0; }
	.rm3d-size-form { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- bottom bar ---------- */
.rm3d-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background: #FFFFFF;
	border-top: 1px solid var(--rm3d-line);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}
.rm3d-summary { margin: 0 0 6px; font-size: 15px; line-height: 1.35; text-align: center; color: var(--rm3d-ink); }
.rm3d-actions { display: flex; gap: 8px; }
.rm3d-btn {
	flex: 1 1 0;
	min-height: 48px;
	padding: 10px 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rm3d-gold);
	color: #FFFFFF;
	border: 1px solid var(--rm3d-gold);
	border-radius: var(--rm3d-radius);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.rm3d-btn:hover, .rm3d-btn:focus-visible { background: var(--rm3d-gold-hover); border-color: var(--rm3d-gold-hover); color: #FFFFFF; text-decoration: none; }
.rm3d-btn--ghost { background: #FFFFFF; color: var(--rm3d-ink); border-color: var(--ctd-border-dark, #444444); flex: 0 0 auto; }
.rm3d-btn--ghost:hover, .rm3d-btn--ghost:focus-visible { background: var(--rm3d-cream); color: var(--rm3d-ink); border-color: var(--ctd-border-dark, #444444); }
.rm3d-btn[hidden] { display: none; }
/* Phones: the bar goes once the builder is scrolled past (reading the guide below) */
.rm3d-bar { transition: transform .25s ease; }
.rm3d.is-away .rm3d-bar { transform: translateY(110%); }
@media (min-width: 992px) { .rm3d.is-away .rm3d-bar { transform: none; } }

.rm3d-classic { text-align: center; font-size: 15px; margin: 18px 0 0; }

/* ---------- tablets and desktop ---------- */
@media (min-width: 768px) {
	.rm3d-options { flex-wrap: wrap; overflow: visible; }
	.rm3d-options--shapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.rm3d-opt--text { width: calc(50% - 5px); max-width: none; }
	.rm3d-options--pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rm3d-options--pics .rm3d-opt--pic { width: auto; }
}

@media (min-width: 992px) {
	.rm3d { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; padding-bottom: 0; }
	.rm3d-stage { grid-row: 1 / span 2; top: calc(var(--rm3d-sticky-top) + 16px); padding: 0; }
	.rm3d-viewer { width: 100%; max-width: 640px; }
	.rm3d-panel { grid-column: 2; }
	.rm3d-panel { grid-row: 1; }
	.rm3d-bar { grid-row: 2; }
	.rm3d-results { grid-column: 1 / -1; grid-row: 3; }
	.rm3d.is-results .rm3d-stage { top: 0; }
	.rm3d-bar {
		grid-column: 2;
		position: static;
		box-shadow: none;
		border: 1px solid var(--rm3d-line);
		border-radius: var(--rm3d-radius);
		background: var(--rm3d-cream);
		padding: 16px;
		margin-top: 18px;
	}
	.rm3d-summary { text-align: left; }
}

/* ---------- Phones and tablets: the whole builder docks as one screen (Luke 29 Oct, "make the whole section dock with
   the viewer like this") ----------
   The builder is exactly the screen under the site header: the ring at the top, the steps, the choices (which scroll
   inside their own area if they are long) and the Back / Next bar at the bottom. Nothing in it moves with the page;
   choosing a step lines the builder up under the header. The guide follows below. Results replace the choices. */
@media (max-width: 991px) {
	.rm3d {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--rm3d-sticky-top));
		height: calc(100svh - var(--rm3d-sticky-top));
		min-height: 0;
		margin: 0 calc(50% - 50vw);
		padding: 0;
		overflow: hidden;
		background: #FFFFFF;
		scroll-margin-top: var(--rm3d-sticky-top);
	}
	.rm3d-stage, .rm3d.is-results .rm3d-stage { position: relative; top: auto; flex: none; margin: 0; }
	.rm3d-panel {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 8px;
		scroll-margin-top: 0;
	}
	.rm3d-steps { position: sticky; top: 0; z-index: 2; background: #FFFFFF; margin-top: 0; }
	.rm3d-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 8px 16px; }
	.rm3d.is-results .rm3d-panel { display: none; }
	.rm3d-res { padding: 0; border: 0; }
	.rm3d-selected { scroll-margin-top: 60px; }
	/* The ring keeps the same size on every step (Luke 29 Oct) */
	.rm3d-viewer { transition: height .25s ease; }
	.rm3d-bar, .rm3d.is-away .rm3d-bar { position: static; flex: none; transform: none; box-shadow: 0 -4px 12px rgba(0, 0, 0, .05); }
}

/* ---------- Phones and tablets: Ring Maker fits the screen exactly, no page scroll (Luke 29 Oct) ----------
   The builder is fixed between the site header and the bottom of the screen and the page itself doesn't scroll
   (html.rm3d-lock, set by ringmaker3d.js). The H1 stays in the page for search but is visually hidden; the guide and
   FAQs open as a full-screen sheet from "Guide & FAQs" in the bar. */
.rm3d-sumrow { display: flex; align-items: center; gap: 6px; }
.rm3d-sumrow .rm3d-summary { flex: 1 1 auto; min-width: 0; }
.rm3d-guide-btn, .rm3d-guide-top { display: none; }
@media (max-width: 991px) {
	html.rm3d-lock, html.rm3d-lock body { overflow: hidden !important; overscroll-behavior: none; }
	html.rm3d-lock .rm3d {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--rm3d-top, 104px);
		bottom: 0;
		height: auto;
		margin: 0;
		z-index: 40;
	}
	html.rm3d-lock .rm3d-head {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.rm3d-stage { flex: 0 1 auto; min-height: 0; }
	.rm3d-viewer { min-height: 180px; }
	.rm3d-bar { padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
	.rm3d-sumrow { margin-bottom: 6px; }
	.rm3d-sumrow .rm3d-summary { margin: 0; text-align: left; font-size: 14px; }
	/* explicit sizes: Journal's button styles otherwise make it a tall box that pushes the bar open */
	.rm3d-bar .rm3d-guide-btn {
		display: inline-block; flex: none; height: auto; min-height: 0; margin: 0; padding: 6px 0 6px 6px;
		background: none; border: 0; box-shadow: none; font: inherit; font-size: 14px; line-height: 1.3; color: var(--rm3d-ink);
		text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
	}
	.rm3d-bar { padding-left: 16px; padding-right: 16px; }
	.rm3d-sumrow .rm3d-summary { line-height: 1.3; }
	/* a little tighter, so every step's choices fit between ring and bar */
	.rm3d-steps { margin-bottom: 6px; }
	.rm3d-steps button { min-height: 46px; padding: 4px 2px 6px; }
	.rm3d-step h2 { margin-bottom: 6px; }
	.rm3d-page .ctd-metal-tabs { margin-bottom: 6px; }
	.rm3d-page .ctd-metal-swatches { padding: 4px 0; margin-bottom: 0; }
	/* The guide as a sheet over the builder */
	html.rm3d-lock .rm3d-guide {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--rm3d-top, 104px);
		bottom: 0;
		z-index: 45;
		max-width: none;
		margin: 0;
		padding: 0 16px 24px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: #FFFFFF;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s linear .3s;
	}
	html.rm3d-guide-open .rm3d-guide { transform: none; visibility: visible; transition: transform .3s ease; }
	html.rm3d-lock .rm3d-guide-top {
		display: flex; align-items: center; justify-content: space-between;
		position: sticky; top: 0; z-index: 1; margin: 0 -16px 12px; padding: 4px 8px 4px 16px;
		background: #FFFFFF; border-bottom: 1px solid var(--rm3d-line);
	}
	.rm3d-guide-top p { margin: 0; font-size: 16px; font-weight: 500; }
	.rm3d-guide-close { width: 44px; height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; }
	html.rm3d-lock .rm3d-classic { display: none; }
	html.rm3d-lock body .bottom-menu { display: none !important; }
}
/* Shorter phones: less ring so the choices fit */
@media (max-width: 991px) and (max-height: 760px) {
	.rm3d-viewer { height: min(100vw, 38svh); }
}

.rm3d-search[hidden] { display: none; }

/* Advanced search (#1625): the ring pages' filters (their look is #detailed-search-form in ctd-global.css) stand in for the
   Fast Search fields while open, and its results get page links under the cards */
.rm3d-adv[hidden] { display: none; }
.rm3d-search.is-advanced > :not(#detailed-search-form) { display: none; }
.rm3d-res-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.rm3d-res-pages button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rm3d-line); border-radius: var(--rm3d-radius); background: #FFFFFF; font: inherit; font-size: 15px; color: var(--rm3d-ink); cursor: pointer; }
.rm3d-res-pages button.is-on { background: var(--rm3d-gold); border-color: var(--rm3d-gold); color: #FFFFFF; }
.rm3d-res-pages span { align-self: center; color: var(--rm3d-grey); }
@media (max-width: 991px) {
	/* The ring keeps its size on every step: a long step (the Diamond step, most of all with Advanced search open) scrolls
	   in the space left under the ring instead of squeezing the stage while the 3D ring drew over the step tabs */
	.rm3d-panel, .rm3d-results { flex-basis: 0; }
	/* Advanced search filters on screen: their own Back / Search Diamonds bar stands in for the builder's bar (no second
	   Back). Only while they show: the bar (and Add to basket) is back for the results, a chosen stone and other steps */
	.rm3d:not(.is-results):has(.rm3d-step.is-open #rm3d-search:not([hidden]) > #detailed-search-form:not([hidden])) .rm3d-bar { display: none; }
}

/* Try it on your hand: the product pages' button (ctd-global.css .ctd-tryon-btn), bottom centre of the 3D ring */
.rm3d-viewer .rm3d-tryon { z-index: 3; bottom: 14px; }
@media (max-width: 991px) {
	.rm3d-viewer .rm3d-tryon { bottom: 10px; min-height: 44px; padding: 8px 18px; font-size: 15px; }
}