.tjdb-builder {
	max-width: 1240px;
	margin: 0 auto;
	font-family: inherit;
	color: #2b2926;
}

.tjdb-stepper {
	--tjdb-step-h: 88px;
	--tjdb-step-line: #ddd6cb;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 0.55fr;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	width: 100%;
	height: var(--tjdb-step-h);
	margin: 0 0 1.75rem;
	padding: 0;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--tjdb-step-line);
	border-radius: 4px;
	/* Clips the chevrons to the bar and gives the rounded outer corners. */
	overflow: hidden;
}

.tjdb-stepper.tjdb-stepper-preview {
	margin-bottom: 1rem;
}

.tjdb-stepper.tjdb-stepper-top {
	max-width: none;
	width: 100%;
	margin: 1rem 0 1.5rem;
}

nav.tjdb-stepper > .tjdb-stepper-segment {
	--tjdb-step-bg: #fff;
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: var(--tjdb-step-bg);
	color: inherit;
	text-align: left;
	line-height: 1.3;
	transition: background-color 0.15s ease;
}

/* The divider between steps: a square rotated 45° and squashed sideways,
   so it reads as a shallow, soft-tipped chevron rather than a sharp
   arrowhead. It carries its own step's background, which is what makes
   the current/hovered step's tint flow into the tip. */
nav.tjdb-stepper > .tjdb-stepper-segment:not(:last-of-type)::after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	width: calc(var(--tjdb-step-h) * 0.7071);
	height: calc(var(--tjdb-step-h) * 0.7071);
	box-sizing: border-box;
	background: var(--tjdb-step-bg);
	border: solid var(--tjdb-step-line);
	border-width: 2px 2px 0 0;
	border-top-right-radius: 8px;
	transform: translate(50%, -50%) scaleX(0.3) rotate(45deg);
	pointer-events: none;
	transition: background-color 0.15s ease;
}

nav.tjdb-stepper > .tjdb-stepper-segment.is-current {
	--tjdb-step-bg: #f7f3ee;
}

nav.tjdb-stepper > .tjdb-stepper-segment.is-clickable:hover {
	--tjdb-step-bg: #fbf9f6;
}

nav.tjdb-stepper .tjdb-stepper-segment-content {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 0.6rem 1.5rem 0.6rem 1.85rem;
	box-sizing: border-box;
}

nav.tjdb-stepper > .tjdb-stepper-segment:first-child .tjdb-stepper-segment-content {
	padding-left: 1.25rem;
}

nav.tjdb-stepper > .tjdb-stepper-segment:last-of-type .tjdb-stepper-segment-content {
	padding-right: 1.1rem;
}

nav.tjdb-stepper > .tjdb-stepper-intro .tjdb-stepper-segment-content {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tjdb-stepper-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #cfc8ba;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #746d64;
	flex-shrink: 0;
}

nav.tjdb-stepper > .tjdb-stepper-segment.is-completed .tjdb-stepper-circle {
	color: #8a6b45;
	border-color: #8a6b45;
}

nav.tjdb-stepper > .tjdb-stepper-segment.is-current .tjdb-stepper-circle {
	background: #8a6b45;
	border-color: #8a6b45;
	color: #fff;
}

.tjdb-stepper-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	min-width: 0;
	flex: 1;
}

.tjdb-stepper-kicker {
	display: none;
}

/* The label is the step's main link/button; its ::after stretches over
   the whole segment so the entire step is the click target, while the
   Change / View actions sit above it as their own targets. */
nav.tjdb-stepper .tjdb-stepper-label {
	display: block;
	max-width: 100%;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6f685e !important;
}

nav.tjdb-stepper .is-current .tjdb-stepper-label,
nav.tjdb-stepper .is-completed .tjdb-stepper-label {
	color: #1a1a1a !important;
}

nav.tjdb-stepper a.tjdb-stepper-label,
nav.tjdb-stepper button.tjdb-stepper-label {
	cursor: pointer;
}

