/* === CTD global design system ====================================================
   Shared site-wide styles (see CLAUDE.md > Design system). Linked once in
   journal3/template/common/header.twig, after custom.css; Journal prints its generated
   <style> blocks and Journal > Custom CSS after this file, so where Journal sets the same
   property the selectors below carry extra specificity. Standalone pages outside OpenCart
   (e.g. mydesign/success.php) link this file directly. */

:root {
	--ctd-gold: #C2A559;
	--ctd-gold-hover: #B3944F;
	--ctd-white: #FFFFFF;
	--ctd-black: #000000;

	--ctd-footer-bg: var(--ctd-black);
	--ctd-footer-title: var(--ctd-gold);
	--ctd-footer-text: var(--ctd-white);

	--ctd-radius: 6px;
	--ctd-card-border: #DDDDDD;
	--ctd-border-dark: #444444;

	/* #4728 Diamond shape icons: the size of the shape tiles on /diamonds/
	   (.search-card .shape-img in the search templates). */
	--ctd-shape-icon: 50px;
}
@media (max-width: 900px) {
	:root {
		--ctd-shape-icon: 40px;
	}
}
@media (max-width: 600px) {
	:root {
		--ctd-shape-icon: 32px;
	}
}

/* #100095 No sideways scroll at any width: the home page measured 1488px wide in a 1440px
   desktop window. custom.css already hid horizontal overflow below 769px only; this extends
   it to every width. "clip" (not "hidden") does not turn body into a scroll container, so
   sticky headers keep working; "hidden" on html is the fallback for browsers without clip. */
html {
	overflow-x: hidden;
	overflow-x: clip;
	overflow-y: scroll;   /* the page scrollbar lives on html (Journal had it on body) */
}
body {
	overflow-x: clip;
}
/* Sticky product image (Luke 18 Oct): Journal's "html:not(.popup) body { overflow-x: hidden;
   overflow-y: scroll }" makes body a scroll container that never scrolls (html clips, so body's
   overflow isn't passed to the window), and position: sticky inside it never sticks. The product
   image column (.product-left-wrapper, sticky top 160px in Journal) now stays put while the
   details scroll, and sticky works site-wide. :root lifts specificity above Journal's rule. */
html:root:not(.popup) body {
	overflow-x: clip;
	overflow-y: visible;
}

/* #4654 Numbers in headings: Cormorant Garamond draws old-style figures by default, so a
   "1" sits at lower-case height and reads as a small "I" ("1 Carat Oval Diamonds").
   Lining figures make every digit full cap height. Set on body so it reaches every
   heading and Journal title module; Outfit already uses lining figures, so body text is
   unchanged. */
body {
	font-variant-numeric: lining-nums;
}

/* #4671 Footer: black background, gold titles, white text.
   Journal colours every footer module from its colour-scheme variables, so the footer
   gets its own values for them instead of one override per module. Journal builds those
   colours from HSL parts, so the hex values above are repeated here as H/S/L. */
body footer > div {
	background-color: var(--ctd-footer-bg);
}
footer {
	--j-color-scheme-foreground-primary-h: 43.4;      /* #C2A559 - titles */
	--j-color-scheme-foreground-primary-s: 46.3%;
	--j-color-scheme-foreground-primary-l: 55.5%;
	--j-color-scheme-foreground-primary-a: 1;
	--j-color-scheme-foreground-secondary-h: 0;       /* #FFFFFF - links, address */
	--j-color-scheme-foreground-secondary-s: 0%;
	--j-color-scheme-foreground-secondary-l: 100%;
	--j-color-scheme-foreground-secondary-a: 1;
	--j-color-scheme-foreground-tertiary-h: 0;        /* #FFFFFF - copyright line */
	--j-color-scheme-foreground-tertiary-s: 0%;
	--j-color-scheme-foreground-tertiary-l: 100%;
	--j-color-scheme-foreground-tertiary-a: 1;
}
/* The footer logo file is dark grey artwork; render it white on the black footer. */
footer img[src*="logo-grey"] {
	filter: brightness(0) invert(1);
}

/* #4727 [D] / #4730 [B] Mobile bottom menu (Home / Account / Email / Call us): white labels
   on the gold bar, in every state. Covers both copies Journal prints (page bar and the one
   inside the mobile menu). !important: Journal prints the module's font colour and any
   Journal > Custom CSS after this file. Icons keep their Journal colour. */
body .bottom-menu > ul > li > a .links-text,
body .bottom-menu > ul > li > a:hover .links-text,
body .bottom-menu > ul > li > a:active .links-text,
body .bottom-menu > ul > li > a:focus-visible .links-text {
	color: var(--ctd-white) !important;
}

/* #4731 [A] Button labels centred on every button, horizontally and vertically, including
   labels that wrap onto two lines. Journal's .btn is an inline-flex box but block, plain
   <button> and <input> buttons fall back to the browser or template alignment. Text-style
   links (.btn-link) and dropdown toggles keep their own alignment. */
body .btn:not(.btn-link):not(.dropdown-toggle),
body .button,
body button[type="submit"],
body input[type="submit"],
body input[type="button"] {
	text-align: center;
}
body .btn:not(.btn-link):not(.dropdown-toggle) {
	justify-content: center;
	align-items: center;
}

/* #4675 Breadcrumbs: every crumb is a working link, including the last one (the current
   page). Journal's style.min.css sets ".breadcrumb>li:last-of-type{pointer-events:none}",
   which made it unclickable; on the diamond search pages it is the way back to the
   unfiltered listing. */
ul.breadcrumb > li:last-of-type {
	pointer-events: auto;
}

/* Breadcrumbs too big (Luke 2 Nov 2026): labels are shortened in library ctd/breadcrumb_label.
   Journal breaks crumbs mid-word (word-break: break-all); wrap between words instead, and keep the
   current page's crumb (often a long product name, shown in full in the H1) to one line. */
ul.breadcrumb > li {
	word-break: normal;
	overflow-wrap: anywhere;
}

ul.breadcrumb > li:last-of-type {
	min-width: 0;
	max-width: 100%;
}

ul.breadcrumb > li:last-of-type > a {
	display: inline-block;
	max-width: min(42ch, 100%);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Fallback for old browsers: with overflow hidden an inline-block's baseline is its bottom
	   edge (sat ~5px low), so pin it to the top instead (sits ~5px high). */
	vertical-align: top;
}

/* overflow: clip still shows the ellipsis but keeps the text baseline, so the current page's
   crumb sits on the same line as the others (Luke 2 Nov 2026: last crumb sat ~5px high). */
@supports (overflow: clip) {
	ul.breadcrumb > li:last-of-type > a {
		overflow: clip;
		vertical-align: baseline;
	}
}

/* #4660 "?" help icon: a "?" stacked on a speech bubble (fa-comment-o + fa-question).
   Journal's style.min.css resizes .fa-stack (15px, 1.1em x 1em, line-height 1) while the
   Font Awesome 4 rules still size the children for a 2em box, so the two glyphs sat on
   different line boxes and the "?" spilled out of the top of the bubble. Both glyphs are
   drawn centred on their em box, so filling the stack with each and centring them lines
   the "?" up in the middle of the bubble. Colour is left as inherited. */
.fa-stack:has(> .fa-comment-o.fa-stack-2x) {
	font-size: 15px;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	vertical-align: middle;
}
.fa-stack > .fa-comment-o.fa-stack-2x,
.fa-stack > .fa-question.fa-stack-1x {
	position: absolute;
	inset: 0;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.fa-stack > .fa-comment-o.fa-stack-2x {
	font-size: 1.2em;
}
.fa-stack > .fa-question.fa-stack-1x {
	font-size: 0.55em;
}

/* #4707 Diamond cards (diamond search, natural/lab and coloured searches, their AJAX results,
   upsell and "similar diamonds" on the diamond page). The second selector in each rule
   matches the diamond page's own two-id rules in diamond/product.twig.
   [B]-[E] Every card gets a 1px border and 6px corners; every second card (B, C) sits on
   white, the others (D, E) keep the grey background. The search templates print a later
   ".filter-product { border-top }" rule, hence the wrapper in the selector. */
.filter-product-wrapper > .filter-product,
#product-product #relatedDiamonds .filter-product-wrapper > .filter-product {
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
}
.filter-product-wrapper:nth-child(even of .filter-product-wrapper) > .filter-product,
#product-product #relatedDiamonds .filter-product-wrapper:nth-child(even of .filter-product-wrapper) > .filter-product {
	background: var(--ctd-white);
}
/* [A] Certificate badge (the image includes the "Traditionally Mined Diamond" line) 30%
   smaller. The image otherwise fills the card width (img-fluid). */
.filter-product .certi-img img,
#product-product #relatedDiamonds .filter-product .certi-img img {
	width: 70%;
}
/* #100030 No gap between the last line of the diamond details and the certificate badge:
   drop the empty placeholder printed where a "Special Offer" banner would go, and the
   badge's top margin (the templates set "margin: 20px 0"). */
.filter-product .right > div:empty {
	display: none;
}
.filter-product .certi-img img,
#product-product #relatedDiamonds .filter-product .certi-img img {
	margin-top: 0;
}
/* [A] The three buttons 30% smaller. zoom scales their height, padding, font and gaps
   together; the percentage widths are unaffected, so they still span the card. The AJAX
   results (product/dautosuggestion) print "Design with us" outside .enq-btn-wrapper. */
.filter-product .right .enq-btn-wrapper,
.filter-product .right > div > .design-btn-wrapper {
	zoom: 0.7;
}

/* #100196 "Load more diamonds" under the coloured diamond lists, which now show 24 stones at a time */
.ctd-load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 24px 0 30px;
}
.ctd-load-more-wrap .ctd-load-more {
	min-width: 240px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: inherit;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}
.ctd-load-more-wrap .ctd-load-more:hover,
.ctd-load-more-wrap .ctd-load-more:focus-visible {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
	color: var(--ctd-white);
}
.ctd-load-more-wrap .ctd-load-more[disabled] {
	opacity: 0.7;
	cursor: wait;
}

/* #4708 [A] Diamond searches (diamond, natural/lab and coloured): "Advanced Search" and
   "Search Diamonds" one identical box. custom.css (#4659) sizes both 240 x 48px; the
   templates also give the gold <button> "border:none!important" and the outline link a 1px
   border, and the <a> and <button> pick up different theme defaults. Here both get the same
   border-box, the same 1px border (the gold button's in its own colour) and a locked
   height, so neither can come out smaller. */
#product-diamond-search .ctd-search-row .search-actions {
	align-items: stretch;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
#product-diamond-search .ctd-search-row .search-actions .search-btn {
	box-sizing: border-box !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-width: 1px !important;
	border-style: solid !important;
	line-height: 1;
}
#product-diamond-search .ctd-search-row .search-actions .search-btn {
	border-color: var(--ds-gold) !important;
}

/* #4716 / #4720 Diamond searches (diamond, natural/lab and coloured): one centred column under
   the filters. "Your options" with the chosen diamond (diamond_search.js writes it), the
   "↑ to change or refine" link back up to the filters, then "Advanced Search" (#252525) and
   "Fast Search" (gold) side by side, white upper case text centred in both, on one line,
   one width and one type style, then "Diamonds from £X to £Y" centred under the buttons. The budget field
   and arrow button (#4716) are gone; the budget stays in the filter card. The block sits
   outside the filter card, so the options and buttons are hidden whenever the card is, by
   the same rules as #4674 in custom.css and the inline style diamond_search.js puts on it. */
#product-diamond-search .ctd-search-row {
	--ctd-search-col: 310px; /* wide enough for "CLOSE ADVANCED SEARCH" on one line */
	--ctd-advanced-bg: #252525;
	--ds-gold: var(--ctd-gold);
	--ds-bg: #f8f6f3;
	--ds-text: #1a1a1a;
	--ds-text2: #4a4a4a;
	--ds-muted: #71717a;
	--ds-border: #e5e5e5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	text-align: center;
}
#product-diamond-search .ctd-search-row .ctd-your-options {
	max-width: 100%;
	color: var(--ds-text);
}
#product-diamond-search .ctd-search-row .ctd-your-options p {
	margin: 0;
}
#product-diamond-search .ctd-search-row .ctd-your-options-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}
#product-diamond-search .ctd-search-row .ctd-your-options-trail,
#product-diamond-search .ctd-search-row .ctd-your-options-budget {
	font-size: 16px;
	line-height: 1.5;
}
#product-diamond-search .ctd-search-row .ctd-your-options-budget {
	font-weight: 500;
}
#product-diamond-search .ctd-search-row .ctd-your-options-hint {
	font-size: 10px;
	line-height: 1.4;
}
/* A 44px tap target; the negative margin keeps it from pushing the block apart. */
#product-diamond-search .ctd-search-row .ctd-options-change {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -12px 0;
	padding: 0 12px;
	color: var(--ds-text2);
	text-decoration: underline;
}
#product-diamond-search .ctd-search-row .ctd-options-change:hover,
#product-diamond-search .ctd-search-row .ctd-options-change:focus {
	color: var(--ds-gold);
}
#product-diamond-search .ctd-search-row .search-actions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 16px;
	padding: 0;
	background: none;
}
/* Both buttons share one type style: white, upper case, centred (custom.css #4659 sets 500
   weight, no capitals). */
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
#product-diamond-search .ctd-search-row .search-actions .search-btn {
	flex: 0 0 var(--ctd-search-col);
	width: var(--ctd-search-col) !important; /* custom.css #4659 sets 240px !important */
	justify-content: center;
	padding-right: 12px;
	padding-left: 12px;
	color: var(--ctd-white) !important;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap !important;
}
/* Labels stay on one line (#4720 update 3). */
#product-diamond-search .ctd-search-row .search-actions .toggle-text,
#product-diamond-search .ctd-search-row .search-actions .ctd-btn-label {
	flex: 0 0 auto;
	white-space: nowrap !important;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle:hover,
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle:focus,
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle.active {
	background-color: var(--ctd-advanced-bg);
	border-color: var(--ctd-advanced-bg) !important;
	color: var(--ctd-white);
}
#product-diamond-search .ctd-search-row .ctd-diamond-range-bar {
	width: 100%;
	margin: 0;
	padding: 0;
}
#product-diamond-search .ctd-search-row .ctd-diamond-range {
	color: var(--ds-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}
html.route-product-coloured #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .ctd-your-options,
html.route-product-naturallabdynamic #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .ctd-your-options,
#product-diamond-search.ctd-rs-collapsed .ctd-search-row .ctd-your-options,
#product-diamond-search #searchoptioncontainer[style*="none"] ~ .ctd-search-row .ctd-your-options,
html.route-product-coloured #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .search-actions,
html.route-product-naturallabdynamic #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .search-actions,
#product-diamond-search.ctd-rs-collapsed .ctd-search-row .search-actions,
#product-diamond-search #searchoptioncontainer[style*="none"] ~ .ctd-search-row .search-actions {
	display: none;
}
/* Phone: the two buttons full width, one under the other (680px: two 310px buttons no longer fit). */
@media (max-width: 680px) {
	#product-diamond-search .ctd-search-row {
		align-items: stretch;
	}
	#product-diamond-search .ctd-search-row .search-actions {
		flex-direction: column;
		gap: 12px;
	}
	#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
	#product-diamond-search .ctd-search-row .search-actions .search-btn {
		flex: 0 0 auto;
		width: 100% !important;
	}
}

/* #4708 [B]-[D] A 10px gap between diamond cards, across and down: search results (first
   page and AJAX pages) and "Related diamonds" on the diamond page. Replaces the Bootstrap
   gutter, the 30px bottom margin and the phone rule that took the side padding off. */
#searchres_diamond .row:has(> .filter-product-wrapper),
#product-product #relatedDiamonds .row:has(> .filter-product-wrapper) {
	margin-right: -5px;
	margin-left: -5px;
}
#searchres_diamond .row > .filter-product-wrapper,
#product-product #relatedDiamonds .row > .filter-product-wrapper {
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
}

/* #4708 [E]-[H] Card buttons 15% taller (same width) with a larger label. Sizes are before
   the 0.7 zoom above. "Full Details" / "Add Jewellery": 44px -> 51px, label 15px -> 18px.
   "Design with us" took its height from Journal's button settings (about 53px, measured from
   the tweak screenshot): now 61px, same 18px label. The AJAX results wrap it in
   .design-with-us-btn, the templates do not. */
.filter-product .enq-btn-wrapper .feature-btn > a.btn,
#product-product #relatedDiamonds .filter-product .enq-btn-wrapper .feature-btn > a.btn {
	height: 51px;
	line-height: 51px;
	font-size: 18px;
	white-space: nowrap;
}
.filter-product .design-btn-wrapper a.btn,
#product-product #relatedDiamonds .filter-product .design-btn-wrapper a.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 61px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
}

/* #4711 [C] [D] One gold (#C2A559) on the diamond search buttons. "Refine Search" and
   "Design with us" are Journal .btn-primary buttons with no colour of their own, so they
   showed Journal's button-setting gold instead of the brand gold the other buttons use
   ("Search Diamonds", the budget arrow, "Add Jewellery"). Hover matches the search button. */
#product-diamond-search #refinesubmitsearch_d,
.filter-product .design-btn-wrapper a.btn,
#product-product #relatedDiamonds .filter-product .design-btn-wrapper a.btn {
	border-color: var(--ctd-gold);
	background-color: var(--ctd-gold);
	color: var(--ctd-white);
}
#product-diamond-search #refinesubmitsearch_d:hover,
#product-diamond-search #refinesubmitsearch_d:focus-visible,
.filter-product .design-btn-wrapper a.btn:hover,
.filter-product .design-btn-wrapper a.btn:focus-visible,
#product-product #relatedDiamonds .filter-product .design-btn-wrapper a.btn:hover,
#product-product #relatedDiamonds .filter-product .design-btn-wrapper a.btn:focus-visible {
	border-color: var(--ctd-gold-hover);
	background-color: var(--ctd-gold-hover);
	color: var(--ctd-white);
}

/* #4655 [D] "Contact Us" panel (Call / WhatsApp / Book a Call / Email Us) shown in place of
   an image: after the sub-categories on category pages (product/category.twig) and at the
   right of every main menu drop-down (#4710, journal3/module/main_menu.twig). Same shape as
   the images beside it (--ctd-vcard-ratio, set by the scripts from their width/height).
   #4717 [A] The panel stays exactly that shape (never grows), so the caption under it lines
   up with the captions under the images. [C] The four links are squares, sized from the
   panel (container query units) to the largest that fit beside and below each other. */
.category-page-contact-panel {
	--ctd-contact-pad: 8px;
	--ctd-contact-gap: 6px;
	--ctd-contact-heading: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ctd-contact-gap);
	aspect-ratio: var(--ctd-vcard-ratio, 1 / 1);
	padding: var(--ctd-contact-pad);
	box-sizing: border-box;
	container-type: size;
	overflow: hidden;
}
.category-page-contact-heading {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	line-height: var(--ctd-contact-heading);
	white-space: nowrap;
}
.category-page-contact-links {
	--ctd-contact-square: min((100cqw - var(--ctd-contact-gap)) / 2, (100cqh - var(--ctd-contact-heading) - 2 * var(--ctd-contact-gap)) / 2);
	display: grid;
	grid-template-columns: repeat(2, var(--ctd-contact-square));
	grid-auto-rows: var(--ctd-contact-square);
	gap: var(--ctd-contact-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.category-page-contact-links > li {
	min-width: 0;
	min-height: 0;
}
.category-page-contact-panel .category-page-contact-links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 100%;
	padding: 2px;
	box-sizing: border-box;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	color: inherit;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.category-page-contact-panel .category-page-contact-links a:hover,
.category-page-contact-panel .category-page-contact-links a:focus-visible {
	border-color: var(--ctd-gold);
}

/* Clive 5 Nov 2026: Contact Us card on category pages (product/category.twig). No canvas behind
   the buttons: the image slot loses its border, white fill, corners and shadow, so the page shows
   around and between them. "Contact Us" sits above, and the four buttons together fill the same
   width and height as the category images beside them (--ctd-vcard-ratio), two by two with the
   same gap as before. Each button keeps its own border on a white face. Main menu card unchanged. */
.category-page-virtual-image.category-page-virtual-image--contact {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
.category-page-virtual-image--contact .category-page-contact-panel {
	justify-content: flex-start;
	aspect-ratio: auto;
	padding: 0;
	container-type: inline-size;
	overflow: visible;
}
.category-page-virtual-image--contact .category-page-contact-links {
	width: 100%;
	aspect-ratio: var(--ctd-vcard-ratio, 1 / 1);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-rows: auto;
}
.category-page-virtual-image--contact .category-page-contact-links a {
	gap: 6px;
	padding: 6px;
	background: var(--ctd-white);
	font-size: 16px;
}
.category-page-virtual-image--contact .category-page-contact-links .fa {
	font-size: 1.25em;
}

/* #4710 [B] Main menu drop-downs: the Contact Us card added after the last collection image
   (script in journal3/module/main_menu.twig). It takes the collection items' own classes, so
   Journal sizes it exactly like them; the panel only needs a white face in the image slot.
   Desktop drop-downs only: hidden when Journal moves the menu into the mobile accordion. */
.main-menu-item .ctd-menu-contact .image {
	background: var(--ctd-white);
}
/* #4723 [A] Instant Costing card and [B] Contact Us card: the collection images' border
   (--ctd-menu-card-border, read from them by the script) with 6px rounded corners. */
.main-menu-item .ctd-menu-contact .image,
.main-menu-item .ctd-menu-costing .image {
	box-sizing: border-box;
	border: var(--ctd-menu-card-border, 1px solid var(--ctd-card-border));
	border-radius: var(--ctd-radius);
	overflow: hidden;
}
.main-menu-item .ctd-menu-costing .image a,
.main-menu-item .ctd-menu-costing .image img {
	display: block;
	width: 100%;
	height: auto;
}
/* Clive 5 Nov 2026: the Instant Costing card's frame was bigger than its picture. The picture's link already has
   the collection images' own border (Journal's), so the frame round the slot doubled it; and the slot stretched
   8px taller than the picture to fill the card (its caption is shorter than its neighbours'). The slot loses its
   frame and stays the picture's size, so the card has one border, round the picture, like the collection images,
   and its caption lines up with theirs. */
.main-menu-item .ctd-menu-costing .image {
	border: 0;
	border-radius: 0;
	overflow: visible;
	align-self: flex-start;
}
.main-menu-item .ctd-menu-costing .category-thumb,
.main-menu-item .ctd-menu-contact .category-thumb {
	align-content: flex-start;
}
/* Clive 5 Nov 2026: the same for the Contact Us card, whose slot stretched 8px for the same reason, so "Let's Chat"
   sat lower than the captions beside it. Now level with them. */
.main-menu-item .ctd-menu-contact .image {
	align-self: flex-start;
}
.main-menu-item .ctd-menu-contact .category-page-contact-panel {
	--ctd-contact-pad: 6px;
	--ctd-contact-heading: 22px;
	width: 100%;
}
.main-menu-item .ctd-menu-contact .category-page-contact-heading {
	font-size: 18px;
}
.main-menu-item .ctd-menu-contact .category-page-contact-links a {
	font-size: 12px;
}
/* Clive 5 Nov 2026: mega menu Contact Us card, as on the category pages. No canvas behind the buttons: the
   image slot loses its border, white fill, corners and shadow, so the drop-down shows around and between them.
   The four buttons together fill the same width and height as the collection images beside them, top and bottom
   edges aligned with them (the "Contact Us" heading above them is hidden, as on the category pages; the caption
   under the card names it) (--ctd-vcard-ratio, set by js/ctd-menu.js from their width/height), two by two with the
   same gap. Each button keeps its own border on a white face; icons, labels, order and links unchanged. */
.main-menu-item .ctd-menu-contact .image {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
.main-menu-item .ctd-menu-contact .category-page-contact-panel {
	justify-content: flex-start;
	aspect-ratio: auto;
	padding: 0;
	container-type: inline-size;
	overflow: visible;
}
.main-menu-item .ctd-menu-contact .category-page-contact-links {
	width: 100%;
	aspect-ratio: var(--ctd-vcard-ratio, 1 / 1);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-auto-rows: auto;
}
.main-menu-item .ctd-menu-contact .category-page-contact-links a {
	gap: 4px;
	padding: 4px;
	background: var(--ctd-white);
	font-size: 13px;
}
.main-menu-item .ctd-menu-contact .category-page-contact-links .fa {
	font-size: 1.2em;
}
.main-menu-item .ctd-menu-contact .category-page-contact-heading {
	display: none;
}
.accordion-menu .ctd-menu-contact,
.accordion-menu .ctd-menu-costing {
	display: none !important;
}
/* Luke 27 Oct 2026: desktop mega menu tiles (Journal Categories modules 996, 1113-1120) sit on
   one row with no scroll bar or carousel arrows. Journal lays them out as a 200px-wide sideways
   carousel, so with the added Shop by Colour, Instant Costing and Contact Us cards (7-8 tiles)
   the row overflowed and scrolled. Tiles keep 200px where there is room and shrink evenly when
   there isn't. Phones use the accordion menu and are not affected. */
@media (min-width: 992px) {
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid > .auto-grid-items {
		display: flex;
		justify-content: center;
		gap: var(--grid-gap, 0px);
		overflow: hidden;
		scrollbar-width: none;
		cursor: auto;
	}
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid > .auto-grid-items::-webkit-scrollbar {
		display: none;
	}
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid > .auto-grid-items > * {
		flex: 0 1 var(--grid-min-width, 200px);
		min-width: 0;
		margin-top: 0;
	}
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid > .auto-grid-items::before,
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid > .auto-grid-items::after,
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-grid::after,
	.desktop-main-menu-wrapper .mega-menu-content .module-categories .auto-carousel-controls {
		display: none !important;
	}
}

/* Bespoke Design mega menu (Luke 28 Oct 2026; catalog/controller/journal3/main_menu.php).
   Journal writes each mega menu's layout per menu item (main-menu-item-N), and Bespoke Design was
   set up as a plain link, so it has none. These are the Diamond Pendants item's rules, scoped to
   .ctd-bespoke-mega. Item 2 also carries "padding: 0 !important" on its content from Journal. */
.desktop-main-menu-wrapper .main-menu-item.ctd-bespoke-mega.menu-fullwidth > .j-dropdown > .mega-menu-content,
.desktop-main-menu-wrapper .main-menu-item.ctd-bespoke-mega > .j-dropdown > .mega-menu-content {
	padding: 32px !important; /* as the other mega menus */
}
.desktop-main-menu-wrapper .main-menu-item.ctd-bespoke-mega > .j-dropdown > .mega-menu-content > .grid-rows > .grid-row > .grid-cols-wrapper {
	--gutter: var(--content-gutter, 0px);
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1:before {
	display: block;
	left: 0;
	right: 0;
	width: 100%;
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1 > .grid-cols-wrapper > .grid-cols > .grid-col {
	--unit: 1%;
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1 > .grid-cols-wrapper > .grid-cols > .grid-col-1 {
	display: block;
	min-width: 100%;
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1 .grid-col-1 > .grid-items {
	justify-content: flex-start;
	align-items: center;
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1 .grid-col-1 > .grid-items:before {
	display: none;
}
.main-menu-item.ctd-bespoke-mega .mega-menu-content > .grid-rows > .grid-row-1 .grid-col-1 > .grid-items > .grid-item {
	display: flex;
	height: auto;
}
/* The WhatsApp Estimator artwork is square already; keep it whole (menu and Bespoke Design page card). */
.ctd-vcard-estimator .category-page-virtual-image img,
.main-menu-item.ctd-bespoke-mega .ctd-bespoke-mega__estimator .image img {
	object-fit: contain;
	background: var(--ctd-white);
}

/* Ring Maker video (Luke 3 Nov 2026): plays in place of the picture in the Bespoke Design mega menu and the
   Ring Maker tile (journal3/categories.twig). Sized like the picture it replaces; the square clip (ring above, step caption below) is fitted
   whole on white, as the 300x300w menu pictures are. js/ctd-menu.js plays it when it is on screen. */
.ctd-menu-video {
	display: block;
	width: 100%;
	height: auto;   /* shape from its width/height attributes, like the picture it replaces */
	object-fit: contain;
	background: var(--ctd-white);
}

/* #100029 Homepage before/after image slider (script in common/home.twig): dragging the
   handle on a phone moves the handle instead of scrolling the page. */
.img-slider-wrapper .slider-handle {
	touch-action: none;
	cursor: ew-resize;
}

/* #4694 Homepage hero (slider modules 1267 desktop/tablet and 1268 phone, Custom Class
   "ctd-hero"): [B] "Search diamonds" (Journal's second slide button, styled as an underlined
   link) is now the same gold button as [A] "Explore engagement rings". Both buttons take one
   definition so their height, padding, radius, font and hover match exactly. Journal prints
   the slide button font, padding and radius with !important on six-class selectors after this
   file, hence the longer selector and !important here. */
.module-slider.ctd-hero {
	--ctd-hero-btn-height: 52px;
}
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-1,
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-2 {
	box-sizing: border-box !important;
	min-height: var(--ctd-hero-btn-height) !important;
	padding: 0 32px !important;
	border: 1px solid var(--ctd-gold) !important;
	border-radius: var(--ctd-radius) !important;
	background: var(--ctd-gold) !important;
	color: var(--ctd-white) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	/* #4731 [A] Label centred: the link style Journal gives button 2 aligns it to the left. */
	justify-content: center !important;
	text-align: center !important;
}
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-1:hover,
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-2:hover,
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-1:focus-visible,
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-2:focus-visible {
	border-color: var(--ctd-gold) !important;
	background: var(--ctd-gold) !important;
	color: var(--ctd-white) !important;
	text-decoration: none !important;
	filter: brightness(0.92);
}
/* The link style draws its underline on the label. */
.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-2 > span {
	border: 0 !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* Hero buttons on phones (Clive, 27 Oct 2026): smaller and side by side instead of
   stacked. Each takes half the row (8px apart), keeps the same height as the other and stays
   at least 44px tall for tapping; a longer label wraps onto two centred lines. */
@media (max-width: 767px) {
	.module-slider.ctd-hero {
		--ctd-hero-btn-height: 44px;
	}
	/* Centred on the screen (Clive, 28 Oct 2026): the slide's layers line up on the left
	   and the button block shrank to its buttons, so it now takes the full width and the
	   pair sits in the middle. */
	.module-slider.ctd-hero .swiper-slide .slide-col .slide-button {
		align-self: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: center !important;
		gap: 8px !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-1,
	.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn.slide-button-2 {
		display: flex !important;
		align-items: center !important;
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 200px !important;
		margin: 0 !important;
		padding: 6px 10px !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
	}
	/* Journal keeps the label on one line; let it wrap, centred. */
	.module-slider.ctd-hero .swiper-slide .slide-col .slide-button .slide-button-group > .btn > span {
		white-space: normal !important;
		text-align: center !important;
	}
}

/* #100130 Sliders now start Swiper on the first interaction (see Journal.idle in
   js/head.js). The first slide is already in the HTML, so no loading
   spinner is shown over it while it waits. */
.module-slider .swiper-container:not(.swiper-initialized) > .journal-loading {
	display: none;
}

/* #100031 Editorial content on diamond listing landings (first used on
   /diamonds/coloured-lab-grown, product/diamond_search.twig). Text uses the site body font. */
/* Intro under the H1: full width, aligned with the search panel below (Luke, 21 Oct) */
.ctd-seo-intro {
	max-width: none;
	margin: 12px 0 0;
}
/* Diamond shape pages (/oval-cut-diamonds …): the shape's picture beside the intro (Luke 2 Nov 2026).
   Also the shape tiles on /diamonds (.ctd-shape-tiles). Same pictures as /engagement-rings/shop-by-diamond-shape. */
.ctd-shape-intro {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 12px 0 0;
}
.ctd-shape-intro__img {
	flex: 0 0 auto;
	width: 200px;
	height: auto;
	border-radius: var(--ctd-radius);
}
.ctd-shape-intro .ctd-seo-intro {
	margin: 0;
}
@media (max-width: 575px) {
	.ctd-shape-intro {
		gap: 14px;
		align-items: flex-start;
	}
	.ctd-shape-intro__img {
		width: 104px;
	}
}
/* /diamonds: coloured lab grown colour links (Luke 3 Nov 2026), the ring pages' colour icons in one row */
.ctd-colour-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	margin: 12px 0 24px;
	padding: 0;
	list-style: none;
}
.ctd-colour-tiles li {
	margin: 0;
}
.ctd-seo-content .ctd-colour-tiles a,
.ctd-colour-tiles a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 72px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	font-size: 16px;
	line-height: 1.3;
}
.ctd-colour-tiles img {
	display: block;
	width: 48px;
	height: 48px;
}
.ctd-colour-tiles a:hover span {
	color: var(--ctd-gold);
}
.ctd-shape-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin: 16px 0 24px;
	padding: 0;
	list-style: none;
}
.ctd-shape-tiles li {
	margin: 0;
	text-align: center;
}
.ctd-shape-tiles a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ctd-seo-content .ctd-shape-tiles a {
	color: inherit;
	text-decoration: none;
}
.ctd-shape-tiles img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
}
.ctd-shape-tiles__name {
	display: block;
	margin-top: 6px;
	font-weight: 500;
	color: var(--ctd-gold);
}
.ctd-shape-tiles__note {
	display: block;
	font-size: 16px;
	line-height: 1.5;
}
@media (max-width: 575px) {
	.ctd-shape-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}
.ctd-seo-content {
	max-width: 900px;
	margin: 40px auto;
}
.ctd-seo-content h2 {
	margin: 32px 0 12px;
}
.ctd-seo-content h3 {
	margin: 20px 0 8px;
}
.ctd-seo-content a {
	color: var(--ctd-gold);
	text-decoration: underline;
}
.ctd-seo-colours {
	margin: 0 0 16px;
	padding-left: 20px;
}
.ctd-seo-colours li {
	margin: 0 0 12px;
}

/* #4695 [A] "Filter by diamond shape" widget on the ring landings (e.g. /engagement-rings/
   platinum/round-brilliant-cut-diamond/solitaire): the "Change Metal" tile after the ten
   shapes is not shown. The widget HTML is stored in the database, so the tile is matched by
   its metal picture (the shape tiles use shape drawings); the shapes are never matched.
   The separate four-metal "Filter by metal" widget (.metal-colour) is not affected. */
.scrolling_container .image-container > .image-block:not(.metal-colour):has(img[src*="metal" i], img[alt*="metal" i]) {
	display: none !important; /* !important: custom.css sizes these items with !important. */
}

/* #4728 Every diamond shape icon is the /diamonds/ size (--ctd-shape-icon: 50px, 40px up to
   900px, 32px up to 600px). The tiles keep their own widths; only the drawing is sized.
   - "Filter by diamond shape" widget on the ring landings (HTML stored in the database).
     !important: Journal > Custom CSS stretches the widget pictures with !important.
   - "Browse Diamonds by Shape" under the search on /diamonds/ and shape-less diamond
     categories (product/diamond_search.twig prints 60px / 45px in its own <style>). */
.scrolling_container .row.image-container > .image-block:not(.metal-colour) img {
	display: block;
	width: var(--ctd-shape-icon) !important;
	max-width: none;
	height: var(--ctd-shape-icon) !important;
	margin: 0 auto;
	object-fit: contain;
}
/* Luke 2 Nov: "Filter by metal" icons were far too big (150px bars in 275px tiles on
   /engagement-rings/round-brilliant-cut-diamond and the other ring landings). The bars now sit at the
   diamond shape icon size (1.4 x --ctd-shape-icon wide: 70 / 56 / 45px) in tiles of up to 120px,
   centred in one row, so the metal and shape filters match. The widget HTML is stored in the database
   (79 widgets), so this is CSS only. !important / the long selector: Journal > Custom CSS and custom.css
   size these with !important (see "filter-metal widget sizing" in custom.css). */
.scrolling_container .row.image-container:has(> .image-block.metal-colour) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.scrolling_container .row.image-container:has(> .image-block.metal-colour)::before,
.scrolling_container .row.image-container:has(> .image-block.metal-colour)::after {
	display: none; /* Bootstrap clearfix pseudo-elements would take a flex slot */
}
.scrolling_container .row.image-container:has(> .image-block.metal-colour) > :not(.image-block) {
	flex: 0 0 100%; /* the "FILTER BY METAL" heading on its own line */
}
.scrolling_container .row.image-container > .image-block.metal-colour {
	flex: 0 1 calc((100% - 30px) / 4); /* 4 across at every width, never wider than 120px */
	max-width: 120px;
	width: auto !important;
	min-width: 0;
	float: none;
	padding: 0 !important;
}
.scrolling_container .row.image-container .image-block.metal-colour > a img.img-fluid {
	display: block;
	width: calc(var(--ctd-shape-icon) * 1.4) !important;
	max-width: 100%;
	height: auto !important;
	margin: 6px auto 2px;
}
/* Each label is printed twice (long "18ct. Rose Gold" for desktop, short "Rose Gold" for phones) with
   Bootstrap 4 classes this Bootstrap 3 theme doesn't have, so phones showed both. The short one everywhere,
   as desktop already shows. */
.scrolling_container .row.image-container .image-block.metal-colour > a > span.d-none {
	display: none !important;
}
.scrolling_container .row.image-container .image-block.metal-colour > a > span:not(.shape) {
	font-size: 14px;
	line-height: 1.35;
	padding: 0 4px 6px;
}
/* Luke 2 Nov 2026: filter strips on phones (<768px) take far less height, so the rings start sooner.
   - "Filter by diamond shape": one row of compact shape chips that swipes sideways (was 3 rows, ~240px; now ~80px).
     The right edge fades to show there is more to swipe.
   - "Filter by metal": the four metals stay in one row, with smaller bars and labels (~190px down to ~110px).
   Same links, same HTML (server-rendered, stored widget markup), so nothing changes for search engines;
   desktop is unchanged. Covers every strip: ring hubs, metal/shape pages and the coloured-ring pages (.ctd-hub-shapes).
   !important / html body: custom.css and Journal > Custom CSS size these strips with !important for phones. */
@media (max-width: 767px) {
	html body .scrolling_container .row.image-container:not(:has(> .image-block.metal-colour)) {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		gap: 8px;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 4px 2px 8px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
		mask-image: linear-gradient(to right, #000 88%, transparent);
	}
	html body .scrolling_container .row.image-container:not(:has(> .image-block.metal-colour))::-webkit-scrollbar {
		display: none;
	}
	html body .scrolling_container .row.image-container:not(:has(> .image-block.metal-colour))::before,
	html body .scrolling_container .row.image-container:not(:has(> .image-block.metal-colour))::after {
		display: none !important; /* Bootstrap clearfix pseudo-elements would take a flex slot */
	}
	html body .scrolling_container .row.image-container > .image-block:not(.metal-colour) {
		flex: 0 0 72px;
		width: 72px !important;
		max-width: none !important;
		min-width: 0;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		scroll-snap-align: start;
	}
	html body .scrolling_container .row.image-container > .image-block:not(.metal-colour) > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 64px; /* tap target well over 44px */
		padding: 6px 2px;
		font-size: 12px;
		line-height: 1.2;
		white-space: nowrap;
	}
	html body .scrolling_container .row.image-container > .image-block:not(.metal-colour) > a > span.shape {
		margin: 0;
	}
	html body .scrolling_container .diamond-text-bottom {
		font-size: 12px;
		letter-spacing: 0.04em;
		margin-top: 2px;
	}
	/* Metals: one row of four, smaller */
	html body .scrolling_container .row.image-container:has(> .image-block.metal-colour) {
		gap: 6px;
	}
	html body .scrolling_container .row.image-container:has(> .image-block.metal-colour) > :not(.image-block) {
		font-size: 12px;
		letter-spacing: 0.04em;
		margin-bottom: 2px;
	}
	html body .scrolling_container .row.image-container .image-block.metal-colour > a {
		display: block;
		min-height: 44px;
	}
	html body .scrolling_container .row.image-container .image-block.metal-colour > a img.img-fluid {
		width: 36px !important;
		margin: 4px auto 0;
	}
	html body .scrolling_container .row.image-container .image-block.metal-colour > a > span:not(.shape) {
		font-size: 12px;
		line-height: 1.25;
		padding: 0 2px 4px;
	}
}
.browse-by-shape .shape-links img {
	width: var(--ctd-shape-icon);
	height: var(--ctd-shape-icon);
	object-fit: contain;
}

/* #4695 [B] "Bestseller" product label (Journal product label module 31): no icon, text only.
   The icon is not in any template: Journal prints it as "strong::before" from the label's
   Icon setting (Journal > Modules > Product Label > Bestseller). Hidden in the product grid,
   on the product page and in quick view. */
.product-labels .product-label.product-label-31 > strong::before,
.product-labels-outside .product-label.product-label-31 > strong::before,
.product-info .product-label.product-label-31 > strong::before {
	display: none !important; /* #4712 [A] !important: Journal prints the label's icon rule after this file. */
	content: none !important;
}

/* #4712 Product cards in every Journal product grid and list (journal3/products.twig: category
   and ring landings, search, related products, product modules).
   [B] Each card gets a 1px #444444 border and 6px corners, also on hover (Journal's own hover
   border colour is printed on ".product-layout:hover .product-thumb"). */
.main-products-style .product-layout .product-thumb,
.main-products-style .product-layout:hover .product-thumb,
.module-products .product-layout .product-thumb,
.module-products .product-layout:hover .product-thumb {
	/* !important: Journal prints the product grid border and radius settings after this file. */
	border: 1px solid var(--ctd-border-dark) !important;
	border-radius: var(--ctd-radius) !important;
	overflow: hidden;
}
/* [C] The full-width "In Stock" bar under the card image is a Journal product label printed in
   the "outside" group (.product-labels-outside); it is hidden on the cards and on the product
   page. !important: Journal prints "display: flex" for it after this file. */
.product-thumb .product-labels-outside,
.product-info .product-labels-outside {
	display: none !important;
}
/* [D] "Choose your diamond" (ring settings: products with a diamond still to pick) is a gold
   button with white text, in the product cards and the "Bestsellers" / "From Same Category"
   strip (journal3/side_products.twig). */
.ctd-choose-diamond-btn,
.product-thumb .caption .price a.ctd-choose-diamond-btn,
.side-product .caption .price a.ctd-choose-diamond-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.product-thumb .caption .price a.ctd-choose-diamond-btn:hover,
.product-thumb .caption .price a.ctd-choose-diamond-btn:focus-visible,
.side-product .caption .price a.ctd-choose-diamond-btn:hover,
.side-product .caption .price a.ctd-choose-diamond-btn:focus-visible {
	color: var(--ctd-white);
	text-decoration: none;
	filter: brightness(0.92);
}
/* The strip's text column is about 124px wide (70px on phones), so the label may wrap there. */
.side-product .caption .price a.ctd-choose-diamond-btn {
	padding: 4px 10px;
	font-size: 15px;
}
@media (max-width: 767px) {
	.product-thumb .caption .price a.ctd-choose-diamond-btn {
		padding: 4px 10px;
		font-size: 14px;
	}
	.side-product .caption .price a.ctd-choose-diamond-btn {
		padding: 4px 6px;
		font-size: 13px;
	}
}

/* "View ring" / "View details" on priced cards (journal3/products.twig): the "Choose your diamond" button, centred
   on its own line under the price block (Luke 3 Nov 2026, eternity cards). */
.product-thumb .caption .price a.ctd-card-view-btn {
	display: flex;
	width: max-content;
	margin: 10px auto 0;
}
/* Product cards line up across a row (Luke 5 Nov 2026, /diamond-pendants/platinum): "Choose your diamond" cards have no
   price line, so their button and Metal Options sat higher than the priced cards' "View details" next to them. The
   card fills its grid cell and the price block (price line and button) is pushed to the bottom of the caption, so
   every button and swatch row in a row sits at the same height whatever the name length or price lines. */
.main-products.product-grid .product-thumb {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.main-products.product-grid .product-thumb .caption {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.main-products.product-grid .product-thumb .caption > .price {
	margin-top: auto;
}
/* The compact price line on those cards: our price, then the market price struck through.
   !important: Journal's skin gives price spans a grey #F9F9F9 box with 6px padding. Not <s>: Journal styles
   that tag as a tooltip label (no line, block, 85%). */
.product-thumb .caption .price .ctd-card-price {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 10px;
	width: 100%;
	padding: 0 !important;
	background: none !important;
	border-radius: 0;
	font-family: 'Outfit', sans-serif;
	line-height: 1.5;
}
.product-thumb .caption .price .ctd-card-price-now {
	font-size: 20px;
	font-weight: 600;
	color: var(--ctd-border-dark);
}
.product-thumb .caption .price .ctd-card-price-was {
	font-size: 16px;
	font-weight: 400;
	color: #757575;
	text-decoration: line-through;
}

/* #4722 "Need some help?" cards: 145px squares, 1px #444444 border, 6px radius, 10px apart,
   wrapping and centred on narrow screens. Shared by the diamond page, product pages, the
   404 page and the enquiry page. Product templates print their own #product-product rules,
   hence the ID selector alongside the plain one. Hover, icon and text colours stay in the
   page templates / custom.css. */
:root {
	--ctd-help-card-size: 145px;
	--ctd-help-gap: 10px;
}
.ctd-help .ctd-help-grid,
#product-product .ctd-help .ctd-help-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ctd-help-gap);
	width: 100%;
}
.ctd-help .ctd-help-card,
#product-product .ctd-help .ctd-help-card {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 var(--ctd-help-card-size);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: var(--ctd-help-card-size);
	height: var(--ctd-help-card-size);
	min-height: 0;
	margin: 0;
	padding: 10px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	color: #333333;
	font: inherit;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ctd-help .ctd-help-card span,
#product-product .ctd-help .ctd-help-card span {
	line-height: 1.4;
}
/* [E] Instant costing image card: the image fills the square. */
.ctd-help .ctd-help-card.ctd-help-card-image,
#product-product .ctd-help .ctd-help-card.ctd-help-card-image {
	padding: 0;
}
.ctd-help .ctd-help-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* #4721 / #4724 Tablet and desktop: all cards on one line, filling the section edge to edge in
   equal columns with a 10px gap, each staying square, so they grow or shrink with the column.
   A grid (one column per card) rather than flex so the row always spans the full width. */
@media (min-width: 768px) {
	.ctd-help .ctd-help-grid,
	#product-product .ctd-help .ctd-help-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		container-type: inline-size;
	}
	.ctd-help .ctd-help-card,
	#product-product .ctd-help .ctd-help-card {
		flex: none;
		min-width: 0;
		max-width: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	/* Narrow column: smaller text and icons so the labels still fit inside the shrunken squares. */
	@container (max-width: 764px) {
		.ctd-help .ctd-help-card,
		#product-product .ctd-help .ctd-help-card {
			gap: 4px;
			padding: 6px;
		}
		.ctd-help .ctd-help-card i,
		#product-product .ctd-help .ctd-help-card i {
			font-size: 22px;
		}
		.ctd-help .ctd-help-card span,
		#product-product .ctd-help .ctd-help-card span {
			font-size: 12px;
			line-height: 1.3;
		}
		.ctd-help .ctd-help-card.ctd-help-card-image,
		#product-product .ctd-help .ctd-help-card.ctd-help-card-image {
			padding: 0;
		}
	}
}
/* Phones: drop the side padding so two cards fit per row at 375px. */
@media (max-width: 480px) {
	.ctd-help,
	#product-product .ctd-help {
		padding-left: 0;
		padding-right: 0;
	}
}
/* Responsive audit 22 Oct: the product and diamond pages keep their own side padding, so at 375px
   the row was under 300px and the 145px cards fell to one per row. Phones: two per row, each card
   145px or half the row, whichever is smaller, still square. */
