/*
 * Artsite: rules theme.json cannot express. Every colour, font and spacing
 * comes from the theme.json presets, so a style variation restyles all of it.
 * Layout approved in docs/mockup/scheda-opera.html.
 */

:root {
	--artsite-gutter: var(--wp--preset--spacing--40);
	--artsite-line: var(--wp--preset--color--line);
	--artsite-muted: var(--wp--preset--color--muted);
	--artsite-wide: var(--wp--custom--letter-spacing--wide, 0.12em);
	--artsite-title: var(--wp--custom--letter-spacing--title, 0.2em);
	--artsite-available: #2f7d4f;
	--artsite-reserved: #9a6412;
	--artsite-sold: var(--wp--preset--color--sold);
}

/* ---------- Basics ---------- */

img {
	height: auto;
	max-width: 100%;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

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

.skip-link.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	top: 0.5rem;
	left: 0.5rem;
}

.artsite-caps,
.artsite-nav,
.artsite-crumbs,
.artsite-year-nav,
.artsite-pager,
.artsite-share,
.artsite-status,
.artsite-visualise__title,
.artsite-button {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

.artsite-sep {
	border: 0;
	border-top: 1px solid var(--artsite-line);
	margin: 0;
}

/* ---------- Header and brand ---------- */

.artsite-header {
	position: relative;
	z-index: 20;
}

.artsite-brand {
	margin: 0;
}

.artsite-brand__logo {
	display: block;
	max-height: 3rem;
	width: auto;
}

/* ---------- Navigation ---------- */

.artsite-nav__list,
.artsite-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.artsite-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.6rem;
	align-items: center;
}

.artsite-nav__item {
	position: relative;
}

.artsite-nav__item.has-children {
	display: flex;
	align-items: center;
}

.artsite-nav__link {
	display: inline-block;
	padding: 0.35rem 0;
	color: inherit;
	text-decoration: none;
}

.artsite-nav__link:hover,
.artsite-nav__item.is-current > .artsite-nav__link,
.artsite-nav__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
}

.artsite-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.15rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.artsite-nav__sub-toggle::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.artsite-nav__sub-toggle[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}

.artsite-nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 10rem;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--artsite-line);
	display: none;
}

/* Without JavaScript: submenus open on hover and focus. */
.artsite-nav:not(.is-enhanced) .artsite-nav__item:hover > .artsite-nav__sub,
.artsite-nav:not(.is-enhanced) .artsite-nav__item:focus-within > .artsite-nav__sub,
.artsite-nav.is-enhanced .artsite-nav__sub-toggle[aria-expanded="true"] + .artsite-nav__sub {
	display: block;
}

