/* CM Jewelry theme — only what theme.json cannot express. */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Header, main and footer butt up against each other: no global block gap
   between the top-level site sections. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Header ---------- */

/* Sticky header, like live. WordPress wraps the template part in its own
   <header class="wp-block-template-part">; the sticky rule must sit on that wrapper,
   because a sticky element nested in a same-height parent has nowhere to stick. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Reserve the full-size header's height (set by nav.js) so shrinking the bar while
	   pinned never changes the page's layout: no jump, no "ceiling" on the way back up.
	   The wrapper is click-through below the bar; the bar itself stays clickable. */
	min-height: var(--cm-header-h, auto);
	pointer-events: none;
}

.wp-site-blocks > header > * {
	pointer-events: auto;
}

/* --cm-scroll (0 at the top → 1 after 160px, set by nav.js on this wrapper) drives every
   pinned-header change continuously, so the header follows the scroll position instead
   of snapping between two states. The reserved space fades from mist (so nothing white
   shows under the bar at the top) to transparent as the bar shrinks. */
.wp-site-blocks > header {
	--cm-scroll: 0;
	background-color: rgba(240, 245, 250, calc(1 - var(--cm-scroll)));
}

.admin-bar .wp-site-blocks > header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

/* Bar: mist at the top, blending to white at 85% with a blur and soft shadow as the page
   scrolls, in proportion to --cm-scroll. !important beats the preset colour class. */
