/* ------------------------------------------------------------------ type */
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("../fonts/texgyreheros-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("../fonts/texgyreheros-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ system: the whole of it */
:root {
	--font: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--fs-title: 24px;   /* page titles (H1), bold. Trial 1 Oct (Ben): 24 = same as H2; was 44; try 32 */
	--fs-display: 44px; /* exhibition titles and the home hero title only (Ben, 2 Oct; artwork + edition titles back to 24) */
	--fs-head: 24px;    /* section headings, previous/next, wordmark, bold */
	--fs-body: 17px;    /* body, nav, captions, exhibition texts */
	--fs-small: 13px;   /* labels, dates, materials, footer, small links */

	--lh-title: 1.1;
	--lh-text: 1.5;
	--lh-long: 1.6;
	--tracking-title: -0.02em;

	--ink: #111111;
	--grey: #6B6B6B;
	--paper: #FFFFFF;
	--line: 1px solid var(--ink);   /* fields */
	--rule: #E6E6E6;                 /* dividers (Ben, 2 Oct: pale, no colour; F2F2F2 was the first idea) */
	--line-soft: 1px solid var(--rule);

	--gutter-chrome: 48px;  /* header, footer */
	--gutter: 64px;         /* content */
	--narrow: 1120px;       /* = 160 px side padding at 1440 px */
	--col-gap: 24px;
	--section: 200px;
	--block: 64px;          /* gap inside a section */
	--title-gap: var(--block);   /* page title → first content, on every list and info page (Ben, 2 Oct) */

	--ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 1100px) {
	:root { --gutter-chrome: 32px; --gutter: 40px; --section: 140px; --block: 48px; }
}
@media (max-width: 760px) {
	:root { --gutter-chrome: 20px; --gutter: 20px; --col-gap: 16px; --section: 96px; --block: 40px; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;   /* never fake an italic */
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em, i, cite, address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

a { color: inherit; text-decoration: none; }

/* Links: underlined with a 1 px border */
.u, .prose a {
	border-bottom: 1px solid currentColor;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.u:hover, .prose a:hover { color: var(--grey); }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 10; width: auto; height: auto; clip: auto;
	background: var(--paper); padding: 8px 12px; border: var(--line);
}

/* type roles */
.t-title {
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--tracking-title);
	overflow-wrap: break-word;
	hyphens: auto;
}
.t-display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tracking-title); }
.t-head { font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tracking-title); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-text); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-text); }
.t-grey { color: var(--grey); }
.t-bold { font-weight: 700; }

/* ------------------------------------------------------------------ layout */
.wrap { padding-inline: var(--gutter); }
.wrap--narrow { padding-inline: max(var(--gutter), calc((100% - var(--narrow)) / 2)); }

.site-main { padding-top: 72px; padding-bottom: var(--section); }
.section { margin-top: var(--section); }
.section--first { margin-top: var(--title-gap); }
.section-head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
	margin-bottom: 32px;
}
.section-head > * { flex-shrink: 0; }

.grid12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
}

.more { margin-top: 40px; }

/* ------------------------------------------------------------------ header */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 40px;
	padding: 32px var(--gutter-chrome) 0;
	view-transition-name: site-header;
}
.site-header > * { flex-shrink: 0; }

.wordmark {
	font-size: 20px;   /* Ben, 2 Oct: a little smaller than the 24 px headings */
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: 0;
	text-transform: uppercase;   /* the only uppercase text */
}

.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 16px; }   /* menu one point under body (Ben, 2 Oct) */
.nav > li { flex-shrink: 0; }
.nav a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.nav a:hover, .nav a[aria-current] { border-bottom-color: currentColor; }
.nav .is-muted a { color: var(--grey); }

/* Mobile menu: a text button, no box. Without JS the nav simply stays visible. */
.nav-toggle {
	display: none;
	border: 0; background: none; padding: 0; margin-left: auto;
	font: inherit; color: var(--ink); cursor: pointer;
	border-bottom: 1px solid transparent;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-bottom-color: currentColor; }
@media (max-width: 760px) {
	.js .nav-toggle { display: block; }
	.js .site-nav { display: none; flex-basis: 100%; }
	.js .site-nav.is-open { display: block; }
	/* opens under "Menu", right-aligned (Ben, 2 Oct). Items settle quickly (4 px, 180 ms) but fade in softly (450 ms),
	   30 ms apart — quick, not abrupt. */
	.js .site-nav .nav { flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; padding: 16px 0 8px; }
	.js .site-nav.is-open .nav > li { animation: wh-menu-drop .18s var(--ease) both, wh-menu-fade .45s ease-out both; }
	.js .site-nav.is-open .nav > li:nth-child(2) { animation-delay: .03s; }
	.js .site-nav.is-open .nav > li:nth-child(3) { animation-delay: .06s; }
	.js .site-nav.is-open .nav > li:nth-child(4) { animation-delay: .09s; }
	.js .site-nav.is-open .nav > li:nth-child(5) { animation-delay: .12s; }
	.js .site-nav.is-open .nav > li:nth-child(n+6) { animation-delay: .15s; }
}
@keyframes wh-menu-drop { from { transform: translateY(-4px); } to { transform: none; } }
@keyframes wh-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .site-nav.is-open .nav > li { animation: none; } }

