/*
 * Sefareshino looks: the visual tokens a demo (or the owner, in Site Editor → Styles) picks.
 *
 * Keyword tokens live in theme.json settings.custom.sfr.look (→ --wp--custom--sfr--look--*):
 *   texture      none | dots | grid | waves | grain | diagonal | terrazzo | girih | checker |
 *                stripes | zigzag | ruled | scallop
 *   card         plain | arch | ticket | polaroid | tile | blob | stamp | receipt | shelf-tag | bookmark
 *   bands        none | accent | dark | alternating
 *   header-size  regular | compact | tall
 *   header-tone  base | accent | dark
 *   type-scale   calm | bold | poster
 *   imagery      illustration | photo-free | pattern
 *   dark         off | on
 *   radius       soft | sharp | round | pill
 * functions.php turns them into body classes (sft-texture-dots, sft-card-arch, …); in the
 * editor canvas a tiny script does the same from the CSS variables, live.
 * Per-section overrides are Group block styles: is-style-sft-band-accent|dark|soft|none.
 *
 * Class prefix sft- (theme); the ordering app's own classes are sfr- and are only touched
 * through its documented custom properties and a few layout hooks (menu layouts, card cuts).
 * Never letter-spacing on Persian; every colour is a palette token.
 */

/* ------------------------------------------------------------------ palette capture
   Bands redefine the palette variables inside a section; these keep the originals. */
body {
	--sft-o-base: var(--wp--preset--color--base);
	--sft-o-surface: var(--wp--preset--color--surface);
	--sft-o-surface-2: var(--wp--preset--color--surface-2);
	--sft-o-contrast: var(--wp--preset--color--contrast);
	--sft-o-muted: var(--wp--preset--color--muted);
	--sft-o-line: var(--wp--preset--color--line);
	--sft-o-accent: var(--wp--preset--color--accent);
	--sft-o-accent-ink: var(--wp--preset--color--accent-ink);
	--sft-o-accent-soft: var(--wp--preset--color--accent-soft);
	--sft-o-secondary: var(--wp--preset--color--secondary);
	--sft-display-size: var(--wp--custom--sfr--display, clamp(2.375rem, 1.2rem + 3.6vw, 4.25rem));
	--sft-display-xl-size: var(--wp--custom--sfr--display-xl, clamp(2.75rem, 1rem + 6.4vw, 6.75rem));
	--sft-display-weight: 800;
	--sft-display-lh: 1.32;
	--sft-header-pad: clamp(0.85rem, 1.6vw, 1.25rem);
	--sft-card-r: var(--wp--custom--sfr--card-radius, 14px);
	--sft-r-sm: var(--wp--custom--radius--small, 6px);
	--sft-r-md: var(--wp--custom--radius--medium, 10px);
	--sft-r-lg: var(--wp--custom--radius--large, 14px);
	--sft-r-sheet: var(--wp--custom--radius--sheet, 20px);
	--sft-r-control: var(--wp--custom--radius--control, 8px);
	--sft-border: var(--wp--custom--border--width, 1px);
}

body.sft-dark-on {
	color-scheme: dark;
}

/* ------------------------------------------------------------------ the ordering app
   The app reads the palette and fonts by itself; the theme adds its radius hierarchy. */
body .sfr-app {
	--sfr-r-control: var(--sft-r-control);
	--sfr-r-panel: var(--sft-r-lg);
	--sfr-r-sheet: var(--sft-r-sheet);
}

/* ------------------------------------------------------------------ section rhythm */
:where(.wp-block-post-content, .entry-content) > :is(.sft-hero, .sft-section, .sft-cta) {
	margin-block: 0;
}

.wp-site-blocks > :is(main, footer) {
	margin-block-start: 0;
}

.sft-hero,
.sft-section {
	position: relative;
	overflow: clip;
}

.sft-section-head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.sft-section-head > * {
	margin-block: 0;
}

.sft-section-head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sft-lead {
	max-inline-size: 40rem;
}

/* Soft band: the alternate surface (also what bands=none alternates with on long pages). */
.wp-block-group.is-style-sft-band-soft,
body.sft-bands-alternating .sft-section:nth-child(4n+3 of .sft-section):not([class*="is-style-sft-band"]) {
	background-color: var(--sft-o-surface) !important;
}

/* ------------------------------------------------------------------ bands
   Accent band: the section sits on the accent colour; text, links and buttons invert. */
