/* Server-rendered theme archive markup is injected raw into the "choose
   your setting" step (see builder.js renderSettingStep) without going
   through Woodmart's own AJAX-filter JS lifecycle, so its loading spinner
   never gets hidden/managed and renders as a stray icon-font glyph. It's
   redundant anyway since our own "Loading…" placeholder already covers
   the wait. */
#tjdb-settings-results .wd-sticky-loader {
	display: none !important;
}

.tjdb-step h2 {
	margin-bottom: 1rem;
}

.tjdb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
	gap: 1.35rem 1rem;
}

.tjdb-card-wrap {
	position: relative;
	display: flex;
}

.tjdb-card {
	position: relative;
	width: 100%;
	/* The theme upper-cases and bolds every <button>. */
	text-transform: none !important;
	font-weight: 400 !important;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	border: 1px solid #ece6dd;
	border-radius: 0;
	/* !important: the card is a <button>, and the theme's button padding
	   otherwise wins and insets the photo from the card's edges. */
	padding: 0 !important;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	overflow: hidden;
}

.tjdb-card-favorite {
	position: absolute !important;
	top: 0.4rem;
	left: 0.4rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 28px circle drawn inside a 44px target. */
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: -4px;
	border: none !important;
	box-shadow: none !important;
	border-radius: 50%;
	background: none !important;
	color: #8a6b45 !important;
	cursor: pointer;
}

.tjdb-card-favorite::before {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
}

.tjdb-card-favorite svg {
	position: relative;
}

.tjdb-card-favorite:focus-visible::before {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f2924;
}

.tjdb-card-favorite svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

.tjdb-card-favorite:hover::before {
	background: #fff;
}

.tjdb-card-favorite.is-active {
	color: #fff !important;
}

.tjdb-card-favorite.is-active::before {
	background: #8a6b45;
}

.tjdb-card:hover:not(:disabled) {
	border-color: #d6c9b8;
	box-shadow: 0 10px 24px rgba(41, 35, 29, 0.08);
	transform: translateY(-1px);
}

.tjdb-card:disabled {
	cursor: not-allowed;
}

/* Faded, but labelled and still readable. */
.tjdb-card:disabled .tjdb-card-media img,
.tjdb-card:disabled .tjdb-card-placeholder {
	opacity: 0.35;
}

.tjdb-card:disabled .tjdb-card-name,
.tjdb-card:disabled .tjdb-card-spec,
.tjdb-card:disabled .tjdb-card-price {
	color: #746d64;
}

.tjdb-card-unavailable {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.35rem 0.5rem;
	background: rgba(47, 41, 36, 0.86);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.tjdb-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #b9ad9c;
}

.tjdb-card-placeholder svg {
	width: 42%;
	height: 42%;
}

.tjdb-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0;
	margin-bottom: 0.75rem;
	background: #f8f6f2;
}

.tjdb-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 0;
	margin-bottom: 0.75rem;
	background: #f8f6f2;
	/* min-width/min-height: 0 override the flex/grid default that refuses
	   to shrink a child below its content's intrinsic size — without it the
	   500px-native video-scaler below inflates this whole card. */
	min-width: 0;
	min-height: 0;
}

.tjdb-card-media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	margin-bottom: 0;
}

.tjdb-card-spin-badge {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	background: rgba(43, 41, 38, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
	pointer-events: none;
}

/* Built at most once per card on first hover and left in the DOM after
   that (see bindCardSpinHover()) — hidden/shown via this class rather
   than being torn down and rebuilt, so re-hovering the same card doesn't
   reload the iframe from scratch every time.
   No background of its own: if loupe360 doesn't have real media for this
   stone, staying transparent lets the real photo underneath show through
   instead of a blank/grey box. */
.tjdb-card-spin-holder {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

.tjdb-card-media.tjdb-spin-active .tjdb-card-spin-holder {
	display: block;
}

.tjdb-video-scaler {
	/* Matches the 500px IFRAME_NATIVE_SIZE baked into its own inline
	   width/height in scaledIframeMarkup() — centers the native-size
	   iframe within whatever container it's placed in before the JS
	   transform:scale() shrinks it to fit. */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -250px;
	transform-origin: center center;
	flex-shrink: 0;
	min-width: 0;
	min-height: 0;
}

.tjdb-video-scaler .tjdb-video-frame {
	width: 100%;
	height: 100%;
	border: none;
}

.tjdb-card-name {
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.35;
	padding: 0 0.8rem;
}

.tjdb-card-spec {
	font-size: 12px;
	color: #746d64;
	padding: 0 0.8rem;
	margin-top: 0.2rem;
}

.tjdb-card-price {
	margin-top: 0.45rem;
	/* Space under the text, now that the card itself has no padding. */
	margin-bottom: 0.9rem;
	font-size: 0.94rem;
	font-weight: 600;
	color: #2b2926;
}

.tjdb-back {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	margin-bottom: 1rem;
	padding: 0;
	font-size: 0.9rem;
}

/* The way to the rest of the results, so it reads as a button and sits in
   the middle under them (not as the grey text link it used to share a
   class with). */
.tjdb-load-more {
	display: block;
	min-height: 46px !important;
	margin: 2rem auto 0;
	padding: 0 2rem !important;
	border: 1px solid #2f2924 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #2f2924 !important;
	cursor: pointer;
}

.tjdb-load-more:hover:not(:disabled) {
	background: #2f2924 !important;
	color: #fff !important;
}

.tjdb-load-more:disabled {
	opacity: 0.6;
	cursor: default;
}

.tjdb-add-to-cart {
	margin-top: 1.5rem;
	padding: 0.85rem 1.5rem;
	background: #2f2924;
	color: #fff;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tjdb-add-to-cart:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.tjdb-variation-row {
	margin-bottom: 1rem;
	max-width: 320px;
}

.tjdb-variation-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/* ---- Complete step: mirrors the theme's single-product page ----
   Title/price/button values below are the theme's own computed styles
   for h1.product_title, p.price and the add-to-cart button. */

.tjdb-complete-layout {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

.tjdb-complete-gallery {
	width: 58%;
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

/* Two columns of photos at their own heights (see renderCompleteGallery()
   in builder.js); a single photo has the width to itself. */
.tjdb-complete-gallery-column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* A button, so a photo opens large with a press or the keyboard; the
   theme's own button styling is taken off it. */
.tjdb-complete-gallery-item {
	display: block !important;
	width: 100%;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #f5f5f5 !important;
	box-shadow: none !important;
	overflow: hidden;
	cursor: zoom-in;
}

.tjdb-complete-gallery-item:focus-visible {
	outline: 2px solid #8a6b45 !important;
	outline-offset: 2px;
}

.tjdb-complete-gallery-item img {
	transition: transform 0.4s ease;
}

.tjdb-complete-gallery-item:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-complete-gallery-item img {
		transition: none;
	}

	.tjdb-complete-gallery-item:hover img {
		transform: none;
	}
}

.tjdb-complete-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* Product photos are shot on white; multiplying them onto the grey tile
   gives the same soft grey backdrop the theme's own gallery shows. */
.tjdb-complete-gallery-item img,
.tjdb-complete-part-thumb img {
	mix-blend-mode: multiply;
}

/* The gallery is the taller side now: the ring's details stay in view
   beside it while its photos scroll past. */
@media (min-width: 768px) {
	.tjdb-complete-info {
		position: sticky;
		top: 1.5rem;
	}
}

.tjdb-complete-info {
	flex: 1;
	min-width: 0;
}

.tjdb-complete-title {
	margin: 0 0 0.85rem;
	font-size: 26px;
	font-weight: 200;
	line-height: 1.2;
	text-transform: none;
	color: #352b1f;
}

.tjdb-complete-subtitle {
	/* A hairline between the ring's name and what it is set with. */
	padding-top: 0.85rem;
	border-top: 1px solid #ece6dd;
	margin: 0 0 1rem;
	font-size: 14px;
	color: #746d64;
}

.tjdb-complete-price {
	margin: 0 0 0.9rem;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #876946;
}

.tjdb-complete-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #2b2926;
}

.tjdb-complete-perks li {
	margin: 0;
}

.tjdb-complete-parts {
	margin-bottom: 1.25rem;
	border-top: 1px solid #ece6dd;
}

.tjdb-complete-part {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid #ece6dd;
}

.tjdb-complete-part-thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	overflow: hidden;
}

.tjdb-complete-part-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tjdb-complete-part-thumb-icon {
	width: 22px;
	height: 22px;
	color: #746d64;
}

.tjdb-complete-part-body {
	flex: 1;
	min-width: 0;
}

.tjdb-complete-label {
	margin: 0 0 0.2rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #746d64;
}

.tjdb-complete-part-title {
	margin: 0 0 0.25rem;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #242424;
}

.tjdb-complete-part-link {
	display: inline-block;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	font: inherit;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #876946 !important;
	text-decoration: underline;
	cursor: pointer;
}

.tjdb-complete-part-price {
	font-size: 14px;
	font-weight: 600;
	color: #242424;
	white-space: nowrap;
}

.tjdb-complete-extras {
	margin: -1.25rem 0 1.25rem;
	padding: 0;
	list-style: none;
}

.tjdb-complete-extras li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid #ece6dd;
	font-size: 14px;
	color: #2b2926;
}