/* ------------------------------------------------------------------ footer */
.site-footer {
	border-top: var(--line-soft);   /* pale like every other divider (Ben, 2 Oct) */
	margin-inline: var(--gutter-chrome);
	padding: 40px 0 48px;
	font-size: var(--fs-small);
	line-height: var(--lh-text);
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-cols > * { flex-shrink: 0; }
.footer-cols .wordmark { margin-right: auto; }
.footer-links li + li, .footer-links + .footer-links { margin-top: 2px; }
.footer-links a:hover, .legal-links a:hover { border-bottom: 1px solid currentColor; }
.site-footer address a, .visit-big a { color: inherit; border-bottom: 1px solid currentColor; }   /* "by appointment" → Contact */
.site-footer address a:hover, .visit-big a:hover { color: var(--ink); }

.newsletter { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.newsletter-row { display: flex; gap: 16px; align-items: baseline; border-bottom: var(--line); }
.newsletter input {
	flex: 1; min-width: 0; border: 0; padding: 6px 0; background: none;
	font: inherit; color: var(--ink); border-radius: 0;
}
.newsletter input::placeholder { color: var(--grey); }
.newsletter input:focus { outline: none; }
.newsletter button {
	-webkit-appearance: none; appearance: none; border: 0; border-radius: 0; background: none; box-shadow: none;
	padding: 0; font: inherit; color: var(--ink); cursor: pointer; flex-shrink: 0;
	text-decoration: underline; text-underline-offset: .2em;   /* a text link, like every other action that isn't a form submit */
}
.newsletter button:hover { color: var(--grey); }
.newsletter-note { color: var(--grey); min-height: 1.5em; }

.footer-legal { margin-top: 48px; color: var(--grey); }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 0; }
.legal-links > li { flex-shrink: 0; }
.legal-links > li + li::before { content: "·"; padding: 0 12px; }

/* ------------------------------------------------------------------ images */
.media { position: relative; }
.media img { width: 100%; }

.media--contain { display: flex; justify-content: center; }
.media--contain img { width: auto; max-width: 100%; }

.ratio-3x2 { aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.ratio-3x2 img { width: 100%; height: 100%; object-fit: cover; }

.caption { margin-top: 12px; }

/* fade-in on scroll: only once JS is running, never above the fold */
.js .reveal { opacity: 0; transition: opacity .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; }

/* quiet hover on linked images */
a .ratio-3x2 img, a.work-image img { transition: opacity .3s var(--ease); }
a:hover .ratio-3x2 img, a.work-image:hover img { opacity: .88; }

/* ------------------------------------------------------------------ home: hero */
.hero-image {
	display: flex; justify-content: center;
}
.hero-image img {
	width: auto;
	max-width: 100%;
	max-height: min(760px, 66vh);   /* title stays above the fold on a laptop */
}
/* Hero variants (Ben, 2 Oct, #25; ?hero=a|b|c, default a). Desktop: image edge to edge; phones keep the side margins.
   --hero-top = header + the page's top padding, so the hero fills exactly the rest of the window. */
.hero { --hero-top: 132px; }
@media (max-width: 760px) { .hero { --hero-top: 109px; } }   /* shorter header + top padding on phones */
.hero--a, .hero--b { display: flex; flex-direction: column; height: calc(100svh - var(--hero-top) - 24px); min-height: 460px; }
.hero--a > a, .hero--b > a { display: flex; flex: 1 1 auto; min-height: 0; }
.hero--a .hero-image, .hero--b .hero-image { flex: 1 1 auto; min-height: 0; width: 100%; }
.hero--a .hero-image img, .hero--b .hero-image img,
.hero--c .hero-image img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 50%; }
.hero--b .hero-text { order: -1; margin: 0 0 24px; }
.hero--c { position: relative; }
.hero--c .hero-image { position: relative; height: calc(100svh - var(--hero-top) - 24px); min-height: 420px; }
.hero--c .hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.hero--c .hero-text { position: absolute; left: calc(var(--gutter) + 20px); right: calc(var(--gutter) + 20px); bottom: 32px; margin: 0; color: #fff; z-index: 1; }
.hero--c .hero-text a, .hero--c .hero-text .t-grey { color: #fff; }
.hero--c .hero-text .t-grey { opacity: .85; }
@media (min-width: 761px) {
	.hero .hero-image { margin-inline: calc(var(--gutter) * -1); }
	.hero--a .hero-image, .hero--b .hero-image { width: auto; }
	.hero--c .hero-text { left: var(--gutter); right: var(--gutter); bottom: 48px; }
}
.hero-text { margin-top: 32px; }
.hero-text .t-title { margin-top: 6px; }
.hero-text .t-body { margin-top: 12px; }

/* home: upcoming */
.upcoming { align-items: end; row-gap: 24px; }
.upcoming-image { grid-column: 1 / span 7; }
.upcoming-text { grid-column: 9 / span 4; }
.upcoming-text .t-head { margin-top: 8px; }
.upcoming-text .t-body { margin-top: 16px; }
.upcoming-text .u { display: inline-block; margin-top: 24px; }

/* cards: exhibitions */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--col-gap); }
.card .caption > span { display: block; }

/* ------------------------------------------------------------------ exhibition + artist + artwork pages */
.page-head--split { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.page-head .t-small { margin-bottom: 10px; }
.page-head .t-body { margin-top: 14px; }

.install { margin-top: var(--block); }
.install .caption { text-align: left; }
.install img { max-height: 92vh; width: auto; margin-inline: auto; }

.about { margin-top: var(--block); align-items: stretch; }
.facts { grid-column: 1 / span 3; align-self: start; }
.fact + .fact { margin-top: 20px; }
.fact dt { font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); }
.fact dd { font-size: var(--fs-body); line-height: var(--lh-text); }

/* The text column is exactly as tall as the facts column:
   height 0 takes it out of the row-height calculation, min-height 100% stretches it back. */
.readmore {
	grid-column: 5 / span 7;
	max-width: 620px;
	display: flex;
	flex-direction: column;
}
.js .readmore.is-clamped { height: 0; min-height: 100%; }
.prose { font-size: var(--fs-body); line-height: var(--lh-long); }
.js .readmore.is-clamped .prose {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.readmore-foot { flex-shrink: 0; padding-top: 8px; line-height: var(--lh-text); }
.readmore-toggle {
	border: 0; border-bottom: 1px solid currentColor; background: none; padding: 0;
	font: inherit; color: inherit; cursor: pointer;
}
.readmore-toggle:hover { color: var(--grey); }

/* Enquire (Ben, 2 Oct): the primary button, full column width (JS only); opened, it shrinks to a 52 px × box on the
   left (Ben: shrinks to the left) that closes the form — "Send enquiry" stays the one call to action. */
.enquire-bar { display: none; }
.js .enquire-bar { display: flex; justify-content: flex-start; }
.enquire-toggle.button-solid { position: relative; width: 100%; min-width: 0; padding: 0; overflow: hidden; white-space: nowrap; cursor: pointer;
	transition: width .4s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.enquire-toggle[aria-expanded="true"] { width: 52px; }
.enquire-label { transition: opacity .15s var(--ease); }
.enquire-toggle[aria-expanded="true"] .enquire-label { opacity: 0; }
.enquire-x { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0;
	transition: opacity .2s var(--ease); }
.enquire-x::before, .enquire-x::after { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 100%;
	margin-left: -.75px; background: currentColor; transform: rotate(45deg); }
.enquire-x::after { transform: rotate(-45deg); }
.enquire-toggle[aria-expanded="true"] .enquire-x { opacity: 1; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .enquire-toggle.button-solid, .enquire-label, .enquire-x { transition: none; } }
.enquire { margin-top: 24px; max-width: 620px; scroll-margin-top: 96px; }
.enquire[hidden] { display: none; }
/* sent (Ben, 3 Oct): the × goes — nothing left to close — and the thanks takes the form's place, right under the facts */
.product-buy:has(.ff-message-success) .enquire-bar { display: none; }
.enquire:has(.ff-message-success) { margin-top: 0; }
.readmore:not(.is-clamped) .readmore-toggle, .readmore:not(.is-clamped) .readmore-sep { display: none; }
.install.section { margin-top: var(--section); }
.readmore:not(.is-clamped) .readmore-foot { padding-top: 24px; }

.prose p + p { margin-top: 1em; }

/* works */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--col-gap); }   /* 3 across (Ben, 1 Oct), like the shop */
@media (max-width: 900px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-image {
	display: flex; align-items: flex-end; justify-content: center;
	aspect-ratio: 4 / 5; background: #fff;
}
.work-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.work .caption { margin-top: 16px; }
.work .caption .t-small { margin-top: 2px; }
.work .caption .u { display: inline-block; margin-top: 8px; }

.pager {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
	border-top: var(--line-soft); padding-top: 24px;
}
.pager a { display: block; transition: color .2s var(--ease); }
.pager a:hover { color: var(--grey); }
.pager .next { text-align: right; }
.pager .t-head { display: block; margin-top: 6px; }

/* archives */
.year + .year { margin-top: 120px; }
.year .t-head { margin-bottom: 32px; }

.group-label { margin-bottom: 16px; }
.group-head { margin-bottom: 32px; }
.t-title.group-head { margin-bottom: var(--title-gap); }
.artist-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px var(--col-gap); align-items: end; }
.artist-card .work-image { margin-bottom: 12px; }
.artist-card > a, .artist-card > span { display: block; }
.artist-card a:hover .t-bold { color: var(--grey); }
.artist-list { columns: 4; column-gap: var(--col-gap); margin-top: 32px; }   /* 4, on the Featured cards' grid (Ben, 2 Oct) */
.artist-list li { break-inside: avoid; padding: 2px 0; }
.artist-list a { border-bottom: 1px solid currentColor; }
.artist-list a:hover { color: var(--grey); }

/* artwork */
.artwork-images > * + * { margin-top: var(--block); }
.artwork-images img { max-height: 88vh; width: auto; margin-inline: auto; }
.col-text { grid-column: 5 / span 7; max-width: 620px; }
.price { font-size: var(--fs-body); }
.price-note { font-size: var(--fs-body); color: var(--grey); }
.price-note a { border-bottom: 1px solid currentColor; }
.col-text > .u { display: inline-block; margin-top: 16px; }
.credit { margin-top: 32px; }
.portrait:empty { display: none; }

.portrait { grid-column: 1 / span 3; }

/* generic pages */
.page-content { max-width: 620px; margin-top: var(--title-gap); }
.page-content.prose { font-size: var(--fs-body); line-height: var(--lh-long); }
.page-content h2, .page-content h3 { font-size: var(--fs-head); line-height: var(--lh-title); margin: 1.6em 0 .6em; }
/* the few core blocks the kept pages use (no page builder) */
.page-content > * + * { margin-top: 1em; }
.page-content figure { margin-inline: 0; }
.page-content img { max-width: 100%; height: auto; display: block; }
.page-content figcaption { font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); margin-top: 10px; }
.page-content ul, .page-content ol { padding-left: 1.2em; }
.page-content hr { border: 0; border-top: var(--line-soft); margin: 2em 0; }
.page-content .wp-block-buttons { display: flex; flex-direction: column; gap: 10px; }
.page-content .wp-block-button__link {
	display: block; padding: 14px 16px; border: var(--line); border-radius: 0;
	background: none; color: var(--ink); text-align: center; text-decoration: none;
}
.page-content .wp-block-button__link:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------ mobile: one column, facts above text */
@media (max-width: 900px) {
	.grid12 { display: block; }
	.upcoming-text, .readmore, .col-text { margin-top: 32px; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.artist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.artist-list { columns: 2; }
	.portrait { max-width: 320px; margin-bottom: 32px; }

	.js .readmore.is-clamped { height: auto; min-height: 0; }
	.js .readmore.is-clamped .prose { max-height: 22em; }
}
@media (max-width: 760px) {
	.site-main { padding-top: 48px; }
	.wrap--narrow, .wrap { padding-inline: var(--gutter); }
	/* images keep the content's side margin on phones too — nothing edge to edge below desktop width (Ben, 2 Oct) */
	.hero-image img, .install img, .artwork-images img { max-height: none; width: 100%; }
	.cards, .cards--two { grid-template-columns: 1fr; gap: 48px; }
	/* works and editions two across on phones (Ben, 2 Oct): the artwork page then opens the image larger */
	.works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
	.artist-cards { gap: 32px var(--col-gap); }
	.section-head { flex-wrap: wrap; }
	.pager .t-head { font-size: var(--fs-body); }
}

/* ------------------------------------------------------------------ WooCommerce
   Its own cart/checkout block styles stay; only fonts and colours on top. Don't restyle the checkout (Germanized). */
.woocommerce, .woocommerce-page, .wc-block-components-form, .wc-block-cart, .wc-block-checkout,
.woocommerce input, .woocommerce select, .woocommerce textarea, .woocommerce button,
.wc-block-components-text-input input, .wc-block-components-button {
	font-family: var(--font);
}
.woocommerce, .woocommerce-page, .wc-block-cart, .wc-block-checkout { color: var(--ink); }
.woocommerce .price, .wc-block-components-product-price { color: var(--ink); }
.woocommerce del, .woocommerce .woocommerce-breadcrumb, .wc-block-components-product-metadata { color: var(--grey); }
.shop-content { margin-top: var(--title-gap); }

/* ------------------------------------------------------------------ Editions (Ben, 1 Oct)
   The site's system, no WooCommerce look: the list is the Works grid in 3 columns, the whole card one link; a product page
   has stacked images (cols 1–7) and a sticky info column (cols 9–12). The one boxed button: Add to cart. */
.works--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works--three .work-image { aspect-ratio: 1 / 1; }   /* product photos are square: no empty band above them (Ben, 2 Oct) */
.product-card { display: block; }
.product-card .caption > span { display: block; }
.product-card .caption .t-small { margin-top: 2px; }
.product-card img { transition: opacity .3s var(--ease); }
.product-card:hover img { opacity: .88; }

.product-layout { align-items: start; }
.product-images { grid-column: 1 / span 7; grid-row: 1; }
.product-images figure { margin: 0; }
.product-images figure + figure { margin-top: var(--col-gap); }
.product-images img { display: block; width: 100%; height: auto; }
.product-info { grid-column: 9 / span 4; grid-row: 1; position: sticky; top: 32px; }
.product-head .t-title { margin-top: 2px; }
.product-price { margin-top: 16px; }
.product-body { margin-top: 32px; }
.product-description { font-size: var(--fs-body); line-height: var(--lh-text); }
.product-description p + p { margin-top: 1em; }
.product-buy { margin-top: 32px; }
.product-description + .product-buy { margin-top: 32px; }

/* the add-to-cart form (WooCommerce's own markup) */
.woocommerce .product-buy form.cart { margin: 0; padding: 0; border: 0; }
.woocommerce .product-buy form.cart::before, .woocommerce .product-buy form.cart::after { content: none; }
.woocommerce .product-buy .quantity { float: none; margin: 0 0 20px; }
/* the two bottom-line fields (Ben, 1 Oct): quantity and the option select here, the footer newsletter */
.woocommerce .product-buy form.cart .quantity input.qty, .woocommerce .product-buy table.variations td select {
	height: auto; min-height: 0; padding: 6px 0 !important; border: 0 !important; border-bottom: var(--line) !important;
	background-color: transparent !important; text-align: left;
}
.woocommerce .product-buy form.cart .quantity input.qty { width: 72px; }
.woocommerce .product-buy table.variations td select { padding-right: 28px !important; background-position: right 2px center !important; }
.woocommerce .product-buy button.single_add_to_cart_button,
.woocommerce .product-buy button.single_add_to_cart_button.alt {
	display: block; width: 100%; float: none; margin: 0; padding: 16px 24px !important;
	border: 0 !important; border-radius: 0 !important; background: var(--ink) !important; color: #fff !important;
	font: 400 var(--fs-body)/1.3 var(--font) !important; text-align: center; opacity: 1;
}
.woocommerce .product-buy button.single_add_to_cart_button:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }
.woocommerce .product-buy button.single_add_to_cart_button.disabled { cursor: not-allowed; opacity: .4; }
/* variable products: the option is a normal field (forms section); WooCommerce's own price/stock lines and "Clear" hidden */
.woocommerce .product-buy table.variations { width: 100%; margin: 0 0 20px; border: 0; border-collapse: collapse; }
.woocommerce .product-buy table.variations tr, .woocommerce .product-buy table.variations th,
.woocommerce .product-buy table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; line-height: var(--lh-text); }
.woocommerce .product-buy table.variations th label { display: block; margin: 0 0 6px; font-size: var(--fs-small); font-weight: 400; color: var(--grey); }
.woocommerce .product-buy .reset_variations, .woocommerce .product-buy .woocommerce-variation-price,
.woocommerce .product-buy .woocommerce-variation-availability, .woocommerce .product-buy .stock { display: none !important; }
.woocommerce .product-buy .woocommerce-variation-description { margin: 0 0 20px; font-size: var(--fs-body); line-height: var(--lh-text); }
.woocommerce .product-buy .woocommerce-variation-description p + p { margin-top: 1em; }