.artsite-nav__toggle {
	border: 0;
	background: none;
	color: inherit;
	padding: 0.4rem 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.artsite-nav__toggle-close,
.artsite-nav.is-open .artsite-nav__toggle-open {
	display: none;
}

.artsite-nav.is-open .artsite-nav__toggle-close {
	display: inline;
}

@media (min-width: 1024px) {
	.artsite-nav__toggle {
		display: none;
	}
}

@media (max-width: 1023px) {
	/* html.artsite-js: the script will run; laid out as enhanced from the first paint. */
	.artsite-nav.is-enhanced .artsite-nav__panel,
	html.artsite-js .artsite-nav .artsite-nav__panel {
		display: none;
	}

	html.artsite-js .artsite-nav__toggle[hidden] {
		display: inline-block;
	}

	.artsite-nav.is-enhanced.is-open .artsite-nav__toggle {
		position: fixed;
		top: var(--wp--preset--spacing--30);
		right: var(--artsite-gutter);
		z-index: 102;
	}

	.artsite-nav.is-enhanced.is-open .artsite-nav__panel {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 101;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 5rem var(--artsite-gutter) 3rem;
		background: var(--wp--preset--color--base);
	}

	.artsite-nav.is-open .artsite-nav__list {
		flex-direction: column;
		gap: 1rem;
		font-size: var(--wp--preset--font-size--large);
		text-align: center;
	}

	.artsite-nav.is-open .artsite-nav__item.has-children {
		flex-wrap: wrap;
		justify-content: center;
	}

	.artsite-nav.is-open .artsite-nav__sub {
		position: static;
		flex-basis: 100%;
		border: 0;
		padding: 0.5rem 0 0;
		font-size: var(--wp--preset--font-size--medium);
	}

	html.artsite-nav-open {
		overflow: hidden;
	}

	/* Without JavaScript the list simply wraps under the brand. */
	.artsite-header__inner {
		flex-wrap: wrap !important;
	}

	/* With it, brand and "Menu" share one row. */
	.artsite-header__inner:has(.artsite-nav.is-enhanced),
	html.artsite-js .artsite-header__inner {
		flex-wrap: nowrap !important;
		gap: 1rem;
	}

	.artsite-header .artsite-brand {
		font-size: clamp(1rem, 4.6vw, 1.75rem);
		letter-spacing: 0.14em;
	}
}

/* ---------- Buttons, statuses ---------- */

.artsite-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.artsite-button:hover {
	opacity: 0.88;
	text-decoration: none;
}

.artsite-button--secondary {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.artsite-button:disabled {
	opacity: 0.5;
	cursor: progress;
}

.artsite-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.artsite-status__dot {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
}

.artsite-status--available { color: var(--artsite-available); }
.artsite-status--reserved { color: var(--artsite-reserved); }
.artsite-status--sold { color: var(--artsite-sold); }

/* ---------- Home: full-screen slideshow ---------- */

/*
 * The home page is exactly one screen: header, then the slideshow filling the
 * rest (no scrolling, no white bands), like the reference site.
 */
.home .wp-site-blocks {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
}

.home .wp-site-blocks > * {
	margin-block: 0;
}

.home .artsite-header {
	flex: none;
}

.artsite-home {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.artsite-slideshow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Dark, like the reference: sub-pixel rounding at the edges never shows as a light band. */
	background: #161616;
	margin: 0 !important;
}

/* Without JavaScript: a horizontal strip, one full-size slide per snap point. */
.artsite-slideshow__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.artsite-slideshow__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	margin: 0;
}

.artsite-slideshow__link,
.artsite-slideshow__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.artsite-slideshow__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

/* No detail: the whole artwork, uncropped, on the neutral ground. */
.artsite-slideshow__slide.is-fallback {
	background: var(--wp--preset--color--subtle);
}

.artsite-slideshow__slide.is-fallback .artsite-slideshow__image {
	object-fit: contain;
	padding: var(--artsite-gutter);
	box-sizing: border-box;
}

.artsite-slideshow__caption {
	position: absolute;
	left: var(--artsite-gutter);
	bottom: 1.5rem;
	margin: 0;
	padding: 0.3rem 0.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

/* With JavaScript: slides stacked, cross-fade of 1.2 s. */
.artsite-slideshow.is-enhanced .artsite-slideshow__track {
	display: block;
	overflow: hidden;
}

.artsite-slideshow.is-enhanced .artsite-slideshow__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.artsite-slideshow.is-enhanced .artsite-slideshow__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* Not needed yet: not rendered, so the browser does not load its image. Also
   before the script takes over (html.artsite-js is set in the head), or the
   strip layout would let lazy loading fetch the next slides with the page. */
.artsite-slideshow.is-enhanced .artsite-slideshow__slide.is-deferred,
html.artsite-js .artsite-slideshow:not(.is-enhanced) .artsite-slideshow__slide:not(:first-child) {
	display: none;
}

.artsite-slideshow.is-ready .artsite-slideshow__slide {
	transition: opacity 1.2s ease, visibility 1.2s;
}

/* Controls over the image, lower corners; colour follows the image tone. */
.artsite-slideshow__controls {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 calc(var(--artsite-gutter) - 0.75rem) 0.75rem;
	pointer-events: none;
	color: #fff;
}

.artsite-slideshow__controls[hidden] {
	display: none;
}

.artsite-slideshow.is-tone-light .artsite-slideshow__controls {
	color: #111;
}

.artsite-slideshow__controls button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

.artsite-slideshow.is-tone-light .artsite-slideshow__controls button {
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}

.artsite-slideshow__pause {
	font: inherit;
	font-size: 0.6875rem !important;
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
	padding: 0 0.75rem !important;
	opacity: 0.8;
}

.artsite-slideshow__pause:hover,
.artsite-slideshow__pause:focus-visible {
	opacity: 1;
}

.artsite-slideshow__arrows {
	display: flex;
	gap: 0;
}

.artsite-slideshow :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
	.artsite-slideshow.is-ready .artsite-slideshow__slide {
		transition: none;
	}
}

/* ---------- Archives ---------- */

.artsite-archive {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--60);
}