.cm-header .cm-header__bar.has-mist-background-color {
	background-color: color-mix(in srgb, rgba(255, 255, 255, 0.85) calc(var(--cm-scroll) * 100%), #F0F5FA) !important;
	-webkit-backdrop-filter: blur(calc(var(--cm-scroll) * 10px));
	backdrop-filter: blur(calc(var(--cm-scroll) * 10px));
	box-shadow: 0 1px 0 rgba(16, 20, 60, calc(0.08 * var(--cm-scroll))), 0 4px 16px rgba(16, 20, 60, calc(0.06 * var(--cm-scroll)));
	padding-top: calc(0.75rem - 0.35rem * var(--cm-scroll)) !important;
	padding-bottom: calc(0.75rem - 0.35rem * var(--cm-scroll)) !important;
}


/* No block gap between the announcement bar and the header bar. */
.cm-header > * + * {
	margin-block-start: 0;
}

/* No hairline under the bar at rest: on Home the hero is the same mist colour and a
   shadow reads as a grey rule (live has none). The scrolled state adds its own shadow. */
.cm-header__bar {
	box-shadow: none;
}

/* Header spans the viewport (minus root padding), like the original. */
.cm-header__bar > .cm-header__row {
	max-width: none;
	gap: var(--wp--preset--spacing--40);
	min-height: 64px;
}

@media (min-width: 1025px) {
	.cm-header__bar {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

@media (min-width: 1025px) {
	.cm-header__bar,
	.cm-footer {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

/* WooCommerce's "has-button-styles" body class paints every <button> with the
   theme button colours. Our icon buttons must stay plain. */
.cm-header button.cm-menu__toggle,
.cm-header button.cm-nav-toggle,
.cm-header .wc-block-mini-cart button.wc-block-mini-cart__button {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
	min-height: 0;
	line-height: 1;
}

.cm-header .wc-block-mini-cart button.wc-block-mini-cart__button:hover,
.cm-header button.cm-nav-toggle:hover,
.cm-header button.cm-menu__toggle:hover {
	background: transparent;
	color: var(--wp--preset--color--indigo);
}

/* Logo scales with the window like the old site's (60% of a fluid column: ~162px at
   1920, ~104px at 1280, ~91px at 900). Floor/ceiling keep it sane on tiny and huge
   screens; !important beats the site-logo block's inline width. */
.cm-header__logo img {
	--cm-logo-full: clamp(90px, 8.4vw, 220px);
	--cm-logo-compact: clamp(70px, 4.5vw, 110px);
	display: block;
	height: auto;
	/* Interpolated between the full and compact sizes by scroll position. */
	width: calc(var(--cm-logo-full) + (var(--cm-logo-compact) - var(--cm-logo-full)) * var(--cm-scroll)) !important;
	max-width: none;
}

.cm-header__tools {
	gap: var(--wp--preset--spacing--30);
}

/* Logo left; menu and cart cluster on the right. */
.cm-header__row > .cm-menu--primary {
	margin-left: auto;
	margin-right: var(--wp--preset--spacing--30);
}

/* Primary menu */

.cm-menu__list,
.cm-menu__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-menu--primary .cm-menu__list {
	display: flex;
	align-items: center;
	gap: 0;
}

.cm-menu--primary .cm-menu__list > li {
	position: relative;
	display: flex;
	align-items: center;
}

/* Matches the old Elementor nav: Jost 16/500, black, 10px 14px, indigo on hover/current. */
.cm-menu--primary .cm-menu__list a {
	display: inline-block;
	padding: 10px 14px;
	color: #000000;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.cm-menu--primary .cm-menu__list a:hover,
.cm-menu--primary .cm-menu__list a:focus-visible,
.cm-menu--primary .current-menu-item > a,
.cm-menu--primary .current-menu-ancestor > a {
	color: var(--wp--preset--color--indigo);
}

.cm-menu__toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.25rem;
	margin-left: -0.9rem;
	margin-right: 0.35rem;
	cursor: pointer;
	color: #000000;
	line-height: 0;
}

.cm-menu--primary li:hover > .cm-menu__toggle,
.cm-menu--primary .current-menu-ancestor > .cm-menu__toggle {
	color: var(--wp--preset--color--indigo);
}

/* Solid triangle caret, like the old menu. */
.cm-menu__toggle span {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.2s ease;
}

.cm-menu__toggle[aria-expanded="true"] span {
	transform: rotate(180deg);
}

/* Dropdown (desktop) */

.cm-menu--primary .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 0.5rem 0;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 30px rgba(16, 20, 60, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 20;
}

.cm-menu--primary .sub-menu a {
	display: block;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

.cm-menu--primary .sub-menu li:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 90, 0.13);
}

.cm-menu--primary .sub-menu a:hover,
.cm-menu--primary .sub-menu a:focus-visible,
.cm-menu--primary .sub-menu .current-menu-item > a {
	background: var(--wp--preset--color--cloud);
	color: var(--wp--preset--color--indigo);
}

.cm-menu--primary li:hover > .sub-menu,
.cm-menu--primary li:focus-within > .sub-menu,
.cm-menu--primary li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Mini cart */

.cm-header__tools .wc-block-mini-cart__button {
	padding: 0;
}

.cm-header__tools .wc-block-mini-cart__icon {
	color: var(--wp--preset--color--navy);
}

.cm-header__tools .wc-block-mini-cart__button {
	position: relative;
}

.cm-header__tools .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: inline-flex;
}

/* Count badge on the bag's top-right corner, like the old header. Woo's block
   CSS sets its own colours and a translateY, hence the !important overrides. */
.cm-header .wc-block-mini-cart .wc-block-mini-cart__badge {
	position: absolute !important;
	top: -6px !important;
	right: -8px !important;
	transform: none !important;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Hamburger (mobile only) */

.cm-nav-toggle {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--wp--preset--color--navy);
}

.cm-nav-toggle__bars,
.cm-nav-toggle__bars::before,
.cm-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cm-nav-toggle__bars {
	position: relative;
}

.cm-nav-toggle__bars::before,
.cm-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.cm-nav-toggle__bars::before {
	top: -6px;
}

.cm-nav-toggle__bars::after {
	top: 6px;
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__bars {
	background: transparent;
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.cm-nav-toggle[aria-expanded="true"] .cm-nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.cm-nav-toggle {
		display: inline-flex;
	}

	.cm-header__row {
		flex-wrap: wrap;
		min-height: 56px;
	}

	.cm-header__logo img {
		--cm-logo-full: 96px; /* old site: ~97px on phones */
		--cm-logo-compact: 76px;
	}

	.cm-header__bar {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.cm-header__tools {
		gap: var(--wp--preset--spacing--40);
	}

	.cm-menu--primary {
		order: 10;
		flex-basis: 100%;
		display: none;
		padding: 0.5rem 0 1rem;
	}

	.cm-menu--primary.is-open {
		display: block;
	}

	.cm-menu--primary .cm-menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cm-menu--primary .cm-menu__list > li {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid rgba(16, 20, 60, 0.08);
	}

	.cm-menu--primary .cm-menu__list a {
		padding: 0.75rem 0.25rem;
		font-size: 16px;
	}

	.cm-menu__toggle {
		margin-left: 0;
		padding: 0.75rem;
	}

	.cm-menu--primary .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		flex-basis: 100%;
		padding: 0 0 0.5rem 1rem;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.cm-menu--primary li.is-open > .sub-menu {
		display: block;
	}

	.cm-menu--primary li:hover > .sub-menu:not(.is-open),
	.cm-menu--primary li:focus-within > .sub-menu {
		display: none;
	}

	.cm-menu--primary li.is-open > .sub-menu {
		display: block;
	}
}

/* ---------- Elementor pages (migration window) ----------
   Let Elementor's own sections control width; don't box them at contentSize. */

.elementor-page .cm-main > .wp-block-post-content,
.elementor-page .cm-main > .wp-block-post-content > .elementor {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Cover images: make sure the picture fills the banner even before JS runs. */
.wp-block-cover .wp-block-cover__image-background {
	object-fit: cover;
}

/* ---------- Page building blocks (used by rebuilt pages) ---------- */

/* Full-bleed banner with a title, e.g. About / Contact / Sell Now */
/* Page banners (Sell Now, Contact, About, category pages): compact. The cover block
   writes min-height:400px inline, hence !important. Shop keeps its own height. */
.cm-hero:not(.cm-hero--shop) {
	min-height: 280px !important;
}

@media (max-width: 781px) {
	.cm-hero:not(.cm-hero--shop) {
		min-height: 220px !important;
	}
}

.cm-hero .cm-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* Decorative watermark image in the corner of a section */
.cm-section--watermark {
	position: relative;
	background-color: var(--wp--preset--color--white);
	background-image: var(--cm-watermark);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 36% auto;
}

@media (max-width: 1024px) {
	.cm-section--watermark {
		background-size: 58% auto;
	}
}

/* Photo with an inset white frame */
.cm-photo-frame {
	position: relative;
	margin: 0;
}

.cm-photo-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.cm-photo-frame::after {
	content: "";
	position: absolute;
	inset: 20px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

.cm-section__kicker {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.25rem;
}

.cm-section__title {
	font-size: clamp(1.5rem, 3vw, 2.375rem);
	font-weight: 500;
	text-transform: capitalize;
}

.cm-section__body {
	text-align: justify;
}

/* Secondary section heading (Sell Now: "Submit pictures and info…"):
   Playfair 22/500 capitalize per Elementor post-51.css; 20px tablet, 18px phone. */
.cm-section__subtitle {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: capitalize;
	color: var(--wp--preset--color--navy);
	margin: 0 0 1rem;
}

@media (max-width: 1024px) {
	.cm-section__subtitle {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.cm-section__subtitle {
		font-size: 18px;
	}
}

/* Call-to-action band ("Join the Goddess Collections") */
.cm-cta {
	min-height: 350px;
}

@media (min-width: 1025px) {
	.cm-cta .wp-block-cover__image-background {
		background-attachment: fixed;
	}
}

.cm-cta .cm-section__kicker,
.cm-cta .cm-section__title {
	color: var(--wp--preset--color--white);
}

.cm-cta .cm-section__title {
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	line-height: 1.4;
}

.cm-btn-light .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--white);
}

.cm-btn-light .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--white);
}

/* Contact "icon box" cards */
.cm-contact-card {
	text-align: center;
	padding: var(--wp--preset--spacing--40);
}

.cm-contact-card svg {
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.75rem;
}

.cm-contact-card a {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 1.25rem;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.cm-contact-card a:hover {
	text-decoration: underline;
}

/* Embedded map */
.cm-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* Legal pages */
.cm-legal h2 {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.125rem;
	font-weight: 700;
	margin-top: 1.75rem;
	margin-bottom: 0.25rem;
}

.cm-legal p,
.cm-legal li {
	font-size: 0.95rem;
	line-height: 1.7;
}

/* Link cards (Wedding Band Options) */
.cm-link-card {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cloud);
	height: 100%;
}

.cm-link-card h3 {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

/* ---------- Home page ---------- */

.cm-home-hero {
	min-height: 80vh;
	background-color: var(--wp--preset--color--mist);
	background-image: url("/wp-content/uploads/2024/10/peony-line-art-illustration-peony-flower-copy.webp");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 30% auto;
}

.cm-home-hero__title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 500;
	text-transform: capitalize;
}

.cm-home-hero__copy {
	padding-right: clamp(0px, 6vw, 80px);
}

/* Photo that overhangs a thin outline box */
/* Live: the frame column is 36% of the 1140 container (410px) and stops 46px short of the
   container's right edge; the photo hangs 56px left and 20px down from it. */
.cm-home-hero .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 60%;
}

.cm-home-hero .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 40%;
}

.cm-hero-frame {
	border: 1px solid var(--wp--preset--color--indigo);
	border-radius: 0 100px 0 0; /* live: container 476ccd4, radius 0 100px 0 0, 10px padding */
	padding: 10px;
	max-width: 410px;
	margin: 0 46px 56px auto;
}

/* Live geometry (post-18.css, widget c6d8656): the image box is the frame's content
   width plus the 56px it hangs to the left, the photo is 90% of that box and centred in
   it, so ~33px of the frame stays visible to the right of the photo. */
.cm-hero-frame .wp-block-image {
	margin: 20px 0 -56px -56px;
	width: calc(100% + 56px);
	text-align: center;
}

.cm-hero-frame img {
	display: inline-block;
	width: 90%;
	border-radius: 0 80px 0 0;
}

@media (max-width: 781px) {
	.cm-home-hero {
		background-size: 60% auto;
	}

	/* Like the original on phones: photo first, then the copy. No 80vh minimum here (it
	   left empty space above the photo and below the button), tighter section padding. */
	.cm-home-hero {
		min-height: 0;
		padding-top: 1.5rem !important;
		/* Room for the peony watermark (34vw wide, 0.77 aspect ≈ 26vw tall) below the
		   button, bottom-right like the old phone layout, so it never sits behind text. */
		padding-bottom: calc(1.5rem + 26vw) !important;
		background-position: bottom right;
		background-size: 34% auto;
	}

	.cm-home-hero .wp-block-columns {
		flex-direction: column-reverse;
	}

	/* Elegant Earrings band: no fixed background on phones (it crops to a sliver of the
	   ear); anchor the image on the stud, which sits at ~66% / 47% of the photo. */
	.cm-home-earrings.has-parallax {
		background-attachment: scroll;
		background-position: 66% 47%;
		background-size: cover;
	}

	.cm-home-hero__title {
		font-size: 1.5rem;
	}

	/* Phone, like live: frame 70% wide and centred, photo 90% of it hanging 56px left and
	   below, then 80px of air before the heading (the photo overhangs the frame by 56px). */
	.cm-hero-frame {
		width: 70%;
		max-width: none;
		margin: 0 auto;
	}

	/* WP's flow layout zeroes the last child's bottom margin, so the clearance for the
	   overhanging photo (56px) + breathing room lives on the column as padding. */
	.cm-home-hero .wp-block-columns > .wp-block-column:last-child {
		padding-bottom: 80px;
	}

	.cm-hero-frame .wp-block-image {
		margin: 20px 15px -56px -56px;
		width: calc(100% + 56px - 15px);
	}
}

.cm-kicker {
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--periwinkle);
	font-family: var(--wp--preset--font-family--jost);
	margin-bottom: 0.25rem;
}

.cm-kicker--light {
	color: var(--wp--preset--color--white);
}

/* Like the old site's "View All" / hero "Shop Now": navy with a 1px indigo border,
   white with navy text on hover (Elementor post-18.css, elements 62cc697 / 6a053bb). */
.cm-btn-white .wp-block-button__link {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--indigo);
}