/* artwork page in the same layout: images at most the window height (tall works don't run on forever) */
.product-images--capped img { width: auto; max-width: 100%; max-height: calc(100vh - 64px); }
.product-layout--no-images .product-info { grid-column: 1 / span 6; }
.artwork-page .product-price .price, .artwork-page .product-price .price-note { margin: 0; }
.artwork-page .credit { margin-top: 32px; }

@media (max-width: 900px) {
	.works--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* mobile order: artist, title, price · images · description, button */
	.product-layout { display: flex; flex-direction: column; }
	.product-info { display: contents; }
	.product-head { order: 1; }
	.product-images { order: 2; margin-top: 32px; }
	.product-body { order: 3; }
}

/* CookieYes: no floating revisit icon; "Cookie settings" in the legal menu opens the preferences */
.cky-btn-revisit-wrapper { display: none !important; }

/* order received + My Account → view order (Ben, 1 Oct): 1 px ink rules only (no dashed dividers, grey table borders
   or shadowed address box); labels normal case 13 px grey; headings 24 px; only the total is bold. */
.woocommerce-order-received .shop-content { margin-top: 24px; }
.woocommerce-order .woocommerce-thankyou-order-received { margin: 0 0 32px; font-size: var(--fs-body); }
.woocommerce ul.order_details {
	display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 0 0 var(--block); padding: 0; list-style: none;
}
.woocommerce ul.order_details::before, .woocommerce ul.order_details::after { content: none; }
.woocommerce ul.order_details li {
	float: none; margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: 0;
	font-size: var(--fs-small); line-height: var(--lh-text); color: var(--grey);
}
.woocommerce ul.order_details li strong {
	display: block; margin-top: 2px; font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-text); color: var(--ink);
}
.woocommerce-order-details, .woocommerce-customer-details { margin: 0 0 var(--block); }
.woocommerce-order-details__title, .woocommerce-customer-details .woocommerce-column__title,
.woocommerce-customer-details > h2, .woocommerce-MyAccount-content h2 {
	margin: 0 0 16px; font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tracking-title);
}
.woocommerce table.shop_table.order_details {
	width: 100%; margin: 0; border: 0; border-top: var(--line-soft); border-radius: 0; border-collapse: collapse;
}
.woocommerce table.shop_table.order_details th, .woocommerce table.shop_table.order_details td {
	padding: 12px 24px 12px 0; border: 0; border-bottom: var(--line-soft); background: none;
	font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-text); text-align: left; vertical-align: top;
}
.woocommerce table.shop_table.order_details thead th { font-size: var(--fs-small); color: var(--grey); }
.woocommerce table.shop_table.order_details tfoot th, .woocommerce table.shop_table.order_details tfoot td { font-weight: 400; }
.woocommerce table.shop_table.order_details tfoot .order-totals__order_total th,
.woocommerce table.shop_table.order_details tfoot .order-totals__order_total td { font-weight: 700; }
.woocommerce table.shop_table.order_details .product-quantity { font-weight: 400; }
.woocommerce table.shop_table.order_details .includes_tax, .woocommerce table.shop_table.order_details small {
	display: block; font-size: var(--fs-small); font-weight: 400; color: var(--grey);
}
.woocommerce table.shop_table.order_details .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--grey); }
.woocommerce table.shop_table.order_details .wc-item-meta p { display: inline; }
.woocommerce .woocommerce-customer-details address {
	padding: 12px 0 0; border: 0; border-top: var(--line-soft); border-radius: 0; box-shadow: none;
	font-style: normal; font-size: var(--fs-body); line-height: var(--lh-text);
}
.woocommerce .woocommerce-customer-details address p { margin: 0; padding: 0; }
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before { content: none; display: none; }
.woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.woocommerce-customer-details .col2-set::before, .woocommerce-customer-details .col2-set::after { content: none; }
.woocommerce-customer-details .col2-set .col-1, .woocommerce-customer-details .col2-set .col-2 { float: none; width: auto; }
/* view order: "Order #… was placed on … and is currently …" without yellow marks */
.woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 400; }
.woocommerce-MyAccount-content > p:first-child { margin-bottom: var(--block); }
@media (max-width: 720px) {
	.woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Collectors / account forms (Ben, 1 Oct)
   One task at a time in one narrow column; labels 13 px grey above 1 px ink-bordered fields; no asterisks (all required);
   full-width outline button. Without JS both forms show; with JS only the active one. */
.account-forms, .woocommerce-ResetPassword, .woocommerce form.lost_reset_password, .woocommerce-EditAccountForm { max-width: 440px; }
.account-forms { margin-top: var(--block); }
.woocommerce-notices-wrapper + .account-forms, .woocommerce-notices-wrapper:not(:empty) ~ .account-forms { margin-top: 48px; }
/* notices on the account pages: the form's column, right above the form (not across the page) */
.woocommerce-account .woocommerce-notices-wrapper { max-width: 440px; }
/* Collectors intro: the text column of every text page (620 px); the forms stay 440 */
.woocommerce-account .shop-content > :not(.woocommerce) { max-width: 620px; }
/* after a registration: "Check your email" (24 bold), one line (17), "Nothing there? … send the link again" (13 grey) */
.account-done { max-width: 620px; margin-top: var(--block); }
.account-done h2 { margin: 0 0 16px; }
.account-done .account-resend, .account-done .account-resend + p { margin-top: 16px; }
.link-button { border: 0; padding: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline;
	text-underline-offset: .2em; cursor: pointer; }
.link-button:hover { color: var(--grey); }
/* no boxed panels: WooCommerce draws a border + radius around login/register/reset forms */
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password, .woocommerce form.woocommerce-ResetPassword,
.woocommerce form.checkout_coupon, .woocommerce-account form.edit-account {
	margin: 0; padding: 0; border: 0; border-radius: 0;
}
.account-form + .account-form { margin-top: var(--block); }
.account-forms.is-enhanced .account-form:not(.is-active) { display: none; }
.account-forms.is-enhanced .account-form + .account-form { margin-top: 0; }
.account-form h2 { margin: 0 0 24px; }
.woocommerce form .field, .woocommerce form .form-row, .woocommerce-account .woocommerce form p { margin: 0 0 20px; padding: 0; float: none; width: auto; }
.woocommerce form label, .woocommerce-account fieldset legend {
	display: block; margin: 0 0 6px; font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 400; color: var(--grey);
}
/* fields: see "forms — one field style everywhere" below */
.woocommerce form .required, .woocommerce form abbr.required { display: none; }   /* every field is required: mark nothing */
.woocommerce form label.woocommerce-form__label-for-checkbox, .weserhalle-news label, .field--check label {
	display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: var(--fs-small); cursor: pointer;
}
/* checkboxes (Ben, 1 Oct): one style for account forms and checkout — a 16 px square, 1 px ink; ink with a white tick
   when checked; top-aligned with the first line of its label (label line-height 1.5, not WooCommerce's 2) */
.woocommerce form label.woocommerce-form__label-for-checkbox { line-height: var(--lh-text); }
.woocommerce form input[type="checkbox"],
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; flex-shrink: 0; box-sizing: border-box;
	width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important;
	margin: 2px 0 0 !important; padding: 0; border: 1px solid var(--ink) !important; border-radius: 0 !important;
	background: #fff no-repeat center / 10px auto; box-shadow: none !important; cursor: pointer;
}
.woocommerce form input[type="checkbox"]:checked,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
.woocommerce form input[type="checkbox"]:focus-visible,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { margin-right: 10px !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { display: none !important; }
.wc-block-components-checkbox label { align-items: flex-start; }
.account-forms button[type="submit"], .woocommerce-ResetPassword button[type="submit"], .woocommerce-EditAccountForm button[type="submit"],
.woocommerce form.lost_reset_password button[type="submit"] { width: 100%; }
.field-note, .woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p { font-size: var(--fs-small) !important; color: var(--grey); line-height: var(--lh-text); }
.lost-password { margin: 20px 0 0 !important; font-size: var(--fs-small); }
.lost-password a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.account-switch { margin-top: 28px; }
.weserhalle-turnstile { margin: 0 0 20px; }
.weserhalle-turnstile:empty, .weserhalle-turnstile:not([data-rendered]) { margin: 0; }
/* signed in: tabs as plain links, account below */
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 48px; padding: 0; list-style: none; }
/* the tabs behave like the main menu (Ben, 3 Oct): plain text, a 1 px underline on hover and on the current tab, never bold */
.woocommerce-MyAccount-navigation a {
	color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.woocommerce-MyAccount-navigation a:hover, .woocommerce-MyAccount-navigation .is-active a { border-bottom-color: currentColor; }
.woocommerce-MyAccount-content { max-width: 620px; }
.woocommerce-MyAccount-content p + p { margin-top: 1em; }
/* notices inside the account: no extra space above (the tabs already end in 48 px) */
.woocommerce-MyAccount-content > .woocommerce-message:first-child, .woocommerce-MyAccount-content > .woocommerce-info:first-child,
.woocommerce-MyAccount-content > .woocommerce-error:first-child, .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:first-child > :first-child { margin-top: 0 !important; }

/* Orders (Ben, 3 Oct; woocommerce/myaccount/orders.php): the order-details table look — 13 px grey column labels, pale
   rules, no box; the order number is the link; cancelled/failed/refunded in grey. Phones: one block per order. */
.woocommerce-MyAccount-content:has(.orders-table) { max-width: 760px; }
.orders-table { width: 100%; border-collapse: collapse; border-top: var(--line-soft); }
.orders-table th, .orders-table td {
	padding: 12px 24px 12px 0; border-bottom: var(--line-soft); font-size: var(--fs-body); font-weight: 400;
	line-height: var(--lh-text); text-align: left; vertical-align: top; white-space: nowrap;
}
.orders-table thead th { font-size: var(--fs-small); color: var(--grey); }
.orders-table th:last-child, .orders-table td:last-child { padding-right: 0; text-align: right; }
.orders-table .is-muted td { color: var(--grey); }
.orders-table__actions a + a { margin-left: 16px; }
.orders-pager { display: flex; justify-content: space-between; margin-top: 24px; }
@media (max-width: 760px) {
	.orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.orders-table, .orders-table tbody { display: block; }
	.orders-table tr {
		display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: var(--line-soft);
	}
	.orders-table th, .orders-table td { display: block; padding: 0; border: 0; text-align: left; }
	.orders-table th:last-child, .orders-table td:last-child { text-align: left; }
	.orders-table .orders-table__total { text-align: right; }
	.orders-table .orders-table__date, .orders-table .orders-table__status { font-size: var(--fs-small); color: var(--grey); }
	.orders-table .orders-table__number { order: 1; }
	.orders-table .orders-table__total { order: 2; }
	.orders-table .orders-table__date { order: 3; }
	.orders-table .orders-table__status { order: 4; text-align: right; }
	.orders-table .orders-table__actions { order: 5; grid-column: 1 / -1; margin-top: 6px; }
	.orders-table .orders-table__actions:empty { display: none; }
}

/* a single order (Ben, 3 Oct; woocommerce/myaccount/view-order.php, order/order-details.php, order-details-customer.php):
   the facts row as on the order confirmation, updates as a dated list, Invoice/Pay as links under the table, addresses
   with 13 px grey labels under a pale rule (also on the order confirmation). */
.order-updates { margin: 0 0 var(--block); }
.order-updates li { padding: 12px 0; border-top: var(--line-soft); }
.order-updates li:last-child { border-bottom: var(--line-soft); }
.order-updates li div p + p { margin-top: .6em; }
.order-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0 !important; }
.order-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--col-gap); padding-top: 20px; border-top: var(--line-soft); }
.woocommerce-MyAccount-content .order-address h2, .order-address h2 {
	margin: 0 0 4px; font-size: var(--fs-small); font-weight: 400; line-height: var(--lh-text); letter-spacing: 0; color: var(--grey);
}
.woocommerce .woocommerce-customer-details .order-address address { padding: 0; border: 0; }
.woocommerce .woocommerce-customer-details .order-address .woocommerce-customer-details--phone,
.woocommerce .woocommerce-customer-details .order-address .woocommerce-customer-details--email { margin: 0; padding-left: 0; }
@media (max-width: 760px) {
	.order-addresses { grid-template-columns: 1fr; }
}