@media (max-width: 767.98px) {
	.ctd-help .ctd-help-card,
	#product-product .ctd-help .ctd-help-card {
		flex: 0 0 min(var(--ctd-help-card-size), calc(50% - var(--ctd-help-gap) / 2));
		width: min(var(--ctd-help-card-size), calc(50% - var(--ctd-help-gap) / 2));
		height: auto;
		aspect-ratio: 1 / 1;
	}
}
/* Tablet product pages (e.g. 1024px): the details column is about 380px, so five cards on one line
   were 69px squares and the labels spilled out. When the section is that narrow, three per row. */
.ctd-help,
#product-product .ctd-help {
	container: ctd-help / inline-size;
}
@media (min-width: 768px) {
	@container ctd-help (max-width: 440px) {
		.ctd-help .ctd-help-grid,
		#product-product .ctd-help .ctd-help-grid {
			grid-auto-flow: row;
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* Product description "Show More" (Luke 22 Oct, phones): Journal pins the bar to the bottom of
   .expand-block, not the clipped description, so on phones it sat across the text with a line still
   showing under it. Anchor it to the clipped box itself, so it always covers the cut-off edge, and
   fade the text into it. Expanded: Journal's own 40px bottom padding holds the bar under the text. */
#product-product .expand-content {
	position: relative;
}
/* Journal admin custom CSS sets .block-expand-overlay { top: 6.7rem }, which wins over bottom: 0 and
   pins the bar mid-text whatever height the description is clipped to. Clear it here. */
#product-product .expand-content > .block-expand-overlay {
	top: auto;
	bottom: 0;
	z-index: 2;
}
#product-product .expand-content:not(.block-expanded) > .block-expand-overlay::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 32px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--expand-overlay, var(--background-color, #fff)));
}

/* #4729 Diamond search carat From/To and budget boxes: the suggested figure (placeholder)
   disappears as soon as the box is clicked. diamond_search.js clears a filled-in figure.
   Opacity as well as colour: Journal sets the placeholder colour of .form-control inputs
   (the budget boxes) with !important, so colour alone left the budget figure showing. */
#size_from:focus::placeholder,
#size_to:focus::placeholder,
#budget_price:focus::placeholder,
#ctd-budget:focus::placeholder {
	color: transparent;
	opacity: 0;
}

/* #4736 Home page H1: read by search engines and screen readers, not shown on screen
   (the hero slider carries the visible headline). */
.ctd-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* #100131 Diamond detail page (diamond/product.twig): product card and media column.
   These rules used to sit in the template's <style> block, which is printed after the
   markup, so the photo / 360° box was painted unsized and then jumped (CLS 0.151). Loaded
   here in the <head> they apply from the first paint: the photo box is held square with
   aspect-ratio and the certificate badge keeps the space set by its width/height. */
#product-product .ctd-product-card {
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	display: flex;
	gap: 0;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	box-sizing: border-box;
}

#product-product .ctd-product-media {
	flex: 0 0 32%;
	max-width: 32%;
	padding-right: 24px;
	border-right: 1px solid #e5e5e5;
}

#product-product .ctd-diamond-image-wrapper {
	position: relative;
}

#product-product .ctd-seo-image {
	position: absolute;
	left: -9999px;
	overflow: hidden;
}

#product-product .ctd-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	text-align: center;
}

#product-product .ctd-image img.ctd-diamond-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#product-product .ctd-360-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

#product-product .ctd-360-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	letter-spacing: 0.5px;
	pointer-events: none;
}

/* Diamond page 360 viewer, click to load (SF PageSpeed 3 Nov 2026): the diamond's photo with a play button stands in
   for the supplier's viewer until the first tap, so its ~2.4 MB of script is not loaded with every diamond page. */
#product-product .ctd-360-facade {
	cursor: pointer;
}

#product-product .ctd-360-facade:focus-visible {
	outline: 2px solid var(--ctd-gold, #C2A559);
	outline-offset: 2px;
}

#product-product .ctd-360-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	transition: background 0.2s ease;
}

#product-product .ctd-360-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -7px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

#product-product .ctd-360-facade:hover .ctd-360-play {
	background: rgba(0, 0, 0, 0.7);
}

#product-product .ctd-360-facade.is-playing .ctd-360-play {
	display: none;
}

#product-product .ctd-360-facade.loaded .ctd-360-poster {
	visibility: hidden;
}

#product-product .ctd-360-hint {
	font-size: 14px;
	color: #666;
	margin-top: 8px;
	text-align: center;
}

/* #100134 Diamond 3D viewers come from several suppliers. Loupe360 links are sized to the
   frame in the URL; the others fill the iframe edge to edge, so the stone looked too big and
   was cut off. Those frames get ctd-360-fit (set by the video scripts / diamond/product.twig)
   and the viewer is scaled down to sit inside the frame like the photos. Used on /diamonds,
   the natural/lab and coloured searches, product diamond search, upsell cards and the
   diamond detail page (main viewer and related diamonds). */
:root {
	--ctd-360-fit-scale: 0.8;
}

.product-img.has-video .iframe-loader.ctd-360-fit iframe,
.modal-body .ctd-video-wrapper.ctd-360-fit iframe,
#product-product .ctd-image.ctd-360-fit .ctd-360-iframe {
	transform: scale(var(--ctd-360-fit-scale));
	transform-origin: 50% 50%;
	border-radius: 6px;
}

/* Diamond video popups (product diamond search, rings and earrings): always square like the 360 viewers,
   as wide as a phone allows. Overrides the 3:4, 300px phone rule in Journal's admin Custom CSS, which
   cropped the stone. */
.modal-body .ctd-video-wrapper {
	max-width: min(92vw, 500px);
	overflow: hidden;
}
.modal-body .ctd-video-wrapper iframe {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}

/* #4699 Certificate card about 40% smaller (60% of the column, centred); the badge
   image scales with it. */
#product-product .ctd-certificate-card {
	max-width: 60%;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 10px;
	margin: 15px auto 0;
	text-align: center;
	background: #fff;
}

#product-product .ctd-certificate-card img {
	max-width: 100%;
	height: auto;
}

#product-product .ctd-view-cert {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
	font-size: 12px;
	color: #1a73e8;
	text-decoration: none;
}

#product-product .ctd-view-cert:hover {
	text-decoration: underline;
}

#product-product .ctd-view-cert img {
	max-width: 24px;
	height: auto;
}

/* Tablet: iPad Air / iPad Mini */
@media (min-width: 768px) and (max-width: 1023px) {
	#product-product .ctd-product-media {
		flex: 0 0 55%;
		max-width: 55%;
	}
}

/* Tablet: iPad Pro */
@media (min-width: 1024px) and (max-width: 1199px) {
	#product-product .ctd-product-media {
		flex: 0 0 45%;
		max-width: 45%;
	}
}

/* Mobile */
@media (max-width: 767px) {
	#product-product .ctd-product-card {
		flex-direction: column;
		padding: 15px;
		gap: 0;
	}
	#product-product .ctd-product-media {
		flex: none;
		max-width: 100%;
		padding-right: 0;
		border-right: none;
		padding-bottom: 20px;
	}
}

/* #100112 Blog: the RSS link moved out of the H1 (journal3/blog/posts.twig) into a wrapper beside it.
   Journal positions .blog-feed absolutely, so the wrapper takes over as its positioning box. */
.ctd-blog-title {
	position: relative;
}

/* #100118 Blog: "Most read guides" on /blog, and products / shop links / related guides under each post
   (journal3/blog/ctd_post_links.twig, posts.twig, post.twig). Cards match the search-page diamond cards. */
.ctd-blog-links,
.ctd-blog-shop {
	margin: 30px 0;
}
.ctd-blog-links-title {
	margin: 0 0 15px;
}
.ctd-blog-links-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.ctd-blog-links-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.blog-post .ctd-blog-links-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.ctd-blog-link a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	color: inherit;
}
.ctd-blog-link a:hover,
.ctd-blog-link a:focus-visible {
	border-color: var(--ctd-gold);
}
.ctd-blog-link img {
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
}
.ctd-blog-shop-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ctd-blog-shop-links .btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--ctd-radius);
}

/* 1 Nov 2026 Blog post body building blocks, for post HTML written in the Journal blog editor
   (first used on /blog/jewellery-recommissioning, migrations/2026-11-01_blog-recommissioning.sql).
   .ctd-post-lead intro, .ctd-post-gallery picture row, .ctd-post-steps numbered steps, .ctd-post-cta panel. */
.blog-post .post-content h2 {
	margin: 34px 0 12px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	line-height: 1.2;
}
.blog-post .post-content ul,
.blog-post .post-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}
.blog-post .post-content li {
	margin-bottom: 8px;
}
.ctd-post-lead {
	font-size: 20px;
	line-height: 1.6;
}
.ctd-post-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0;
}
.ctd-post-gallery figure {
	margin: 0;
	padding: 12px;
	background: var(--ctd-white);
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
}
.ctd-post-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
}
.ctd-post-gallery figcaption {
	margin-top: 10px;
	font-size: 15.6px;
	line-height: 1.4;
	text-align: center;
}
.blog-post .post-content ol.ctd-post-steps {
	padding: 0;
	list-style: none;
	counter-reset: ctd-step;
}
.blog-post .post-content .ctd-post-steps li {
	position: relative;
	min-height: 40px;
	margin-bottom: 18px;
	padding: 6px 0 0 56px;
	counter-increment: ctd-step;
}
.ctd-post-steps li::before {
	content: counter(ctd-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-weight: 500;
	line-height: 40px;
	text-align: center;
}
.ctd-post-cta {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 34px 0 10px;
	padding: 26px;
	background: #F7F5F1;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
}
.blog-post .post-content .ctd-post-cta h2 {
	margin-top: 0;
}
.ctd-post-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}
.ctd-post-cta-actions .btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--ctd-radius);
}
.ctd-post-cta-qr {
	flex: 0 0 150px;
	margin: 0;
	text-align: center;
	font-size: 14px;
}
.ctd-post-cta-qr img {
	display: block;
	width: 150px;
	height: 150px;
	margin-bottom: 6px;
}
@media (max-width: 767px) {
	.ctd-post-gallery {
		gap: 8px;
	}
	.ctd-post-gallery figure {
		padding: 6px;
	}
	.ctd-post-gallery figcaption {
		font-size: 13px;
	}
	.ctd-post-cta {
		display: block;
		padding: 22px;
	}
	/* A phone can't scan its own screen: the WhatsApp button does the job there. */
	.ctd-post-cta-qr {
		display: none;
	}
	.ctd-post-cta-actions .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* #100105 Search: links to the diamond search when the keyword is about diamonds (journal3/product/search.twig). */
.ctd-search-diamonds {
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
}
.ctd-search-diamonds p {
	margin: 0 0 10px;
}
.ctd-search-diamonds-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ctd-search-diamonds-links .btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
/* Diamonds from stock under each link: 2 across on mobile, 4 from tablet up */
.ctd-search-diamonds-type + .ctd-search-diamonds-type {
	margin-top: 20px;
}
.ctd-search-diamonds-title {
	margin: 0 0 10px;
}
.ctd-search-diamonds-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 15px;
}
@media (min-width: 768px) {
	.ctd-search-diamonds-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.ctd-search-diamond {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	text-align: center;
	color: inherit;
}
.ctd-search-diamond:hover {
	border-color: var(--ctd-gold);
}
.ctd-search-diamond img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--ctd-radius);
}
.ctd-search-diamond-title {
	font-weight: 600;
}
.ctd-search-diamond-grade {
	font-size: 16px;
}
.ctd-search-diamond-price {
	color: var(--ctd-gold);
	font-weight: 600;
}
/* #100105 Search with no exact match: "closest products" notice, and the intro line under
   the "We can make it" help cards (card styles are the shared .ctd-help rules). */
.ctd-search-broadened {
	margin: 0 0 20px;
	padding: 15px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
}
.ctd-search-help .ctd-search-help-intro {
	margin: 0 0 20px;
	text-align: center;
}

/* #100166 Diamond result cards (diamond/search_results.twig, search_results_detailed.twig,
   partials/detailed_card.twig): every photo sits in the same square box and fills it, so the
   Watch Video buttons, prices and details line up across Biggest / Better / Best. */
.card.ctd-diamond-card,
.card.ctd-detailed-card {
	border-radius: var(--ctd-radius);
}
.ctd-diamond-card .ctd-diamond-image,
.ctd-detailed-card .ctd-diamond-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ctd-diamond-card .ctd-diamond-image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.ctd-diamond-card .ctd-diamond-image img.img-fluid,
.ctd-diamond-card .ctd-diamond-image img.card-img-top,
.ctd-detailed-card .ctd-diamond-image img.card-img-top {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* Tweak 100183: full-width image that keeps its real shape (width/height attributes reserve the space). */
.ctd-img-fluid {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Tweak 100176: enquiry and design buttons have no href (so crawlers skip them); keep the hand pointer. */
[data-ctd-post],
[data-ctd-href] {
	cursor: pointer;
}

/* ===== Mirror, Mirror hand try-on (product pages with a GLB) — /mirror-mirror/ctd-tryon.js ===== */
.ctd-tryon-btn {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 5;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.ctd-tryon-btn:hover,
.ctd-tryon-btn:focus-visible {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
}
.ctd-tryon-open,
.ctd-tryon-open body {
	overflow: hidden;
}
.ctd-tryon-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--ctd-black);
}
.ctd-tryon-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.ctd-tryon-close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top));
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: var(--ctd-white);
	font-size: 28px;
	line-height: 44px;
	cursor: pointer;
}

/* Mirror, Mirror 3D product viewer (GLB products) — fades in over the product image */
.ctd-3d-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--ctd-white);
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s;
}
.ctd-3d-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Enquiry page (/help): "You're enquiring about" card for the ring and/or diamond. */
.ctd-enquiry-item {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	max-width: 900px;
	margin: 0 auto 30px;
	padding: 20px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
}
.ctd-enquiry-item-media {
	flex: 0 0 160px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ctd-enquiry-item-image img,
.ctd-enquiry-snapshot img,
.ctd-enquiry-stone-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
}
/* With the customer's 3D design shown, the catalogue photo becomes a small second image. */
.ctd-enquiry-item-media.has-snapshot .ctd-enquiry-item-image {
	width: 50%;
}
.ctd-enquiry-snapshot,
.ctd-enquiry-stone-photo {
	margin: 0;
}
.ctd-enquiry-snapshot[hidden] {
	display: none;
}
.ctd-enquiry-snapshot figcaption,
.ctd-enquiry-stone-photo figcaption {
	margin-top: 4px;
	font-size: 14px;
	color: var(--ctd-border-dark);
	text-align: center;
}
.ctd-enquiry-stone-photo {
	float: right;
	width: 140px;
	margin: 0 0 12px 16px;
}
.ctd-enquiry-item-body {
	flex: 1 1 auto;
	min-width: 0;
}
.ctd-enquiry-item-label {
	margin: 0 0 4px;
	color: var(--ctd-gold);
	font-size: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ctd-enquiry-item-title {
	margin: 0 0 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	line-height: 1.2;
}
.ctd-enquiry-item-lines {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.ctd-enquiry-item-lines li,
.ctd-enquiry-item-ref {
	font-size: 16px;
	line-height: 1.6;
}
.ctd-enquiry-item-ref {
	margin: 0 0 12px;
	color: var(--ctd-border-dark);
}
.ctd-enquiry-item-subtitle {
	margin: 16px 0 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
}
.ctd-enquiry-specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px 16px;
	margin: 0 0 16px;
}
.ctd-enquiry-specs div {
	margin: 0;
}
.ctd-enquiry-specs dt {
	font-size: 14px;
	font-weight: 400;
	color: var(--ctd-border-dark);
}
.ctd-enquiry-specs dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.ctd-enquiry-item-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ctd-gold);
	font-weight: 600;
	text-decoration: underline;
}
.ctd-enquiry-hidden {
	display: none !important;
}
@media (max-width: 600px) {
	.ctd-enquiry-item {
		flex-direction: column;
		gap: 16px;
		padding: 16px;
	}
	.ctd-enquiry-item-media {
		flex-basis: auto;
		width: 200px;
		align-self: center;
	}
	.ctd-enquiry-stone-photo {
		float: none;
		margin: 0 auto 12px;
	}
	.ctd-enquiry-item-title {
		font-size: 24px;
	}
}

/* Product image / 3D viewer box: square, the shape of the renders and of Ring Render's capture, and the full width
   of its column, so its edges line up with the thumbnails below (Luke 28 Oct; it was capped by the screen height,
   which left it narrower than the thumbnails on most screens). The bordered frame round it (Journal's slider, 3px
   border) fills the column too. Phones in the step-by-step layout keep their own size (further down). */
.product-left #view360_example {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
.product-left .product-image .main-image:has(#view360_example) {
	width: 100%;
	max-width: none;
}
/* Ring pages: the Ring Render -01 photo under the 3D ring that fades in over it, at the same size and place.
   Measured 28 Oct over 12 rings in the square box: the 3D draws the ring at 74.4% of the box width, centred, its
   middle 53% down; the renders are cropped to the ring (87.4% of their width, middle 48.2% down). So the photo is
   85% of the box (74.4 / 87.4), centred, 12% from the top (53 - 48.2 x 0.85). Re-measure if the viewer's framing
   (look.json "frame") or Ring Render's crop changes. */
.product-left #view360_example.ctd-render-photo {
	background: var(--ctd-white);
}
.product-left #view360_example.ctd-render-photo > #video_main_image {
	position: absolute;
	left: 50%;
	top: 12%;
	width: 85% !important;
	height: auto !important;
	max-width: none;
	margin: 0 !important;
	object-fit: contain !important;
	transform: translateX(-50%);
	/* the render's grey floor stops at the photo's sides (it's cropped to the ring, which starts 6.3% in): fade the outer 5% into the white box */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* Pendants (Luke 4 Nov: the chain looked cut off): a pendant's -01 is the whole 3D view, uncropped, with the
   chain running off its top edge as it does in the 3D. Shown at 85%, 12% down, the chain stopped in mid-air
   inside the box; so pendant pages show it edge to edge, the box filled exactly as the 3D fills it. */
.product-left #view360_example.ctd-render-photo.ctd-render-photo--full > #video_main_image {
	top: 0;
	width: 100% !important;
	-webkit-mask-image: none;
	mask-image: none;
}
/* Enquiry card: live 3D of the ring with the chosen diamond (Mirror viewer, ui=0). */
.ctd-enquiry-item-media:has(.ctd-enquiry-3d) {
	flex-basis: 240px;
}
.ctd-enquiry-3d {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--ctd-radius);
	overflow: hidden;
	background: var(--ctd-white);
}
.ctd-enquiry-3d-poster,
.ctd-enquiry-3d-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.ctd-enquiry-3d-poster {
	object-fit: cover;
	transition: opacity 0.6s;
}
.ctd-enquiry-3d-frame {
	opacity: 0;
	transition: opacity 0.6s;
}
.ctd-enquiry-3d.is-ready .ctd-enquiry-3d-frame {
	opacity: 1;
}
.ctd-enquiry-3d.is-ready .ctd-enquiry-3d-poster {
	opacity: 0;
}
.ctd-enquiry-3d-hint {
	margin: 0;
	font-size: 14px;
	color: var(--ctd-border-dark);
	text-align: center;
}
@media (max-width: 600px) {
	.ctd-enquiry-item-media:has(.ctd-enquiry-3d) {
		width: 100%;
		max-width: 320px;
	}
}
/* The straight-on picture of the customer's ring is the main image on the enquiry card. */
.ctd-enquiry-item-media.has-snapshot {
	flex-basis: 240px;
}
@media (max-width: 600px) {
	.ctd-enquiry-item-media.has-snapshot {
		width: 100%;
		max-width: 320px;
	}
}
/* Enquiry page: WhatsApp (pre-filled with the piece and diamond) above the form; uses the shared .btn-primary. */
.ctd-enquiry-whatsapp {
	display: flex;
	justify-content: center;
	margin: 0 0 24px;
}
.ctd-enquiry-whatsapp-btn {
	gap: 8px;
	min-height: 44px;
}