.tjdb-complete-info .tjdb-variation-row {
	max-width: none;
	margin-bottom: 0.75rem;
}

.tjdb-complete-info .tjdb-variation-row label {
	margin-bottom: 0.4rem;
	font-size: 14px;
	font-weight: 600;
	color: #242424;
}

.tjdb-complete-info .tjdb-hint {
	margin: 0 0 0.75rem;
	font-size: 13px;
	color: #746d64;
}

.tjdb-complete-info .tjdb-add-to-cart {
	display: block;
	width: 100%;
	min-height: 42px;
	margin-top: 0.5rem;
	background: #2f2924 !important;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
}

.tjdb-complete-info .tjdb-add-to-cart:not(:disabled):hover {
	background: #8a6b45 !important;
}

.tjdb-complete-info #tjdb-add-to-cart-error:empty {
	display: none;
}

.tjdb-complete-assurances {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1rem;
	margin: 1.25rem 0 0;
	padding: 1.1rem 1.25rem;
	list-style: none;
	border: 1px solid #e3e3e3;
	font-size: 13px;
	color: #2b2926;
}

.tjdb-complete-assurances li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

.tjdb-complete-assurance-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #876946;
	stroke-width: 1.6;
}

.tjdb-complete-details {
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid #ece6dd;
}

.tjdb-complete-details-title {
	margin: 0 0 1rem;
	font-size: 16px;
	font-weight: 600;
	color: #876946;
}

.tjdb-complete-spec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 2.5rem;
	margin: 0;
}

.tjdb-complete-spec-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #ece6dd;
	font-size: 14px;
}

.tjdb-complete-spec-item dt {
	font-weight: 400;
	color: #746d64;
}

.tjdb-complete-spec-item dd {
	margin: 0;
	font-weight: 600;
	color: #242424;
	text-align: right;
}

.tjdb-variation-row select {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tjdb-diamond-layout {
	display: flex;
	gap: 2.25rem;
	align-items: flex-start;
}

.tjdb-filters-panel {
	width: 292px;
	flex-shrink: 0;
	border: 1px solid #ece6dd;
	background: #fff;
	padding: 1.15rem;
}

.tjdb-results-panel {
	flex: 1;
	min-width: 0;
}

/* ---- Active filter chips ---- */

.tjdb-filters-heading {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 0.9rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #ece6dd;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2b2926;
}

.tjdb-filters-heading-icon {
	width: 18px;
	height: 18px;
	color: #8a6b45;
	stroke-width: 1.8;
}

#tjdb-active-filters {
	margin-bottom: 1.25rem;
}

.tjdb-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

.tjdb-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	color: #1a1a1a;
}

.tjdb-chip-remove {
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: #8a6b45;
	line-height: 1;
	padding: 0.05rem !important;
	display: inline-flex;
}

.tjdb-chip-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: #666;
	font-size: 12px !important;
	font-weight: 400 !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: inherit !important;
}

.tjdb-chip-icon {
	width: 11px;
	height: 11px;
	stroke-width: 1.75;
}

/* ---- Collapsible filter sections ---- */

.tjdb-filter-section {
	border-bottom: 1px solid #ece6dd;
	padding-bottom: 1.1rem;
	margin-bottom: 1.1rem;
}

.tjdb-filter-section > summary {
	list-style: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tjdb-filter-section > summary::-webkit-details-marker {
	display: none;
}

.tjdb-filter-section > summary::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 1.5px solid #8a6b45;
	border-bottom: 1.5px solid #8a6b45;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.tjdb-filter-section:not([open]) > summary::after {
	transform: rotate(-45deg);
}

.tjdb-filter-hint {
	margin: -0.45rem 0 0.85rem;
	font-size: 12px;
	line-height: 1.45;
	color: #746d64;
}

/* ---- Metal swatches ---- */

.tjdb-metal-swatch-grid {
	display: flex;
	flex-direction: column;
	max-height: 250px;
	overflow-y: auto;
	padding-right: 0.4rem;
}

.tjdb-metal-swatch {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start !important;
	gap: 0.55rem;
	width: 100%;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none !important;
	border: none !important;
	border-bottom: 1px solid #ece6dd !important;
	padding: 0.5rem 0 !important;
	font: inherit;
	cursor: pointer;
}

.tjdb-metal-swatch:last-child {
	border-bottom: none !important;
}

.tjdb-metal-swatch-circle {
	position: relative;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tjdb-metal-swatch:hover .tjdb-metal-swatch-circle {
	border-color: #2b2926;
}

.tjdb-metal-swatch.is-active .tjdb-metal-swatch-circle {
	border-color: #fff;
	box-shadow: 0 0 0 2px #8a6b45;
}

.tjdb-metal-swatch-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* The swatch images (Woodmart's shared attribute-term images, e.g.
	   Yellow-Gold-14k.svg) bake a "14K"/"18K"/etc. label into the artwork
	   itself, roughly centred between ~31%-68% of the image height across
	   every metal we checked. Scaling into the bottom band (below ~68%)
	   and re-cropping with our own circle mask hides that text without
	   touching the shared production asset. */
	transform: scale(3.3);
	transform-origin: 50% 100%;
}

.tjdb-metal-swatch-fallback {
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box;
	color: #746d64;
}

.tjdb-metal-swatch-label {
	font-size: 12px;
	line-height: 1.2;
	color: #5d564d;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tjdb-metal-swatch.is-active .tjdb-metal-swatch-label {
	color: #2b2926;
	font-weight: 600;
}

.tjdb-filter-section select {
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid #d8cec0;
	border-radius: 2px;
	font: inherit;
	background: #fff;
	color: #2b2926;
}

/* ---- Lab grown / natural toggle ---- */

.tjdb-labgrown-toggle {
	display: flex;
	border: 1px solid #d8cec0;
	border-radius: 2px;
	overflow: hidden;
}

.tjdb-labgrown-option {
	flex: 1;
	border: none;
	background: #fff;
	padding: 0.55rem 0.5rem;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #746d64;
	cursor: pointer;
}

.tjdb-labgrown-option + .tjdb-labgrown-option {
	border-left: 1px solid #d8cec0;
}

.tjdb-labgrown-option.is-active {
	background: #2f2924;
	color: #fff;
}

/* ---- Shape icon grid ---- */

.tjdb-shape-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.tjdb-shape-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
	background: #fff;
	border: 1px solid #e6ded3;
	border-radius: 2px;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
}

.tjdb-shape-option:hover {
	border-color: #cfc8ba;
}

.tjdb-shape-option.is-active {
	border-color: #8a6b45;
	background: #fbf8f2;
}

.tjdb-shape-icon {
	width: 26px;
	height: 26px;
	color: #666;
}

.tjdb-shape-option.is-active .tjdb-shape-icon {
	color: #8a6b45;
}

.tjdb-shape-icon svg {
	width: 100%;
	height: 100%;
}

.tjdb-shape-label {
	font-size: 12px;
	color: #444;
}

/* ---- Dual-handle range sliders (carat, cut, color, clarity) ---- */

.tjdb-range-slider {
	position: relative;
	height: 20px;
	margin-bottom: 0.5rem;
}

.tjdb-range-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	background: #e6ded3;
	border-radius: 2px;
	transform: translateY(-50%);
}

.tjdb-range-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: #8a6b45;
	border-radius: 2px;
}

.tjdb-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: transparent !important;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Only the thumb should capture clicks — the transparent track lets both
   overlapping inputs share the same box without one blocking the other. */
.tjdb-range-input::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #8a6b45;
	cursor: pointer;
	margin-top: -2px;
}

.tjdb-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #8a6b45;
	cursor: pointer;
}

.tjdb-range-input:focus-visible {
	outline: none !important;
}

.tjdb-range-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f2924;
}

.tjdb-range-input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f2924;
}

.tjdb-range-input::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	background-color: transparent !important;
	border: none;
	box-shadow: none;
	height: 20px;
}

.tjdb-range-input::-moz-range-track {
	background: transparent !important;
	background-color: transparent !important;
	border: none;
	box-shadow: none;
	height: 20px;
}

.tjdb-range-values {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #444;
}

.tjdb-range-scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #746d64;
	gap: 0.2rem;
}

.tjdb-range-scale span {
	text-align: center;
	flex: 1;
}

.tjdb-range-scale span.is-active {
	color: #1a1a1a;
	font-weight: 600;
}