/* Account details (Ben, 3 Oct; woocommerce/myaccount/form-edit-account.php): labels visible above the fields, first and
   last name side by side; "Password" under a pale rule is one link that emails a set-a-new-password link. */
.woocommerce-EditAccountForm .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); }
.woocommerce-account .account-password { max-width: 440px; margin: 48px 0 0; padding: 24px 0 0; border-top: var(--line-soft); }
.woocommerce-MyAccount-content .account-password h2 { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-text); letter-spacing: 0; }
.woocommerce-account .account-password p { margin: 0; }
.woocommerce-EditAccountForm .account-save { margin-top: 32px !important; }
/* the show/hide-password eye: inside the field's right edge, never over the text (every password field) */
.woocommerce form .password-input { display: block; position: relative; }
.woocommerce form .password-input input[type] { padding-right: 48px !important; }
.woocommerce form .show-password-input { position: absolute; right: 14px !important; top: 50% !important; transform: translateY(-50%); }

/* ------------------------------------------------------------------ notices, sitewide (Ben, 1 Oct; 2 Oct: ink rule)
   Success, error, info alike: plain 17 px text under a 1 px #111 rule; no box, no inner border, no coloured bars, no icons. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message,
.wc-block-components-notice-banner, .wc-block-store-notice {
	margin: 40px 0 32px !important; padding: 12px 0 0 !important; border: 0 !important; border-top: 1px solid var(--ink) !important;
	border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important;
	font-size: var(--fs-body) !important; line-height: var(--lh-text) !important; list-style: none !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none !important; display: none !important; }
/* Fluent Forms' "sent" message (enquiry, contact …) looks like every other notice: no box, no shadow */
.ff-message-success {
	position: static !important; margin: 24px 0 0 !important; padding: 12px 0 0 !important; border: 0 !important;
	border-top: 1px solid var(--ink) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--ink) !important; font-size: var(--fs-body) !important; line-height: var(--lh-text) !important;
}
.ff-message-success p { margin: 0; }
.ff-message-success:focus { outline: none; }
/* WooCommerce focuses a new notice (so screen readers read it): no focus ring on it — it's text, not a control */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .wc-block-components-notice-banner:focus { outline: none !important; }
.wc-block-components-notice-banner > svg { display: none !important; }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content { padding: 0 !important; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; padding: 0; list-style: none; }
.woocommerce-error strong { font-weight: 400; }
/* links in notices: ink, underlined, never grey; "View cart"/"Log in" buttons inside a notice are plain inline links */
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .wc-block-components-notice-banner a,
.woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover, .wc-block-components-notice-banner a:hover {
	color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: .2em;
}
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
	float: none !important; display: inline !important; margin: 0 0 0 .5em !important; padding: 0 !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss { display: none !important; }