/* #100136 Desktop top bar: top menu and currency on the left, phone number in the centre,
   social icons on the right (journal3/headers/desktop/*.twig). The left and right groups
   share the spare width equally, so the phone number sits in the true centre of the bar. */
.header .top-bar .ctd-top-left,
.header .top-bar .ctd-top-right {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
}
.header .top-bar .ctd-top-right {
	justify-content: flex-end;
}
.header .top-bar .ctd-top-phone {
	flex: 0 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
}
.header .top-bar .ctd-top-phone a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 10px;
	color: var(--ctd-white);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.header .top-bar .ctd-top-phone a:hover {
	text-decoration: underline;
}
/* Currency sits at the far right of the top bar. Journal centres .language-currency with
   absolute positioning, which put it under the phone number. */
/* Prefixed with .desktop-header-active to outrank Journal's generated rule, which is
   loaded after this file and has the same specificity. */
.desktop-header-active .header .top-bar .ctd-top-right .language-currency {
	position: static;
	inset: auto;
	left: auto;
	right: auto;
	transform: none;
	margin: 0 0 0 10px;
	height: 100%;
	display: flex;
	align-items: center;
}

/* #100224 Desktop header bars run edge to edge like the hero and full-width rows below.
   Journal paints the gold top bar, logo row and black menu bar on ::before/::after layers
   that are 100vw wide but capped at --content-max-width, which left a gap of about 9px each
   side of the bars at 1920px. Removing the cap applies to every desktop header layout
   (journal3/headers/desktop/*.twig); the mobile header has no .top-bar or .menu-bar. */
/* Removing the cap was not enough: Journal also sizes these layers as
   calc(100vw - var(--scrollW)) and centres them, and --scrollW is a fixed guess (17px) rather
   than the browser's real scrollbar, so the bars still stopped about 8px short of each edge
   (Clive 23 Oct). Each layer now stretches to its own full-width row instead, so it always
   matches the hero below whatever the scrollbar. The top bar needs position: relative to be
   the layer's containing block; the mid bar and menu bar already have it. */
html.desktop-header-active .header .top-bar {
	position: relative;
}
html.desktop-header-active .header .top-bar::before,
html.desktop-header-active .header .mid-bar::before,
html.desktop-header-active .header .menu-bar::after {
	inset-inline: 0 !important;
	width: auto !important;
	max-width: none;
	transform: none !important;
}
/* #100224 (Luke 19 Oct, "still misaligned") The three header rows now share one left and right
   edge, and the main menu is justified between them: the first item starts on the same line as
   the logo and "About Us", the last ends on the same line as the cart and the top bar's right
   group. Before, each row had its own padding and the menu sat centred with about 160px spare
   on each side. Journal's generated CSS loads after this file, hence the html.* prefix. */
html.desktop-header-active .header {
	--ctd-header-gutter: 20px;
}
html.desktop-header-active .header .top-bar,
html.desktop-header-active .header .mid-bar,
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar {
	padding-inline: var(--ctd-header-gutter);
}
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar .main-menu-1 {
	display: flex;
	width: 100%;
}
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar #main-menu {
	display: flex;
	flex-grow: 1;
	margin: 0;
}
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu {
	width: 100%;
	justify-content: space-between;
}
/* The outer items lose their outside padding so their text, not their padding, meets the edge. */
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item:first-child > a,
html.desktop-header-active .header .top-bar .ctd-top-left > .top-menu:first-child > .j-menu > li:first-child > a {
	padding-inline-start: 0;
}
html.desktop-header-active .header .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item:last-child > a,
html.desktop-header-active .header .top-bar .ctd-top-right > .top-menu:last-child > .j-menu > li:last-child > a,
html.desktop-header-active .header .top-bar .ctd-top-right > .top-menu:last-child > .top-menu > .j-menu > li:last-child > a {
	padding-inline-end: 0;
}

/* Mobile ring pages: the 3D viewer docks under the header while the metal and diamond choices
   scroll past (Luke 18 Oct), then goes back to its place. JS in product_diamond_search.twig. */
.ctd-dock-placeholder,
.ctd-dock-frame {
	display: none;
}
@media (max-width: 768px) {
	.ctd-dock-placeholder.is-active {
		display: block;
	}
	.swiper.main-image.ctd-docked {
		position: fixed;
		top: var(--ctd-dock-top, 64px);
		left: var(--ctd-dock-left, 16px);
		right: auto;
		width: var(--ctd-dock-w, 100%) !important;
		height: var(--ctd-dock-hh, auto) !important;
		margin: 0;
		z-index: 90;
		background: var(--ctd-white);
		/* Same size as in the page, cropped top and bottom with clip-path (the 3D canvas keeps its size: no
		   WebGL reallocation). Stays live: left/right turns the ring, up/down scrolls the page. */
		clip-path: inset(var(--ctd-dock-crop, 0px) 0 var(--ctd-dock-crop, 0px) 0 round var(--ctd-radius, 6px));
		/* Its own compositor layer: the page scrolls past it without repainting it; a soft fade in */
		will-change: transform;
		contain: layout paint;
		animation: ctd-dock-fade .2s ease-out;
	}
	/* Its border, drawn round the visible part (the box's own border is cropped away) */
	.ctd-dock-frame.is-active {
		display: block;
		position: fixed;
		z-index: 96;
		box-sizing: border-box;
		pointer-events: none;
		animation: ctd-dock-fade .2s ease-out;
	}
	/* The docked viewer must sit above the details column: lift its sticky wrapper's stacking context */
	.product-left-wrapper.ctd-dock-host,
	.product-left.ctd-dock-host {
		z-index: 95 !important;
	}
	.swiper.main-image.ctd-docked .ctd-tryon-btn,
	.swiper.main-image.ctd-docked .swiper-pagination,
	.swiper.main-image.ctd-docked .swiper-buttons {
		display: none;
	}
}
@keyframes ctd-dock-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes ctd-dock-in {
	from { transform: translateY(-12px); opacity: 0.6; }
	to { transform: none; opacity: 1; }
}

/* Mobile ring pages, step by step (Luke 19 Oct): the 3D ring sits at the top and the choices come one step
   at a time underneath (1 Metal, 2 Colour, 3 Diamond, 4 Search), so the ring and the choice being made are on
   screen together without scrolling. html.ctd-steps-on is set before the sections render (phones only).
   JS in product_diamond_search.twig. Desktop is unchanged. */
:root {
	--ctd-stage-h: min(50vh, 100vw);   /* square at most (Luke 28 Oct: was 118vw, a portrait box) */
}
@supports (height: 1svh) {
	:root { --ctd-stage-h: min(50svh, 100vw); }   /* svh: doesn't change as the address bar slides in and out */
}
/* Short phones (iPhone SE and similar, 700px tall or less): half the screen left only about 90px for the
   step under the pinned ring, so the colour labels were cut off. The ring takes 40% there instead. */
@media (max-height: 700px) {
	:root { --ctd-stage-h: min(40vh, 100vw); }
	@supports (height: 1svh) {
		:root { --ctd-stage-h: min(40svh, 100vw); }
	}
}
.ctd-stepbar,
.ctd-step-nav {
	display: none;
}
@media (max-width: 768px) {
	/* One step at a time. !important: the page's own jQuery .show() writes display:block on every section */
	html.ctd-steps-on .ctd-config-panel .ctd-section[data-ctd-step]:not(.ctd-step-current) {
		display: none !important;
	}
	html.ctd-steps-on .ctd-config-panel .ctd-section[data-ctd-step] {
		margin-bottom: 12px !important;
	}

	/* The viewer: square (Luke 28 Oct), no taller than its share of the screen so the step below always fits under it */
	html.ctd-steps-on #product-product .product-image .main-image {
		width: min(100%, var(--ctd-stage-h)) !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
	}
	html.ctd-steps-on #product-product #view360_example {
		width: 100% !important;
	}
	html.ctd-steps-on #product-product .product-image .main-image .swiper-container,
	html.ctd-steps-on #product-product .product-image .main-image .swiper-wrapper,
	html.ctd-steps-on #product-product .product-image .main-image .swiper-slide,
	html.ctd-steps-on #product-product #view360_example {
		height: 100% !important;
		min-height: 0 !important;
	}
	html.ctd-steps-on #product-product .product-image .main-image img {
		object-fit: contain;
	}
	/* Extra photos of the same ring: the 3D shows every side, and they'd push the steps off screen */
	html.ctd-steps-on #product-product .product-image .additional-images {
		display: none;
	}

	/* Step bar: five equal tabs (5 = the basket screen). Taken in order (Luke 2 Nov): a step not reached yet is
	   locked, done steps show a tick and can be tapped to go back. On the basket screen the bar is progress only. */
	html.ctd-steps-on .ctd-stepbar:not(.is-hidden) {
		display: block;
		margin: 4px 0 14px;
	}
	.ctd-stepbar ol {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ctd-stepbar-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		width: 100%;
		min-height: 52px;
		padding: 4px 2px;
		border: 1px solid var(--ctd-card-border);
		border-radius: var(--ctd-radius);
		background: var(--ctd-white);
		color: #555555;
		font: 500 14px/1.2 Outfit, system-ui, sans-serif;
		cursor: pointer;
	}
	.ctd-stepbar-num {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 1px solid currentColor;
		font-size: 12px;
	}
	.ctd-stepbar-btn.is-done {
		color: var(--ctd-black);
		border-color: var(--ctd-gold);
	}
	.ctd-stepbar-btn.is-current {
		border-color: var(--ctd-gold);
		background: var(--ctd-gold);
		color: var(--ctd-white);
	}
	.ctd-stepbar-btn.is-done .ctd-stepbar-num {
		border-color: var(--ctd-gold);
		background: var(--ctd-gold);
		color: var(--ctd-white);
	}
	.ctd-stepbar-btn.is-locked {
		opacity: .5;
		cursor: default;
	}
	.ctd-stepbar.is-summary .ctd-stepbar-btn {
		cursor: default;
	}
	.ctd-stepbar-btn[disabled] {
		pointer-events: none;
	}
	@media (max-width: 380px) {
		.ctd-stepbar-btn {
			font-size: 13px;
		}
	}

	/* Back / Next under the step */
	html.ctd-steps-on .ctd-step-nav:not(.is-hidden) {
		display: flex;
		gap: 10px;
		margin: 4px 0 18px;
	}
	.ctd-step-nav .btn {
		min-height: 48px;
		border-radius: var(--ctd-radius);
		font-size: 16px;
	}
	.ctd-step-nav .ctd-step-back {
		flex: 0 0 30%;
	}
	.ctd-step-nav .ctd-step-next {
		flex: 1 1 auto;
		color: var(--ctd-white);
	}
	.ctd-step-nav [hidden] {
		display: none !important;
	}
	.ctd-step-nav .ctd-step-back[disabled] {
		opacity: .45;
	}

	/* Pinned while configuring (html.ctd-stage-pinned, set by the steps JS): the ring sticks under the header
	   (--ctd-head-h, measured) while the page scrolls the step past it; the ring lets go at the end of the
	   product block. */
	html.ctd-stage-pinned #product-product .product-left {
		position: sticky;
		top: var(--ctd-head-h, 0px);
		z-index: 20;
		background: var(--ctd-white);
		/* Lets go with the step panel: once the panel's end scrolls up to the ring, the ring goes up with it, so
		   the help cards and related rings below never slide under it (--ctd-stage-push, set by the steps JS) */
		transform: translateY(var(--ctd-stage-push, 0px));
	}
	html.ctd-stage-pinned #product-product .product-left-wrapper {
		position: relative;
		top: auto;
	}
	/* Journal's .site-wrapper has overflow: hidden, which stops position: sticky working inside it: the "pinned"
	   ring scrolled away with the page, so it was off screen while the choices were made (Luke 2 Nov).
	   clip still stops sideways overflow but isn't a scroll box, so the ring sticks. */
	html.ctd-stage-pinned .site-wrapper {
		overflow: clip;
	}
	/* The phone gallery's thumbnail row (28 Oct) waits until the basket screen: while configuring, its 60px goes to
	   the step under the ring. Swiping through the pictures still works. */
	html.ctd-stage-pinned #product-product .ctd-mg-thumbs {
		display: none;
	}
	/* custom.css gives the panel overflow: hidden on phones, which made it the scroll box for the sticky step bar:
	   the bar was pushed to the panel's bottom, under Back/Next. clip still clips but keeps sticky on the page. */
	html.ctd-stage-pinned .ctd-config-panel {
		overflow: clip;
	}
	/* Journal makes the details column sticky with z-index 90 (a desktop feature): on phones it painted the
	   step, the help cards and the related rings over the pinned ring (Luke 22 Oct). It scrolls normally here. */
	#product-product .product-right-wrapper {
		position: relative !important;
		top: auto !important;
		z-index: auto !important;
	}
	/* No scrolling inside the panel (Luke 19 Oct): it is as tall as its step and the page scrolls; the ring
	   stays pinned above it (sticky), so the step bar sticks just under the ring and Back/Next at the bottom */
	html.ctd-stage-pinned .ctd-stepbar:not(.is-hidden) {
		position: sticky;
		top: calc(var(--ctd-head-h, 0px) + var(--ctd-stage-real, var(--ctd-stage-h, 0px)));
		z-index: 2;
		margin-top: 0;
		padding-top: 6px;
		background: var(--ctd-white);
	}
	/* #1413: the pendant's Metal step (title, metal tabs, swatches) is taller than the room under the pinned ring
	   on a 390px phone, so it has to be scrolled, and the step title ("Metal : 100% Recycled Platinum") slid up
	   under the stuck step bar, half hidden. The step's title now sticks just under the bar (--ctd-stepbar-h,
	   measured by the steps JS) and only the choices scroll beneath it. Steps 1 and 2 (the h3 titles). */
	html.ctd-stage-pinned .ctd-config-panel .ctd-section[data-ctd-step] > h3.ctd-section-title:first-child {
		position: sticky;
		top: calc(var(--ctd-head-h, 0px) + var(--ctd-stage-real, var(--ctd-stage-h, 0px)) + var(--ctd-stepbar-h, 58px));
		z-index: 1;
		background: var(--ctd-white);
	}
	html.ctd-stage-pinned .ctd-step-nav:not(.is-hidden) {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin-bottom: 0;
		padding: 8px 0;
		background: var(--ctd-white);
	}
}

/* Detailed Search on ring pages (Luke 2 Nov: "isn't great"). Was 10–12px labels and checkboxes about 20px tall;
   now readable text, 44px choice chips (the checkbox is hidden; the chip turns gold when chosen), 48px fields
   (16px, so iPhones don't zoom in), and Back / Search Diamonds styled like the steps' Back / Next. On phones
   that pair sticks to the bottom of the screen while the filters scroll. Id selectors: custom.css loads after
   this file. The JS (budget carried over, inline messages, its own Back step) is in product_diamond_search.twig. */
#detailed-search-form .ctd-ds-section {
	padding: 16px 0;
}
#detailed-search-form .ctd-ds-label,
#detailed-search-form .ctd-ds-label-bold {
	margin-bottom: 8px;
	color: var(--ctd-black);
	font: 600 16px/1.3 Outfit, system-ui, sans-serif;
}
#detailed-search-form .ctd-ds-help {
	margin-top: 6px;
	color: #666666;
	font-size: 14px;
	font-style: normal;
	line-height: 1.4;
}
#detailed-search-form .form-control {
	min-height: 48px;
	border-radius: var(--ctd-radius);
	font-size: 16px;
}
#detailed-search-form .ctd-ds-checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
}
#ds-colour-fancy .ctd-ds-checkboxes,
#ds-fluorescence-wrap .ctd-ds-checkboxes,
#ds-intensity-wrap .ctd-ds-checkboxes {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
#detailed-search-form .ctd-ds-check {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 6px 8px;
	border: 1px solid #CCCCCC;
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ctd-black);
	font: 500 16px/1.2 Outfit, system-ui, sans-serif;
	text-align: center;
}
#detailed-search-form .ctd-ds-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
#detailed-search-form .ctd-ds-check input:checked + span {
	color: inherit;
	font-weight: 600;
}
#detailed-search-form .ctd-ds-check:has(input:checked) {
	border-color: var(--ctd-gold);
	background: var(--ctd-gold);
	color: var(--ctd-white);
}
#detailed-search-form .ctd-ds-check:has(input:focus-visible) {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
}
#detailed-search-form #btn-advanced-search,
#detailed-search-form #btn-advanced-search:hover,
#detailed-search-form #btn-advanced-search:focus {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ctd-black) !important;   /* Journal's outline button paints its text white */
	font-size: 16px;
	text-transform: none;
}
#detailed-search-form #btn-advanced-search i {
	margin-left: 6px;
	color: var(--ctd-gold);
}
/* Advanced Search (Luke 2 Nov: "formatted dreadfully"): no box inside the card, the same chips as the other
   filters (Cut / Polish / Symmetry grades, two per row on phones), one divider above the toggle */
#detailed-search-form .ctd-ds-advanced {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
#detailed-search-form .ctd-ds-advanced .ctd-ds-section {
	padding-top: 4px;
}
#detailed-search-form .ctd-ds-row {
	margin-bottom: 16px;
}
#detailed-search-form .ctd-ds-row .ctd-ds-label {
	font-weight: 500;
}
#detailed-search-form .ctd-ds-grades {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* Chip grids in whole rows, sized by the panel's own width (it is narrower in the Ring Maker than on the ring pages), so
   no chip is left on a row of its own (#1625). Browsers without container queries keep the auto-fill grids above. Kept below
   the grades rule above, which it overrides. */
@supports (container-type: inline-size) {
	#detailed-search-form {
		container: ctd-ds / inline-size;
	}
	#ds-colour-white .ctd-ds-checkboxes,
	#detailed-search-form .ctd-ds-checkboxes:has(input[name="ds-clarity[]"]) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	#detailed-search-form .ctd-ds-grades,
	#ds-colour-fancy .ctd-ds-checkboxes,
	#ds-fluorescence-wrap .ctd-ds-checkboxes,
	#ds-intensity-wrap .ctd-ds-checkboxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#ds-fluorescence-wrap .ctd-ds-check:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	@container ctd-ds (min-width: 420px) {
		#ds-colour-white .ctd-ds-checkboxes {
			grid-template-columns: repeat(7, minmax(0, 1fr));
		}
		#detailed-search-form .ctd-ds-grades {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		#ds-colour-fancy .ctd-ds-checkboxes,
		#ds-intensity-wrap .ctd-ds-checkboxes {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
	@container ctd-ds (min-width: 560px) {
		#detailed-search-form .ctd-ds-checkboxes:has(input[name="ds-clarity[]"]) {
			grid-template-columns: repeat(8, minmax(0, 1fr));
		}
	}
	@container ctd-ds (min-width: 600px) {
		#ds-fluorescence-wrap .ctd-ds-checkboxes {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		#ds-fluorescence-wrap .ctd-ds-check:last-child:nth-child(odd) {
			grid-column: auto;
		}
	}
}
#detailed-search-form .ctd-ds-advanced-toggle {
	margin: 0;
	padding: 16px 0 8px;
	border-top: 0;   /* the clarity section above already ends in a divider (there were two lines) */
}
#detailed-search-form .ctd-ds-buttons {
	display: flex;
	gap: 10px;
}
#detailed-search-form .ctd-ds-buttons .btn {
	min-height: 48px;
	border-radius: var(--ctd-radius);
	font-size: 16px;
	text-transform: none;
}
#detailed-search-form #btn-detailed-search-cancel {
	order: -1;
	flex: 0 0 30%;
}
#detailed-search-form #btn-detailed-search-submit {
	flex: 1 1 auto;
	border-color: var(--ctd-gold);
	background: var(--ctd-gold);
	color: var(--ctd-white);
}
#detailed-search-form #ds-price-error {
	margin-top: 8px;
	font-size: 15px;
}
/* Paired fields (price, carat): the two labels share one row, so the boxes line up when one label wraps
   ("Minimum price (optional)" next to "Maximum price" on phones). Ring pages and the Ring Maker (#1625). */
@supports (grid-template-rows: subgrid) {
	#detailed-search-form .ctd-ds-price-range {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 0;
	}
	#detailed-search-form .ctd-ds-price-field {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
	#detailed-search-form .ctd-ds-price-field .ctd-ds-label {
		align-self: end;
	}
}
@media (max-width: 768px) {
	/* Same reason as the pinned ring: overflow hidden here would stop the buttons sticking */
	html.ctd-ds-open .site-wrapper,
	html.ctd-ds-open .ctd-config-panel {
		overflow: clip;
	}
	#detailed-search-form .ctd-ds-price-range {
		flex-direction: row;
		gap: 12px;
	}
	/* contents: the buttons' box becomes the whole form, so they can stick for its full length (inside the short
	   actions row they couldn't) */
	#detailed-search-form .ctd-ds-actions {
		display: contents;
	}
	#detailed-search-form .ctd-ds-sort {
		padding-top: 12px;
		border-top: 1px solid #EEEEEE;
	}
	#detailed-search-form .ctd-ds-buttons {
		position: sticky;
		bottom: 0;
		z-index: 3;
		flex-direction: row;
		padding: 10px 0;
		background: var(--ctd-white);
	}
	#detailed-search-form .ctd-ds-buttons .btn {
		width: auto;
	}
	/* The back-to-top button sat on Search Diamonds; lift it above the bar, as for the sticky Add to Cart */
	html.ctd-ds-open .scroll-top {
		bottom: 90px;
	}
}

/* Ring summary: change the metal next to the chosen diamond; the 3D ring and the total follow (all screen sizes) */
.ctd-summary-metal {
	margin: 0 0 18px;
}
/* Folded: metal name and a "Change metal" button on one line; the swatches open below when asked */
.ctd-summary-metal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.ctd-summary-metal-head .ctd-summary-metal-title {
	margin: 0;
}
.ctd-summary-metal-toggle {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ctd-black);
	font-size: 15px;
	cursor: pointer;
}
.ctd-summary-metal-toggle:hover,
.ctd-summary-metal-toggle[aria-expanded="true"] {
	background: var(--ctd-gold);
	color: var(--ctd-white);
}
.ctd-summary-metal-swatches[hidden] {
	display: none;
}
.ctd-summary-metal[hidden] {
	display: none;
}
.ctd-summary-metal-title {
	margin: 0 0 8px;
	font-size: 18px;
}
.ctd-summary-metal-name {
	font-weight: 400;
	color: #666666;
}
.ctd-summary-metal-swatches {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.ctd-summary-swatch {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 86px;
	min-height: 44px;
	padding: 6px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	scroll-snap-align: start;
	cursor: pointer;
}
.ctd-summary-swatch img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
}
.ctd-summary-swatch.is-active {
	border-color: var(--ctd-gold);
	box-shadow: 0 0 0 1px var(--ctd-gold);
}
.ctd-summary-swatch-diff {
	color: #666666;
	font-size: 11px;
}

/* Stripe checkout (extension/stripe247): inline payment block under the order summary.
   Full width of the summary column, so it lines up with the table and the method tabs fit. */
.ctd-stripe {
	width: 100%;
	margin: 20px 0 0;
}
.ctd-stripe-element {
	min-height: 120px;
	transition: opacity .2s ease;
}
.ctd-stripe-loading {
	padding: 40px 0;
	text-align: center;
	color: #666666;
	font-size: 16px;
}
.ctd-stripe.is-ready .ctd-stripe-loading {
	display: none;
}
.ctd-stripe.is-busy .ctd-stripe-element {
	opacity: .6;
	pointer-events: none;
}
.ctd-stripe-message {
	display: none;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid #B42318;
	border-radius: var(--ctd-radius);
	color: #B42318;
	font-size: 16px;
	line-height: 1.5;
}
.ctd-stripe-message.is-visible {
	display: block;
}
.ctd-stripe .ctd-stripe-pay {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 16px;
	border: 0;
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-size: 18px;
	font-weight: 500;
}
.ctd-stripe .ctd-stripe-pay:hover:not(:disabled) {
	background: var(--ctd-gold-hover);
}
.ctd-stripe .ctd-stripe-pay:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.ctd-stripe-secure {
	margin: 12px 0 0;
	color: #666666;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.ctd-stripe-test,
.ctd-stripe-alert {
	border-radius: var(--ctd-radius);
	font-size: 16px;
}

/* Checkout: address cards overlapping (Luke 19 Oct). Journal's generated CSS makes every block
   in the left column (.checkout-section-start>div) and the whole right column
   (.checkout-section-end) position: sticky. On the OC 4.1 checkout the left column holds
   several cards (personal details, payment address, shipping address), so they all stuck at
   the same top and piled up. It only showed once sticky started working site-wide (18 Oct).
   The right column now holds the Stripe payment form, which can be taller than the screen,
   so it stays in normal flow too. Journal's file loads after this one, hence :root. */
:root.route-checkout-checkout .checkout-section-start > div,
:root.route-checkout-checkout .checkout-section-end {
	position: static;
}

/* Checkout steps and address autocomplete (js/ctd-checkout.js).
   Until details and address are saved, delivery and payment stay hidden and a short hint shows
   instead; the order summary is always visible. A single shipping option (free UK delivery) is
   chosen automatically and its box hidden, as is the payment chooser when only one method exists. */
.ctd-checkout-hint {
	display: none;
	margin-bottom: 20px;
	padding: 14px 16px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	font-size: 16px;
	line-height: 1.5;
}
.ctd-checkout-hint i {
	margin-right: 6px;
}
.ctd-checkout-pending .ctd-checkout-hint {
	display: block;
}
.ctd-checkout-pending #checkout-shipping-method,
.ctd-checkout-pending #checkout-payment-method,
.ctd-checkout-pending #checkout-payment,
.ctd-single-shipping #checkout-shipping-method,
.ctd-single-payment #checkout-payment-method > fieldset {
	display: none;
}
.ctd-checkout-loading #checkout-confirm {
	opacity: .6;
	transition: opacity .2s ease;
}

.ctd-ac-wrap {
	position: relative;
}
.ctd-ac-list {
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: var(--ctd-white);
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.ctd-ac-list li {
	padding: 10px 14px;
	min-height: 44px;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}
.ctd-ac-list li span {
	color: #666666;
	font-size: 14px;
}
.ctd-ac-list li:hover,
.ctd-ac-list li.is-active {
	background: #F7F3EA;
}
.ctd-ac-list li.ctd-ac-credit {
	min-height: 0;
	padding: 4px 14px 2px;
	color: #999999;
	font-size: 12px;
	text-align: right;
	cursor: default;
}
.ctd-ac-list li.ctd-ac-credit:hover {
	background: none;
}

/* Checkout progress (js/ctd-checkout.js): after Continue the button shows "Saving your details…"
   with a spinner, and the right column shows what is happening until the payment form is ready. */
@keyframes ctd-spin {
	to { transform: rotate(360deg); }
}
.ctd-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(194, 165, 89, .3);
	border-top-color: var(--ctd-gold);
	border-radius: 50%;
	vertical-align: -3px;
	animation: ctd-spin .8s linear infinite;
}
.ctd-spinner-light {
	border-color: rgba(255, 255, 255, .4);
	border-top-color: var(--ctd-white);
	margin-right: 6px;
}
.ctd-checkout-progress {
	display: none;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 16px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	font-size: 16px;
	line-height: 1.5;
}
.ctd-checkout-working .ctd-checkout-progress {
	display: flex;
}
.ctd-checkout-working .ctd-checkout-hint {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.ctd-spinner {
		animation-duration: 2s;
	}
}

/* Checkout on phones and tablets (Luke 19 Oct, "100% responsive").
   Order summary: item details at a readable 14px (Journal's are 12px), and the price column
   only as wide as the price so the description is not squeezed into a tall narrow column. */
.route-checkout-checkout #checkout-confirm .checkout-cart-item small {
	font-size: 14px;
	line-height: 1.45;
}
.route-checkout-checkout #checkout-confirm table td:last-child {
	width: 1%;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.route-checkout-checkout #checkout-confirm table td {
		padding: 10px 8px;
	}
	/* Journal's round back-to-top button sat on top of the Pay button. */
	.route-checkout-checkout .scroll-top {
		display: none;
	}
}

/* Checkout summary picture: the same image as the basket (the customer's own ring from the 3D
   viewer, with their metal and diamond colour, else the product photo). */
.route-checkout-checkout #checkout-confirm .checkout-cart-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.route-checkout-checkout #checkout-confirm .ctd-summary-thumb {
	flex: 0 0 64px;
}
.route-checkout-checkout #checkout-confirm .ctd-summary-thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
}

/* Ring page with a diamond chosen: no rule lines or extra space between the title and the
   "Your Selected Diamond" card (Luke 19 Oct). The card has its own border. */
#product-product .ctd-post-selection{margin-top:0;padding-top:0;border-top:0}

/* Ring page: all seven diamond colours (White first) in one row, desktop and phones, so every colour is seen
   at a glance (Luke 19 Oct; phones had White on its own row above a 3-column grid). A narrow column wraps to
   two rows at most. */
.ctd-diamond-colours-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
/* Journal's compiled CSS (admin custom CSS, not in the repo) sets this wrapper to flex-direction: column,
   which stacked the seven colours one per line; the ID outranks it */
#product-product .ctd-diamond-colours-wrapper {
	flex-direction: row;
}
.ctd-diamond-colours-wrapper .ctd-diamond-active-row,
.ctd-diamond-colours-wrapper .ctd-diamond-colours {
	display: contents !important;
}
.ctd-diamond-colours-wrapper .ctd-diamond-colour {
	flex: 0 0 60px;
	width: 60px !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 4px 0 !important;
	/* Journal's admin CSS gives the other colours (inside .ctd-diamond-colours) an 8px gap that White (in the
	   active row) doesn't get, so WHITE sat 8px above PINK, YELLOW… (Luke 22 Oct). Same spacing for all. */
	gap: 0 !important;
}
.ctd-diamond-colours-wrapper .ctd-diamond-colour img,
.ctd-diamond-colours-wrapper .ctd-diamond-colour:first-child img {
	width: 48px !important;
	height: 48px !important;
}
.ctd-diamond-colours-wrapper .ctd-diamond-colour span,
.ctd-diamond-colours-wrapper .ctd-diamond-colour:first-child span {
	margin-top: 3px !important;
}
/* Phones: smaller dots so all seven fit on one row from 360px phones up (328px between the page margins) */
@media (max-width: 768px) {
	.ctd-diamond-colours-wrapper {
		gap: 3px;
	}
	.ctd-diamond-colours-wrapper .ctd-diamond-colour {
		flex-basis: 43px;
		width: 43px !important;
		padding: 3px 0 !important;
	}
	.ctd-diamond-colours-wrapper .ctd-diamond-colour img,
	.ctd-diamond-colours-wrapper .ctd-diamond-colour:first-child img {
		width: 38px !important;
		height: 38px !important;
	}
	.ctd-diamond-colours-wrapper .ctd-diamond-colour span,
	.ctd-diamond-colours-wrapper .ctd-diamond-colour:first-child span {
		margin-top: 2px !important;
		font-size: 9px;
	}
}

/* Product card metal swatches (journal3/products.twig), matching the category card
   "Metal Options" row on the shop-by pages: grey 15px label, square 40px swatches 13px apart */
.ctd-card-metals {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 9px; /* 44px tap boxes, so the visible gap between swatches is 13px */
	margin: 10px 0 0;
	padding-bottom: 20px;
	font-family: Outfit, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 25.5px;
	color: #575757;
	text-align: center;
}

.ctd-card-metals-label {
	flex-basis: 100%;
}

.ctd-card-metal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.ctd-card-metal img {
	width: 40px;
	height: 40px;
	display: block;
}

.ctd-card-metal:hover img,
.ctd-card-metal:focus-visible img,
.ctd-card-metal.is-active img {
	outline: 1px solid var(--ctd-gold);
	outline-offset: 1px;
}

/* Plain wedding rings guide below the designer (/wedding-ring-designer/), SEO 2026-10-20 */
.ctd-wr-guide {
	background: var(--ctd-white);
	padding: 48px 16px;
}
.ctd-wr-guide-inner {
	max-width: 880px;
	margin: 0 auto;
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	line-height: 30.6px;
	color: #222222;
}
.ctd-wr-guide h2 {
	font-family: 'Cormorant Garamond', serif;
	font-size: 32px;
	line-height: 1.2;
	margin: 40px 0 12px;
}
.ctd-wr-guide h2:first-child {
	margin-top: 0;
}
.ctd-wr-guide p,
.ctd-wr-guide-list {
	margin: 0 0 16px;
}
.ctd-wr-guide-list {
	padding-left: 20px;
}
.ctd-wr-guide-list li {
	margin-bottom: 8px;
}
.ctd-wr-guide a:not(.ctd-wr-guide-btn) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ctd-gold);
	text-underline-offset: 3px;
}
.ctd-wr-guide-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 24px;
	background: var(--ctd-gold);
	color: var(--ctd-white);
	border-radius: var(--ctd-radius);
	text-decoration: none;
}
.ctd-wr-guide-btn:hover,
.ctd-wr-guide-btn:focus-visible {
	background: var(--ctd-gold-hover);
	color: var(--ctd-white);
}
.ctd-wr-faq-item {
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	margin-bottom: 8px;
	background: var(--ctd-white);
}
.ctd-wr-faq-item summary {
	cursor: pointer;
	min-height: 44px;
	padding: 10px 16px;
	font-weight: 500;
}
.ctd-wr-faq-answer {
	padding: 0 16px 4px;
}
@media (max-width: 767px) {
	.ctd-wr-guide { padding: 32px 16px; }
	.ctd-wr-guide-inner { font-size: 16px; line-height: 27px; }
	.ctd-wr-guide h2 { font-size: 26px; margin-top: 32px; }
}

