/**
 * Foorm Studio sections (sections/*.php). Uses theme.json tokens only.
 * Loaded by the `foorm/document` block through the `foorm-sections` handle.
 *
 * Every section sits in a design wrapper printed by the plugin (Renderer::wrap):
 * .foorm-block.has-bg-*.space-top-*.space-bottom-*.width-* > .foorm-block__inner > section.
 */

/* Design wrapper: background bands are full width; content keeps its chosen width. */
.wp-block-post-content > .foorm-block,
.foorm-block {
	margin-block: 0;
	--foorm-space-s: var(--wp--preset--spacing--30);
	--foorm-space-m: var(--wp--preset--spacing--50);
	--foorm-space-l: var(--wp--preset--spacing--60);
	--foorm-space-xl: calc(var(--wp--preset--spacing--60) * 1.6);
}

.foorm-block__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40)) var(--wp--style--root--padding-right, var(--wp--preset--spacing--40));
}

.foorm-block.width-narrow > .foorm-block__inner {
	max-width: calc(var(--wp--style--global--content-size, 720px) * 0.75);
}

.foorm-block.width-wide > .foorm-block__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.foorm-block.width-full > .foorm-block__inner {
	max-width: none;
}

/* Photos and banners run edge to edge at full width; text keeps its side padding. */
.foorm-block.width-full:is(.foorm-block--image, .foorm-block--image-row, .foorm-block--banner) > .foorm-block__inner {
	padding-inline: 0;
}

.width-full .foorm-section--image-row .foorm-section__media img {
	border-radius: 0;
}

.foorm-block.space-top-s { padding-top: var(--foorm-space-s); }
.foorm-block.space-top-m { padding-top: var(--foorm-space-m); }
.foorm-block.space-top-l { padding-top: var(--foorm-space-l); }
.foorm-block.space-top-xl { padding-top: var(--foorm-space-xl); }
.foorm-block.space-bottom-s { padding-bottom: var(--foorm-space-s); }
.foorm-block.space-bottom-m { padding-bottom: var(--foorm-space-m); }
.foorm-block.space-bottom-l { padding-bottom: var(--foorm-space-l); }
.foorm-block.space-bottom-xl { padding-bottom: var(--foorm-space-xl); }

/* Backgrounds: a palette colour or the owner's own (decision #70). */
.foorm-block.has-bg-surface {
	background: var(--wp--preset--color--surface);
}

.foorm-block.has-bg-accent {
	background: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--contrast);
}