nav.tjdb-stepper a.tjdb-stepper-label::after,
nav.tjdb-stepper button.tjdb-stepper-label::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

nav.tjdb-stepper a.tjdb-stepper-label:focus-visible,
nav.tjdb-stepper button.tjdb-stepper-label:focus-visible {
	outline: none !important;
}

nav.tjdb-stepper a.tjdb-stepper-label:focus-visible::after,
nav.tjdb-stepper button.tjdb-stepper-label:focus-visible::after {
	outline: 2px solid #8a6b45;
	outline-offset: -3px;
}

.tjdb-stepper-detail {
	max-width: 100%;
	font-size: 12px;
	color: #8a6b45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tjdb-stepper-actions {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.tjdb-stepper-actions > * + *::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.7em;
	margin-right: 0.45rem;
	background: #cfc8ba;
}

.tjdb-stepper-detail-short {
	display: none;
}

/* The visible text stays small; the padding (cancelled out by the negative
   margin, so nothing moves) is what makes it a 44px-tall target. */
nav.tjdb-stepper .tjdb-stepper-action {
	display: inline-flex;
	align-items: center;
	min-height: 0 !important;
	margin: -14px -6px;
	padding: 14px 6px !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	color: #1a1a1a !important;
	cursor: pointer;
}

nav.tjdb-stepper .tjdb-stepper-action:hover {
	color: #8a6b45 !important;
}

/* What's chosen so far, a row each: phones only (see the stepper's
   small-screen rules), where the steps themselves have no room for it. */