/* Too many grades to label each one: the family is named once under its
   stops, and each stop carries only its number (or a dot). */
.tjdb-range-scale.is-grouped {
	gap: 0;
}

.tjdb-scale-group {
	flex: 1 1 0;
	min-width: 0;
}

.tjdb-scale-group + .tjdb-scale-group {
	border-left: 1px solid #e6ded3;
}

.tjdb-scale-stops {
	display: flex;
	height: 16px;
	align-items: center;
	font-size: 11px;
}

.tjdb-scale-stops span {
	flex: 1 1 0;
	min-width: 0;
}

.tjdb-scale-stops i {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.tjdb-scale-group-name {
	margin-top: 1px;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-align: center;
}

.tjdb-scale-group:has(span.is-active) .tjdb-scale-group-name {
	color: #1a1a1a;
	font-weight: 600;
}

.tjdb-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.2rem;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-bottom: 1px solid #ece6dd;
	padding-bottom: 0.9rem;
}

.tjdb-view-toggle {
	display: flex;
	border: 1px solid #d8cec0;
	border-radius: 2px;
	overflow: hidden;
}

.tjdb-view-toggle button {
	border: none;
	background: #fff;
	width: 38px;
	height: 34px;
	padding: 0;
	font-size: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #746d64;
}

.tjdb-view-toggle button + button {
	border-left: 1px solid #d8cec0;
}

.tjdb-view-toggle button.active {
	background: #2f2924;
	color: #fff;
}

.tjdb-toggle-icon {
	width: 17px;
	height: 17px;
	stroke-width: 1.8;
}

.tjdb-sort-select {
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: #5d564d;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.tjdb-sort-select select {
	padding: 0.45rem 2rem 0.45rem 0.7rem;
	border: 1px solid #d8cec0;
	border-radius: 2px;
	font: inherit;
	background: #fff;
	color: #2b2926;
}

.tjdb-list {
	display: flex;
	flex-direction: column;
	border: 1px solid #ece6dd;
	border-radius: 0;
	overflow: hidden;
}

.tjdb-list-head,
.tjdb-list-row {
	display: grid !important;
	grid-template-columns: 56px 1.3fr 1fr 0.8fr 0.8fr 0.7fr 0.8fr 0.7fr;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 1rem;
}

.tjdb-list-head {
	background: #f7f3ee;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #666;
}

.tjdb-list-row {
	background: #fff;
	border-top: 1px solid #ece6dd;
}

.tjdb-list-row.is-disabled {
	color: #746d64;
}

.tjdb-list-row:hover {
	background: #fafafa;
}

.tjdb-list-cell {
	text-align: left;
}

.tjdb-list-row:not(.is-disabled) {
	cursor: pointer;
}

.tjdb-list .tjdb-list-open,
.tjdb-list .tjdb-list-cell-sortable {
	min-height: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit;
	font-weight: 600 !important;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.tjdb-list .tjdb-list-open {
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: underline;
	text-decoration-color: #d8cec0;
	text-underline-offset: 3px;
}

.tjdb-list .tjdb-list-open:disabled {
	cursor: not-allowed;
	text-decoration: none;
}

/* The diamond's photo at the start of each row. */
.tjdb-list-cell-thumb {
	display: flex;
	align-items: center;
}

.tjdb-list-row .tjdb-list-cell-thumb img,
.tjdb-list-row .tjdb-list-cell-thumb .tjdb-card-placeholder {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #f8f6f2;
}

.tjdb-list-row.is-disabled .tjdb-list-cell-thumb img {
	opacity: 0.35;
}

.tjdb-list-grades {
	display: none;
	font-weight: 400;
	color: #746d64;
}

.tjdb-list-cell-compare input {
	width: 18px;
	height: 18px;
}

.tjdb-list-cell-shape {
	font-weight: 600;
}

.tjdb-list-cell-price {
	font-weight: 600;
	text-align: right;
}

.tjdb-list-cell-compare {
	text-align: center;
}

.tjdb-list-cell-sortable {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12px;
	font-weight: 700;
	color: #666 !important;
	white-space: nowrap;
}

.tjdb-list-cell-sortable:hover {
	color: #111 !important;
}

.tjdb-compare-toggle {
	border: 1px solid #d8cec0;
	background: #fff;
	border-radius: 2px;
	padding: 0.4rem 0.9rem;
	font-size: 12px;
	cursor: pointer;
}

.tjdb-compare-toggle:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.tjdb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 1.5rem;
}

.tjdb-modal {
	background: #fff;
	border-radius: 8px;
	max-width: 640px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem;
	position: relative;
}

html.tjdb-modal-open {
	overflow: hidden;
}

.tjdb-diamond-modal {
	max-width: 980px;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2.25rem;
	padding: 1.75rem;
	border-radius: 4px;
}

.tjdb-modal-close {
	position: absolute !important;
	top: 0.75rem !important;
	right: 0.75rem !important;
	background: none !important;
	border: none !important;
	line-height: 1;
	cursor: pointer;
	color: #666;
	z-index: 2;
	width: 34px !important;
	height: 34px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border-radius: 50%;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tjdb-modal-close:hover {
	background: #f4f0ea !important;
	color: #8a6b45;
}

.tjdb-modal-close-icon {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
	stroke-width: 1.8;
}

.tjdb-modal-media-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tjdb-modal-viewer {
	background: #f5f5f5;
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	width: 100%;
}

.tjdb-modal-media-frame {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: none;
}

.tjdb-modal-video-scaler {
	flex-shrink: 0;
	transform-origin: center center;
}

.tjdb-modal-video-scaler .tjdb-modal-media-frame {
	width: 100%;
	height: 100%;
}

.tjdb-modal-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A picture that has to be seen whole (the diamond on a hand). */
.tjdb-modal-image.is-whole {
	object-fit: contain;
	background: #fff;
}

.tjdb-modal-media-empty {
	color: #746d64;
	font-size: 12px;
	padding: 2rem;
	text-align: center;
}

.tjdb-modal-media-caption {
	text-align: center;
	font-size: 12px;
	color: #666;
	margin: 0.5rem 0 0;
}

.tjdb-modal-cert-preview {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.tjdb-modal-cert-preview .tjdb-modal-media-frame {
	flex: 1;
	min-height: 0;
}

.tjdb-modal-cert-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.tjdb-modal-cert-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.tjdb-modal-cert-canvas {
	max-width: 100%;
	max-height: 100%;
}

.tjdb-modal-cert-preview .tjdb-modal-cert-link {
	padding: 0.5rem;
}

.tjdb-modal-cert-link {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #876946;
	text-decoration: underline;
}

.tjdb-modal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.tjdb-modal-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	width: 64px;
	min-height: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	font: inherit;
	cursor: pointer;
}

.tjdb-modal-thumb-box {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	border: 1px solid transparent;
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.tjdb-modal-thumb:hover .tjdb-modal-thumb-box {
	border-color: #cfc8ba;
}

.tjdb-modal-thumb.active .tjdb-modal-thumb-box {
	border-color: #2f2924;
}

.tjdb-modal-thumb-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tjdb-modal-thumb-glyph {
	font-size: 13px;
	font-weight: 600;
	color: #5d564d;
}

.tjdb-modal-thumb-icon {
	width: 22px;
	height: 22px;
	color: #5d564d;
	stroke-width: 1.6;
}

.tjdb-modal-thumb-label {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: #746d64;
}

.tjdb-modal-thumb.active .tjdb-modal-thumb-label {
	font-weight: 600;
	color: #2b2926;
}

.tjdb-modal-info-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-right: 0.5rem;
}

.tjdb-modal-eyebrow {
	margin: 0 0 0.35rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #876946;
}

.tjdb-modal-info-col .tjdb-modal-title {
	margin: 0 2rem 0.5rem 0;
	font-size: 24px;
	font-weight: 200;
	line-height: 1.2;
	text-transform: none;
	color: #352b1f;
}

.tjdb-modal-price {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #876946;
	margin-bottom: 0.9rem;
}

.tjdb-modal-badges {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
}

.tjdb-modal-badge {
	background: #f2efe9;
	color: #876946;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 2px;
}

.tjdb-modal-headline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid #ece6dd;
	margin-bottom: 0.5rem;
}

.tjdb-modal-headline-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.8rem 0.25rem;
	text-align: center;
	border-left: 1px solid #ece6dd;
}

.tjdb-modal-headline-item:first-child {
	border-left: none;
}

.tjdb-modal-headline-item span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #746d64;
}

.tjdb-modal-headline-item strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #242424;
}

.tjdb-modal-spec-list {
	margin: 0 0 1.25rem;
}

.tjdb-modal-spec-list .tjdb-modal-spec-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid #ece6dd;
	font-size: 14px;
}

.tjdb-modal-spec-list dt {
	font-weight: 400;
	color: #746d64;
}

