/*
 * Nologo: main stylesheet.
 * Tokens follow Nologo Noir, taken from Marii's designer visuals (design/DESIGN.md).
 */

/* Fonts (self-hosted, SIL Open Font Licence) */
@font-face {
	font-family: "Tinos";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/tinos-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Tinos";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/tinos-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Tinos";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/tinos-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
}

/* Tokens */
:root {
	/* Deep grey rather than pure black, matching the backgrounds in Marii's
	   photos and videos (review note 108) */
	--bg: #0E0E0E;
	--surface: #161615;
	--ink: #EDEAE3;
	--muted: #A8A7A1;
	--line: #3A3936;
	--accent: #CDAE62;
	--accent-deep: #BA974A;
	--on-accent: #4A2A04;
	--gain: #5FA37F;
	/* Gold foil (5 Nov, Marii): the tones of the Filigree bib set, deep amber
	   through warm gold to a bright highlight, with a fine grain */
	--foil: linear-gradient(110deg, #9A5A14 0%, #C88A2A 14%, #EDC56A 28%, #FCEDB8 38%, #E6B354 48%, #B97A20 60%, #DDA846 72%, #F6DC8E 84%, #C2852A 100%);
	--foil-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .72 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--button: var(--foil);

	--font-display: "Tinos", "Times New Roman", Times, serif;
	--font-body: "Jost", "Futura", system-ui, sans-serif;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 32px;
	--space-xl: 64px;
	--space-xxl: 112px;

	--radius-button: 4px;
	--radius-pill: 999px;
	--shell: 1440px;
	--gutter: clamp(16px, 4vw, 48px);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Reset (zero specificity so component rules always win) */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
	margin: 0;
}

:where(ul, ol)[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(img, video, svg) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Base */
html {
	background: var(--bg);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.has-drawer {
	overflow: hidden;
}

:where(h1, h2, h3, h4) {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 3px;
}

::selection {
	background: var(--accent);
	color: var(--bg);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	clip: auto;
	background: var(--ink);
	color: var(--bg);
}

.shell {
	width: min(100% - 2 * var(--gutter), var(--shell));
	margin-inline: auto;
}

.icon {
	width: 24px;
	height: 24px;
}

.icon-link {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--accent);
	text-decoration: none;
}

/* Labels, links and buttons */
.label,
.link-caps {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.link-caps {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--muted);
	transition: text-decoration-color 0.3s var(--ease), color 0.3s var(--ease);
}

.link-caps:hover,
.link-caps:focus-visible {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

:where(button, input[type="submit"], input[type="button"]),
.button {
	appearance: none;
	display: inline-block;
	padding: 0.95em 2.2em;
	border: 0;
	border-radius: var(--radius-button);
	background: var(--button);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.3s var(--ease), transform 0.15s var(--ease);
}

:where(button, input[type="submit"], input[type="button"]):hover,
.button:hover {
	filter: brightness(1.06);
}

:where(button, input[type="submit"], input[type="button"]):active,
.button:active {
	transform: translateY(1px);
}

.pill {
	display: inline-block;
	padding: 0.45em 1.1em;
	border: 1px solid var(--accent);
	border-radius: var(--radius-pill);
	color: var(--accent);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.pill.is-active {
	background: var(--accent);
	color: var(--on-accent);
}

/* Masthead: header, desktop navigation and spot price */
.masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--bg);
	transition: transform 0.35s var(--ease);
}

.masthead.is-hidden {
	transform: translateY(-100%);
}

/* On phones the admin bar scrolls away with the page, so stick to the very top */
@media (max-width: 600px) {
	.masthead {
		top: 0;
	}
}

/* Header, menu bar and spot price bar share the content edge (review note 93) */
.site-header {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	min-height: 76px;
	padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
	border-bottom: 1px solid var(--line);
}

.site-header__brand {
	justify-self: center;
}

.site-header__cart {
	position: relative;
	justify-self: end;
}

.site-header__count {
	position: absolute;
	top: 6px;
	right: 2px;
	min-width: 16px;
	color: var(--accent);
	font-size: 0.625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	color: var(--accent-deep);
	text-decoration: none;
	line-height: 1;
}

.brand__name {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	letter-spacing: 0.01em;
}

.brand__name sup {
	margin-left: 0.08em;
	font-family: var(--font-body);
	font-size: 0.3em;
	vertical-align: super;
}

.brand__sub {
	margin-top: 0.35em;
	padding-left: 0.3em;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.custom-logo {
	width: auto;
	max-height: 52px;
}

.site-nav {
	display: none;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	/* Tighter on smaller desktops so all 8 categories stay on one row */
	gap: var(--space-sm) clamp(18px, 2.2vw, var(--space-lg));
}

.site-nav__list a,
.site-nav__dropdown summary {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding-block: 14px;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__dropdown summary:hover {
	color: var(--ink);
}

.site-nav__dropdown {
	position: relative;
}

.site-nav__dropdown summary {
	list-style: none;
}

.site-nav__dropdown summary::-webkit-details-marker {
	display: none;
}

.site-nav__dropdown .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--ease);
}

.site-nav__dropdown details[open] .icon {
	transform: rotate(180deg);
}

.site-nav__dropdown ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 160px;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--accent);
	background: var(--bg);
}

.site-nav__dropdown ul a {
	padding-block: 8px;
}

.spot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) var(--space-md);
}

.spot--bar {
	padding: 12px max(var(--gutter), calc((100% - var(--shell)) / 2));
	border-bottom: 1px solid var(--line);
}

.spot__label {
	color: var(--ink);
	font-size: 0.8125rem;
}

.spot__value {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.spot__value--pending {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-style: italic;
}

.spot__unit {
	font-size: 0.9em;
}

/* Menu drawer (mobile; opens with JS, or with #site-drawer when JS is off) */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	visibility: hidden;
	background: rgb(0 0 0 / 0);
	transition: visibility 0s linear 0.4s, background-color 0.4s var(--ease);
}

.drawer.is-open,
.drawer:target {
	visibility: visible;
	background: rgb(14 14 14 / 0.7);
	transition-delay: 0s;
}

.drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(360px, 88vw);
	padding: 84px var(--gutter) var(--space-xl);
	overflow-y: auto;
	background: var(--bg);
	border-right: 1px solid var(--line);
	transform: translateX(-100%);
	transition: transform 0.4s var(--ease);
}

.drawer.is-open .drawer__panel,
.drawer:target .drawer__panel {
	transform: none;
}

.drawer__close {
	position: absolute;
	top: 16px;
	left: calc(var(--gutter) - 10px);
}

.drawer__list .menu-heading__label {
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--muted);
	font-size: 0.8125rem;
}

.drawer__list > li + li {
	margin-top: var(--space-sm);
}

.drawer__list > .menu-heading + li:not(.menu-heading) {
	margin-top: var(--space-lg);
}

.drawer__list .sub-menu {
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.drawer__list a {
	display: block;
	padding-block: 7px;
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.drawer__list a:hover,
.drawer__list a:focus-visible,
.drawer__list a[aria-current="page"] {
	color: var(--accent);
}

.site-nav__list a[aria-current="page"],
.site-nav__list .current-menu-ancestor > details > summary {
	color: var(--ink);
}

/* Media: Marii's photos and videos on black, edges softened so they melt into the page */
.media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bg);
}

.media__video,
.media__image,
.media .media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media--soft .media__video,
.media--soft .media__image,
.media--soft .product-card__video {
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-composite: intersect;
}

/* Marii's photos and videos are shot on near black. Lighten keeps whichever is
   lighter, the photo or the page, so any background darker than the page takes
   the page colour and the frame disappears (review notes 108 and 122). It is set
   on the frame, not the photo and video inside it, so a hover video covers the
   photo instead of mixing with it (review notes 126 and 127). */
.media--soft,
.nologo-soft img,
.nologo-soft video,
.elementor-widget-video.nologo-shop-video .e-hosted-video .elementor-video {
	mix-blend-mode: lighten;
}

.piece-art {
	width: 100%;
	height: 100%;
	padding: 12%;
}

/* Home: hero */
.home-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 340px;
	padding-block: var(--space-lg);
	overflow: hidden;
}

.home-hero__text {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--space-lg);
	max-width: 30ch;
	margin-inline: auto;
	color: var(--ink);
	font-size: 1rem;
	text-align: center;
}

.home-hero__media {
	position: absolute;
	top: 50%;
	right: -14%;
	width: 58%;
	aspect-ratio: 1;
	transform: translateY(-50%);
	opacity: 0.55;
}

.spot--panel {
	display: none;
}

/* Home: shop for sections */
.shop-for {
	display: grid;
	justify-items: center;
	gap: var(--space-lg);
	padding-block: var(--space-xl);
	text-align: center;
}

.shop-for__heading {
	display: grid;
	gap: var(--space-sm);
}

.shop-for__eyebrow {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.section-title {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.section-title a {
	text-decoration: none;
}

.shop-for__media {
	width: 100%;
	aspect-ratio: 1;
}

/* Home: unique pieces carousel */
.unique {
	padding-block: var(--space-xl) var(--space-xxl);
	text-align: center;
}

.carousel {
	position: relative;
	margin-top: var(--space-lg);
}

.carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__slide {
	display: grid;
	justify-items: center;
	gap: var(--space-sm);
	scroll-snap-align: center;
}

.carousel__slide {
	color: var(--ink);
	text-decoration: none;
}

.carousel__name {
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.carousel__meta {
	color: var(--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.carousel__media {
	width: min(100%, 460px);
	aspect-ratio: 1;
	margin-top: var(--space-md);
}

.carousel__arrow {
	position: absolute;
	top: 60%;
	z-index: 1;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--bg);
	color: var(--ink);
	transform: translateY(-50%);
}

.carousel__arrow:hover {
	border-color: var(--accent);
	color: var(--accent);
	filter: none;
}

.carousel__arrow--prev {
	left: 0;
}

.carousel__arrow--next {
	right: 0;
}

.carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: var(--space-lg);
}

.carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: var(--radius-pill);
	background: transparent;
}

.carousel__dot[aria-current="true"] {
	background: var(--ink);
}

/* Home: browse by design */
.designs {
	padding-block: var(--space-xl) var(--space-xxl);
	background: var(--surface);
	text-align: center;
}

.designs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 168px));
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* Design tiles (review note 123): the name centred at the top of a gold
   frame and the globe centred in the space below, the same in Elementor */
.design-tile {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	gap: var(--space-md);
	aspect-ratio: 4 / 5;
	padding: var(--space-lg) var(--space-md);
	overflow: hidden;
	border: 1px solid var(--accent);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s var(--ease);
}