.wp-block-group.is-style-sft-band-accent,
body.sft-bands-accent .sft-section:nth-child(3n+2 of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-bands-alternating .sft-section:nth-child(4n+2 of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-header-tone-accent .sft-header,
.sft-accent-field {
	--wp--preset--color--base: var(--sft-o-accent);
	--wp--preset--color--surface: color-mix(in srgb, var(--sft-o-accent-ink) 10%, var(--sft-o-accent));
	--wp--preset--color--surface-2: color-mix(in srgb, var(--sft-o-accent-ink) 18%, var(--sft-o-accent));
	--wp--preset--color--contrast: var(--sft-o-accent-ink);
	--wp--preset--color--muted: var(--sft-o-accent-ink);
	--wp--preset--color--line: color-mix(in srgb, var(--sft-o-accent-ink) 38%, var(--sft-o-accent));
	--wp--preset--color--accent: var(--sft-o-accent-ink);
	--wp--preset--color--accent-ink: var(--sft-o-accent);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--sft-o-accent-ink) 14%, var(--sft-o-accent));
	--wp--preset--color--secondary: var(--sft-o-accent-ink);
	--sft-scene-fill: color-mix(in srgb, var(--sft-o-accent-ink) 16%, var(--sft-o-accent));
	background-color: var(--sft-o-accent) !important;
	color: var(--sft-o-accent-ink) !important;
}

/* Dark band: the inverse of the design (contrast colour as the ground): dark on light
   designs, light on dark ones. The pairs used stay the palette's AA-checked pairs. */
.wp-block-group.is-style-sft-band-dark,
body.sft-bands-dark .sft-section:nth-child(3n+2 of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-bands-alternating .sft-section:nth-child(4n of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-header-tone-dark .sft-header,
.sft-dark-field {
	--wp--preset--color--base: var(--sft-o-contrast);
	--wp--preset--color--surface: color-mix(in srgb, var(--sft-o-contrast) 90%, var(--sft-o-base));
	--wp--preset--color--surface-2: color-mix(in srgb, var(--sft-o-contrast) 82%, var(--sft-o-base));
	--wp--preset--color--contrast: var(--sft-o-base);
	--wp--preset--color--muted: color-mix(in srgb, var(--sft-o-base) 80%, var(--sft-o-contrast));
	--wp--preset--color--line: color-mix(in srgb, var(--sft-o-base) 26%, var(--sft-o-contrast));
	--wp--preset--color--accent: var(--sft-o-accent-soft);
	--wp--preset--color--accent-ink: var(--sft-o-contrast);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--sft-o-accent-soft) 24%, var(--sft-o-contrast));
	--wp--preset--color--secondary: var(--sft-o-accent-soft);
	--sft-scene-fill: color-mix(in srgb, var(--sft-o-base) 12%, var(--sft-o-contrast));
	background-color: var(--sft-o-contrast) !important;
	color: var(--sft-o-base) !important;
}