.foorm-block.has-bg-dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.foorm-block.has-bg-dark :is(h1, h2, h3, h4, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.foorm-block.has-bg-dark .wp-element-button {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.foorm-block.has-bg-dark .foorm-section__column-heading,
.foorm-block.has-bg-dark .foorm-section__product-price,
.foorm-block.has-bg-dark .foorm-section__caption {
	color: var(--wp--preset--color--gold-light);
}

/*
 * Own colour (--foorm-bg from Renderer::wrap). A dark one also has
 * .has-bg-dark, so its text and buttons turn light.
 */
.foorm-block.has-bg-custom {
	background: var(--foorm-bg);
	color: var(--wp--preset--color--contrast);
}

.foorm-block.has-bg-custom.has-bg-dark {
	color: var(--wp--preset--color--base);
}

/*
 * Heading overrides from the section's Design panel (Renderer::wrap): each class comes with its
 * --foorm-heading-* value. Size works through --foorm-heading-scale in each heading's font-size.
 */
.foorm-block.has-heading-font :is(.foorm-section__heading, .foorm-section__hero-heading, .foorm-section__column-heading, .foorm-section__text :is(h2, h3, h4), .foorm-product__title, .foorm-product__text-heading) {
	font-family: var(--foorm-heading-font);
}

.foorm-block.has-heading-weight :is(.foorm-section__heading, .foorm-section__hero-heading, .foorm-section__column-heading, .foorm-section__text :is(h2, h3, h4), .foorm-product__title, .foorm-product__text-heading) {
	font-weight: var(--foorm-heading-weight);
}

.foorm-block.has-heading-style :is(.foorm-section__heading, .foorm-section__hero-heading, .foorm-section__column-heading, .foorm-section__text :is(h2, h3, h4), .foorm-product__title, .foorm-product__text-heading) {
	font-style: var(--foorm-heading-style);
}

.foorm-block.has-heading-case :is(.foorm-section__heading, .foorm-section__hero-heading, .foorm-section__column-heading, .foorm-section__text :is(h2, h3, h4), .foorm-product__title, .foorm-product__text-heading) {
	text-transform: var(--foorm-heading-case);
}

/* Beats the dark-band and photo-hero heading colours on purpose: the owner picked this one. */
.foorm-block.has-heading-color :is(.foorm-section__heading, .foorm-section__hero-heading, .foorm-section__column-heading, .foorm-section__text :is(h2, h3, h4), .foorm-product__title, .foorm-product__text-heading) {
	color: var(--foorm-heading-color);
}

/*
 * Text overrides (the section's text, not its headings): font, weight and colour for the text
 * boxes and quotes; size scales the body size (the quote scales its own size, below). Headings
 * typed inside the text keep their heading font, weight and size; bold text stays bolder.
 */
.foorm-block.has-text-font :is(.foorm-section__text, .foorm-section__quote, .foorm-product__text) {
	font-family: var(--foorm-text-font);
}

.foorm-block.has-text-weight :is(.foorm-section__text, .foorm-section__quote, .foorm-product__text) {
	font-weight: var(--foorm-text-weight);
}

/* "bolder" from a light weight is only 400, so bold text written in the editor stays bold. */
.foorm-block.has-text-weight :is(.foorm-section__text, .foorm-section__quote, .foorm-product__text) :is(strong, b) {
	font-weight: 700;
}

.foorm-block.has-text-color :is(.foorm-section__text, .foorm-section__quote, .foorm-product__text) {
	color: var(--foorm-text-color);
}

.foorm-block.has-text-scale :is(.foorm-section__text, .foorm-product__text) {
	font-size: calc(var(--wp--preset--font-size--medium) * var(--foorm-text-scale));
}

/* Shared section parts */
.foorm-section {
	margin: 0;
}

.foorm-section__heading {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--x-large) * var(--foorm-site-heading-scale, 1) * var(--foorm-heading-scale, 1));
	letter-spacing: 0.04em;
}

.foorm-section__text > :first-child {
	margin-block-start: 0;
}

.foorm-section__text > :last-child {
	margin-block-end: 0;
}

.foorm-section__text h3,
.foorm-section__text h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--large) * var(--foorm-site-heading-scale, 1) * var(--foorm-heading-scale, 1));
	font-weight: 400;
	margin-block: var(--wp--preset--spacing--20);
}

.foorm-section__buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.foorm-section__caption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Image shapes (ratio-*), shared by image, image row, image with text, columns and gallery. */
.foorm-section__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--foorm-radius, 6px);
}

.width-full .foorm-section--image .foorm-section__media img {
	border-radius: 0;
}

.foorm-section__media:not(.ratio-original) img {
	object-fit: cover;
}

.foorm-section__media.ratio-square img { aspect-ratio: 1; }
.foorm-section__media.ratio-portrait img { aspect-ratio: 3 / 4; }
.foorm-section__media.ratio-landscape img { aspect-ratio: 4 / 3; }
.foorm-section__media.ratio-wide img { aspect-ratio: 16 / 9; }

.width-full .foorm-section--image .foorm-section__caption {
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
}

/* Rich text */
.foorm-section--rich-text.is-align-center {
	text-align: center;
}

/* Lists stay left-aligned (readable bullets) but sit centred as a block. */
.foorm-section--rich-text.is-align-center .foorm-section__text :is(ul, ol) {
	display: inline-block;
	text-align: start;
}

.foorm-section--rich-text.is-align-center .foorm-section__buttons {
	justify-content: center;
}