/* Elongated cushion / radiant shape tile (diamond search + Browse by Shape): the cushion / radiant icon drawn narrower so it
   reads as an elongated stone, until a dedicated image is added to image/diamonds/. */
.shape-img--elongated {
	transform: scaleX(0.72);
}

/* Carat pages: typical size by shape table (system/library/ctd/carat_content.php) */
.ctd-carat-sizes {
	width: 100%;
	max-width: 720px;
	margin: 8px 0 20px;
	border-collapse: collapse;
}
.ctd-carat-sizes th,
.ctd-carat-sizes td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--ctd-card-border);
	text-align: left;
}
@media (max-width: 600px) {
	.ctd-carat-sizes th,
	.ctd-carat-sizes td {
		padding: 6px 8px;
		font-size: 16px;
	}
}

/* Diamond result cards in even rows: the floated columns left gaps under shorter cards (round stones
   carry an extra "Cut" line, certificate logos differ in height). Flex rows, every card as tall as
   the tallest in its row. Search results (first page and AJAX pages) and related diamonds. */
#searchres_diamond .row:has(> .filter-product-wrapper),
#product-product #relatedDiamonds .row:has(> .filter-product-wrapper) {
	display: flex;
	flex-wrap: wrap;
}
#searchres_diamond .row > .filter-product-wrapper,
#product-product #relatedDiamonds .row > .filter-product-wrapper {
	display: flex;
	float: none;
}
#searchres_diamond .row > .filter-product-wrapper > .filter-product,
#product-product #relatedDiamonds .row > .filter-product-wrapper > .filter-product {
	width: 100%;
}

/* Cookie banner (Consent Mode v2), common/footer.twig. Fixed to the bottom, so it causes no
   layout shift. Reject and Accept are the same gold button (equal prominence, ICO guidance);
   Manage is the outline button. */
.ctd-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Top of the stack: the diamond search forms set #shop to z-index 100002 on phones and tablets, which
	   painted the filter buttons over Reject / Manage / Accept */
	z-index: 2147483000;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: var(--ctd-black);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}
.ctd-consent[hidden] {
	display: none;
}
.ctd-consent__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
}
.ctd-consent__title {
	flex: 1 1 100%;
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--ctd-gold);
}
.ctd-consent__text {
	flex: 1 1 420px;
	margin: 0;
}
.ctd-consent__text a {
	color: var(--ctd-white);
	text-decoration: underline;
}
.ctd-consent__prefs {
	flex: 1 1 100%;
	display: grid;
	gap: 8px;
}
.ctd-consent__prefs[hidden] {
	display: none;
}
.ctd-consent__option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	min-height: 44px;
	font-weight: 400;
	color: var(--ctd-white);
	cursor: pointer;
}
.ctd-consent__option input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 4px 0 0;
	accent-color: var(--ctd-gold);
}
.ctd-consent__option strong {
	display: block;
	color: var(--ctd-gold);
	font-weight: 500;
}
/* Visible buttons always share one width, so Reject all is never smaller than Accept all. */
.ctd-consent__actions {
	flex: 0 0 auto;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(140px, 1fr);
	gap: 8px;
}
.ctd-consent__btn {
	min-height: 44px;
	padding: 10px 12px;
	white-space: nowrap;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
.ctd-consent__btn:hover,
.ctd-consent__btn:focus-visible {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
}
.ctd-consent__btn--outline {
	background: transparent;
	color: var(--ctd-white);
}
.ctd-consent__btn--outline:hover,
.ctd-consent__btn--outline:focus-visible {
	background: transparent;
	color: var(--ctd-gold);
}
.ctd-consent__btn[hidden] {
	display: none;
}
.ctd-consent__btn:focus-visible,
.ctd-consent__option input:focus-visible,
.ctd-consent__text a:focus-visible {
	outline: 2px solid var(--ctd-white);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.ctd-consent__actions {
		flex: 1 1 100%;
		grid-auto-columns: 1fr;
	}
}

/* "Cookie settings" at the foot of every page reopens the banner. */
.ctd-cookie-settings-bar {
	padding: 8px 16px 16px;
	text-align: center;
	background: var(--ctd-footer-bg);
}
.ctd-cookie-settings-link {
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	background: none;
	color: var(--ctd-footer-text);
	font-family: inherit;
	font-size: 16px;
	text-decoration: underline;
	cursor: pointer;
}
.ctd-cookie-settings-link:hover,
.ctd-cookie-settings-link:focus-visible {
	color: var(--ctd-gold);
}
/* Policy links share the cookie settings link style, on one centred line that wraps on mobile */
.ctd-footer-legal {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
}
a.ctd-cookie-settings-link {
	display: inline-flex;
	align-items: center;
}

/* Journal's old "We use cookies" notification (module 137) only had an OK button and is
   replaced by the banner above. Hidden until it is switched off in Journal admin. */
.module-notification-137 {
	display: none !important;
}

/* Tweak 4738: home page "Choose Your Perfect Diamond" shape strip (banners grid module 1266).
   The two-line labels sit above each diamond, centred on it, instead of over the bottom of the
   picture. The strip grows to fit them, on a black background. Journal's generated stylesheet
   loads after this file and paints the module body cream, hence !important. */
.module-banners_grid-1266,
.module-banners_grid-1266 > .module-body {
	background: #000000 !important;
}
.module-banners_grid-1266 .module-item,
.module-banners_grid-1266 .slide-content {
	height: auto !important;
}
.module-banners_grid-1266 .slide-content {
	flex-direction: column;
	justify-content: flex-start;
}
.module-banners_grid-1266 .slide-content > img {
	position: relative !important;
	width: 100%;
	height: auto !important;
}
/* Labels first (order: -1), pulled down into the empty space at the top of each picture. */
.module-banners_grid-1266 .slide-cols {
	order: -1;
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto !important;
	margin: 0 0 -26px !important;
	padding: 14px 4px 0 !important;
}
.module-banners_grid-1266 .slide-col,
.module-banners_grid-1266 .slide-layers {
	width: 100%;
	height: auto !important;
	justify-content: center;
}
.module-banners_grid-1266 .module-subitem,
.module-banners_grid-1266 .slide-text-layer,
.module-banners_grid-1266 .slide-text-item {
	position: static !important;
	width: 100%;
	margin: 0 !important;
	transform: none !important;
	justify-content: center;
	text-align: center;
	line-height: 1.3;
}
/* The Round Brilliant label has 25px left padding set on it in Journal admin, which pushed it
   13px right of its diamond. Labels here are centred, so no side padding on any of them. */
.module-banners_grid-1266 .slide-text-item span {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Desktop: all ten tiles fit the row, so drop Journal's scroll gutter, which pushed the first
   tile 32px off the left edge and left the row off-centre. */
@media (min-width: 1025px) {
	.module-banners_grid-1266 .banners-grid {
		margin-left: 0 !important;
	}
	.module-banners_grid-1266 .banners-wrapper {
		padding-right: 0 !important;
	}
}

/* Engagement ring pages (Luke 22 Oct 2026): the line under the ring's title - metal (follows the metal
   swatch), bezel setting, band. The title above it keeps Journal's 28px bottom margin, so pull it up. */
#product-product .ctd-ring-subline {
	margin: -20px 0 24px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

/* Side stones (melee) count and estimated carats, under the title / ring subline (Luke 22 Oct) */
#product-product .ctd-side-stones {
	margin: -16px 0 24px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}
#product-product .ctd-ring-subline + .ctd-side-stones {
	margin-top: -20px;
}

/* Coloured diamond engagement ring pages: "Shop by colour" swatch links above the rings, one per diamond
   colour on the ring page (Pink, Yellow, Blue, Green, Orange, Brown). Markup lives in the category
   description (migrations/2026-10-22_coloured-rings-layout-colours.sql). Centred under the intro;
   wraps to a centred grid on tablet and two even columns on phones, never wider than the screen. */
.ctd-colour-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin: 16px auto 24px;
	box-sizing: border-box;
}
.ctd-colour-links__label {
	flex-basis: 100%;
	font-weight: 600;
	text-align: center;
}
.ctd-colour-links .ctd-colour-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 0;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: inherit;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	white-space: nowrap;
}
.ctd-colour-links .ctd-colour-link img {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}
.ctd-colour-links .ctd-colour-link:hover,
.ctd-colour-links .ctd-colour-link:focus-visible,
.ctd-colour-links .ctd-colour-link.is-current {
	border-color: var(--ctd-gold);
}
.ctd-colour-links .ctd-colour-link.is-current {
	box-shadow: inset 0 0 0 1px var(--ctd-gold);
	font-weight: 600;
}
.ctd-colour-links .ctd-colour-link--all {
	padding-left: 14px;
}
/* Tablet: three per row, equal widths */
@media (max-width: 991px) {
	.ctd-colour-links .ctd-colour-link {
		flex: 0 1 calc((100% - 20px) / 3);
	}
}
/* Phone: two per row, equal widths ("All colours" takes the full row) */
@media (max-width: 575px) {
	.ctd-colour-links .ctd-colour-link {
		flex: 0 1 calc((100% - 10px) / 2);
		padding-right: 10px;
	}
	.ctd-colour-links .ctd-colour-link--all {
		flex-basis: 100%;
	}
}

/* Ring pages (Luke 22 Oct 2026): shown under the metal swatches when a metal has no live product yet */
#product-product .ctd-metal-note {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

/* Product pages (Luke 22 Oct 2026): lead time and estimated delivery next to Add to basket */
#product-product .ctd-lead-time {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}
#product-product .ctd-lead-time strong {
	font-weight: 600;
}

/* Product pages: show the product's H1 (Luke 22 Oct: "no title" on the earring and ring pages). The title
   band at the top isn't drawn on product pages, and both Journal (.product-details .page-title) and the admin
   custom CSS (.route-product-product h1.page-title, compiled, not in the repo) hide the H1 in the right-hand
   column, so the page had no visible title at all. This is the page's only H1; the ID outranks both rules. */
.route-product-product:not(.popup) #product-product .product-details h1.page-title {
	display: block;
}

/* Coloured diamond engagement ring pages: the style tile being shown (?style=halo, or All Styles).
   The tiles are the normal sub-category tiles; this only marks the active one. */
.refine-categories .refine-item.is-active > a {
	box-shadow: 0 0 0 2px var(--ctd-gold);
	border-radius: var(--ctd-radius);
}
.refine-categories .refine-item.is-active .refine-name {
	font-weight: 600;
}

/* Stud earrings: "Matched pair, sizes within 0.04 mm" under a pair's carats (results card and chosen stone) */
.ctd-pair-note {
	color: var(--ctd-gold);
	font-weight: 500;
}

/* Stud earrings: a matched pair's two stones (results cards and the chosen pair). Side by side from tablet up;
   on phones one at a time, swiped (scroll-snap), with two dots showing which one is in view (Luke 22 Oct). */
.ctd-pair-photos {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ctd-pair-photos::-webkit-scrollbar { display: none; }
.ctd-pair-photo {
	flex: 0 0 calc(50% - 4px);
	margin: 0;
	scroll-snap-align: center;
}
.ctd-pair-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
}
.ctd-pair-photo figcaption {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
}
.ctd-pair-dots { display: none; }
@media (max-width: 767px) {
	.ctd-pair-photo { flex-basis: 100%; }
	.ctd-pair-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 8px;
	}
	.ctd-pair-dots span {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d8d2c2;
	}
	.ctd-pair-dots span.active { background: var(--ctd-gold); }
}

/* Stud earrings: one video button per stone of a matched pair, side by side, wrapping on narrow cards */
.ctd-pair-videos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* Stud earrings: ready-matched pairs (Luke 22 Oct). Carat chips, then the four qualities in two columns
   (Natural / Lab-grown), one column on phones. */
.ctd-presets-intro,
.ctd-presets-note {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.5;
}
.ctd-presets-note { margin-top: -4px; font-size: 14px; color: #6b6b6b; }
.ctd-preset-carats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.ctd-preset-carat {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #d8d2c2;
	border-radius: var(--ctd-radius);
	background: #fff;
	font: 500 16px/1 'Outfit', sans-serif;
	cursor: pointer;
}
.ctd-preset-carat.active,
.ctd-preset-carat:hover {
	border-color: var(--ctd-gold);
	background: var(--ctd-gold);
	color: #fff;
}
.ctd-preset-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.ctd-preset-group { display: flex; flex-direction: column; gap: 8px; }
.ctd-preset-type { margin: 0 0 4px; font-size: 20px; }
.ctd-preset-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d8d2c2;
	border-radius: var(--ctd-radius);
	background: #fff;
	text-align: left;
	font-family: 'Outfit', sans-serif;
	cursor: pointer;
}
.ctd-preset-card:hover,
.ctd-preset-card:focus-visible { border-color: var(--ctd-gold); }
.ctd-preset-card.is-empty { cursor: default; background: #faf8f3; }
.ctd-preset-quality { font-size: 18px; font-weight: 600; }
.ctd-preset-weight,
.ctd-preset-none { font-size: 14px; color: #6b6b6b; }
.ctd-preset-price { font-size: 18px; font-weight: 500; }
.ctd-preset-price small { font-size: 12px; color: #6b6b6b; }
.ctd-preset-cta { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ctd-gold); }
.ctd-presets-loading,
.ctd-presets-empty { grid-column: 1 / -1; margin: 0; font-size: 16px; }
@media (max-width: 575px) {
	.ctd-preset-grid { grid-template-columns: 1fr; }
}

/* Pair cards (Luke 22 Oct: "get rid of the spaces"): the picture box is square for one stone; with a pair the
   two square photos side by side are half that height, so the box takes the photos' own height instead of
   leaving an empty square under them. No vertical scrollbar on the swipe strip. */
.ctd-diamond-card .ctd-diamond-image:has(.ctd-pair-photos) {
	aspect-ratio: auto;
	overflow: visible;
}
.ctd-pair-photos {
	overflow-y: hidden;
}
.ctd-diamond-card .ctd-pair-photo img.img-fluid,
.ctd-pair-photo img {
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Search step (Luke 3 Nov): Fast Search full width; Detailed Search a smaller outline button underneath it, so
   Fast Search reads as the main way on. All screen sizes. Only the Search step's pair: the earrings' Ready-matched /
   Choose your own toggle uses .ctd-action-buttons too and stays side by side. */
.ctd-action-buttons-section .ctd-action-buttons {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ctd-action-buttons-section #btn-fast-search {
	flex: none;
	width: 100%;
	min-height: 56px;
	border-radius: var(--ctd-radius);
	font-size: 18px;
}
.ctd-action-buttons-section #btn-detailed-search,
.ctd-action-buttons-section #btn-detailed-search:hover,
.ctd-action-buttons-section #btn-detailed-search:focus {
	flex: none;
	width: auto;
	min-width: 60%;
	min-height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--ctd-border-dark) !important;   /* !important: Journal's .btn-dark colours win otherwise */
	border-radius: var(--ctd-radius);
	background: var(--ctd-white) !important;
	color: var(--ctd-black) !important;
	box-shadow: none;
	font-size: 16px;
}
.ctd-action-buttons-section #btn-detailed-search:hover {
	border-color: var(--ctd-gold) !important;
}

/* Earrings: "Ready-matched pairs" / "Choose your own diamonds" (Luke 22 Oct). The page's own action buttons
   (.ctd-action-buttons, gold + dark, as Fast / Detailed Search). Nothing below shows until one is pressed; then
   the chosen way's sections show and the other's stay hidden. !important: the step layout sets display too. */
.ctd-choice-toggle {
	margin-bottom: 16px;
}
.ctd-mode-none .ctd-presets-body,
.ctd-mode-own .ctd-presets-body,
.ctd-mode-none .ctd-diamond-type-section,
.ctd-mode-none .ctd-starting-price-section,
.ctd-mode-none .ctd-action-buttons-section,
.ctd-mode-none .ctd-search-guidance,
.ctd-mode-ready .ctd-diamond-type-section,
.ctd-mode-ready .ctd-starting-price-section,
.ctd-mode-ready .ctd-action-buttons-section,
.ctd-mode-ready .ctd-search-guidance {
	display: none !important;
}

/* Responsive audit 22 Oct: mobile header logo. Journal caps the logo box at 90px from 768px up, so on
   tablets the logo was half its phone size, and at 320px the logo ran under the wishlist heart.
   The logo box now ends just before the three header icons (40px each on small phones, 48px from
   400px), and the logo grows to fill it, up to 240px. Journal's own rule is
   .mobile-header-active .mobile-1 div.mobile-logo-wrapper, hence the matching specificity. */
html.mobile-header-active .mobile-header.mobile-1 div.mobile-logo-wrapper {
	max-width: none;
	right: 160px;
}
@media (min-width: 400px) {
	html.mobile-header-active .mobile-header.mobile-1 div.mobile-logo-wrapper {
		right: 184px;
	}
}
html.mobile-header-active .mobile-header .mobile-logo-wrapper #logo {
	max-width: min(100%, 240px);
}

/* Responsive audit 22 Oct: carousel dots are 5px, too small to tap. An invisible area around each dot
   makes it a 25px target without changing how the dots look. */
.swiper-pagination-clickable .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	inset: -10px;
}

/* About Us (/about-us/, information/about.twig), rebuilt 22 Oct 2026 in the site template. Same look as the
   standalone page it replaces (approved 12 Oct): dark hero with a gold rule, alternating white / light / dark
   bands, 1320px measure, gold #C2A559 accents, stacking to one column at 900px. */
#information-about {
	--ctd-ab-ink: #1f1f1f;
	--ctd-ab-text: #3f3f3f;
	--ctd-ab-muted: #8d8471;
	--ctd-ab-light: #faf9f7;
	--ctd-ab-line: #efece6;
	--ctd-ab-link: #9a7f3c;
	color: var(--ctd-ab-text);
}
#information-about .ctd-ab-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}
#information-about .ctd-ab-band {
	padding: clamp(44px, 6vw, 80px) 0;
}
#information-about .ctd-ab-band--white { background: #FFFFFF; }
#information-about .ctd-ab-band--light {
	background: var(--ctd-ab-light);
	border-top: 1px solid var(--ctd-ab-line);
	border-bottom: 1px solid var(--ctd-ab-line);
}
#information-about .ctd-ab-band--dark { background: var(--ctd-ab-ink); color: #d8d3c9; }
#information-about .ctd-ab-band--dark a { color: var(--ctd-gold); }

/* Headings */
#information-about .ctd-ab-h2 {
	margin: 0 0 20px;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ctd-ab-ink);
	text-transform: none;
}
#information-about .ctd-ab-h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 2px;
	margin: 14px 0 0;
	background: var(--ctd-gold);
}
#information-about .ctd-ab-band--dark .ctd-ab-h2 { color: #FFFFFF; }
#information-about .ctd-ab-h2--center { text-align: center; }
#information-about .ctd-ab-h2--center::after { margin-left: auto; margin-right: auto; }

/* Hero */
#information-about .ctd-ab-hero {
	padding: clamp(44px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
	background: linear-gradient(180deg, #242424 0%, #191919 100%);
	border-bottom: 3px solid var(--ctd-gold);
	text-align: center;
}
#information-about .ctd-ab-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ctd-gold);
}
#information-about .ctd-ab-hero__title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(36px, 6vw, 62px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.02em;
	color: #FFFFFF;
}
#information-about .ctd-ab-hero__tagline {
	max-width: 46ch;
	margin: 14px auto 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(19px, 2.4vw, 24px);
	font-style: italic;
	font-weight: 300;
	color: #e6dfd1;
}
#information-about .ctd-ab-hero__lead {
	max-width: 64ch;
	margin: 26px auto 0;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.8;
	color: #b9b3a8;
}

/* Prose */
#information-about .ctd-ab-prose p,
#information-about .ctd-ab-lead,
#information-about .ctd-ab-qa__item p,
#information-about .ctd-ab-timeline__item p {
	font-size: 17px;
	line-height: 1.8;
}
#information-about .ctd-ab-prose p { margin: 0 0 18px; }
#information-about .ctd-ab-prose p:last-child { margin-bottom: 0; }
#information-about .ctd-ab-prose a,
#information-about .ctd-ab-lead a,
#information-about .ctd-ab-qa a,
#information-about .ctd-ab-timeline a {
	color: var(--ctd-ab-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#information-about .ctd-ab-lead {
	max-width: 72ch;
	margin: 0 auto;
	text-align: center;
}

/* Two-column splits */
#information-about .ctd-ab-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
#information-about .ctd-ab-split--4060 { grid-template-columns: 4fr 6fr; }
#information-about .ctd-ab-split--6040 { grid-template-columns: 6fr 4fr; }
#information-about .ctd-ab-split--center { align-items: center; }
#information-about .ctd-ab-split--stretch { align-items: stretch; }
#information-about .ctd-ab-split > * { min-width: 0; }

/* Milestones */
#information-about .ctd-ab-milestones__image {
	position: sticky;
	top: 120px;
}
#information-about .ctd-ab-milestones__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ctd-radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
#information-about .ctd-ab-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}
#information-about .ctd-ab-timeline__item {
	margin: 0 0 16px;
	padding: 20px 24px;
	background: #FFFFFF;
	border: 1px solid #ebe7df;
	border-left: 3px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}
#information-about .ctd-ab-timeline__item:last-child { margin-bottom: 0; }
#information-about .ctd-ab-timeline__date {
	margin: 0 0 4px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--ctd-gold);
}
#information-about .ctd-ab-timeline__date span {
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ctd-ab-muted);
	vertical-align: middle;
}
#information-about .ctd-ab-timeline__title {
	margin: 0 0 2px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}
#information-about .ctd-ab-timeline__title a {
	color: var(--ctd-ab-ink);
	text-decoration: none;
}
#information-about .ctd-ab-timeline__title a:hover { color: var(--ctd-gold); }
#information-about .ctd-ab-timeline__item p.ctd-ab-timeline__by {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9a9a9a;
}
#information-about .ctd-ab-timeline__item p:last-child { margin: 0; color: #4f4f4f; }

/* Dragons' Den picture and badge */
#information-about .ctd-ab-figure {
	position: relative;
	margin: 0 0 44px;
}
#information-about .ctd-ab-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--ctd-radius);
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.16);
}
#information-about .ctd-ab-badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	padding: 10px 16px;
	background: var(--ctd-gold);
	border-radius: 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ctd-ab-ink);
}
#information-about .ctd-ab-rebrand {
	max-width: 860px;
	margin: 0 auto;
}
#information-about .ctd-ab-rebrand > p:last-child {
	font-size: 19px;
	line-height: 1.9;
}

/* Quote card */
#information-about .ctd-ab-quote {
	margin: 0 0 28px;
	padding: 22px 26px;
	background: var(--ctd-ab-light);
	border: 0;
	border-left: 3px solid var(--ctd-gold);
	border-radius: 0 var(--ctd-radius) var(--ctd-radius) 0;
}
#information-about .ctd-ab-quote p {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(20px, 1.9vw, 23px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--ctd-ab-ink);
}
#information-about .ctd-ab-quote cite {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ctd-ab-muted);
}

/* Figures */
#information-about .ctd-ab-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 36px 0 0;
}
#information-about .ctd-ab-stat {
	padding: 30px 22px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(194, 165, 89, 0.35);
	border-radius: var(--ctd-radius);
	text-align: center;
}
#information-about .ctd-ab-stat__label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.6;
	color: #cdc8bf;
}
#information-about .ctd-ab-stat__value {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ctd-gold);
}
#information-about .ctd-ab-stat__value small {
	display: block;
	margin-top: 6px;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #b4a681;
}

/* The two needs */
#information-about .ctd-ab-needs {
	margin: 0;
	padding: 0;
	list-style: none;
}
#information-about .ctd-ab-needs li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 14px;
	padding: 18px 20px;
	background: var(--ctd-ab-light);
	border: 1px solid var(--ctd-ab-line);
	border-radius: var(--ctd-radius);
	font-size: 17px;
	line-height: 1.65;
}
#information-about .ctd-ab-needs li:last-child { margin-bottom: 0; }
#information-about .ctd-ab-needs__n {
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--ctd-gold);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: var(--ctd-ab-ink);
}

/* Service cards */
#information-about .ctd-ab-card {
	padding: clamp(22px, 2.5vw, 36px);
	background: #FFFFFF;
	border: 1px solid var(--ctd-ab-line);
	border-radius: var(--ctd-radius);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.035);
}

/* Questions: two columns of cards */
#information-about .ctd-ab-qa {
	column-count: 2;
	column-gap: 18px;
	margin-top: 36px;
}
#information-about .ctd-ab-qa__item {
	display: inline-block;
	width: 100%;
	margin: 0 0 18px;
	padding: 24px 26px;
	break-inside: avoid;
	background: #FFFFFF;
	border: 1px solid var(--ctd-ab-line);
	border-radius: var(--ctd-radius);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03);
}
#information-about .ctd-ab-qa__item h3 {
	margin: 0 0 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ctd-ab-ink);
}
#information-about .ctd-ab-qa__item p { margin: 0; }

/* Trustpilot */
#information-about .ctd-ab-trust__meta {
	margin: 0 0 16px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: #9b9284;
}
#information-about .ctd-ab-trust__lead {
	max-width: 68ch;
	margin: 0 auto 32px;
	font-size: 17px;
	line-height: 1.8;
	text-align: center;
	color: #cdc8bf;
}
#information-about .ctd-ab-trust__panel {
	min-height: 90px;
	padding: 16px;
	background: #FFFFFF;
	border-radius: var(--ctd-radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
}

/* Tablet and phone: every split becomes one column */
@media (max-width: 900px) {
	#information-about .ctd-ab-split,
	#information-about .ctd-ab-split--4060,
	#information-about .ctd-ab-split--6040 {
		grid-template-columns: 1fr;
	}
	#information-about .ctd-ab-milestones__image { position: static; }
	#information-about .ctd-ab-milestones__image img { max-width: 420px; margin: 0 auto; }
	#information-about .ctd-ab-figure { margin-bottom: 28px; }
	#information-about .ctd-ab-figure img { max-height: 380px; }
	#information-about .ctd-ab-rebrand > p:last-child { font-size: 17px; }
	#information-about .ctd-ab-qa { column-count: 1; }
}
@media (max-width: 600px) {
	#information-about .ctd-ab-wrap { padding: 0 16px; }
	#information-about .ctd-ab-band { padding: 36px 0; }
	#information-about .ctd-ab-stats { grid-template-columns: 1fr; }
	#information-about .ctd-ab-stat { padding: 22px 18px; }
	#information-about .ctd-ab-card,
	#information-about .ctd-ab-qa__item { padding: 18px 19px; }
	#information-about .ctd-ab-quote { padding: 18px 19px; }
	#information-about .ctd-ab-timeline__item { padding: 16px 18px; }
	#information-about .ctd-ab-figure img { max-height: 260px; }
	#information-about .ctd-ab-badge {
		left: 12px;
		bottom: 12px;
		padding: 6px 10px;
		font-size: 12px;
		letter-spacing: 0.1em;
	}
	#information-about .ctd-ab-lead,
	#information-about .ctd-ab-trust__lead { text-align: left; }
	#information-about .ctd-ab-trust__panel { padding: 8px; }
}

/* #778 Home page categories section (Journal Text module 1263, markup in migrations/2026-10-23_tweak-778.sql).
   Intro plus 12 cards: 4 columns on desktop, 2 on tablet, 1 on phones. Cards are up to 400px wide and
   scale down evenly; heading and description sizes follow the card width (container units), so the
   proportions match the reference at every size. Every rule starts with #ctd-cats, so nothing here
   reaches the rest of the site and Journal's module typography cannot override it. */
#ctd-cats {
	--ctd-cats-bg: #F7F5F1;
	--ctd-cats-ink: #1B1C1A;
	--ctd-cats-card: #1B1C1A;
	--ctd-cats-text: rgba(255, 255, 255, 0.86);
	--ctd-cats-gap: 24px;
	--ctd-cats-card-max: 400px;
	background: var(--ctd-cats-bg);
	/* Full-bleed background: the module sits inside the row's side padding */
	box-shadow: 0 0 0 100vmax var(--ctd-cats-bg);
	clip-path: inset(0 -100vmax);
	padding: 88px 0 96px;
	font-family: 'Outfit', sans-serif;
	text-align: left;
}
#ctd-cats .ctd-cats__intro {
	max-width: 1040px;
	margin: 0 auto 56px;
	padding: 0 16px;
	text-align: center;
}
#ctd-cats .ctd-cats__eyebrow {
	margin: 0 0 18px;
	color: var(--ctd-gold);
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
#ctd-cats .ctd-cats__title {
	margin: 0 0 22px;
	padding: 0;
	color: var(--ctd-cats-ink);
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(32px, 3.1vw, 60px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: none;
}
#ctd-cats .ctd-cats__title::after {
	display: none;
}
#ctd-cats .ctd-cats__title-accent {
	color: var(--ctd-gold);
}
#ctd-cats .ctd-cats__lead {
	max-width: 744px;   /* widened with the 20% larger text, so it stays on two lines */
	margin: 0 auto 16px;
	color: var(--ctd-cats-ink);
	font-family: 'Outfit', sans-serif;
	font-size: 16.8px;   /* 14px + 20% (Clive, 23 Oct) */
	font-weight: 500;
	line-height: 1.7;
}
#ctd-cats .ctd-cats__contact {
	margin: 0;
	font-size: 15.6px;   /* 13px + 20% */
	line-height: 1.5;
}
#ctd-cats .ctd-cats__contact a {
	display: inline-block;
	padding: 12px 4px;   /* 44px tap height without changing the look */
	color: var(--ctd-cats-ink);
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--ctd-gold);
	text-underline-offset: 4px;
}
#ctd-cats .ctd-cats__contact a:hover {
	color: var(--ctd-gold);
}
#ctd-cats .ctd-cats__contact a:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

#ctd-cats .ctd-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, var(--ctd-cats-card-max)));
	justify-content: center;
	gap: var(--ctd-cats-gap);
	margin: 0;
	padding: 0 var(--ctd-cats-gap);
	list-style: none;
}
#ctd-cats .ctd-cats__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ctd-cats-card);
	container-type: inline-size;
}
#ctd-cats .ctd-cats__card::before {
	display: none;   /* no list bullets from Journal's list styles */
}
#ctd-cats .ctd-cats__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #2A2B28;
}
#ctd-cats .ctd-cats__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}
/* #778 follow-up: no number badges on the cards. The badge markup is removed by
   migrations/2026-10-23_tweak-778-no-card-numbers.sql; this hides any copy still in Journal's cache. */
#ctd-cats .ctd-cats__num {
	display: none;
}
#ctd-cats .ctd-cats__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 26px;
	padding: 6.5cqi;
}
#ctd-cats .ctd-cats__name {
	margin: 0 0 12px;
	padding: 0;
	color: var(--ctd-gold);
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-size: clamp(22px, 7.6cqi, 31px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}
#ctd-cats .ctd-cats__name::after {
	display: none;
}
#ctd-cats .ctd-cats__desc {
	margin: 0 0 24px;
	color: var(--ctd-cats-text);
	font-family: 'Outfit', sans-serif;
	font-size: 15.6px;   /* 13px + 20% (Clive, 23 Oct); scales with the card, as before */
	font-size: clamp(14.4px, 3.9cqi, 15.6px);
	font-weight: 500;
	line-height: 1.7;
	text-align: left;
}
#ctd-cats .ctd-cats__btn,
.ctd-feed .ctd-feed__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;   /* buttons line up along the bottom of each row */
	padding: 10px 16px;
	border: 0;
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-size: 15.6px;   /* 13px + 20% (Clive, 23 Oct) */
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}
#ctd-cats .ctd-cats__btn::before,
#ctd-cats .ctd-cats__btn::after,
.ctd-feed .ctd-feed__btn::before,
.ctd-feed .ctd-feed__btn::after {
	display: none;   /* no arrows or icons */
}
#ctd-cats .ctd-cats__btn:hover,
.ctd-feed .ctd-feed__btn:hover {
	background: var(--ctd-gold-hover);
	color: var(--ctd-white);
}
#ctd-cats .ctd-cats__btn:focus-visible,
.ctd-feed .ctd-feed__btn:focus-visible {
	outline: 2px solid var(--ctd-white);
	outline-offset: 3px;
}