.design-tile__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.design-tile .globe-art {
	width: 72%;
	height: auto;
	max-height: 100%;
	aspect-ratio: 1;
	transition: transform 0.6s var(--ease);
}

.design-tile:hover {
	background: rgb(205 174 98 / 0.05);
}

.design-tile:hover .globe-art {
	transform: scale(1.04);
}

/* Text pages */
.page-shell {
	min-height: 60vh;
	padding-block: var(--space-xl) var(--space-xxl);
}

.page-shell__header {
	margin-bottom: var(--space-lg);
}

.page-shell__title {
	margin-bottom: var(--space-lg);
	font-size: clamp(2rem, 4vw, 3rem);
}

.page-shell--centred {
	display: grid;
	place-content: center;
	gap: var(--space-lg);
	text-align: center;
}

.entry__content {
	max-width: 65ch;
}

.entry__content > * + * {
	margin-top: 1.1em;
}

.entry__content h2 {
	margin-top: 1.6em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.entry--summary {
	padding-block: var(--space-lg);
	border-top: 1px solid var(--line);
}

.entry__title {
	margin-bottom: var(--space-sm);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.entry__title a {
	text-decoration: none;
}

/* Forms (base for WooCommerce until its templates are styled) */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], select, textarea) {
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

:where(input, select, textarea):focus {
	border-color: var(--accent);
}

:where(table) {
	width: 100%;
	border-collapse: collapse;
}

:where(th, td) {
	padding: var(--space-md) var(--space-sm);
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.woocommerce-Price-amount,
.price {
	color: var(--accent);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}

/* Footer */
.site-footer {
	padding-block: var(--space-xl) var(--space-lg);
	border-top: 1px solid var(--line);
}

.site-footer__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-lg);
}

.site-footer__links .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links .menu-heading__label {
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-footer__links a {
	display: inline-block;
	padding-block: 4px;
	color: var(--muted);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--accent);
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--line);
}

.site-footer__base .brand__name {
	font-size: 1.375rem;
}

.site-footer__legal {
	color: var(--muted);
	font-size: 0.75rem;
}

/* Desktop */
@media (min-width: 1024px) {
	.site-header {
		grid-template-columns: 1fr auto;
		min-height: 88px;
		border-bottom: 0;
	}

	.menu-toggle {
		display: none;
	}

	.site-header__brand {
		justify-self: start;
	}

	.brand {
		align-items: flex-start;
	}

	.site-nav {
		display: block;
		padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
		border-block: 1px solid var(--line);
	}

	.site-nav__end {
		margin-left: auto;
	}

	body.is-front .spot--bar {
		display: none;
	}

	.home-hero {
		grid-template-columns: 5fr 7fr;
		min-height: 520px;
	}

	.home-hero__text {
		max-width: 46ch;
		font-size: 0.9375rem;
	}

	.home-hero__media {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		max-width: 560px;
		justify-self: center;
		transform: none;
		opacity: 1;
	}

	/* Sits in the photo's empty top corner, never over the piece */
	.spot--panel {
		position: absolute;
		top: 12%;
		right: 0;
		display: grid;
		gap: var(--space-xs);
		min-width: 260px;
		padding: var(--space-md) var(--space-lg);
		border: 1px solid rgb(237 234 227 / 0.06);
		border-radius: 6px;
		background: rgb(22 22 21 / 0.82);
		backdrop-filter: blur(8px);
	}

	.shop-for {
		padding-block: var(--space-xxl) var(--space-lg);
	}

	/* Marii's media is square, so keep it square rather than crop the jewellery */
	.shop-for__media {
		width: min(100%, 540px);
	}

	.carousel {
		max-width: 760px;
		margin-inline: auto;
	}

	.carousel__arrow {
		display: grid;
	}

	.designs__grid {
		grid-template-columns: repeat(2, minmax(0, 240px));
		gap: var(--space-lg);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.masthead,
	.drawer,
	.drawer__panel,
	.link-caps,
	.design-tile .globe-art {
		transition: none;
	}

	.carousel__track {
		scroll-behavior: auto;
	}
}

/* Shop and collections */
.shop {
	padding-block: var(--space-lg) var(--space-xxl);
}

/* Collection header: title and count on one line, filters below (review note 98) */
.shop__header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--line);
}

.shop__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.shop__header .shop__count {
	grid-column: 2;
	grid-row: 1;
	padding-bottom: 0.4em;
}

.shop__filters {
	grid-column: 1 / -1;
}

.pill-row {
	display: flex;
	gap: var(--space-sm);
	margin-inline: calc(-1 * var(--gutter));
	padding: 2px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.pill-row::-webkit-scrollbar {
	display: none;
}

.pill-row .pill {
	white-space: nowrap;
}

.pill:hover {
	background: rgb(205 174 98 / 0.12);
}

.pill.is-active:hover {
	background: var(--accent);
}

.shop__count {
	color: var(--muted);
	font-size: 0.75rem;
}

.shop__empty {
	display: grid;
	justify-items: center;
	gap: var(--space-md);
	padding-block: var(--space-xl);
	text-align: center;
}

.product-list {
	display: grid;
	gap: var(--space-xl) var(--space-md);
}

.product-card__link {
	display: grid;
	justify-items: center;
	gap: var(--space-xs);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
}

.product-card__name {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.2;
}

.product-card__meta {
	color: var(--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.product-card__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-top: var(--space-sm);
}

.product-card__link:hover .product-card__name {
	color: var(--accent);
}

.product-card--small .product-card__media {
	margin: 0 0 var(--space-sm);
}

.product-card--small .product-card__name {
	font-size: 1rem;
}

.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	color: var(--muted);
	text-decoration: none;
}

.woocommerce-pagination .current {
	color: var(--accent);
}

/* Product page */
.product-detail {
	display: grid;
	gap: var(--space-lg);
	padding-block: 0 var(--space-xl);
}

.product-detail__gallery {
	margin: 0 calc(-1 * var(--gutter));
}

/* Marii films everything in 4:5 (19 Oct brief) */
.product-detail__slide {
	margin: 0;
	aspect-ratio: 4 / 5;
}

.product-detail__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--space-md) var(--gutter) 0;
}

.product-detail__controls .carousel__dots {
	margin: 0;
}

.product-detail__views {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-self: start;
}

.product-detail__view {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: 0.75rem;
	text-decoration: underline;
	text-decoration-color: var(--muted);
}

.product-detail__view:hover {
	color: var(--accent);
	filter: none;
}

/* The photo under a playing video fades, so its soft edges never show it */
.product-detail__slide .media__image,
.reel__media .media__image {
	transition: opacity 0.6s var(--ease);
}

.reel__media:has(.nologo-player.is-ready) .media__image {
	opacity: 0;
}

.product-detail__summary {
	display: grid;
	gap: var(--space-md);
	align-content: start;
}

/* Name, then the price on its own line (review note 119) */
.product-detail__head {
	display: grid;
	gap: var(--space-sm);
}

.product-detail__title {
	font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.product-detail__price {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-variant-numeric: tabular-nums;
}

.product-detail__price--pending {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-style: italic;
}

.product-detail__meta {
	color: var(--ink);
	font-size: 0.9375rem;
}

.price-formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--accent);
	border-radius: var(--radius-button);
	color: var(--ink);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.price-formula .pill {
	background: var(--accent);
	color: var(--on-accent);
	font-size: 0.625rem;
}

/* Add to cart (review note 107): one tall gold button with a slow sheen on
   hover. The quantity box is hidden here because pieces are bought singly;
   it can still be changed in the cart. */
.product-detail__buy {
	margin-top: var(--space-sm);
}

.product-detail__buy form.cart {
	display: flex;
	gap: var(--space-sm);
}

.product-detail__buy .quantity {
	display: none;
}

.product-detail__buy .single_add_to_cart_button,
.product-detail__unavailable {
	flex: 1;
	width: 100%;
	min-height: 60px;
	padding-block: 1.2em;
	font-size: 0.875rem;
	letter-spacing: 0.2em;
}

.product-detail__buy .single_add_to_cart_button {
	background: linear-gradient(100deg, #E8B04E 0%, #FCDB6A 30%, #EFBD5C 50%, #FCDB6A 70%, #E8B04E 100%);
	background-size: 220% 100%;
	background-position: 0 0;
	box-shadow: 0 12px 32px -14px rgb(232 176 78 / 0.5);
	transition: background-position 0.9s var(--ease), box-shadow 0.4s var(--ease), transform 0.15s var(--ease);
}

.product-detail__buy .single_add_to_cart_button:hover,
.product-detail__buy .single_add_to_cart_button:focus-visible {
	background-position: 100% 0;
	box-shadow: 0 16px 40px -14px rgb(232 176 78 / 0.65);
	filter: none;
}

.product-detail__unavailable[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
	filter: none;
}

.product-detail__note {
	margin-top: var(--space-sm);
	color: var(--muted);
	font-size: 0.8125rem;
}

.product-detail__info {
	margin-top: var(--space-md);
}

.product-detail__section {
	padding-block: var(--space-md);
	border-top: 1px solid var(--line);
}

.product-detail__heading {
	margin-bottom: var(--space-sm);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.product-detail__section .entry__content {
	font-size: 0.9375rem;
}

.pair-with {
	padding-block: var(--space-lg);
	border-top: 1px solid var(--line);
}

.pair-with__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin-top: var(--space-md);
}

/* WooCommerce notices (review notes 107 and 109 to 111): a quiet panel with a
   gold edge, the message first and an outlined gold button on the right */
.woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: var(--space-lg);
}

main > .woocommerce-notices-wrapper:not(:empty) {
	margin-top: var(--space-lg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md) var(--space-lg);
	margin: 0 0 var(--space-sm);
	padding: 20px 24px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent);
	border-radius: 2px;
	background: var(--surface);
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #B4584B;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 1;
	margin-left: auto;
	padding: 0.9em 1.8em;
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	white-space: nowrap;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--accent);
	color: var(--on-accent);
	filter: none;
}

@media (min-width: 640px) {
	.product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pair-with__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pill-row {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
	}

	.product-detail {
		grid-template-columns: 7fr 5fr;
		gap: var(--space-xl);
		padding-top: var(--space-lg);
	}

	.product-detail__gallery {
		margin: 0;
	}

	.product-detail__controls {
		padding-inline: 0;
	}

	/* Sticky product info (review note 103): starts below the masthead and moves up when it slides away */
	.product-detail__summary {
		position: sticky;
		top: calc(var(--masthead-now, var(--masthead-h, 180px)) + var(--space-lg));
		align-self: start;
		transition: top 0.35s var(--ease);
	}

	.masthead-hidden .product-detail__summary {
		top: var(--space-lg);
	}
}