.tjdb-modal-spec-list dd {
	margin: 0;
	font-weight: 600;
	color: #242424;
	text-align: right;
}

.tjdb-modal-actions {
	margin-top: auto;
}

.tjdb-modal-actions .tjdb-error {
	margin: 0 0 0.75rem;
	font-size: 13px;
}

.tjdb-modal-actions .tjdb-modal-select {
	display: block;
	width: 100%;
	min-height: 46px;
	margin-top: 0;
	background: #2f2924 !important;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
}

.tjdb-modal-actions .tjdb-modal-select:not(:disabled):hover {
	background: #8a6b45 !important;
}

.tjdb-modal-actions .tjdb-modal-cert-link {
	margin-top: 0.75rem;
}

@media (max-width: 767px) {
	.tjdb-modal-overlay:has(.tjdb-diamond-modal) {
		padding: 0;
		align-items: stretch;
	}

	.tjdb-diamond-modal {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		max-height: none;
		height: 100%;
		padding: 1rem 1rem 0;
		border-radius: 0;
	}

	.tjdb-modal-info-col {
		padding-right: 0;
	}

	/* The primary action stays reachable however long the spec list is. */
	.tjdb-modal-actions {
		position: sticky;
		bottom: 0;
		margin: 0 -1rem;
		padding: 0.75rem 1rem;
		background: #fff;
		border-top: 1px solid #ece6dd;
	}
}

.tjdb-filters-heading-toggle {
	display: none;
}

@media (max-width: 767px) {
	/* Two diamonds per row instead of one screen-sized card each. */
	.tjdb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem 0.6rem;
	}

	/* "Back to <long setting name>" stays on one line. */
	.tjdb-back {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tjdb-complete-title {
		font-size: 22px;
	}

	.tjdb-modal-info-col .tjdb-modal-title {
		font-size: 20px;
	}

	/* Over a photo the bare × can disappear; give it a solid disc. */
	.tjdb-diamond-modal > .tjdb-modal-close {
		width: 40px !important;
		height: 40px !important;
		background: rgba(255, 255, 255, 0.92) !important;
		color: #2f2924;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	}
}

@media (max-width: 767px) {

	.tjdb-diamond-layout {
		flex-direction: column;
	}

	.tjdb-complete-layout {
		flex-direction: column;
	}

	.tjdb-complete-gallery {
		width: 100%;
	}

	.tjdb-complete-spec-grid {
		grid-template-columns: 1fr;
	}

	.tjdb-filters-panel {
		width: 100%;
	}

	/* Name (with its grades underneath), price and the compare box; the
	   separate grade columns don't fit. */
	.tjdb-list-head,
	.tjdb-list-row {
		grid-template-columns: 48px minmax(0, 1fr) auto 68px;
	}

	.tjdb-list-head > :nth-child(n + 4):not(.tjdb-list-cell-compare),
	.tjdb-list-row > :nth-child(n + 4):not(.tjdb-list-cell-compare) {
		display: none;
	}

	.tjdb-list-grades {
		display: block;
	}
}

.tjdb-error {
	color: #b32d2e;
}

/* An error with a way forward: the message, then one button. */
.tjdb-error-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1rem 0;
	padding: 1rem 1.15rem;
	border: 1px solid #ecd5d5;
	background: #fdf6f6;
}

.tjdb-error p {
	margin: 0;
}

.tjdb-error:empty {
	display: none;
}

.tjdb-error .tjdb-error-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px !important;
	margin-top: 0.5rem;
	padding: 0 1.25rem !important;
	border: 1px solid #2f2924 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none;
	color: #2f2924 !important;
	cursor: pointer;
}

.tjdb-error-block .tjdb-error-action {
	margin-top: 0;
}

.tjdb-error-link {
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #2f2924;
}

.tjdb-error .tjdb-error-action:hover {
	background: #2f2924 !important;
	color: #fff !important;
}

/* Something the builder changed on the shopper's behalf (a sold diamond
   dropped from a saved link). */
.tjdb-notice {
	margin: 1rem 0;
	padding: 0.85rem 1.15rem;
	border: 1px solid #ece6dd;
	background: #fbf8f2;
	color: #2f2924;
}

.tjdb-loading {
	color: #666;
}

/* ---- Accessibility and small-screen refinements ---- */

/* For screen readers only (the builder's live region, extra labels). */
.tjdb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Bronze text on the stepper's tinted current step and on the modal's
   badges was just under the contrast it needs; one shade darker there. */
.tjdb-modal-badge {
	color: #7a5d3a;
}

.tjdb-modal-badge.is-warning {
	background: #fdf0f0;
	color: #a12626;
}

.tjdb-complete-perks .is-warning,
.tjdb-complete-assurances .is-warning {
	color: #a12626;
}

.tjdb-empty {
	padding: 2rem 0;
	text-align: center;
}

/* Tablets: the filters panel leaves room for only one 205px card, so the
   cards get narrower there instead of filling a whole row each. */
@media (min-width: 768px) and (max-width: 1023px) {
	.tjdb-grid {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}

@media (max-width: 767px) {
	/* The modal itself scrolls, so its close button has to travel with
	   the screen, not with the content. */
	.tjdb-diamond-modal .tjdb-modal-close {
		position: sticky !important;
		top: 0.5rem !important;
		right: auto !important;
		justify-self: end;
		margin: 0 0 -2.75rem auto;
		width: 44px !important;
		height: 44px !important;
		background: rgba(255, 255, 255, 0.92) !important;
	}

	.tjdb-modal-actions {
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
	}
}

@media (max-width: 400px) {
	.tjdb-modal-headline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Product cards in the Setting step come from the theme, with its quick
   view, compare and wishlist buttons; none of them knows about the ring
   being built, so they are left out here. */
.tjdb-settings-grid .quick-view,
.tjdb-settings-grid .wd-compare-btn,
.tjdb-settings-grid .wd-wishlist-btn,
.tjdb-settings-grid .wd-buttons {
	display: none !important;
}

/* "Welcome back": pick up a build left earlier. */
.tjdb-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.tjdb-resume-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

.tjdb-resume .tjdb-error-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid #2f2924;
	background: #2f2924;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}

.tjdb-resume .tjdb-resume-dismiss,
.tjdb-copy-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #2f2924 !important;
	cursor: pointer;
}

.tjdb-copy-link {
	margin-top: 0.5rem;
}

.tjdb-copy-link-icon {
	width: 15px;
	height: 15px;
}

/* ================= Filter sidebar ================= */

/* ---- Header: title, how many filters are on, and a way to undo them ---- */

.tjdb-filters-heading {
	justify-content: space-between;
	gap: 0.75rem;
}

.tjdb-filters-panel .tjdb-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #2b2926 !important;
	/* Off phones it is a title, not a control (see syncFiltersHeading()). */
	pointer-events: none;
	cursor: default;
}

.tjdb-filters-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #2f2924;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: #fff;
}

.tjdb-filters-count[hidden],
.tjdb-filters-reset[hidden] {
	display: none !important;
}

.tjdb-filters-panel .tjdb-filters-reset {
	min-height: 0 !important;
	margin: -10px -6px;
	padding: 10px 6px !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #2f2924 !important;
	cursor: pointer;
}

.tjdb-filters-panel .tjdb-filters-reset:hover {
	color: #8a6b45 !important;
}

.tjdb-filters-footer {
	display: none;
}

/* ---- Sections: title on the left, what's chosen on the right ---- */

.tjdb-filter-section > summary {
	gap: 0.6rem;
	min-height: 24px;
}

.tjdb-filter-section > summary > span:first-child {
	flex: none;
}

.tjdb-filter-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: right;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
	color: #7a5d3a;
}

.tjdb-filter-value.is-any {
	font-weight: 400;
	color: #746d64;
}

.tjdb-filter-section > summary::after {
	flex: none;
}

.tjdb-filter-section > summary:focus-visible {
	outline: 2px solid #8a6b45;
	outline-offset: 4px;
}

.tjdb-filters-body > .tjdb-filter-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

/* ---- Natural / lab grown: one segmented control ---- */

.tjdb-filters-panel .tjdb-labgrown-option {
	min-height: 44px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #fff !important;
	color: #5d564d !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tjdb-filters-panel .tjdb-labgrown-option:hover:not(.is-active) {
	background: #fbf8f2 !important;
	color: #2f2924 !important;
}

.tjdb-filters-panel .tjdb-labgrown-option.is-active {
	background: #2f2924 !important;
	color: #fff !important;
}

/* ---- Shapes: white tiles, the chosen one outlined in bronze ---- */

.tjdb-filters-panel .tjdb-shape-option {
	min-height: 64px !important;
	padding: 0.5rem 0.15rem !important;
	border: 1px solid #e6ded3 !important;
	border-radius: 2px !important;
	background: #fff !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tjdb-filters-panel .tjdb-shape-option:hover {
	border-color: #b9ad9c !important;
}