/* Tablet: two columns */
@media (max-width: 1024px) {
	#ctd-cats {
		padding: 64px 0 72px;
	}
	#ctd-cats .ctd-cats__intro {
		margin-bottom: 44px;
	}
	#ctd-cats .ctd-cats__grid {
		grid-template-columns: repeat(2, minmax(0, var(--ctd-cats-card-max)));
	}
}
/* Phones: one centred column, 16px side margins, headings wrap naturally */
@media (max-width: 640px) {
	#ctd-cats {
		/* Full width of the screen, so the cards sit 16px from each edge rather than inside
		   the grid row's own side padding as well */
		margin-inline: calc(50% - 50vw);
		padding: 48px 0 56px;
	}
	#ctd-cats .ctd-cats__intro {
		margin-bottom: 32px;
	}
	#ctd-cats .ctd-cats__br {
		display: none;
	}
	#ctd-cats .ctd-cats__grid {
		grid-template-columns: minmax(0, var(--ctd-cats-card-max));
		gap: 20px;
		padding: 0 16px;
	}
	/* Readable on phones: body text at least 16px (CLAUDE.md), buttons and the phone link
	   at least 44px tall. The desktop sizes from the brief (13px) are too small here. */
	#ctd-cats .ctd-cats__lead,
	#ctd-cats .ctd-cats__desc {
		font-size: 16px;
		line-height: 1.6;
	}
	#ctd-cats .ctd-cats__lead,
	#ctd-cats .ctd-cats__desc,
	#ctd-cats .ctd-cats__contact {
		font-size: 19.2px;   /* 16px + 20% */
	}
	#ctd-cats .ctd-cats__btn,
	.ctd-feed .ctd-feed__btn {
		min-height: 48px;
		font-size: 19.2px;   /* 16px + 20% */
	}
	#ctd-cats .ctd-cats__name {
		font-size: clamp(26px, 8.5cqi, 31px);
	}
	#ctd-cats .ctd-cats__body {
		padding: 22px;
	}
}

/* Home page "Choose Your Perfect Diamond" (Journal Banners Grid module 1266): close the gap
   between the two lines of each shape label ("Round Brilliant-Cut" / "Diamonds"). The labels
   are 11px, but their container's 15px text and 19.5px line height set each line's height,
   so the lines sat 20px apart. The container's line height is zeroed and the label sets its own. */
.module-banners_grid-1266 .slide-text-item {
	line-height: 0;
}
.module-banners_grid-1266 .slide-text-item span {
	display: inline-block;
	line-height: 1.25;
}

/* Footer text 30% smaller (Clive, 26 Oct): the contact details beside the logo and the links in
   the four columns go from 18px to 12.6px. Scoped to footer.ctd-site-footer (class added in
   common/footer.twig), so no other text on the site changes. Column titles, copyright line,
   social/payment icons and the policy links below are unchanged. */
footer.ctd-site-footer .module-subitem > a > span,
footer.ctd-site-footer .links-menu .menu-item > a > .links-text {
	font-size: 12.6px;
	line-height: 1.6;
}

/* Home page "Live Diamond Feed" (Text modules 1252 card + 1249 content, row top-4; markup in
   migrations/2026-10-26_diamond-feed-layout.sql, behaviour in js/ctd-diamond-feed.js). Layout [B]:
   a larger featured card on the left [C]; on the right the heading and checklist, then the
   10 shape tiles in two rows of five [D] and the Diamond Search button (shares the home page
   category button style above). Journal's own styles for .live-diamond-feed-* stay; these rules
   only resize and add. */
html.route-common-home .module-text-1252 {
	width: 100%;
	max-width: none;
}
html.route-common-home .ctd-feed-card {
	box-sizing: border-box;
	width: calc(100% - 48px);  /* 24px clear of the screen edge and of the text column */
	max-width: 600px;          /* [C] was 470px */
	margin: 0 24px 0 auto;     /* sits against the text column, as in [B] */
	padding: 36px;
}
html.route-common-home .ctd-feed-card .diamond-card-image {
	padding: 24px 20px 12px;
}
html.route-common-home .ctd-feed-card .diamond-shape-title {
	font-size: 30px;           /* was 24px */
	line-height: 1.3;
}
html.route-common-home .ctd-feed-card .diamond-shape-subtitle {
	font-size: 15px;           /* [E] was 13px */
	line-height: 1.5;
	min-height: 1.5em;
}
html.route-common-home .ctd-feed-card .diamond-card-image img {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 8px auto 0;
	object-fit: contain;
}
html.route-common-home .ctd-feed-card .diamond-count {
	padding: 22px 0 6px;
}
html.route-common-home .ctd-feed-card .diamond-count-number {
	font-size: 68px;           /* [F] was 56px */
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}
html.route-common-home .ctd-feed-card .diamond-count-label {
	margin-top: 6px;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
html.route-common-home .ctd-feed-card .diamond-type a > span:last-child {
	font-size: 15px;
	line-height: 1.5;
}
html.route-common-home .ctd-feed-card .diamond-type-icon {
	width: 52px;
	height: 52px;
	font-size: 22px;
}

html.route-common-home .ctd-feed {
	box-sizing: border-box;
	max-width: 964px;          /* the shape tiles run wider than the text, as in [B] */
	padding-right: 24px;       /* clear of the screen edge */
}
html.route-common-home .ctd-feed > h2,
html.route-common-home .ctd-feed > .section-description,
html.route-common-home .ctd-feed > .feature-list {
	max-width: 720px;
}

/* [D] shape tiles: 2 rows of 5 */
html.route-common-home .ctd-feed .ctd-feed-shapes {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
html.route-common-home .ctd-feed .ctd-feed-shapes > li {
	margin: 0;
	padding: 0;
	border: 0;
}
html.route-common-home .ctd-feed .ctd-feed-shapes > li::before {
	display: none;             /* no checklist ticks from .feature-list styles */
}
html.route-common-home .ctd-feed .ctd-feed-shape {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 10px 6px 0;
	border-radius: var(--ctd-radius);
	outline: 1px solid transparent;
	background: #000000;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	transition: outline-color 0.15s ease;
}
html.route-common-home .ctd-feed .ctd-feed-shape__label {
	display: block;
	min-height: 2.6em;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 400;          /* [A] not bold (Clive, 26 Oct) */
	line-height: 1.3;
}
/* [B] on hover the tile reads "Search Marquise-Cut Diamonds" */
html.route-common-home .ctd-feed .ctd-feed-shape:hover .ctd-feed-shape__label::before,
html.route-common-home .ctd-feed .ctd-feed-shape:focus-visible .ctd-feed-shape__label::before {
	content: "Search ";
}
html.route-common-home .ctd-feed .ctd-feed-shape img {
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
	aspect-ratio: 4 / 3;
	margin-top: auto;
	object-fit: contain;
}
html.route-common-home .ctd-feed .ctd-feed-shape:hover,
html.route-common-home .ctd-feed .ctd-feed-shape.is-active {
	outline-color: var(--ctd-gold);
	color: var(--ctd-gold);
}
html.route-common-home .ctd-feed .ctd-feed-shape:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
}

html.route-common-home .ctd-feed .ctd-feed-cta {
	margin: 28px 0 0;
	text-align: center;        /* [C] centred under the shape tiles */
}
html.route-common-home .ctd-feed .ctd-feed__btn {
	display: inline-flex;
	min-width: 260px;
	padding: 10px 32px;
}

/* Tablet: the columns stack; card centred, content off the screen edges */
@media (max-width: 1024px) {
	html.route-common-home .ctd-feed-card {
		margin-inline: auto;
	}
}
@media (min-width: 641px) and (max-width: 1024px) {
	html.route-common-home .ctd-feed {
		margin-inline: auto;
		padding-inline: 20px;
	}
}
/* Phones: card 20px from each edge; tiles in two columns */
@media (max-width: 640px) {
	html.route-common-home .ctd-feed-card {
		width: calc(100% - 40px);
		max-width: none;
		padding: 20px;
	}
	html.route-common-home .ctd-feed-card .diamond-count-number {
		font-size: 52px;
	}
	html.route-common-home .ctd-feed {
		padding-right: 20px;   /* matches Journal's 20px on the left */
	}
	html.route-common-home .ctd-feed .ctd-feed-shapes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	html.route-common-home .ctd-feed .ctd-feed-shape__label {
		font-size: 14px;
	}
	html.route-common-home .ctd-feed .ctd-feed__btn {
		display: flex;
		width: 100%;
		min-width: 0;
	}
}
/* The old "Choose Your Perfect Diamond" row (modules 1149 and 1266, switched off by the migration):
   if Journal still prints the empty row, hide it so no gap is left. */
html.route-common-home .grid-row-top-5:not(:has(.module)) {
	display: none;
}

/* CATEGORY CARD 2 (Clive, 26 Oct 2026): the home page CATEGORY cards with class
   .ctd-cats--card2 on the section (added by migrations/2026-10-26_category-card-2.sql).
   [A] white card, 6px corners, 1px #444444 border and the faintest shadow all round;
   [B] the photo inset in the card, square (1:1, 374 x 374 on a desktop card; Clive, 29 Oct
       2026, was 4:3), 6px corners;
   [C] title and [E] button exactly as CATEGORY CARD 1;
   [D] description in the same font and size as CATEGORY CARD 1, but mid grey #444444
       (Clive, 26 Oct), because CARD 1's soft white would not show on a white card.
   Without the class the cards stay CATEGORY CARD 1. */
#ctd-cats.ctd-cats--card2 .ctd-cats__card {
	border: 1px solid #444444;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}
#ctd-cats.ctd-cats--card2 .ctd-cats__media {
	margin: 12px 12px 0;
	border-radius: 6px;
	background: #EEEEEE;
	aspect-ratio: 1 / 1;
}
#ctd-cats.ctd-cats--card2 .ctd-cats__name {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);   /* a hint of lift on the white card (Clive, 26 Oct) */
}
#ctd-cats.ctd-cats--card2 .ctd-cats__desc {
	color: #444444;
	font-weight: 400;          /* 20% lighter than CARD 1's 500 (Clive, 26 Oct) */
}

/* The "247 ENVISION" row (modules 1255 and 1256, switched off by
   migrations/2026-10-26_remove-247-envision.sql): if Journal still prints the empty row, hide it
   so no dark band is left. */
html.route-common-home .grid-row-top-8:not(:has(.module)) {
	display: none;
}

/* CATEGORY CARD 2: the whole card opens the same page as its button (Clive, 26 Oct 2026).
   The button's link is stretched over the card, so there is still one link per card (one tab
   stop, one link for screen readers and crawlers) and nothing changes in the markup. */
#ctd-cats.ctd-cats--card2 .ctd-cats__card {
	position: relative;
	cursor: pointer;
}
#ctd-cats.ctd-cats--card2 .ctd-cats__btn::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 6px;
}
#ctd-cats.ctd-cats--card2 .ctd-cats__card:hover .ctd-cats__btn {
	background: var(--ctd-gold-hover);   /* the button lights up wherever the card is hovered */
}

/* Home page CATEGORY cards on phones: two to a row (Luke, 30 Oct 2026). Stacked one per row,
   the 16 cards took 13.6 phone screens (662px each) and the home page was about 27 screens long.
   Under 600px: two columns, photo + title + button only (the description stays in the HTML for
   search engines and screen readers, it just isn't shown), tighter padding. Desktop and tablet
   (600px and wider) are unchanged. Home page only: the remodelling/recommissioning galleries
   use the same section id and keep their layout. */
@media (max-width: 599px) {
	html.route-common-home #ctd-cats .ctd-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 0 12px;
	}
	html.route-common-home #ctd-cats.ctd-cats--card2 .ctd-cats__media {
		margin: 8px 8px 0;
	}
	html.route-common-home #ctd-cats .ctd-cats__desc {
		display: none;
	}
	html.route-common-home #ctd-cats .ctd-cats__body {
		padding: 10px 8px 10px;
	}
	html.route-common-home #ctd-cats .ctd-cats__name {
		margin-bottom: 10px;
		font-size: clamp(19px, 11cqi, 22px);
		line-height: 1.1;
		text-align: center;   /* centred in the narrow two-column cards (Luke, 30 Oct) */
	}
	html.route-common-home #ctd-cats .ctd-cats__btn {
		min-height: 44px;
		padding: 6px 8px;
		font-size: 16px;
		line-height: 1.2;
	}
}

/* Home page "HOW IT WORKS" / bespoke design (Journal Text module 1258, Clive 26 Oct 2026):
   three paragraphs under the heading, then bespoke.gif centred at up to 600 x 600. */
html.route-common-home .ctd-process-description + .ctd-process-description {
	margin-top: 16px;
}
/* [A] The three paragraphs: 20% bigger (16px -> 19.2px; 18px on phones) and as wide as the
   row of steps below them (1152px), Clive 28 Oct 2026. The header box is opened up to that
   width; the heading keeps its own 760px width, so it still breaks over two lines. */
html.route-common-home .module-text-1258 .ctd-process-header {
	width: 100% !important;
	max-width: 1152px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html.route-common-home .module-text-1258 .ctd-process-title {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Desktop: "Bespoke Design, your ideas brought to life!" on one line (Clive, 29 Oct 2026). At
   56px it is about 930px wide, inside the 1152px section; smaller screens still wrap it. */
@media (min-width: 992px) {
	html.route-common-home .module-text-1258 .ctd-process-title {
		max-width: none;
	}
}
html.route-common-home .module-text-1258 .ctd-process-description {
	max-width: none !important;
	font-size: 19.2px !important;
	line-height: 1.7 !important;
	text-align: left !important;   /* left-justified (Clive, 28 Oct 2026) */
}
/* Home page: "Why People Choose Us" (row bottom-4) now comes before "From the Blog" (row
   bottom-3), Clive 28 Oct 2026. The rows share one flex container, so their order is set
   here; the Journal layout itself is unchanged. */
html.route-common-home .grid-rows > .grid-row-bottom-2 { order: 1; }
html.route-common-home .grid-rows > .grid-row-bottom-4 { order: 2; }
html.route-common-home .grid-rows > .grid-row-bottom-3 { order: 3; }
@media (max-width: 767px) {
	html.route-common-home .module-text-1258 .ctd-process-description {
		font-size: 18px !important;
	}
}
html.route-common-home .ctd-process-image {
	max-width: 600px;
	margin: 36px auto 44px;
	padding: 0;
	text-align: center;
}
html.route-common-home .ctd-process-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
/* HOW IT WORKS steps: every text 20% bigger (Clive, 26 Oct 2026). Journal sets 24px / 14px / 24px
   (22px / 13px / 22px on phones). */
html.route-common-home .module-text-1258 .ctd-process-step h3 {
	font-size: 28.8px;
}
html.route-common-home .module-text-1258 .ctd-process-step p {
	font-size: 16.8px;
	line-height: 1.6;
}
html.route-common-home .module-text-1258 .ctd-process-number {
	font-size: 28.8px;
}
@media (max-width: 767px) {
	html.route-common-home .module-text-1258 .ctd-process-step h3,
	html.route-common-home .module-text-1258 .ctd-process-number {
		font-size: 26.4px;
	}
	html.route-common-home .module-text-1258 .ctd-process-step p {
		font-size: 15.6px;
	}
}

/* Home page info blocks row ("Crafted to Exceptional Standards", "A Family Company", "Best price
   guarantee", "Hassle-Free Returns"; Journal Info Blocks module 1265, row top-3): 100px of space
   above and below on desktop and laptop (Clive, 26 Oct 2026). It sat straight against the delivery
   banner above and the Live Diamond Feed below. Tablets and phones are unchanged. */
@media (min-width: 1025px) {
	html.route-common-home .grid-row-top-3 {
		margin-top: 100px;      /* margin, not padding: the row's own background is dark, so the */
		margin-bottom: 100px;   /* space shows the page's light background instead */
	}
}

/* Live Diamond Feed, desktop (Clive, 26 Oct 2026): [A] the "Explore All Diamond Shapes" button moves
   up beside the last checklist line [B], right-aligned with the shape tiles; the checklist lines stop
   short of it. [C] the space under the tiles is halved, 92px -> 46px. Below 1200px the button stays
   centred under the tiles. */
@media (min-width: 1200px) {
	html.route-common-home .ctd-feed {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 24px;
		grid-template-areas:
			"eyebrow eyebrow"
			"title   title"
			"desc    desc"
			"list    cta"
			"shapes  shapes";
	}
	html.route-common-home .ctd-feed > .section-eyebrow { grid-area: eyebrow; }
	html.route-common-home .ctd-feed > h2 { grid-area: title; }
	html.route-common-home .ctd-feed > .section-description { grid-area: desc; }
	html.route-common-home .ctd-feed > .feature-list {
		grid-area: list;
		max-width: none;
		margin-bottom: 0;
	}
	html.route-common-home .ctd-feed > .ctd-feed-cta {
		grid-area: cta;
		align-self: end;      /* level with the last checklist line */
		justify-self: end;    /* right edge lines up with the tiles */
		margin: 0 0 2px;
	}
	html.route-common-home .ctd-feed .ctd-feed-shapes {
		grid-area: shapes;
		margin-bottom: 26px;  /* + the row's 20px = 46px under the tiles */
	}
}

/* Live Diamond Feed checklist: no dividing lines between the rows (Clive, 26 Oct 2026). Journal's
   section styles draw a 1px rgba(255,255,255,0.08) line under each item. */
html.route-common-home .ctd-feed .feature-list > li {
	border-bottom: 0;
}

/* Home page intro figures (53K+ ... 56 years; Journal Text module 1248): spaced evenly across the
   full width, first figure at the left edge and last at the right (Clive, 26 Oct 2026). Wide screens
   only: below 1200px Journal shows them in 2-3 columns, which stay as they are. */
@media (min-width: 1200px) {
	html.route-common-home :is(.module-text-1248, .module-text-1258) .stats {
		display: flex;
		justify-content: space-between;
		gap: 16px;
	}
}

/* Home page "Bring your vision to life. You Take the Lead" (Journal FAQ module 1145, row bottom-2)
   in the style and layout of "Why People Choose Us" (FAQ module 1261), Clive 26 Oct 2026: centred
   title, two columns of white cards with a gold + / − toggle, one column on phones. These are module
   1261's own custom styles (kept in Journal admin), retargeted to 1145, without the per-question icons
   (1261's icons are about buying online and would not fit these questions), so the 64px left inset
   that made room for an icon becomes 20px. "html body" lifts them above Journal's generated styles
   for 1145, which print after this file. The shadowed box around the row and its padding (row
   layout settings) are removed, and the module is held to 1261's width, 985px, centred. */
html body .grid-rows .grid-row.grid-row-bottom-2 .grid-item.grid-module-bottom-2-2-1 {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
html body .grid-rows .grid-row.grid-row-bottom-2 .grid-items {
	padding: 0 !important;
}
html body .grid-rows .grid-row-bottom-2 .module.module-faq-1145 {
	width: 100%;
	max-width: 985px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: #F8F6F3;
	box-sizing: border-box;
}
html body .module-faq-1145 .module-title {
	width: 100%;
	max-width: 680px;
	margin: 0 auto 32px !important;
	padding: 0 !important;
	color: #1A1A1A !important;
	font-family: "Cormorant Garamond", serif !important;
	font-size: 48px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-align: center !important;
}
html body .module-faq-1145 .module-title::after {
	display: none !important;
}
html body .module-faq-1145 .panel-group {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
}
html body .module-faq-1145 .panel-group .module-item {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #FFFFFF !important;
	border: 1px solid #EDE9E3 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
html body .module-faq-1145 .panel,
html body .module-faq-1145 .panel-heading,
html body .module-faq-1145 .panel-collapse {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	background: #FFFFFF !important;
	border: 0 !important;
	box-shadow: none !important;
}
html body .module-faq-1145 .panel-heading {
	width: 100% !important;
}
html body .module-faq-1145 .panel-heading::before,
html body .module-faq-1145 .panel-title::before,
html body .module-faq-1145 .panel-title > a::before,
html body .module-faq-1145 .panel-title > a.accordion-toggle::before,
html body .module-faq-1145 .accordion-toggle::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: none !important;
	border: 0 !important;
}
html body .module-faq-1145 .panel-title > a > i,
html body .module-faq-1145 .panel-title > a .fa,
html body .module-faq-1145 .panel-heading > i,
html body .module-faq-1145 .panel-heading > .fa {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .module-faq-1145 .panel-title {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
html body .module-faq-1145 .panel-title > a,
html body .module-faq-1145 .panel-title > a.accordion-toggle {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	min-height: 64px !important;
	margin: 0 !important;
	padding: 14px 52px 14px 20px !important;
	box-sizing: border-box !important;
	color: #1A1A1A !important;
	background: #FFFFFF !important;
	font-family: Outfit, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-align: left !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
html body .module-faq-1145 .panel-title > a:hover {
	color: #1A1A1A !important;
	background: #FFFFFF !important;
	text-decoration: none !important;
}
html body .module-faq-1145 .panel-title > a::after {
	content: "+" !important;
	position: absolute !important;
	right: 18px !important;
	top: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	transform: translateY(-50%) !important;
	color: #A68A4A !important;
	background: transparent !important;
	border: 0 !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	pointer-events: none !important;
}
html body .module-faq-1145 .panel-title > a:not(.collapsed)::after {
	content: "\2212" !important;
	color: #A68A4A !important;
}
html body .module-faq-1145 .panel-collapse > div {
	background: #FFFFFF !important;
	border: 0 !important;
}
html body .module-faq-1145 .panel-body,
html body .module-faq-1145 .panel-collapse .panel-body {
	margin: 0 !important;
	padding: 0 18px 18px 20px !important;
	color: #4A4A4A !important;
	background: #FFFFFF !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 1.7 !important;
	border: 0 !important;
}
@media (max-width: 767px) {
	html body .module-faq-1145 .module-title {
		max-width: 100% !important;
		margin-bottom: 24px !important;
		padding: 0 16px !important;
		font-size: 40px !important;
	}
	html body .module-faq-1145 .panel-group {
		grid-template-columns: 1fr !important;
		max-width: 100% !important;
		gap: 8px !important;
		padding: 0 12px !important;
	}
	html body .module-faq-1145 .panel-title > a,
	html body .module-faq-1145 .panel-title > a.accordion-toggle {
		min-height: 58px !important;
		padding: 12px 44px 12px 16px !important;
		font-size: 15px !important;
		line-height: 1.45 !important;
	}
	html body .module-faq-1145 .panel-title > a::after {
		right: 14px !important;
		width: 18px !important;
		height: 18px !important;
		font-size: 19px !important;
	}
	html body .module-faq-1145 .panel-body,
	html body .module-faq-1145 .panel-collapse .panel-body {
		padding: 0 14px 16px 16px !important;
		font-size: 14px !important;
	}
}
@media (max-width: 480px) {
	html body .module-faq-1145 .module-title {
		font-size: 36px !important;
	}
	html body .module-faq-1145 .panel-group {
		padding: 0 8px !important;
	}
	html body .module-faq-1145 .panel-title > a,
	html body .module-faq-1145 .panel-title > a.accordion-toggle {
		min-height: 56px !important;
		padding: 12px 40px 12px 14px !important;
		font-size: 14px !important;
	}
	html body .module-faq-1145 .panel-title > a::after {
		right: 12px !important;
	}
	html body .module-faq-1145 .panel-body,
	html body .module-faq-1145 .panel-collapse .panel-body {
		padding-left: 14px !important;
	}
}

/* Mobile menu thumbnails (Clive, 27 Oct 2026): the round frame around each menu image
   becomes square or rectangular, following the image's own shape, with the site's 6px corner
   radius, and the thumbnails are 20% larger. Applies to the phone menu (mobile header) and to
   the same menu shown on narrow desktop windows. Journal's admin settings for the thumbnail
   (size, border, padding) are kept; "zoom" scales them all by 1.2, so the radius is set to
   6px / 1.2 to show as 6px. "html body" lifts these above Journal's generated styles, which
   print after this file. */
html body .mobile-main-menu-container .menu-image,
html body .desktop-mobile-main-menu-container .menu-image {
	zoom: 1.2;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	border-radius: calc(6px / 1.2) !important;
	overflow: hidden;
}
html body .mobile-main-menu-container .menu-image img,
html body .desktop-mobile-main-menu-container .menu-image img {
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border-radius: calc(6px / 1.2) !important;
	clip-path: none !important;
}

/* Coloured diamond engagement rings hub (Luke 27 Oct): shape filter and style cards, as on shop-by-style.
   The active shape/style is outlined; clicking it again clears the filter. */
.ctd-hub-shapes .image-block.is-active a { font-weight: 600; }
.ctd-hub-shapes .image-block.is-active span.shape { outline: 2px solid var(--ctd-gold); outline-offset: 2px; border-radius: 6px; }
/* Shop by Style audit (Luke 2 Nov 2026): the "Filter by metal" strip built for every engagement ring page marks the
   page's own metal the same way. */
.ctd-hub-metals .image-block.is-active a { font-weight: 600; }
.ctd-hub-metals .image-block.is-active span.shape { display: block; outline: 2px solid var(--ctd-gold); outline-offset: 2px; border-radius: 6px; }
/* Luke 2 Nov: the metal row sat off centre (the Bootstrap .row.container margins) with a bold label above it,
   unlike the shape row. Both rows now share one layout: tiles centred on the page, label underneath in the same
   style, and a little space above the first row so it doesn't touch the intro. */
.ctd-hub-metals { margin-top: 16px; }
.ctd-hub-metals + .ctd-hub-shapes { margin-top: 16px; }
/* Clive 5 Nov 2026: the seven-metal row on the four 9ct wedding ring pages and /wedding-rings/platinum has smaller
   labels than the shared metal tiles (14px -> 11.5px, phones 12px -> 10px; first 12.6px / 10.8px, then reduced a
   little more). Only that row carries .ctd-hub-metals--wedding9. */
html body .ctd-hub-metals--wedding9 .scrolling_container .row.image-container .image-block.metal-colour > a > span:not(.shape) {
	font-size: 11.5px;
}
@media (max-width: 767px) {
	html body .ctd-hub-metals--wedding9 .scrolling_container .row.image-container .image-block.metal-colour > a > span:not(.shape) {
		font-size: 10px;
	}
}
.ctd-hub-styles { margin: 0 0 32px; }
/* Shape filter strip centred under its title (the shared strip is a Bootstrap .row.container, whose side
   margins and max-width pushed it off centre here). Phones keep the shared swipeable strip. */
@media (min-width: 768px) {
	.ctd-hub-shapes .scrolling_container .row.image-container,
	.ctd-hub-metals .scrolling_container .row.image-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		gap: 10px;
	}
	.ctd-hub-shapes .scrolling_container .row.image-container > .image-block {
		width: auto !important;   /* the shared strip sizes each shape as a % of the row */
		flex: 0 0 auto;
		min-width: 76px;
		margin: 0;
	}
}
/* Coloured ring pages: filter links land here, clear of the sticky header; "Clear filters" under the style cards */
.ctd-hub-anchor { scroll-margin-top: 140px; }
.ctd-hub-clear { text-align: center; margin: -16px 0 24px; }
.ctd-hub-clear:empty { display: none; }
/* "42 Round Solitaire pink diamond engagement rings": says what the filters show, above the rings */
.ctd-hub-result { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.3; margin: 0 0 20px; }
.ctd-hub-clear a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ctd-gold); text-decoration: underline; text-underline-offset: 3px; }
/* The hub's style cards borrow Journal's category-module markup, but Journal only prints a module's grid
   sizing on pages that hold that module, so they had no columns and the Contact Us / Upload Your Ideas /
   Book a Virtual Meeting cards (added after them by product/category.twig) were squashed beside them.
   Own grid: 4 across, 3 on tablets, 2 on phones; every card (style and info) the same width. */
.ctd-hub-styles .category-grid.ipr-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.ctd-hub-styles .category-grid > .category-layout,
.ctd-hub-styles .category-grid > .category-page-virtual-card {
	width: auto !important;   /* the info cards copy a sibling's width inline; the grid sizes them instead */
	max-width: none;
	margin: 0;
	padding: 0 !important;
}
.ctd-hub-styles .category-thumb { display: flex; flex-direction: column; }
.ctd-hub-styles .category-thumb .image a {
	display: block;
	border: 1px solid var(--ctd-card-border);
	border-radius: var(--ctd-radius);
	overflow: hidden;
}
.ctd-hub-styles .category-thumb .image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.ctd-hub-styles .category-thumb .caption { text-align: center; }
.ctd-hub-styles .category-thumb .name { justify-content: center; margin-top: 10px; }
.ctd-hub-styles .category-thumb .name a { white-space: normal; line-height: 1.3; }
.ctd-hub-styles .category-page-virtual-image img { aspect-ratio: 1 / 1; }
/* Diamond shape pages (ctdRingStyleCards): the style cards use the same framed 4:3 render as the ring cards on
   the style page they open, shown whole on white like those cards, not cropped square (Luke 3 Nov). */
.ctd-hub-styles--rings .category-thumb .image a { background: #fff; }
.ctd-hub-styles--rings .category-thumb .image img { aspect-ratio: 4 / 3; object-fit: contain; }
@media (max-width: 1199px) {
	.ctd-hub-styles .category-grid.ipr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767px) {
	.ctd-hub-styles .category-grid.ipr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	/* Contact Us (the card holding the Call / WhatsApp / Book / Email buttons) needs the full row on phones */
	.ctd-hub-styles .category-grid > .category-page-virtual-card:has(.category-page-contact-panel) { grid-column: 1 / -1; }
	.ctd-hub-styles .category-grid > .category-page-virtual-card:has(.category-page-contact-panel) .category-page-virtual-image { aspect-ratio: auto; }
}
.ctd-hub-styles .category-layout.is-active .category-thumb { outline: 2px solid var(--ctd-gold); outline-offset: 2px; border-radius: 6px; }

/* Mega menu click feedback (js/ctd-menu.js): a thin gold bar along the top of the page
   from the moment a menu link is clicked until the next page loads. */
.ctd-nav-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 3px;
	background-color: var(--ctd-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
}

.ctd-nav-progress.is-active {
	opacity: 1;
	transform: scaleX(0.9);
	transition: transform 4s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.1s linear;
}

.ctd-navigating,
.ctd-navigating a {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.ctd-nav-progress.is-active {
		transform: scaleX(0.9);
		transition: opacity 0.1s linear;
	}
}

/* === Mobile menu panels (Luke 28 Oct 2026) ========================================
   The off-canvas menu (phones, and narrow desktop windows) is drawn as slide-in panels,
   one level per screen, instead of a nested accordion: markup in
   journal3/module/ctd_mobile_menu.twig, behaviour in js/ctd-mobile-menu.js. Search and
   WhatsApp / call sit at the top; every row is one full-width tap target. "html body" lifts
   these above Journal's generated styles for the accordion module. */
html body .ctd-mm {
	--ctd-mm-pad: 8px;
	--ctd-mm-row: 56px;
	--ctd-mm-img: 40px;
	--ctd-mm-line: #E6E1D6;
	--ctd-mm-text: #1B1C1A;
	--ctd-mm-muted: #6B6B6B;
	--ctd-mm-bg: #F7F5F1;
	width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	font-family: 'Outfit', sans-serif;
	color: var(--ctd-mm-text);
}
html body .ctd-mm *,
html body .ctd-mm *::before,
html body .ctd-mm *::after {
	box-sizing: border-box;
}
.ctd-mm__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Search and contact */
html body .ctd-mm__tools {
	padding: 8px 0 12px;
	display: grid;
	gap: 10px;
}
html body .ctd-mm__search {
	display: flex;
	align-items: stretch;
	height: 48px;
	margin: 0;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	overflow: hidden;
}
html body .ctd-mm__search-label {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
	margin: 0;
}
html body .ctd-mm__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: 400 16px/1.2 'Outfit', sans-serif; /* 16px stops iOS zooming on focus */
	color: var(--ctd-mm-text);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
html body .ctd-mm__search-input:focus {
	outline: none;
}
html body .ctd-mm__search:focus-within {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 1px;
}
html body .ctd-mm__search-btn {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
html body .ctd-mm__contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
html body .ctd-mm__contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 8px;
	white-space: nowrap;
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font: 500 16px/1.2 'Outfit', sans-serif;
	text-decoration: none;
}
html body .ctd-mm__contact-btn:hover,
html body .ctd-mm__contact-btn:focus-visible {
	background: var(--ctd-gold-hover);
	color: var(--ctd-white);
}

/* Panels */
html body .ctd-mm__panels {
	overflow: hidden;
}
html body .ctd-mm__panel[hidden] {
	display: none !important;
}
html body .ctd-mm__panel.is-in-fwd {
	animation: ctd-mm-in-fwd .22s ease-out;
}
html body .ctd-mm__panel.is-in-back {
	animation: ctd-mm-in-back .22s ease-out;
}
@keyframes ctd-mm-in-fwd {
	from { transform: translateX(32px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@keyframes ctd-mm-in-back {
	from { transform: translateX(-32px); opacity: 0; }
	to { transform: none; opacity: 1; }
}
html body .ctd-mm__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: var(--ctd-mm-row);
	padding: 0;
	border-bottom: 1px solid var(--ctd-mm-line);
	background: var(--ctd-mm-bg);
}
/* Back is the panel title with a left chevron ("‹ Engagement Rings"), so the title has the
   full width rather than sharing it with a separate Back label. */
html body .ctd-mm__back {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--ctd-mm-pad) 0 2px;
	border: 0;
	border-radius: var(--ctd-radius);
	background: transparent;
	color: var(--ctd-mm-text);
	font: 500 16px/1 'Outfit', sans-serif;
	cursor: pointer;
}
html body .ctd-mm__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font: 700 22px/1.2 'Cormorant Garamond', serif;
	color: var(--ctd-mm-text);
}
html body .ctd-mm__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
html body .ctd-mm__list > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ctd-mm-line);
}
html body .ctd-mm__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--ctd-mm-row);
	margin: 0;
	padding: 6px var(--ctd-mm-pad);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ctd-mm-text);
	font: 400 17px/1.3 'Outfit', sans-serif;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