/* Logged in: keep the menu drawer below the admin bar */
.admin-bar .drawer {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Links inside page and product copy */
.entry__content a {
	color: var(--accent);
	text-decoration-color: rgb(205 174 98 / 0.5);
}

/* WooCommerce blocks: cart, empty cart and notices, set on the dark ground.
   Prefixed with body because the block stylesheets load after the theme's. */
body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
	display: none;
}

body .wp-block-woocommerce-empty-cart-block .wp-block-heading{
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
}

body .wp-block-woocommerce-empty-cart-block .wp-block-separator{
	color: var(--line);
	border-color: var(--line);
}

body .wp-block-woocommerce-empty-cart-block a:not(.wp-block-button__link){
	color: var(--accent);
}

body .wc-block-grid .wc-block-grid__products{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce caps each card at a quarter of its own column (has-4-columns),
   which shrank them to about 80px inside the theme's grid. */
body .wc-block-grid .wc-block-grid__product,
body .wc-block-grid[class*="has-"] .wc-block-grid__product{
	display: block;
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

body .wc-block-grid .wc-block-grid__product-link{
	display: block;
}

body .wc-block-grid .wc-block-grid__product-image{
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--surface);
}

body .wc-block-grid .wc-block-grid__product-image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body .wc-block-grid .wc-block-grid__product-price{
	margin-top: var(--space-xs);
	color: var(--accent);
	font-size: 0.875rem;
}

/* The cards link to the piece, like the theme's own cards, so no button. */
body .wc-block-grid .wc-block-grid__product-add-to-cart{
	display: none;
}

body .wc-block-grid .wc-block-grid__product-link{
	color: var(--ink);
	text-decoration: none;
}

body .wc-block-grid .wc-block-grid__product-title{
	margin-top: var(--space-sm);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 400;
}

body .wc-block-grid .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{
	margin-top: var(--space-sm);
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: var(--radius-button);
	background: var(--button);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .wc-block-components-notice-banner{
	border-color: var(--accent);
	background: transparent;
	color: var(--ink);
}

body .wc-block-components-notice-banner.is-error{
	border-color: #B4584B;
}

body .wc-block-components-notice-banner > svg{
	background-color: var(--accent);
	fill: var(--on-accent);
}

body .wc-block-components-notice-banner.is-error > svg{
	background-color: #B4584B;
	fill: var(--ink);
}

/* My account: navigation as pills */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 0.45em 1.1em;
	border: 1px solid var(--accent);
	border-radius: var(--radius-pill);
	color: var(--accent);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--accent);
	color: var(--on-accent);
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--accent);
}

@media (min-width: 1024px) {
	body .wc-block-grid .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Pages and posts: a centred reading column, with wide and full width blocks */
.entry__header {
	margin-bottom: var(--space-lg);
}

.entry__header--centred {
	text-align: center;
}

.entry__date,
.post-card__date {
	margin-bottom: var(--space-sm);
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.entry__content--reading {
	max-width: 680px;
	margin-inline: auto;
	font-size: 1.0625rem;
}

.entry__content--wide {
	max-width: none;
}

.entry__content--reading > .alignwide {
	width: min(1000px, 100vw - 2 * var(--gutter));
	max-width: none;
	margin-inline: calc((100% - min(1000px, 100vw - 2 * var(--gutter))) / 2);
}

.entry__content--reading > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry__content h3 {
	margin-top: 1.4em;
	font-size: 1.375rem;
}

.entry__content :where(ul, ol) {
	padding-left: 1.2em;
}

.entry__content .is-style-lead {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	line-height: 1.45;
}

.entry__content .wp-block-image img {
	height: auto;
}

.entry__content .wp-block-image figcaption {
	margin-top: var(--space-sm);
	color: var(--muted);
	font-size: 0.8125rem;
	text-align: center;
}

.entry__content .wp-block-image.is-style-soft img {
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-composite: intersect;
}

.entry__content .wp-block-columns {
	gap: var(--space-lg) var(--space-xl);
	margin-block: var(--space-xl);
}

.entry__content .wp-block-columns h2 {
	margin-top: 0;
	font-size: 1.5rem;
}

.entry__content .wp-block-quote {
	margin: var(--space-xl) 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
}

.entry__content .wp-block-quote cite {
	display: block;
	margin-top: var(--space-md);
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.entry__content .wp-block-button__link {
	padding: 0.95em 2.2em;
	border-radius: var(--radius-button);
	background: var(--button);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry__content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
}

.entry__image {
	width: min(1000px, 100%);
	aspect-ratio: 16 / 10;
	margin: 0 auto var(--space-xl);
}

.entry__footer {
	max-width: 680px;
	margin: var(--space-xl) auto 0;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--line);
}

.more-posts {
	margin-top: var(--space-xl);
}

/* Blog listing */
.blog__header {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.blog__empty {
	padding-block: var(--space-xl);
	text-align: center;
}

.post-grid {
	display: grid;
	gap: var(--space-xl) var(--space-lg);
}

.post-card {
	display: grid;
	align-content: start;
	gap: var(--space-md);
}

.post-card__media {
	aspect-ratio: 16 / 10;
}

.post-card__title {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.post-card__title a {
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
	color: var(--accent);
}

.post-card__excerpt {
	margin-top: var(--space-sm);
	color: var(--muted);
	font-size: 0.9375rem;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	color: var(--muted);
	text-decoration: none;
}

.pagination .current {
	color: var(--accent);
}

@media (min-width: 768px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-card--lead {
		grid-column: 1 / -1;
		grid-template-columns: 3fr 2fr;
		align-items: center;
		gap: var(--space-xl);
	}

	.post-card--lead:not(:has(.post-card__media)) {
		grid-template-columns: minmax(0, 680px);
		justify-content: center;
	}

	.post-card--lead .post-card__title {
		font-size: clamp(1.75rem, 3vw, 2.5rem);
	}
}

/* Wide photos never taller than most of the screen */
.entry__content .wp-block-image.alignwide img,
.entry__content .wp-block-image.alignfull img {
	width: 100%;
	max-height: 78vh;
	object-fit: cover;
}

/* Larger product cards (review note 100): 2 across, 3 across from 1280px on the 1440px site */
@media (min-width: 1280px) {
	.product-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.product-card .media--soft .media__image,
.product-card__video {
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	mask-composite: intersect;
}

/* The 360 video plays over the photo while the pointer is on the card */
.product-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.product-card__link.is-playing .product-card__video,
.pieces__slide.is-playing .product-card__video {
	opacity: 1;
}

/* Empty cart New in store grid (review note 102): equal cards, one line buttons */
body .wc-block-grid .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body .wc-block-grid .wc-block-grid__product-price {
	margin-top: var(--space-xs);
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 1rem;
}

body .wc-block-grid .wc-block-grid__product-add-to-cart.wp-block-button {
	margin-top: auto;
	padding-top: var(--space-sm);
}

body .wc-block-grid .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	white-space: nowrap;
}

body .wc-block-grid .wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Desktop product gallery (Marii's 19 Oct brief): the same 4:5 slider as on
   phones, as tall as the screen allows, with arrows over the slides. */
@media (min-width: 1024px) {
	/* Sized from the screen height, not the header, which slides away on scroll */
	.product-detail__gallery {
		width: min(100%, calc((100svh - 150px) * 0.8));
		justify-self: center;
	}

	.product-detail__gallery .carousel__arrow {
		top: calc(50% - 28px);
	}

	.product-detail__gallery .carousel__arrow--prev {
		left: var(--space-sm);
	}

	.product-detail__gallery .carousel__arrow--next {
		right: var(--space-sm);
	}
}

/* Matching piece with Add both (Marii's 19 Oct brief) */
.matching {
	padding-block: var(--space-lg);
	border-top: 1px solid var(--line);
}

.matching__body {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

.matching__text p {
	margin-bottom: var(--space-md);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
}

/* Category pages: one piece per screen with its 45 degree video (Marii's 19 Oct brief) */
.reel {
	display: grid;
}

.reel__item {
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding-block: var(--space-lg);
}

.reel__item + .reel__item {
	border-top: 1px solid var(--line);
}

.reel__link {
	display: grid;
	justify-items: center;
	gap: var(--space-md);
	width: 100%;
	color: var(--ink);
	text-align: center;
	text-decoration: none;
}

.reel__media {
	width: min(100%, calc((100svh - 190px) * 0.8));
	aspect-ratio: 4 / 5;
}

.reel__text {
	display: grid;
	justify-items: center;
	gap: 4px;
}

.reel__name {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.15;
}

.reel__meta {
	color: var(--muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.reel__price {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 1.125rem;
}

.reel__cta {
	margin-top: var(--space-xs);
}

.reel__link:hover .reel__name {
	color: var(--accent);
}

@media (max-width: 767px) {
	.reel__item {
		min-height: 0;
	}

	.reel__media {
		width: 100%;
	}

	.matching__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-md);
	}
}

/* Cart and checkout main actions in the brand gold */
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	border: 0;
	border-radius: var(--radius-button);
	background: var(--button);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover {
	background: var(--button);
	color: var(--on-accent);
	filter: brightness(1.06);
}

/* Account, login and address forms (review notes 112 and 113) */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 640px;
}

.entry__content .woocommerce > h2,
.woocommerce-column__title {
	margin-bottom: var(--space-md);
	font-size: 1.75rem;
}

.woocommerce form .form-row {
	margin: 0 0 var(--space-md);
}

.woocommerce form .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--ink);
	font-size: 0.875rem;
}

.woocommerce form .required {
	color: var(--accent);
	text-decoration: none;
}

.woocommerce form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--accent);
}

.woocommerce form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--muted);
	font-size: 0.875rem;
	cursor: pointer;
}

.woocommerce form .woocommerce-form-login__submit {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: var(--space-md);
}

.woocommerce-LostPassword {
	margin-top: var(--space-md);
	font-size: 0.875rem;
}

.woocommerce-LostPassword a {
	color: var(--accent);
}

/* Account details: names side by side, the password change in its own box,
   and room above Save changes */
.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-md);
}

.woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
}

.woocommerce-EditAccountForm > .form-row-first {
	grid-column: 1;
}

.woocommerce-EditAccountForm > .form-row-last {
	grid-column: 2;
}

.woocommerce form .clear {
	display: none;
}

#account_display_name_description {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 0.8125rem;
}