/* Image with text */
.foorm-section--image-text {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 782px) {
	.foorm-section--image-text {
		grid-template-columns: 1fr 1fr;
	}

	.foorm-section--image-text.is-image-right .foorm-section__media {
		order: 2;
	}
}

/* Image row */
.foorm-section--image-row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 600px) {
	.foorm-section--image-row {
		grid-template-columns: repeat(var(--foorm-columns, 3), minmax(0, 1fr));
	}
}

.foorm-section__row-item {
	margin: 0;
}

/* Columns */
.foorm-section--columns > .foorm-section__heading {
	text-align: center;
}

.foorm-section__columns {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.foorm-section__columns {
		grid-template-columns: repeat(var(--foorm-columns, 3), minmax(0, 1fr));
	}
}

.foorm-section__column .foorm-section__media {
	margin-block-end: var(--wp--preset--spacing--30);
}

.foorm-section__column-heading {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--large) * var(--foorm-site-heading-scale, 1) * var(--foorm-heading-scale, 1));
	color: var(--wp--preset--color--accent-strong);
}

/* Banner: text centred; a background photo covers the whole band (the wrapper). */
.foorm-block--banner {
	position: relative;
	overflow: hidden;
}

.foorm-section--banner {
	display: grid;
	place-items: center;
	text-align: center;
	padding-inline: var(--wp--preset--spacing--40);
}

.foorm-section--banner .foorm-section__body {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--content-size, 720px);
}

.foorm-section--banner.has-image {
	min-height: 50vh;
	color: var(--wp--preset--color--base);
}

.foorm-section--banner.has-image :is(h2, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.foorm-section--banner .foorm-section__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keeps text readable over any photo. */
.foorm-section--banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(42 42 42 / 55%);
}

.foorm-section--banner .foorm-section__buttons {
	justify-content: center;
}

/* Products */
.foorm-section__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.foorm-section__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.foorm-section__product a {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	color: inherit;
	text-decoration: none;
}

.foorm-section__product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--foorm-radius, 6px);
}

.foorm-section__product a:hover .foorm-section__product-name,
.foorm-section__product a:focus-visible .foorm-section__product-name {
	text-decoration: underline;
}

.foorm-section__product-price {
	color: var(--wp--preset--color--muted);
}

/* Card badges (same look as the shop grid's). */
.foorm-section__product-media {
	position: relative;
	display: block;
}

.foorm-section__product-media .foorm-shop__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.foorm-section__product-media .foorm-shop__badge {
	padding: 3px 10px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
}

/* Inquiry */
.foorm-section--inquiry {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--foorm-radius, 6px);
}

.has-bg-surface .foorm-section--inquiry {
	background: var(--wp--preset--color--base);
}

.has-bg-dark .foorm-section--inquiry {
	color: var(--wp--preset--color--contrast);
}

.has-bg-dark .foorm-section--inquiry :is(h2, a) {
	color: var(--wp--preset--color--contrast);
}

/* Divider and spacer */
.foorm-section--divider {
	height: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.foorm-section--divider.is-short {
	width: 80px;
	margin-inline: auto;
	border-top-width: 2px;
	border-top-color: var(--wp--preset--color--accent);
}

.has-bg-dark .foorm-section--divider.is-line {
	border-top-color: rgb(255 255 255 / 25%);
}

.foorm-section--spacer.size-s { height: var(--wp--preset--spacing--30); }
.foorm-section--spacer.size-m { height: var(--wp--preset--spacing--50); }
.foorm-section--spacer.size-l { height: var(--wp--preset--spacing--60); }
.foorm-section--spacer.size-xl { height: calc(var(--wp--preset--spacing--60) * 2); }

/* Inquiry form (printed by the plugin's inquiries module) */
.foorm-inquiry {
	margin-block-start: var(--wp--preset--spacing--40);
}

.foorm-inquiry__form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 600px) {
	.foorm-inquiry__form {
		grid-template-columns: 1fr 1fr;
	}

	.foorm-inquiry__field--phone,
	.foorm-inquiry__field--message,
	.foorm-inquiry__note,
	.foorm-inquiry__form .wp-block-buttons {
		grid-column: 1 / -1;
	}
}