html body .ctd-mm__row:hover,
html body .ctd-mm__row:focus-visible {
	background: rgba(194, 165, 89, .10);
	color: var(--ctd-mm-text);
}
html body .ctd-mm__row:focus-visible,
html body .ctd-mm__back:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: -2px;
}
/* First screen keeps the serif look of the old top level */
html body .ctd-mm [data-ctd-mm-panel="root"] .ctd-mm__row {
	font: 500 20px/1.15 'Cormorant Garamond', serif;
}
html body .ctd-mm__all {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--ctd-gold);
}
html body .ctd-mm__label {
	flex: 1 1 auto;
	min-width: 0;
}
html body .ctd-mm__img {
	flex: 0 0 var(--ctd-mm-img);
	width: var(--ctd-mm-img);
	height: var(--ctd-mm-img);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ctd-mm-line);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	overflow: hidden;
}
html body .ctd-mm__img:empty {
	background: var(--ctd-mm-bg);
}
html body .ctd-mm__img img,
html body .ctd-mm__img .ctd-menu-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}
html body .ctd-mm__chev {
	flex: 0 0 auto;
}

/* While a sub-panel is open, the links block under the menu (Home, Account, Contact…) is hidden
   so the panel is the only thing on screen. */
html body .ctd-mm-deep > .module-grid,
html body .ctd-mm-deep > .module {
	display: none !important;
}
html body .ctd-mm-deep > .accordion-menu.ctd-mm {
	display: block !important;
}

/* Home page intro buttons (Journal Text module 1248, .hero-links: Hints for Christmas,
   High-End, Engagement Rings, Collections), Clive, 28 Oct 2026, from his mockup:
   - each has a line icon (charcoal with gold accents, drawn for this site) before its label;
   - together they span the full width of the stats line underneath (the buttons grow to
     fill the row, 15px apart);
   - 20% deeper: 44px (was 37px); then 15% taller again, 51px, with 6px rounded corners
     (Clive, 28 Oct). The icon and label are unchanged.
   On phones they sit two by two. The icons are matched to each button's link, so the
   module HTML is unchanged. "html body" lifts these above the module's own styles. */
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 15px !important;
	width: 100% !important;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	box-sizing: border-box !important;
	min-height: 51px !important;
	padding: 5px 16px !important;
	border-radius: var(--ctd-radius, 6px) !important;
	white-space: nowrap;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: no-repeat center / contain;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/christmas-jewellery-gifts"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19v16h18V19M25 35l7-3.5V16' stroke='%233B3A37' stroke-width='1.4'/%3E%3Cpath d='M5.5 14h21v5h-21zM26.5 14l7-3.5v5l-7 3.5M5.5 14l7-3.5h21' stroke='%233B3A37' stroke-width='1.4'/%3E%3Cpath d='M15.5 14v21M14 10.5l7-3.5M29.5 12.5v17' stroke='%23B8995A' stroke-width='1.4'/%3E%3Cpath d='M19 9c-3-4-8.5-5-8.5-2.3S16 9.3 19 9zM19 9c1.5-4.5 7.5-6.5 8.2-3.8S22 9.4 19 9z' stroke='%23B8995A' stroke-width='1.4'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/high-end-jewellery"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13h16l6 7-14 15L4 20z' stroke='%233B3A37' stroke-width='1.5'/%3E%3Cpath d='M4 20h28M10 13l3 7 5-7 5 7 3-7M13 20l5 15 5-15' stroke='%233B3A37' stroke-width='1.05'/%3E%3Cpath d='M34 2Q34.6 6.4 39 7Q34.6 7.6 34 12Q33.4 7.6 29 7Q33.4 6.4 34 2z' fill='%23B8995A' stroke='none'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/engagement-rings"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='20' cy='28' rx='13' ry='7.5' stroke='%233B3A37' stroke-width='1.6'/%3E%3Cellipse cx='20' cy='29' rx='10.5' ry='5.2' stroke='%233B3A37' stroke-width='1'/%3E%3Cpath d='M15.5 12.5l2 8M24.5 12.5l-2 8' stroke='%23B8995A' stroke-width='1.5'/%3E%3Cpath d='M13 9.5h14l2.5 3L20 20l-9.5-7.5z' stroke='%233B3A37' stroke-width='1.4'/%3E%3Cpath d='M10.5 12.5h19M16.5 9.5l-1.5 3 5 7.5 5-7.5-1.5-3' stroke='%233B3A37' stroke-width='.9'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="#ctd-cats"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l8 18M21 3l-8 18' stroke='%233B3A37' stroke-width='1.3'/%3E%3Cpath d='M13 21v2' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='28' r='4.6' stroke='%23B8995A' stroke-width='1.7'/%3E%3Ccircle cx='13' cy='28' r='2.7' stroke='%233B3A37' stroke-width='.9'/%3E%3Ccircle cx='25.5' cy='30' r='3.4' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='25.5' cy='30' r='1.8' stroke='%233B3A37' stroke-width='.8'/%3E%3Ccircle cx='34' cy='30' r='3.4' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='34' cy='30' r='1.8' stroke='%233B3A37' stroke-width='.8'/%3E%3C/svg%3E"); }
/* Hover: the button turns black, so each icon swaps its charcoal lines for white (the gold
   accents stay) and stays visible (Clive, 28 Oct 2026). */
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/christmas-jewellery-gifts"]:hover::before,
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/christmas-jewellery-gifts"]:focus-visible::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19v16h18V19M25 35l7-3.5V16' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Cpath d='M5.5 14h21v5h-21zM26.5 14l7-3.5v5l-7 3.5M5.5 14l7-3.5h21' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Cpath d='M15.5 14v21M14 10.5l7-3.5M29.5 12.5v17' stroke='%23B8995A' stroke-width='1.4'/%3E%3Cpath d='M19 9c-3-4-8.5-5-8.5-2.3S16 9.3 19 9zM19 9c1.5-4.5 7.5-6.5 8.2-3.8S22 9.4 19 9z' stroke='%23B8995A' stroke-width='1.4'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/high-end-jewellery"]:hover::before,
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/high-end-jewellery"]:focus-visible::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13h16l6 7-14 15L4 20z' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3Cpath d='M4 20h28M10 13l3 7 5-7 5 7 3-7M13 20l5 15 5-15' stroke='%23FFFFFF' stroke-width='1.05'/%3E%3Cpath d='M34 2Q34.6 6.4 39 7Q34.6 7.6 34 12Q33.4 7.6 29 7Q33.4 6.4 34 2z' fill='%23B8995A' stroke='none'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/engagement-rings"]:hover::before,
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="/engagement-rings"]:focus-visible::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='20' cy='28' rx='13' ry='7.5' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3Cellipse cx='20' cy='29' rx='10.5' ry='5.2' stroke='%23FFFFFF' stroke-width='1'/%3E%3Cpath d='M15.5 12.5l2 8M24.5 12.5l-2 8' stroke='%23B8995A' stroke-width='1.5'/%3E%3Cpath d='M13 9.5h14l2.5 3L20 20l-9.5-7.5z' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Cpath d='M10.5 12.5h19M16.5 9.5l-1.5 3 5 7.5 5-7.5-1.5-3' stroke='%23FFFFFF' stroke-width='.9'/%3E%3C/svg%3E"); }
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="#ctd-cats"]:hover::before,
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a[href="#ctd-cats"]:focus-visible::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l8 18M21 3l-8 18' stroke='%23FFFFFF' stroke-width='1.3'/%3E%3Cpath d='M13 21v2' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='28' r='4.6' stroke='%23B8995A' stroke-width='1.7'/%3E%3Ccircle cx='13' cy='28' r='2.7' stroke='%23FFFFFF' stroke-width='.9'/%3E%3Ccircle cx='25.5' cy='30' r='3.4' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='25.5' cy='30' r='1.8' stroke='%23FFFFFF' stroke-width='.8'/%3E%3Ccircle cx='34' cy='30' r='3.4' stroke='%23B8995A' stroke-width='1.6'/%3E%3Ccircle cx='34' cy='30' r='1.8' stroke='%23FFFFFF' stroke-width='.8'/%3E%3C/svg%3E"); }
@media (max-width: 767px) {
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a {
		justify-content: flex-start !important;
		gap: 8px !important;
		padding: 5px 10px !important;
		white-space: normal;
		line-height: 1.2 !important;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a::before {
		width: 28px;
		height: 28px;
	}
}

/* Home page info blocks row (Journal Info Blocks module 1265): new line icons, left to right
   exceptional-standards, a-family-company, best-price-guarantee, hassle-free-returns (Clive,
   28 Oct 2026; cut from his artwork, transparent PNGs in image/info-blocks/). Each icon
   replaces the Journal icon-font glyph inside the existing 65px light circle. "html body"
   lifts these above Journal's generated per-item styles, which print after this file. */
html body .module-info_blocks-1265 .module-item .info-block::before {
	content: "" !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 64% auto !important;
}
html body .module-info_blocks-1265 .module-item-1 .info-block::before { background-image: url("../image/info-blocks/exceptional-standards.png") !important; }
html body .module-info_blocks-1265 .module-item-2 .info-block::before { background-image: url("../image/info-blocks/a-family-company.png") !important; }
html body .module-info_blocks-1265 .module-item-3 .info-block::before { background-image: url("../image/info-blocks/best-price-guarantee.png") !important; }
html body .module-info_blocks-1265 .module-item-4 .info-block::before { background-image: url("../image/info-blocks/hassle-free-returns.png") !important; }

/* Home audit 29 Oct 2026: the four "Learn more" buttons sat at different heights because each
   card's text is a different length. The text now takes up the spare height, so every button
   lines up along the bottom of the row (design system: equivalent buttons aligned). */
html body .module-info_blocks-1265 .module-item > .info-block {
	height: 100%;
	box-sizing: border-box;
}
html body .module-info_blocks-1265 .module-item .info-block-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	height: 100%;
}
html body .module-info_blocks-1265 .module-item .info-block-text {
	flex: 1 0 auto;
}

/* Home page HOW IT WORKS video column (module 1258, Clive 28 Oct 2026): [A] a 9:16 video on the
   left, [B] the three paragraphs on the right, left-justified. On phones the video sits above
   the text, centred. Playback: js/ctd-scroll-video.js. */
html.route-common-home .module-text-1258 .ctd-process-intro {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin-top: 8px;
	text-align: left;
}
html.route-common-home .module-text-1258 .ctd-process-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 6px;
	background: #1B1C1A;
	cursor: pointer;
}
/* The button ctd-scroll-video.js wraps each scroll video in (3 Nov 2026): no button look of its own. */
.ctd-scroll-video-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.ctd-scroll-video-btn:focus-visible {
	outline: 2px solid #C2A559;
	outline-offset: 3px;
}
.ctd-scroll-video-btn video {
	pointer-events: none;
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-description:first-child { margin-top: 0; }
@media (max-width: 767px) {
	html.route-common-home .module-text-1258 .ctd-process-intro {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	html.route-common-home .module-text-1258 .ctd-process-video {
		width: min(72vw, 300px);
		margin: 0 auto;
	}
}

/* ===== PHONE GALLERY (Luke 28 Oct) =====
   Ring pages on phones: the stage scrolls sideways through every picture (the slides after the first are built by
   product_diamond_search.twig, which adds .ctd-mg-on and the .ctd-mg-thumbs row). Native scroll-snap, no carousel library. The pictures sit
   at the main photo's scale (85% of the box, see .ctd-render-photo above) so a swipe doesn't jump in size. */
@media (max-width: 768px) {
	#product-product .product-image .main-image.ctd-mg-on {
		position: relative;
	}
	#product-product .main-image.ctd-mg-on .swiper-wrapper {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		transform: none !important;
	}
	#product-product .main-image.ctd-mg-on .swiper-wrapper::-webkit-scrollbar {
		display: none;
	}
	#product-product .main-image.ctd-mg-on .swiper-slide {
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	#product-product .main-image .ctd-mg-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ctd-white);
		cursor: zoom-in;
	}
	#product-product .product-image .main-image .ctd-mg-slide img {
		width: 85%;
		height: 85%;
		object-fit: contain;
	}
	/* pendants: edge to edge, as the main picture (.ctd-render-photo--full) */
	#product-product .product-image .main-image:has(.ctd-render-photo--full) .ctd-mg-slide img {
		width: 100%;
		height: 100%;
	}
	/* The row of small pictures under the stage (tap to jump; the active one has the gold border) */
	.ctd-mg-thumbs {
		display: flex;
		justify-content: safe center;
		gap: 8px;
		margin: 8px 0 0;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ctd-mg-thumbs::-webkit-scrollbar {
		display: none;
	}
	.ctd-mg-thumb {
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		padding: 1px;
		border: 1px solid #DDDDDD;
		border-radius: 6px;
		background: var(--ctd-white);
		font-size: 16px;
		font-weight: 500;
		line-height: 1;
	}
	.ctd-mg-thumb.active {
		border: 2px solid #C2A559;
		padding: 0;
	}
	.ctd-mg-thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 5px;
	}
}

/* Product page Trustpilot stars (Micro Star TrustBox under the product title).
   #product beats Journal's 32px gap between product-details blocks.
   Height reserved so the widget loading in does not shift the page (CLS). */
#product .ctd-tp {
	position: relative;
	margin: -12px 0 16px;
}
#product .ctd-tp .ctd-tp-stars {
	min-height: 24px;
	margin: 0;
}
#product .ctd-tp .ctd-tp-stars > a {
	font-size: 14px;
	color: #444444;
}

/* Category pages: Trustpilot Micro Star at the top of every category (same TrustBox as the
   product page). Height reserved so the widget loading in does not shift the page (CLS). */
.route-product-category .ctd-tp--category { margin: 0 0 16px; }
.route-product-category .ctd-tp-stars-category {
	min-height: 24px;
	margin: 0;
	text-align: center;
}
.route-product-category .ctd-tp-stars-category > a {
	font-size: 14px;
	color: #444444;
}

/* Category pages: only one block of copy above the rings. When a page has both the Intro
   Content and the category description, the description moves to just below the products
   (above the SEO middle content and FAQs). Order only, so the copy is still in the HTML once. */
.route-product-category #product-category #content {
	display: flex;
	flex-direction: column;
}
.route-product-category #product-category #content > * {
	min-width: 0;
	max-width: 100%;
}
.route-product-category #product-category #content > .category-seo-intro ~ .category-description {
	order: 1;
	margin-top: 24px;
}
.route-product-category #product-category #content > .main-products-wrapper ~ * {
	order: 2;
}

/* Transparent link over the Trustpilot widget (product and category pages): takes every
   tap/click so Trustpilot opens in a new tab and the widget's own focus box never shows */
.ctd-tp { position: relative; }
.ctd-tp__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
}
.ctd-tp__link:focus { outline: none; }
.ctd-tp__link:focus-visible {
	outline: 2px solid #C2A559;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Home page sketch-to-ring video (#ctdVideo, Journal Blocks module 1251): 1px gold (#C2A559) border
   and a 6px radius (Clive, 29 Oct 2026; was #444444 and 6%). The box is sized to the 4:3 picture (up to 520px
   tall, centred) so the border sits on the video itself, not around empty letterbox space; the
   15px padding becomes margin. !important overrides the video tag's inline style.
   Home page only: /mydesign/ uses the same id for its 9:16 video, which this was cropping to 4:3. */
html.route-common-home body #ctdVideo {
	box-sizing: border-box !important;
	width: min(100%, 400px) !important;   /* 400px wide (Clive, 29 Oct 2026; was 693px) */
	height: auto !important;
	aspect-ratio: 4 / 3;
	max-height: 520px !important;
	margin: 15px auto !important;
	padding: 0 !important;
	object-fit: cover !important;
	border: 1px solid var(--ctd-gold) !important;
	border-radius: var(--ctd-radius, 6px) !important;
}

/* Home page: the "Bring your vision to life" FAQ (module 1145) is switched off (Clive, 28 Oct
   2026, migrations/2026-10-28_remove-home-faq-1145.sql). Its row (bottom-2) would stay behind
   empty with 30px margins above and below, so an empty row is hidden. */
html.route-common-home .grid-rows > .grid-row-bottom-2:not(:has(.module)) {
	display: none;
}

/* Ring + diamond pages (product_diamond_search.twig): the total price is the hero of the summary, the
   Add to Cart button carries the same price, and on phones a price + Add to Cart bar stays at the bottom
   of the screen once the main button scrolls away (Luke, 29 Oct 2026). The price is near-black, not gold:
   gold on white is too faint for the number that matters most; the gold stays as the rule above it. */
#selected-diamond-info .ctd-total-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 2px;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 2px solid var(--ctd-gold);
	color: #1B1C1A;
}
#selected-diamond-info .ctd-total-label {
	flex-basis: 100%;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #444444;
}
#selected-diamond-info .ctd-total-price strong {
	font-family: 'Outfit', sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #1B1C1A;
}
#selected-diamond-info .ctd-total-vat {
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: #444444;
}
@media (max-width: 768px) {
	#selected-diamond-info .ctd-total-price strong { font-size: 30px; }
}

/* Add to Cart with the price: "Add to Cart · £X" */
.ctd-cart-btn__price:not([hidden])::before {
	content: "\00B7";
	margin: 0 .5em;
	opacity: .8;
}
.ctd-cart-btn__price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Phones: sticky price + Add to Cart bar. Below the cookie banner, above the docked 3D viewer (96). */
.ctd-sticky-buy[hidden] { display: none !important; }
@media (max-width: 768px) {
	.ctd-sticky-buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--ctd-white);
		border-top: 1px solid var(--ctd-card-border);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
		animation: ctd-dock-fade .2s ease-out;
	}
	.ctd-sticky-buy__price {
		display: flex;
		flex-direction: column;
		line-height: 1.15;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.ctd-sticky-buy__price strong {
		font-family: 'Outfit', sans-serif;
		font-size: 24px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		color: #1B1C1A;
	}
	.ctd-sticky-buy__price span {
		font-size: 12px;
		color: #444444;
	}
	.ctd-sticky-buy__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 auto;
		width: auto;
		max-width: 220px;
		margin: 0;
		min-height: 48px;
		padding: 0 22px;
		border-radius: var(--ctd-radius, 6px);
		background: var(--ctd-gold);
		border-color: var(--ctd-gold);
		color: var(--ctd-white);
		font-family: 'Outfit', sans-serif;
		font-size: 17px;
		font-weight: 500;
	}
	.ctd-sticky-buy__btn:hover,
	.ctd-sticky-buy__btn:focus-visible {
		background: var(--ctd-gold-hover);
		border-color: var(--ctd-gold-hover);
		color: var(--ctd-white);
	}
	/* Keep the page's last content and Journal's back-to-top button clear of the bar */
	html.ctd-sticky-buy-on body { padding-bottom: 76px; }
	html.ctd-sticky-buy-on .scroll-top { bottom: 90px; }
}

/* Home page HOW IT WORKS (module 1258), Clive 29 Oct 2026:
   [A] the video gets a 1px gold border (6px corners as before);
   [C] the four steps (01 Your Move ... 04 Manufacture) move into the text column [B], under
       the three paragraphs and beside the video, and are scaled down to fit it;
   [D] a gold "Next Stage" button under the steps.
   The HTML move and the button are in migrations/2026-10-29_how-it-works-steps-beside-video.sql. */
html.route-common-home .module-text-1258 .ctd-process-video video {
	border: 1px solid var(--ctd-gold);
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 32px 0 0 !important;
	padding: 0 !important;
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-step {
	padding: 0 6px !important;
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-number {
	width: 48px !important;
	height: 48px !important;
	margin: 0 auto 12px !important;
	font-size: 21.6px !important;
}
/* the thin line joining the circles, re-centred for the smaller circles and columns */
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-step::after {
	top: 24px !important;
	left: 50% !important;
	right: auto !important;
	width: calc(100% + 16px) !important;
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-step h3 {
	margin: 0 0 6px !important;
	font-size: 21.6px !important;
	line-height: 1.2 !important;
}
html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-step p {
	margin: 0 !important;
	font-size: 14.4px !important;
	line-height: 1.5 !important;
}
html.route-common-home .module-text-1258 .ctd-process-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 48px;
	margin-top: 32px;
	padding: 0 32px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius, 6px);
	background: var(--ctd-gold);
	color: #FFFFFF !important;
	font-family: 'Outfit', sans-serif;
	font-size: 15.6px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease;
}
html.route-common-home .module-text-1258 .ctd-process-next:hover,
html.route-common-home .module-text-1258 .ctd-process-next:focus-visible {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
	color: #FFFFFF !important;
}
@media (max-width: 767px) {
	html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 24px !important;
	}
	/* two per row on phones: no line out of the right-hand circle */
	html.route-common-home .module-text-1258 .ctd-process-text .ctd-process-step:nth-child(2n)::after {
		display: none !important;
	}
	html.route-common-home .module-text-1258 .ctd-process-next {
		display: flex;
		width: 100%;
		font-size: 19.2px;
	}
}

/* Home page: the stats strip "57+ Years of Manufacturing ... 45K Shopify Products" (module 1260,
   row top-9) is switched off (Clive, 29 Oct 2026, migrations/2026-10-29_remove-home-stats-1260.sql);
   if Journal still prints the empty row, hide it so no gap is left. */
html.route-common-home .grid-row-top-9:not(:has(.module)) {
	display: none;
}

/* Home page "Why People Choose Us" (row bottom-4: FAQ module 1261 and the "To arrange a visit"
   text, module 1128): background #2A2A2A (Clive, 29 Oct 2026). Journal lays a light 80%-opacity
   overlay on the row (::before), which is switched off; the module's own light panel becomes
   transparent. On the dark ground the heading turns white, the line below it soft white and its
   phone link gold; the question cards stay white. */
html.route-common-home .grid-row-bottom-4 > .row-bg {
	background: #2A2A2A !important;
}
html.route-common-home .grid-row-bottom-4::before {
	display: none !important;
}
html body .grid-row-bottom-4 .module.module-faq-1261 {
	background: transparent !important;
}
html body .grid-row-bottom-4 .module-faq-1261 .module-title {
	color: #FFFFFF !important;
}
html body .grid-row-bottom-4 .module-text-1128,
html body .grid-row-bottom-4 .module-text-1128 p {
	color: rgba(255, 255, 255, 0.86) !important;
}
html body .grid-row-bottom-4 .module-text-1128 a {
	color: var(--ctd-gold) !important;
}

/* Home page HOW IT WORKS: centred Next Stage (module 1258, Clive 29 Oct 2026). [B] the button
   now sits in its own row under the video and text, centred in the section; [C] a centred line
   under it. Button look as above (.ctd-process-next). */
html.route-common-home .module-text-1258 .ctd-process-cta {
	margin-top: 40px;
	text-align: center;
}
html.route-common-home .module-text-1258 .ctd-process-cta .ctd-process-next {
	margin-top: 0;
}
html.route-common-home .module-text-1258 .ctd-process-note {
	max-width: none !important;
	margin: 16px 0 0 !important;
	font-size: 19.2px !important;
	line-height: 1.7 !important;
	text-align: center !important;
}
@media (max-width: 767px) {
	html.route-common-home .module-text-1258 .ctd-process-cta { margin-top: 32px; }
	html.route-common-home .module-text-1258 .ctd-process-note { font-size: 18px !important; }
}

/* ===== Image width/height (SF crawl 29 Oct 2026) =====
   Pictures now carry their real width/height (ImageSize, product main picture) so the browser keeps their
   space while they load. These keep them fluid: never wider than their box, height from the width. */
#view360_example > #video_main_image,
.post-content img,
.category-text img,
.category-widget img,
#information-information .content img {
	max-width: 100%;
	height: auto;
}
#view360_example > #video_main_image {
	width: 100%;
}

/* Shared buttons (29 Oct 2026, first used on /recommissioning-jewellery/): the same height, padding, radius
   and type as the CATEGORY card button (#ctd-cats .ctd-cats__btn), for page content outside Journal modules.
   .ctd-btn--outline is the secondary of a pair: gold border and text on a light background, white on dark. */
.ctd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-size: 16.8px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}
.ctd-btn:hover,
.ctd-btn:focus {
	border-color: var(--ctd-gold-hover);
	background: var(--ctd-gold-hover);
	color: var(--ctd-white);
	text-decoration: none;
}
.ctd-btn:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 3px;
}
.ctd-btn--outline {
	background: transparent;
	color: #1B1C1A;
}
.ctd-btn--outline:hover,
.ctd-btn--outline:focus {
	background: var(--ctd-gold);
	color: var(--ctd-white);
}