.woocommerce form fieldset {
	margin: var(--space-md) 0 var(--space-lg);
	padding: var(--space-lg) var(--space-lg) var(--space-sm);
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
}

.woocommerce form legend {
	padding-inline: var(--space-sm);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-address-fields > p:last-of-type {
	margin-top: var(--space-sm);
}

.woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button {
	min-height: 52px;
	padding-inline: 2.8em;
}

@media (max-width: 639px) {
	.woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-EditAccountForm > .form-row-last {
		grid-column: 1 / -1;
	}

	.woocommerce form fieldset {
		padding-inline: var(--space-md);
	}
}

/* Show password: a small eye inside the field, not a gold button (review note 112) */
.password-input {
	position: relative;
	display: block;
}

.password-input input {
	padding-right: 3.25em;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	transform: translateY(-50%);
}

.woocommerce .show-password-input:hover,
.woocommerce .show-password-input:focus-visible {
	color: var(--accent);
	filter: none;
}

.woocommerce .show-password-input:active {
	transform: translateY(-50%);
}

.woocommerce .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.7 17.7 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.7 17.7 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

/* Account dashboard, addresses and orders */
.woocommerce-MyAccount-content > p {
	max-width: 68ch;
	margin-bottom: var(--space-md);
	font-size: 1rem;
}

.woocommerce-MyAccount-content > p strong {
	color: var(--ink);
	font-weight: 500;
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

.woocommerce-Address {
	padding: var(--space-lg);
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

.woocommerce-Address-title h2 {
	font-size: 1.375rem;
}

.woocommerce-Address-title .edit {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woocommerce-Address address {
	color: var(--muted);
	font-style: normal;
}

.woocommerce-MyAccount-content table th {
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woocommerce-MyAccount-content table .button {
	padding: 0.7em 1.2em;
	font-size: 0.6875rem;
}

@media (min-width: 768px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Cart and checkout (review notes 106 and 114): larger type, dark fields and
   brand gold controls. WooCommerce sizes most of this text from WordPress's
   small preset (13px), so the presets are raised inside these blocks.
   Prefixed with body because the block stylesheets load after the theme's. */
body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout {
	--wp--preset--font-size--small: 0.9375rem;
	--wp--preset--font-size--medium: 1.375rem;
	--wc-separator-color: var(--line);
	color: var(--muted);
	font-size: 1rem;
}

body .wc-block-components-product-metadata__description {
	display: none;
}

body .wc-block-components-product-name {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
	text-decoration: none;
}

body a.wc-block-components-product-name:hover {
	color: var(--accent);
}

body .wc-block-components-product-price,
body .wc-block-components-formatted-money-amount {
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}

body .wc-block-components-product-price {
	color: var(--accent);
}

/* Cart: product rows */
body .wc-block-cart .wc-block-cart-items th,
body .wc-block-cart .wc-block-cart__totals-title {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body .wc-block-cart .wc-block-cart-items td,
body .wc-block-cart .wc-block-cart-items th,
body .wc-block-cart .wc-block-cart-items {
	border-color: var(--line);
}

body .wc-block-cart table.wc-block-cart-items th.wc-block-cart-items__header-image {
	width: 136px;
}

body .wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__image {
	padding-right: var(--space-lg);
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	width: 104px;
	aspect-ratio: 1;
	object-fit: cover;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 1.375rem;
	line-height: 1.2;
}

body .wc-block-cart .wc-block-cart-item__prices {
	margin-top: var(--space-xs);
	font-size: 1rem;
}

body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	color: var(--ink);
	font-size: 1.125rem;
}

body .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price {
	color: var(--ink);
}

body .wc-block-cart .wc-block-cart-item__quantity {
	margin-top: var(--space-md);
}

@media (max-width: 919px) {
	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		width: 80px;
	}

	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		font-size: 1.125rem;
	}

	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		font-size: 1rem;
	}
}

body .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	border-color: var(--line);
	border-radius: var(--radius-button);
}

body .wc-block-components-quantity-selector::after {
	border-color: var(--line);
	border-radius: var(--radius-button);
}

body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	color: var(--ink);
	font-size: 1rem;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--muted);
	background: transparent;
	filter: none;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	color: var(--accent);
}

body .wc-block-cart-item__remove-link {
	color: var(--muted);
	background: transparent;
	filter: none;
}

body .wc-block-cart-item__remove-link:hover {
	color: var(--accent);
}

/* Totals, in the cart and the checkout summary */
body .wc-block-components-totals-wrapper {
	border-color: var(--line);
}

body .wc-block-components-totals-item {
	color: var(--muted);
	font-size: 0.9375rem;
}

body .wc-block-components-totals-item__value {
	color: var(--ink);
}

body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 400;
}

body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--accent);
	font-size: 1.5rem;
	font-weight: 400;
}

body .wc-block-components-panel__button,
body .wc-block-components-totals-coupon-link {
	color: var(--ink);
	font-size: 0.9375rem;
}

body .wc-block-components-panel__button-icon {
	fill: var(--muted);
}

body .wc-block-cart .wc-block-components-button.wc-block-cart__submit-button:not(.is-link),
body .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
	min-height: 56px;
	font-size: 0.875rem;
	letter-spacing: 0.16em;
}

/* No blue ring when a WooCommerce button is clicked, and the site's thin gold
   ring for keyboard focus (review note 130) */
html body .wc-block-components-button.wc-block-components-button:not(.is-link):focus {
	outline: 0;
	box-shadow: none;
}

html body .wc-block-components-button.wc-block-components-button:not(.is-link):focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 3px;
}

/* The cart totals and order summary stay clear of the header while it shows */
@media (min-width: 920px) {
	body .wc-block-cart__sidebar,
	body .wc-block-checkout__sidebar {
		top: calc(var(--masthead-now, var(--masthead-h, 180px)) + var(--space-lg));
		transition: top 0.35s var(--ease);
	}

	.masthead-hidden body .wc-block-cart__sidebar,
	.masthead-hidden body .wc-block-checkout__sidebar {
		top: var(--space-lg);
	}
}

/* Checkout: steps and fields */
body .wc-block-components-checkout-step__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
}

body .wc-block-components-checkout-step__description,
body .wc-block-checkout__guest-checkout-notice {
	color: var(--muted);
	font-size: 0.875rem;
}

/* WooCommerce gives the country and state dropdowns their own top margin inside a
   field that already has one, so they sat 12px below the fields beside them (5 Nov) */
body .wc-block-components-address-form .wc-blocks-components-select {
	margin-top: 0;
}

body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-text-input input[type],
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background-color: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
}

/* WooCommerce leaves no space above the country and state fields */
body .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-country-input,
body .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-state-input {
	margin-top: 12px;
}

body .wc-blocks-components-select .wc-blocks-components-select__container {
	background: var(--surface);
	border-radius: var(--radius-button);
}

/* WooCommerce turns a field white while it is typed in (review notes 245 and
   247), so the focus rule keeps the dark ground and light text too */
body .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body .wc-block-components-form .wc-block-components-text-input input[type]:focus-within,
body .wc-block-components-text-input input[type]:focus,
body .wc-block-components-text-input input[type]:focus-within,
body .wc-block-components-textarea:focus,
body .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
	outline: 0;
	background-color: var(--surface);
	color: var(--ink);
}

/* Browser autofill paints fields light blue or yellow; keep them dark */
body .wc-block-components-text-input input:-webkit-autofill,
body .wc-block-components-text-input input:-webkit-autofill:hover,
body .wc-block-components-text-input input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	-webkit-text-fill-color: var(--ink);
	caret-color: var(--ink);
	transition: background-color 9999s;
}

/* Coupon Apply button (review note 246): WordPress's default button style
   gives it white text, so it takes the site's gold button colours */
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button {
	border: 0;
	border-radius: var(--radius-button);
	background: var(--button);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button:disabled {
	opacity: 0.45;
}

body .wc-block-components-form .wc-block-components-text-input label,
body .wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--muted);
}

body .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--muted);
}

body .wc-blocks-components-select .wc-blocks-components-select__select option {
	background: var(--surface);
	color: var(--ink);
}

body .wc-block-components-text-input.has-error input[type],
body .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	border-color: #B4584B;
	box-shadow: none;
}

body .wc-block-components-validation-error {
	color: #B4584B;
	font-size: 0.875rem;
}

body .wc-block-components-address-form__address_2-toggle,
body .wc-block-checkout__terms a,
body .wc-block-components-checkout-return-to-cart-button {
	color: var(--accent);
}

/* Radio options, shipping and payment (review notes 128 and 129): each option
   is its own box with one even border, grey until chosen and gold once chosen.
   WooCommerce's shared frame drew grey sides over the gold outline. */
body .wc-block-components-radio-control--highlight-checked::after {
	display: none;
}

body .wc-block-components-radio-control--highlight-checked {
	display: grid;
	gap: var(--space-sm);
}

body .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option,
body .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control-accordion-option {
	border: 0;
	border-radius: var(--radius-button);
	box-shadow: inset 0 0 0 1px var(--line);
}

body .wc-block-components-radio-control--highlight-checked > label.wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked > div.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--accent);
}

body .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	box-shadow: none;
}

body .wc-block-components-radio-control__label {
	color: var(--ink);
	font-size: 0.9375rem;
}

body .wc-block-components-radio-control__secondary-label {
	color: var(--accent);
	font-size: 0.875rem;
}

body .wc-block-components-radio-control-accordion-content {
	color: var(--muted);
	font-size: 0.875rem;
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border: 1px solid var(--muted);
	background-color: transparent;
	color: var(--accent);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--accent);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--accent);
}

/* Checkboxes */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--muted);
	background-color: transparent;
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--accent);
	background-color: var(--accent);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--on-accent);
}

body .wc-block-components-checkbox__label {
	color: var(--ink);
	font-size: 0.9375rem;
}

body .wc-block-checkout__terms {
	color: var(--muted);
	font-size: 0.875rem;
}

/* Checkout order summary: a dark panel beside the form, and a plain
   expandable row on phones */
body .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background: var(--surface);
}

@media (max-width: 919px) {
	body .wp-block-woocommerce-checkout-order-summary-block {
		border: 0;
		border-radius: 0;
		background: transparent;
	}
}

body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
}

body .wc-block-checkout__sidebar .wc-block-components-product-name {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 400;
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	border: 0;
	background: var(--accent);
	box-shadow: none;
	color: var(--on-accent);
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--on-accent);
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	border-radius: 2px;
}

body .wc-block-components-order-summary-item__total-price {
	color: var(--ink);
}