nav.tjdb-stepper .tjdb-stepper-summary {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tjdb-stepper-icon {
	margin-left: auto;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: #d6cdbf;
	stroke-width: 1.5;
}

.tjdb-stepper-check {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

.tjdb-stepper-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
	margin-left: auto;
	background: #f5f5f5;
}

.tjdb-archive-build-button {
	border-radius: 2px !important;
	background: #2f2924 !important;
	color: #fff !important;
	border: 1px solid #2f2924 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	padding: 0.78rem 1rem !important;
}

.tjdb-archive-build-button:hover {
	background: #8a6b45 !important;
	border-color: #8a6b45 !important;
	color: #fff !important;
}

/* Look (colours, height, type) comes entirely from the theme's own
   accented button — .btn.btn-accent, the same style as its add-to-cart
   button. Only the width is set here. */
.tjdb-single-build-button {
	display: flex;
	width: 100%;
}

.tjdb-variation-price {
	font-weight: 600;
	margin: 0.5rem 0 1rem;
}

@media (max-width: 1289px) {
	.tjdb-stepper {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	nav.tjdb-stepper > .tjdb-stepper-intro {
		display: none;
	}

	nav.tjdb-stepper > .tjdb-stepper-intro + .tjdb-stepper-segment .tjdb-stepper-segment-content {
		padding-left: 1.25rem;
	}
}

@media (max-width: 1023px) {
	nav.tjdb-stepper .tjdb-stepper-segment-content {
		gap: 0.6rem;
		padding-right: 1.1rem;
	}

	.tjdb-stepper-icon {
		display: none;
	}

	/* What's chosen is cut down to its price: the product's name ahead of
	   it used up the line, and the price was what got cut off. */
	.tjdb-stepper-detail-full {
		display: none;
	}

	.tjdb-stepper-detail-short {
		display: inline;
	}
}

/* Phones: a slim row of the three steps, each named in one word on one
   line, and under it a full-width row for each thing chosen so far — its
   price and its Change / View actions, which on a small screen are the
   only way back into a step. Three columns can't hold all of that. */
@media (max-width: 767px) {
	.tjdb-stepper {
		--tjdb-step-h: 56px;
		grid-auto-flow: row;
		grid-template-rows: var(--tjdb-step-h) auto;
		/* As wide as its name needs, rather than a third each. */
		grid-template-columns: repeat(3, minmax(0, auto));
		height: auto;
		counter-reset: tjdb-step;
	}

	nav.tjdb-stepper > .tjdb-stepper-segment {
		height: var(--tjdb-step-h);
	}

	nav.tjdb-stepper > .tjdb-stepper-segment:not(.tjdb-stepper-intro) {
		counter-increment: tjdb-step;
	}

	nav.tjdb-stepper > .tjdb-stepper-segment:not(:last-of-type)::after {
		transform: translate(50%, -50%) scaleX(0.22) rotate(45deg);
		border-width: 3px 3px 0 0;
	}

	nav.tjdb-stepper .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-segment:first-child .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-segment:last-of-type .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-intro + .tjdb-stepper-segment .tjdb-stepper-segment-content {
		justify-content: center;
		padding: 0 0.6rem 0 0.9rem;
	}

	.tjdb-stepper-text {
		flex: 0 1 auto;
	}

	/* No room for the round badge: the step's number (a tick once it's
	   chosen) is written at the start of its name instead. */
	.tjdb-stepper-circle,
	.tjdb-stepper-label-extra,
	.tjdb-stepper-segment .tjdb-stepper-thumb,
	.tjdb-stepper-segment .tjdb-stepper-detail,
	.tjdb-stepper-segment .tjdb-stepper-actions {
		display: none;
	}

	nav.tjdb-stepper .tjdb-stepper-label {
		font-size: 12px !important;
		letter-spacing: 0.04em !important;
	}

	nav.tjdb-stepper .tjdb-stepper-label::before {
		content: counter(tjdb-step) '. ';
		color: #7a5d3a;
	}

	nav.tjdb-stepper .is-completed:not(.is-current) .tjdb-stepper-label::before {
		content: '\2713\00a0';
	}

	nav.tjdb-stepper .tjdb-stepper-summary {
		display: block;
		grid-column: 1 / -1;
		border-top: 1px solid var(--tjdb-step-line);
	}

	nav.tjdb-stepper .tjdb-stepper-summary-row {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 56px;
		margin: 0;
		padding: 0 0.9rem;
		list-style: none;
		line-height: 1.3;
	}

	nav.tjdb-stepper .tjdb-stepper-summary-row + .tjdb-stepper-summary-row {
		border-top: 1px solid #f0ebe3;
	}

	.tjdb-stepper-summary-row .tjdb-stepper-thumb {
		width: 30px;
		height: 30px;
		margin-left: 0;
	}

	.tjdb-stepper-summary-name {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #1a1a1a;
	}

	.tjdb-stepper-summary-price {
		font-size: 13px;
		color: #7a5d3a;
		white-space: nowrap;
	}

	.tjdb-stepper-summary-row .tjdb-stepper-actions {
		margin-left: auto;
		gap: 0.7rem;
	}

	.tjdb-stepper-summary-row .tjdb-stepper-actions > * + *::before {
		margin-right: 0.7rem;
	}

	nav.tjdb-stepper .tjdb-stepper-summary-row .tjdb-stepper-action {
		font-size: 13px !important;
	}
}

/* The narrowest phones: the last few pixels "Diamond" and "Complete" need. */
@media (max-width: 359px) {
	nav.tjdb-stepper .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-segment:first-child .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-segment:last-of-type .tjdb-stepper-segment-content,
	nav.tjdb-stepper > .tjdb-stepper-intro + .tjdb-stepper-segment .tjdb-stepper-segment-content {
		padding: 0 0.3rem 0 0.7rem;
	}

	nav.tjdb-stepper .tjdb-stepper-label {
		letter-spacing: 0 !important;
	}
}

/* ---- A built ring in the basket, checkout summary and side basket ----
   Basket page: two rows (setting, diamond) and a "Ring total" row, sharing
   a tinted background and a bronze bar down the left edge. The parts carry
   quiet prices; the emphasised figure is the ring total beneath them.
   Checkout summary and side basket: one line for the whole ring with the
   two parts as detail lines under its name. Hierarchy comes from size,
   weight and contrast, and every part is labelled in text, so nothing
   depends on colour alone. */

.tjdb-cart-label {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #876946;
}

.tjdb-cart-diamond-name {
	display: block;
	color: #242424;
}

.tjdb-cart-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.9rem;
	margin-top: 0.2rem;
	font-size: 12px;
	color: #746d64;
}

/* Label and value stay together when the line wraps. */
.tjdb-cart-spec {
	white-space: nowrap;
}

.tjdb-cart-spec strong {
	font-weight: 600;
	color: #242424;
}

.tjdb-cart-diamond-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tjdb-cart-diamond-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}