/* Jewellery remodelling: the ideas gallery /recommissioning-jewellery/ (Luke 29 Oct 2026; information/recommissioning.twig)
   and the service page /information/give-old-jewellery-a-new-life (information/remodelling.twig, 29 Oct 2026), and the
   high-end jewellery page /high-end-jewellery (information/high_end.twig, 2 Nov 2026), and the main FAQ
   /information/how-do-i-know-the-jewellery-and-service-are-trustworthy (information/faq.twig, 6 Nov 2026). Hero,
   the CATEGORY CARD 2 gallery (#ctd-cats.ctd-cats--card2, styles above), sections, lists, steps, FAQ and a dark call
   to action. Every rule starts with :is(#information-recommission, #information-remodelling, #information-high-end, #information-faq): same weight as one id. */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) {
	--ctd-rc-bg: #F7F5F1;
	--ctd-rc-ink: #1B1C1A;
	--ctd-rc-muted: #444444;
	color: var(--ctd-rc-ink);
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	overflow-x: clip;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-wrap--narrow { max-width: 880px; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 28px;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ctd-gold);
}
/* Service page: three gallery cards, centred in a row of three on desktop (four-column grid elsewhere) */
@media (min-width: 1025px) {
	#information-remodelling #ctd-cats .ctd-cats__grid { grid-template-columns: repeat(3, minmax(0, var(--ctd-cats-card-max))); }
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) p { margin: 0 0 16px; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) a:not(.ctd-btn):not(.ctd-cats__btn) {
	color: var(--ctd-rc-ink);
	text-decoration: underline;
	text-decoration-color: var(--ctd-gold);
	text-underline-offset: 4px;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) a:not(.ctd-btn):not(.ctd-cats__btn):hover { color: var(--ctd-gold-hover); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) h1,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) h2,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ctd-rc-ink);
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) h2::after,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) h3::after { display: none; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-eyebrow {
	margin: 0 0 14px;
	color: var(--ctd-gold);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* Hero */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero {
	padding: clamp(40px, 6vw, 80px) 0;
	background: var(--ctd-rc-bg);
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__title {
	margin: 0 0 20px;
	font-size: clamp(38px, 4.4vw, 64px);
	line-height: 1.08;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__lead { font-size: 20px; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__media img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--ctd-radius);
	mix-blend-mode: multiply;   /* the photo's off-white edge disappears into the band */
}

/* Gallery: anchor targets clear the sticky header */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-gallery,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-cats__card,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) [id] { scroll-margin-top: 120px; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-gallery { padding-top: 72px; }

/* Bands */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-band {
	padding: clamp(48px, 6vw, 80px) 0;
	background: var(--ctd-rc-bg);
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-band--white { background: var(--ctd-white); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-band--dark { background: #1B1C1A; color: rgba(255, 255, 255, 0.86); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-band--dark .ctd-rc-h2 { color: var(--ctd-white); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-band--dark .ctd-btn--outline { color: var(--ctd-white); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-h2 {
	margin: 0 0 36px;
	font-size: clamp(32px, 3.2vw, 48px);
	line-height: 1.12;
	text-align: center;
}

/* How it works: five numbered steps */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ctd-rc-step;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps li {
	counter-increment: ctd-rc-step;
	padding: 24px;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps li::before {
	content: counter(ctd-rc-step, decimal-leading-zero);
	display: block;
	margin-bottom: 8px;
	color: var(--ctd-gold);
	font-family: 'Cormorant Garamond', serif;
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: lining-nums;
	line-height: 1;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps h3,
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why h3 {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.2;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps p {
	margin: 0;
	color: var(--ctd-rc-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* Why remodel */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why > div {
	padding-top: 20px;
	border-top: 2px solid var(--ctd-gold);
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why p { margin: 0; color: var(--ctd-rc-muted); }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-more { margin: 0; text-align: center; }

/* FAQ */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq details {
	border-bottom: 1px solid #DDDDDD;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq summary::-webkit-details-marker { display: none; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--ctd-gold);
	font-size: 28px;
	line-height: 1;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq details[open] summary::after { content: "\2212"; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq summary h3 {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
}
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq details p { padding-bottom: 8px; color: var(--ctd-rc-muted); }

/* Call to action */
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-cta { text-align: center; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-cta .ctd-rc-h2 { margin-bottom: 16px; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-cta p { max-width: 640px; margin: 0 auto; }
:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-cta .ctd-rc-actions { justify-content: center; }

/* Tablet */
@media (max-width: 1024px) {
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps li:last-child { grid-column: 1 / -1; }
}
/* Phones */
@media (max-width: 767px) {
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-wrap { padding: 0 16px; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__grid,
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why,
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-steps { grid-template-columns: minmax(0, 1fr); }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__lead { font-size: 18px; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-hero__media img { max-width: 300px; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-actions .ctd-btn { flex: 1 1 100%; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-h2 { margin-bottom: 24px; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-why { gap: 24px; }
	:is(#information-recommission, #information-remodelling, #information-high-end, #information-faq) .ctd-rc-faq summary h3 { font-size: 21px; }
}

/* ===== Pagination jump links (SF crawl 29 Oct 2026) =====
   Long categories show 1 2 … 9 … 10 … 20 … 30 … 36 (common/pagination.php), so the list may need two rows on
   phones: let it wrap, and keep the … between numbers plain. */
.pagination-results .pagination {
	flex-wrap: wrap;
	row-gap: 6px;
}
.pagination .ctd-page-gap .page-link {
	border-color: transparent;
	background: transparent;
	pointer-events: none;
}

/* Home intro: video beside the text (modules 1248 and 1251, Clive 30 Oct 2026). The intro is one
   centred column as wide as the row of buttons (850px): heading and subheading, then [C] the two
   paragraphs in the left half and [D] the sketch-to-ring video in the right half (each half as wide
   as two buttons, 15px apart), then [E] the buttons and the figures. The video block now lives in
   module 1248 (migrations/2026-10-30_home-intro-video-beside-text.sql); module 1251 is switched off,
   so its column is hidden and the text column takes the full row. Phones: text, then video. */
html.route-common-home .grid-row-top-1 .grid-col-top-1-3:not(:has(.module)) {
	display: none !important;
}
html.route-common-home .grid-row-top-1 .grid-col-top-1-2:has(.module-text-1248) {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Home intro heading and subheading centred over the text and video, on every screen size
   (Luke, 30 Oct 2026). The paragraphs below stay left-aligned. */
html body :is(.module-text-1248, .module-text-1258) .hero-grid > .hero-title,
html body :is(.module-text-1248, .module-text-1258) .hero-grid > h2.gold {
	text-align: center !important;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
	align-items: start;
	margin-bottom: 24px;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-text .hero-copy:last-child {
	margin-bottom: 0;
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-media .video-container_home {
	margin: 0;
}
html.route-common-home body :is(.module-text-1248, .module-text-1258) .hero-media #ctdVideo {
	width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
}
@media (max-width: 767px) {
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-split {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Home intro, Clive 30 Oct 2026 (after #1088):
   [A] the video is as tall as the two paragraphs beside it. The row's height comes from the
       text; the video fills its half (absolutely placed, cover). The columns are 418 : 497, so at
       full width the video keeps its 4:3 shape exactly (497 x 373 beside 373px of text);
   [B] the intro widens to 930px so the four buttons, now equal widths, run from the left of the
       text to the right edge of the video (Collections lines up with it).
   Phones are unchanged: text, then the video at 4:3 full width. */
@media (min-width: 768px) {
	html body :is(.module-text-1248, .module-text-1258) .hero-grid {
		max-width: 930px !important;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-split {
		grid-template-columns: 418fr 497fr;
		align-items: stretch;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-media {
		position: relative;
		min-height: 0;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-media .video-container_home {
		position: absolute;
		inset: 0;
	}
	html.route-common-home body :is(.module-text-1248, .module-text-1258) .hero-media #ctdVideo {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: cover !important;
	}
}
html body :is(.module-text-1248, .module-text-1258) .hero-grid .hero-links > a {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* Home "How it works" (module 1258, id="how-it-works" from
   migrations/2026-10-30_home-mobile-links-fixes.sql): the hero's "See how we design" button jumps
   here. Leave room for the sticky header so the heading isn't hidden under it. */
#how-it-works {
	scroll-margin-top: 140px;
}
@media (max-width: 767px) {
	#how-it-works {
		scroll-margin-top: 80px;
	}
}

/* ---------------------------------------------------------------------------------------------
   Phone tidy-ups (Luke, 30 Oct 2026), from the mobile check of the home page and footer.
   Everything here is inside max-width 599px, so desktop and tablet are unchanged.
   Behaviour (footer accordion, Read more) in js/ctd-phone-tidy.js, which only adds classes.
   --------------------------------------------------------------------------------------------- */
/* The "Read more" button the script adds is for phones only */
.module-text-1258 .ctd-read-more {
	display: none;
}
@media (max-width: 599px) {
	/* [1] Intro: the subheading "Click with the best jeweller" was larger than the H1 (30px vs 28px),
	   so it read as the main headline. H1 32px, subheading 22px. */
	html body :is(.module-text-1248, .module-text-1258) .hero-grid > .hero-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	html body :is(.module-text-1248, .module-text-1258) .hero-grid > h2.gold {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	/* [2] Hero slider: dots were 5 x 5px. Slightly bigger and with a 44px tap area around each. */
	.module-slider.ctd-hero .swiper-pagination-bullet {
		position: relative;
		width: 8px !important;
		height: 8px !important;
		margin: 0 10px !important;
	}
	.module-slider.ctd-hero .swiper-pagination-bullet::after {
		content: "";
		position: absolute;
		inset: -18px;
	}
	/* Slide sub-line ("53,000+ jewellery designs…") 13px -> 15px */
	.module-slider.ctd-hero .slide-text-item span {
		font-size: max(15px, 1em);
	}

	/* [3] Figures under the intro: labels 12px -> 13px */
	html body :is(.module-text-1248, .module-text-1258) .hero-grid .stats .stat small {
		font-size: 13px !important;
	}

	/* [4] "Crafted / Family / Price / Returns" blocks (Info Blocks module 1265): two by two instead of
	   one per screen (1,351px -> about 700px). */
	html.route-common-home .module-info_blocks-1265 .auto-grid-items {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	html.route-common-home .module-info_blocks-1265 .module-item {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	html.route-common-home .module-info_blocks-1265 .info-block {
		height: 100%;
		padding: 16px 12px !important;
	}
	html.route-common-home .module-info_blocks-1265 .info-block-title {
		font-size: 19px !important;
		line-height: 1.2 !important;
	}
	html.route-common-home .module-info_blocks-1265 .info-block-text {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
	html.route-common-home .module-info_blocks-1265 .info-block-button {
		min-height: 44px;
		padding: 8px 10px !important;
		font-size: 14px !important;
	}

	/* [5] "How it works": the portrait video is 499px tall on a phone; 380px is plenty. And only the
	   first paragraph shows until "Read more" (the rest stays in the HTML for search engines). */
	html.route-common-home .module-text-1258 .ctd-process-video {
		max-width: 214px;
		margin-left: auto;
		margin-right: auto;
	}
	html.route-common-home .module-text-1258 .ctd-process-eyebrow {
		font-size: 12px;
	}
	.module-text-1258 .ctd-more-collapsed .ctd-process-description ~ .ctd-process-description {
		display: none;
	}
	.module-text-1258 .ctd-read-more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 4px 0 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ctd-ink, #1B1C1A);
		font-family: 'Outfit', sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
	}

	/* [6] Blog "Continue reading": 12px text, 18px tall. 14px and a 44px tap area. */
	html.route-common-home .module-blog_posts .btn-read-more {
		min-height: 44px;
		font-size: 14px !important;
	}

	/* [7] Bottom bar labels (Home / Account / Email / Call us) 11px -> 12px */
	.bottom-menu .links-text,
	.bottom-menu .menu-label {
		font-size: 12px !important;
	}

	/* [8] Footer link columns: tap-to-open (js/ctd-phone-tidy.js adds .ctd-acc), each title a 48px row
	   with a chevron, links 44px tall. Without the script the columns stay open as before. */
	footer .module-catalog-1151 .ctd-acc .catalog-title {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		margin: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		cursor: pointer;
	}
	footer .module-catalog-1151 .ctd-acc .catalog-title::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-right: 4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-3px);
		transition: transform 0.2s;
	}
	footer .module-catalog-1151 .ctd-acc.is-open .catalog-title::after {
		transform: rotate(-135deg) translateY(-3px);
	}
	footer .module-catalog-1151 .ctd-acc:not(.is-open) .subitems {
		display: none !important;
	}
	footer .module-catalog-1151 .ctd-acc .subitem > a {
		display: flex !important;
		align-items: center;
		min-height: 44px;
	}
	footer .module-catalog-1151 .ctd-acc .subitem > a > span {
		font-size: 15px !important;
	}
	footer .module-catalog-1151 .module-item {
		margin-bottom: 0 !important;
	}
}

/* "Bestsellers in this category" strip under the category grid (Journal Products module 689), Luke 1 Nov 2026:
   4 across on desktop, the same as the category grid above it (Journal had it at 3, so the cards were much
   bigger than the grid's). Under about 950px it drops to 3; phones keep the swipe strip as before. */
@media (min-width: 768px) {
	html div.module.module-products-689 .auto-grid {
		--grid-min-width: 220px;
		--grid-max-col: 4;
	}
}

/* ---------------------------------------------------------------------------
   Home hero slider (module 1267), slide "Find your brilliance": ring video over the still photo,
   added after page load by js/ctd-hero-video.js (Luke, 1 Nov 2026). Sits above the photo and below
   the slide's dark gradient (.slide-content-image::before, z-index 1) and text; fades in once playing.
   --------------------------------------------------------------------------- */
.module-slider.ctd-hero .slide-content-image > .ctd-hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}
.module-slider.ctd-hero .slide-content-image > .ctd-hero-video.is-playing {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.module-slider.ctd-hero .slide-content-image > .ctd-hero-video {
		display: none;
	}
}

/* Home hero banner 2, Ring Maker (module 1267), Luke 3 Nov 2026: the slider is much wider than the 2000 x 700
   picture on large screens and Journal anchors this slide's picture to the top, so the ring's step bar was cut
   off at the bottom. The banner is black all over, so the picture and its video are shown whole (contain),
   centred, on black; there is nothing at the edges to lose. */
.module-slider-1267.ctd-hero .slide-content-image:has(> img[src*="ring-maker-3d-design-your-own-ring"]),
.module-slider-1267.ctd-hero .slide-content-image:has(> img[data-srcset*="ring-maker-3d-design-your-own-ring"]) {
	background: #000000;
}
.module-slider-1267.ctd-hero .slide-content-image > img[src*="ring-maker-3d-design-your-own-ring"],
.module-slider-1267.ctd-hero .slide-content-image > img[data-srcset*="ring-maker-3d-design-your-own-ring"],
.module-slider-1267.ctd-hero .slide-content-image > img[src*="ring-maker-3d-design-your-own-ring"] ~ .ctd-hero-video,
.module-slider-1267.ctd-hero .slide-content-image > img[data-srcset*="ring-maker-3d-design-your-own-ring"] ~ .ctd-hero-video {
	object-fit: contain !important;
	object-position: 50% 50% !important;
}

/* Phone hero (module 1268), "Find your brilliance" ring slide, phone turned sideways (Luke, 1 Nov 2026):
   the square still/video cropped to a wide box hid the ring behind the text. In landscape the ring sits on
   the right half (top-anchored, soft left edge) and the text on the left half over the dark panel. */
@media (orientation: landscape) and (max-width: 1023px) {
	.module-slider.ctd-hero .swiper-slide:has(img[src*="diamond-halo-engagement-ring-on-hand-mobile"]) .slide-content-image {
		background: #120e0a;
	}
	.module-slider.ctd-hero .slide-content-image > img[src*="diamond-halo-engagement-ring-on-hand-mobile"],
	.module-slider.ctd-hero .slide-content-image > img[src*="diamond-halo-engagement-ring-on-hand-mobile"] ~ .ctd-hero-video {
		left: auto;
		right: 0;
		width: 52%;
		object-position: 50% 0;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
		mask-image: linear-gradient(to right, transparent 0, #000 22%);
	}
	.module-slider.ctd-hero .swiper-slide:has(img[src*="diamond-halo-engagement-ring-on-hand-mobile"]) .slide-col {
		max-width: 52%;
	}
}

/* Footer tap targets on phones and small tablets (Luke, 2 Nov 2026), from the mobile check:
   the contact lines above the social icons (Links Menu 751: The Glorious Cotswolds, phone,
   Contact Us) were 20px tall, and the social icons (Icons Menu 61) 37 x 37px. Each is now at least
   44px to tap; the icons keep their size, with a little more space around them. */
@media (max-width: 767px) {
	footer .links-menu-751 .menu-item {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	footer .links-menu-751 .menu-item > a {
		display: flex !important;
		align-items: center;
		min-height: 44px;
	}
	footer .icons-menu-61 ul {
		gap: 4px;
	}
	footer .icons-menu-61 .menu-item > a {
		min-width: 44px !important;
		min-height: 44px !important;
	}
}

/* ---------------------------------------------------------------------------------------------
   Home page order (Luke, 2 Nov 2026): the CATEGORY cards come straight after the heading.
   Before, they were the fifth section down (about 4 screens on desktop, 8 on a phone).
   The top rows share one flex container (#top .grid-rows), so the order is set here; the Journal
   layout is unchanged, like the bottom-row order above. Now:
     1  hero slider + "Your Perfect Diamond Ring / Click with the best jeweller" (row top-1; the long
        intro moved out by migrations/2026-11-02_home-intro-below-cards.sql)
     2  delivery strip (top-2)
     3  CATEGORY cards, 8 (top-6)
     4  Live Diamond Feed (top-4)
     5  Crafted / Family / Price / Returns blocks (top-3)
     6  "A UK family jeweller since 1969" (the intro text, video, quick links and figures) and
        "How it works" (top-7, module 1258)
   The intro styles above now cover the moved block too (:is(.module-text-1248, .module-text-1258)).
   --------------------------------------------------------------------------------------------- */
html.route-common-home #top .grid-rows > .grid-row-top-1 { order: 1; }
html.route-common-home #top .grid-rows > .grid-row-top-2 { order: 2; }
html.route-common-home #top .grid-rows > .grid-row-top-6 { order: 3; }
html.route-common-home #top .grid-rows > .grid-row-top-4 { order: 4; }
html.route-common-home #top .grid-rows > .grid-row-top-3 { order: 5; }
html.route-common-home #top .grid-rows > .grid-row-top-7 { order: 6; }
html.route-common-home #top .grid-rows > .grid-row:not(.grid-row-top-1):not(.grid-row-top-2):not(.grid-row-top-3):not(.grid-row-top-4):not(.grid-row-top-6):not(.grid-row-top-7) { order: 7; }

/* ---------------------------------------------------------------------------------------------
   Home page spacing after the 2 Nov reorder (Luke, 2 Nov 2026). The rows kept the spacing they
   had in their old places, and in a flex column margins add up instead of collapsing, so some
   gaps between sections had grown to 132-152px. Section to section is now 96px on desktop
   (the same as the CATEGORY cards section) and about 56px on phones.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/* Crafted / Family / Price / Returns blocks (top-3) -> "A UK family jeweller since 1969":
	   was 100px margin + top-7's 32px = 132px, now 64 + 32 = 96px */
	html.route-common-home .grid-row-top-3 {
		margin-bottom: 64px;
	}
	/* "From the Blog": 120px above and below, now 96px */
	html.route-common-home .grid-row-bottom-3 {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}
/* "It's a fun and exciting experience to treasure" -> "Why People Choose Us": was the section's 80px
   + the header's 64px = 144px, now 96px */
html.route-common-home .module-text-1258 .ctd-process-section > :last-child {
	margin-bottom: 0;
}
html.route-common-home .module-text-1258 .ctd-process-section {
	padding-bottom: 96px;
}
@media (max-width: 1024px) {
	html.route-common-home .module-text-1258 .ctd-process-section {
		padding-bottom: 56px;             /* was 48 + 40 = 88px */
	}
}
/* "Why People Choose Us" on tablets and phones: the empty left and right columns stack above and
   below the questions as 60px blank strips (gaps of 107px and 123px inside the dark band). */
@media (max-width: 1024px) {
	html.route-common-home .grid-row-bottom-4 .grid-col:not(:has(.module)) {
		display: none;
	}
}

/* The moved intro block at the top of module 1258, above "How it works" */
html body .module-text-1258 .hero-grid.ctd-about {
	/* 16px + the "How it works" section's 80px = 96px from the figures row (was 72px = 152px; 2 Nov) */
	margin: 0 auto 16px !important;
	text-align: left;
}
html body .module-text-1258 .ctd-about__title {
	margin: 0 0 28px;
	color: var(--ctd-ink, #1B1C1A);
	font-family: 'Cormorant Garamond', serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
}
@media (max-width: 767px) {
	html body .module-text-1258 .hero-grid.ctd-about {
		margin-bottom: 8px !important;   /* + the section's 48px = 56px (was 48px = 96px; 2 Nov) */
	}
	html body .module-text-1258 .ctd-about__title {
		margin-bottom: 20px;
		font-size: 30px;
	}
}

/* ---------------------------------------------------------------------------------------------
   Category landing (Luke, 2 Nov 2026): the block under the intro of a hub category such as
   /wedding-rings (product/ctd_landing.twig, links in system/library/ctd/category_landing.php).
   Style cards reuse CATEGORY CARD 2 (#ctd-cats.ctd-cats--card2), three across on desktop,
   two across on phones as on the home page; then metal links, a call-out and popular products.
   --------------------------------------------------------------------------------------------- */
.ctd-landing {
	margin: 8px 0 48px;
}
.ctd-landing__title {
	margin: 0 0 28px;
	color: #1B1C1A;
	font-family: 'Cormorant Garamond', serif;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
}
.ctd-landing__subtitle {
	margin: 0 0 16px;
	color: #1B1C1A;
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}
#ctd-cats.ctd-landing__cards {
	padding: 56px 0 64px;
}
#ctd-cats.ctd-landing__cards .ctd-cats__grid {
	grid-template-columns: repeat(3, minmax(0, var(--ctd-cats-card-max)));
}
/* Metal links */
.ctd-landing__metals {
	margin: 48px auto 0;
	text-align: center;
}
.ctd-landing__metals ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ctd-landing__metals li::before {
	display: none;
}
.ctd-landing__metals a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid #444444;
	border-radius: var(--ctd-radius);
	background: #FFFFFF;
	color: #1B1C1A;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.ctd-landing__metals a:hover,
.ctd-landing__metals a:focus-visible {
	border-color: var(--ctd-gold);
	background: var(--ctd-gold);
	color: #FFFFFF;
}
/* Call-out */
.ctd-landing__callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin: 48px 0 0;
	padding: 36px 40px;
	border-radius: var(--ctd-radius);
	background: #1B1C1A;
	color: rgba(255, 255, 255, 0.86);
}
.ctd-landing__callout .ctd-landing__subtitle {
	color: var(--ctd-gold);
}
.ctd-landing__callout p {
	max-width: 640px;
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}
.ctd-landing__callout-actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.ctd-landing__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: #FFFFFF !important;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.ctd-landing__btn:hover,
.ctd-landing__btn:focus-visible {
	background: var(--ctd-gold-hover);
}
.ctd-landing__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #FFFFFF !important;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Popular products */
.ctd-landing__popular {
	margin: 56px 0 0;
}
@media (max-width: 1024px) {
	#ctd-cats.ctd-landing__cards .ctd-cats__grid {
		grid-template-columns: repeat(2, minmax(0, var(--ctd-cats-card-max)));
	}
	.ctd-landing__callout {
		flex-direction: column;
		align-items: flex-start;
	}
	.ctd-landing__callout-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 20px;
	}
}
/* Phones: two cards to a row as on the home page (photo, title, button; the description stays in the HTML) */
@media (max-width: 599px) {
	.ctd-landing__title {
		margin-bottom: 20px;
		font-size: 30px;
	}
	.ctd-landing__subtitle {
		font-size: 26px;
	}
	#ctd-cats.ctd-landing__cards {
		padding: 36px 0 40px;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 0 12px;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__media {
		margin: 8px 8px 0;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__desc {
		display: none;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__body {
		padding: 10px 8px;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__name {
		margin-bottom: 10px;
		font-size: clamp(19px, 11cqi, 22px);
		line-height: 1.1;
		text-align: center;
	}
	#ctd-cats.ctd-landing__cards .ctd-cats__btn {
		min-height: 44px;
		padding: 6px 8px;
		font-size: 16px;
		line-height: 1.2;
	}
	.ctd-landing__metals {
		margin-top: 32px;
	}
	.ctd-landing__metals a {
		padding: 0 14px;
		font-size: 15px;
	}
	.ctd-landing__callout {
		margin-top: 32px;
		padding: 24px 20px;
	}
	.ctd-landing__callout p {
		font-size: 16px;
	}
	.ctd-landing__popular {
		margin-top: 40px;
	}
	/* Popular rings: a sideways swipe row (the shop grid is one 674px card per row on a phone) */
	#content .ctd-landing .ctd-landing__popular .main-products.product-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px;
		margin: 0 -12px;
		padding: 0 12px 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	#content .ctd-landing .ctd-landing__popular .main-products.product-grid > .product-layout {
		flex: 0 0 74%;
		max-width: 74%;
		scroll-snap-align: start;
	}
}

/* Ring Render pictures on cards (Luke 2 Nov 2026): the new -01 renders (catalog/renders/) fill about 87% of the
   picture's width; the old category pictures fill about 67%. Shrink the render inside its frame so product and
   category cards match the old category pictures. Product page galleries are not touched. The edges are faded so the render's floor shadow doesn't show as a box. `scale` (not
   transform) so Journal's hover zoom still works on top. */
.product-thumb .image a:has(img[data-src*="/catalog/renders/"], img[src*="/catalog/renders/"]),
.category-thumb .image a:has(img[data-src*="/catalog/renders/"], img[src*="/catalog/renders/"]) {
	display: block;
	overflow: hidden;
	background: #FFFFFF;
}
.product-thumb .image img[data-src*="/catalog/renders/"],
.product-thumb .image img[src*="/catalog/renders/"],
.category-thumb .image img[data-src*="/catalog/renders/"],
.category-thumb .image img[src*="/catalog/renders/"] {
	scale: 0.85;   /* was 0.77; Luke 2 Nov 16:53: "zoom in only a touch" */
	/* fade the render's own light-grey floor into the white frame, so no box edge shows */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
	mask-composite: intersect;
}

/* Landing grid (e.g. /wedding-rings lists every design): heading over the sort bar, and two rings to a row on
   phones instead of one 674px card, so the page is a quarter of the length. Only on pages with a landing grid. */
.ctd-landing-grid .ctd-landing__grid-title {
	margin: 8px 0 24px;
}
@media (max-width: 599px) {
	#content .ctd-landing-grid .main-products.product-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	#content .ctd-landing-grid .main-products.product-grid > .product-layout {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* ===== Basket feedback (2 Nov 2026) =====================================================================
   Header basket: bag icon only when the basket is empty; with items, the basket total beside the bag and a
   count badge on it, which pulses when something is added. Mini-basket panel after an add (from the right on
   desktop, from the bottom on phones). Script: js/ctd-cart.js. Markup: common/cart.twig. */
#cart:not(.cart-has-items) #cart-total {
	display: none !important;
}
#cart .cart-heading > em.fa {
	position: relative;
}
#cart #cart-items.count-badge {
	display: none !important;
}
#cart.cart-has-items #cart-items.count-badge:not(.count-zero) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	/* on the bag's top-right corner (the bag sits centred in the icon box) */
	top: calc(50% - 21px);
	right: 0;
	left: auto;
	bottom: auto;
	min-width: 20px;
	height: 20px;
	margin: 0;
	padding: 0 5px;
	border-radius: 10px;
	border: 2px solid var(--ctd-gold);
	background: #1B1C1A;
	color: var(--ctd-white);
	font: 600 11px/1 'Outfit', sans-serif;
	box-sizing: border-box;
	transform: none;
}
#cart.ctd-cart-pulse .cart-heading {
	animation: ctd-cart-pulse 0.6s ease-out 1;
}
@keyframes ctd-cart-pulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(194, 165, 89, 0.35); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 165, 89, 0); }
}

/* The add button, briefly, after an add */
.btn.ctd-added,
.btn.ctd-added:hover {
	background: #1B1C1A !important;
	border-color: #1B1C1A !important;
	color: var(--ctd-white) !important;
}

/* Mini-basket panel */
html.ctd-mb-open {
	overflow: hidden;
}
.ctd-mb[hidden] {
	display: none !important;
}
.ctd-mb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: 'Outfit', sans-serif;
}
.ctd-mb__bg {
	position: absolute;
	inset: 0;
	background: rgba(27, 28, 26, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ctd-mb__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: min(420px, 100%);
	padding: 24px;
	overflow-y: auto;
	box-sizing: border-box;
	background: #F7F5F1;
	color: #1B1C1A;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 0.25s ease;
	outline: none;
}
.ctd-mb.is-open .ctd-mb__bg {
	opacity: 1;
}
.ctd-mb.is-open .ctd-mb__panel {
	transform: none;
}
.ctd-mb__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid #E3DED3;
}
.ctd-mb__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 700 26px/1.15 'Cormorant Garamond', serif;
	color: #1B1C1A;
}
.ctd-mb__tick {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ctd-gold);
	position: relative;
}
.ctd-mb__tick::after {
	content: '';
	position: absolute;
	left: 9px;
	top: 5px;
	width: 6px;
	height: 12px;
	border: solid var(--ctd-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ctd-mb__close {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--ctd-radius);
	background: transparent;
	color: #1B1C1A;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.ctd-mb__close:hover,
.ctd-mb__close:focus-visible {
	background: #ECE8DF;
}
.ctd-mb__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.ctd-mb__img {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	object-fit: contain;
	border: 1px solid #E3DED3;
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
}
.ctd-mb__info {
	min-width: 0;
}
.ctd-mb__name {
	display: block;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: #1B1C1A;
	text-decoration: none;
}
.ctd-mb__name:hover {
	color: var(--ctd-gold-hover);
}
.ctd-mb__opts {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctd-border-dark);
}
.ctd-mb__opts span {
	color: #777777;
}
.ctd-mb__price {
	margin: 8px 0 0;
	font-size: 17px;
	font-weight: 600;
}
.ctd-mb__price span {
	font-weight: 400;
	color: #777777;
}
.ctd-mb__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid #E3DED3;
	border-bottom: 1px solid #E3DED3;
	font-size: 16px;
}
.ctd-mb__total:empty {
	display: none;
}
.ctd-mb__total strong {
	font-size: 20px;
	font-weight: 600;
}
.ctd-mb__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ctd-mb__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	font: 500 16px/1.2 'Outfit', sans-serif;
	text-align: center;
	text-decoration: none !important;
	box-sizing: border-box;
}
.ctd-mb__btn--primary {
	background: var(--ctd-gold);
	color: var(--ctd-white) !important;
}
.ctd-mb__btn--primary:hover {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
}
.ctd-mb__btn--secondary {
	background: var(--ctd-white);
	color: #1B1C1A !important;
}
.ctd-mb__btn--secondary:hover {
	background: #FBF8F1;
}
.ctd-mb__continue {
	min-height: 44px;
	border: 0;
	background: transparent;
	font: 400 15px/1.2 'Outfit', sans-serif;
	color: var(--ctd-border-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ctd-mb__trust {
	margin: 0;
	font-size: 14px;
	color: #777777;
	text-align: center;
}
@media (max-width: 599px) {
	.ctd-mb__panel {
		top: auto;
		left: 0;
		width: 100%;
		max-height: 88vh;
		padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
		gap: 14px;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
		transform: translateY(100%);
	}
	.ctd-mb__title {
		font-size: 24px;
	}
	.ctd-mb__img {
		flex-basis: 80px;
		width: 80px;
		height: 80px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ctd-mb__bg,
	.ctd-mb__panel {
		transition: none;
	}
	#cart.ctd-cart-pulse .cart-heading {
		animation: none;
	}
}

/* Links menu items with no link (e.g. footer "The Glorious Cotswolds, England", Luke 2 Nov 2026):
   rendered as <a> with no href, so plain text. Same look as the links, but no pointer or hover. */
.links-menu .menu-item > a.no-link {
	pointer-events: none;
	cursor: default;
}

/* Diamond result cards with no video (Luke 2 Nov 2026): an invisible copy of the Watch Video
   button holds the same space, so prices and details line up with cards that have one.
   Markup: diamond/search_results.twig, diamond/partials/detailed_card.twig. */
.ctd-video-ghost {
	visibility: hidden;
	pointer-events: none;
}

/* ===== Phone basket (2 Nov 2026) =========================================================================
   Basket page under 768px: item cards with the price on screen, a summary, and a checkout bar fixed to the
   bottom of the screen, instead of the desktop table that needed a sideways scroll. Markup:
   extension/journal_3/catalog/view/template/checkout/cart_list_41.twig (.ctd-mbasket). Desktop unchanged. */
.ctd-mbasket {
	display: none;
}
@media (max-width: 767px) {
	html.route-checkout-cart .cart-table > .table-responsive,
	html.route-checkout-cart .cart-bottom > .buttons,
	html.route-checkout-cart .breadcrumbs {
		display: none !important;
	}
	/* slimmer page title */
	html.route-checkout-cart h1.page-title {
		margin: 0 !important;
		padding: 20px 16px 4px !important;
		min-height: 0 !important;
		background: none !important;
		font-size: 30px !important;
		line-height: 1.15 !important;
		text-align: left !important;
	}
	/* room for the checkout bar under the last of the page */
	html.route-checkout-cart body {
		padding-bottom: calc(80px + env(safe-area-inset-bottom));
	}
	/* Order on phones: items, discount code, summary, reassurance, continue shopping. The discount code box
	   lives in .cart-bottom (after the table), so the two wrappers are flattened into one column. */
	html.route-checkout-cart #shopping-cart {
		display: flex;
		flex-direction: column;
	}
	html.route-checkout-cart #shopping-cart > .cart-table,
	html.route-checkout-cart .ctd-mbasket {
		display: contents;
	}
	.ctd-mbasket {
		font-family: 'Outfit', sans-serif;
		color: #1B1C1A;
	}
	.ctd-mbasket__items { order: 1; }
	html.route-checkout-cart #shopping-cart > .cart-bottom { order: 2; }
	.ctd-mbasket__summary { order: 3; }
	.ctd-mbasket__trust { order: 4; }
	.ctd-mbasket__continue { order: 5; }
	html.route-checkout-cart #shopping-cart > .cart-bottom,
	html.route-checkout-cart #shopping-cart > .cart-bottom .panels-total,
	html.route-checkout-cart #shopping-cart > .cart-bottom .cart-panels {
		position: static !important;
		top: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}
	.ctd-mbasket ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ctd-mbasket__items {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.ctd-mbasket__item {
		display: flex;
		gap: 14px;
		padding: 14px;
		background: var(--ctd-white);
		border: 1px solid #E3DED3;
		border-radius: var(--ctd-radius);
	}
	.ctd-mbasket__img {
		flex: 0 0 88px;
		width: 88px;
		height: 88px;
	}
	.ctd-mbasket__img img {
		display: block;
		width: 88px;
		height: 88px;
		object-fit: contain;
		border-radius: var(--ctd-radius);
		background: #F7F5F1;
	}
	.ctd-mbasket__info {
		flex: 1 1 auto;
		min-width: 0;
	}
	.ctd-mbasket__name {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		color: #1B1C1A !important;
		text-decoration: none !important;
	}
	.ctd-mbasket__stock {
		margin: 4px 0 0;
		font-size: 14px;
		color: #A23B2A;
	}
	.ctd-mbasket__opts {
		margin-top: 6px !important;
		font-size: 14px;
		line-height: 1.5;
		color: var(--ctd-border-dark);
	}
	.ctd-mbasket__opts span {
		color: #777777;
	}
	.ctd-mbasket__price {
		margin: 8px 0 0;
		font-size: 18px;
		font-weight: 600;
	}
	.ctd-mbasket__price span {
		font-size: 14px;
		font-weight: 400;
		color: #777777;
	}
	.ctd-mbasket__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 16px;
		margin-top: 0;
	}
	.ctd-mbasket__qty {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-size: 15px;
	}
	.ctd-mbasket__qty input {
		width: 56px;
		height: 44px;
		padding: 0 8px;
		border: 1px solid var(--ctd-border-dark);
		border-radius: var(--ctd-radius);
		font: 400 16px 'Outfit', sans-serif;
		text-align: center;
		background: var(--ctd-white);
	}
	.ctd-mbasket__update {
		height: 44px;
		padding: 0 12px;
		border: 1px solid var(--ctd-gold);
		border-radius: var(--ctd-radius);
		background: var(--ctd-white);
		font: 500 15px 'Outfit', sans-serif;
		color: #1B1C1A;
	}
	/* Remove: a plain link (it carries .btn-danger only so the basket page's remove handler picks it up) */
	.ctd-mbasket a.ctd-mbasket__remove {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-left: auto;
		padding: 0;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		font: 400 15px 'Outfit', sans-serif;
		color: var(--ctd-border-dark) !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}
	.ctd-mbasket__summary {
		margin-top: 16px;
		padding: 16px;
		background: var(--ctd-white);
		border: 1px solid #E3DED3;
		border-radius: var(--ctd-radius);
	}
	.ctd-mbasket__line {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 4px 0;
		font-size: 16px;
	}
	.ctd-mbasket__free {
		font-weight: 600;
		color: #2E7D4F;
	}
	.ctd-mbasket__total {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		margin-top: 8px;
		padding-top: 12px;
		border-top: 1px solid #E3DED3;
		font-size: 18px;
		font-weight: 500;
	}
	.ctd-mbasket__total strong {
		font-size: 24px;
		font-weight: 600;
	}
	.ctd-mbasket__vat {
		margin: 2px 0 0;
		font-size: 14px;
		color: #777777;
		text-align: right;
	}
	.ctd-mbasket__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		margin: 14px 0 0 !important;
		font-size: 14px;
		color: var(--ctd-border-dark);
	}
	.ctd-mbasket__trust li {
		position: relative;
		padding-left: 18px;
	}
	.ctd-mbasket__trust li::before {
		content: '\2713';
		position: absolute;
		left: 0;
		top: 0;
		font-weight: 700;
		color: var(--ctd-gold);
	}
	.ctd-mbasket__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(247, 245, 241, 0.97);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	}
	.ctd-mbasket__checkout {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		border-radius: var(--ctd-radius);
		background: var(--ctd-gold);
		font: 500 17px/1.2 'Outfit', sans-serif;
		color: var(--ctd-white) !important;
		text-decoration: none !important;
	}
	.ctd-mbasket__checkout:hover,
	.ctd-mbasket__checkout:focus-visible {
		background: var(--ctd-gold-hover);
	}
	.ctd-mbasket__checkout span:last-child {
		font-weight: 600;
	}
	.ctd-mbasket__continue {
		display: block;
		margin: 16px 0 4px;
		padding: 10px 0;
		font-size: 15px;
		color: var(--ctd-border-dark) !important;
		text-align: center;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}
	/* "What would you like to do next?" becomes one discount-code line */
	html.route-checkout-cart .cart-panels {
		margin-top: 16px !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}
	html.route-checkout-cart .cart-panels > .title {
		display: none !important;
	}
	html.route-checkout-cart .cart-panels > p {
		display: none !important;
	}
	html.route-checkout-cart .cart-panels .panel {
		margin: 0 !important;
		border: 1px solid #E3DED3 !important;
		border-radius: var(--ctd-radius);
		background: var(--ctd-white) !important;
	}
	html.route-checkout-cart .cart-panels .panel-heading,
	html.route-checkout-cart .cart-panels .panel-title {
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		border: 0 !important;
	}
	html.route-checkout-cart .cart-panels .panel-title a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 16px !important;
		font: 500 16px 'Outfit', sans-serif !important;
		color: #1B1C1A !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	html.route-checkout-cart .cart-panels .panel-body {
		padding: 0 16px 16px !important;
	}
}

/* === Eternity ring filters (Luke 29 Oct; catalog/ctd_ring_filters.php, product/category.twig #ctd-ring-filters) ===
   One row of dropdowns above the rings: 4 across on desktop, 2 on phones. Native selects (big, familiar tap
   targets on phones). With script on, choosing an option reloads the page, so the "Show rings" button hides. */
.ctd-ring-filters {
	--ctd-rf-gap: 12px;
	margin: 0 0 24px;
	padding: 16px;
	background: #F7F5F1;
	border-radius: var(--ctd-radius);
	scroll-margin-top: 140px;   /* clear of the sticky header when a filter lands here */
}
.ctd-ring-filters__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ctd-rf-gap);
}
.ctd-ring-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ctd-ring-filters__field label {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ctd-border-dark);
}
.ctd-ring-filters__field select {
	width: 100%;
	min-height: 44px;
	padding: 0 32px 0 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;   /* 16px stops phones zooming in on tap */
	color: var(--ctd-black);
	background-color: var(--ctd-white);
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	text-overflow: ellipsis;
}
.ctd-ring-filters__field select:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
}
.ctd-ring-filters__go {
	margin-top: var(--ctd-rf-gap);
	min-height: 44px;
	padding: 0 24px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--ctd-white);
	background: var(--ctd-gold);
	border: 0;
	border-radius: var(--ctd-radius);
	cursor: pointer;
}
.ctd-ring-filters__go:hover { background: var(--ctd-gold-hover); }
.ctd-ring-filters.is-live .ctd-ring-filters__go { display: none; }
/* While a filter loads in place (product/category.twig) */
.ctd-ring-filters.is-loading select { opacity: 0.6; }
.ctd-ring-filters.is-loading ~ .main-products-wrapper,
.ctd-ring-filters.is-loading ~ .ctd-hub-result { opacity: 0.5; transition: opacity 0.15s; }
.ctd-ring-filters__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--ctd-rf-gap);
}
.ctd-ring-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--ctd-black);
	background: var(--ctd-white);
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	text-decoration: none;
}
.ctd-ring-filters__chip:hover { border-color: var(--ctd-gold-hover); color: var(--ctd-black); }
.ctd-ring-filters__chip span[aria-hidden] { font-size: 20px; line-height: 1; }
.ctd-ring-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: var(--ctd-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 991px) {
	.ctd-ring-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones: one "Filter rings" button instead of four rows of dropdowns above the rings (Luke 2 Nov, easy to
   navigate). The script adds .is-live straight after the form, before paint, so nothing jumps. */
.ctd-ring-filters__toggle { display: none; }
@media (max-width: 600px) {
	.ctd-ring-filters { padding: 12px; margin-left: 0; margin-right: 0; }
	.ctd-ring-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --ctd-rf-gap: 10px; }
	.ctd-ring-filters.is-live .ctd-ring-filters__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 48px;
		padding: 0 16px;
		font-family: 'Outfit', sans-serif;
		font-size: 16px;
		font-weight: 500;
		color: var(--ctd-black);
		background: var(--ctd-white);
		border: 1px solid var(--ctd-border-dark);
		border-radius: var(--ctd-radius);
		cursor: pointer;
	}
	.ctd-ring-filters__toggle::after { content: '+'; font-size: 22px; line-height: 1; }
	.ctd-ring-filters.is-open .ctd-ring-filters__toggle::after { content: '\2212'; }
	.ctd-ring-filters.is-live:not(.is-open) .ctd-ring-filters__grid { display: none; }
	.ctd-ring-filters.is-live.is-open .ctd-ring-filters__grid { margin-top: var(--ctd-rf-gap); }
	/* The panel stays open while filters are picked (they apply in place); this closes it and goes to the rings */
	.ctd-ring-filters.is-live.is-open .ctd-ring-filters__go {
		display: block;
		position: sticky;
		bottom: 12px;
		z-index: 2;
		width: 100%;
		min-height: 48px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	}
}

/* Eternity ring pages with pages under them: the collection tiles follow the rings (product/category.twig) */
.ctd-ring-collections { margin-top: 40px; }
.ctd-ring-collections__title {
	margin: 0 0 16px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	line-height: 1.2;
}

/* Diamond Earrings mega menu (Luke 2 Nov 2026): 18ct / 9ct buttons under each gold colour tile
   (catalog/controller/journal3/categories.php ctdEarringsMenu). Outline gold, filled on hover, 44px tap height. */
.ctd-karat-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.ctd-karat-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ctd-border-dark);
	font-family: 'Outfit', sans-serif;
	font-size: 15.6px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.ctd-karat-links a:hover,
.ctd-karat-links a:focus-visible {
	background: var(--ctd-gold);
	color: var(--ctd-white);
}


/* Eternity Rings mega menu (Luke 2 Nov 2026; catalog/controller/journal3/main_menu.php ctdEternityMega).
   Uses the Bespoke Design mega menu layout (.ctd-bespoke-mega), with a row of text links under the cards. */
.main-menu-item.ctd-eternity-mega .mega-menu-content .grid-item.ctd-eternity-mega__item {
	flex-direction: column;
	align-items: stretch;
}
.ctd-eternity-mega__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(68, 68, 68, 0.15);
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}
.ctd-eternity-mega__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}
.ctd-eternity-mega__label {
	font-weight: 600;
	color: var(--ctd-black);
}
.ctd-eternity-mega__links a {
	color: var(--ctd-border-dark);
	text-decoration: none;
}
.ctd-eternity-mega__links a:hover,
.ctd-eternity-mega__links a:focus-visible {
	color: var(--ctd-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Paid extras in the product summary (Luke 3 Nov 2026): the ? icon beside e.g. "Alpha secure fittings",
   a 44px tap target that doesn't tick the box (it sits outside the label) */
.ctd-option-extras .form-check {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ctd-option-extras .ctd-option-extra-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Picture card under a paid extra (e.g. Alpha secure fittings), opened by its ? */
.ctd-option-extras .ctd-extra-help {
	max-width: 400px;
	margin: 4px 0 12px;
	padding: 12px;
	background: #FFFFFF;
	border: 1px solid #444444;
	border-radius: 6px;
}

.ctd-option-extras .ctd-extra-help[hidden] {
	display: none;
}

.ctd-option-extras .ctd-extra-help img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.ctd-option-extras .ctd-extra-help p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

/* ===== Express checkout (4 Nov 2026) =====================================================================
   Stripe's one-tap wallet buttons (Apple Pay, Google Pay, PayPal, Link) on the basket and at the top of
   checkout: js/ctd-express.js. Markup: cart_list_41.twig (.ctd-express--phone / --desk) and checkout.twig
   (.ctd-express--checkout). The block keeps its space while loading and disappears if no wallet is offered. */
.ctd-express {
	font-family: 'Outfit', sans-serif;
	color: #1B1C1A;
}
.ctd-express.is-off {
	display: none !important;
}
.ctd-express__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}
.ctd-express__buttons {
	min-height: 48px;
}
.ctd-express.is-loading .ctd-express__buttons {
	border-radius: var(--ctd-radius);
	background: #F1EEE8;
}
.ctd-express.is-busy .ctd-express__buttons {
	opacity: .6;
	pointer-events: none;
}
.ctd-express__message {
	display: none;
	margin-top: 10px;
	padding: 10px 14px;
	border: 1px solid #B42318;
	border-radius: var(--ctd-radius);
	color: #B42318;
	font-size: 16px;
	line-height: 1.5;
}
.ctd-express__message.is-visible {
	display: block;
}
.ctd-express__terms {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctd-border-dark);
}
.ctd-express__terms:empty {
	display: none;
}
.ctd-express__terms a {
	color: inherit;
	text-decoration: underline;
}
/* Checkout: full width above the form, with "or enter your details" under it */
.ctd-express--checkout {
	max-width: none;
	margin: 0 0 24px;
}
.ctd-express__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0 0;
	font-size: 14px;
	color: #777777;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.ctd-express__or::before,
.ctd-express__or::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #E3DED3;
}
/* Basket, desktop: full width above the Continue / Checkout buttons */
.ctd-express--desk {
	margin: 16px 0;
}
/* Basket, phones: under the summary, inside the flattened phone basket (see "Phone basket") */
@media (max-width: 767px) {
	.ctd-express--desk {
		display: none !important;
	}
	/* after the summary (3), before the reassurance list and continue shopping */
	.ctd-express--phone {
		order: 4;
		margin: 16px 0 0;
	}
	.ctd-mbasket__trust { order: 5; }
	.ctd-mbasket__continue { order: 6; }
}