/* Elementor pages (review note 95): same gutters, spacing and type as the coded pages.
   Add these classes in Elementor's Advanced, CSS Classes field. */
.elementor-main {
	min-height: 50vh;
}

.elementor .e-con.e-parent {
	--padding-left: var(--gutter);
	--padding-right: var(--gutter);
}

.elementor .e-con.nologo-section {
	--padding-top: var(--space-xl);
	--padding-bottom: var(--space-xl);
}

.elementor .e-con.nologo-band {
	background: var(--surface);
}

.elementor .e-con.nologo-hero-media {
	position: relative;
}

.nologo-eyebrow .elementor-heading-title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nologo-section-title .elementor-heading-title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nologo-section-title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.nologo-page-title .elementor-heading-title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
}

.nologo-hero-text {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--ink);
	text-align: center;
}

.nologo-hero-text p,
.nologo-lead p {
	margin: 0;
}

.nologo-lead {
	max-width: 680px;
	margin-inline: auto;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	line-height: 1.45;
	text-align: center;
}

.nologo-text {
	color: var(--muted);
}

.nologo-text h2 {
	margin-bottom: var(--space-sm);
	font-size: 1.5rem;
}

.nologo-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
}

.nologo-quote cite {
	display: block;
	margin-top: var(--space-md);
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nologo-soft img,
.nologo-soft video {
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-composite: intersect;
}

/* Shop-for videos, much larger (review note 96): square on phones, a wide dark
   frame on larger screens so the turntable jewellery is never cropped. The
   selectors match Elementor's own video rules so these win. */
.elementor-widget-video.nologo-shop-video,
.elementor-widget-video.nologo-shop-video .elementor-widget-container {
	width: 100%;
}

.elementor-widget-video.nologo-shop-video .e-hosted-video,
.nologo-art-frame {
	width: 100%;
	aspect-ratio: 1;
	background: var(--bg);
}

.elementor-widget-video.nologo-shop-video .e-hosted-video .elementor-video {
	width: 100%;
	height: 100%;
	background: var(--bg);
	object-fit: cover;
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	mask-composite: intersect;
}

.nologo-art-frame {
	display: grid;
	place-items: center;
	background: radial-gradient(closest-side, rgb(205 174 98 / 0.14), rgb(205 174 98 / 0));
}

.nologo-art-frame .piece-art {
	width: auto;
	height: 70%;
	aspect-ratio: 1;
	padding: 0;
}

@media (min-width: 768px) {
	.elementor-widget-video.nologo-shop-video .e-hosted-video,
	.nologo-art-frame {
		aspect-ratio: 16 / 9;
		max-height: 80vh;
	}

	.elementor-widget-video.nologo-shop-video .e-hosted-video .elementor-video {
		object-fit: contain;
		-webkit-mask-image:
			linear-gradient(to right, transparent 19%, #000 30%, #000 70%, transparent 81%),
			linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
		mask-image:
			linear-gradient(to right, transparent 19%, #000 30%, #000 70%, transparent 81%),
			linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	}
}

/* Hero: the spot price panel sits on the photo's top corner, not inside its own widget box */
.nologo-hero-media .elementor-widget-shortcode {
	position: static;
}

/* Home hero (review note 133): a gold label, a large serif headline, the intro
   and two actions on the left, the ring large on the right with a faint gold
   glow behind it and the spot price on its corner. Fills the first screen. */
.elementor .e-con.nologo-hero {
	--padding-top: var(--space-lg);
	--padding-bottom: var(--space-xl);
	min-height: min(calc(100svh - var(--masthead-h, 140px)), 780px);
}

/* The ring never makes the hero taller than the screen under the header, so
   the hero sits in the middle of the first screen (5 Nov, Guy) */
@media (min-width: 1024px) {
	/* Elementor reads these on the boxed inner row */
	.elementor .e-con.nologo-hero {
		--align-items: center;
		--justify-content: center;
		--align-content: center;
	}

	.elementor .e-con.nologo-hero {
		--padding-top: var(--space-lg);
		--padding-bottom: var(--space-lg);
	}

	.nologo-hero-media .nologo-video--square,
	.nologo-hero-media .nologo-hero-image img,
	.elementor.elementor .e-con > .elementor-widget-video.nologo-hero-video {
		width: min(640px, calc(100svh - var(--masthead-h, 140px) - 112px));
		max-width: 100%;
		margin-inline: auto;
	}
}

.nologo-kicker .elementor-heading-title {
	color: var(--accent);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.nologo-hero-title .elementor-heading-title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 4.8vw, 4.5rem);
	font-weight: 400;
	line-height: 1.04;
}

.nologo-hero-copy .nologo-hero-text {
	max-width: 40ch;
	margin-inline: 0;
	color: var(--muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: left;
}

.elementor .nologo-button-link .elementor-button,
.elementor .nologo-button-link .elementor-button:hover,
.elementor .nologo-button-link .elementor-button:focus {
	padding: 0.4em 0;
	border: 0;
	border-bottom: 1px solid var(--muted);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.elementor .nologo-button-link .elementor-button:hover {
	border-bottom-color: var(--accent);
	color: var(--accent);
}

.elementor .e-con.nologo-hero .nologo-hero-media {
	isolation: isolate;
	background: var(--bg);
}

/* Elementor also uses this layer for background overlays, sized at 100%, so the size is reset */
.elementor .e-con.nologo-hero .nologo-hero-media::before {
	content: "";
	position: absolute;
	inset: 6% 10%;
	z-index: -1;
	width: auto;
	height: auto;
	background: radial-gradient(closest-side, rgb(205 174 98 / 0.12), rgb(205 174 98 / 0));
	pointer-events: none;
}

.nologo-hero-media .nologo-hero-image img {
	width: 100%;
	max-width: 640px;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Hero video (review note 135): the ring turning, square, the same size as the photo it replaced */
.elementor.elementor .e-con > .elementor-widget-video.nologo-hero-video {
	width: 100%;
	max-width: 640px;
}

/* Elementor puts video widgets on their own 3D layer, which stops the video
   blending with the page and leaves a dark square around it */
.elementor .elementor-widget-video.nologo-hero-video,
.elementor .elementor-widget-video.nologo-shop-video {
	transform: none;
}

.elementor-widget-video.nologo-hero-video .e-hosted-video {
	aspect-ratio: 1;
	background: transparent;
}

.elementor-widget-video.nologo-hero-video .e-hosted-video .elementor-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.elementor .e-con.nologo-hero {
		min-height: 0;
	}

	.nologo-hero-copy .nologo-hero-text {
		margin-inline: auto;
		text-align: center;
	}

	.nologo-hero-media .nologo-hero-image img,
	.elementor.elementor .e-con > .elementor-widget-video.nologo-hero-video {
		max-width: 340px;
	}
}

/* Vimeo and YouTube players (inc/video.php). The script builds the player and
   adds is-ready once it is playing, so the photo or poster shows until then. */
.nologo-player {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

.nologo-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	/* The site is color-scheme dark and Vimeo's player page declares none, so
	   browsers paint a solid white backdrop behind the player while it loads
	   (Guy, 23 Oct). Matching the player's scheme keeps the frame clear. */
	color-scheme: light;
}

.media__video.nologo-player,
.nologo-video__player.nologo-player {
	opacity: 0;
	transition: opacity 0.6s var(--ease);
}

.media__video.nologo-player.is-ready,
.nologo-video__player.nologo-player.is-ready {
	opacity: 1;
}

/* Product page 3D view: the photo under a player fades once it plays */
.product-detail__slide .media__image {
	transition: opacity 0.6s var(--ease);
}

.product-detail__slide:has(.nologo-player.is-ready) .media__image {
	opacity: 0;
}

/* Nologo video widget: a square video, alone or in a wide dark frame on
   desktop, with soft edges and the same blending as Marii's photos */
/* Elementor shrinks widgets to fit in centred columns, so this one always takes the full width */
.e-con > .elementor-widget-nologo-video,
.e-con-inner > .elementor-widget-nologo-video,
.e-con > .elementor-widget-nologo-category,
.e-con-inner > .elementor-widget-nologo-category {
	width: 100%;
}

.nologo-video {
	--nv-ratio: 1;
	position: relative;
	width: 100%;
	aspect-ratio: var(--nv-ratio);
	mix-blend-mode: lighten;
}

.nologo-video--portrait,
.nologo-video--portrait-wide {
	--nv-ratio: 4 / 5;
}

.nologo-video--portrait {
	max-width: 560px;
	margin-inline: auto;
}

.nologo-video .nologo-art-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.nologo-video--square {
	max-width: 640px;
	margin-inline: auto;
}

.nologo-video__frame {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	aspect-ratio: var(--nv-ratio);
	overflow: hidden;
	background: var(--bg);
	transform: translateX(-50%);
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
		linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
		linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	mask-composite: intersect;
}

.nologo-video .nologo-video__poster,
.nologo-video video.nologo-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s var(--ease);
}

.nologo-video__frame:has(.nologo-player.is-ready) .nologo-video__poster {
	opacity: 0;
}

@media (min-width: 768px) {
	.nologo-video--wide,
	.nologo-video--portrait-wide {
		aspect-ratio: 16 / 9;
		max-height: 80vh;
	}
}

/* Nologo category widget: a home page category section (Marii's 19 Oct brief) */
.nologo-category {
	display: grid;
	justify-items: center;
	gap: var(--space-md);
	text-align: center;
}

.nologo-category__title {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nologo-category__title a {
	color: inherit;
	text-decoration: none;
}

.nologo-category__media {
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	.nologo-hero-media .nologo-video--square {
		max-width: 340px;
	}
}

/* Wide photos on Elementor pages never taller than most of the screen */
.nologo-wide img {
	width: 100%;
	max-height: 78vh;
	object-fit: cover;
}

/* Unique pieces (review note 97): three across with the next one peeking in,
   captions under the photos, thin arrows and a progress line */
.pieces {
	position: relative;
	width: 100%;
	text-align: left;
}

.pieces__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.pieces__track::-webkit-scrollbar {
	display: none;
}

.pieces__slide {
	display: grid;
	align-content: start;
	gap: var(--space-xs);
	color: var(--ink);
	text-decoration: none;
	scroll-snap-align: start;
}

/* Square frames, every photo and video filling its frame (review notes 120 and 121) */
.pieces__media {
	aspect-ratio: 4 / 5;
	margin-bottom: var(--space-sm);
}

.pieces__media .media__image,
.pieces__media .media__video {
	transition: transform 0.6s var(--ease);
}

.pieces__slide:hover .media__image,
.pieces__slide:hover .media__video {
	transform: scale(1.03);
}

.pieces__name {
	font-family: var(--font-display);
	font-size: 1.125rem;
}

.pieces__slide:hover .pieces__name {
	color: var(--accent);
}

.pieces__meta {
	color: var(--muted);
	font-size: 0.75rem;
}

.pieces__nav {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.pieces__progress {
	position: relative;
	flex: 1;
	height: 1px;
	overflow: hidden;
	background: var(--line);
}

.pieces__bar {
	position: absolute;
	inset: 0;
	background: var(--ink);
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}

.pieces .pieces__arrow {
	position: static;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	transform: none;
}

.pieces .pieces__arrow:hover {
	color: var(--accent);
	filter: none;
}

@media (min-width: 768px) {
	.pieces__track {
		grid-auto-columns: calc((100% - 2 * var(--space-md)) / 2.4);
	}
}

@media (min-width: 1024px) {
	.pieces__track {
		grid-auto-columns: calc((100% - 3 * var(--space-lg)) / 3.3);
		gap: var(--space-lg);
	}

	.elementor .e-con.nologo-section {
		--padding-top: var(--space-xxl);
	}
}

/* While a 360 video plays, the photo under it fades out so none of it shows
   at the video's soft edges (review notes 131 and 132) */
.product-card__media .media__image,
.pieces__media .media__image {
	transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}

.product-card__link.is-playing .media__image,
.pieces__slide.is-playing .media__image {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pieces__bar,
	.pieces__media .media__image,
	.pieces__media .media__video {
		transition: none;
	}
}

/* Flash deals (deals-1): the deal line with its countdown, and the old price
   struck through next to the deal price. */
.deal-timer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	color: var(--ink);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.deal-timer__label {
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.deal-timer__offer {
	color: var(--accent);
}

.deal-timer__ends {
	color: var(--muted);
}

.deal-timer.is-ended .deal-timer__offer {
	text-decoration: line-through;
}

.deal-timer--category {
	justify-content: center;
	margin-top: var(--space-sm);
}

.price del,
.reel__price del,
.product-detail__price del {
	margin-right: 0.4em;
	color: var(--muted);
	font-size: 0.8em;
	opacity: 0.8;
}

.price del .woocommerce-Price-amount,
.reel__price del .woocommerce-Price-amount,
.product-detail__price del .woocommerce-Price-amount {
	color: inherit;
}

.price ins,
.reel__price ins,
.product-detail__price ins {
	text-decoration: none;
}

/* Ring sizes (29 Oct call): the size list above the gold button, the length
   line for bracelets and necklaces, and the ring size guide. */
.product-detail__length {
	color: var(--muted);
	font-size: 0.875rem;
}

.product-detail__formula:empty {
	display: none;
}

.product-detail__buy form.variations_form {
	display: grid;
	gap: var(--space-md);
}

.product-detail__buy .variations {
	margin: 0;
}

.product-detail__buy .variations tr {
	display: grid;
	gap: var(--space-xs);
}

.product-detail__buy .variations th,
.product-detail__buy .variations td {
	padding: 0;
	border: 0;
}

.product-detail__buy .variations label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.product-detail__buy .variations select {
	max-width: 320px;
	cursor: pointer;
}

.product-detail__buy .reset_variations {
	display: inline-block;
	margin-top: var(--space-xs);
	color: var(--muted);
	font-size: 0.75rem;
}

.product-detail__buy .single_variation_wrap {
	display: grid;
	gap: var(--space-sm);
}

.product-detail__buy .woocommerce-variation-price .price {
	font-size: 1.25rem;
}

.product-detail__buy .woocommerce-variation-availability {
	color: var(--muted);
	font-size: 0.8125rem;
}

.product-detail__buy .woocommerce-variation-add-to-cart {
	display: flex;
	gap: var(--space-sm);
}

/* WooCommerce's size script shows the quantity box with an inline style, so
   it needs !important to stay hidden like on pieces without sizes. */
.product-detail__buy .woocommerce-variation-add-to-cart .quantity {
	display: none !important;
}

.product-detail__buy .single_add_to_cart_button.disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.size-guide__open {
	margin-top: var(--space-md);
	padding: 0;
	background: none;
	color: var(--ink);
}

.size-guide__open:hover {
	filter: none;
}

.size-guide {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background: var(--surface);
	color: var(--ink);
}

.size-guide::backdrop {
	background: rgb(0 0 0 / 0.7);
}

.size-guide__body {
	display: grid;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-md);
	font-size: 0.875rem;
}

.size-guide__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
}

.size-guide__table {
	font-variant-numeric: tabular-nums;
}

.size-guide__table th,
.size-guide__table td {
	padding: 0.5em 0.5em 0.5em 0;
	font-size: 0.8125rem;
}

.size-guide__table th {
	color: var(--muted);
	font-weight: 500;
}

.size-guide__note {
	color: var(--muted);
}

.size-guide__close {
	padding: 0;
	background: none;
	color: var(--ink);
}

/* Zoom (Guy's 2 Nov review): Marii films each piece small in the middle of a
   4:5 frame, so photos and videos are scaled up inside their frame by --zoom,
   set per category or per piece (Nologo Store 1.2.1). The soft-edge mask
   shrinks by the same amount, so its fade still meets the frame edges. */
.media[style*="--zoom"] .media__image,
.media[style*="--zoom"] .media__video,
.media[style*="--zoom"] .product-card__video {
	scale: var(--zoom);
	-webkit-mask-size: calc(100% / var(--zoom)) calc(100% / var(--zoom));
	mask-size: calc(100% / var(--zoom)) calc(100% / var(--zoom));
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.nologo-video[style*="--zoom"] .nologo-video__poster,
.nologo-video[style*="--zoom"] .nologo-video__player {
	scale: var(--zoom);
}

/* Home category frames a size up on desktop (2 Nov), then a little shorter so
   pieces that sit high in their video do not leave a deep black band (5 Nov) */
@media (min-width: 768px) {
	.nologo-video--portrait-wide {
		aspect-ratio: 3 / 2;
		max-height: 72vh;
	}
}

/* Browse by design: Marii's designer's Western and Oriental cards (2 Nov).
   The gold frame, name and half globe are in the artwork, so the tile drops
   its own frame and the two halves sit close enough to read as one globe. */
.designs__grid:has(.design-tile--art) {
	grid-template-columns: repeat(2, minmax(0, 200px));
	gap: var(--space-sm);
}

.design-tile.design-tile--art {
	display: block;
	aspect-ratio: 167 / 384;
	padding: 0;
	border: 0;
}

.design-tile--art .design-tile__art {
	display: block;
	width: 100%;
	height: 100%;
	transition: filter 0.6s var(--ease);
}

.design-tile.design-tile--art:hover {
	background: none;
}

.design-tile--art:hover .design-tile__art {
	filter: brightness(1.12);
}

@media (min-width: 768px) {
	.designs__grid:has(.design-tile--art) {
		grid-template-columns: repeat(2, minmax(0, 260px));
		gap: var(--space-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.design-tile--art .design-tile__art {
		transition: none;
	}
}

/* Currency switcher next to the bag (Guy, 2 Nov). The currency plugin's
   click dropdown, restyled to the masthead: the code in gold caps, the list
   on the page colour. The brand stays centred on phones because the two
   outer columns share the spare width. */
.site-header {
	grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: var(--space-xs);
}

.currency-switcher .wcml-dropdown-click {
	width: auto;
	max-width: none;
}

/* The plugin's own sheet draws white list items with grey borders */
.currency-switcher .wcml-dropdown-click ul,
.currency-switcher .wcml-dropdown-click li,
.currency-switcher .wcml-dropdown-click li:hover,
.currency-switcher .wcml-dropdown-click li:focus,
.currency-switcher .wcml-dropdown-click li:has(:focus-visible),
.currency-switcher .wcml-dropdown-click .wcml-cs-submenu li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

body .currency-switcher .wcml-dropdown-click button,
body .currency-switcher .wcml-dropdown-click button:hover,
body .currency-switcher .wcml-dropdown-click button:focus {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	filter: none;
	text-align: left;
	text-transform: uppercase;
	padding: 10px 6px;
	border: 0;
	background: none;
	color: var(--accent);
	font-weight: 400;
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

body .currency-switcher .wcml-dropdown-click .wcml-cs-item-toggle::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 0 2px 6px;
	border: 0;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	position: static;
}

.currency-switcher .wcml-dropdown-click .wcml-cs-active-currency {
	position: relative;
}

/* While the currency changes, the plugin adds a grey loading image that sat on
   the bag icon. Hide it and turn the chevron into a small gold spinner (5 Nov) */
.currency-switcher .wcml-spinner {
	display: none !important;
}

body .currency-switcher .wcml_currency_switcher:has(.wcml-spinner) .wcml-cs-item-toggle {
	opacity: 0.7;
	pointer-events: none;
}

body .currency-switcher .wcml_currency_switcher:has(.wcml-spinner) .wcml-cs-submenu {
	display: none;
}

body .currency-switcher .wcml_currency_switcher:has(.wcml-spinner) .wcml-cs-item-toggle::after {
	width: 9px;
	height: 9px;
	margin: 0 0 -1px 6px;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nologo-spin 0.7s linear infinite;
}

@keyframes nologo-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	body .currency-switcher .wcml_currency_switcher:has(.wcml-spinner) .wcml-cs-item-toggle::after {
		animation-duration: 2s;
	}
}

.currency-switcher .wcml-dropdown-click .wcml-cs-submenu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 72px;
	padding: 4px 0;
	border: 1px solid var(--line);
	background: var(--bg);
}

body .currency-switcher .wcml-dropdown-click .wcml-cs-submenu button {
	padding: 10px 14px;
	color: var(--ink);
}

body .currency-switcher .wcml-dropdown-click .wcml-cs-submenu button:hover,
body .currency-switcher .wcml-dropdown-click .wcml-cs-submenu button:focus-visible {
	color: var(--accent);
}

/* Hidden until the plugin's script shows it with an inline style */
.currency-switcher .wcml-dropdown-click .wcml-cs-submenu {
	visibility: hidden;
}

@media (min-width: 1024px) {
	.site-header {
		grid-template-columns: 1fr auto;
	}
}

/* Product lightbox (review note 229): the photos and videos full screen, as
   large as the screen allows in their 4:5 frame, on the page colour so the
   same soft edges and blending apply. */
.product-detail__slide.media--soft {
	cursor: zoom-in;
}

.product-detail__expand {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--bg);
	color: var(--ink);
}

.product-detail__expand:hover,
.lightbox__close:hover,
.lightbox__arrow:hover {
	border-color: var(--accent);
	color: var(--accent);
	filter: none;
}

.product-detail__expand .icon {
	width: 18px;
	height: 18px;
}

html.has-lightbox,
html.has-lightbox body {
	overflow: hidden;
}

.lightbox {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bg);
	color: var(--ink);
	overflow: hidden;
}

.lightbox::backdrop {
	background: var(--bg);
}

.lightbox__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar {
	display: none;
}

.lightbox__cell {
	display: grid;
	flex: 0 0 100%;
	place-items: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.lightbox__slide {
	width: min(100vw, 100dvh * 0.8);
	margin: 0;
	aspect-ratio: 4 / 5;
	cursor: zoom-in;
}

.lightbox__slide:has(.nologo-player, video) {
	cursor: default;
}

.lightbox__slide .media__image {
	transition: opacity 0.6s var(--ease), scale 0.35s var(--ease);
}

.lightbox__slide:has(.nologo-player.is-ready) .media__image {
	opacity: 0;
}

/* A closer look: twice the size, following the pointer or finger, without the
   soft edges. Swiping waits until the photo is tapped back. */
.lightbox__slide.is-magnified {
	cursor: zoom-out;
	touch-action: none;
}

.lightbox__track:has(.is-magnified) {
	overflow-x: hidden;
}

.lightbox__slide.is-magnified .media__image {
	scale: calc(var(--zoom, 1) * 2);
	-webkit-mask-image: none;
	mask-image: none;
}

.lightbox__count {
	position: absolute;
	top: var(--space-md);
	left: var(--gutter);
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__arrow {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--bg);
	color: var(--ink);
}

.lightbox__close {
	top: var(--space-sm);
	right: var(--gutter);
}

.lightbox__arrow {
	top: 50%;
	display: none;
	transform: translateY(-50%);
}

.lightbox__arrow--prev {
	left: var(--gutter);
}

.lightbox__arrow--next {
	right: var(--gutter);
}

@media (min-width: 768px) {
	.lightbox__arrow {
		display: grid;
	}
}

/* Other details under the weight, for example a hallmark (review note 230) */
.product-detail__details {
	color: var(--muted);
	font-size: 0.875rem;
}

/* Help pages (review note 232): bullets in page copy, and the draft parts
   Marii still has to confirm, which must all be gone before launch. */
.entry__content ul.wp-block-list {
	list-style: disc;
}

.entry__content ol.wp-block-list {
	list-style: decimal;
}

.entry__content :where(ul, ol).wp-block-list li::marker {
	color: var(--accent);
}

.entry__content mark.to-confirm {
	padding: 0 0.15em;
	border-bottom: 1px dashed var(--accent);
	background: rgb(205 174 98 / 0.16);
	color: var(--ink);
}

.entry__content .draft-note {
	padding: var(--space-md);
	border: 1px dashed var(--accent);
	border-radius: var(--radius-button);
	color: var(--ink);
	font-size: 0.875rem;
}

/* Compact masthead on desktop (review note 244). It is fixed, with a spacer
   holding its full height in the page, so it can shrink once the page scrolls
   without moving anything: a smaller logo, a slimmer menu row and no spot
   price bar take it from about 196px to about 100px. Phones keep the sticky
   masthead that slides away. */
.masthead-spacer {
	display: none;
}

@media (min-width: 1024px) {
	html.js .masthead {
		position: fixed;
		right: 0;
		left: 0;
	}

	html.js .masthead-spacer {
		display: block;
		height: var(--masthead-full, 196px);
	}

	html.js body.is-front .masthead-spacer {
		height: var(--masthead-full, 138px);
	}

	.masthead .site-header {
		transition: min-height 0.35s var(--ease);
	}

	.masthead .brand {
		transform-origin: left center;
		transition: scale 0.35s var(--ease);
	}

	.masthead .site-nav__list > li > a,
	.masthead .site-nav__dropdown summary {
		transition: padding 0.35s var(--ease);
	}

	.masthead .spot--bar {
		max-height: 80px;
		overflow: hidden;
		transition: max-height 0.35s var(--ease), padding 0.35s var(--ease), border-color 0.35s var(--ease);
	}

	.masthead.is-compact .site-header {
		min-height: 60px;
	}

	.masthead.is-compact .brand {
		scale: 0.78;
	}

	.masthead.is-compact .site-nav__list > li > a,
	.masthead.is-compact .site-nav__dropdown summary {
		padding-block: 10px;
	}

	.masthead.is-compact .spot--bar {
		max-height: 0;
		padding-block: 0;
		border-bottom-color: transparent;
	}

	.masthead.is-measuring,
	.masthead.is-measuring * {
		transition: none !important;
	}
}

/* Price line (review note 242): the price with the metal and weight beside it */
.product-detail__price-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) var(--space-md);
}

.product-detail__price-line .product-detail__meta {
	padding-left: var(--space-md);
	border-left: 1px solid var(--line);
	color: var(--muted);
}

/* Price working (review note 241): dark on dark, so the gold stays for the
   price and the Add to cart button */
.price-formula {
	border-color: var(--line);
	background: var(--surface);
	color: var(--muted);
}

.price-formula .price-formula__value {
	color: var(--ink);
}

.price-formula .pill {
	border-color: var(--line);
	background: transparent;
	color: var(--muted);
}

/* Matching piece (review note 233): the heading sits with its text, beside the card */
.matching__body {
	margin-top: 0;
}

.matching__text {
	display: grid;
	gap: var(--space-sm);
	justify-items: start;
}

.matching__text .product-detail__heading {
	margin: 0;
}

.matching__text p {
	margin-bottom: var(--space-sm);
}

/* Draft parts still to confirm (review note 240): plain to shoppers, and only
   a faint underline for the team while logged in */
.entry__content mark.to-confirm {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.logged-in .entry__content mark.to-confirm {
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.entry__content .draft-note {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
}

/* Shoppers never see the draft notes; the team still does while logged in (5 Nov) */
body:not(.logged-in) .entry__content .draft-note {
	display: none;
}

/* Price working (Marii's pricing spec, 3 Nov): gold value, making fee and
   total as lines that add up to the price above */
.price-formula {
	display: block;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
}

.price-formula__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 0.25rem 0;
}

.price-formula__line dt,
.price-formula__line dd {
	margin: 0;
}

.price-formula__line dt {
	color: var(--muted);
}

.price-formula__line dd {
	color: var(--ink);
	white-space: nowrap;
}

.price-formula__note {
	display: block;
	font-size: 0.75rem;
}

.price-formula__total {
	margin-top: 0.25rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--line);
}

.price-formula__total dt {
	color: var(--ink);
}

/* Long necklaces (3 Nov) makes the menu longer: tighter gaps, and slightly
   tighter letters on smaller desktops, keep every category on one row */
.site-nav__list {
	gap: var(--space-sm) clamp(12px, 1.6vw, var(--space-lg));
}

@media (max-width: 74.99em) {
	.site-nav__list a,
	.site-nav__dropdown summary {
		letter-spacing: 0.08em;
	}
}

/* Back in stock sign up (Marii, 3 Nov): WooCommerce's form under the sold
   out Add to cart, in the shop's style */
.wc_bis_form {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--line);
}

.wc_bis_form .wc_bis_form__title {
	margin: 0 0 var(--space-sm);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
}

.wc_bis_form__form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.wc_bis_form__input {
	flex: 1 1 14rem;
	min-width: 0;
}

.wc_bis_form__form-row .wc_bis_form__button {
	flex: 0 0 auto;
}

/* Passport check (task co-4, 3 Nov): the notice on the order confirmation
   and in My account, and the upload form on the ID verification page */
.nologo-id-notice,
.nologo-id-form {
	margin-block: var(--space-md);
	padding: var(--space-md);
	border: 1px solid var(--line);
	background: var(--surface);
}

.nologo-id-notice h2,
.nologo-id-form h2 {
	margin-top: 0;
	font-size: 1.375rem;
}

.nologo-id-form label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--ink);
}