.tjdb-cart-diamond-icon {
	width: 22px;
	height: 22px;
	color: #746d64;
}

/* Component prices: regular weight, muted — clearly "part of", not "the
   price". Tabular figures keep the pence lined up. */
.tjdb-cart-part-price,
.tjdb-cart-part-price .amount {
	font-size: 13px;
	font-weight: 400 !important;
	font-variant-numeric: tabular-nums;
	color: #746d64 !important;
}

/* -- Basket page (table) -- */

/* The empty row that absorbs the cart template's closing tags after the
   ring's rows (see CartIntegration::cart_row_subtotal()). The theme
   forces rows to display on phones, hence !important. */
.woocommerce-cart-form .tjdb-cart-ring-end {
	display: none !important;
}

.woocommerce-cart-form .tjdb-cart-ring > td {
	background: #fbf8f2;
}

.woocommerce-cart-form .tjdb-cart-ring > td:first-child {
	box-shadow: inset 3px 0 0 #8a6b45;
}

/* Keeps the figures off the edge of the tinted block. */
.woocommerce-cart-form .tjdb-cart-ring > td:last-child {
	padding-right: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart-form .tjdb-cart-ring-setting > td,
.woocommerce-cart-form .tjdb-cart-ring-diamond > td {
	border-bottom: none !important;
	padding-bottom: 0.6rem;
}

.woocommerce-cart-form .tjdb-cart-ring-diamond > td,
.woocommerce-cart-form .tjdb-cart-ring-total > td {
	border-top: none !important;
	padding-top: 0.6rem;
}

.woocommerce-cart-form .tjdb-cart-ring .tjdb-cart-label {
	font-size: 12px;
	margin-bottom: 0.2rem;
}

.woocommerce-cart-form .tjdb-cart-ring .tjdb-cart-specs {
	font-size: 13px;
	margin-top: 0.3rem;
}

.woocommerce-cart-form .tjdb-cart-ring .tjdb-cart-part-price,
.woocommerce-cart-form .tjdb-cart-ring .tjdb-cart-part-price .amount {
	font-size: 14px;
}

.woocommerce-cart-form .tjdb-cart-ring-total > td {
	padding-top: 0;
	padding-bottom: 1rem;
	vertical-align: middle;
}

/* The rule above the total sits under the name/price/quantity columns
   and the subtotal, like the line under a column of figures. */
.woocommerce-cart-form .tjdb-cart-ring-total > .tjdb-cart-total-cell,
.woocommerce-cart-form .tjdb-cart-ring-total > .product-subtotal {
	border-top: 1px solid #e3d9c9 !important;
	padding-top: 0.75rem;
}

.tjdb-cart-total-cell {
	text-align: right;
}

.tjdb-cart-total-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #242424;
}

.tjdb-cart-total-note {
	margin-left: 0.6rem;
	font-size: 13px;
	color: #746d64;
}

.tjdb-cart-ring-total .product-subtotal,
.tjdb-cart-ring-total .product-subtotal .amount {
	font-size: 17px;
	font-weight: 600;
}

/* Remove button: the theme's own style, just nudged up and to the right
   so it sits nearer the corner of the block than the middle of the row. */