.cm-btn-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--indigo);
}

/* Text-style link button ("Discover More"): no box; a hairline underline that redraws
   from the left on hover and an arrow that slides out after the text. */
.cm-btn-text .wp-block-button__link,
.cm-btn-text .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 0; /* the default button now carries a 1px border; not here */
	padding-left: 0;
	padding-right: 1.4em; /* room for the arrow */
	text-decoration: none;
	position: relative;
	display: inline-block;
	transition: color 0.25s ease;
}

.cm-btn-text .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0;
	right: 1.4em;
	bottom: 0.45em;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
	transform: scaleX(1);
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.cm-btn-text .wp-block-button__link::after {
	content: "→";
	position: absolute;
	right: 0.2em;
	top: 50%;
	transform: translate(-6px, -50%);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.cm-btn-text .wp-block-button__link:hover {
	color: var(--wp--preset--color--indigo);
}

.cm-btn-text .wp-block-button__link:hover::before {
	/* Sweep out to the right, then redraw from the left. */
	animation: cm-underline-redraw 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.cm-btn-text .wp-block-button__link:hover::after {
	transform: translate(0, -50%);
	opacity: 1;
}

@keyframes cm-underline-redraw {
	0% { transform: scaleX(1); transform-origin: right center; }
	50% { transform: scaleX(0); transform-origin: right center; }
	51% { transform: scaleX(0); transform-origin: left center; }
	100% { transform: scaleX(1); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-btn-text .wp-block-button__link,
	.cm-btn-text .wp-block-button__link::before,
	.cm-btn-text .wp-block-button__link::after {
		transition: none;
		animation: none;
	}
}

/* Category tiles */
.cm-home-tiles {
	background-color: var(--wp--preset--color--snow);
	background-image: url("/wp-content/uploads/2024/10/bg.png");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
}

.cm-tile {
	text-align: center;
	padding: 0 15px;
}

.cm-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 15px;
}

.cm-tile__kicker {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--periwinkle);
	font-family: var(--wp--preset--font-family--jost);
}

.cm-tile__title {
	margin: 0.25rem auto 0;
	width: 80%;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 1.625rem;
	font-weight: 500;
	text-transform: capitalize;
}

.cm-tile--feature {
	min-height: 100%;
	padding-top: clamp(80px, 14vw, 200px);
	padding-bottom: 80px;
}

.cm-tile--feature .cm-section__title {
	color: var(--wp--preset--color--white);
	text-align: center;
}

/* Product rows (WooCommerce shortcode grids on the home page) */
.cm-home-products ul.products li.product .button,
.cm-home-products ul.products li.product .added_to_cart {
	display: none;
}

.cm-home-products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

.cm-home-products ul.products li.product .price {
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	font-weight: 600;
}

/* New Arrivals, laid out like the old site's loop grid: heading + "View All" stacked in
   a 25% left column, three cards in a 3-column grid with 30px gutters on the right, the
   whole row full-bleed with 6.5% side padding and 80px above/below. */
.cm-home-grid .cm-section__title {
	font-size: 40px;
	margin: 0 0 1.25rem;
}

/* New Arrivals: heading + button sit vertically centred beside the cards. */
.cm-home-arrivals .wp-block-columns {
	align-items: center;
}

.cm-home-arrivals .wp-block-columns > .wp-block-column {
	align-self: center;
}

.cm-home-grid ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
}