.nologo-id-form input[type="text"],
.nologo-id-form input[type="file"] {
	width: 100%;
	max-width: 28rem;
}

.nologo-id-form__hint {
	display: block;
	margin-top: 0.25rem;
	color: var(--muted);
	font-size: 0.875rem;
}

.nologo-id-form__error {
	color: var(--ink);
	border-left: 2px solid var(--accent);
	padding-left: var(--space-sm);
}

.nologo-id-form input[type="file"]::file-selector-button {
	margin-right: var(--space-sm);
	padding: 0.5rem 1rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--accent);
	font: inherit;
	cursor: pointer;
}

/* Ring sizes (Marii, 3 Nov): her Hong Kong size chart and the size filter on Rings */
.size-guide__scroll {
	overflow-x: auto;
}

.size-guide__table tbody th {
	color: var(--accent);
	font-weight: 500;
}

.shop__sizes {
	margin-top: var(--space-sm);
}

.shop__sizes-label {
	align-self: center;
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Card price under the weight (Marii, 3 Nov) */
.product-card__price {
	display: block;
	margin-top: 2px;
	color: var(--accent);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.product-card__price del {
	margin-right: 6px;
	color: var(--muted);
}

.product-card__price ins {
	text-decoration: none;
}

/* Outline button, for the second choice next to a gold one */
.button.button--outline {
	padding: calc(0.95em - 1px) calc(2.2em - 1px);
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
}

/* Cookie notice (inc/cookie-consent.php): compact, bottom right (5 Nov, Guy) */
.cookie-banner {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	display: grid;
	gap: 12px;
	width: min(380px, calc(100vw - 32px));
	padding: 16px 18px;
	border: 1px solid rgb(237 234 227 / 0.08);
	border-radius: 8px;
	background: rgb(22 22 21 / 0.94);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
	backdrop-filter: blur(8px);
	color: var(--muted);
}

.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.cookie-banner__text a {
	color: var(--ink);
	text-decoration-color: var(--muted);
}

.cookie-banner__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cookie-banner .cookie-banner__accept {
	padding: 0.8em 1.4em;
	font-size: 0.6875rem;
}

.cookie-banner .cookie-banner__essential {
	padding: 0.4em 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: 0.6875rem;
	text-decoration: underline;
	text-decoration-color: var(--muted);
	text-underline-offset: 3px;
}

.cookie-banner .cookie-banner__essential:hover {
	color: var(--accent);
	filter: none;
}

/* Logged in, the review tool's buttons sit bottom right, so the notice sits above them */
body.admin-bar .cookie-banner {
	bottom: 92px;
}

@media (max-width: 480px) {
	.cookie-banner {
		right: 16px;
		bottom: 16px;
	}
}

/* Home category sections: a quiet text link set inside the bottom of the
   frame, so it sits the same distance from every video whatever the piece's
   position in it (5 Nov, Guy) */
.nologo-category__link {
	position: relative;
	z-index: 2;
	display: inline-block;
	align-self: start;
	margin-top: calc(-1 * (var(--space-md) + 3.75rem));
	padding: 0.6em 0;
	font-size: 0.8125rem;
	text-shadow: 0 1px 14px rgb(0 0 0 / 0.9);
	text-underline-offset: 6px;
}

.nologo-category:hover .nologo-category__link {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* Collection tools: count, sort and the list or grid switch (5 Nov) */
.shop__tools {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-md);
	padding-bottom: 0.2em;
}

.shop__tools .shop__count {
	margin: 0;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	padding: 0.55em 2em 0.55em 0.9em;
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A8A7A1' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 0.8em center;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.view-toggle {
	display: flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
}

.view-toggle .view-toggle__button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 30px;
	padding: 0;
	border-radius: 3px;
	background: none;
	color: var(--muted);
}

.view-toggle .view-toggle__button[aria-pressed="true"] {
	background: rgb(237 234 227 / 0.08);
	color: var(--ink);
}

.view-toggle .view-toggle__button:hover {
	color: var(--accent);
	filter: none;
}

@media (max-width: 639px) {
	/* On phones: the count on the left, the sort menu and the switch together on the right */
	.shop__tools {
		grid-column: 1 / -1;
		grid-row: auto;
		justify-content: flex-start;
		gap: var(--space-sm);
	}

	.shop__tools .shop__count {
		margin-right: auto;
		padding-bottom: 0;
	}

	.woocommerce-ordering select.orderby {
		padding-block: 0.7em;
	}

	.view-toggle .view-toggle__button {
		height: 32px;
	}
}

/* Grid view: the same pieces as a shop grid, 2, 3 or 4 across */
.shop-grid {
	display: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nologo-view-grid .shop-grid {
	display: grid;
}

.nologo-view-grid .reel {
	display: none;
}

.shop-grid .product-card__media {
	margin: 0 0 var(--space-sm);
}

.shop-grid .product-card__name {
	font-size: 1rem;
}

@media (min-width: 768px) {
	.shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-xl) var(--space-lg);
	}
}