.wc-block-components-notices .wc-block-components-notice-banner + .wc-block-components-notice-banner { margin-top: 0 !important; }

/* ------------------------------------------------------------------ buttons (Ben, 1 Oct)
   One secondary button, for real actions only: form submits (Fluent Forms — its per-form button colours/radius are
   overridden), Add to cart, Proceed to checkout, Place order, My Account forms. 1 px ink outline, transparent, 17 px regular,
   square; ink fill + white text on hover/focus. Links that only navigate stay underlined text. */
.ff-btn-submit,
.woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.add_to_cart_button, .woocommerce button.single_add_to_cart_button, #place_order,
.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button,
.wc-block-components-button.contained, .wc-block-components-button:not(.is-link):not(.wc-block-components-button--text) {
	display: inline-block; padding: 12px 24px !important; min-height: 0 !important;
	border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important;
	background: transparent !important; color: var(--ink) !important;
	font: 400 var(--fs-body)/1.3 var(--font) !important; letter-spacing: 0 !important; text-transform: none !important;
	text-decoration: none !important; cursor: pointer;
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ff-btn-submit:hover, .ff-btn-submit:focus-visible,
.woocommerce button.button:hover, .woocommerce button.button:focus-visible,
.woocommerce input.button:hover, .woocommerce input.button:focus-visible,
.woocommerce a.button.add_to_cart_button:hover, .woocommerce a.button.add_to_cart_button:focus-visible,
.woocommerce button.single_add_to_cart_button:hover, .woocommerce button.single_add_to_cart_button:focus-visible,
#place_order:hover, #place_order:focus-visible,
.wc-block-components-checkout-place-order-button:hover, .wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-cart__submit-button:hover, .wc-block-cart__submit-button:focus-visible,
.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text):hover,
.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text):focus-visible {
	background: var(--ink) !important; color: #fff !important; outline: none;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit !important; }
/* WooCommerce links dressed as buttons that only navigate (View order, Continue shopping …) → underlined text */
.woocommerce a.button:not(.add_to_cart_button):not(.checkout-button):not(.wc-forward.checkout) {
	padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--ink) !important; font: inherit !important; font-weight: 400 !important;
	text-decoration: underline !important; text-underline-offset: .2em;
}
.woocommerce a.button:not(.add_to_cart_button):not(.checkout-button):not(.wc-forward.checkout):hover { color: var(--grey) !important; }

/* ------------------------------------------------------------------ forms — one field style everywhere (Ben, 1 Oct)
   WordPress/WooCommerce forms, the checkout and cart blocks, Fluent Forms, the footer newsletter, quantity and option
   selects: a 50 px field, 1 px ink border, square, white, 17 px ink text, grey placeholder; labels 13 px grey above
   (the checkout keeps its floating labels, in the same grey); focus = 2 px ink outline. */
.woocommerce form .input-text, .woocommerce form input[type="email"], .woocommerce form input[type="text"],
.woocommerce form input[type="password"], .woocommerce form input[type="tel"], .woocommerce form input[type="number"],
.woocommerce form select, .woocommerce form textarea,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select,
.fluentform .ff-el-form-control, .fluentform input.ff-el-form-control, .fluentform textarea.ff-el-form-control, .fluentform select.ff-el-form-control,
.wc-block-components-text-input input[type], .wc-block-components-textarea, .wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-quantity-selector, .wc-block-components-totals-coupon__input input {
	box-sizing: border-box; width: 100%; min-height: 50px; margin: 0;
	border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important;
	background-color: #fff !important; color: var(--ink) !important;
	font-family: var(--font) !important; font-size: var(--fs-body) !important; line-height: 1.4 !important;
}
.woocommerce form .input-text, .woocommerce form input[type="email"], .woocommerce form input[type="text"],
.woocommerce form input[type="password"], .woocommerce form input[type="tel"], .woocommerce form input[type="number"],
.woocommerce form select, .woocommerce form .form-row .input-text, .woocommerce form .form-row select,
.fluentform .ff-el-form-control {
	display: block; height: 50px; padding: 0 14px !important;
}
.woocommerce form textarea, .fluentform textarea.ff-el-form-control { height: auto; min-height: 140px; padding: 12px 14px !important; }
.woocommerce form select, .fluentform select.ff-el-form-control,
.wc-blocks-components-select .wc-blocks-components-select__select {
	-webkit-appearance: none; appearance: none; padding-right: 40px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 14px center !important;
}
.wc-blocks-components-select .wc-blocks-components-select__expand { display: none; }
.woocommerce form ::placeholder, .fluentform ::placeholder, .wc-block-components-form ::placeholder,
.wc-block-cart ::placeholder { color: var(--grey) !important; opacity: 1; }
.woocommerce form input:focus, .woocommerce form select:focus, .woocommerce form textarea:focus,
.fluentform .ff-el-form-control:focus,
.wc-block-components-text-input input:focus, .wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: 2px solid var(--ink) !important; outline-offset: 2px; border-color: var(--ink) !important; box-shadow: none !important;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* labels: 13 px grey above (WooCommerce, Fluent Forms); the checkout's floating labels in the same grey */
.fluentform .ff-el-input--label label { font-size: var(--fs-small); font-weight: 400; color: var(--grey); }
.fluentform .ff-el-input--label { margin-bottom: 6px; }
.fluentform .ff-el-input--label.asterisk-right label::after { content: none; }
.wc-block-components-text-input label, .wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-textarea + label { color: var(--grey) !important; font-family: var(--font); }
.wc-block-components-text-input input { padding-left: 14px !important; padding-right: 14px !important; }
.wc-block-components-text-input label { left: 15px !important; }
/* placeholders instead of labels (Ben, 1 Oct). The label stays in the page for screen readers, visually hidden:
   WooCommerce forms (assets/js copies the label into the placeholder, .has-placeholder-label), Fluent Forms fields that
   have a placeholder, and the checkout's floating labels — they sit in the field like a placeholder and go once there
   is a value. Selects without a value keep their label. */