.tjdb-filters-panel .tjdb-shape-option.is-active {
	border-color: #8a6b45 !important;
	background: #fbf8f2 !important;
	box-shadow: inset 0 0 0 1px #8a6b45 !important;
}

.tjdb-filters-panel .tjdb-shape-option:focus-visible,
.tjdb-filters-panel .tjdb-labgrown-option:focus-visible {
	outline: 2px solid #2f2924 !important;
	outline-offset: 2px;
}

.tjdb-shape-label {
	max-width: 100%;
	overflow: hidden;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #2f2924;
}

.tjdb-shape-option.is-active .tjdb-shape-label {
	font-weight: 600;
}

/* ---- Carat: exact weights can be typed ---- */

.tjdb-range-fields {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tjdb-range-fields label {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.tjdb-range-fields input {
	width: 100%;
	height: 40px !important;
	padding: 0 0.6rem !important;
	border: 1px solid #b9ad9c !important;
	border-radius: 2px !important;
	background: #fff !important;
	font-size: 14px !important;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: #2f2924 !important;
	-moz-appearance: textfield;
}

.tjdb-range-fields input::-webkit-outer-spin-button,
.tjdb-range-fields input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.tjdb-range-fields input:focus {
	border-color: #8a6b45 !important;
	box-shadow: 0 0 0 1px #8a6b45 !important;
	outline: none;
}

.tjdb-range-dash,
.tjdb-range-unit {
	flex: none;
	font-size: 13px;
	color: #746d64;
}

/* ---- Grading scales ---- */

.tjdb-range-scale {
	margin-top: 0.15rem;
	line-height: 1.25;
}

.tjdb-range-scale span {
	transition: color 0.15s ease;
}

/* ---- Chips above the results: what's narrowing the list ---- */

.tjdb-filter-chips {
	gap: 0.5rem;
}

.tjdb-chip {
	min-height: 32px;
	padding: 0 0.35rem 0 0.75rem;
	border: 1px solid #e6ded3;
	border-radius: 16px;
	background: #fff;
	font-size: 12px;
	color: #2f2924;
}

/* Type and shape are always set, so they have nothing to remove. */
.tjdb-chip:not(:has(.tjdb-chip-remove)):not(.tjdb-chip-reset) {
	padding-right: 0.75rem;
	border-color: transparent;
	background: #f4efe7;
}

.tjdb-chip .tjdb-chip-remove {
	width: 26px;
	height: 26px;
	min-height: 0 !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: #5d564d !important;
}

.tjdb-chip .tjdb-chip-remove:hover {
	background: #f4efe7 !important;
	color: #2f2924 !important;
}

.tjdb-builder .tjdb-chip-reset,
.tjdb-chip.tjdb-chip-reset {
	min-height: 32px !important;
	padding: 0 0.5rem !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #2f2924 !important;
}

.tjdb-chip-reset .tjdb-chip-icon {
	display: none;
}

/* ---- Phones: a "Filters" button, opening a full-screen sheet ---- */

@media (max-width: 767px) {
	.tjdb-filters-panel {
		padding: 0.35rem 1rem;
	}

	.tjdb-filters-panel:not(.is-open) > .tjdb-filters-heading {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.tjdb-filters-panel:not(.is-open) > :not(.tjdb-filters-heading) {
		display: none;
	}

	.tjdb-filters-panel .tjdb-filters-toggle {
		flex: 1 1 auto;
		min-height: 44px !important;
		pointer-events: auto;
		cursor: pointer;
	}

	.tjdb-filters-heading-toggle {
		display: block;
		width: 8px;
		height: 8px;
		margin-left: auto;
		margin-right: 4px;
		border: solid #8a6b45;
		border-width: 0 1.5px 1.5px 0;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.tjdb-filters-panel.is-open .tjdb-filters-heading-toggle {
		transform: rotate(-135deg);
	}

	.tjdb-filters-panel.is-open {
		padding-bottom: 1rem;
	}

	/* The diamond filters take the whole screen while open: a header that
	   stays put, the filters scrolling under it, and a button at the foot
	   that says how many diamonds they leave. */
	html.tjdb-sheet-open {
		overflow: hidden;
	}

	.tjdb-filters-panel.has-sheet.is-open {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		width: auto;
		padding: 0;
		border: none;
		animation: tjdb-sheet-in 0.22s cubic-bezier(0.2, 0, 0, 1);
	}

	.tjdb-filters-panel.has-sheet.is-open > .tjdb-filters-heading {
		flex: none;
		margin: 0;
		padding: 0.5rem 1rem;
		padding-top: calc(0.5rem + env(safe-area-inset-top));
	}

	/* Open, the title's chevron becomes a close cross. */
	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-heading-toggle {
		position: relative;
		width: 16px;
		height: 16px;
		margin-right: 0;
		border: none;
		transform: none;
	}

	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-heading-toggle::before,
	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-heading-toggle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 16px;
		height: 1.5px;
		background: #2f2924;
		transform: rotate(45deg);
	}

	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-heading-toggle::after {
		transform: rotate(-45deg);
	}

	/* Title on the left; Reset, then the close cross, on the right. */
	.tjdb-filters-panel.has-sheet.is-open > .tjdb-filters-heading {
		position: relative;
	}

	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-toggle {
		flex: 1 1 auto;
	}

	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-heading-toggle {
		margin-left: auto;
	}

	.tjdb-filters-panel.has-sheet.is-open .tjdb-filters-reset {
		position: absolute;
		top: 50%;
		right: 3.5rem;
		margin: 0;
		padding: 12px 8px !important;
		transform: translateY(-50%);
	}

	.tjdb-filters-panel.has-sheet.is-open > .tjdb-filters-body {
		flex: 1 1 auto;
		min-height: 0;
		padding: 1rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.tjdb-filters-panel.has-sheet.is-open > .tjdb-filters-footer {
		display: block;
		flex: none;
		padding: 0.75rem 1rem;
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
		border-top: 1px solid #ece6dd;
		background: #fff;
	}

	.tjdb-filters-panel .tjdb-filters-apply {
		width: 100%;
		min-height: 48px !important;
		border: none !important;
		border-radius: 0 !important;
		background: #2f2924 !important;
		box-shadow: none !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		color: #fff !important;
	}

	.tjdb-range-fields input {
		height: 44px !important;
		font-size: 16px !important;
	}
}

@keyframes tjdb-sheet-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-filters-panel.has-sheet.is-open {
		animation: none;
	}
}

/* ================= Setting filters ================= */

/* ---- Metals: swatch, name, how many, and a tick when chosen ---- */

.tjdb-filters-panel .tjdb-metal-swatch {
	min-height: 44px !important;
	padding: 0.4rem 0.1rem !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: background-color 0.15s ease;
}

.tjdb-filters-panel .tjdb-metal-swatch:hover {
	background: #fbf8f2 !important;
}

.tjdb-filters-panel .tjdb-metal-swatch:focus-visible {
	outline: 2px solid #2f2924 !important;
	outline-offset: -2px;
}

.tjdb-metal-swatch-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 400;
	color: #2f2924;
}

.tjdb-metal-swatch-count {
	flex: none;
	font-size: 12px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: #746d64;
}

.tjdb-metal-swatch-check {
	flex: none;
	width: 16px;
	height: 16px;
	stroke-width: 2.25;
	color: #8a6b45;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.tjdb-metal-swatch.is-active .tjdb-metal-swatch-check {
	opacity: 1;
}

/* ---- Price: typed amounts, with the currency in front ---- */

.tjdb-range-fields-money label {
	position: relative;
	display: block;
}

.tjdb-range-prefix {
	position: absolute;
	top: 50%;
	left: 0.65rem;
	font-size: 14px;
	color: #746d64;
	transform: translateY(-50%);
	pointer-events: none;
}

.tjdb-range-fields-money input {
	padding-left: 1.5rem !important;
	text-align: left;
}

/* ---- Sort sits over the results, to the right ---- */

.tjdb-settings-toolbar {
	justify-content: flex-end;
}

@media (max-width: 767px) {
	.tjdb-settings-toolbar {
		justify-content: flex-start;
	}

	.tjdb-metal-swatch-grid {
		max-height: none;
	}
}

/* The chips keep their distance from the panel below, as on the diamond step. */
#tjdb-settings-active-filters:not(:empty) {
	margin-bottom: 1.25rem;
}

/* "Sort by" stays on one line beside its menu. */
.tjdb-sort-select {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
}

/* An empty box shows where the range ends, in a lighter tone than a typed
   amount so the two can be told apart. */
.tjdb-range-fields input::placeholder {
	color: #8c857b !important;
	opacity: 1;
}

/* ---- Compare modal ---- */

/* A fixed header (title, differences switch, close), the table scrolling
   underneath it in both directions, and a one-line footer. The modal is
   as wide as its columns need, never wider than the screen: `%` here
   resolves against the overlay, which is pinned to the real viewport. */
.tjdb-compare-modal {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: 100%;
	/* One diamond alone still gets a modal wide enough for its footer. */
	min-width: min(460px, 100%);
	max-height: 90vh;
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
}

.tjdb-compare-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0.85rem 0.85rem 1.5rem;
	border-bottom: 1px solid #ece6dd;
	flex-shrink: 0;
}