/* Woo's layout CSS sets li.product to 30.7% + float at high specificity; match it. */
.cm-home-grid .woocommerce ul.products[class*="columns-"] li.product,
.cm-home-grid ul.products[class*="columns-"] li.product,
.cm-home-grid ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
}

.cm-home-grid .woocommerce ul.products[class*="columns-"],
.cm-home-grid ul.products[class*="columns-"] {
	display: grid;
}

/* Woo's clearfix ::before/::after would occupy grid cells. */
.cm-home-grid ul.products::before,
.cm-home-grid ul.products::after {
	display: none;
}

.cm-home-grid ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 0.75rem;
}

@media (max-width: 781px) {
	.cm-home-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

.cm-row-head {
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cm-row-head .cm-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* Elegant earrings band */
.cm-home-earrings {
	min-height: 520px;
}

.cm-home-earrings .cm-section__title,
.cm-home-earrings p {
	color: var(--wp--preset--color--white);
}

/* Testimonials section */
.cm-home-testimonials {
	background-color: var(--wp--preset--color--cloud);
	background-image: url("/wp-content/uploads/2024/10/background-scaled.webp");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 42% auto;
}

/* Testimonials without the side photo: everything centred in a narrow band. */
.cm-home-testimonials__inner .cmjc-testimonial {
	text-align: center;
	flex-basis: 100%; /* one review per view, centred; the arrows page through */
	box-sizing: border-box; /* padding inside the 100%, or the card overhangs the track */
	align-items: center;
	justify-content: center; /* short reviews: stars, quote and name stay together, centred */
	gap: 0.75rem;
}

.cm-home-testimonials__inner .cmjc-testimonial__quote {
	flex: 0 0 auto; /* don't let the quote expand and push the name to the bottom */
	max-width: 42rem;
}

.cm-home-testimonials__inner .cmjc-testimonial__who {
	justify-content: center;
}

/* "Special gifts" box */
.cm-gift {
	min-height: 100%;
}

.cm-home-featured .wp-block-column:has(> .cm-gift) {
	display: flex;
}

/* Featured Products: 4 equal slots (3 cards + gift box) with 30px gutters, like the
   New Arrivals row. The product column spans three slots. */
.cm-home-featured .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.cm-home-featured .wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
	width: auto;
}

.cm-home-featured .wp-block-columns > .wp-block-column:first-child {
	grid-column: span 3;
}

@media (max-width: 781px) {
	.cm-home-featured .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cm-home-featured .wp-block-columns > .wp-block-column:first-child {
		grid-column: auto;
	}
}

.cm-home-featured .cm-gift {
	flex: 1 1 auto;
	min-height: 0;
}

/* The gift box is a fourth "card": same width as a product card (column widths
   75.6/23.25 make 23.25% equal 30.75% of the product column) and the same height,
   so Woo's bottom margins under the grid are removed. */
.cm-home-featured ul.products,
.cm-home-featured ul.products li.product {
	margin-bottom: 0;
}

.cm-home-featured .wp-block-columns {
	align-items: stretch;
}

.cm-gift__box {
	border: 1px solid rgba(255, 255, 255, 0.9);
	padding: clamp(80px, 12vw, 160px) 1rem;
	text-align: center;
}

.cm-gift__box h2 {
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

/* ---------- Shop archive ---------- */

.cm-hero--shop {
	min-height: 320px;
}

/* Phone: the HUSKY filter is ~600px tall, so it collapses behind a "Filter products"
   button (toggled by nav.js) instead of pushing the products down the page. */
.cm-shop__filter-toggle {
	display: none;
}

@media (max-width: 781px) {
	.cm-shop__filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 0 1rem;
		padding: 0.7rem 1rem;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
		border: 1px solid var(--wp--preset--color--indigo);
		border-radius: 0;
		font: 500 0.95rem/1 var(--wp--preset--font-family--jost);
		cursor: pointer;
	}

	.cm-shop__filter-toggle-caret {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		transition: transform 0.2s ease;
	}

	.cm-shop__filter-toggle[aria-expanded="true"] .cm-shop__filter-toggle-caret {
		transform: rotate(180deg);
	}

	.cm-shop__filter-panel {
		display: none;
		margin-bottom: 1.5rem;
	}

	.cm-shop__filter-panel.is-open {
		display: block;
	}
}

/* Testimonials: with a single review the arrows have nothing to do; hide them. */
.cmjc-testimonials:has(.cmjc-testimonial:only-child) .cmjc-testimonials__nav {
	display: none;
}

.cm-shop__filter .woof_container {
	margin-bottom: 1.25rem;
}

.cm-shop__filter .woof_container_inner h4,
.cm-shop__filter .woof_container_inner .woof_container_overlay_item {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.cm-shop__products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

@media (max-width: 781px) {
	.cm-shop__cols .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Single product (classic Woo template, styled like the old Elementor one) ---------- */

.cm-product .woocommerce div.product,
.cm-product div.product {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 4%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2.5rem 2.5rem 0;
}

.cm-product div.product .woocommerce-product-gallery,
.cm-product div.product .summary {
	float: none !important;
	width: 48% !important;
	flex: 0 0 48%;
	margin: 0 !important;
}

.cm-product div.product .summary {
	align-self: center;
}

.cm-product div.product .product_title {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 30px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.75rem;
}

.cm-product div.product .summary .price {
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	margin-bottom: 1rem;
}

/* The old template showed no short description and no category/SKU meta. */
.cm-product div.product .woocommerce-product-details__short-description,
.cm-product div.product .product_meta {
	display: none;
}

.cm-product div.product .summary .stock.out-of-stock {
	color: #b3261e;
	font-size: 14px;
}

.cm-product div.product form.cart .button {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 0;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	transition: all 0.2s;
}

.cm-product div.product form.cart .button:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.cm-product div.product form.cart .quantity .qty {
	padding: 0.65rem 0.5rem;
	border: 1px solid rgba(16, 20, 60, 0.25);
	border-radius: 0;
}

/* Gallery: 4 thumbnails per row like the old one */
.cm-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 6px;
}

.cm-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important; /* Woo's layout CSS sets 25% at higher specificity */
	float: none;
	margin: 0;
}

.cm-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	opacity: 0.85;
	cursor: pointer;
}