.has-placeholder-label > label, .js .woocommerce-form-row > label.wh-to-placeholder,
.fluentform .ff-el-group:has(.ff-el-form-control[placeholder]:not([placeholder=""])) > .ff-el-input--label {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wc-block-components-text-input label {
	top: 50% !important; transform: translateY(-50%) !important; font-size: var(--fs-body) !important; line-height: 1.4 !important;
	pointer-events: none; transition: none !important;
}
.wc-block-components-text-input input[type] { padding-top: 0 !important; padding-bottom: 0 !important; }
.wc-block-components-text-input:has(input:not([value=""])) label,
.wc-block-components-text-input.is-active:has(input:-webkit-autofill) label { visibility: hidden; }
.wc-blocks-components-select:has(select option:checked:not([value=""])) .wc-blocks-components-select__label { display: none; }
.wc-blocks-components-select:has(select option:checked:not([value=""])) .wc-blocks-components-select__select { padding-top: 0 !important; padding-bottom: 0 !important; }
.wc-blocks-components-select .wc-blocks-components-select__select { padding-left: 14px !important; }

/* Fluent Forms: spacing, errors, its checkboxes like ours */
.fluentform .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-t-container { gap: var(--col-gap); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ink) !important; }
.fluentform .error, .fluentform .text-danger { color: var(--ink) !important; font-size: var(--fs-small); margin-top: 6px; }
.fluentform .ff-el-form-check-label { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink); }
.fluentform input[type="checkbox"], .fluentform input[type="radio"] {
	-webkit-appearance: none; appearance: none; flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0;
	border: 1px solid var(--ink); border-radius: 0; background: #fff no-repeat center / 10px auto; cursor: pointer;
}
.fluentform input[type="radio"] { border-radius: 50%; }
.fluentform .ff-el-form-check-label input[type="checkbox"], .fluentform .ff-el-form-check-label input[type="radio"] {
	position: static !important; top: auto !important; margin: 2px 0 0 !important; vertical-align: top;   /* Fluent lifts it 2 px */
}
.fluentform input[type="checkbox"]:checked {
	background-color: var(--ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
.fluentform input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; background: var(--ink); }

/* ------------------------------------------------------------------ cart + checkout (Ben, 1 Oct)
   WooCommerce's blocks, logic untouched; only the look: steps as 17 px bold headings under a 1 px rule, square choices
   with ink borders, the order summary without a box, totals on 1 px ink rules, Place order = the solid bar. */
.wc-block-checkout, .wc-block-cart { font-size: var(--fs-body); }
.wc-block-components-checkout-step { border: 0 !important; padding: 0 !important; margin: 0 0 40px !important; }
.wc-block-components-checkout-step__heading { margin: 0 0 16px !important; }
.wc-block-components-checkout-step__title, .wc-block-components-title.wc-block-components-title,
.wc-block-cart__totals-title, .wc-block-components-order-summary__button-text {
	font-family: var(--font) !important; font-size: var(--fs-body) !important; font-weight: 700 !important;
	line-height: var(--lh-text) !important; letter-spacing: 0; text-transform: none !important;
}
.wc-block-components-checkout-step__description, .wc-block-components-address-form__email + p,
.wc-block-checkout__guest-checkout-notice, .wc-block-checkout__terms, .wc-block-checkout__terms p {
	font-size: var(--fs-small) !important; color: var(--grey) !important; line-height: var(--lh-text);
}
.wc-block-checkout__terms a { color: var(--grey); text-decoration: underline; text-underline-offset: .2em; }
.wc-block-checkout .wc-block-components-checkout-step__container::after { display: none; }   /* the vertical step line */
.wc-block-components-checkout-step::after { display: none !important; }
/* Ship / Pickup (Ben, 2 Oct): the one button style — 1 px ink outline; hover and the chosen one ink with white text */
.wc-block-checkout__shipping-method-container { gap: 12px; background: none !important; padding: 0 !important; border: 0 !important; }
.wc-block-checkout__shipping-method-option {
	border: 1px solid var(--ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--ink) !important;
	box-shadow: none !important; outline: 0 !important; min-height: 52px; font-size: var(--fs-body) !important;
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.wc-block-checkout__shipping-method-option:hover, .wc-block-checkout__shipping-method-option:focus-visible,
.wc-block-checkout__shipping-method-option--selected { background: var(--ink) !important; color: #fff !important; }
.wc-block-checkout__shipping-method-option:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }
/* no icons (Ben, 2 Oct): the words only, one line height */
.wc-block-checkout__shipping-method-option svg { display: none !important; }
.wc-block-checkout__shipping-method-option, .wc-block-checkout__shipping-method-option * { line-height: 1.3 !important; }
.wc-block-checkout__shipping-method-option { padding: 12px 16px !important; justify-content: center !important; text-align: center; }
.wc-block-checkout__shipping-method-option-title { font-size: var(--fs-body) !important; font-weight: 400 !important; }   /* 17 px like every button */
.wc-block-components-radio-control--highlight-checked, .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option, .wc-block-components-address-card, .wc-block-components-panel,
.wc-block-checkout__pickup-options .wc-block-components-radio-control__option {
	border-radius: 0 !important; box-shadow: none !important;
}
.wc-block-components-radio-control--highlight-checked { border: 1px solid var(--ink) !important; }
.wc-block-components-radio-control--highlight-checked::after { display: none !important; }
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option { box-shadow: none !important; }
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 1px var(--ink) !important; border-radius: 0 !important; }
.wc-block-components-radio-control__input {
	-webkit-appearance: none; appearance: none; width: 16px !important; height: 16px !important; min-width: 16px !important;
	border: 1px solid var(--ink) !important; border-radius: 50% !important; background: #fff !important;
}
.wc-block-components-radio-control__input:checked { background: var(--ink) !important; box-shadow: inset 0 0 0 4px #fff !important; }
.wc-block-components-radio-control__input:checked::before { display: none !important; }
.wc-block-components-address-card { border: 1px solid var(--ink) !important; padding: 16px !important; font-size: var(--fs-body); }
.wc-block-components-address-card__edit { color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: .2em; }
.wc-block-components-address-form__address_2-toggle, .wc-block-components-checkout-step a:not(.wc-block-components-button) {
	color: var(--ink); text-decoration: underline; text-underline-offset: .2em;
}
/* order summary (checkout sidebar) and cart totals: no box; two rules only — above the subtotal and above the total */
.wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-block, .wc-block-components-totals-wrapper, .wc-block-components-order-summary,
.wc-block-components-totals-coupon, .wc-block-components-totals-wrapper .wc-block-components-panel {
	border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	padding-left: 0 !important; padding-right: 0 !important;
}
.wc-block-components-totals-wrapper:empty { display: none; }
.wc-block-components-checkout-order-summary__title { margin: 0 !important; padding: 0 0 16px !important; }
.wc-block-components-checkout-order-summary__title-text { margin: 0 !important; font-size: var(--fs-body) !important; font-weight: 700 !important; }
.wc-block-components-totals-item, .wc-block-components-panel__button, .wc-block-components-panel__content { padding-left: 0 !important; padding-right: 0 !important; }
.wp-block-woocommerce-checkout-order-summary-subtotal-block, .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wc-block-components-totals-footer-item { border-top: var(--line-soft) !important; padding-top: 16px !important; margin-top: 8px; }
.wc-block-components-totals-item__label, .wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price, .wc-block-components-product-name {
	font-size: var(--fs-body) !important; font-weight: 400 !important; color: var(--ink) !important; text-transform: none !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--fs-head) !important; font-weight: 700 !important; }
.wc-block-components-totals-footer-item-tax, .wc-block-components-totals-item__description,
.wc-block-components-order-summary-item__description, .wc-block-components-product-metadata,
.wc-block-components-order-summary-item__individual-prices { font-size: var(--fs-small) !important; color: var(--grey) !important; }
.wc-block-components-order-summary-item__individual-prices { display: block; margin: 2px 0 6px; }
.wc-block-components-order-summary-item__quantity {
	border: 1px solid var(--ink) !important; border-radius: 0 !important; background: #fff !important; color: var(--ink) !important;
	box-shadow: none !important; font-size: 11px !important; min-width: 20px !important; height: 20px !important;
}
.wc-block-components-order-summary-item__image img, .wc-block-cart-item__image img { border-radius: 0 !important; }
.wc-block-components-order-summary-item__quantity span { color: var(--ink) !important; font-size: 11px !important; }
.wc-block-components-shipping-rates-control__no-results-notice, .wc-block-components-shipping-rates-control__no-shipping-address-message,
.wc-block-components-notice-banner.is-info.wc-block-components-shipping-rates-control__no-results-notice {
	background: none !important; padding: 0 !important; border: 0 !important; font-size: var(--fs-small) !important; color: var(--grey) !important; text-align: left !important;
}
/* Stripe's card field (Payment Plugins for Stripe): its wrapper like every other field; the card input itself is Stripe's iframe */
.wc-stripe-inline-form { border: 1px solid var(--ink) !important; border-radius: 0 !important; min-height: 50px; display: flex; align-items: center; padding: 0 14px !important; background: #fff; }
.wc-stripe-inline-form .StripeElement { flex: 1; }
.wc-block-components-totals-shipping .wc-block-components-totals-item__value strong,
.wc-block-components-totals-item__value strong { font-weight: 400 !important; }
.wc-block-components-panel__button { font-size: var(--fs-body) !important; font-weight: 400 !important; }
/* the one solid button in checkout and cart: Place order / Proceed to checkout (same as Add to cart) */
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):not(.wc-block-components-button--text),
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link):not(.wc-block-components-button--text) {
	width: 100%; min-height: 56px; border: 0 !important; background: var(--ink) !important; color: #fff !important;
	font: 400 var(--fs-body)/1.3 var(--font) !important; text-align: center; justify-content: center !important;
}
.wc-block-components-checkout-place-order-button:focus-visible, .wc-block-cart__submit-button:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text { color: #fff !important; display: block; width: 100%; text-align: center !important; }
.wc-block-components-checkout-place-order-button__text { justify-content: center !important; }   /* an inner flex box */
.wc-block-checkout__terms { border: 0 !important; padding-top: 0 !important; margin: 0 0 20px !important; }
.wc-block-checkout__terms::before { display: none !important; }
.wc-block-checkout__order-fields .wc-block-components-address-form,
.wc-block-checkout__order-fields .wc-block-components-address-form > *,
.wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkbox { margin-top: 0 !important; margin-bottom: 0 !important; }
.wc-block-checkout__order-fields .wc-block-components-checkbox, .wp-block-woocommerce-checkout-order-note-block { margin-top: 12px !important; }
/* cart page: items on ink rules, quantity field like the others, "Remove item" as a plain link */
.wc-block-cart-items { border-color: var(--rule) !important; }
.wc-block-cart-items th, .wc-block-cart-items td { border-color: var(--rule) !important; }
.wc-block-cart-items__header { font-size: var(--fs-small) !important; color: var(--grey); text-transform: none !important; font-weight: 400 !important; }
.wc-block-components-quantity-selector { width: 120px !important; min-height: 50px; }
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector input { font-size: var(--fs-body) !important; border: 0 !important; }
.wc-block-components-quantity-selector__button { color: var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.wc-block-cart-item__remove-link { color: var(--ink) !important; font-size: var(--fs-small) !important; text-decoration: underline !important; text-underline-offset: .2em; }

/* order confirmation (Ben, 1 Oct): one sentence, the facts, what happens next, then the details */
.woocommerce-order-received .page-head { margin-bottom: 0; }
.order-confirmed { max-width: 760px; margin: 0 0 48px; font-weight: 400; }
.order-facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 16px 64px;
	margin: 0 0 48px; padding-top: 20px; border-top: var(--line-soft); }
.order-facts .fact + .fact { margin-top: 0; }
.order-facts .includes_tax { display: block; font-size: var(--fs-small); color: var(--grey); }
.order-next { max-width: 620px; margin: 0 0 var(--block); }
.order-next:empty { display: none; }
.order-next .t-small { margin-bottom: 4px; }
.order-continue { margin-top: var(--block); }
@media (max-width: 760px) {
	.order-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--col-gap); }
}