/* ===== Toi et moi pair search (Luke 3 Nov) — product/product_diamond_search.twig =====
   Stone 2's colour row matches the stone 1 swatches above it; the pair cards are white CARD 2-style cards. */
.ctd-toi-pos-label {
	margin: 12px 0 6px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.ctd-toi-colours {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ctd-toi-colour {
	flex: 0 0 60px;
	width: 60px;
	min-height: 44px;
	padding: 4px 0;
	border: 2px solid transparent;
	border-radius: var(--ctd-radius);
	background: transparent;
	text-align: center;
	cursor: pointer;
}
.ctd-toi-colour img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.ctd-toi-colour span {
	display: block;
	margin-top: 3px;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.1;
	color: #555;
}
.ctd-toi-colour.active {
	background: #f0ece0;
	border-color: var(--ctd-gold);
}
.ctd-toi-colour:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
}
.ctd-toi-intro,
.ctd-toi-results-intro {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
}
.ctd-toi-results {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 0 24px;
}
.ctd-toi-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ctd-toi-results-title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	color: var(--ctd-gold);
}
.ctd-toi-back {
	min-height: 44px;
	border-radius: var(--ctd-radius);
}
.ctd-toi-type {
	margin-top: 28px;
}
.ctd-toi-type-title {
	margin: 0 0 14px;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
}
.ctd-toi-empty {
	margin: 0 0 12px;
	font-size: 16px;
	text-align: center;   /* under its centred heading, like the cards */
}
/* Good / Better / Best side by side and centred, however many there are (Luke 4 Nov) */
.ctd-toi-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.ctd-toi-grid > .ctd-toi-card {
	flex: 0 1 340px;
}
.ctd-toi-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: var(--ctd-white);
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.ctd-toi-card .ctd-toi-card-head {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ctd-card-border);
}
.ctd-toi-card .ctd-toi-card-label {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ctd-gold);
}
.ctd-toi-card .ctd-toi-card-sub {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ctd-border-dark);
}
.ctd-toi-card-stones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ctd-toi-stone {
	margin: 0;
	min-width: 0;
	text-align: left;
}
.ctd-toi-stone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--ctd-radius);
}
.ctd-toi-stone figcaption {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.45;
}
.ctd-toi-stone figcaption strong,
.ctd-toi-stone figcaption span {
	display: block;
}
.ctd-toi-stone figcaption strong {
	margin-bottom: 2px;
	font-size: 16px;
}
.ctd-toi-stone figcaption span {
	color: var(--ctd-border-dark);
}
.ctd-toi-card-price {
	margin: 16px 0 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ctd-card-border);
	text-align: center;
}
.ctd-toi-card-price strong {
	display: block;
	font-size: 26px;
	line-height: 1.2;
}
.ctd-toi-card-price span {
	font-size: 14px;
	color: var(--ctd-border-dark);
}
.ctd-toi-choose {
	width: 100%;
	min-height: 44px;
	margin-top: auto;
	border-radius: var(--ctd-radius);
	color: var(--ctd-white);
}
.ctd-toi-choose:hover,
.ctd-toi-choose:focus {
	background: var(--ctd-gold-hover);
}
.ctd-toi-certs {
	font-size: 16px;
}
.ctd-toi-swipe {
	display: none;
}
/* Chosen pair: each stone in its own column, picture, video button, then its details (Luke 4 Nov) */
.ctd-toi-sel-title {
	margin: 0 0 12px;
}
.ctd-toi-sel-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ctd-toi-sel-stone {
	min-width: 0;
}
.ctd-toi-sel-photo {
	margin: 0;
}
.ctd-toi-sel-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--ctd-radius);
	border: 1px solid var(--ctd-card-border);
}
.ctd-toi-sel-video {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
}
.ctd-toi-sel-video:hover,
.ctd-toi-sel-video:focus {
	background: var(--ctd-gold-hover);
	color: var(--ctd-white);
}
.ctd-toi-sel-novideo {
	visibility: hidden;
}
.ctd-toi-sel-name {
	margin: 12px 0 4px;
	font-size: 17px;
	font-weight: 600;
}
.ctd-toi-sel-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}
.ctd-toi-sel-specs li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--ctd-card-border);
	text-align: right;
	overflow-wrap: anywhere;
}
.ctd-toi-sel-specs li span {
	flex: 0 0 auto;
	text-align: left;
	color: var(--ctd-border-dark);
}
.ctd-toi-selected .ctd-total-price {
	margin-top: 16px;
}
/* Phones: half a screen per stone, so each detail's label sits above its value (values wrapped and the two
   columns' rows went out of line, Luke 4 Nov) */
@media (max-width: 768px) {
	.ctd-toi-sel-specs {
		font-size: 14px;
	}
	.ctd-toi-sel-specs li {
		display: block;
		min-height: 46px;
		text-align: left;
	}
	.ctd-toi-sel-specs li span {
		display: block;
		font-size: 12px;
	}
}
@media (max-width: 768px) {
	.ctd-toi-swipe {
		display: block;
	}
}
@media (max-width: 768px) {
	.ctd-toi-colour {
		flex-basis: 43px;
		width: 43px;
		padding: 3px 0;
	}
	.ctd-toi-colour img {
		width: 38px;
		height: 38px;
	}
	/* Phones (Luke 4 Nov): Good / Better / Best side by side as a swipe row, the next card peeking in, so the
	   three are compared without scrolling down past six full-height cards */
	.ctd-toi-grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin: 0 -15px;
		padding: 2px 15px 8px;
		scrollbar-width: none;
	}
	.ctd-toi-grid::-webkit-scrollbar {
		display: none;
	}
	.ctd-toi-grid {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.ctd-toi-grid > .ctd-toi-card {
		flex: 0 0 82%;
	}
	.ctd-toi-card {
		scroll-snap-align: center;
		padding: 12px;
	}
	.ctd-toi-card-label {
		margin-bottom: 6px;
		font-size: 22px;
	}
	.ctd-toi-card-price {
		margin: 10px 0;
	}
	.ctd-toi-swipe {
		margin: 0 0 8px;
		font-size: 16px;
		color: var(--ctd-border-dark);
	}
	.ctd-toi-choose {
		min-height: 48px;
	}
}

/* === Coloured stones (Luke 4 Nov 2026) =============================================
   /coloured-stones/ search and /coloured-stones/stone/ (product/gemstone_*.twig, js/ctd-gemstones.js).
   Cards follow CATEGORY CARD 2 (white, 6px radius, #444 border, square photo); buttons are the gold button. */
.ctd-gem-page {
	--gem-gap: 24px;
}
.ctd-gem-head h1 {
	font-family: 'Cormorant Garamond', serif;
	margin: 8px 0 8px;
}
.ctd-gem-head p {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.7;
}
.ctd-gem-types {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 0 16px;
	scrollbar-width: none;
}
.ctd-gem-types::-webkit-scrollbar {
	display: none;
}
.ctd-gem-type {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 92px;
	min-height: 44px;
	padding: 10px 4px 8px;
	border: 1px solid transparent;
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: #1B1C1A;
	text-align: center;
}
.ctd-gem-type__icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
}
.ctd-gem-type--all .ctd-gem-type__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ctd-gold);
	border-radius: 50%;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ctd-gold);
}
.ctd-gem-type__name {
	font-size: 14px;
	line-height: 1.25;
}
.ctd-gem-type__count {
	color: #777;
	font-size: 12px;
	line-height: 1;
}
.ctd-gem-type.is-on,
.ctd-gem-type:hover {
	border-color: var(--ctd-gold);
	background: #F7F5F1;
	color: #1B1C1A;
}
.ctd-gem-filters {
	display: grid;
	gap: 16px;
	padding: 20px;
	margin-bottom: var(--gem-gap);
	background: #F7F5F1;
	border-radius: var(--ctd-radius);
}
.ctd-gem-filters fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.ctd-gem-filters legend {
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 8px;
	border: 0;
}
.ctd-gem-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ctd-gem-chip {
	position: relative;
	margin: 0;
	font-weight: 400;
}
.ctd-gem-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}
.ctd-gem-chip span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	font-size: 16px;
}
.ctd-gem-chip input:checked + span {
	border-color: var(--ctd-gold);
	background: var(--ctd-gold);
	color: var(--ctd-white);
}
.ctd-gem-chip--shape span {
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 84px;
	padding: 8px 4px;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
}
.ctd-gem-chip--shape img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.ctd-gem-chip--shape input:checked + span {
	background: #F7F5F1;
	color: #1B1C1A;
	border-color: var(--ctd-gold);
	box-shadow: inset 0 0 0 1px var(--ctd-gold);
}
.ctd-gem-chip input:focus-visible + span {
	outline: 2px solid #1B1C1A;
	outline-offset: 2px;
}
/* Filters laid out like the diamond search card (Luke 5 Nov 2026: "line these up, centre all, match our diamond
   search pages"): white card, each group centred under a centred label, equal shape tiles with the gold tick. */
.ctd-gem-page .ctd-gem-filters {
	gap: 0;
	padding: 0;
	background: var(--ctd-white);
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	overflow: hidden;
}
.ctd-gem-page .ctd-gem-filters > fieldset,
.ctd-gem-page .ctd-gem-filters > .ctd-gem-row {
	padding: 24px;
	border-bottom: 1px solid #E5E5E5;
}
.ctd-gem-page .ctd-gem-filters > :last-child {
	border-bottom: 0;
}
/* a legend sits on the fieldset's top edge, outside its padding: it carries the top space itself */
.ctd-gem-page .ctd-gem-filters > fieldset {
	padding-top: 14px;
}
.ctd-gem-page .ctd-gem-filters legend {
	float: none;
	width: 100%;
	margin: 0 !important;
	padding: 22px 0 0;
	text-align: center;
	color: #4A4A4A;
}
.ctd-gem-page .ctd-gem-chips,
.ctd-gem-page .ctd-gem-ranges,
.ctd-gem-page .ctd-gem-row {
	justify-content: center;
}
.ctd-gem-page .ctd-gem-chips {
	gap: 10px;
}
.ctd-gem-page .ctd-gem-chip--shape span {
	gap: 8px;
	width: 92px;
	min-height: 92px;
	padding: 12px 6px;
	border: 2px solid #E5E5E5;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #4A4A4A;
	white-space: nowrap;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ctd-gem-page .ctd-gem-chip--shape img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	object-position: center;
}
.ctd-gem-page .ctd-gem-chip--shape:hover span {
	border-color: var(--ctd-gold);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ctd-gem-page .ctd-gem-chip--shape input:checked + span {
	position: relative;
	background: rgba(194, 165, 89, 0.08);
	color: #1B1C1A;
	border-color: var(--ctd-gold);
	box-shadow: 0 4px 12px rgba(194, 165, 89, 0.2);
}
.ctd-gem-page .ctd-gem-chip--shape input:checked + span::after {
	content: '\2713';
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-size: 10px;
}
.ctd-gem-page .ctd-gem-chip--colour span {
	min-width: 104px;
	justify-content: center;
	border-color: #E5E5E5;
	border-width: 2px;
	border-radius: 10px;
}
.ctd-gem-page .ctd-gem-chip--colour input:checked + span {
	border-color: var(--ctd-gold);
	background: rgba(194, 165, 89, 0.08);
	color: #1B1C1A;
}
.ctd-gem-page .ctd-gem-types {
	justify-content: safe center;
}
/* no link underlines inside the gem tiles and stone cards (the theme dotted every word) */
.ctd-gem-page .ctd-gem-type,
.ctd-gem-page .ctd-gem-type *,
.ctd-gem-page .ctd-gem-card a,
.ctd-gem-page .ctd-gem-card a * {
	text-decoration: none !important;
	border-bottom: 0;
}
.ctd-gem-more-btn {
	flex: 1 1 100%;
	min-height: 44px;
	background: none;
	border: 0;
	color: #1B1C1A;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ctd-gem-more-btn[hidden],
.ctd-gem-filters.is-collapsed > fieldset:not(:first-of-type) {
	display: none !important;   /* .ctd-gem-ranges is display: flex !important */
}
.ctd-gem-sw {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
}
.ctd-gem-sw--blue { background: #1F4FA0; }
.ctd-gem-sw--pink { background: #E58FB0; }
.ctd-gem-sw--red { background: #B0122B; }
.ctd-gem-sw--green { background: #2E8B57; }
.ctd-gem-sw--yellow { background: #E8C53A; }
.ctd-gem-sw--orange { background: #E37A2C; }
.ctd-gem-sw--purple { background: #7B4BA0; }
.ctd-gem-sw--white { background: #F2F2F2; }
.ctd-gem-sw--black { background: #222222; }
.ctd-gem-ranges {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 16px;
}
.ctd-gem-ranges legend {
	width: 100%;
}
.ctd-gem-ranges label,
.ctd-gem-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	font-size: 16px;
}
.ctd-gem-ranges input,
.ctd-gem-sort select {
	min-height: 44px;
	width: 110px;
	padding: 0 10px;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	font-size: 16px;
	background: var(--ctd-white);
}
.ctd-gem-sort select {
	width: auto;
}
.ctd-gem-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
.ctd-gem-btn,
.ctd-gem-page .btn.ctd-gem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	background: var(--ctd-gold);
	color: var(--ctd-white);
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
}
.ctd-gem-btn:hover,
.ctd-gem-page .btn.ctd-gem-btn:hover {
	background: var(--ctd-gold-hover);
	border-color: var(--ctd-gold-hover);
	color: var(--ctd-white);
}
/* Line buttons (Set it in a ring, Watch the video, Previous/Next). 5 Nov 2026: Journal's own .btn text colour
   (white) was winning, so the words were white on white. !important here only for the colour. */
.ctd-gem-page .btn.ctd-gem-btn--line,
.ctd-gem-page .btn.ctd-gem-btn--line:visited,
.ctd-gem-page .btn.ctd-gem-btn--line:focus {
	background: var(--ctd-white);
	color: #1B1C1A !important;
	-webkit-text-fill-color: #1B1C1A;
	border-color: var(--ctd-border-dark);
}
.ctd-gem-page .btn.ctd-gem-btn--line:hover {
	background: #F7F5F1;
	color: #1B1C1A !important;
	-webkit-text-fill-color: #1B1C1A;
	border-color: var(--ctd-gold);
}
.ctd-gem-filters.is-live .ctd-gem-apply {
	margin-left: auto;
}
#ctd-gem-results.is-loading {
	opacity: 0.5;
	transition: opacity 0.2s;
}
.ctd-gem-count {
	font-size: 16px;
	margin: 0 0 12px;
}
.ctd-gem-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--gem-gap);
}
.ctd-gem-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px;
	background: var(--ctd-white);
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	color: #1B1C1A;
}
.ctd-gem-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ctd-radius);
}
.ctd-gem-card__name {
	margin-top: 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
}
.ctd-gem-card__meta {
	margin-top: 4px;
	color: #444444;
	font-size: 15px;
	line-height: 1.5;
}
.ctd-gem-card__price {
	margin: 8px 0 12px;
	font-weight: 500;
	font-size: 18px;
}
.ctd-gem-card .ctd-gem-btn {
	margin-top: auto;
	width: 100%;
}
.ctd-gem-pages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: var(--gem-gap) 0;
	font-size: 16px;
}
.ctd-gem-guide {
	max-width: 860px;
	margin: 40px 0 0;
}
.ctd-gem-guide h2 {
	font-family: 'Cormorant Garamond', serif;
}
.ctd-gem-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 0;
	list-style: none;
	font-size: 16px;
}
.ctd-gem-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.ctd-gem-faq details {
	border-bottom: 1px solid #DDDDDD;
	padding: 4px 0;
}
.ctd-gem-faq summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.ctd-gem-faq summary h3 {
	display: inline;
	margin: 0;
	font-size: 18px;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
}
.ctd-gem-stone {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	margin: 16px 0 40px;
}
.ctd-gem-stone__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ctd-radius);
	border: 1px solid #DDDDDD;
}
.ctd-gem-note {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: #F7F5F1;
	border-left: 3px solid var(--ctd-gold);
	border-radius: var(--ctd-radius);
	font-size: 16px;
	line-height: 1.6;
}
/* Add jewellery on the stone page (5 Nov 2026): style cards, metal chips, then the ring cards from
   product/diamond jewelleryAjax (the diamond pages' .filter-product cards) */
.ctd-gem-rings {
	margin: 0 0 40px;
	padding: 24px;
	background: var(--ctd-white);
	border: 1px solid #DDDDDD;
	border-radius: var(--ctd-radius);
	scroll-margin-top: 140px;
}
.ctd-gem-rings h2 {
	font-family: 'Cormorant Garamond', serif;
	margin: 0 0 8px;
}
.ctd-gem-rings > p {
	font-size: 16px;
	line-height: 1.7;
}
.ctd-gem-rings__types,
.ctd-gem-rings__metals {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.ctd-gem-pick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 14px;
	background: var(--ctd-white);
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	color: #1B1C1A;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	cursor: pointer;
}
.ctd-gem-pick img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.ctd-gem-pick.is-on,
.ctd-gem-pick:hover {
	border-color: var(--ctd-gold);
	box-shadow: inset 0 0 0 1px var(--ctd-gold);
}
.ctd-gem-pick:focus-visible {
	outline: 2px solid var(--ctd-gold);
	outline-offset: 2px;
}
.ctd-gem-rings__msg {
	min-height: 1.5em;
	font-size: 16px;
	color: #444444;
}
.ctd-gem-rings__grid.is-loading {
	opacity: 0.5;
	transition: opacity 0.2s;
}
@media (max-width: 767px) {
	.ctd-gem-rings {
		padding: 16px;
	}
	.ctd-gem-rings__types {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ctd-gem-rings__types::-webkit-scrollbar {
		display: none;
	}
	.ctd-gem-pick--type {
		flex: 0 0 auto;
	}
}
.ctd-gem-similar {
	margin: 8px 0 0;
}
.ctd-gem-similar h2 {
	font-family: 'Cormorant Garamond', serif;
	margin: 0 0 16px;
}
.ctd-gem-similar .ctd-gem-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
	.ctd-gem-similar .ctd-gem-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ctd-gem-stone__media .ctd-gem-btn {
	margin-top: 12px;
	width: 100%;
}
.ctd-gem-stone__info h1 {
	font-family: 'Cormorant Garamond', serif;
	margin-top: 0;
}
.ctd-gem-stone__price {
	font-size: 28px;
	font-weight: 500;
	margin: 8px 0 16px;
}
.ctd-gem-stone__price small {
	font-size: 15px;
	color: #444444;
	font-weight: 400;
}
.ctd-gem-facts {
	margin: 0 0 20px;
	border-top: 1px solid #DDDDDD;
}
.ctd-gem-facts div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid #DDDDDD;
	font-size: 16px;
}
.ctd-gem-facts dt {
	font-weight: 500;
}
.ctd-gem-facts dd {
	margin: 0;
	text-align: right;
}
.ctd-gem-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ctd-gem-msg {
	min-height: 1em;
	margin: 8px 0;
	color: #B0122B;
	font-size: 16px;
}
.ctd-gem-points {
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.7;
}
.ctd-gem-more {
	font-size: 16px;
}
.ctd-gem-video {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
}
.ctd-gem-video iframe {
	width: min(90vw, 90vh, 720px);
	height: min(90vw, 90vh, 720px);
	border: 0;
	border-radius: var(--ctd-radius);
	background: #000;
}
.ctd-gem-video__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--ctd-white);
	font-size: 28px;
	line-height: 1;
}
@media (max-width: 767px) {
	.ctd-gem-filters {
		padding: 16px;
	}
	/* phones: shapes and colours wrap, centred, like the diamond search (5 Nov 2026; was a sideways scroll) */
	.ctd-gem-page .ctd-gem-filters > fieldset,
	.ctd-gem-page .ctd-gem-filters > .ctd-gem-row {
		padding: 16px 12px;
	}
	.ctd-gem-page .ctd-gem-chips {
		gap: 6px;
	}
	/* five shapes a row, as on the diamond search */
	.ctd-gem-page .ctd-gem-chip--shape {
		flex: 0 0 calc(20% - 4.8px);
		min-width: 0;
	}
	.ctd-gem-page .ctd-gem-chip--shape span {
		width: 100%;
		min-height: 68px;
		padding: 8px 0;
		gap: 4px;
		font-size: 11px;
	}
	.ctd-gem-page .ctd-gem-filters > fieldset {
		padding-top: 10px;
	}
	.ctd-gem-page .ctd-gem-filters legend {
		padding-top: 16px;
	}
	/* carat and price: label above its box, two boxes a row */
	.ctd-gem-page .ctd-gem-ranges label {
		flex: 1 1 calc(50% - 8px);
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		font-size: 15px;
	}
	.ctd-gem-page .ctd-gem-chip--shape img {
		width: 32px;
		height: 32px;
	}
	.ctd-gem-page .ctd-gem-chip--colour {
		flex: 0 0 calc(33.333% - 6px);
	}
	.ctd-gem-page .ctd-gem-chip--colour span {
		width: 100%;
		min-width: 0;
		padding: 0 6px;
		font-size: 15px;
	}
	.ctd-gem-ranges label {
		flex: 1 1 40%;
	}
	.ctd-gem-ranges input {
		width: 100%;
	}
	.ctd-gem-apply {
		width: 100%;
	}
	/* two stones a row on phones (5 Nov 2026: one a row made 24 stones about 30 screens long) */
	.ctd-gem-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.ctd-gem-card a {
		padding: 8px;
	}
	.ctd-gem-card__name {
		margin-top: 8px;
		font-size: 17px;
	}
	.ctd-gem-card__meta {
		font-size: 13px;
	}
	.ctd-gem-card__price {
		margin: 4px 0 8px;
		font-size: 16px;
	}
	.ctd-gem-card .ctd-gem-btn {
		padding: 0 8px;
		font-size: 15px;
	}
	.ctd-gem-stone {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ctd-gem-actions {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Wedding Rings mega menu (module 1115): "Collections" title 20% larger (Clive, 5 Nov 2026).
   Journal sets it at 14px; 14 x 1.2 = 16.8px.
   --------------------------------------------------------------------------- */
:root {
	--ctd-wedding-menu-title-size: 16.8px;
}

html body .module-categories-1115 > h3.title.module-title {
	font-size: var(--ctd-wedding-menu-title-size);
}

/* ---------------------------------------------------------------------------
   Product cards across (Clive, 5 Nov 2026): 4 across on every category page; plain polished wedding ring pages
   3 across on desktop. catalog/controller/product/category.php adds ctd-grid-3 to <html> on the plain polished
   pages only (address or ancestor with "plain-polish"). Other pages keep Journal's 4 across. Tablet and phone
   are unchanged. Journal sets the columns on #product-category, so the rule includes that id to take precedence.
   --------------------------------------------------------------------------- */
:root {
	--ctd-grid-3-columns: 3;
}

@media (min-width: 1025px) {
	html.ctd-grid-3 #product-category .main-products.product-grid {
		grid-template-columns: repeat(var(--ctd-grid-3-columns), minmax(0, 1fr));
	}
	/* CATEGORY GRID 3 (Clive 5 Nov 2026): on the same pages the category tiles (Journal's sub-category module, e.g.
	   module 1123 on /wedding-rings/rose-gold/plain-polish: Court, Flat-Court, Soft-Court ...) are 3 across too.
	   Journal sets each tile's width (25% on desktop) per module, hence !important. Tablet and phone unchanged. */
	html.ctd-grid-3 #content .module-categories .ipr-grid > .category-layout:not(.swiper-slide) {
		width: calc(100% / var(--ctd-grid-3-columns) - 0.01px) !important;
	}
}


/* ---------------------------------------------------------------------------
   Product cards and category tiles: the whole name shows (Clive, 5 Nov 2026). Journal's settings cut names to
   2 lines with "..." (.main-products-style .product-thumb .name a, -webkit-line-clamp: 2, in its generated CSS;
   the categories modules set the same clamp), so "BUDGET / 2.0mm. Wide / Plain Polish Soft-Court Wedding Ring /
   100% Recycled, Hallmarked 9ct. White Gold" showed as "2.0mm. Wide...". Every line now shows, on every listing,
   carousel, category module and menu tile. !important: Journal's generated rules are more specific.
   --------------------------------------------------------------------------- */
.product-thumb .name a,
.category-thumb .name a {
	display: block !important;
	-webkit-line-clamp: unset !important;
	line-clamp: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
	max-height: none !important;
	height: auto !important;
/* Header search: a stone found by Diamond ID / CTD-G reference (Ctd\StoneSearch, #1549). Its photo is the 400px
   /stone-img/ or /gem-img/ tile, not a resized product thumb, so size it like the product results (Journal's
   autosuggest image, 50 x 50). */
.search-result > a img[src^="/stone-img/"],
.search-result > a img[src^="/gem-img/"] {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: var(--ctd-radius);
	object-fit: cover;
/* Search by ID or certificate number (product/ctd_diamond_id_find.twig, Luke 5 Nov): under Fast Search /
   Advanced Search on the diamond searches, one row exactly as wide as the two buttons (two --ctd-search-col
   plus their 16px gap): the field lines up under Fast Search, the button under Advanced Search, both 48px
   with the same 1px border, radius and upper-case type as the buttons above. Hidden whenever those buttons are. */
#product-diamond-search .ctd-search-row .ctd-id-find {
	width: calc(var(--ctd-search-col) * 2 + 16px);
	max-width: 100%;
	margin: 4px 0 0;
	font-family: 'Outfit', sans-serif;
}
#product-diamond-search .ctd-id-find__label {
	display: block;
	margin: 0 0 8px;
	color: var(--ds-text2);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}
#product-diamond-search .ctd-id-find__row {
	display: flex;
	gap: 16px;
}
#product-diamond-search .ctd-id-find__input {
	flex: 0 0 var(--ctd-search-col);
	box-sizing: border-box;
	width: var(--ctd-search-col);
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ds-text);
	font-family: inherit;
	font-size: 16px;
	text-align: center;
	letter-spacing: 0.5px;
}
#product-diamond-search .ctd-id-find__input::placeholder {
	color: var(--ds-muted);
	letter-spacing: 0;
}
#product-diamond-search .ctd-id-find__input:focus {
	border-color: var(--ds-gold);
	outline: 2px solid var(--ds-gold);
	outline-offset: 0;
}
#product-diamond-search .ctd-id-find__btn {
	display: inline-flex;
	flex: 0 0 var(--ctd-search-col);
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: var(--ctd-search-col);
	height: 48px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--ctd-border-dark);
	border-radius: var(--ctd-radius);
	background: var(--ctd-white);
	color: var(--ds-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
#product-diamond-search .ctd-id-find__btn:hover,
#product-diamond-search .ctd-id-find__btn:focus-visible {
	border-color: var(--ds-gold);
	background: var(--ds-gold);
	color: var(--ctd-white);
}
#product-diamond-search .ctd-id-find__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}
#product-diamond-search .ctd-id-find__msg {
	margin: 8px 0 0;
	color: var(--ds-text2);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}
#product-diamond-search .ctd-id-find__msg:empty {
	display: none;
}
html.route-product-coloured #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .ctd-id-find,
html.route-product-naturallabdynamic #product-diamond-search:not(.ctd-rs-open) .ctd-search-row .ctd-id-find,
#product-diamond-search.ctd-rs-collapsed .ctd-search-row .ctd-id-find,
#product-diamond-search #searchoptioncontainer[style*="none"] ~ .ctd-search-row .ctd-id-find {
	display: none;
}
/* Phone: full width, field over button, like Fast Search over Advanced Search (680px). */
@media (max-width: 680px) {
	#product-diamond-search .ctd-search-row .ctd-id-find {
		width: 100%;
	}
	#product-diamond-search .ctd-id-find__row {
		flex-direction: column;
		gap: 12px;
	}
	#product-diamond-search .ctd-id-find__input,
	#product-diamond-search .ctd-id-find__btn {
		flex: 0 0 auto;
		width: 100%;
	}
}