/* Order received page (woocommerce/checkout/thankyou.php, 5 Nov) */
.thankyou {
	display: grid;
	gap: var(--space-lg);
	max-width: 960px;
}

.thankyou .thankyou__lead {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.thankyou__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-md) var(--space-lg);
	margin: 0;
	padding: 24px;
	border: 1px solid rgb(237 234 227 / 0.06);
	border-radius: 6px;
	background: var(--surface);
}

.thankyou__fact dt {
	color: var(--muted);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.thankyou__fact dd {
	margin: 6px 0 0;
	color: var(--ink);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.thankyou__fact--total dd {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 1.375rem;
	line-height: 1.1;
}

.thankyou__heading,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-order-details__title,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-column__title,
.thankyou .wc-bacs-bank-details-heading {
	margin: 0 0 var(--space-md);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 400;
}

.thankyou__payment {
	padding: 20px 24px;
	border-left: 2px solid var(--accent);
	border-radius: 0 6px 6px 0;
	background: rgb(205 174 98 / 0.06);
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.thankyou__payment p {
	margin: 0 0 var(--space-sm);
}

.thankyou__payment a {
	color: var(--accent);
}

.thankyou__payment .wc-bacs-bank-details-heading {
	margin-top: var(--space-md);
	font-size: 1.125rem;
}

.thankyou__payment .wc-bacs-bank-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.thankyou__payment .wc-bacs-bank-details li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 6px 0;
	border-bottom: 1px solid var(--line);
}

.thankyou__payment .wc-bacs-bank-details strong {
	color: var(--ink);
	font-weight: 400;
}

/* Order table */
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-order-details {
	margin: 0;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details th,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	text-align: left;
	vertical-align: top;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details thead th {
	padding-top: 0;
	color: var(--muted);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details .product-total,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot td {
	padding-left: var(--space-md);
	color: var(--ink);
	text-align: right;
	white-space: nowrap;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details .product-name a {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	text-decoration: none;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details .product-name a:hover {
	color: var(--accent);
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details .product-quantity {
	color: var(--muted);
	font-weight: 400;
}

:is(.thankyou, .woocommerce-MyAccount-content) .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 0.8125rem;
}

:is(.thankyou, .woocommerce-MyAccount-content) .wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 2px 0;
}

:is(.thankyou, .woocommerce-MyAccount-content) .wc-item-meta strong {
	font-weight: 400;
}

:is(.thankyou, .woocommerce-MyAccount-content) .wc-item-meta p {
	margin: 0;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot th {
	color: var(--muted);
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot .shipped_via {
	display: block;
	color: var(--muted);
	font-size: 0.75rem;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot tr:last-child th,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

/* The Total row is the one before Payment method */
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot tr:nth-last-child(2) th {
	color: var(--ink);
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 1.25rem;
}

/* Addresses side by side in panels */
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-customer-details {
	margin: 0;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-columns--addresses {
	display: grid;
	gap: var(--space-md);
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-columns--addresses::before,
:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-columns--addresses::after {
	display: none;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-column {
	width: auto;
	float: none;
	margin: 0;
	padding: 20px 24px;
	border: 1px solid rgb(237 234 227 / 0.06);
	border-radius: 6px;
	background: var(--surface);
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-column__title {
	font-size: 1.125rem;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--muted);
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
}

:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-customer-details address p {
	margin: 4px 0 0;
}

@media (min-width: 768px) {
	:is(.thankyou, .woocommerce-MyAccount-content) .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Page links are gold, which made the button text gold on gold */
.thankyou__actions .button,
.thankyou__actions .button:hover {
	color: var(--on-accent);
	text-decoration: none;
}

.thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
}

/* My account (5 Nov): the View button kept its dark text and WooCommerce's
   order number, date and status lose the browser's yellow highlight */
.woocommerce-MyAccount-content table .button,
.woocommerce-MyAccount-content table .button:hover {
	color: var(--on-accent);
	text-decoration: none;
}

/* On phones the drawer menu has My account, so the header keeps the logo room */
@media (max-width: 479px) {
	.site-header__account {
		display: none;
	}
}

.woocommerce-MyAccount-content mark {
	padding: 0;
	background: none;
	color: var(--ink);
	font-weight: 500;
}

.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
	margin-top: var(--space-xl);
}


/* Gold foil buttons (5 Nov, Marii): the foil gradient with a fine grain, and
   the shine sweeps across on hover. Overrides the flat gold from earlier. */
:where(button, input[type="submit"], input[type="button"]),
.button,
.product-detail__buy .single_add_to_cart_button,
body .wc-block-components-checkout-place-order-button,
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button,
.entry__content .wp-block-button__link {
	background-image: var(--foil-grain), var(--foil);
	background-size: 160px 160px, 240% 100%;
	background-position: 0 0, 0% 50%;
	background-blend-mode: soft-light, normal;
	transition: background-position 1.1s var(--ease), box-shadow 0.4s var(--ease), transform 0.15s var(--ease);
}

:where(button:hover, input[type="submit"]:hover, input[type="button"]:hover),
.button:not(.button--outline):hover,
.button:not(.button--outline):focus-visible,
.product-detail__buy .single_add_to_cart_button:hover,
.product-detail__buy .single_add_to_cart_button:focus-visible,
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button:hover,
.entry__content .wp-block-button__link:hover {
	background-image: var(--foil-grain), var(--foil);
	background-position: 0 0, 100% 50%;
	filter: none;
}

.product-detail__buy .single_add_to_cart_button {
	box-shadow: 0 12px 32px -14px rgb(200 138 42 / 0.55), inset 0 1px 0 rgb(255 240 200 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
	:where(button, input[type="submit"], input[type="button"]),
	.button,
	.product-detail__buy .single_add_to_cart_button {
		transition: none;
	}
}

/* Browser autofill on any form, dropdowns included, stays dark (5 Nov) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	-webkit-text-fill-color: var(--ink);
	caret-color: var(--ink);
	transition: background-color 9999s;
}

select {
	color-scheme: dark;
}

/* WhatsApp chat button (inc/whatsapp.php) */
.whatsapp-button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgb(205 174 98 / 0.45);
	border-radius: 50%;
	background: var(--surface);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
	color: var(--accent);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible {
	border-color: var(--accent);
	transform: translateY(-2px);
}

body.admin-bar .whatsapp-button {
	bottom: 92px;
}

/* The cookie notice sits above the chat button */
body:has(.whatsapp-button) .cookie-banner {
	bottom: 88px;
}

body.admin-bar:has(.whatsapp-button) .cookie-banner {
	bottom: 160px;
}

/* Dark controls (5 Nov, Guy and Marii): filters, tabs and secondary buttons
   match the sort menu and grid switch, dark on dark. Gold foil stays for the
   main calls to action: Add to cart, Notify me, Proceed to checkout, Place
   order, the home page button, Accept all and Continue shopping. */
body .pill,
body .woocommerce-MyAccount-navigation a,
body .button.button--outline,
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button,
body .woocommerce-MyAccount-content table .button,
body .button.matching__add,
body .button.product-detail__unavailable,
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button {
	padding: 0.65em 1.1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-button);
	background: var(--surface);
	box-shadow: none;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	filter: none;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

body .button.button--outline,
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button,
body .woocommerce-MyAccount-content table .button,
body .button.matching__add,
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button {
	color: var(--ink);
}

body .pill:hover,
body .woocommerce-MyAccount-navigation a:hover,
body .button.button--outline:hover,
body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body .woocommerce-error .button:hover,
body .woocommerce-MyAccount-content table .button:hover,
body .button.matching__add:hover,
body .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button:hover {
	border-color: rgb(237 234 227 / 0.28);
	background: var(--surface);
	color: var(--ink);
}

/* The chosen filter or tab: a step lighter, like the grid switch */
body .pill.is-active,
body .pill.is-active:hover,
body .woocommerce-MyAccount-navigation .is-active a,
body .woocommerce-MyAccount-navigation .is-active a:hover {
	border-color: rgb(237 234 227 / 0.3);
	background: #262523;
	color: var(--ink);
}

/* Sold out keeps the Add to cart size */
body .button.product-detail__unavailable {
	min-height: 60px;
	padding-block: 1.2em;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}