/* A dark design's "dark" band would be light: keep it a deeper shade of the ground instead. */
body.sft-dark-on .wp-block-group.is-style-sft-band-dark,
body.sft-dark-on.sft-bands-dark .sft-section:nth-child(3n+2 of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-dark-on.sft-bands-alternating .sft-section:nth-child(4n of .sft-section):not([class*="is-style-sft-band"], .sft-menu),
body.sft-dark-on.sft-header-tone-dark .sft-header {
	--wp--preset--color--base: color-mix(in srgb, var(--sft-o-base) 70%, #000);
	--wp--preset--color--surface: var(--sft-o-surface);
	--wp--preset--color--surface-2: var(--sft-o-surface-2);
	--wp--preset--color--contrast: var(--sft-o-contrast);
	--wp--preset--color--muted: var(--sft-o-muted);
	--wp--preset--color--line: var(--sft-o-line);
	--wp--preset--color--accent: var(--sft-o-accent);
	--wp--preset--color--accent-ink: var(--sft-o-accent-ink);
	--wp--preset--color--accent-soft: var(--sft-o-accent-soft);
	--wp--preset--color--secondary: var(--sft-o-secondary);
	background-color: color-mix(in srgb, var(--sft-o-base) 70%, #000) !important;
	color: var(--sft-o-contrast) !important;
}

/* Buttons on a band: outline buttons take the band's text colour. */
:is(.is-style-sft-band-accent, .is-style-sft-band-dark, .sft-accent-field, .sft-dark-field) .wp-block-button.is-style-outline > .wp-element-button,
body:is(.sft-bands-accent, .sft-bands-dark, .sft-bands-alternating) .sft-section .wp-block-button.is-style-outline > .wp-element-button {
	color: var(--wp--preset--color--contrast);
	border-color: currentColor;
}

/* Section links follow the band. */
:is(.sft-section, .sft-cta, .sft-footer, .sft-hero) :where(p, li) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ textures
   One layer per section (::before), tinted with the section's own text colour, so it reads
   on light, dark and banded sections alike. The mask is the only per-texture value. */
body.sft-texture-dots {
	--sft-tex: radial-gradient(circle, #000 1.4px, transparent 1.9px);
	--sft-tex-size: 22px 22px;
	--sft-tex-strength: 16%;
}

body.sft-texture-grid {
	--sft-tex: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
	--sft-tex-size: 32px 32px;
	--sft-tex-strength: 9%;
}

body.sft-texture-diagonal {
	--sft-tex: repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 14px);
	--sft-tex-size: auto;
	--sft-tex-strength: 9%;
}

body.sft-texture-stripes {
	--sft-tex: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 28px);
	--sft-tex-size: auto;
	--sft-tex-strength: 5%;
}

body.sft-texture-checker {
	--sft-tex: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
	--sft-tex-size: 36px 36px;
	--sft-tex-strength: 5%;
}

body.sft-texture-ruled {
	--sft-tex: repeating-linear-gradient(180deg, transparent 0 27px, #000 27px 28px);
	--sft-tex-size: auto;
	--sft-tex-strength: 10%;
}

body.sft-texture-waves {
	--sft-tex: radial-gradient(circle at 50% 100%, transparent 9px, #000 9.5px 11px, transparent 11.5px);
	--sft-tex-size: 28px 14px;
	--sft-tex-strength: 13%;
}

body.sft-texture-zigzag {
	--sft-tex: linear-gradient(135deg, transparent 75%, #000 75%), linear-gradient(225deg, transparent 75%, #000 75%);
	--sft-tex-size: 24px 12px;
	--sft-tex-strength: 8%;
}

body.sft-texture-scallop {
	--sft-tex: radial-gradient(circle at 50% 0, transparent 11px, #000 11.5px 13px, transparent 13.5px);
	--sft-tex-size: 26px 16px;
	--sft-tex-strength: 12%;
}

body.sft-texture-girih {
	--sft-tex: linear-gradient(45deg, transparent calc(50% - 0.7px), #000 calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)), linear-gradient(-45deg, transparent calc(50% - 0.7px), #000 calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)), radial-gradient(circle, transparent 4px, #000 4.5px 5.6px, transparent 6px);
	--sft-tex-size: 34px 34px;
	--sft-tex-strength: 11%;
}

body.sft-texture-grain {
	--sft-tex: radial-gradient(circle at 13% 27%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 61% 9%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 88% 52%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 34% 71%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 72% 86%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 5% 93%, #000 0.7px, transparent 1.2px), radial-gradient(circle at 47% 44%, #000 0.7px, transparent 1.2px);
	--sft-tex-size: 47px 47px;
	--sft-tex-strength: 22%;
}

body.sft-texture-terrazzo {
	--sft-tex: radial-gradient(ellipse 6px 4px at 12% 14%, #000 98%, transparent), radial-gradient(ellipse 7px 5px at 62% 18%, #000 98%, transparent), radial-gradient(circle 4px at 82% 58%, #000 98%, transparent), radial-gradient(ellipse 8px 5px at 20% 74%, #000 98%, transparent), radial-gradient(circle 4px at 47% 66%, #000 98%, transparent), radial-gradient(ellipse 5px 4px at 38% 40%, #000 98%, transparent), radial-gradient(circle 3px at 90% 90%, #000 98%, transparent), radial-gradient(circle 2.5px at 86% 14%, #000 98%, transparent), radial-gradient(circle 2px at 6% 46%, #000 98%, transparent), radial-gradient(circle 2px at 66% 94%, #000 98%, transparent);
	--sft-tex-size: 170px 170px;
	--sft-tex-strength: 20%;
}

body[class*="sft-texture-"]:not(.sft-texture-none) :is(.sft-hero, .sft-section:not(.sft-menu), .sft-cta, .sft-footer, .sft-header) {
	position: relative;
	isolation: isolate;
}

body[class*="sft-texture-"]:not(.sft-texture-none) :is(.sft-hero, .sft-section:not(.sft-menu), .sft-cta, .sft-footer, .sft-header)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: color-mix(in srgb, currentColor var(--sft-tex-strength, 12%), transparent);
	-webkit-mask-image: var(--sft-tex);
	mask-image: var(--sft-tex);
	-webkit-mask-size: var(--sft-tex-size);
	mask-size: var(--sft-tex-size);
}

/* ------------------------------------------------------------------ header */
.sft-header {
	position: relative;
	z-index: 30;
	padding-block: var(--sft-header-pad);
	border-block-end: var(--sft-border) solid var(--wp--preset--color--line);
}

body.sft-header-compact {
	--sft-header-pad: 0.5rem;
}

body.sft-header-tall {
	--sft-header-pad: clamp(1.25rem, 3vw, 2.25rem);
}

body.sft-header-tall .sft-header .wp-block-site-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.sft-header .wp-block-navigation {
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.sft-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.sft-header .wp-element-button {
	font-size: 1rem;
	padding: 0.65rem 1.3rem;
}

body.sft-header-compact .sft-header .wp-element-button {
	padding: 0.55rem 1.1rem;
}

.sft-header .has-background .wp-block-site-title a,
.has-background .wp-block-site-title a {
	color: inherit;
}

.sft-header-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Menu bar header: the navigation runs on its own full-width bar under the brand row. */
.sft-header--menu-bar {
	padding-block-end: 0;
}

.sft-menubar {
	margin-block-start: var(--sft-header-pad);
	padding-block: 0.35rem;
	border-block-start: var(--sft-border) solid var(--wp--preset--color--line);
}

/* Stacked header: centred brand above, a thin line, then navigation and order button. */
.sft-header--stacked .wp-block-site-title {
	font-size: var(--wp--preset--font-size--xx-large);
	text-align: center;
}

.sft-header--stacked .sft-header-row {
	border-block-start: var(--sft-border) solid var(--wp--preset--color--line);
	padding-block-start: 0.5rem;
}

@media (max-width: 599px) {
	.sft-header .wp-block-group:has(> .wp-block-site-title):has(> .wp-block-buttons) {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.sft-header .wp-block-group:has(> .wp-block-site-title) > .wp-block-site-title {
		flex: 1 1 auto;
		min-inline-size: 0;
		font-size: var(--wp--preset--font-size--large);
	}

	.sft-header .wp-block-group:has(> .wp-block-navigation) > .wp-block-navigation {
		order: 2;
	}

	.sft-header .wp-block-group:has(> .wp-block-site-title) > .wp-block-buttons {
		order: 1;
		flex-shrink: 0;
	}

	.sft-header .wp-element-button {
		padding: 0.55rem 0.9rem;
	}

	.sft-header-note {
		display: none;
	}

	.sft-header--stacked .wp-block-site-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* ------------------------------------------------------------------ display type */
.sft-hero .wp-block-column {
	container-type: inline-size;
}

.sft-display {
	font-size: min(var(--sft-display-size), 12.5cqi) !important;
	font-weight: var(--sft-display-weight);
	line-height: var(--sft-display-lh);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.sft-display--xl {
	font-size: min(var(--sft-display-xl-size), 13cqi) !important;
	line-height: 1.22;
}

:where(.sft-hero) > .sft-display--xl,
.sft-hero > .wp-block-group > .sft-display--xl {
	font-size: min(var(--sft-display-xl-size), 11vw) !important;
}

body.sft-type-bold {
	--sft-display-weight: 900;
}

body.sft-type-bold :where(h2, h3) {
	font-weight: 800;
}

body.sft-type-poster {
	--sft-display-weight: 900;
	--sft-display-lh: 1.24;
}

body.sft-type-poster :where(h2) {
	font-weight: 900;
	line-height: 1.3;
}

body.sft-type-calm :where(h2, h3) {
	font-weight: 700;
}

/* ------------------------------------------------------------------ small parts */
.sft-facts {
	gap: 0.5rem;
}

.sft-fact {
	margin: 0;
	padding: 0.35rem 0.9rem;
	border: var(--sft-border) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.sft-fact::before {
	content: "";
	display: inline-block;
	inline-size: 0.45em;
	block-size: 0.8em;
	margin-inline-end: 0.5em;
	border: solid var(--wp--preset--color--accent);
	border-width: 0 0.16em 0.16em 0;
	transform: rotate(45deg) translateY(-0.15em);
}

.sft-signature {
	max-inline-size: 38rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--secondary);
	font-weight: 600;
}

.sft-stats {
	gap: 0.75rem;
}

.sft-stat {
	flex: 1 1 10rem;
	padding: 1rem 1.25rem;
	border-radius: var(--sft-card-r);
	background: var(--wp--preset--color--surface);
	border: var(--sft-border) solid var(--wp--preset--color--line);
}

.sft-stat p {
	margin: 0;
}

.sft-stat strong {
	display: block;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}

/* ------------------------------------------------------------------ scenes
   Hero media on a palette backdrop: a shape, a ring and a dot patch. The demo's own hero
   art sits on top; without it the bundled drawing does. */
.sft-scene {
	--sft-scene-r: 58% 42% 47% 53% / 46% 52% 48% 54%;
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	inline-size: 100%;
	max-inline-size: 640px;
	aspect-ratio: 4 / 3;
	margin-inline: auto;
}

.sft-scene::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 6% 4% 2%;
	background-color: var(--sft-scene-fill, var(--wp--preset--color--accent-soft));
	border-radius: var(--sft-scene-r);
	transform: rotate(-4deg);
}

.sft-scene::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 26%;
	aspect-ratio: 1;
	inset-block-start: 0;
	inset-inline-start: 2%;
	border: 3px solid var(--wp--preset--color--secondary);
	border-radius: 50%;
}

.sft-scene > * {
	margin: 0 !important;
	inline-size: 92%;
}

.sft-scene img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.sft-art svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: var(--wp--preset--color--contrast);
}

body.sft-card-arch .sft-scene,
body.sft-card-bookmark .sft-scene {
	--sft-scene-r: 50% 50% var(--sft-r-lg) var(--sft-r-lg) / 40% 40% var(--sft-r-lg) var(--sft-r-lg);
}

body:is(.sft-card-tile, .sft-card-shelf-tag, .sft-card-receipt, .sft-card-stamp) .sft-scene {
	--sft-scene-r: var(--sft-r-lg);
}

/* Photo-free: the coloured shapes stay, pictures go. */
body.sft-imagery-photo-free .sft-scene > :is(figure, .sft-art) {
	visibility: hidden;
}

body.sft-imagery-photo-free .sft-scene::before {
	inset: 4%;
	transform: none;
	background-image:
		radial-gradient(circle at 30% 35%, var(--wp--preset--color--accent) 0 14%, transparent 14.5%),
		radial-gradient(circle at 68% 62%, var(--wp--preset--color--secondary) 0 19%, transparent 19.5%);
}

/* Pattern: the art sits on the site's texture, repeated, instead of a single shape. */
body.sft-imagery-pattern .sft-scene::before {
	transform: none;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent) 2px, transparent 2.6px);
	background-size: 18px 18px;
}

/* ------------------------------------------------------------------ heroes */
.sft-hero .wp-block-columns.alignwide {
	gap: clamp(1.5rem, 4.5vw, 4.5rem);
	margin-block: 0;
}

.sft-hero .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sft-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Poster: oversized type on a full-colour field. */
.sft-hero--poster {
	padding-block: clamp(2.5rem, 7vw, 6rem) !important;
}

.sft-hero--poster .sft-display {
	max-inline-size: min(100%, 9em); /* ch is narrow in Persian fonts */
}

.sft-hero--poster .sft-scene {
	max-inline-size: 440px;
}

/* Type-only: the name in huge type, two big rings in a corner. */
.sft-hero--type {
	padding-block: clamp(3rem, 9vw, 7.5rem) !important;
}

.sft-hero--type::after {
	content: "";
	position: absolute;
	z-index: 0;
	inline-size: clamp(180px, 30vw, 460px);
	aspect-ratio: 1;
	inset-block-end: -34%;
	inset-inline-end: -10%;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	box-shadow: 0 0 0 clamp(14px, 2.4vw, 34px) var(--wp--preset--color--base), 0 0 0 clamp(17px, 2.7vw, 38px) var(--wp--preset--color--secondary);
}

.sft-hero--type > * {
	position: relative;
	z-index: 1;
}

/* Banner: a photo-free colour band with a ribbon of facts. */
.sft-hero--banner .sft-banner-ribbon {
	margin-block-start: var(--wp--preset--spacing--60) !important;
	padding-block: 0.75rem;
	border-block: var(--sft-border) dashed var(--wp--preset--color--line);
}

/* Order-first / menu-first: the live app (or a menu teaser) is the hero. */
.sft-hero--order .sft-hero-panel,
.sft-hero--menu .sft-hero-panel {
	padding: clamp(1rem, 2.5vw, 1.75rem);
	border-radius: var(--sft-r-sheet);
	background: var(--wp--preset--color--base);
	border: var(--sft-border) solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--raised, 0 8px 24px rgb(0 0 0 / 10%));
}

.sft-hero--order .sft-hero-panel .sfr-app {
	max-block-size: 72vh;
	overflow: auto;
}

/* Card over a framed scene. */
.sft-frame {
	padding: clamp(1rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--sft-r-sheet);
	overflow: hidden;
}

.sft-hero-card {
	position: relative;
	z-index: 1;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: var(--sft-card-r);
	background: var(--wp--preset--color--base);
	border: var(--sft-border) solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--raised, 0 8px 24px rgb(0 0 0 / 10%));
}

@media (min-width: 782px) {
	.sft-hero--card-over .sft-hero-card {
		margin-inline-start: -18%;
	}
}

/* Collage: three tiles of art at different sizes. */
.sft-collage {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: auto auto;
	gap: 0.75rem;
}

.sft-collage > * {
	margin: 0 !important;
	border-radius: var(--sft-card-r);
	overflow: hidden;
	background: var(--wp--preset--color--accent-soft);
	min-block-size: 9rem;
}

.sft-collage > :first-child {
	grid-row: span 2;
}

.sft-collage img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	aspect-ratio: 4 / 3;
}

.sft-collage > .sft-collage__fill {
	display: grid;
	place-items: center;
	padding: 1rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.sft-collage > .sft-collage__fill p {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	text-align: center;
}

body.sft-imagery-photo-free .sft-collage img {
	visibility: hidden;
}

@media (max-width: 781px) {
	.sft-scene {
		max-inline-size: 420px;
	}

	.sft-hero--order .sft-hero-panel .sfr-app {
		max-block-size: none;
	}
}

/* ------------------------------------------------------------------ cards
   Theme cards (.sft-card) take the full cut; the ordering app's product cards
   (.sfr-app .sfr-card) take a calmer version that never clips its add button. */
.sft-card {
	padding: clamp(1rem, 2vw, 1.5rem);
	border: var(--sft-border) solid var(--wp--preset--color--line);
	border-radius: var(--sft-card-r);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.sft-card > * {
	margin-block: 0;
}

.sft-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

body.sft-card-arch .sft-card {
	border-radius: 50% 50% var(--sft-r-md) var(--sft-r-md) / 4.5rem 4.5rem var(--sft-r-md) var(--sft-r-md);
	padding-block-start: 2.75rem;
}

body.sft-card-arch .sfr-app .sfr-card {
	border-start-start-radius: 3rem;
	border-start-end-radius: 3rem;
}

body.sft-card-ticket .sft-card {
	border-style: dashed;
	border-radius: var(--sft-r-sm);
	-webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
	mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
	padding-inline: 28px;
}

body.sft-card-ticket .sfr-app .sfr-card {
	border-style: dashed;
	border-radius: var(--sft-r-sm);
}

body.sft-card-polaroid .sft-card {
	border: 0;
	border-radius: 3px;
	padding: 12px 12px 2.5rem;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 12px 28px rgb(0 0 0 / 14%);
	transform: rotate(-1.2deg);
}

body.sft-card-polaroid .sft-card:nth-child(even) {
	transform: rotate(1deg);
}

body.sft-card-polaroid .sfr-app .sfr-card {
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 8px 18px rgb(0 0 0 / 10%);
}

body.sft-card-tile :is(.sft-card, .sfr-app .sfr-card) {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: 5px 5px 0 var(--wp--preset--color--accent);
}

body.sft-card-blob .sft-card {
	border-radius: 4.5rem 1.25rem 5rem 1.5rem / 3.5rem 1.5rem 4rem 1.25rem;
	padding: 28px 26px 32px;
}

body.sft-card-blob .sfr-app .sfr-card {
	border-radius: 2rem 0.75rem 2rem 0.75rem;
}

/* Stamp: a perforated postage edge. */
body.sft-card-stamp .sft-card {
	border: 0;
	border-radius: 0;
	padding: 1.5rem;
	background:
		radial-gradient(circle at 6px 6px, transparent 4px, var(--wp--preset--color--surface) 4.5px) -6px -6px / 16px 16px;
	outline: 2px solid var(--wp--preset--color--line);
	outline-offset: -10px;
}

body.sft-card-stamp .sfr-app .sfr-card {
	border: 2px dotted var(--wp--preset--color--line);
	border-radius: var(--sft-r-sm);
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -6px;
}

/* Receipt: a till slip with a torn zigzag bottom edge. */
body.sft-card-receipt .sft-card {
	border: 0;
	border-radius: 0;
	padding-block-end: 2rem;
	background: var(--wp--preset--color--surface);
	-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 20px 10px repeat-x;
	mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 20px 10px repeat-x;
}

body.sft-card-receipt .sfr-app .sfr-card {
	border-radius: 0;
	border-style: solid none dashed;
	border-width: 0 0 2px;
}

/* Shelf tag: a price label with a clipped corner and a punched hole. */
body.sft-card-shelf-tag .sft-card {
	position: relative;
	border-radius: var(--sft-r-sm);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	border-inline-start: 6px solid var(--wp--preset--color--accent);
}

body.sft-card-shelf-tag .sft-card::after {
	content: "";
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	inline-size: 9px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--line);
}

body.sft-card-shelf-tag .sfr-app .sfr-card {
	border-radius: var(--sft-r-sm);
	border-block-end: 4px solid var(--wp--preset--color--accent);
}

/* Bookmark: a ribbon tab hanging from the top edge. */
body.sft-card-bookmark .sft-card {
	position: relative;
	padding-block-start: 2.25rem;
}

body.sft-card-bookmark .sft-card::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 1.25rem;
	inline-size: 1.25rem;
	block-size: 1.9rem;
	background: var(--wp--preset--color--secondary);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

body.sft-card-bookmark .sfr-app .sfr-card {
	border-block-start: 4px solid var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ menu layouts
   The same ordering app in seven arrangements; the wrapper class chooses.
   They shape only the default (horizontal) menu: a layout chosen in the plugin wins. */
.sft-menu .sfr-app {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sft-menu--list .sfr-app .sfr-layout--horizontal .sfr-grid,
.sft-menu--table .sfr-app .sfr-layout--horizontal .sfr-grid {
	grid-template-columns: 1fr;
}

.sft-menu--cards .sfr-app .sfr-layout--horizontal .sfr-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1rem;
}

.sft-menu--cards .sfr-app .sfr-layout--horizontal .sfr-card:not(.is-text) {
	grid-template-columns: 1fr;
	grid-template-areas: "media" "body" "foot";
}

.sft-menu--cards .sfr-app .sfr-layout--horizontal .sfr-card:not(.is-text) .sfr-card__media {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
}

.sft-menu--compact .sfr-app .sfr-layout--horizontal .sfr-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0;
	border-block-start: var(--sft-border) solid var(--wp--preset--color--line);
}

.sft-menu--compact .sfr-app .sfr-layout--horizontal .sfr-card {
	grid-template-columns: 1fr;
	grid-template-areas: "body" "foot";
	border-width: 0 0 var(--sft-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.sft-menu--compact .sfr-app .sfr-layout--horizontal .sfr-card__media,
.sft-menu--table .sfr-app .sfr-layout--horizontal .sfr-card__media {
	display: none;
}

/* Shelf: each category scrolls sideways like a shop shelf. */
.sft-menu--shelf .sfr-app .sfr-layout--horizontal .sfr-grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 280px);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: 0.5rem;
	scrollbar-width: thin;
}

.sft-menu--shelf .sfr-app .sfr-layout--horizontal .sfr-card {
	scroll-snap-align: start;
	grid-template-columns: 1fr;
	grid-template-areas: "media" "body" "foot";
}

.sft-menu--shelf .sfr-app .sfr-layout--horizontal .sfr-card__media {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
}

.sft-menu--shelf .sfr-app .sfr-layout--horizontal .sfr-section {
	padding-block-end: 0.75rem;
	border-block-end: 6px solid var(--wp--preset--color--surface-2);
}

/* Table: a printed price list, name and price joined by a dotted leader. */
.sft-menu--table .sfr-app .sfr-layout--horizontal .sfr-grid {
	gap: 0;
}

.sft-menu--table .sfr-app .sfr-layout--horizontal .sfr-card {
	grid-template-columns: 1fr auto;
	grid-template-areas: "body foot";
	align-items: center;
	padding-inline: 0;
	border-width: 0 0 var(--sft-border);
	border-style: dotted;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	clip-path: none;
	-webkit-mask: none;
	mask: none;
}

/* Tabs: the category bar becomes the page's main navigation. */
.sft-menu--tabs .sfr-app .sfr-cats {
	gap: 0.5rem;
	padding-block: 0.75rem;
}

.sft-menu--tabs .sfr-app .sfr-cats a {
	border: var(--sft-border) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

.sft-menu--tabs .sfr-app .sfr-cats a[aria-current="true"] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

/* ------------------------------------------------------------------ featured strip / tiles */
.sft-strip {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 0.5rem;
}

.sft-strip > * {
	scroll-snap-align: start;
	margin: 0 !important;
}

.sft-dish .wp-block-image {
	margin: 0;
	border-radius: var(--sft-r-md);
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}

.sft-dish .wp-block-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.sft-dish h3 {
	font-size: var(--wp--preset--font-size--large);
}

.sft-price {
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

.sft-tiles {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: 0.75rem;
}

.sft-tiles > * {
	margin: 0 !important;
}

.sft-tile {
	display: grid;
	gap: 0.35rem;
	align-content: end;
	min-block-size: 8.5rem;
	padding: 1rem;
	border-radius: var(--sft-card-r);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.sft-tile:nth-child(3n+2) {
	background: var(--wp--preset--color--surface-2);
}

.sft-tile .wp-block-image {
	margin: 0;
	inline-size: 64%;
	justify-self: end;
}

.sft-tile h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.sft-tile h3 a {
	color: inherit;
	text-decoration: none;
}

/* The whole tile is the link target. */
.sft-tile:has(h3 a) {
	position: relative;
}

.sft-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------------ deals band */
.sft-deal {
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: var(--sft-r-md);
	padding: 1rem 1.25rem;
}

.sft-deal-code {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 0.8rem;
	border-radius: var(--sft-r-sm);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 800;
	direction: ltr;
	unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ zones, branches, hours */
.sft-zones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 0.75rem;
}

.sft-zone {
	display: grid;
	gap: 0.15rem;
	padding: 0.9rem 1.1rem;
	border: var(--sft-border) solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--sft-r-md);
	background: var(--wp--preset--color--surface);
}

.sft-zone strong {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
}

.sft-zone span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sft-zone__fee {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 700;
}

.sft-hours-box {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--sft-card-r);
	background: var(--wp--preset--color--surface);
	border: var(--sft-border) solid var(--wp--preset--color--line);
}

/* A route line drawn under the delivery area list. */
.sft-route {
	block-size: 10px;
	margin-block: var(--wp--preset--spacing--40) !important;
	background: radial-gradient(circle, var(--wp--preset--color--accent) 3px, transparent 3.5px) 0 50% / 22px 10px repeat-x;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ steps */
.sft-step-icon {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: var(--sft-r-md);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

.sft-step-icon svg {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

body.sft-radius-pill .sft-step-icon,
body.sft-radius-round .sft-step-icon {
	border-radius: 50%;
}

/* ------------------------------------------------------------------ testimonials */
.sft-quote {
	margin: 0;
}

.sft-quote p {
	margin: 0;
}

.sft-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sft-quote-big {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--heading);
	text-wrap: balance;
}

.sft-quote-mark {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4rem;
	font-weight: 900;
	line-height: 1;
}

/* ------------------------------------------------------------------ faq */
.sft-faq summary {
	min-block-size: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.sft-faq summary::-webkit-details-marker {
	display: none;
}

.sft-faq summary::after {
	content: "";
	flex: none;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border: solid var(--wp--preset--color--accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.sft-faq[open] summary::after {
	transform: rotate(-135deg);
}

.sft-faq p {
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ cta */
.sft-cta-card {
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--sft-r-sheet);
}

/* Pre-order slots: a row of time chips (static examples; the app shows the real ones). */
.sft-slots {
	gap: 0.5rem;
}

.sft-slot {
	margin: 0;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 1rem;
	border: var(--sft-border) solid var(--wp--preset--color--line);
	border-radius: var(--sft-r-control);
	background: var(--wp--preset--color--base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sft-slot.is-picked {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

/* Weight note: a scale drawn as a dial. */
.sft-scale {
	display: grid;
	place-items: center;
	inline-size: 5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--accent);
	background:
		conic-gradient(from 220deg, var(--wp--preset--color--accent) 0 35%, transparent 35% 100%) content-box;
	padding: 8px;
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
	mask: radial-gradient(circle, transparent 54%, #000 55%);
}

/* ------------------------------------------------------------------ gallery */
.sft-gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 0.75rem;
}

.sft-gallery > * {
	margin: 0 !important;
}

.sft-gallery .wp-block-image {
	border-radius: var(--sft-card-r);
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}

.sft-gallery .wp-block-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 0.5rem;
}

/* ------------------------------------------------------------------ app / courier promo */
.sft-phone {
	inline-size: min(100%, 260px);
	margin-inline: auto;
	padding: 14px;
	border-radius: 34px;
	background: var(--wp--preset--color--contrast);
}

.sft-phone__screen {
	display: grid;
	gap: 0.6rem;
	padding: 1rem;
	border-radius: 22px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	min-block-size: 360px;
	align-content: start;
}

.sft-phone__screen > * {
	margin: 0 !important;
}

.sft-phone__bar {
	block-size: 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
}

.sft-phone__bar.is-accent {
	background: var(--wp--preset--color--accent);
	inline-size: 62%;
}

.sft-phone__row {
	padding: 0.6rem 0.75rem;
	border-radius: var(--sft-r-md);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.sft-phone__row.is-done {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ footer */
.sft-footer {
	padding-block: var(--wp--preset--spacing--60);
}

.sft-footer :where(h2, h3) {
	margin-block-end: 0.5rem;
}

.sft-footer .wp-block-navigation {
	gap: 0.25rem 1.25rem;
}

.sft-footer-legal {
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ order / track pages */
.sft-order-page .sfr-app {
	min-block-size: 60vh;
}

/* ------------------------------------------------------------------ 404 */
.sft-404-mark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 900;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 781px) {
	.sft-strip {
		grid-auto-columns: minmax(200px, 78%);
	}

	.sft-collage {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sft-card-polaroid .sft-card {
		transform: none;
	}
}

/* ------------------------------------------------------------------ bundled art colours */
.sft-art .sh { fill: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent); }
.sft-art .p1 { fill: var(--wp--preset--color--base); }
.sft-art .p2 { fill: var(--wp--preset--color--surface-2); }
.sft-art .a { fill: var(--wp--preset--color--accent); }
.sft-art path.a[fill="none"] { fill: none; stroke: var(--wp--preset--color--accent); }
.sft-art .s { fill: var(--wp--preset--color--secondary); }
.sft-art .k { fill: var(--wp--preset--color--contrast); opacity: 0.75; }
.sft-art .ln { stroke: var(--wp--preset--color--contrast); }

/* Display faces (Jomhuria, Katibeh, Aref Ruqaa, …) are readable only when large: a heading
   set to a size under 28px uses the body face; names, prices and buttons always do. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title).has-large-font-size,
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title).has-medium-font-size,
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title).has-small-font-size,
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title).has-x-small-font-size,
.wp-element-button,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
}