.tjdb-compare-head h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 auto 0 0;
	font-size: 1.05rem;
}

.tjdb-compare-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: #f7f3ee;
	color: #7a5d3a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.tjdb-compare-modal .tjdb-modal-close {
	position: static !important;
	width: 40px !important;
	height: 40px !important;
	flex-shrink: 0;
}

/* "Differences only": a real checkbox drawn as a switch. */
.tjdb-compare-diff {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 40px;
	margin: 0;
	font-size: 13px;
	color: #3a342e;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.tjdb-compare-diff-track {
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: #b9b0a4;
	transition: background-color 0.15s ease;
	flex-shrink: 0;
}

.tjdb-compare-diff-track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.tjdb-compare-diff input:checked + .tjdb-compare-diff-track {
	background: #2f2924;
}

.tjdb-compare-diff input:checked + .tjdb-compare-diff-track::after {
	transform: translateX(14px);
}

.tjdb-compare-diff input:focus-visible + .tjdb-compare-diff-track {
	outline: 2px solid #8a6b45;
	outline-offset: 2px;
}

.tjdb-compare-scroll {
	overflow: auto;
	overscroll-behavior: contain;
	min-height: 0;
	padding: 0 1.5rem;
}

.tjdb-compare-table {
	border-collapse: separate;
	border-spacing: 0;
	width: auto;
	margin: 0;
}

.tjdb-compare-table th,
.tjdb-compare-table td {
	padding: 0.5rem 1rem;
	border: 0;
	border-bottom: 1px solid #ece6dd;
	text-align: center;
	font-size: 14px;
	color: #1a1a1a;
	background: #fff;
}

.tjdb-compare-table tbody tr:last-child > *,
.tjdb-compare-table tbody tr:nth-last-child(2) > * {
	border-bottom: 0;
}

/* Row labels stay put while the diamond columns scroll sideways. */
.tjdb-compare-table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	padding-left: 0;
	text-align: left;
	white-space: nowrap;
	color: #5f584f;
	font-weight: 600;
	font-size: 12px;
}

/* The diamonds and their buttons stay in view however far down the
   specs go. */
.tjdb-compare-table thead > tr > * {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 1rem 0.5rem 0.9rem;
	vertical-align: top;
	border-bottom: 1px solid #d8cec0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.tjdb-compare-table thead > tr > .tjdb-compare-corner {
	left: 0;
	z-index: 3;
}

.tjdb-compare-col {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 184px;
}

.tjdb-compare-view {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: inherit !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	cursor: pointer;
	border-radius: 4px;
}

.tjdb-compare-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 50%;
	background: #f8f6f2;
	margin: 0 auto 0.55rem;
	transition: box-shadow 0.15s ease;
}

.tjdb-compare-thumb-empty {
	border: 1px dashed #d8cec0;
	color: #a79c8d;
}

.tjdb-compare-thumb-empty svg {
	width: 34px;
	height: 34px;
}

.tjdb-compare-view:hover .tjdb-compare-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #8a6b45;
}

.tjdb-compare-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
}

.tjdb-compare-sub,
.tjdb-compare-details,
.tjdb-compare-chosen,
.tjdb-compare-reason {
	/* The header cell takes the theme's display face; only the diamond's
	   name keeps it. */
	font-family: var(--wd-text-font, inherit);
}

.tjdb-compare-sub {
	font-size: 12px;
	color: #5f584f;
}

.tjdb-compare-details {
	margin-top: 0.2rem;
	font-size: 12px;
	color: #7a5d3a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tjdb-compare-view:hover .tjdb-compare-details {
	color: #2f2924;
}

.tjdb-compare-chosen,
.tjdb-compare-reason {
	margin-top: 0.45rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tjdb-compare-chosen {
	color: #7a5d3a;
}

.tjdb-compare-reason {
	color: #a12626;
}

/* The one thing this modal is for, in the bronze the table already uses
   for its highlights: clearly the action, without shouting over the
   stones. */
.tjdb-compare-select {
	width: auto;
	min-width: 104px;
	min-height: 34px !important;
	margin-top: 0.65rem !important;
	padding: 0 1.1rem !important;
	border: 1px solid #7a5d3a !important;
	border-radius: 999px !important;
	background: #7a5d3a !important;
	color: #fff !important;
	font-family: var(--wd-text-font, inherit) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tjdb-compare-select:not(:disabled):hover {
	background: #5f4729 !important;
	border-color: #5f4729 !important;
}

.tjdb-compare-select:disabled {
	background: #f1ede7 !important;
	border-color: #e3dcd1 !important;
	color: #6f675d !important;
	cursor: not-allowed;
}

/* Removing is the lesser action: a quiet corner control, labelled for
   screen readers with the diamond it removes. */
.tjdb-compare-remove {
	position: absolute !important;
	top: -0.6rem;
	right: 0;
	z-index: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: #6f675d !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tjdb-compare-remove:hover {
	background: #fdf0f0 !important;
	color: #a12626 !important;
}

.tjdb-compare-remove-icon {
	width: 15px !important;
	height: 15px !important;
	stroke-width: 2;
	flex-shrink: 0;
}

.tjdb-compare-modal button:focus-visible {
	outline: 2px solid #8a6b45 !important;
	outline-offset: 2px;
}

.tjdb-compare-value {
	font-variant-numeric: tabular-nums;
}

/* What every diamond shares steps back, so the differences read first. */
.tjdb-compare-table tr.is-same td {
	color: #6f675d;
}

.tjdb-compare-table.is-diff-only tr.is-same {
	display: none;
}

.tjdb-compare-allsame {
	display: none;
}

.tjdb-compare-table.is-diff-only tbody:not(:has(tr:not(.is-same):not(.tjdb-compare-allsame))) .tjdb-compare-allsame {
	display: table-row;
}

.tjdb-compare-allsame td {
	padding: 1.5rem 1rem !important;
	color: #5f584f !important;
}

.tjdb-compare-table td.tjdb-compare-best {
	background: #f7f3ee;
	color: #7a5d3a;
	font-weight: 700;
}

.tjdb-compare-best-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.5;
	vertical-align: -1px;
	margin-left: 0.3rem;
	color: #7a5d3a;
}

.tjdb-compare-delta {
	display: block;
	font-size: 12px;
	color: #5f584f;
	font-variant-numeric: tabular-nums;
}

.tjdb-compare-foot {
	flex-shrink: 0;
	position: relative;
	padding: 0.7rem 1.5rem;
	border-top: 1px solid #ece6dd;
	background: #fbf9f6;
	/* A soft edge over the table: there may be more rows to scroll to. */
	box-shadow: 0 -8px 14px -10px rgba(47, 41, 36, 0.28);
}

.tjdb-compare-foot:empty {
	display: none;
}

.tjdb-compare-status {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5f584f;
}

.tjdb-compare-status .tjdb-compare-best-icon {
	margin: 0 0.15rem 0 0;
}

.tjdb-compare-undo {
	min-height: 0 !important;
	padding: 0.25rem 0.4rem !important;
	border: 0 !important;
	background: none !important;
	color: #2f2924 !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.tjdb-compare-empty {
	padding: 2.5rem 3rem;
	text-align: center;
	min-width: min(420px, 100%);
}

.tjdb-compare-empty p {
	margin: 0 0 1rem;
	color: #3a342e;
}

.tjdb-compare-back {
	min-height: 42px !important;
	padding: 0 1.25rem !important;
	border: 1px solid #2f2924 !important;
	border-radius: 2px !important;
	background: #fff !important;
	color: #2f2924 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 767px) {
	.tjdb-modal-overlay:has(.tjdb-compare-modal) {
		padding: 0;
		align-items: stretch;
	}

	.tjdb-compare-modal {
		width: 100%;
		max-height: none;
		height: 100%;
		border-radius: 0;
	}

	.tjdb-compare-head {
		padding: 0.5rem 0.5rem 0.5rem 1rem;
		gap: 0.6rem;
	}

	.tjdb-compare-modal .tjdb-modal-close {
		width: 44px !important;
		height: 44px !important;
	}

	.tjdb-compare-diff {
		min-height: 44px;
	}

	.tjdb-compare-scroll {
		padding: 0;
		flex: 1;
	}

	/* No room for a label column beside up to four diamonds: each label
	   becomes a band across the full width with its values underneath,
	   so every column fits without scrolling sideways. */
	.tjdb-compare-table,
	.tjdb-compare-table thead,
	.tjdb-compare-table tbody {
		display: block;
		width: 100%;
	}

	.tjdb-compare-table tr {
		display: grid;
		grid-template-columns: repeat(var(--tjdb-compare-cols, 2), minmax(0, 1fr));
	}

	.tjdb-compare-table.is-diff-only tr.is-same {
		display: none;
	}

	.tjdb-compare-table thead {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.tjdb-compare-table thead > tr > * {
		position: static;
		padding: 0.9rem 0.3rem 0.75rem;
	}

	.tjdb-compare-table thead > tr > .tjdb-compare-corner {
		display: none;
	}

	.tjdb-compare-col {
		width: auto;
	}

	.tjdb-compare-thumb {
		width: 56px;
		height: 56px;
	}

	.tjdb-compare-title {
		font-size: 13px;
	}

	.tjdb-compare-sub,
	.tjdb-compare-details {
		font-size: 11.5px;
	}

	/* Slimmer to look at, still a full 44px to tap. */
	.tjdb-compare-select {
		position: relative;
		min-width: 0;
		width: calc(100% - 0.6rem);
		min-height: 36px !important;
		padding: 0 0.25rem !important;
	}

	.tjdb-compare-select::after {
		content: '';
		position: absolute;
		inset: -4px 0;
	}

	.tjdb-compare-remove {
		top: -0.75rem;
		right: -0.2rem;
		width: 40px !important;
		height: 40px !important;
	}

	.tjdb-compare-table tbody th {
		position: static;
		grid-column: 1 / -1;
		padding: 0.35rem 1rem;
		border-bottom: 0;
		background: #f7f3ee;
		color: #4a443d;
		font-size: 11px;
	}

	.tjdb-compare-table tbody td {
		padding: 0.6rem 0.3rem;
		font-size: 13px;
		border-bottom: 0;
		overflow-wrap: anywhere;
	}

	.tjdb-compare-table td.tjdb-compare-best {
		background: #fff;
	}

	.tjdb-compare-best-icon {
		margin-left: 0.15rem;
	}

	.tjdb-compare-table.is-diff-only tbody:not(:has(tr:not(.is-same):not(.tjdb-compare-allsame))) .tjdb-compare-allsame {
		display: block;
	}

	.tjdb-compare-allsame td {
		display: block;
	}

	.tjdb-compare-foot {
		padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
	}
}

/* Reading across a row is easier with the row under the pointer marked. */
@media (hover: hover) {
	.tjdb-compare-table tbody tr:hover > th,
	.tjdb-compare-table tbody tr:hover > td:not(.tjdb-compare-best) {
		background: #fcfaf7;
	}
}

/* The column of the diamond already on the ring. */
.tjdb-compare-col-head.is-chosen .tjdb-compare-thumb {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #7a5d3a;
}

.tjdb-compare-modal.is-entering {
	animation: tjdb-compare-in 0.18s ease-out;
}

@keyframes tjdb-compare-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}
}

