/* ==========================================================================
   Novido Firenze — homepage sections
   ========================================================================== */

.section { padding: 30px 0; }
.section--flush { padding-top: 18px; }

.section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.section__title {
	font-size: clamp(23px, 1.7vw, 32px);
	font-weight: 700;
	letter-spacing: .005em;
	color: var(--c-ink);
}

/* --- Carousel controls ---------------------------------------------------- */

.carousel-nav { display: flex; gap: 4px; }

.carousel-btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--c-ink);
	transition: background .2s ease;
}
.carousel-btn:hover { background: var(--c-soft); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(460px, 41vw, 770px);
	padding: 60px clamp(40px, 5vw, 96px);
	background-color: #4a463f;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

/* --- Hero background video ------------------------------------------------- */

.hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Clicks fall through to the CTA and the two side links underneath. */
	pointer-events: none;
	z-index: 0;
}

/* A YouTube iframe is locked to 16:9, but the hero is a different shape at
   every viewport width. Sizing the iframe to the larger of "full width at 16:9"
   and "full height at 16:9", then centring it, makes it behave like
   object-fit: cover — it always fills, and the overflow is cropped. */
.hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.7778vh);
	height: max(100%, 56.25vw);
	transform: translate(-50%, -50%);
	border: 0;
}

/* Scrim: the video is busy, and the white display type has to stay readable
   over whatever frame happens to be on screen. */
.hero--video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(26, 20, 19, .34);
}

/* Anyone who has asked their OS for reduced motion gets the poster image
   instead of a looping video. */
@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
}

.hero__content { position: relative; z-index: 2; }

.hero__eyebrow {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 3.9vw, 74px);
	line-height: 1;
	letter-spacing: .01em;
}

.hero__year {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(104px, 12.2vw, 236px);
	line-height: .9;
	letter-spacing: .02em;
}

.hero__kicker {
	margin: 14px 0 30px;
	font-size: clamp(13px, 1.05vw, 19px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .42em;
	opacity: .9;
}

.hero__side {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #fff;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.hero__side:hover { color: #fff; border-bottom-color: #fff; }
.hero__side--left { left: clamp(24px, 16%, 320px); }
.hero__side--right { right: clamp(24px, 16%, 320px); }

/* --- Product grid --------------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: var(--grid-gap);
}

.product-grid--scroll {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--cols, 3) - 1) * var(--grid-gap)) / var(--cols, 3));
	overflow-x: auto;
	/* Without this the track's off-screen cards were counted into the document's
	   scrollable width, so the whole page could be dragged 818px sideways even
	   though the track itself scrolled correctly. Clipping an ancestor does not
	   help — the containment has to be declared on the scroller itself. */
	contain: paint;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.product-grid--scroll::-webkit-scrollbar { display: none; }
.product-grid--scroll > * { scroll-snap-align: start; }

/* Every card fills its grid cell top to bottom, so a two-line product name
   never leaves its neighbours short. The body flexes and the price is pinned
   to the bottom, which keeps prices on one line across the whole row. */
.card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.card__media {
	position: relative;
	/* Portrait 2:3, matching the catalogue photography (1600x2400) exactly, so
	   object-fit: cover has nothing to crop away. Also the proportion used by
	   Net-a-Porter and Mytheresa. */
	aspect-ratio: 2 / 3;
	background: var(--c-media);
	overflow: hidden;
}

.card__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

.card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease, transform .5s ease;
}
.card__img.is-active { opacity: 1; }
.card:hover .card__img.is-active { transform: scale(1.03); }

.badge--sale {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 2px;
	background: var(--c-green);
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* Hover slider: prev/next arrows and dot indicators over the card image. */

.card-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--c-ink);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .2s ease, background .2s ease;
}
.card-slider__arrow .ico { width: 12px; height: 12px; }
.card-slider__arrow--prev { left: 8px; }
.card-slider__arrow--next { right: 8px; }

.card:hover .card-slider__arrow,
.card:hover .card-slider__dots {
	opacity: 1;
}
.card-slider__arrow:hover { background: #fff; }

.card-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 5px;
	opacity: 0;
	transition: opacity .2s ease;
}