.foorm-inquiry__field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.foorm-inquiry__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.foorm-inquiry__field :is(input, textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--foorm-radius, 6px);
}

.foorm-inquiry__field :is(input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

.foorm-inquiry__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.foorm-inquiry__message {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--foorm-radius, 6px);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.foorm-inquiry__message.is-error {
	border-color: #b32d2e;
}

/* Honeypot: off-screen (not display:none, which some bots detect). */
.foorm-inquiry__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hero: the photo covers the whole band; text sits on a darkening layer. */
.foorm-block.width-full.foorm-block--hero > .foorm-block__inner,
.foorm-block.width-full.foorm-block--video > .foorm-block__inner {
	padding-inline: 0;
}

.foorm-section--hero {
	position: relative;
	box-sizing: border-box; /* heights include the padding, so "Full screen" is exactly one screen */
	display: grid;
	align-items: center;
	overflow: hidden;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
}

.foorm-section--hero.height-small { min-height: 22.5vh; padding-block: var(--wp--preset--spacing--30); }
.foorm-section--hero.height-medium { min-height: 45vh; }
.foorm-section--hero.height-tall { min-height: 70vh; }
.foorm-section--hero.height-full { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }

.foorm-section--hero .foorm-section__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.foorm-section--hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(42 42 42 / 60%), rgb(42 42 42 / 25%));
}

.foorm-section--hero .foorm-section__body {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.foorm-section--hero.is-align-center .foorm-section__body {
	text-align: center;
}

.foorm-section--hero.is-align-center .foorm-section__text {
	max-width: 36em;
	margin-inline: auto;
}

.foorm-section--hero.is-align-left .foorm-section__text {
	max-width: 36em;
}

.foorm-section--hero.is-align-center .foorm-section__buttons {
	justify-content: center;
}

.foorm-section__hero-heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--xx-large) * var(--foorm-site-heading-scale, 1) * var(--foorm-heading-scale, 1));
	line-height: 1.1;
}

.foorm-section--hero.has-image {
	color: var(--wp--preset--color--base);
}

.foorm-section--hero.has-image :is(h2, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.foorm-section--hero.has-image .wp-element-button {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Collections: category/tag tiles */
.foorm-section--collections > .foorm-section__heading,
.foorm-section--gallery > .foorm-section__heading,
.foorm-section--faq > .foorm-section__heading {
	text-align: center;
}

.foorm-section__tiles,
.foorm-section__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.foorm-section__tiles,
	.foorm-section__gallery {
		grid-template-columns: repeat(var(--foorm-columns, 3), minmax(0, 1fr));
	}
}

.foorm-section__tile {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	color: inherit;
	text-decoration: none;
}

.foorm-section__tile .foorm-section__media {
	display: block;
	overflow: hidden;
	border-radius: var(--foorm-radius, 6px);
	background: var(--wp--preset--color--surface);
}

.foorm-section__tile .foorm-section__media.ratio-square { aspect-ratio: 1; }
.foorm-section__tile .foorm-section__media.ratio-portrait { aspect-ratio: 3 / 4; }
.foorm-section__tile .foorm-section__media.ratio-landscape { aspect-ratio: 4 / 3; }

.foorm-section__tile .foorm-section__media img {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.4s ease;
}

.foorm-section__tile:hover img,
.foorm-section__tile:focus-visible img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.foorm-section__tile .foorm-section__media img {
		transition: none;
	}

	.foorm-section__tile:hover img,
	.foorm-section__tile:focus-visible img {
		transform: none;
	}
}

.foorm-section__tile-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
}

.foorm-section__tile:hover .foorm-section__tile-label,
.foorm-section__tile:focus-visible .foorm-section__tile-label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Quote */
.foorm-section--quote {
	margin: 0;
	text-align: center;
}

.foorm-section__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--x-large) * var(--foorm-text-scale, 1));
	line-height: 1.35;
}