/* The toolbar button once there is something to open. */
.tjdb-compare-toggle.has-items {
	border-color: #7a5d3a;
	color: #5f4729;
	font-weight: 600;
}

.tjdb-compare-toggle.has-items:hover {
	background: #f7f3ee;
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-compare-modal.is-entering {
		animation: none;
	}

	.tjdb-compare-diff-track,
	.tjdb-compare-diff-track::after,
	.tjdb-compare-thumb {
		transition: none;
	}
}

/* ---- Complete step: setting and diamond as accordions ---- */

.tjdb-complete-part {
	display: block;
	padding: 0;
}

.tjdb-complete-part > summary {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.9rem 0;
	list-style: none;
	cursor: pointer;
}

.tjdb-complete-part > summary::-webkit-details-marker {
	display: none;
}

.tjdb-complete-part > summary:focus-visible {
	outline: 2px solid #8a6b45;
	outline-offset: 2px;
}

.tjdb-complete-part-body,
.tjdb-complete-part-body > span {
	display: block;
}

.tjdb-complete-part-toggle {
	font-size: 13px;
	color: #7a5d3a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tjdb-complete-part > summary:hover .tjdb-complete-part-toggle {
	color: #2f2924;
}

.tjdb-complete-part[open] .tjdb-when-closed,
.tjdb-complete-part:not([open]) .tjdb-when-open {
	display: none;
}

.tjdb-complete-part-chevron {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin: 0.35rem 0.25rem 0 0.1rem;
	border-right: 1.5px solid #8a6b45;
	border-bottom: 1.5px solid #8a6b45;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.tjdb-complete-part[open] .tjdb-complete-part-chevron {
	margin-top: 0.6rem;
	transform: rotate(-135deg);
}

/* Lined up under the name, past the thumbnail. */
.tjdb-complete-part-details {
	padding: 0 0 1.1rem calc(56px + 0.9rem);
}

.tjdb-complete-part-summary {
	margin: 0 0 0.75rem;
	font-size: 13px;
	line-height: 1.55;
	color: #4a443d;
	/* One line per paragraph or list item of the product's description. */
	white-space: pre-line;
}

.tjdb-complete-specs {
	margin: 0 0 0.85rem;
	border-top: 1px solid #f1ece4;
}

.tjdb-complete-specs > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid #f1ece4;
	font-size: 13px;
}

.tjdb-complete-specs dt {
	margin: 0;
	font-weight: 400;
	color: #5f584f;
}

.tjdb-complete-specs dd {
	margin: 0;
	font-weight: 600;
	color: #242424;
	text-align: right;
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.tjdb-complete-part-details {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-complete-part-chevron {
		transition: none;
	}
}

/* ---- Shape tiles: a two-word shape (Elongated Cushion) wraps ---- */

.tjdb-shape-label {
	white-space: normal;
	text-align: center;
	text-overflow: clip;
	overflow: visible;
}

/* Two lines of whole words, a touch smaller so "Elongated" fits a tile. */
.tjdb-shape-label.is-long {
	font-size: 10.5px;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* Beside the results, the panel narrows gradually with the window (292px
   down to 250px) instead of dropping to the smaller width in one step. */
@media (min-width: 768px) {
	.tjdb-step-diamonds .tjdb-diamond-layout {
		gap: clamp(1.5rem, 3.5vw, 2.25rem);
	}

	.tjdb-step-diamonds .tjdb-filters-panel {
		width: clamp(250px, 28.5vw, 292px);
	}
}

/* The tiles' names follow the width of the grid they sit in, so the
   longest ("Marquise", "Elongated") still fit the narrowest tiles. */
.tjdb-shape-grid {
	container-type: inline-size;
}

.tjdb-shape-label {
	font-size: clamp(10px, 4.9cqw, 12px);
}

.tjdb-shape-label.is-long {
	font-size: clamp(9px, 4.3cqw, 10.5px);
}

/* A chosen shape's name is thickened in place: a heavier font weight is
   wider, and pushed the longer names out of their tiles. */
.tjdb-shape-option.is-active .tjdb-shape-label {
	font-weight: 400;
	-webkit-text-stroke: 0.35px currentColor;
}

/* ---- Complete step: ways to ask about the ring ---- */

.tjdb-enquiry {
	margin: 1.25rem 0 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid #ece6dd;
}

.tjdb-enquiry-title {
	margin: 0 0 0.6rem;
	font-size: 13px;
	font-weight: 600;
	color: #242424;
}

.tjdb-enquiry-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tjdb-enquiry-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0 0.9rem;
	border: 1px solid #d8cec0;
	border-radius: 999px;
	background: #fff;
	color: #2f2924 !important;
	font-size: 13px;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tjdb-enquiry-link:hover {
	border-color: #7a5d3a;
	background: #f7f3ee;
}

.tjdb-enquiry-link:focus-visible {
	outline: 2px solid #8a6b45;
	outline-offset: 2px;
}

.tjdb-enquiry-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #7a5d3a;
}

@media (max-width: 767px) {
	.tjdb-enquiry-link {
		min-height: 44px;
	}
}

/* ---- Diamond price filter: two amounts side by side ---- */

.tjdb-price-fields label {
	flex: 1 1 0;
	min-width: 0;
}

/* ---- Recently viewed diamonds ---- */

.tjdb-recent:empty {
	display: none;
}

.tjdb-recent {
	margin: 0 0 1rem;
	padding: 0.75rem 0 0.85rem;
	border-bottom: 1px solid #ece6dd;
}

.tjdb-recent-title {
	margin: 0 0 0.5rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5f584f;
}

/* Up to five tiles sharing the row. Where there isn't room for them at
   a readable width they wrap onto more rows: nothing scrolls sideways. */
.tjdb-recent-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tjdb-recent-list li {
	min-width: 0;
	margin: 0;
}

/* A couple of stones on a wide row stay tile-sized rather than stretching. */
@media (min-width: 768px) {
	.tjdb-recent-list {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	}
}

/* Phones: two to a row. */
@media (max-width: 479px) {
	.tjdb-recent-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tjdb-recent-item {
	display: flex !important;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: flex-start !important;
	gap: 0.55rem;
	min-height: 48px !important;
	padding: 0.25rem 0.75rem 0.25rem 0.3rem !important;
	border: 1px solid #e3dcd1 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #242424 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tjdb-recent-item:hover {
	border-color: #7a5d3a !important;
	background: #fbf9f6 !important;
}

.tjdb-recent-item:focus-visible {
	outline: 2px solid #8a6b45 !important;
	outline-offset: 2px;
}

.tjdb-recent-item img,
.tjdb-recent-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	background: #f5f2ed;
}

.tjdb-recent-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a79c8d;
}