.card-slider__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.card-slider__dot.is-active { background: var(--c-primary); box-shadow: none; }

/* Title across the top, then price and swatches sharing one baseline row —
   price left, colours right. The 1fr second row pushes that row to the bottom
   of the card, which is what keeps prices aligned across a grid row. */
/* Both rows sized to content — the price sits straight under the title rather
   than being pushed to the bottom of the card. Prices still line up across a
   row because every title occupies exactly two lines, so each body starts its
   price row at the same offset. Any leftover height falls below the price,
   where it is invisible. */
.card__body {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"title title"
		"price swatches";
	align-content: start;
	column-gap: 10px;
	padding: 10px 2px 0;
}

/* Reserved at exactly two lines: a one-line name still occupies two, so the
   swatches and price below it line up across the row. Longer names ellipsize
   rather than pushing the card taller. */
.card__title {
	grid-area: title;
	font-size: 17px;
	font-weight: 500;
	color: var(--c-ink);
	/* Height follows the text: a one-line name takes one line, so nothing is
	   reserved beneath it — that empty second line was most of the gap. The
	   anchor still caps it at two lines, so a long name cannot run away.

	   line-height:0 here kills the heading's own strut. The clamped anchor is
	   an inline-level box, so the strut was padding the heading out to 40px
	   around 23px of text; the anchor restores the real line-height below. */
	line-height: 0;
	min-width: 0;
}

/* Woo ships `ul.products li.product h3 { padding: .5em 0 }` at (0,2,3), which
   put 8.5px above and below every product name — 17px of phantom space that
   read as a gap between the title and the price. Two selectors because the
   same card also renders outside ul.products on the homepage rows. */
.card h3.card__title,
.woocommerce ul.products li.product h3.card__title {
	margin: 0;
	padding: 0;
}

/* The clamp sits on the anchor, not the heading. A grid item has its display
   blockified, which turns `-webkit-box` into `block` and silently disables
   line-clamp — so titles ran to three lines and rows stopped matching. The
   anchor is not a grid item, so the clamp survives there and supplies the
   ellipsis. */
.card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* The heading's own line-height is 0 to kill its strut, so the text leading
	   is set here — this is what actually spaces the two title lines.
	   vertical-align:top removes the baseline gap an inline-level box would
	   otherwise leave underneath. */
	line-height: 1.80;
	vertical-align: top;
}

/* Right-aligned, sharing the price's baseline. Wraps rather than overflowing
   for the wide families — Pantofola H Style carries nine colours. */
.swatches {
	grid-area: swatches;
	align-self: center;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 7px;
	margin: 5px 0 0;
}

.swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.swatch:hover,
.swatch:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .45); }

.card__price {
	grid-area: price;
	align-self: center;
	margin-top: 5px;
	font-size: 17px;
	font-weight: 500;
	color: var(--c-ink);
}

.card__price del {
	margin-right: 6px;
	color: var(--c-muted);
	text-decoration: line-through;
}

.card__price ins {
	text-decoration: none;
	color: var(--c-sale);
}

.card__price .woocommerce-Price-amount { font-size: inherit; }

/* --- Twin promo banners ---------------------------------------------------- */

.promo-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap);
}

.promo {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(360px, 28vw, 540px);
	padding: 48px;
	background-color: #6d523c;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

/* Scrim for the centred white headline.
   Both promo photographs run the full range inside the text band — near-black
   shadow next to a ~0.9 specular highlight — so a flat wash either fails on
   the bright spots or flattens the whole picture. This is weighted to the
   centre where the type sits and falls away at the corners, so the imagery
   stays open where nothing is written over it. */
.promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 70% 60% at center,
		rgba(26, 20, 19, .62) 0%,
		rgba(26, 20, 19, .52) 45%,
		rgba(26, 20, 19, .18) 100%
	);
	transition: opacity .3s ease;
}
.promo:hover::after { opacity: .88; }

.promo__inner { position: relative; z-index: 2; display: block; }

.promo__title {
	display: block;
	max-width: 12ch;
	margin: 0 auto;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(30px, 2.6vw, 48px);
	line-height: 1.15;
	color: #fff;
}