.foorm-section__quote > :first-child::before {
	content: "“";
}

.foorm-section__quote > :last-child::after {
	content: "”";
}

.foorm-section__quote-by {
	display: grid;
	gap: 2px;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.foorm-section__quote-author {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.foorm-section__quote-detail {
	color: var(--wp--preset--color--muted);
}

.has-bg-dark .foorm-section__quote-detail {
	color: var(--wp--preset--color--gold-light);
}

/* FAQ */
.foorm-section__faq-item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.foorm-section__faq-item:first-child {
	border-top: 1px solid var(--wp--preset--color--border);
}

.foorm-section__faq-item summary {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}

.foorm-section__faq-item summary::-webkit-details-marker {
	display: none;
}

.foorm-section__faq-item summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--accent-strong);
}

.foorm-section__faq-item[open] summary::after {
	content: "−";
}

.foorm-section__faq-item summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.foorm-section__faq-item .foorm-section__text {
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Gallery */
.foorm-section__gallery figure {
	margin: 0;
}

.foorm-section__gallery a {
	display: block;
}

/* Video */
.foorm-section--video {
	position: relative;
	margin: 0;
}

.foorm-section__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--foorm-radius, 6px);
	background: var(--wp--preset--color--contrast);
}

.width-full .foorm-section__video {
	border-radius: 0;
}

.foorm-section__video-toggle {
	position: absolute;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	padding: 6px 12px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	background: rgb(42 42 42 / 70%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.foorm-section--video:has(figcaption) .foorm-section__video-toggle {
	bottom: calc(var(--wp--preset--spacing--30) + 2.2em);
}

.foorm-section__video-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* A hero that opens a page (title hidden) sits directly under the header: cancel the page's top padding. */
main:not(:has(.wp-block-post-title)) > .wp-block-post-content > .foorm-block--hero:first-child {
	margin-top: calc(var(--wp--preset--spacing--50) * -1);
}

/*
 * Button overrides from the section's Button style (Renderer::wrap). At the end of the file so
 * they beat the dark-band and photo-hero button colours. Size scales the font; the padding is in
 * em, so the whole button grows.
 */
.foorm-block.has-button-solid :is(.wp-element-button, .wp-block-button__link) {
	border: 1px solid transparent;
	background: var(--foorm-button-color, var(--wp--preset--color--contrast));
	color: var(--foorm-button-text, var(--wp--preset--color--base));
}

.foorm-block.has-bg-dark.has-button-solid :is(.wp-element-button, .wp-block-button__link) {
	background: var(--foorm-button-color, var(--wp--preset--color--base));
	color: var(--foorm-button-text, var(--wp--preset--color--contrast));
}

.foorm-block.has-button-color :is(.wp-element-button, .wp-block-button__link) {
	border-color: var(--foorm-button-color);
	background: var(--foorm-button-color);
}

.foorm-block.has-button-text :is(.wp-element-button, .wp-block-button__link) {
	color: var(--foorm-button-text);
}

/* Outline: no fill; the line and label take the button colour, else the text colour, else the section's. */
.foorm-block.has-button-outline :is(.wp-element-button, .wp-block-button__link) {
	border: 1px solid currentColor;
	background: transparent;
	/* Neither set: invalid at computed time, so the label inherits the section's text colour. */
	color: var(--foorm-button-color, var(--foorm-button-text));
}

.foorm-block.has-button-outline.has-button-text :is(.wp-element-button, .wp-block-button__link) {
	color: var(--foorm-button-text);
}

.foorm-block.has-button-font :is(.wp-element-button, .wp-block-button__link) {
	font-family: var(--foorm-button-font);
}

.foorm-block.has-button-weight :is(.wp-element-button, .wp-block-button__link) {
	font-weight: var(--foorm-button-weight);
}

.foorm-block.has-button-scale :is(.wp-element-button, .wp-block-button__link) {
	font-size: calc(var(--wp--preset--font-size--small) * var(--foorm-button-scale));
}