/* ------------------------------------------------------------------ home hero d (Ben, 2 Oct, #27): full bleed from the
   top of the window, header in white over a soft dark gradient, title in white at the bottom over another. Only here. */
.has-hero-overlay { position: relative; }   /* header sits under the admin bar's page offset, same place as elsewhere */
.has-hero-overlay .site-main { padding-top: 0; }
.has-hero-overlay .site-header {
	position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: #fff;
}
.has-hero-overlay .site-header a, .has-hero-overlay .nav .is-muted a, .has-hero-overlay .nav-toggle { color: #fff; }
.has-hero-overlay .nav .is-muted a { opacity: .8; }
.has-hero-overlay .site-header:has(.site-nav.is-open) { background: rgba(17, 17, 17, .94); padding-bottom: 16px; }
.hero--d { position: relative; padding-inline: 0; }
.hero--d .hero-image { position: relative; height: 100svh; min-height: 520px; margin-inline: 0; overflow: hidden; }   /* JS fixes the height in px */
.hero--d .hero-image img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 50%; }
.hero--d .hero-image::before, .hero--d .hero-image::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.hero--d .hero-image::before { top: 0; height: 180px; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.hero--d .hero-image::after { bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.hero--d .hero-text { position: absolute; left: var(--gutter-chrome); right: var(--gutter-chrome); bottom: 48px; margin: 0; color: #fff; z-index: 2; }
.hero--d .hero-text a, .hero--d .hero-text .t-grey { color: #fff; }
.hero--d .hero-text .t-grey { opacity: .85; }
@media (max-width: 760px) { .hero--d .hero-text { bottom: 32px; } }

/* ------------------------------------------------------------------ exhibition page (Ben, 2 Oct): image first, then
   type / title / one date line; the remaining images in one quiet slider (native swipe, ← n / N → under it). */
.install.exhibition-lead { margin-top: 0; }
.exhibition-head { margin-top: var(--block); }   /* well clear of the image caption */
.exhibition-line { margin-top: 10px; }
.exhibition-about--a { margin-top: 40px; }
.exhibition-about--b { margin-top: var(--block); }
.exhibition-about--b .facts { grid-column: 1 / span 4; }
.exhibition-about--b .exhibition-title { margin-bottom: 32px; }
.exhibition-about--b .readmore { grid-column: 6 / span 7; padding-top: 8px; }   /* starts on the title's line */
.facts .exhibition-cta { margin-top: 20px; }
/* .button-solid = the primary button (style below): the single most important action on a page — here the exhibition's
   call to action, under the metadata. */
.button-solid {
	display: inline-block; padding: 16px 32px; border: 0; border-radius: 0; background: var(--ink); color: #fff;
	font: 400 var(--fs-body)/1.3 var(--font); text-decoration: none; text-align: center; transition: background-color .15s var(--ease);
}
.button-solid:hover, .button-solid:focus-visible { background: var(--ink); color: #fff; }
.button-solid:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.exhibition-cta-button { margin-top: 32px; }
.exhibition-cta-button .button-solid { display: flex; width: 100%; }

/* Primary button, one height for all: 52 px — the exhibition call to action, Add to cart, Proceed to checkout, Place order. */
.button-solid, .woocommerce .product-buy button.single_add_to_cart_button.button.alt, .woocommerce .product-buy button.single_add_to_cart_button.button,
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):not(.wc-block-components-button--text),
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link):not(.wc-block-components-button--text) {
	min-height: 52px !important; height: 52px; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
/* ONE button style on the whole site (Ben, 2 Oct, evening: "too many types of buttons" — replaces the pale fill): 1 px ink
   outline, transparent, 17 px regular, square, 52 px; ink with white text on hover/focus. Same for the form submits below. */
body .button-solid, body .product-buy button.single_add_to_cart_button.button.alt, body .product-buy button.single_add_to_cart_button.button,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):not(.wc-block-components-button--text),
body .wc-block-components-button.wc-block-cart__submit-button:not(.is-link):not(.wc-block-components-button--text) {
	background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; font-weight: 400 !important;
}
body .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
body .wc-block-cart__submit-button .wc-block-components-button__text { color: inherit !important; }
/* hover/focus (Ben, 2 Oct: every button ends the same way): ink with white text — beats the older grey hovers */
body .button-solid:hover, body .button-solid:focus-visible,
body .product-buy button.single_add_to_cart_button.button:hover, body .product-buy button.single_add_to_cart_button.button:focus-visible,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):not(.wc-block-components-button--text):hover,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):not(.wc-block-components-button--text):focus-visible,
body .wc-block-components-button.wc-block-cart__submit-button:not(.is-link):not(.wc-block-components-button--text):hover,
body .wc-block-components-button.wc-block-cart__submit-button:not(.is-link):not(.wc-block-components-button--text):focus-visible { background: var(--ink) !important; color: #fff !important; }

.exhibition-head--first { margin-top: 0; }
.slider-track {
	display: flex; gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.slider .slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; justify-content: center; align-items: center;
	height: min(88vh, 900px); }
.slider .slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.slider-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 10px; }
.slider-nav { display: none; flex-shrink: 0; align-items: baseline; gap: 14px; color: var(--ink); }
.js .slider-nav { display: flex; }
.slider-nav button { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 0 2px; font: inherit; font-size: var(--fs-body);
	color: var(--ink); cursor: pointer; line-height: 1; }
.slider-nav button:disabled { color: var(--grey); opacity: .4; cursor: default; }
.slider-nav button:not(:disabled):hover { color: var(--grey); }
.slider-count { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .slider .slide { height: auto; max-height: 75vh; } .slider .slide img { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }

/* ------------------------------------------------------------------ Featured Artists cards (Ben, 2 Oct)
   Portraits in black and white (CSS only, files unchanged); every card a 4:5 frame, image covers it, focus top centre.
   Desktop hover: crossfade to the featured work in colour, zooming in ~5 % over 7 s. Touch: no hover state. Reduced motion:
   crossfade only. */
.portrait img, .artist-frame__portrait img { filter: grayscale(1); }
.artist-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 12px; background: #fff; }
.artist-frame > span { position: absolute; inset: 0; display: block; }
.artist-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.artist-frame.has-rollover .artist-frame__work { opacity: 0; z-index: 1; }   /* above the portrait: it fades in over it */
@media (hover: hover) and (pointer: fine) {
	.artist-frame.has-rollover .artist-frame__work { transition: opacity .6s var(--ease) !important; }
	.artist-frame.has-rollover .artist-frame__work img { transform: scale(1); transition: transform 7s linear; }
	.artist-card a:hover .artist-frame.has-rollover .artist-frame__work,
	.artist-card a:focus-visible .artist-frame.has-rollover .artist-frame__work { opacity: 1; }
	.artist-card a:hover .artist-frame.has-rollover .artist-frame__work img,
	.artist-card a:focus-visible .artist-frame.has-rollover .artist-frame__work img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.artist-frame.has-rollover .artist-frame__work img { transform: none !important; }
}
.exhibition-head .exhibition-cta { margin-top: 12px; }

/* ------------------------------------------------------------------ About (Ben, 2 Oct): exhibition-page system + Team */
.about-page .install { margin-top: var(--block); }
.about-page .page-content { margin-top: var(--block); }
.team-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--col-gap); margin: 0; padding: 0; list-style: none; }
.team-portrait { max-width: 160px; margin-bottom: 12px; }
.team-portrait img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { :root { --fs-display: 32px; } }   /* the 44 px h1 on phones */