.cm-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.cm-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
}

/* Tabs section: light grey band, navy tab buttons, active tab white-on-grey */
.cm-product div.product .woocommerce-tabs,
.cm-product div.product .related,
.cm-product div.product .upsells {
	flex-basis: 100%;
	width: 100%;
	float: none;
	clear: both;
}

.cm-product div.product .woocommerce-tabs {
	margin: 3rem 0 0;
	padding: 2rem 2.5rem 2.5rem;
	background: var(--wp--preset--color--cloud);
}

/* Tab row: small tabs sitting on a hairline; the active tab blends into the
   section background (the old Elementor look). */
.cm-product div.product .woocommerce-tabs ul.wc-tabs {
	display: flex;
	align-items: flex-end;
	margin: 0 0 1.5rem;
	padding: 0;
	overflow: visible;
	border-bottom: 1px solid rgba(16, 20, 60, 0.15);
}

.cm-product div.product .woocommerce-tabs ul.wc-tabs::before,
.cm-product div.product .woocommerce-tabs ul.wc-tabs li::before,
.cm-product div.product .woocommerce-tabs ul.wc-tabs li::after {
	display: none;
}

.cm-product div.product .woocommerce-tabs ul.wc-tabs li {
	position: relative;
	bottom: -1px;
	background: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
	border-bottom: 0;
	border-radius: 0;
	margin: 0 2px 0 0;
	padding: 0;
	box-shadow: none;
}