.tjdb-recent-thumb svg {
	width: 20px;
	height: 20px;
}

.tjdb-recent-text,
.tjdb-recent-text > span {
	display: block;
	min-width: 0;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A long name ("1.20ct Elongated Cushion") takes a second line rather
   than being cut short. */
.tjdb-recent-text > .tjdb-recent-name {
	white-space: normal;
	font-size: 12.5px;
	font-weight: 600;
}

.tjdb-recent-price {
	font-size: 12px;
	color: #5f584f;
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-recent-item {
		transition: none;
	}
}

/* ---- Complete step: other plugins' content above the button ---- */

.tjdb-slot:empty {
	display: none;
}

.tjdb-slot {
	margin: 0 0 0.75rem;
}

/* ---- Shape artwork ---- */

/* The shape filter's drawn icons: files with their own colours, shown at
   the size they were drawn for. */
.tjdb-shape-icon.is-drawn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.tjdb-shape-icon.is-drawn img {
	width: auto;
	height: 28px;
	max-width: none;
	display: block;
}

/* A chosen diamond's shape picture is a cut-out on a clear square: shown
   whole, never cropped to fill. */
.tjdb-complete-part-thumb img[src*='/images/shapes/'] {
	object-fit: contain;
}

.tjdb-complete-part-thumb img[src*='/images/shapes/'] {
	mix-blend-mode: normal;
}

/* ---- Compare: the diamond already on the ring ----
   A tick in the corner of its column and a tint down the column. The
   tick is placed over the column, so the header keeps its height. */

.tjdb-compare-chosen {
	position: absolute;
	top: 4px;
	left: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #7a5d3a;
	color: #fff;
	line-height: 1;
	box-shadow: 0 0 0 2px #fff;
}

.tjdb-compare-chosen-icon {
	width: 12px;
	height: 12px;
	stroke-width: 3;
	flex-shrink: 0;
}

/* Said, not shown: the tick and the tinted column carry it visually. */
.tjdb-compare-chosen-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tjdb-compare-table thead > tr > .tjdb-compare-col-head.is-chosen,
.tjdb-compare-table tbody td.is-chosen {
	background: #fbf8f4;
}

.tjdb-compare-table tbody td.is-chosen.tjdb-compare-best {
	background: #f3ece2;
}

.tjdb-compare-col-head.is-chosen .tjdb-compare-chosen {
	box-shadow: 0 0 0 2px #fbf8f4;
}

@media (hover: hover) {
	.tjdb-compare-table tbody tr:hover > td.is-chosen:not(.tjdb-compare-best) {
		background: #f8f3ec;
	}
}

@media (max-width: 767px) {
	.tjdb-compare-chosen {
		top: 0;
		left: 2px;
	}

	.tjdb-compare-table td.is-chosen.tjdb-compare-best {
		background: #fbf8f4;
	}
}

/* ---- Diamond photos: shown square, not cut to a circle ----
   A circle suits a round stone and nothing else: it clips the corners off
   a princess, an emerald or a radiant, which are what tell them apart.
   A lightly rounded square shows every shape whole. */
.tjdb-compare-thumb {
	border-radius: 8px;
}

.tjdb-recent-item img,
.tjdb-recent-thumb {
	border-radius: 6px;
}

.tjdb-recent-item {
	border-radius: 10px !important;
}

/* ---- Complete step: a photo opened large ---- */

.tjdb-lightbox {
	background: rgba(20, 17, 14, 0.92);
	padding: 3.5rem 4rem;
	cursor: zoom-out;
}

.tjdb-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #f5f5f5;
	cursor: default;
}

.tjdb-lightbox-button {
	position: absolute !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tjdb-lightbox-button:hover {
	background: rgba(255, 255, 255, 0.24) !important;
}

.tjdb-lightbox-button:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px;
}

.tjdb-lightbox-icon {
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0;
}

.tjdb-lightbox-close {
	top: 0.75rem;
	right: 0.75rem;
}

.tjdb-lightbox-prev,
.tjdb-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}

.tjdb-lightbox-prev {
	left: 0.75rem;
}

.tjdb-lightbox-next {
	right: 0.75rem;
}

.tjdb-lightbox-count {
	position: absolute;
	top: 1.35rem;
	left: 1.25rem;
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.8);
}

/* Phones: the photo gets the full width, the arrows sit over its edges. */
@media (max-width: 767px) {
	.tjdb-lightbox {
		padding: 3.5rem 0;
	}

	.tjdb-lightbox-prev {
		left: 0.4rem;
	}

	.tjdb-lightbox-next {
		right: 0.4rem;
	}

	.tjdb-lightbox-prev,
	.tjdb-lightbox-next {
		background: rgba(20, 17, 14, 0.45) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-lightbox-button {
		transition: none;
	}
}

/* ---- Complete step on phones: "Add to basket" kept within reach ----
   Below 768px the step is one column, and the real button sits under the
   whole photo gallery, well over a screen down. This bar (made by
   builder.js, which shows it only while the real button is off screen)
   holds the ring's total and a copy of the button. It looks like the
   diamond modal's own sticky action bar. */
.tjdb-sticky-bar {
	display: none;
}

@media (max-width: 767px) {
	:root {
		--tjdb-sticky-bar-height: 64px;
	}

	.tjdb-sticky-bar.is-visible {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		/* Where Woodmart puts its own sticky add-to-cart bar: under its
		   scroll-to-top button (350) and far under the modals (100000). */
		z-index: 340;
		display: flex;
		align-items: center;
		/* Total and button together at the right: the bottom-left corner
		   is where another plugin shows its "Get 10% off" badge. */
		justify-content: flex-end;
		gap: 0.85rem;
		box-sizing: border-box;
		min-height: calc(var(--tjdb-sticky-bar-height) + env(safe-area-inset-bottom));
		padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #ece6dd;
	}

	/* Never over a modal or the filters sheet. */
	html.tjdb-modal-open .tjdb-sticky-bar.is-visible,
	html.tjdb-sheet-open .tjdb-sticky-bar.is-visible {
		display: none;
	}

	.tjdb-sticky-bar-total {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		min-width: 0;
		line-height: 1.25;
		white-space: nowrap;
	}

	.tjdb-sticky-bar-label {
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #746d64;
	}

	.tjdb-sticky-bar-price {
		font-size: 16px;
		font-weight: 600;
		color: #242424;
	}

	.tjdb-sticky-bar-button {
		flex: 0 0 auto;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 1.25rem !important;
		border: 0 !important;
		border-radius: 2px !important;
		background: #2f2924 !important;
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.07em !important;
		text-transform: uppercase !important;
		cursor: pointer;
	}

	.tjdb-sticky-bar-button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.tjdb-sticky-bar-button:focus-visible {
		outline: 2px solid #8a6b45 !important;
		outline-offset: 2px;
	}

	/* Room under the page's last content, so the bar never sits on it.
	   Kept for as long as the bar exists, shown or not, so the page
	   doesn't change length as it comes and goes. */
	html.tjdb-sticky-bar-on body {
		padding-bottom: calc(var(--tjdb-sticky-bar-height) + env(safe-area-inset-bottom));
	}

	/* The theme's scroll-to-top button would sit on the bar's button. */
	html.tjdb-sticky-bar-on .scrollToTop {
		bottom: calc(12px + var(--tjdb-sticky-bar-height) + env(safe-area-inset-bottom));
	}

	/* Woodmart's phone toolbar (55px, when the theme has it switched on)
	   keeps the foot of the screen: the bar sits on top of it. */
	body.sticky-toolbar-on .tjdb-sticky-bar.is-visible {
		bottom: 55px;
		min-height: var(--tjdb-sticky-bar-height);
		padding-bottom: 0.6rem;
	}

	html.tjdb-sticky-bar-on body.sticky-toolbar-on {
		padding-bottom: calc(55px + var(--tjdb-sticky-bar-height));
	}

	html.tjdb-sticky-bar-on body.sticky-toolbar-on .scrollToTop {
		bottom: calc(12px + 55px + var(--tjdb-sticky-bar-height));
	}
}