.woocommerce-cart-form .tjdb-cart-ring .product-remove a.remove {
	position: relative;
	top: -10px;
	left: 5px;
}

/* Stacked (phone) basket. Below 769px the theme turns every row into a
   block of stacked cells with the image pinned in a 115px gutter on the
   left. The group styling therefore moves from the cells to the rows:
   three rows that butt together into one tinted card with the bronze
   bar, the cells that only exist to hold the desktop columns are
   dropped, and each part shows its price on one labelled line. */
@media (max-width: 768.98px) {
	.woocommerce-cart-form .tjdb-cart-ring {
		gap: 4px;
		min-height: 0;
		margin-bottom: 0 !important;
		padding: 14px 14px 10px 127px !important;
		border-bottom: none !important;
		background: #fbf8f2;
		box-shadow: inset 3px 0 0 #8a6b45;
	}

	.woocommerce-cart-form .tjdb-cart-ring-setting,
	.woocommerce-cart-form .tjdb-cart-ring-diamond {
		min-height: 128px;
	}

	.woocommerce-cart-form .tjdb-cart-ring-total {
		margin-bottom: 15px !important;
		padding: 0 14px 14px 127px !important;
	}

	.woocommerce-cart-form .tjdb-cart-ring > td {
		background: none;
		box-shadow: none !important;
		border: none !important;
		padding: 0 !important;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-price,
	.woocommerce-cart-form .tjdb-cart-ring > .product-quantity,
	.woocommerce-cart-form .tjdb-cart-ring-diamond > .product-remove,
	.woocommerce-cart-form .tjdb-cart-ring-total > .product-remove,
	.woocommerce-cart-form .tjdb-cart-ring-total > .product-thumbnail,
	.woocommerce-cart-form .tjdb-cart-ring-total > .tjdb-cart-total-cell {
		display: none !important;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-thumbnail {
		top: 14px;
		left: 14px;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-thumbnail img,
	.woocommerce-cart-form .tjdb-cart-ring > .product-thumbnail .tjdb-cart-diamond-placeholder {
		width: 100px;
		min-width: 100px;
	}

	/* Room for the remove button beside the setting's label. */
	.woocommerce-cart-form .tjdb-cart-ring-setting > .product-name {
		padding-right: 26px !important;
	}

	/* Tucked into the card's top-right corner. */
	.woocommerce-cart-form .tjdb-cart-ring-setting > .product-remove {
		top: 2px;
		right: 2px;
	}

	.woocommerce-cart-form .tjdb-cart-ring .product-remove a.remove {
		top: 0;
		left: 0;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-name {
		display: block;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-subtotal {
		font-size: 14px;
	}

	.woocommerce-cart-form .tjdb-cart-ring > .product-subtotal::before {
		color: #746d64;
	}

	.woocommerce-cart-form .tjdb-cart-ring-total > .product-subtotal {
		padding-top: 10px !important;
		border-top: 1px solid #e3d9c9 !important;
	}

	.woocommerce-cart-form .tjdb-cart-ring-total > .product-subtotal::before {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #242424;
	}
}

/* -- Checkout summary and side basket (same three rows) -- */

/* The empty row/item that absorbs each template's closing tags after the
   ring's rows. */
.woocommerce-checkout-review-order-table .tjdb-cart-ring-end,
.woocommerce-mini-cart .tjdb-cart-ring-end {
	display: none !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring > td {
	background: #fbf8f2;
	box-shadow: inset 3px 0 0 #8a6b45;
	padding-left: 14px !important;
	padding-right: 12px !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-setting,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-setting > td,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-diamond,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-diamond > td {
	border-bottom: 0 !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-diamond,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-diamond > td,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-total,
.woocommerce-checkout-review-order-table .tjdb-cart-ring-total > td {
	border-top: 0 !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-setting > td {
	padding-bottom: 8px !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-diamond > td {
	padding-top: 8px !important;
	padding-bottom: 10px !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-total > td {
	padding-top: 0 !important;
	padding-bottom: 12px !important;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-total .wd-checkout-prod-cont {
	width: 100%;
	align-items: baseline;
	padding-top: 10px;
	border-top: 1px solid #e3d9c9;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring .cart-product-label {
	display: block;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring .wd-checkout-prod-total,
.woocommerce-mini-cart .tjdb-cart-ring .quantity {
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table .tjdb-cart-ring-total .wd-checkout-prod-total .amount,
.woocommerce-mini-cart .tjdb-cart-ring-total .quantity .amount {
	font-size: 16px;
	font-weight: 600;
	color: #876946;
}

/* Side basket: the tinted background alone marks the group — no bar. */
.woocommerce-mini-cart .tjdb-cart-ring {
	background: #fbf8f2;
}

.woocommerce-mini-cart .tjdb-cart-ring-setting,
.woocommerce-mini-cart .tjdb-cart-ring-diamond {
	border-bottom: 0 !important;
	padding-bottom: 8px !important;
}

.woocommerce-mini-cart .tjdb-cart-ring-diamond {
	padding-top: 8px !important;
}

.woocommerce-mini-cart .tjdb-cart-ring-total {
	padding-top: 0 !important;
}

.woocommerce-mini-cart .tjdb-cart-ring-total .cart-info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	padding-top: 10px;
	border-top: 1px solid #e3d9c9;
}

/* A setting's product page has no add-to-cart form for the theme's sticky
   bar to copy (see Frontend\BuilderButton::filter_body_class()). */
.tjdb-setting-product .wd-sticky-btn {
	display: none !important;
}

/* 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. */
nav.tjdb-stepper .is-current .tjdb-stepper-detail {
	color: #7a5d3a;
}

.tjdb-stepper-segment:focus {
	outline: none;
}

/* Basket: back into the builder with this ring loaded. */
/* It sits at the far left of the "Ring total" row, under the remove
   button and the photos. */
.woocommerce-cart-form .tjdb-cart-ring-total > .tjdb-cart-edit-cell {
	padding-left: 18px;
	text-align: left;
	white-space: nowrap;
}

@media (max-width: 768.98px) {
	/* Stacked basket: in the empty image gutter, level with the total. */
	.woocommerce-cart-form .tjdb-cart-ring-total > .tjdb-cart-edit-cell {
		position: absolute;
		left: 14px;
		bottom: 8px;
		padding-left: 0 !important;
	}
}

.tjdb-cart-edit {
	display: inline-block;
	padding: 0.5rem 0;
	font-size: 13px;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	color: #2f2924;
}

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

/* The builder's short notices (e.g. the comparison is full). */
.tjdb-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	z-index: 100001;
	max-width: calc(100% - 2rem);
	padding: 0.75rem 1.1rem;
	border-radius: 4px;
	background: #2f2924;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}

.tjdb-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

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

@media (prefers-reduced-motion: reduce) {

	.tjdb-toast {
		transition: none;
	}
}

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

/* ---- Ring photos: white backgrounds blended away ----
   Setting photos are shot on white. Multiplying them onto what's behind
   makes the white take that colour, so the ring sits on the surface
   instead of in a white box: in the stepper (also on product pages) and
   on a ring's rows in the basket, checkout and side basket. It only works
   on light surfaces, which is all these are. The shape cut-outs are
   already transparent and are left as they are. */
/* No tile behind either kind of thumbnail: the step's own background
   shows through the cut-out, and through the blended photo. */
.tjdb-stepper-thumb {
	background: transparent;
}

.tjdb-stepper-thumb:not([src*='/images/shapes/']) {
	mix-blend-mode: multiply;
}

.tjdb-cart-ring .product-thumbnail img:not([src*='/images/shapes/']),
.tjdb-cart-ring .wd-checkout-prod-img img:not([src*='/images/shapes/']),
.tjdb-cart-ring .cart-item-image img:not([src*='/images/shapes/']) {
	mix-blend-mode: multiply;
}

/* ---- Setting's product page: diamond shape picker ---- */

.tjdb-shape-picker {
	margin: 0 0 1.25rem;
}

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

.tjdb-shape-picker-name {
	margin-left: 0.4rem;
	font-weight: 400;
	color: #5f584f;
}

.tjdb-shape-picker-name:empty {
	display: none;
}

.tjdb-shape-picker-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.5rem;
}

.tjdb-shape-picker-option {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 0;
	min-height: 76px !important;
	padding: 0.55rem 0.25rem !important;
	border: 1px solid #e3dcd1 !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #242424 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tjdb-shape-picker-option img {
	width: 30px;
	height: 30px;
}

.tjdb-shape-picker-option span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tjdb-shape-picker-option:hover:not(:disabled) {
	border-color: #7a5d3a !important;
	background: #fbf9f6 !important;
}

.tjdb-shape-picker-option.is-active {
	border-color: #2f2924 !important;
	box-shadow: inset 0 0 0 1px #2f2924 !important;
	background: #fbf9f6 !important;
}

.tjdb-shape-picker-option:focus-visible {
	outline: 2px solid #8a6b45 !important;
	outline-offset: 2px;
}

.tjdb-shape-picker-option:disabled {
	opacity: 0.4;
	cursor: default;
}

.tjdb-shape-picker-note {
	margin: 0.55rem 0 0;
	font-size: 12px;
	color: #5f584f;
}

@media (prefers-reduced-motion: reduce) {
	.tjdb-shape-picker-option {
		transition: none;
	}
}

/* ===== A built ring on an order (templates/order/ring-rows.php) =====
   The ring's line in the order's table, then a row per part under it. The
   rows read as one entry: only the last carries the table's rule, and
   what a part cost is plain beside the line's own total. */
.woocommerce-table--order-details tr.tjdb-ring-row > td {
	vertical-align: top;
}

.woocommerce-table--order-details tr.tjdb-ring-row:not(.tjdb-ring-row--last) > td {
	padding-bottom: 0;
	border-bottom: 0;
}

.woocommerce-table--order-details tr.tjdb-ring-row--part > td,
.woocommerce-table--order-details tr.tjdb-ring-row--foot > td {
	padding-top: 10px;
}

/* The theme ends every row's last cell at the right. */
.woocommerce-table--order-details.shop_table tr.tjdb-ring-row--foot > td:last-child {
	text-align: start;
}

/* The theme halves the table between its two columns, which breaks a
   ring's name over two lines beside a short amount. With a ring in it, the
   amounts take the width they need and the names the rest, so a name and
   its amount share a line. */
.woocommerce-table--order-details:has(.tjdb-ring-row) :is(th, td) {
	width: auto;
	max-width: none;
}

.woocommerce-table--order-details tr.tjdb-ring-row > td.product-total {
	white-space: nowrap;
}

/* The ring's name heads its rows: a little larger and heavier than the
   parts under it. */
.woocommerce-table--order-details tr.tjdb-ring-row--ring > td.product-name {
	font-size: 1.1em;
	font-weight: 500;
}

.woocommerce-table--order-details tr.tjdb-ring-row--ring > td.product-name > a {
	font-size: inherit;
	font-weight: inherit;
}

/* A part's name runs on into what it is, in the same type and only a
   little heavier; the line wraps where the cell ends. */
.tjdb-ring-part-label {
	font-weight: 500;
}

/* The line's total stays the one amount that stands out. */
.woocommerce-table--order-details td.tjdb-ring-part-price,
.woocommerce-table--order-details td.tjdb-ring-part-price .amount {
	color: #6b6b6b;
	font-weight: inherit;
}

.tjdb-ring-foot > span {
	display: block;
}

.tjdb-ring-foot > a {
	text-decoration: underline;
}