.cm-product div.product .woocommerce-tabs ul.wc-tabs li a {
	display: block;
	padding: 0.45rem 1rem;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.cm-product div.product .woocommerce-tabs ul.wc-tabs li.active {
	background: var(--wp--preset--color--cloud);
	border-color: rgba(16, 20, 60, 0.15);
	border-bottom: 1px solid var(--wp--preset--color--cloud);
}

.cm-product div.product .woocommerce-tabs ul.wc-tabs li.active a {
	color: var(--wp--preset--color--navy);
}

.cm-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	color: var(--wp--preset--color--ink);
}

.cm-product div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 30px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-bottom: 1rem;
}

/* Related products */
.cm-product div.product .related {
	padding: 3rem 0 3.5rem;
}

.cm-product div.product .related > h2 {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 30px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-bottom: 1.5rem;
}

/* Four equal cards filling the container, 20px gutters (old template values). */
.cm-product div.product .related ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 40px;
	margin: 0;
}

.cm-product div.product .related ul.products::before,
.cm-product div.product .related ul.products::after {
	display: none;
}

.cm-product div.product .related ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.cm-product div.product .related ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 781px) {
	.cm-product div.product .related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cm-product div.product .related ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

.cm-product div.product .related ul.products li.product .price {
	color: var(--wp--preset--color--navy);
	font-weight: 500;
}

.cm-product div.product .related ul.products li.product .button {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 0;
}

.cm-product div.product .related ul.products li.product .button:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

@media (max-width: 781px) {
	.cm-product div.product {
		padding: 1.5rem 1rem 0;
	}

	.cm-product div.product .woocommerce-product-gallery,
	.cm-product div.product .summary {
		width: 100% !important;
		flex-basis: 100%;
	}

	.cm-product div.product .summary {
		margin-top: 1.5rem !important;
	}

	.cm-product div.product .woocommerce-tabs,
	.cm-product div.product .related {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ---------- Page title ---------- */

.cm-page-title .entry-title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ---------- Footer ---------- */

/* Only the divider line runs edge to edge; the columns and copyright stay inside the
   footer's 1400px content width so they don't stretch across very wide screens. */
.cm-footer > .cm-footer__rule {
	max-width: none;
}

/* Values below copied from Elementor's footer template CSS (post-30.css). */
.cm-footer__logo img {
	width: 170px !important;
	max-width: 100%;
	height: auto;
}

.cm-footer__title {
	margin-bottom: 0.6rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy);
}

/* The menu block is a real block, so the column's block-gap rule gives it a
   24px top margin; the contact list (raw HTML) gets none. Make them match. */
.cm-footer .cm-menu--footer {
	margin-top: 0;
}

.cm-menu--footer .cm-menu__list li,
.cm-footer__contact li {
	line-height: 1.5;
}

.cm-menu--footer .cm-menu__list li + li,
.cm-footer__contact li + li {
	margin-top: 0.2rem;
}

.cm-menu--footer .cm-menu__list a,
.cm-footer__contact,
.cm-footer__contact a {
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: capitalize;
	text-decoration: none;
	padding: 0;
}

.cm-menu--footer .cm-menu__list a:hover,
.cm-footer__contact a:hover {
	color: var(--wp--preset--color--indigo);
	text-decoration: underline;
}

.cm-footer__contact {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cm-footer__contact li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cm-footer__contact svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: var(--wp--preset--color--navy);
}

.cm-footer__contact span,
.cm-footer__contact a {
	padding: 0;
	text-transform: none;
}

/* Newsletter form in the footer: 13px input with a navy border, 12px/400 button. */
.cm-footer .cmjc-form--compact input[type="email"] {
	border: 1px solid var(--wp--preset--color--navy);
	padding: 0.7rem 0.9rem;
	font-size: 13px;
}

.cm-footer .cmjc-form--compact .cmjc-submit {
	padding: 0.7rem 12px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
}

.cm-footer__blurb {
	font-size: 15px;
	line-height: 1.5;
}

/* Same hover as every other navy button: white with navy text (the old rule forced an
   indigo background under the plugin's navy hover text). */
.cm-footer .cmjc-form--compact .cmjc-submit:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--indigo);
}