.promo__text {
	display: block;
	margin-top: 14px;
	font-size: clamp(12.5px, .9vw, 16px);
	letter-spacing: .02em;
	opacity: .85;
}

/* --- Promotions: dark sale card -------------------------------------------- */

.sale-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 24px;
	background: var(--c-dark);
	color: #efeade;
	text-align: center;
}

.sale-card__eyebrow {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .22em;
	opacity: .55;
}

.sale-card__title {
	margin: 14px 0 22px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(30px, 3.1vw, 60px);
	line-height: 1.1;
	color: #ece5d4;
}
.sale-card__title span { display: block; }

/* --- Full-bleed video banner ------------------------------------------------ */

.video-banner {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 40vw, 770px);
	margin: 34px 0;
	padding: 60px 20px;
	background-color: #37342e;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

.video-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .26);
}

.video-banner__inner { position: relative; z-index: 2; }

.play-btn {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 22px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	transition: background .25s ease, transform .25s ease;
}
.play-btn:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }
.play-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* --- Video modal ------------------------------------------------------------ */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
}
.video-modal[hidden] { display: none; }

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 20, 19, .9);
	animation: video-modal-fade .25s ease;
}

.video-modal__dialog {
	position: relative;
	z-index: 2;
	width: min(1180px, 100%);
	animation: video-modal-rise .28s cubic-bezier(.2, .7, .3, 1);
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.video-modal__frame video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
}

.video-modal__close {
	position: absolute;
	top: -52px;
	right: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	transition: opacity .2s ease;
}
.video-modal__close:hover { opacity: .6; }
.video-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes video-modal-fade { from { opacity: 0; } }
@keyframes video-modal-rise {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
	.video-modal__backdrop,
	.video-modal__dialog { animation: none; }
}

/* On short or narrow screens the close button has no room above the frame, so
   it moves inside the top-right corner of the video instead. */
@media (max-width: 640px), (max-height: 520px) {
	.video-modal__close {
		top: 6px;
		right: 6px;
		background: rgba(0, 0, 0, .55);
		border-radius: 50%;
		font-size: 28px;
	}
}

.video-banner__eyebrow {
	font-size: clamp(11px, .85vw, 14.5px);
	text-transform: uppercase;
	letter-spacing: .38em;
	opacity: .9;
}

.video-banner__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(54px, 8vw, 154px);
	line-height: 1.05;
}

.video-banner__text {
	margin-top: 12px;
	font-size: clamp(12.5px, .9vw, 16px);
	opacity: .8;
}

/* --- Customer opinions ------------------------------------------------------ */

.opinions__grid {
	display: grid;
	grid-template-columns: clamp(240px, 20vw, 360px) 1fr;
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
	padding: clamp(28px, 3vw, 56px) clamp(24px, 2.6vw, 48px);
	background: var(--c-soft);
}

.score { text-align: center; }

.score__word {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(28px, 2.2vw, 42px);
	color: var(--c-ink);
}

.score__num {
	font-family: var(--font-serif);
	font-size: clamp(76px, 6.4vw, 120px);
	line-height: 1;
	color: var(--c-ink);
}

.score__votes {
	margin-top: 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--c-muted);
}

.opinions__grid > * { min-width: 0; }

.opinions__carousel { position: relative; min-width: 0; }