.artsite-archive-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.artsite-archive-header__title {
	margin: 0;
}

.artsite-year-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artsite-year-nav a {
	color: var(--artsite-muted);
	text-decoration: none;
}

.artsite-year-nav a[aria-current] {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.45em;
}

.artsite-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--50) var(--artsite-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.artsite-grid__link {
	display: grid;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
}

.artsite-grid__link:hover .artsite-grid__title {
	text-decoration: underline;
}

.artsite-grid__frame {
	/* Square field, the artwork contained inside it with its own proportions. */
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	aspect-ratio: 1;
	padding: 8%;
	background: var(--wp--preset--color--subtle);
}

.artsite-grid__image {
	/* Sized from its proportion (--artsite-ratio, set on the element) so the box is
	   right before the file arrives: full width if wider than the square, else full height. */
	width: calc(100% * min(1, var(--artsite-ratio, 1)));
	height: auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px -10px rgba(0, 0, 0, 0.25);
}

.artsite-grid__caption {
	display: grid;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
}

.artsite-grid__title {
	color: var(--wp--preset--color--contrast);
}

.artsite-grid__meta {
	color: var(--artsite-muted);
}

.artsite-grid__caption .artsite-status {
	margin-top: 0.25rem;
	font-size: 0.75rem;
}

/* ---------- Artwork page ---------- */

.artsite-artwork {
	padding-top: var(--wp--preset--spacing--30);
}

.artsite-artwork__layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(18rem, 4fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding-bottom: var(--wp--preset--spacing--50);
}

.artsite-artwork__layout > * {
	margin-block-start: 0 !important;
}

.artsite-artwork-media {
	display: grid;
	gap: 1rem;
}

.artsite-artwork-media {
	--artsite-media-height: min(78vh, 900px);
}

.artsite-artwork-media__stage {
	display: grid;
	place-items: center;
	min-height: var(--artsite-media-height);
}

/* Width from the image proportion (--artsite-ratio): the box is final before the file arrives. */
.artsite-artwork-media__frame {
	position: relative;
	display: block;
	width: min(100%, calc(var(--artsite-media-height) * var(--artsite-ratio, 1)));
	margin: 0;
	line-height: 0;
}

.artsite-artwork-media__zoom-link {
	display: block;
	cursor: zoom-in;
}

.artsite-artwork-media__image {
	width: 100%;
	height: auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
}

.artsite-artwork-media__zoom {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--artsite-line);
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	color: var(--wp--preset--color--contrast);
	line-height: 1.2;
	cursor: zoom-in;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

.artsite-artwork-media__zoom[hidden] {
	display: none;
}

.artsite-artwork-media__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artsite-artwork-media__thumbs a {
	display: block;
	width: 72px;
	height: 72px;
	border: 1px solid var(--artsite-line);
	overflow: hidden;
}

.artsite-artwork-media__thumbs a[aria-current] {
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.artsite-artwork-media__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.artsite-artwork-details {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	display: grid;
	gap: 1.5rem;
}

.artsite-crumbs {
	margin: 0;
	color: var(--artsite-muted);
}

.artsite-crumbs a {
	color: inherit;
	text-decoration: none;
}

.artsite-crumbs a:hover {
	text-decoration: underline;
}

.artsite-artwork-details__title {
	margin: 0;
}

.artsite-artwork-details__year {
	display: block;
	margin-top: 0.35rem;
	font-size: 1rem;
	letter-spacing: var(--artsite-wide);
	color: var(--artsite-muted);
}

.artsite-facts {
	display: grid;
	gap: 0.2rem;
	margin: 0;
}

.artsite-facts dt {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.artsite-facts dd {
	margin: 0;
}

.artsite-facts__notes {
	color: var(--artsite-muted);
	font-style: italic;
}

.artsite-artwork-details__description > :first-child {
	margin-top: 0;
}

.artsite-actions {
	display: grid;
	gap: 0.6rem;
}

.artsite-actions:empty {
	display: none;
}

.artsite-visualise {
	display: grid;
	gap: 0.2rem;
}

.artsite-visualise__title {
	margin: 1rem 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--artsite-muted);
}

.artsite-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	margin: 0;
	color: var(--artsite-muted);
}

.artsite-share a,
.artsite-share button {
	color: inherit;
	text-decoration: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.artsite-share a:hover,
.artsite-share button:hover {
	color: var(--wp--preset--color--contrast);
}

.artsite-pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 0 2.5rem;
	border-top: 1px solid var(--artsite-line);
}

.artsite-pager a {
	color: inherit;
	text-decoration: none;
	padding: 0.5rem 0;
}

.artsite-pager a:hover {
	text-decoration: underline;
}

.artsite-pager__count {
	color: var(--artsite-muted);
	text-align: center;
}

@media (max-width: 1023px) {
	.artsite-artwork__layout {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.artsite-artwork-media {
		--artsite-media-height: 70vh;
	}

	.artsite-artwork-media__stage {
		min-height: 0;
	}

	.artsite-artwork-details {
		position: static;
	}

	.artsite-actions .artsite-button {
		width: 100%;
	}

	.artsite-pager__count {
		display: none;
	}
}

/* ---------- Dialogs: lightbox, enquire ---------- */

.artsite-lightbox,
.artsite-dialog {
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.artsite-lightbox::backdrop,
.artsite-dialog::backdrop {
	background: rgba(20, 20, 20, 0.6);
}

.artsite-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
}

.artsite-lightbox[open] {
	display: grid;
	grid-template-rows: auto 1fr;
}

.artsite-lightbox__bar {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	padding: 0.75rem var(--artsite-gutter);
}

.artsite-lightbox__bar button {
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	min-height: 2.75rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

.artsite-lightbox__close {
	font-size: 1.8rem !important;
	line-height: 1;
}

.artsite-lightbox__viewport {
	overflow: auto;
	display: grid;
	place-items: center;
	padding: 0 var(--artsite-gutter) var(--artsite-gutter);
}

.artsite-lightbox__image {
	max-width: 100%;
	max-height: calc(100vh - 6rem);
	width: auto;
	cursor: zoom-in;
}

.artsite-lightbox.is-full .artsite-lightbox__viewport {
	place-items: start;
}

.artsite-lightbox.is-full .artsite-lightbox__image {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.artsite-dialog {
	width: min(34rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35);
}

/* Without JavaScript the enquiry form opens through its anchor. */
.artsite-dialog:target {
	display: block;
	position: static;
	margin: 1.5rem 0 0;
	box-shadow: none;
	border: 1px solid var(--artsite-line);
}

.artsite-dialog__inner {
	display: grid;
	gap: 1.1rem;
	padding: 2rem;
}

.artsite-dialog__header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
}

.artsite-dialog__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.artsite-dialog__close {
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.artsite-dialog__ref {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0.9rem;
	align-items: center;
	padding: 0.8rem;
	background: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
}

.artsite-dialog__ref img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.artsite-dialog__ref strong {
	font-weight: 400;
}

.artsite-form {
	display: grid;
	gap: 0.8rem;
}

.artsite-form p {
	margin: 0;
}

.artsite-form__field {
	display: grid;
	gap: 0.25rem;
}

.artsite-form label {
	font-size: var(--wp--preset--font-size--small);
}

.artsite-form input:not([type="checkbox"]),
.artsite-form textarea {
	font: inherit;
	padding: 0.6rem 0.7rem;
	border: 1px solid #767676;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	width: 100%;
}

.artsite-form__check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	color: var(--artsite-muted);
}

.artsite-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.artsite-form__status:empty {
	display: none;
}

.artsite-form__status.is-success,
.artsite-notice--success {
	color: var(--artsite-available);
}

.artsite-form__status.is-error,
.artsite-notice--error {
	color: var(--artsite-sold);
}

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

/* ---------- Contact ---------- */

.artsite-contact__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

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

.artsite-footer {
	border-top: 1px solid var(--artsite-line);
}

.artsite-footer__credits {
	margin: 0;
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

/* ---------- Shop on the artwork page (artsite-commerce) ---------- */

.artsite-price-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
}

.artsite-price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.artsite-price-note {
	margin: -0.9rem 0 0;
	color: var(--artsite-muted);
	font-size: var(--wp--preset--font-size--small);
}

.artsite-add-to-cart {
	margin: 0;
}

.artsite-add-to-cart .artsite-button,
.artsite-actions > .artsite-button {
	width: 100%;
}

.artsite-cart-count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 0.35em;
	margin-left: 0.25em;
	border-radius: 1em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.6875rem;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0;
}

.artsite-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.artsite-dialog__actions .artsite-button {
	flex: 1 1 12rem;
	white-space: nowrap;
}

/* ---------- Visualise tools (artsite-viewer) ---------- */

.artsite-tool {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.35rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.artsite-tool svg {
	flex: none;
}

.artsite-tool:hover {
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

/* ---------- Cookie consent (artsite-core) ---------- */

body:not(.home) {
	padding-bottom: var(--artsite-consent-space, 0px);
}

.artsite-consent {
	position: fixed;
	z-index: 90;
	left: var(--artsite-gutter);
	right: var(--artsite-gutter);
	bottom: var(--artsite-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--artsite-line);
	box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.35);
	font-size: var(--wp--preset--font-size--small);
}

.artsite-consent[hidden] {
	display: none;
}

.artsite-consent__text {
	flex: 1 1 26rem;
}

.artsite-consent__text p {
	margin: 0;
}

.artsite-consent__title {
	margin-bottom: 0.25rem !important;
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

.artsite-consent__text a {
	color: inherit;
	text-decoration: underline;
}

.artsite-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.artsite-consent__actions .artsite-button {
	min-height: 2.75rem;
	padding: 0.6rem 1.1rem;
}

.artsite-consent__categories {
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.artsite-consent__categories label strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
}

.artsite-footer__links {
	margin: 0;
}

.artsite-consent-settings {
	border: 0;
	background: none;
	padding: 0;
	color: var(--artsite-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
	cursor: pointer;
	min-height: 2.75rem;
}

.artsite-consent-settings:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.artsite-consent {
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.5rem;
	}

	.artsite-consent__actions .artsite-button {
		flex: 1 1 100%;
	}
}

/* ---------- Links inside running text: underlined, not colour only (WCAG 1.4.1) ---------- */

.wp-block-post-content p a,
.wp-block-post-content li a,
.wp-block-post-content td a,
.artsite-artwork-details__description a,
.artsite-form a,
.artsite-consent a,
.artsite-dialog p a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Wide tables scroll on small screens; the scroller is focusable (theme adds tabindex). */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* ---------- Classic cart and checkout (WooCommerce shortcodes) ---------- */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	accent-color: var(--wp--preset--color--contrast);
}

/* Every artwork is unique: no quantity to change, so no "Update cart". */
.woocommerce-cart-form .actions button[name="update_cart"] {
	display: none;
}

.woocommerce-cart-form .actions:not(:has(.coupon)) {
	display: none;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--artsite-wide);
	text-transform: uppercase;
	padding: 1rem 1.5rem;
}

.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box {
	border-radius: 0;
	background: var(--wp--preset--color--subtle);
	color: inherit;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--subtle);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--artsite-line);
}

.woocommerce table.shop_table {
	border-radius: 0;
	border-color: var(--artsite-line);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-top-color: var(--artsite-line);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	border-radius: 0;
}

/* Studio pickup: where to collect, under the option. */
.artsite-pickup-note {
	display: block;
	margin: 0.2rem 0 0 1.5rem;
	color: var(--artsite-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}