/* Brand column: logo and social icons centred in the column, like live. */
.cm-footer__brand {
	text-align: center;
}

.cm-footer__brand .wp-block-site-logo {
	display: flex;
	justify-content: center;
	margin: 0;
}

.cm-footer__social {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

.cm-footer__social a {
	display: inline-flex;
	color: var(--wp--preset--color--navy);
}

.cm-footer__social a:hover {
	color: var(--wp--preset--color--indigo);
}

.cm-footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Elementor's "bag-medium" glyph, extracted from its icon font, so the cart
   icon is the same one the old header used. */
.cm-header__tools .wc-block-mini-cart__icon {
	display: none;
}

.cm-header__tools .wc-block-mini-cart__quantity-badge::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -850 1000 1000'%3E%3Cpath transform='scale(1,-1)' d='M323 558l0 85c6 112 68 174 178 174 109 0 172-62 176-176v-83h73c46 0 83-37 83-83v-500c0-46-37-83-83-83h-500c-46 0-83 37-83 83v500c0 46 37 83 83 83h73z m62 0h230l0 82c-4 80-38 115-114 115-76 0-111-35-116-114l0-83z m-62-62h-73c-12 0-21-9-21-21v-500c0-12 9-21 21-21h500c12 0 21 9 21 21v500c0 12-9 21-21 21h-73v-100c0-17-14-31-31-31s-31 14-31 31l0 100h-230l0-100c0-17-14-31-31-31-17 0-31 14-31 31l0 100z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -850 1000 1000'%3E%3Cpath transform='scale(1,-1)' d='M323 558l0 85c6 112 68 174 178 174 109 0 172-62 176-176v-83h73c46 0 83-37 83-83v-500c0-46-37-83-83-83h-500c-46 0-83 37-83 83v500c0 46 37 83 83 83h73z m62 0h230l0 82c-4 80-38 115-114 115-76 0-111-35-116-114l0-83z m-62-62h-73c-12 0-21-9-21-21v-500c0-12 9-21 21-21h500c12 0 21 9 21 21v500c0 12-9 21-21 21h-73v-100c0-17-14-31-31-31s-31 14-31 31l0 100h-230l0-100c0-17-14-31-31-31-17 0-31 14-31 31l0 100z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cm-newsletter__row {
	display: flex;
	gap: 0;
}

.cm-newsletter input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgba(16, 20, 60, 0.15);
	border-right: 0;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}

.cm-newsletter input[type="email"]:focus {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: -2px;
}

.cm-newsletter button {
	padding: 0.65rem 1.25rem;
	font-size: 14px;
}

.cm-footer .cm-footer__rule {
	width: 100%;
	height: 1px;
	border: 0;
	opacity: 1;
	background: rgba(16, 20, 60, 0.18) !important;
}

.cm-footer__copyright {
	color: var(--wp--preset--color--navy);
	font-size: 13px;
}

@media (max-width: 781px) {
	.cm-footer__cols .wp-block-column {
		flex-basis: 100% !important;
	}
}