.opinions__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--grid-gap) * 2) / 3);
	gap: var(--grid-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.opinions__track::-webkit-scrollbar { display: none; }
.opinions__track > * { scroll-snap-align: start; }

.opinion {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: clamp(20px, 1.8vw, 34px) clamp(18px, 1.6vw, 30px);
	background: #fff;
}

.stars { display: flex; gap: 2px; font-size: 11.5px; }
.star { color: #d3d3cb; }
.star--on { color: var(--c-ink); }

.opinion__text {
	flex: 1;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-body);
}

.opinion__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Initials, not a photo — see opinions.php. */
.opinion__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
	background: var(--c-primary-100);
	color: var(--c-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
}

.opinion__author {
	display: block;
	font-size: 12.5px;
	color: var(--c-ink);
}

.opinion__product {
	display: block;
	font-size: 11px;
	color: var(--c-muted);
}

.carousel-btn--float {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.carousel-btn--prev { left: -14px; }
.carousel-btn--next { right: -14px; }

/* --- Feature strip ------------------------------------------------------------ */

.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
}

.feature {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 28px;
	border: 1px solid var(--c-line);
	font-size: 14.5px;
	color: var(--c-body);
}

.feature .ico { color: var(--c-ink); flex: none; }

/* --- Responsive ---------------------------------------------------------------- */

/* Display type scales via clamp() above, so these only change layout. */

@media (max-width: 1080px) {
	.opinions__grid { grid-template-columns: 200px 1fr; }
	.opinions__track { grid-auto-columns: calc((100% - var(--grid-gap)) / 2); }
}

@media (max-width: 860px) {
	.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.product-grid--scroll { grid-template-columns: none; grid-auto-columns: 58%; }
	.promo-duo { grid-template-columns: 1fr; }
	.features { grid-template-columns: 1fr; }
	.opinions__grid { grid-template-columns: 1fr; }
	.opinions__track { grid-auto-columns: 80%; }
	.carousel-btn--prev { left: 2px; }
	.carousel-btn--next { right: 2px; }
}

@media (max-width: 560px) {
	.hero { padding: 40px 20px; }
	.hero__side { display: none; }
	.product-grid--scroll { grid-auto-columns: 78%; }
}

/* --- Editorial blocks (savoir-faire, care) ---------------------------------- */

.editorial__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}

.editorial--reverse .editorial__media { order: 2; }

.editorial__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-soft);
}

.editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.editorial__body { max-width: 52ch; }

.editorial__eyebrow {
	font-size: 13.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--c-muted);
}

.editorial__title {
	margin: 14px 0 20px;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(30px, 3vw, 54px);
	line-height: 1.1;
	color: var(--c-ink);
}

.editorial__text {
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.75;
	color: var(--c-body);
}
.editorial__text + .editorial__text { margin-top: 14px; }

/* Craft facts */

/* Fixed 3 columns: the long labels wrap inside their column instead of
   pushing a fact onto its own row. */
.facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 30px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--c-line);
}

.fact { min-width: 0; }

.fact__value {
	font-family: var(--font-serif);
	font-size: clamp(26px, 2vw, 38px);
	line-height: 1;
	color: var(--c-ink);
}

.fact__label {
	margin: 8px 0 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-muted);
}

/* Service steps */

.steps {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	display: flex;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--c-line);
}

.step__n {
	flex: none;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--c-muted);
	padding-top: 3px;
}

.step__body { display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: 17px; font-weight: 600; color: var(--c-ink); }
.step__text { font-size: 15px; line-height: 1.6; color: var(--c-body); }

/* Arrow link */

.link-arrow {
	display: inline-block;
	margin-top: 28px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--c-ink);
	font-size: 13.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--c-ink);
	transition: opacity .2s ease;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { opacity: .6; }

/* --- Provenance strip -------------------------------------------------------- */

.provenance {
	background: var(--c-panel);
	padding: 22px 0;
}

.provenance__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 40px;
}

.provenance__mark {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(23px, 1.8vw, 34px);
	color: var(--c-ink);
}

.provenance__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	letter-spacing: .04em;
	color: var(--c-body);
}

.provenance__list li { position: relative; }
.provenance__list li + li::before {
	content: "";
	position: absolute;
	left: -19px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-muted);
	transform: translateY(-50%);
}

/* Sale card note */

.sale-card__note {
	margin: -8px 0 20px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .6;
	max-width: 26ch;
}

@media (max-width: 860px) {
	.editorial__grid { grid-template-columns: 1fr; gap: 26px; }
	.editorial--reverse .editorial__media { order: 0; }
	.editorial__media { aspect-ratio: 16 / 11; }
	.editorial__body { max-width: none; }
	.facts { gap: 20px; }
	.provenance__inner { justify-content: flex-start; }
}

/* The swatch for the colour you are already looking at. */
.swatch.is-current {
	box-shadow: inset 0 0 0 1px rgba(26, 20, 19, .18), 0 0 0 1.5px #fff, 0 0 0 3px var(--c-ink);
}