/* ------------------------------------------------------------------ Contact (Ben, 1 Oct): collector-centric, text left, form right */
.contact-grid { margin-top: var(--title-gap); align-items: start; row-gap: 48px; }
.contact-text { grid-column: 1 / span 5; }
.contact-form { grid-column: 7 / span 6; }
.contact-text > * + * { margin-top: 24px; }
.contact-text .contact-lead { font-size: var(--fs-head); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 40px; }
.contact-text .contact-label { display: block; font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); }
.contact-text .contact-note { font-size: var(--fs-small); color: var(--grey); margin-top: 40px; }
.contact-text a { border-bottom: 1px solid currentColor; }
.contact-text a:hover { color: var(--grey); }
@media (max-width: 900px) { .contact-text, .contact-form { grid-column: 1 / -1; } .contact-form { margin-top: var(--block); } }

/* ------------------------------------------------------------------ Visit (Ben, 1 Oct)
   Address + opening hours large; the page text as rows: heading left, text right, a 1 px rule above each row. */
.visit-hero { margin-top: var(--title-gap); row-gap: 40px; }
.visit-hero__address { grid-column: 1 / span 6; }
.visit-hero__hours { grid-column: 7 / span 6; }
.visit-hero .t-small { margin-bottom: 8px; }
.visit-big { font-size: var(--fs-head); line-height: 1.3; font-style: normal; font-weight: 400; letter-spacing: -0.01em; }
.visit-map { margin-top: 20px; }
.visit-rows { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--section); }
.visit-rows > * { grid-column: 5 / span 8; margin: 0; font-size: var(--fs-body); line-height: var(--lh-long); max-width: 680px; }
.visit-rows > h3 { grid-column: 1 / span 4; max-width: none; font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-long); }
.visit-rows > h3, .visit-rows > h3 + * { border-top: var(--line-soft); padding-top: 24px; margin-top: 72px; max-width: none; }
.visit-rows > h3:first-child, .visit-rows > h3:first-child + * { margin-top: 0; }
.visit-rows > h3 + * { padding-right: 0; }
.visit-rows > p + p { margin-top: 20px; }
.visit-rows .visit-label { display: block; font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); }
.visit-rows a { border-bottom: 1px solid currentColor; }
.visit-rows a:hover { color: var(--grey); }
@media (max-width: 900px) {
	.visit-hero__address, .visit-hero__hours { grid-column: 1 / -1; }
	.visit-rows { display: block; margin-top: var(--section); }
	.visit-rows > h3 + * { border-top: 0; padding-top: 12px; margin-top: 0; }
	.visit-rows > h3 { margin-top: 56px; }
	.visit-rows > h3:first-child { margin-top: 0; }
}

/* ------------------------------------------------------------------ motion */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .reveal { opacity: 1; }
}

/* confirmation page */
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-cta { margin-top: 10px; }
.confirmation-cards, .confirmation-foot { margin-top: var(--block); }
.confirmation-foot p + p { margin-top: 12px; }

/* Checkout (Ben, 2 Oct): "Send me the Weserhalle newsletter" and "Add a note to your order" read as one group — 16 px apart,
   not the 40 px between steps */
.wc-block-checkout__order-fields:has(+ .wc-block-checkout__order-notes) { margin-bottom: 0 !important; }
.wc-block-checkout__order-fields + .wc-block-checkout__order-notes { margin-top: 16px !important; }

/* every outline button the same height as the rest: 52 px (form submits: Fluent Forms, Collectors, account, coupon …) */
.ff-btn-submit, .account-forms button[type="submit"], .woocommerce-ResetPassword button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"], .woocommerce form.lost_reset_password button[type="submit"] {
	min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important;
	display: inline-flex !important; align-items: center; justify-content: center;
}
/* account form buttons: full column width, no WooCommerce float (else "Lost your password?" wraps up against the button) */
.account-forms button[type="submit"], .woocommerce-ResetPassword button[type="submit"], .woocommerce form.lost_reset_password button[type="submit"] {
	float: none !important; width: 100%;
}